如何在Axure中正確設置APP原型的尺寸

上篇文章聊了一下為什麼375×667是移動端原型設計的最佳解析度，今天我們來講講如何在Axure中如何設計375x667的原型尺寸。

看起來再簡單不過，其實這裡面有很多講究，請聽我慢慢道來。

一、如何創建APP頁面

1.1、新手一般是這樣創建APP頁面

做第一個頁面的時候，直接拖動幾個矩形框到工作區，拼成大概的手機樣子。或者找個手機殼模板套進去，然後在裡面畫。

再做其他頁面的時候，複製剛剛做好的頁面到新頁面，然後刪除多餘的部分。

這樣做並沒有大錯，但是效率很低。

1.2、調用元件庫創建APP頁面

點擊參考我的元件庫，創建一個適合自己的元件庫，然後載入到Axure。

然後每新建一個APP頁面的時候，從左邊元件庫中拖動到右邊，然後直接把位置改成(0,0)。

延伸一下，創建元件庫的時候盡量把這幾個元件都命名一下，比如命名為頁面框架，上導航，左按鈕，右按鈕。這樣以後需要修改的時候直接全局搜索即可。

1.3、使用母版創建APP頁面

也可以使用母板的方式來製作，但是設計新APP原型的時候就沒辦法反覆調用了，但是不太推薦。

二、設定一屏線

有些頁面需要考慮到重要內容得讓用戶第一眼就能看到，比如商品詳情頁面就需要保證訂單在任何屏幕上都應該顯示在第一屏幕。延伸閱讀了解更多

所以從橫向標尺那裡拉出一條線，有了拉的箭頭你在往下拉到667的地方。

如果你的APP比較特殊，所有的頁面都需要用到一屏線。那就建一個」固定位置」類型的母版，畫一條橫線，位置(0,667)，寬度400左右。然後「添加到頁面-所有頁面」即可。

三、兼顧主流屏幕

雖然你的原型375x667隻是iPhone6/6s/7的邏輯解析度，但是我們可以在原型中把主流屏幕的解析度體現出來，如果需要特殊適配的話，單獨說明即可。

比如Android主流解析度是720x1280,那原型尺寸是360x640。建一個」固定位置」類型的母版，模板內容是一個360x640的頁面，然後批量複製到所有APP頁面的底層即可。

當然也可以通過全局輔助線的方式來做，不過更適合Web端產品。

這一步僅供有需求的產品參考，一般來說是不需要用到的。

3.1、順便提供主流屏幕和對應原型的解析度對照圖

相關內容詳見http://51prd.com/guide/#g=1&p=原型尺寸

四、總結

相信看了這2篇文章，新手PM應該清楚APP頁面的尺寸該怎麼設定以及如何創建原型啦。

下一篇文章會講解如何生成原型並在手機上查看，敬請關注。

作者：浪子，關注公眾號langzisay查看全部文章，浪子PRD系列http://51prd.com。

推薦閱讀：