教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

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

更新時(shí)間:2020年07月03日09時(shí)49分 來源:傳智播客 瀏覽次數(shù):

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

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

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

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

IOS移動(dòng)端原型1

圖一

第二,部分模塊的規(guī)范要求。移動(dòng)端的頁(yè)面,iOS人機(jī)交互指南中,針對(duì)重要模塊是有明確要求的;比如說,頂部的狀態(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)。如下圖二:

IOS移動(dòng)端原型2

圖二

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

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

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

IOS移動(dòng)端原型3

圖三

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

IOS移動(dòng)端原型4

圖四

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

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

IOS移動(dòng)端原型5

圖五

IOS移動(dòng)端原型6
圖六

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

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


猜你喜歡:

產(chǎn)品經(jīng)理怎么分析一款A(yù)pp? 

什么樣的原型是好原型?

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

0 分享到:
和我們?cè)诰€交談!