axure手机页面设计说明_Axure中移动端原型设计方法
在使用Axure設(shè)計移動端原型的應(yīng)用方面，我總結(jié)出了兩種常用的方法。第一種是更適合在移動端進行演示的設(shè)計方法，大家可以參考我之前已經(jīng)分享過的一篇教程：使用Axure打造最佳的移動端交互原型教程，使用這種方法輸出的原型在手機設(shè)備上進行演示時可以達到跟真實APP幾乎一致的展示效果及交互體驗。在今天我將分享另外一種基于設(shè)備模板的移動端原型設(shè)計方法。
什么是基于設(shè)備模板的移動端原型設(shè)計方法？簡而言之就是在Axure的編輯界面中放置對應(yīng)的機型模板，使輸出的原型達到更規(guī)范和真實的演示效果。其實這是一種很常見的移動端原型的設(shè)計方法，很多同行在設(shè)計原型的時候也都用過。這篇分享教程將對個設(shè)計方法進行了總結(jié)和梳理，并基于這個方法制作了一套可快速復(fù)用的模板。這套模板具有幾個方面的特點：
● 結(jié)構(gòu)化，根據(jù)APP界面結(jié)構(gòu)進行搭建；
● 標(biāo)準(zhǔn)化，非常方便進行編輯和維護；
● 高保真，可高度還原移動端交互效果；
在本篇分享的結(jié)尾我會提供模板的Axure源文件下載，其中包含了最新的IPhoneX和IPhone8等多套IOS設(shè)備機型，以及一些常見的界面元素和交互效果。在開始正式的介紹之前，大家可以查看使用這套模板還原IOS中兩款官方應(yīng)用的設(shè)計演示。
IOS11 AppStroe For iPhoneX 原型演示
IOS11 Contacts For iPhone8 原型演示
1.界面元素和結(jié)構(gòu)介紹
由于這套模板是基于IOS系統(tǒng)進行設(shè)計的，所以相關(guān)界面元素和交互方式均以IOS為標(biāo)準(zhǔn)。目前主流的移動端系統(tǒng)除了IOS還有Android，這兩種系統(tǒng)設(shè)計標(biāo)準(zhǔn)和交互方式其實是存在一些差異的，不過目前市面上大部分APP在設(shè)計時并沒有爭對兩種系統(tǒng)做單獨的處理。
所以如果沒有特珠需求的話，我們一般也只需要輸出一套原型方案就可以了，不過設(shè)計過程中需要盡量兼顧這兩個主流的系統(tǒng)。當(dāng)然，如果你的產(chǎn)品明確需要按照Android的系統(tǒng)規(guī)范來設(shè)計，你也可以參照本教程設(shè)計一套Android的原型模板，相關(guān)交互方式可以參照Android版的交互指南規(guī)范。
在開始介紹模板的搭建和使用方法之前，需要先對APP的界面結(jié)構(gòu)做一個簡單的介紹，熟悉了界面結(jié)構(gòu)可以方便我們后續(xù)的設(shè)計。常見APP的界面主要由以下元素或組件組成：
StatusBar / 狀態(tài)欄
狀態(tài)欄顯示設(shè)備的關(guān)鍵信息，包含設(shè)備模型或網(wǎng)絡(luò)提供商、網(wǎng)絡(luò)信號強度、電池使用量、時間等。在特殊界面中可以對狀態(tài)欄做隱藏處理，或根據(jù)需要自定義狀態(tài)欄背景。
NavBar / 導(dǎo)航欄
導(dǎo)航欄位于app內(nèi)容區(qū)的上方，系統(tǒng)狀態(tài)欄的下方，并且提供在一系列頁面中的導(dǎo)航能力。可在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題，如果標(biāo)題非常冗長且無法精簡，可以空缺，避免用過多的元素填滿導(dǎo)航欄。導(dǎo)航欄中可以添加文字和圖標(biāo)控件，相關(guān)控件的可點擊區(qū)域需要大于控件的可視大小。
Body / 內(nèi)容區(qū)
內(nèi)容區(qū)域根據(jù)需要進行自定義設(shè)計，常見的設(shè)計形式有菜單列表、圖標(biāo)列表、卡片列表、圖文組合等。
TabBar / 標(biāo)簽欄
標(biāo)簽欄位于APP底部，方便用戶在不同功能模塊之間進行快速切換。標(biāo)簽欄一般用作APP的一級分類，數(shù)量控制在3-5個之間。建議使用Badge進行提示，讓用戶知道有內(nèi)容更新。
Toolbar / 工具欄
工具欄一般會出現(xiàn)在視圖的的底部，提供給用戶相關(guān)可操作的功能按紐。如，郵件應(yīng)用程序里的收件箱欄中有刪除、分享、答復(fù)等等。
Modal / 彈出層
移動端的彈出層根據(jù)彈出方式不同，共分為模態(tài)窗口、動作面板、彈出面板等幾種不同的類型。在實際使用中，可根據(jù)界面的交互方式選擇對應(yīng)的類型。
Toast / 輕提示
一種輕量級反饋提示，可以用來顯示不會打斷用戶操作的內(nèi)容，適合用于頁面轉(zhuǎn)場、數(shù)據(jù)交互的等場景中。一次只顯示一個輕提示，有圖標(biāo)的提示字數(shù)為4-6個，沒有圖標(biāo)的輕提示字數(shù)不宜超過14個。
TableView / 列表視圖
列表視圖是移動端APP中一種通用的界面元素。很多應(yīng)用程序在一定程度上，都有使用表視圖來顯示數(shù)據(jù)列表。常見的例如IOS的聯(lián)系人應(yīng)用中聯(lián)系人信息列表，另外還有Mail中使用列表視圖顯示郵箱和郵件。列表視圖不僅可以用來顯示文本數(shù)據(jù)，也可以用來呈現(xiàn)圖像數(shù)據(jù)。
以上是豆瓣APP的一個界面截圖示例，界面的結(jié)構(gòu)用顏色進行了區(qū)分，從上至下分別為：狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)、標(biāo)簽欄。
2.結(jié)構(gòu)化的模板搭建
在介紹完APP的界面結(jié)構(gòu)之后，接下來說明一下模板的搭建方法。在本篇教程的結(jié)尾會提供了已經(jīng)制作好的模板的文件，大家可以下載并參考本部分介紹進行使用，也可以參照介紹制作自己的原型模板。
在制作模板時需要用到對應(yīng)的機型設(shè)備的圖片素材，可以通過Dribbble等設(shè)計分享平臺找到對應(yīng)的素材文件，然后對素材做一些簡單的處理。處理的過程首先是去掉多余的元素，只保留機型設(shè)備的框架圖片。另外還需要對圖片的尺寸進行調(diào)整，例如在制作手機等移動端模板時我們將內(nèi)容區(qū)域定為375px，需要根據(jù)所定的內(nèi)容區(qū)域?qū)D片的尺寸進行相應(yīng)的調(diào)整。
為什么模板的內(nèi)容區(qū)域是375px？這個問題我在上篇教程中進行過介紹，所以不再進行展開說明。但是需要記住的這個尺寸是一個重要的標(biāo)準(zhǔn)，后續(xù)在設(shè)計過程中相關(guān)元件的寬度尺寸都需要參照這個標(biāo)準(zhǔn)。機型設(shè)備的圖片素材準(zhǔn)備好之后，我們在Axure中創(chuàng)建一個對應(yīng)的母版，然后將機型設(shè)備圖片拖入到母版中。母版的名稱可以按該機型設(shè)備的名稱命名，后面在使用時在新建的頁面中拖入該母版即可。
下一步需要創(chuàng)建前面介紹過的APP界面中常見元素或組件，首先大家可以看一下這張圖片中已經(jīng)創(chuàng)建好的模板，其中包含了機型母版、輕提示、彈層、導(dǎo)航欄、標(biāo)簽欄、內(nèi)容框架等元素。
在這個模板頁面的概要視圖中可以看到相關(guān)的對象，所有對象我都創(chuàng)建了一個對應(yīng)的動態(tài)面板。這樣的處理主要出于兩個方面的考慮，一是方便對相關(guān)元素進行編輯維護，二是相關(guān)對象的顯示是有順序的，這樣可以方便在概要視圖中進行排序處理。
3.模板使用細節(jié)說明；
在內(nèi)容框架中編輯界面內(nèi)容；
界面的主要內(nèi)容在內(nèi)容框架動態(tài)面板中進行編輯和維護，由于該動態(tài)面板設(shè)置了自動顯示滾動條，如果你的界面內(nèi)容超出了一屏，在演示時可以通過在內(nèi)容框架區(qū)域滾動鼠標(biāo)滾輪查看更多內(nèi)容。
關(guān)于模板界面元素的尺寸說明：
模板中的界面元素的尺寸并沒有非常嚴(yán)格的標(biāo)準(zhǔn)，以下尺寸是我根據(jù)比例進行設(shè)置的，僅供參考。IphoneX狀態(tài)欄：44px、IphoneX標(biāo)簽欄：80px、Iphone8狀態(tài)欄：28px、IphoneX標(biāo)簽欄：60px、導(dǎo)航欄：40px。另外，內(nèi)容區(qū)域的高度因為機型設(shè)備的素材圖片不統(tǒng)一可能略有差異，基本上可以忽略。
每個界面對應(yīng)一個頁面；
在設(shè)計原型時建議每一個界面創(chuàng)建一個對應(yīng)的頁面，通過添加頁面鏈接進行界面跳轉(zhuǎn)，這樣方便對原型進行編輯和維護。不建議將多個界面用動態(tài)面板堆砌在一起頁面內(nèi)，這樣會使輸出的原型在演示時出現(xiàn)卡頓現(xiàn)象。
關(guān)于元素的層級順序；
在概要視圖中可以看到相關(guān)元素對應(yīng)動態(tài)面板的層級順序，在使用該模板的時候請盡量參照此順序，否則可能在演示時出現(xiàn)顯示錯誤的情況。
關(guān)于底部標(biāo)簽欄的設(shè)置；
為了方便維護可以將標(biāo)簽欄創(chuàng)建為母版，然后添加到需要顯示標(biāo)簽欄的頁面中。另外，在對應(yīng)的頁面中需要顯示對應(yīng)的標(biāo)簽選中效果，只需要在該頁面中的標(biāo)簽欄動態(tài)面板中添加一個選中效果的標(biāo)簽元件。
熱區(qū)占位符的使用；
如果頁面中添加了標(biāo)簽欄或工具欄，由于標(biāo)簽頁的動態(tài)面板在內(nèi)容框架的動態(tài)面板之上，在演示時會出現(xiàn)內(nèi)容有一部分被擋住的情況?？梢詣?chuàng)建一個高度為100px的熱區(qū)元件為母版，將母版拖入對應(yīng)的頁面底部，用來解決內(nèi)容區(qū)域被擋住的問題。
4.常用設(shè)計元素及規(guī)范
經(jīng)常有朋友向我咨詢?nèi)绾卧O(shè)計出更漂亮美觀的原型，雖然原則上原型能完整的體現(xiàn)出需求細節(jié)即可，好看并不是我們在原型輸出時應(yīng)該關(guān)注的重點，但是如果能滿足說明需求的同時能把原型做得更漂亮一些更好，這也算是體現(xiàn)專業(yè)程度和工作態(tài)度的一個方面，而且很多人對自己的輸出物也是有強烈的美感追求的。
其實原型設(shè)計不需要了解太復(fù)雜的設(shè)計方法，只要掌握一點簡單的技巧就能達到美觀的效果，同時能讓整體更統(tǒng)一和標(biāo)準(zhǔn)。在分享的這套模板中包含了一些基本的設(shè)計元素，我下面對其中的一些規(guī)范細節(jié)進行說明，供大家進行參考。
配色方案
◆ 一般采用黑白灰的配色方案就能夠滿足基本設(shè)計要求了，但是如果能稍微得加上一些亮色的配色效果，可以使原型更好的體現(xiàn)出視覺層級，這對UI是有一定的參考價值的。不要感覺得配色效果能夠影響UI的設(shè)計，如果UI會被原型中的配色影響，只能說明UI的設(shè)計能力有待提升；
整套原型中亮色主色調(diào)不要超過兩個，對于主要按紐和重點提示可以加上主色調(diào)色值，次要元素統(tǒng)一使用#000000、#333333、#999999等灰色輔助色；
◆ 模板中的這套模板方案中的主色調(diào)是從IOS11的UI設(shè)計規(guī)范中提取的，你可以根據(jù)自己的需要整理一套自己的配色方案，建議盡量使用扁平化設(shè)計色值；
配色板使用
Axure中的配色板提供了一些常用的顏色色值，可用作一些常用元素的顏色配色。例如截圖中標(biāo)注1中的縱向的灰色色值可用于相關(guān)字體元素的顏色，標(biāo)注2中橫向的灰色色值可用于相關(guān)元素的背景和線條的顏色。另外，點擊標(biāo)注3中的更多按紐，可以將其它的常用色值加入到自定義顏色中，方便快速的使用。
字體元素
◆ 原型設(shè)計時的字體字號建議統(tǒng)一使用偶數(shù)，常用的標(biāo)題字號為16px、18px、20px，常用的正文字號為12px、14px；
針對不同字體大小的多行文本單獨設(shè)置對應(yīng)的行間距，例如12px的多行文本行間距建議設(shè)置為20，14px的多行文本行間距建議設(shè)置為28；
推薦中文字體統(tǒng)一使用微軟雅黑，由于Axure的默認字體為Arial，可以通過生成HTML設(shè)置中的字體映射，將Arial映射為微軟雅黑，這樣就不需要在設(shè)計時去單獨設(shè)置每個元件的字體了。
其它元素
◆ 原型設(shè)計時元件的寬度建議統(tǒng)一保持為5和10的倍數(shù)，元件的間距建議為10px或20px；
◆ 使用鍵盤方向鍵移動選中的元件時每次移動距離為1px ，使用ctrl 鍵盤方向鍵每次移動距離為10px；
◆ 按住Ctrl 鼠標(biāo)拖動可以快速的復(fù)制元件，按住Shift 鼠標(biāo)拖動可以垂直或水平的移動元件；
對齊及分布工具使用
有對齊強迫癥的朋友可以使用頂部工具欄中的對齊及分布工具對元件進行處理，右擊頂部的工具欄區(qū)◆ 域可以自定義顯示或隱藏相關(guān)的工具圖標(biāo)；
選中多個元件時可以使用對齊工具快速的對多個元件進行各種對齊處理，還可以使用分布工具快速的對多個元件進行垂直或水平分布處理；
5.使用輔助線進行排版；
在以前的教程中已經(jīng)介紹過輔助線的使用方法，合理的使用輔助線可以幫助我們提升設(shè)計效率，同時能讓輸出的原型效果更標(biāo)準(zhǔn)，所以強烈建議大家在設(shè)計過程中使用。以下是模板中內(nèi)容框架編輯區(qū)域的截圖，是我常用使用輔助線用來排版的方式。截圖中的輔助線均為橫向x軸輔助線，可以看到其中共有4條，分別介紹一下它們的作用和位置：
第1條輔助線是用來劃分左邊的內(nèi)容留白區(qū)域，例如我一般習(xí)慣將左邊留白為20px，這條輔助線位于x軸的20px位置。
第2條輔助線是內(nèi)容居中輔助線，之前已經(jīng)介紹過模板的設(shè)計寬度標(biāo)準(zhǔn)為375px，這條輔助線位于x軸的188px位置；(375px/2=187.5px)
第3條輔助線用來劃分右邊的內(nèi)容留白區(qū)域，例如右邊跟左邊留白一樣為20px，這條輔助線位于x軸的355px位置；(375px-20px=355px)
第4條輔助線是用來劃分內(nèi)容設(shè)計區(qū)域，例如模板的設(shè)計寬度標(biāo)準(zhǔn)為375px，這條輔助線位于位于x軸的375px位置；
這些輔助線的用法只是作為參考，可以根據(jù)自己的需要新建對應(yīng)的輔助線。鼠標(biāo)光標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域，按住鼠標(biāo)左鍵并往編輯區(qū)域拖動時，就可以生成橫向x軸或縱向y軸的輔助線，然后將輔助線拖動到對應(yīng)的位置即可。輔助線還有一個特性就是當(dāng)拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果。
幾點輔助線的使用小技巧：
右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
可以通過按住Ctrl拖動創(chuàng)建全局輔助線，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；
在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；
在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進行更多設(shè)置；
6.Toast提示交互設(shè)置；
移動端原型中最常用的交互效果就是彈出層和輕提示兩種，模板中已經(jīng)包含了這種兩交互效果的相關(guān)元件和事件，這里再單獨簡單的介紹一下。
Toast提示顯示效果
在模板頁面的概要視圖中可以看到名為“提示”的動態(tài)面板，需要顯示的提示信息在這個動態(tài)面板中編輯就可以了。當(dāng)前的動態(tài)面板中有一個“操作成功”的提示狀態(tài)，如果在一個頁面中顯示多個提示，可以新增對應(yīng)的狀態(tài)然后修改相關(guān)的提示內(nèi)容。
選中提示的動態(tài)面板的狀態(tài)右擊選擇復(fù)制狀態(tài)可以快速創(chuàng)建新的提示。建議對每個對應(yīng)的提示狀態(tài)進行命名，這樣方便后續(xù)進行管理。關(guān)于輕提示的基本使用規(guī)范請參照前面的介紹內(nèi)容。
Toast提示的顯示方式設(shè)置很簡單，只需要在對應(yīng)的元件事件上加入以上的交互動作。首先設(shè)置提示動態(tài)面板中對應(yīng)的狀態(tài)，然后設(shè)置顯示動態(tài)面板，顯示時有一個逐漸的動畫效果。
Toast提示顯示以后會在3秒后自動逐漸隱藏，模板中的這個交互動作已經(jīng)加在提示動態(tài)面板的顯示時事件中了，不需要再單獨的進行設(shè)置。
7.常用彈層交互設(shè)置
模態(tài)窗口交互效果
移動端的彈層共分為模態(tài)窗口、動作面板、彈出面板等幾種不同的類型。在模板頁面的概要視圖中可以看到名為“彈層”的動態(tài)面板，可以根據(jù)需要創(chuàng)建更多其它的彈層狀態(tài)，還能在對應(yīng)的面板狀態(tài)屬性中設(shè)置透明背景的遮罩效果。
上面截圖中的為比較常見的模態(tài)窗口彈層效果，設(shè)置方式是在對應(yīng)的元件事件上加入以上的交互動作。另外，根據(jù)模態(tài)窗口、動作面板、彈出面板這幾種彈層類型的彈出方式不同，需要設(shè)置顯示時為向上滑動和逐步等動畫效果。
8.導(dǎo)航欄切換交互設(shè)置
最后介紹一下如何實現(xiàn)內(nèi)容區(qū)域滾動時，導(dǎo)航欄自動切換的交互效果。首先需要在導(dǎo)航欄的動態(tài)面板中創(chuàng)建對應(yīng)的狀態(tài)，然后選中內(nèi)容框架動態(tài)面板，在它的滾動時事件中按照上面的格式加入對應(yīng)的條件判斷即可。
在這個設(shè)置用到了條件判斷和函數(shù)，條件的詳細設(shè)置見上方的截圖。它的原理是當(dāng)內(nèi)容框架垂直滾動高度大于70時設(shè)置導(dǎo)航欄動態(tài)面板的顯示狀態(tài)為2，當(dāng)內(nèi)容框架垂直滾動高度大小于70設(shè)置導(dǎo)航欄動態(tài)面板的顯示狀態(tài)為1。其中用到的This.scrollY函數(shù)是獲取當(dāng)前元件的直滾動高度，70的值可以根據(jù)需要自己設(shè)置。
好了，到此這篇基于設(shè)備模板的移動端原型設(shè)計方法的分享基本介紹完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下載，大家可以結(jié)合本文中的相關(guān)介紹進行使用。
最后再給大家分享一套本人整理設(shè)計的移動端元件庫，這套元件庫中的相關(guān)元件是可以在這個模板中復(fù)用的，后續(xù)也會不斷的進行優(yōu)化和完善，有需要的朋友可以關(guān)注一下。
一直以來Axure在對移動端原型設(shè)計方面的支持都不是十分理想，它沒有像目前其它幾類原型設(shè)計工具(Justinmind、墨刀等)一樣提供移動端設(shè)備的模板和相關(guān)交互組件，但是Axure自由靈活的特性卻同樣的其它原型設(shè)計工具所無法取代的。通過掌握一些設(shè)計規(guī)范和方法，我們同樣可以通過Axure制作出非常完美的移動端演示原型。
首先你可以通過手機或電腦訪問以下地址，這是我設(shè)計完成的移動端原型模板。
使用Axure打造最佳的移動端交互原型教程
1. 選擇適合的設(shè)計分辨率
在開始設(shè)計原型之前我們需要做的第一步是選擇合適的設(shè)計分辨率，目前使用Axure設(shè)計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸，這兩種尺寸分別是由目前主流的移動設(shè)備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的，同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。
有朋友可能會疑惑在設(shè)計原型的時候為什么不直接采用移動設(shè)備實際的分辨率呢？因為這主要考慮到設(shè)計時的便攜性，畢竟我們輸出的原型主要是用于演示而不是視覺稿，所以不需要達到那么高的精度，另外如果按移動設(shè)備實際的分辨率進行設(shè)計，在對元件進行編輯和排版的時候會是一件很耗費時間的事情，同時也不方便在電腦瀏覽器上進行查看。
本人在進行原型設(shè)計的時候一般用的是375px*667px這個分辨率尺寸，因為Axure常用的元件默認的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。
2. 定義內(nèi)容區(qū)域
上面已經(jīng)介紹了為什么選擇375px*667px作為移動端原型設(shè)計分辨率尺寸，在開始設(shè)計之前我們需要先按照這個尺寸在編輯區(qū)域中定義好內(nèi)容區(qū)域。我一般是使用輔助線來定義內(nèi)容區(qū)域的，例如下圖是用輔助線定義好內(nèi)容區(qū)域的效果。
事實上我們在設(shè)計時其實不用去限制原型的高度，因為在通過移動端設(shè)備進行瀏覽時可以通過滾動頁面查看超出高度部分的內(nèi)容，這跟實際的移動端產(chǎn)品的操作方式是一致的。而在原型設(shè)計的時候，我們還是需要拖一條用于標(biāo)識原型設(shè)計高度的輔助線，它的主要作且是為了標(biāo)識出首屏的區(qū)域范圍，這對于布局選擇是有一定的參考價值的。
3. 神奇的輔助線
輔助線的作用除了用來定義內(nèi)容區(qū)域之外，同時它也能幫助我們快捷的進行布局。輔助線有一個特性就是當(dāng)你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達到快速對齊的效果，對于有對齊強迫癥的朋友來說這個特性會感覺無比貼心。
輔助線的基本使用方法：鼠標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域長按并往編輯區(qū)域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應(yīng)的位置即可。
一般除了用輔助線來定義內(nèi)容區(qū)域的之外，我還會新建兩條縱向的輔助線用于標(biāo)識界面左右兩側(cè)的留白區(qū)域。建議兩側(cè)留白區(qū)域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設(shè)置左右各20px的填充，用來將文字的顯示限定在界面留白區(qū)域內(nèi)。
補充幾點輔助線的使用小技巧：
右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；
可以通過按住Ctrl拖動創(chuàng)建全局輔助線，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；
在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；
在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進行更多設(shè)置；
4. 更多基礎(chǔ)設(shè)計規(guī)范
通過以上幾點介紹了我們?nèi)绾问褂幂o助線來建立了一個基本的布局規(guī)范，而以下是我總結(jié)的其它關(guān)于移動端原型的基礎(chǔ)設(shè)計規(guī)范。通過掌握這些規(guī)范或技巧，可以使最終輸出的原型效果更美觀和標(biāo)準(zhǔn)，而且能讓你的設(shè)計效率大大的提升。
另外，這些規(guī)范或技巧同樣基本適用于WEB端的原型設(shè)計，不同的主要是設(shè)計分辨率和內(nèi)容區(qū)域的定義，以后有機會我會進行整理和分享。
列表菜單的高度為45px、導(dǎo)航欄的高度為45px、標(biāo)簽欄和工具欄常用高度為60px；
字號一般用偶數(shù)，常用的正文字號為12和14px，常用的標(biāo)題字號為16px和18px；
元件的寬度和高度一般為5的倍數(shù)，例如45px、100px等；
元件的距間和行距一般為10的倍數(shù)，常用10px、20px，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px。
5. 頁面屬性的設(shè)置
為了方便進行設(shè)計我習(xí)慣將內(nèi)容布局向左對齊，而在演示時內(nèi)容居中顯示更符合瀏覽習(xí)慣，所以需要在頁面屬性設(shè)置中將頁面排列設(shè)置為水平居中,另外，頁面的背景色推薦設(shè)置為#F9F9F9。
6. 導(dǎo)航欄的設(shè)置
導(dǎo)航欄是移動端APP中最常見的元件之一，它的位置一般是固定在界面最頂部的，所以建議將導(dǎo)航欄轉(zhuǎn)換為動態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“上”，具體設(shè)置如下圖：
7. 標(biāo)簽欄或工具欄的設(shè)置
標(biāo)簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標(biāo)簽欄或工具欄轉(zhuǎn)換為動態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。
通過這樣的設(shè)置以后在有標(biāo)簽欄或工具欄的頁面中，如果你的頁面內(nèi)容已經(jīng)超出了一屏的高度，我們通常需要在內(nèi)容正文區(qū)域的底部放置一個與標(biāo)簽欄或工具欄高度一致的熱區(qū)元件當(dāng)作占位符，它的作用是用來解決原型演示時標(biāo)簽欄或工具欄會擋住頁面內(nèi)容的情況。
8. 模態(tài)窗口交互設(shè)置
模態(tài)窗口交互是移動端產(chǎn)品中最常見的交互方式之一，它主要用作顯示系統(tǒng)的重要信息，并請求用戶進行操作反饋，例如：刪除某個重要內(nèi)容時，彈出對話框進行二次確認。在原型中我們可以通過簡單的設(shè)置，實現(xiàn)跟移動端APP一致的模態(tài)窗口效果。
移動端模態(tài)窗口演示效果：
首先同樣需要新建一個模態(tài)窗口的動態(tài)面板，在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項為“居中”，垂直固定選項為“下”。然后再在觸發(fā)模態(tài)窗口的交互事件中按以下方式進行設(shè)置，重點是勾選“置于頂層”選項和設(shè)置“燈箱效果”，燈箱效果的背景顏色和透明度可以根據(jù)需要進行自定義。關(guān)于具體的設(shè)置和演示效果，可以參照我將在后面推薦的移動端元件庫。
9. 輸出選項的設(shè)置
到此為止已經(jīng)介紹了關(guān)于移動端原型設(shè)計的一些規(guī)范和常用元件及交互效果的設(shè)置，那么當(dāng)我們的原型設(shè)計完成以后在生成HTML之前我們還需要進行幾項簡單的設(shè)置。
設(shè)置位置：發(fā)布—生成HTML-移動設(shè)備，在界面中勾選“包含視口標(biāo)簽”，設(shè)置寬度為：device-width，設(shè)置縮放為：no，其它選項為空就可以了。
另外，你還可以設(shè)置主屏圖標(biāo)，然后在IOS設(shè)備中通過safari瀏覽器打開原型，就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關(guān)工具界面，最終的演示效果幾乎是跟操作實際的APP是一致的，你甚至可以根據(jù)需要定義狀態(tài)欄的顏色。
設(shè)置方式：啟動safari瀏覽器打開原型地址—點擊瀏覽器底部的設(shè)置圖標(biāo)(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進行添加看看效果。
添加到主屏和最終運行時的效果：
按照上述的設(shè)置之后，你將原型生成為HTML文件之后上傳到你的服務(wù)器或原型托管平臺，通過手機訪問原型鏈接演示即可。
10. 其它的補充說明
如果我們設(shè)計的移動端原型不需要考慮在手機上演示的場景，仍然可以參照本文中相關(guān)的規(guī)范。我一般會在編輯區(qū)域放置一個設(shè)備模板，新建一個內(nèi)容框架的動態(tài)面板用來放置頁面的主要內(nèi)容，而這個內(nèi)容框架的尺寸同樣是我們之前定義的內(nèi)容區(qū)域尺寸(寬)375px*(高)667px。另外，內(nèi)容框架的動態(tài)面板的屬性中需要將滾動條設(shè)置為“自動顯示垂直滾動條”，這樣當(dāng)框架的內(nèi)容超出時可以拖動滾動條進行查看。
通過添加設(shè)備模板的設(shè)計區(qū)域效果
通過使用設(shè)備模板可以讓輸出的原型效果更標(biāo)準(zhǔn)和規(guī)范，如果我們在編輯界面中放置了設(shè)備模板，則不再需要對導(dǎo)航欄、標(biāo)簽欄或工具欄、模態(tài)窗口等動態(tài)面板進行固定到瀏覽器設(shè)置，你只需要拖動到設(shè)備模板對應(yīng)的位置并置于內(nèi)容框架上方即可。
總結(jié)
以上是生活随笔為你收集整理的axure手机页面设计说明_Axure中移动端原型设计方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信扫码支付、聚合支付
- 下一篇： ESP32-cam 初体验 从esp32