日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

axure手机页面设计说明_Axure中移动端原型设计方法

發布時間:2023/12/31 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 axure手机页面设计说明_Axure中移动端原型设计方法 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在使用Axure設計移動端原型的應用方面,我總結出了兩種常用的方法。第一種是更適合在移動端進行演示的設計方法,大家可以參考我之前已經分享過的一篇教程:使用Axure打造最佳的移動端交互原型教程,使用這種方法輸出的原型在手機設備上進行演示時可以達到跟真實APP幾乎一致的展示效果及交互體驗。在今天我將分享另外一種基于設備模板的移動端原型設計方法。

什么是基于設備模板的移動端原型設計方法?簡而言之就是在Axure的編輯界面中放置對應的機型模板,使輸出的原型達到更規范和真實的演示效果。其實這是一種很常見的移動端原型的設計方法,很多同行在設計原型的時候也都用過。這篇分享教程將對個設計方法進行了總結和梳理,并基于這個方法制作了一套可快速復用的模板。這套模板具有幾個方面的特點:

● 結構化,根據APP界面結構進行搭建;

● 標準化,非常方便進行編輯和維護;

● 高保真,可高度還原移動端交互效果;

在本篇分享的結尾我會提供模板的Axure源文件下載,其中包含了最新的IPhoneX和IPhone8等多套IOS設備機型,以及一些常見的界面元素和交互效果。在開始正式的介紹之前,大家可以查看使用這套模板還原IOS中兩款官方應用的設計演示。

IOS11 AppStroe For iPhoneX 原型演示

IOS11 Contacts For iPhone8 原型演示

1.界面元素和結構介紹

由于這套模板是基于IOS系統進行設計的,所以相關界面元素和交互方式均以IOS為標準。目前主流的移動端系統除了IOS還有Android,這兩種系統設計標準和交互方式其實是存在一些差異的,不過目前市面上大部分APP在設計時并沒有爭對兩種系統做單獨的處理。

所以如果沒有特珠需求的話,我們一般也只需要輸出一套原型方案就可以了,不過設計過程中需要盡量兼顧這兩個主流的系統。當然,如果你的產品明確需要按照Android的系統規范來設計,你也可以參照本教程設計一套Android的原型模板,相關交互方式可以參照Android版的交互指南規范。

在開始介紹模板的搭建和使用方法之前,需要先對APP的界面結構做一個簡單的介紹,熟悉了界面結構可以方便我們后續的設計。常見APP的界面主要由以下元素或組件組成:

StatusBar / 狀態欄

狀態欄顯示設備的關鍵信息,包含設備模型或網絡提供商、網絡信號強度、電池使用量、時間等。在特殊界面中可以對狀態欄做隱藏處理,或根據需要自定義狀態欄背景。

NavBar / 導航欄

導航欄位于app內容區的上方,系統狀態欄的下方,并且提供在一系列頁面中的導航能力。可在導航欄中顯示當前視圖的標題,如果標題非常冗長且無法精簡,可以空缺,避免用過多的元素填滿導航欄。導航欄中可以添加文字和圖標控件,相關控件的可點擊區域需要大于控件的可視大小。

Body / 內容區

內容區域根據需要進行自定義設計,常見的設計形式有菜單列表、圖標列表、卡片列表、圖文組合等。

TabBar / 標簽欄

標簽欄位于APP底部,方便用戶在不同功能模塊之間進行快速切換。標簽欄一般用作APP的一級分類,數量控制在3-5個之間。建議使用Badge進行提示,讓用戶知道有內容更新。

Toolbar / 工具欄

工具欄一般會出現在視圖的的底部,提供給用戶相關可操作的功能按紐。如,郵件應用程序里的收件箱欄中有刪除、分享、答復等等。

Modal / 彈出層

移動端的彈出層根據彈出方式不同,共分為模態窗口、動作面板、彈出面板等幾種不同的類型。在實際使用中,可根據界面的交互方式選擇對應的類型。

Toast / 輕提示

