IOS移動端原型規(guī)范【產(chǎn)品經(jīng)理須知】

很多產(chǎn)品經(jīng)理在企業(yè)中做移動端的原型時，被UI噴的體無完膚：“你這是原型嗎?”“你怎么連基本的對齊都做不到?”“這兩個按鈕，倒是哪個是一級按鈕，哪個是次級的?”“你這原型太丑了，我用不了!”

一般來說，在企業(yè)中制作移動端的原型，都是制作iOS版本的;本文也是基于此，跟大家探討一些iOS原型制作的規(guī)范。

第一，原型大小，指的是在Axure中對應的長寬。規(guī)范的移動端頁面大小為：寬度375*高度667(單位為px，本文中，所有的數(shù)字單位均為px，隱去不寫)，當然，如果頁面比較長，比如首頁，可以無視667這個要求，把該有的內(nèi)容都制作出來即可。

這里需要注意的是，如果原型的高度是超過667，需要保證標簽欄仍然在最底部，而且按規(guī)范去制作。如下圖一：

圖一

第二，部分模塊的規(guī)范要求。移動端的頁面，iOS人機交互指南中，針對重要模塊是有明確要求的;比如說，頂部的狀態(tài)欄(顯示信號、時間、電量的區(qū)域)，原型高度為20;狀態(tài)欄下方的導航欄(顯示返回、搜索框等內(nèi)容)，原型高度為44;底部標簽欄(比如微信APP底部的微信、通訊錄、發(fā)現(xiàn)、我)，原型高度為49，圖標大小為25*25，字號為10號。如下圖二：

圖二

可能有的人就要說了，一定要按照這個標準嗎?我把底部狀態(tài)欄畫成60高度不可以嗎?我把頂部狀態(tài)欄高度畫成40不可以嗎?可以，沒有問題。但是，如果這樣做了，你的原型一定觀感不好(就是，別人一看就很low的意思)。

為什么一定要遵循這些規(guī)范，這個是蘋果官方每年將體驗最好的APP選出來，然后總結(jié)他們的設計規(guī)范得出來的，如果你按照這個規(guī)范來制作APP，畫原型，那根據(jù)你的原型制作出來的產(chǎn)品，體驗就是最好的。

第三，很多產(chǎn)品經(jīng)理在畫原型的時候，線條感太重，比如下圖，該怎么處理呢?如下圖三：

圖三

其實，比較簡單，在制作原型時，通過給元件填充一些不同飽和度的灰色進行區(qū)分，這樣不僅去掉了元件的邊框(降低了線條感)，同時原型整體的效果更好，如下圖四：

圖四

第四，很多產(chǎn)品經(jīng)理的原型在制作的時候沒問題，但是一旦預覽就開始出現(xiàn)不對齊、文字排版混亂等異常情況。我們先說一下原因吧：因為當原型中文字過小時，在預覽的情況下，瀏覽器會自動對文字進行放大的處理，保證能夠閱讀。那處理辦法是什么?很簡單，導出圖片。

下圖五為原型的導出內(nèi)容截圖，圖六為原型的導出圖片效果。

圖五

圖六

今天就跟大家分享上面的四個方面，希望大家在以后制作移動端原型過程中，能夠盡量避免以上的錯誤出現(xiàn)，盡量遵守規(guī)范去制作。

目前傳智播客的產(chǎn)品經(jīng)理學科正在火熱招生中，并且上海校區(qū)和深圳校區(qū)已經(jīng)全面恢復線下。如果感興趣的小伙伴可以來看看，我們有專業(yè)的師資團隊給大家授課，并且輔導大家就業(yè)，大家快來吧!


猜你喜歡：

產(chǎn)品經(jīng)理怎么分析一款App? 

什么樣的原型是好原型?

互聯(lián)網(wǎng)產(chǎn)品如何實現(xiàn)個性化推薦?