善用Axure寫PRD:如何設置手機APP原型?

9 評論 75938 瀏覽 273 收藏 5 分鐘

上篇文章聊了一下為什么375×667是移動端原型設計的最佳分辨率,今天我們來講講如何在Axure中如何設計375×667的原型??雌饋碓俸唵尾贿^,其實這里面有很多講究,請聽我慢慢道來。

如何創建APP頁面

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

做第一個頁面的時候,直接拖動幾個矩形框到工作區,拼成大概的手機樣子?;蛘哒覀€手機殼模板套進去,然后在里面畫。

再做其他頁面的時候,復制剛剛做好的頁面到新頁面,然后刪除多余的部分。

這樣做并沒有大錯,但是效率很低。

調用元件庫創建APP頁面

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

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

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

使用母版創建APP頁面

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

設定一屏線

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

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

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

兼顧主流屏幕

雖然你的原型375×667只是iPhone6/6s/7的邏輯分辨率,但是我們可以在原型中把主流屏幕的分辨率體現出來,如果需要特殊適配的話,單獨說明即可。

比如Android主流分辨率是720×1280,那原型尺寸是360×640。建一個”固定位置”類型的母版,模板內容是一個360×640的頁面,然后批量復制到所有APP頁面的底層即可。

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

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

順便提供主流屏幕和對應原型的分辨率對照圖

相關內容詳見http://51prd.com/guide/#g=1&p=設計指南

總結

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

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

相關閱讀

為什么375×667是移動端原型設計的最佳分辨率

善用Axure寫PRD,移動PD需要梳理這些流程圖

善用Axure寫PRD,全局規范一個都不能少

善用Axure寫PRD,徹底丟棄Word和PPT

善用Axure寫PRD,APP文本框通用的輸入規則

善用Axure寫PRD,2種模式7種方法解析頁面加載邏輯

#專欄作家#

浪子,公眾號langzisay,善用Axure寫PRD,人人都是產品經理專欄作家。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝??

    回復
  2. 大神,能發一份元件的原型給我嗎?karlice_yp@163.com,感激不盡

    來自廣東 回復
    1. 原型請去http://51prd.com/download.html下載哦,就是里面的模板。

      來自上海 回復
  3. 您好老師 能不能把穩重您的元件庫給我一份,謝謝了 xszzlq@qq.com

    來自江蘇 回復
    1. 原型請去http://51prd.com/download.html下載哦,就是里面的模板。

      來自上海 回復
  4. 大神,能發一份元件的原型給我嗎?jiezfeng@163.com,感激不盡

    回復
  5. 大神,能否發一下元件的rp原型,感激不盡!lifeishirong@163.com

    回復
    1. 源文件不免費共享的,抱歉。

      回復
  6. 大神,能否發一下元件的rp原型,感激不盡! hsoulflyh@163.com

    來自北京 回復