一種輕量級反饋提示,可以用來顯示不會打斷用戶操作的內容,適合用于頁面轉場、數據交互的等場景中。一次只顯示一個輕提示,有圖標的提示字數為4-6個,沒有圖標的輕提示字數不宜超過14個。

TableView / 列表視圖

列表視圖是移動端APP中一種通用的界面元素。很多應用程序在一定程度上,都有使用表視圖來顯示數據列表。常見的例如IOS的聯系人應用中聯系人信息列表,另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數據,也可以用來呈現圖像數據。

以上是豆瓣APP的一個界面截圖示例,界面的結構用顏色進行了區分,從上至下分別為:狀態欄、導航欄、內容區、標簽欄。

2.結構化的模板搭建

在介紹完APP的界面結構之后,接下來說明一下模板的搭建方法。在本篇教程的結尾會提供了已經制作好的模板的文件,大家可以下載并參考本部分介紹進行使用,也可以參照介紹制作自己的原型模板。

在制作模板時需要用到對應的機型設備的圖片素材,可以通過Dribbble等設計分享平臺找到對應的素材文件,然后對素材做一些簡單的處理。處理的過程首先是去掉多余的元素,只保留機型設備的框架圖片。另外還需要對圖片的尺寸進行調整,例如在制作手機等移動端模板時我們將內容區域定為375px,需要根據所定的內容區域對圖片的尺寸進行相應的調整。

為什么模板的內容區域是375px?這個問題我在上篇教程中進行過介紹,所以不再進行展開說明。但是需要記住的這個尺寸是一個重要的標準,后續在設計過程中相關元件的寬度尺寸都需要參照這個標準。機型設備的圖片素材準備好之后,我們在Axure中創建一個對應的母版,然后將機型設備圖片拖入到母版中。母版的名稱可以按該機型設備的名稱命名,后面在使用時在新建的頁面中拖入該母版即可。

下一步需要創建前面介紹過的APP界面中常見元素或組件,首先大家可以看一下這張圖片中已經創建好的模板,其中包含了機型母版、輕提示、彈層、導航欄、標簽欄、內容框架等元素。

在這個模板頁面的概要視圖中可以看到相關的對象,所有對象我都創建了一個對應的動態面板。這樣的處理主要出于兩個方面的考慮,一是方便對相關元素進行編輯維護,二是相關對象的顯示是有順序的,這樣可以方便在概要視圖中進行排序處理。

3.模板使用細節說明;

在內容框架中編輯界面內容;

界面的主要內容在內容框架動態面板中進行編輯和維護,由于該動態面板設置了自動顯示滾動條,如果你的界面內容超出了一屏,在演示時可以通過在內容框架區域滾動鼠標滾輪查看更多內容。

關于模板界面元素的尺寸說明:

模板中的界面元素的尺寸并沒有非常嚴格的標準,以下尺寸是我根據比例進行設置的,僅供參考。IphoneX狀態欄:44px、IphoneX標簽欄:80px、Iphone8狀態欄:28px、IphoneX標簽欄:60px、導航欄:40px。另外,內容區域的高度因為機型設備的素材圖片不統一可能略有差異,基本上可以忽略。

每個界面對應一個頁面;

在設計原型時建議每一個界面創建一個對應的頁面,通過添加頁面鏈接進行界面跳轉,這樣方便對原型進行編輯和維護。不建議將多個界面用動態面板堆砌在一起頁面內,這樣會使輸出的原型在演示時出現卡頓現象。

關于元素的層級順序;

在概要視圖中可以看到相關元素對應動態面板的層級順序,在使用該模板的時候請盡量參照此順序,否則可能在演示時出現顯示錯誤的情況。

關于底部標簽欄的設置;

為了方便維護可以將標簽欄創建為母版,然后添加到需要顯示標簽欄的頁面中。另外,在對應的頁面中需要顯示對應的標簽選中效果,只需要在該頁面中的標簽欄動態面板中添加一個選中效果的標簽元件。

熱區占位符的使用;

