產(chǎn)品經(jīng)理畫(huà)移動(dòng)端原型時(shí)需要注意哪些問(wèn)題？

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

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

（1）原型大小，指的是在A(yíng)xure中對(duì)應(yīng)的長(zhǎng)寬。規(guī)范的移動(dòng)端頁(yè)面大小為：寬度375*高度667(單位為px，本文中，所有的數(shù)字單位均為px，隱去不寫(xiě))，當(dāng)然，如果頁(yè)面比較長(zhǎng)，比如首頁(yè)，可以無(wú)視667這個(gè)要求，把該有的內(nèi)容都制作出來(lái)即可。

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

圖一

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

圖二

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

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

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

圖三

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

圖四

（4）很多產(chǎn)品經(jīng)理的原型在制作的時(shí)候沒(méi)問(wèn)題，但是一旦預(yù)覽就開(kāi)始出現(xiàn)不對(duì)齊、文字排版混亂等異常情況。我們先說(shuō)一下原因吧：因?yàn)楫?dāng)原型中文字過(guò)小時(shí)，在預(yù)覽的情況下，瀏覽器會(huì)自動(dòng)對(duì)文字進(jìn)行放大的處理，保證能夠閱讀。那處理辦法是什么?很簡(jiǎn)單，導(dǎo)出圖片。

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

圖五

圖六

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

目前黑馬程序員的產(chǎn)品經(jīng)理學(xué)科正在火熱招生中，并且上海校區(qū)和深圳校區(qū)已經(jīng)全面恢復(fù)線(xiàn)下。如果感興趣的小伙伴可以來(lái)看看，我們有專(zhuān)業(yè)的師資團(tuán)隊(duì)給大家授課，并且輔導(dǎo)大家就業(yè)，大家快來(lái)吧!


猜你喜歡：

你的原型今天被吐槽了嗎? 

數(shù)據(jù)埋點(diǎn)基礎(chǔ)：術(shù)語(yǔ)和埋點(diǎn)方式 
2020年產(chǎn)品經(jīng)理5.0課程