1. 選擇適合的設(shè)計(jì)分辨率：
一般是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸（優(yōu)先前者）疯兼。秧倾，因?yàn)锳xure常用的元件默認(rèn)的字號一般是14px或18px慷垮，
2. 定義內(nèi)容區(qū)域：
使用輔助線來定義內(nèi)容區(qū)域的，例如下圖是用輔助線定義好內(nèi)容區(qū)域的效果。然后我們在設(shè)計(jì)時其實(shí)不用去限制原型的高度言询，因?yàn)樵谕ㄟ^移動端設(shè)備進(jìn)行瀏覽時可以通過滾動頁面查看超出高度部分的內(nèi)容撇眯。
3. 神奇的輔助線：
輔助線的基本使用方法：鼠標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域長按并往編輯區(qū)域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應(yīng)的位置即可帖世。
輔助線的作用除了用來定義內(nèi)容區(qū)域之外翔怎，同時它也能幫助我們快捷的進(jìn)行布局。輔助線有一個特性就是當(dāng)你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達(dá)到快速對齊的效果猿妈。如下：
幾點(diǎn)輔助線的使用小技巧：
右擊輔助線可以將其鎖定搔啊，以防止拖動元件時會將輔助線會跟著一起移動；
可以通過按住Ctrl拖動創(chuàng)建全局輔助線搂赋，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；
在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；
在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；
在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進(jìn)行更多設(shè)置陡厘；
其他的一些可參考點(diǎn)
列表菜單的高度為45px糙置、導(dǎo)航欄的高度為45px揉抵、標(biāo)簽欄和工具欄常用高度為60px戏罢；
字號一般用偶數(shù)淮逊，常用的正文字號為12和14px，常用的標(biāo)題字號為16px和18px惜浅；
元件的寬度和高度一般為5的倍數(shù)，例如45px伏嗜、100px等坛悉；
元件的距間和行距一般為10的倍數(shù)，常用10px承绸、20px裸影，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px军熏。
4. 頁面屬性的設(shè)置
進(jìn)行設(shè)計(jì)我習(xí)慣將內(nèi)容布局向左對齊空民，而在演示時內(nèi)容居中顯示更符合瀏覽習(xí)慣，所以需要在頁面屬性設(shè)置中將頁面排列設(shè)置為水平居中,另外羞迷，頁面的背景色推薦設(shè)置為#F9F9F9界轩。
5. 導(dǎo)航欄，標(biāo)簽欄或工具欄的設(shè)置
導(dǎo)航欄的位置一般是固定在界面最頂部的衔瓮，所以建議將導(dǎo)航欄轉(zhuǎn)換為動態(tài)面板浊猾，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”热鞍，垂直固定選項(xiàng)為“上”葫慎。
標(biāo)簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標(biāo)簽欄或工具欄轉(zhuǎn)換為動態(tài)面板薇宠，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”偷办，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“下”澄港。
注意：如果需要撤銷動態(tài)面板狀態(tài)椒涯，則右擊元件，展開屬性工具欄回梧，點(diǎn)擊從首個狀態(tài)中脫離废岂。如果需要多個元件一起作為導(dǎo)航欄或工具欄，則先將所需元件選中組合后再設(shè)置為動態(tài)面板狀態(tài)狱意。
6. 模態(tài)窗口交互設(shè)置：
模態(tài)窗口交互是移動端產(chǎn)品中最常見的交互方式之一湖苞，首先同樣新建一個模態(tài)窗口的動態(tài)面板，在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”详囤，水平固定選項(xiàng)為“居中”财骨，垂直固定選項(xiàng)為“下”。然后再在觸發(fā)模態(tài)窗口的交互事件中按以下方式進(jìn)行設(shè)置，重點(diǎn)是勾選“置于頂層”選項(xiàng)和設(shè)置“燈箱效果”隆箩，燈箱效果的背景顏色和透明度可以根據(jù)需要進(jìn)行自定義滑肉。
7. 輸出選項(xiàng)的設(shè)置：
當(dāng)我們的原型設(shè)計(jì)完成以后在生成HTML之前我們還需要進(jìn)行幾項(xiàng)簡單的設(shè)置。
設(shè)置位置：發(fā)布—生成HTML-移動設(shè)備摘仅，在界面中勾選“包含視口標(biāo)簽”靶庙，設(shè)置寬度為：device-width，設(shè)置縮放為：no娃属，其它選項(xiàng)為空就可以了六荒。
另外，你還可以設(shè)置主屏圖標(biāo)矾端，然后在IOS設(shè)備中通過safari瀏覽器打開原型掏击，就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關(guān)工具界面秩铆，最終的演示效果幾乎是跟操作實(shí)際的APP是一致的砚亭，你甚至可以根據(jù)需要定義狀態(tài)欄的顏色。
設(shè)置方式：啟動safari瀏覽器打開原型地址—點(diǎn)擊瀏覽器底部的設(shè)置圖標(biāo)(正中間)—添加到主屏幕——完成添加即可殴玛。大家可以嘗試使用下方演示地址進(jìn)行添加看看效果捅膘。
8. 其它說明：
我一般會在編輯區(qū)域放置一個設(shè)備模板，新建一個內(nèi)容框架的動態(tài)面板用來放置頁面的主要內(nèi)容滚粟，而這個內(nèi)容框架的尺寸同樣是我們之前定義的內(nèi)容區(qū)域尺寸(寬)375px*(高)667px寻仗。另外，內(nèi)容框架的動態(tài)面板的屬性中需要將滾動條設(shè)置為“自動顯示垂直滾動條”凡壤，這樣當(dāng)框架的內(nèi)容超出時可以拖動滾動條進(jìn)行查看署尤。如果我們在編輯界面中放置了設(shè)備模板，則不再需要對導(dǎo)航欄亚侠、標(biāo)簽欄或工具欄曹体、模態(tài)窗口等動態(tài)面板進(jìn)行固定到瀏覽器設(shè)置，你只需要拖動到設(shè)備模板對應(yīng)的位置并置于內(nèi)容框架上方即可硝烂。
并且最好將設(shè)備模板作為母版保存下來箕别，可以省很多時間。