如果頁面中添加了標簽欄或工具欄,由于標簽頁的動態面板在內容框架的動態面板之上,在演示時會出現內容有一部分被擋住的情況。可以創建一個高度為100px的熱區元件為母版,將母版拖入對應的頁面底部,用來解決內容區域被擋住的問題。

4.常用設計元素及規范

經常有朋友向我咨詢如何設計出更漂亮美觀的原型,雖然原則上原型能完整的體現出需求細節即可,好看并不是我們在原型輸出時應該關注的重點,但是如果能滿足說明需求的同時能把原型做得更漂亮一些更好,這也算是體現專業程度和工作態度的一個方面,而且很多人對自己的輸出物也是有強烈的美感追求的。

其實原型設計不需要了解太復雜的設計方法,只要掌握一點簡單的技巧就能達到美觀的效果,同時能讓整體更統一和標準。在分享的這套模板中包含了一些基本的設計元素,我下面對其中的一些規范細節進行說明,供大家進行參考。

配色方案

◆ 一般采用黑白灰的配色方案就能夠滿足基本設計要求了,但是如果能稍微得加上一些亮色的配色效果,可以使原型更好的體現出視覺層級,這對UI是有一定的參考價值的。不要感覺得配色效果能夠影響UI的設計,如果UI會被原型中的配色影響,只能說明UI的設計能力有待提升;

整套原型中亮色主色調不要超過兩個,對于主要按紐和重點提示可以加上主色調色值,次要元素統一使用#000000、#333333、#999999等灰色輔助色;

◆ 模板中的這套模板方案中的主色調是從IOS11的UI設計規范中提取的,你可以根據自己的需要整理一套自己的配色方案,建議盡量使用扁平化設計色值;

配色板使用

Axure中的配色板提供了一些常用的顏色色值,可用作一些常用元素的顏色配色。例如截圖中標注1中的縱向的灰色色值可用于相關字體元素的顏色,標注2中橫向的灰色色值可用于相關元素的背景和線條的顏色。另外,點擊標注3中的更多按紐,可以將其它的常用色值加入到自定義顏色中,方便快速的使用。

字體元素

◆ 原型設計時的字體字號建議統一使用偶數,常用的標題字號為16px、18px、20px,常用的正文字號為12px、14px;

針對不同字體大小的多行文本單獨設置對應的行間距,例如12px的多行文本行間距建議設置為20,14px的多行文本行間距建議設置為28;

推薦中文字體統一使用微軟雅黑,由于Axure的默認字體為Arial,可以通過生成HTML設置中的字體映射,將Arial映射為微軟雅黑,這樣就不需要在設計時去單獨設置每個元件的字體了。

其它元素

◆ 原型設計時元件的寬度建議統一保持為5和10的倍數,元件的間距建議為10px或20px;

◆ 使用鍵盤方向鍵移動選中的元件時每次移動距離為1px ,使用ctrl 鍵盤方向鍵每次移動距離為10px;

◆ 按住Ctrl 鼠標拖動可以快速的復制元件,按住Shift 鼠標拖動可以垂直或水平的移動元件;

對齊及分布工具使用

有對齊強迫癥的朋友可以使用頂部工具欄中的對齊及分布工具對元件進行處理,右擊頂部的工具欄區◆ 域可以自定義顯示或隱藏相關的工具圖標;

選中多個元件時可以使用對齊工具快速的對多個元件進行各種對齊處理,還可以使用分布工具快速的對多個元件進行垂直或水平分布處理;

5.使用輔助線進行排版;

在以前的教程中已經介紹過輔助線的使用方法,合理的使用輔助線可以幫助我們提升設計效率,同時能讓輸出的原型效果更標準,所以強烈建議大家在設計過程中使用。以下是模板中內容框架編輯區域的截圖,是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線,可以看到其中共有4條,分別介紹一下它們的作用和位置:

第1條輔助線是用來劃分左邊的內容留白區域,例如我一般習慣將左邊留白為20px,這條輔助線位于x軸的20px位置。

第2條輔助線是內容居中輔助線,之前已經介紹過模板的設計寬度標準為375px,這條輔助線位于x軸的188px位置;(375px/2=187.5px)

