在上篇《APP界面設(shè)計(jì)風(fēng)格》確定下來后，產(chǎn)品經(jīng)理（兼交互設(shè)計(jì)）還不用著急將所有的交互稿扔給設(shè)計(jì)師進(jìn)行細(xì)致的界面設(shè)計(jì)。在細(xì)節(jié)設(shè)計(jì)啟動(dòng)前，拉上設(shè)計(jì)師和安卓前端開發(fā)、ios前端開發(fā)一起商議確定設(shè)計(jì)規(guī)范先吧！

APP設(shè)計(jì)規(guī)范指對(duì)APP界面進(jìn)行風(fēng)格統(tǒng)一，對(duì)界面元素的樣式、顏色和大小設(shè)定統(tǒng)一的規(guī)范和使用原則。與設(shè)計(jì)、前端約定好統(tǒng)一的設(shè)計(jì)規(guī)范很重要，約定設(shè)計(jì)規(guī)范可以減少產(chǎn)品、設(shè)計(jì)、前端的溝通成本；可以使界面設(shè)計(jì)整潔、統(tǒng)一，減少界面元素的重復(fù)設(shè)計(jì)；可以減少設(shè)計(jì)素材，控制安裝包的大小。

APP設(shè)計(jì)規(guī)范主要包括對(duì)界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標(biāo)、按鈕常態(tài)點(diǎn)擊態(tài)等進(jìn)行統(tǒng)一的梳理和規(guī)范。

一、頁面布局規(guī)范

頁面布局

頁面布局和交互規(guī)范上建議安卓、ios盡量統(tǒng)一，這樣可以避免安卓和ios分別設(shè)計(jì)一套稿子。當(dāng)然土豪公司可以忽略這個(gè)建議，安卓和ios分別做專門的設(shè)計(jì)當(dāng)然更好。在中小型項(xiàng)目來看，設(shè)計(jì)資源緊張的話可以考慮安卓和ios用同一個(gè)稿子，分別做相應(yīng)的微調(diào)后輸出適用安卓和ios不同的尺寸要求就可以。

推薦使用mac矢量設(shè)計(jì)工具”sketch”。以ios平臺(tái)的iPhone5的尺寸640*1136px作為標(biāo)準(zhǔn)尺寸設(shè)計(jì)。在界面設(shè)計(jì)完成后可以做相應(yīng)的微調(diào)導(dǎo)出適用ios和安卓尺寸的稿子。這里可以首先統(tǒng)一設(shè)計(jì)稿輸出規(guī)范：

• 安卓（720*1280px）：界面預(yù)覽圖、界面坐標(biāo)圖、標(biāo)準(zhǔn)界面的圖標(biāo)png文件
• IOS（640*1136px）：界面預(yù)覽圖、界面坐標(biāo)圖、1-3倍圖矢量圖標(biāo)pdf文件

PS：界面坐標(biāo)圖指在設(shè)計(jì)已定稿的界面預(yù)覽圖上標(biāo)注：界面元素的間距、文字的顏色、文字的字號(hào)大小、圖標(biāo)的尺寸、按鈕不同狀態(tài)顏色、按鈕的尺寸等等

界面坐標(biāo)圖實(shí)例

二、標(biāo)準(zhǔn)色規(guī)范

標(biāo)準(zhǔn)色規(guī)范

標(biāo)準(zhǔn)色規(guī)范：重要、一般、弱。標(biāo)準(zhǔn)色重要：重要顏色中一般不超過3種，這里的例子重要顏色之一紅色需要小面積使用,用于特別需要強(qiáng)調(diào)和突出的文字、按鈕和icon；而黑色用于重要級(jí)文字信息比如標(biāo)題、正文等。標(biāo)準(zhǔn)色一般：都是相近的顏色，而且要比重要顏色弱，普遍用于普通級(jí)信息、引導(dǎo)詞比如提示性文案或者次要的文字信息。標(biāo)準(zhǔn)色較弱：普遍用于背景色和不需要顯眼的邊角信息。

標(biāo)準(zhǔn)色實(shí)例

三、標(biāo)準(zhǔn)字規(guī)范

標(biāo)準(zhǔn)字規(guī)范

文字是APP主要信息的表現(xiàn)，尤其新聞閱讀、社區(qū)APP等制定標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點(diǎn)很重要。標(biāo)準(zhǔn)字規(guī)范重要、一般、弱。這里主要規(guī)范標(biāo)準(zhǔn)字的大小，標(biāo)準(zhǔn)字要注意跟上文的標(biāo)準(zhǔn)色進(jìn)行組合突出APP重要的信息和弱化次要的信息。標(biāo)準(zhǔn)字重要：大字號(hào)普遍用于大標(biāo)題、top導(dǎo)航，較小字號(hào)用在分割模塊的標(biāo)題上。標(biāo)準(zhǔn)字一般：主要用在大多數(shù)文字，比如正文。標(biāo)準(zhǔn)字弱：普遍與標(biāo)準(zhǔn)色較弱組合用于輔助性文字如一些次要的文案說明。

