實操用axure製作網頁的過程「如何用axure畫app原型尺寸」

如何創建APP頁面

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

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

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

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

調用元件庫創建APP頁面

我的元件庫,創建一個適合自己的元件庫,然後載入到Axure。

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

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

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

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

使用母版創建APP頁面

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

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

設定一屏線

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

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

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

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

兼顧主流屏幕

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

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

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

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

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

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

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

總結

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

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/299313.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-29 12:41
下一篇 2024-12-29 12:41

相關推薦

發表回復

登錄後才能評論