第3條輔助線用來劃分右邊的內容留白區域,例如右邊跟左邊留白一樣為20px,這條輔助線位于x軸的355px位置;(375px-20px=355px)

第4條輔助線是用來劃分內容設計區域,例如模板的設計寬度標準為375px,這條輔助線位于位于x軸的375px位置;

這些輔助線的用法只是作為參考,可以根據自己的需要新建對應的輔助線。鼠標光標移動到編輯區域的左側和頂部的標尺區域,按住鼠標左鍵并往編輯區域拖動時,就可以生成橫向x軸或縱向y軸的輔助線,然后將輔助線拖動到對應的位置即可。輔助線還有一個特性就是當拖動元件靠近它時,元件會自動吸附到輔助線的邊緣達到快速對齊的效果。

幾點輔助線的使用小技巧:

右擊輔助線可以將其鎖定,以防止拖動元件時會將輔助線會跟著一起移動;

可以通過按住Ctrl拖動創建全局輔助線,全局輔助線就是在所有頁面中產生一條相同的輔助線;

在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除;

在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線;

在“布局—柵格和輔助線—輔助線設置”中可以修改輔助線的顏色或進行更多設置;

6.Toast提示交互設置;

移動端原型中最常用的交互效果就是彈出層和輕提示兩種,模板中已經包含了這種兩交互效果的相關元件和事件,這里再單獨簡單的介紹一下。

Toast提示顯示效果

在模板頁面的概要視圖中可以看到名為“提示”的動態面板,需要顯示的提示信息在這個動態面板中編輯就可以了。當前的動態面板中有一個“操作成功”的提示狀態,如果在一個頁面中顯示多個提示,可以新增對應的狀態然后修改相關的提示內容。

選中提示的動態面板的狀態右擊選擇復制狀態可以快速創建新的提示。建議對每個對應的提示狀態進行命名,這樣方便后續進行管理。關于輕提示的基本使用規范請參照前面的介紹內容。

Toast提示的顯示方式設置很簡單,只需要在對應的元件事件上加入以上的交互動作。首先設置提示動態面板中對應的狀態,然后設置顯示動態面板,顯示時有一個逐漸的動畫效果。

Toast提示顯示以后會在3秒后自動逐漸隱藏,模板中的這個交互動作已經加在提示動態面板的顯示時事件中了,不需要再單獨的進行設置。

7.常用彈層交互設置

模態窗口交互效果

移動端的彈層共分為模態窗口、動作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動態面板,可以根據需要創建更多其它的彈層狀態,還能在對應的面板狀態屬性中設置透明背景的遮罩效果。

上面截圖中的為比較常見的模態窗口彈層效果,設置方式是在對應的元件事件上加入以上的交互動作。另外,根據模態窗口、動作面板、彈出面板這幾種彈層類型的彈出方式不同,需要設置顯示時為向上滑動和逐步等動畫效果。

8.導航欄切換交互設置

最后介紹一下如何實現內容區域滾動時,導航欄自動切換的交互效果。首先需要在導航欄的動態面板中創建對應的狀態,然后選中內容框架動態面板,在它的滾動時事件中按照上面的格式加入對應的條件判斷即可。

在這個設置用到了條件判斷和函數,條件的詳細設置見上方的截圖。它的原理是當內容框架垂直滾動高度大于70時設置導航欄動態面板的顯示狀態為2,當內容框架垂直滾動高度大小于70設置導航欄動態面板的顯示狀態為1。其中用到的This.scrollY函數是獲取當前元件的直滾動高度,70的值可以根據需要自己設置。

好了,到此這篇基于設備模板的移動端原型設計方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載,大家可以結合本文中的相關介紹進行使用。

最后再給大家分享一套本人整理設計的移動端元件庫,這套元件庫中的相關元件是可以在這個模板中復用的,后續也會不斷的進行優化和完善,有需要的朋友可以關注一下。