標(biāo)準(zhǔn)字實(shí)例

四、界面元素間距

界面元素間距

APP界面要給人簡(jiǎn)潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設(shè)計(jì)。這里間距設(shè)計(jì)還要注意考慮適配不同的屏幕分辨率。一般解決方案有據(jù)屏幕等比放大縮小間距，或者固定某些界面元素的間距，讓其他空間留空拉伸。為了滿足屏幕分辨率較大的設(shè)備，有時(shí)甚至需要改變APP界面的頁面布局。

微信iPad版vs微信iPhone版

五、彈層規(guī)范

彈層規(guī)范

彈層規(guī)范要注意分別設(shè)計(jì)安卓和ios的彈層，比如ios大多操作彈層由底部彈出，而安卓直接顯示操作再頁面中央，這樣的交互搞作應(yīng)該遵循各自平臺(tái)的設(shè)計(jì)要求。彈層需求根據(jù)不同的功用設(shè)計(jì)不同的樣式。比如操作性彈層-右上角更多按鈕觸發(fā)；提示性彈層：弱提示性的應(yīng)用系統(tǒng)的token飄字提示即可；需要強(qiáng)提示可以使用取消、確定的模塊彈層；更強(qiáng)提示而且彈層需要承載一定操作的使用強(qiáng)引導(dǎo)彈層，右上角提供關(guān)閉操作或者可以點(diǎn)擊非彈層區(qū)域關(guān)閉彈層。

六、Loading規(guī)范

Loading規(guī)范

頁面loading動(dòng)畫是APP界面必不可少的元素，增加loading可以給用戶明確的反饋功能正在加載，減少用戶在等待功能響應(yīng)引起的煩躁感。另外loading動(dòng)畫除了常規(guī)的菊花還可以考慮使用npc，讓APP更生動(dòng)、活潑；或者使用logo口號(hào)加強(qiáng)APP的品牌形象。

次元社、閨蜜圈loading截圖

七、圖標(biāo)/按鈕規(guī)范

圖標(biāo)按鈕規(guī)范

圖標(biāo)規(guī)范要注意安卓和ios平臺(tái)需求不同的大小和不同的文件格式：如安卓需要720*1280px標(biāo)準(zhǔn)頁面的png圖標(biāo)格式；ios需要3個(gè)尺寸320*（1-3）倍圖的圖標(biāo)pdf文件。圖標(biāo)還應(yīng)該根據(jù)不同的功能需求設(shè)計(jì)不同的狀態(tài)：如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等。

按鈕規(guī)范按狀態(tài)分有：常態(tài)、點(diǎn)擊態(tài)、不可點(diǎn)擊態(tài)。按鈕規(guī)范因不同功能和場(chǎng)景需要，設(shè)計(jì)不同的樣式和顏色，在尺寸上也分有：長(zhǎng)、中、短；而且按不同手機(jī)平臺(tái)長(zhǎng)中短尺寸也注意有所不同。

八、頁面加載失敗、頁面為空展示

加載失敗、頁面為空

頁面加載失敗、頁面為空可以統(tǒng)一規(guī)范為NPC、文案、按鈕。要注意根據(jù)不同的場(chǎng)景顯示不同的NPC和文案。

……

…

設(shè)計(jì)規(guī)范主要由設(shè)計(jì)童鞋來梳理，但必須要與前端開發(fā)、產(chǎn)品經(jīng)理達(dá)成共識(shí)，嚴(yán)格遵守約定的規(guī)范，否則這個(gè)設(shè)計(jì)規(guī)范就毫無意義了。在制定設(shè)計(jì)規(guī)范過程中，產(chǎn)品經(jīng)理要積極主動(dòng)充當(dāng)橋梁角色組織設(shè)計(jì)師、前端開發(fā)一起制定設(shè)計(jì)規(guī)范，保證設(shè)計(jì)規(guī)范考慮的更切合實(shí)際、更全面、更完整。

#專欄作家#

鷹眼Eeyes，閨蜜圈產(chǎn)品經(jīng)理，人人都是產(chǎn)品經(jīng)理專欄作家。擅長(zhǎng)產(chǎn)品策劃，產(chǎn)品運(yùn)營(yíng)，項(xiàng)目管理。專注于移動(dòng)社交方向，深度調(diào)研女性社交；關(guān)注O2O電商、智能硬件、物聯(lián)網(wǎng)發(fā)展。厚積薄發(fā)，總結(jié)，升華中…

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。