一直以來Axure在對移動端原型設計方面的支持都不是十分理想,它沒有像目前其它幾類原型設計工具(Justinmind、墨刀等)一樣提供移動端設備的模板和相關交互組件,但是Axure自由靈活的特性卻同樣的其它原型設計工具所無法取代的。通過掌握一些設計規范和方法,我們同樣可以通過Axure制作出非常完美的移動端演示原型。

首先你可以通過手機或電腦訪問以下地址,這是我設計完成的移動端原型模板。

使用Axure打造最佳的移動端交互原型教程

1. 選擇適合的設計分辨率

在開始設計原型之前我們需要做的第一步是選擇合適的設計分辨率,目前使用Axure設計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸,這兩種尺寸分別是由目前主流的移動設備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的,同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。

有朋友可能會疑惑在設計原型的時候為什么不直接采用移動設備實際的分辨率呢?因為這主要考慮到設計時的便攜性,畢竟我們輸出的原型主要是用于演示而不是視覺稿,所以不需要達到那么高的精度,另外如果按移動設備實際的分辨率進行設計,在對元件進行編輯和排版的時候會是一件很耗費時間的事情,同時也不方便在電腦瀏覽器上進行查看。

本人在進行原型設計的時候一般用的是375px*667px這個分辨率尺寸,因為Axure常用的元件默認的字號一般是14px或18px,這兩種字號也剛好匹配Iphone7上常用字號的比例,而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。

2. 定義內容區域

上面已經介紹了為什么選擇375px*667px作為移動端原型設計分辨率尺寸,在開始設計之前我們需要先按照這個尺寸在編輯區域中定義好內容區域。我一般是使用輔助線來定義內容區域的,例如下圖是用輔助線定義好內容區域的效果。

事實上我們在設計時其實不用去限制原型的高度,因為在通過移動端設備進行瀏覽時可以通過滾動頁面查看超出高度部分的內容,這跟實際的移動端產品的操作方式是一致的。而在原型設計的時候,我們還是需要拖一條用于標識原型設計高度的輔助線,它的主要作且是為了標識出首屏的區域范圍,這對于布局選擇是有一定的參考價值的。

3. 神奇的輔助線

輔助線的作用除了用來定義內容區域之外,同時它也能幫助我們快捷的進行布局。輔助線有一個特性就是當你拖動元件靠近它時,元件會自動吸附到輔助線的邊緣達到快速對齊的效果,對于有對齊強迫癥的朋友來說這個特性會感覺無比貼心。

輔助線的基本使用方法:鼠標移動到編輯區域的左側和頂部的標尺區域長按并往編輯區域拖動時就可以生成橫向或縱向的輔助線,將輔助線拖動到對應的位置即可。

一般除了用輔助線來定義內容區域的之外,我還會新建兩條縱向的輔助線用于標識界面左右兩側的留白區域。建議兩側留白區域用10px或者20px,例如本人常用的是20px,因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外,我們的元件一般還需要設置左右各20px的填充,用來將文字的顯示限定在界面留白區域內。

補充幾點輔助線的使用小技巧:

右擊輔助線可以將其鎖定,以防止拖動元件時會將輔助線會跟著一起移動;

可以通過按住Ctrl拖動創建全局輔助線,全局輔助線就是在所有頁面中產生一條相同的輔助線;

在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態且無法刪除;

在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線;

在“布局—柵格和輔助線—輔助線設置”中可以修改輔助線的顏色或進行更多設置;

4. 更多基礎設計規范

通過以上幾點介紹了我們如何使用輔助線來建立了一個基本的布局規范,而以下是我總結的其它關于移動端原型的基礎設計規范。通過掌握這些規范或技巧,可以使最終輸出的原型效果更美觀和標準,而且能讓你的設計效率大大的提升。

另外,這些規范或技巧同樣基本適用于WEB端的原型設計,不同的主要是設計分辨率和內容區域的定義,以后有機會我會進行整理和分享。

列表菜單的高度為45px、導航欄的高度為45px、標簽欄和工具欄常用高度為60px;

字號一般用偶數,常用的正文字號為12和14px,常用的標題字號為16px和18px;

元件的寬度和高度一般為5的倍數,例如45px、100px等;

元件的距間和行距一般為10的倍數,常用10px、20px,按住ctrl鍵通過方向鍵移動元件,每次移動的距離剛好是10px。

5. 頁面屬性的設置

為了方便進行設計我習慣將內容布局向左對齊,而在演示時內容居中顯示更符合瀏覽習慣,所以需要在頁面屬性設置中將頁面排列設置為水平居中,另外,頁面的背景色推薦設置為#F9F9F9。

6. 導航欄的設置

導航欄是移動端APP中最常見的元件之一,它的位置一般是固定在界面最頂部的,所以建議將導航欄轉換為動態面板,然后在面板的屬性設置中設置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“上”,具體設置如下圖:

7. 標簽欄或工具欄的設置

標簽欄或工具欄的位置一般是固定在界面最底部的,同樣我們也需要將標簽欄或工具欄轉換為動態面板,然后在面板的屬性設置中設置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“下”。

通過這樣的設置以后在有標簽欄或工具欄的頁面中,如果你的頁面內容已經超出了一屏的高度,我們通常需要在內容正文區域的底部放置一個與標簽欄或工具欄高度一致的熱區元件當作占位符,它的作用是用來解決原型演示時標簽欄或工具欄會擋住頁面內容的情況。

8. 模態窗口交互設置

模態窗口交互是移動端產品中最常見的交互方式之一,它主要用作顯示系統的重要信息,并請求用戶進行操作反饋,例如:刪除某個重要內容時,彈出對話框進行二次確認。在原型中我們可以通過簡單的設置,實現跟移動端APP一致的模態窗口效果。

移動端模態窗口演示效果:

首先同樣需要新建一個模態窗口的動態面板,在面板的屬性設置中設置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“下”。然后再在觸發模態窗口的交互事件中按以下方式進行設置,重點是勾選“置于頂層”選項和設置“燈箱效果”,燈箱效果的背景顏色和透明度可以根據需要進行自定義。關于具體的設置和演示效果,可以參照我將在后面推薦的移動端元件庫。

9. 輸出選項的設置

到此為止已經介紹了關于移動端原型設計的一些規范和常用元件及交互效果的設置,那么當我們的原型設計完成以后在生成HTML之前我們還需要進行幾項簡單的設置。

設置位置:發布—生成HTML-移動設備,在界面中勾選“包含視口標簽”,設置寬度為:device-width,設置縮放為:no,其它選項為空就可以了。

另外,你還可以設置主屏圖標,然后在IOS設備中通過safari瀏覽器打開原型,就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關工具界面,最終的演示效果幾乎是跟操作實際的APP是一致的,你甚至可以根據需要定義狀態欄的顏色。

設置方式:啟動safari瀏覽器打開原型地址—點擊瀏覽器底部的設置圖標(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進行添加看看效果。

添加到主屏和最終運行時的效果:

按照上述的設置之后,你將原型生成為HTML文件之后上傳到你的服務器或原型托管平臺,通過手機訪問原型鏈接演示即可。

10. 其它的補充說明

如果我們設計的移動端原型不需要考慮在手機上演示的場景,仍然可以參照本文中相關的規范。我一般會在編輯區域放置一個設備模板,新建一個內容框架的動態面板用來放置頁面的主要內容,而這個內容框架的尺寸同樣是我們之前定義的內容區域尺寸(寬)375px*(高)667px。另外,內容框架的動態面板的屬性中需要將滾動條設置為“自動顯示垂直滾動條”,這樣當框架的內容超出時可以拖動滾動條進行查看。

通過添加設備模板的設計區域效果

通過使用設備模板可以讓輸出的原型效果更標準和規范,如果我們在編輯界面中放置了設備模板,則不再需要對導航欄、標簽欄或工具欄、模態窗口等動態面板進行固定到瀏覽器設置,你只需要拖動到設備模板對應的位置并置于內容框架上方即可。

總結

以上是生活随笔為你收集整理的axure手机页面设计说明_Axure中移动端原型设计方法的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。