APP設計規范指對APP界面進行風格統一,對界面元素的樣式、顏色和大小設定統一的規范和使用原則。與設計、前端約定好統一的設計規范很重要,約定設計規范可以減少產品、設計、前端的溝通成本;可以使界面設計整潔、統一,減少界面元素的重復設計;可以減少設計素材,控制安裝包的大小。
APP設計規范主要包括對界面布局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標、按鈕常態點擊態等進行統一的梳理和規范。
一、頁面布局規范
頁面布局和交互規范上建議安卓、ios盡量統一,這樣可以避免安卓和ios分別設計一套稿子。當然土豪公司可以忽略這個建議,安卓和ios分別做專門的設計當然更好。在中小型項目來看,設計資源緊張的話可以考慮安卓和ios用同一個稿子,分別做相應的微調后輸出適用安卓和ios不同的尺寸要求就可以。
推薦使用mac矢量設計工具"sketch"。以ios平臺的iPhone5的尺寸640*1136px作為標準尺寸設計。在界面設計完成后可以做相應的微調導出適用ios和安卓尺寸的稿子。這里可以首先統一設計稿輸出規范:
o安卓(720*1280px):界面預覽圖、界面坐標圖、標準界面的圖標png文件
oIOS(640*1136px):界面預覽圖、界面坐標圖、1-3倍圖矢量圖標pdf文件
PS:界面坐標圖指在設計已定稿的界面預覽圖上標注:界面元素的間距、文字的顏色、文字的字號大小、圖標的尺寸、按鈕不同狀態顏色、按鈕的尺寸等等
二、標準色規范
標準色規范:重要、一般、弱。標準色重要:重要顏色中一般不超過3種,這里的例子重要顏色之一紅色需要小面積使用,用于特別需要強調和突出的文字、按鈕和icon;而黑色用于重要級文字信息比如標題、正文等。標準色一般:都是相近的顏色,而且要比重要顏色弱,普遍用于普通級信息、引導詞比如提示性文案或者次要的文字信息。標準色較弱:普遍用于背景色和不需要顯眼的邊角信息。
三、標準字規范
文字是APP主要信息的表現,尤其新聞閱讀、社區APP等制定標準的設計規范和良好的排版方式,用戶使用APP也覺得毫無疲勞感,這一點很重要。標準字規范重要、一般、弱。這里主要規范標準字的大小,標準字要注意跟上文的標準色進行組合突出APP重要的信息和弱化次要的信息。標準字重要:大字號普遍用于大標題、top導航,較小字號用在分割模塊的標題上。標準字一般:主要用在大多數文字,比如正文。標準字弱:普遍與標準色較弱組合用于輔助性文字如一些次要的文案說明。
四、界面元素間距
APP界面要給人簡潔整齊,條理清晰感,依靠的就是界面元素的排版和間距設計。這里間距設計還要注意考慮適配不同的屏幕分辨率。一般解決方案有據屏幕等比放大縮小間距,或者固定某些界面元素的間距,讓其他空間留空拉伸。為了滿足屏幕分辨率較大的設備,有時甚至需要改變APP界面的頁面布局。
五、彈層規范
彈層規范要注意分別設計安卓和ios的彈層,比如ios大多操作彈層由底部彈出,而安卓直接顯示操作再頁面中央,這樣的交互搞作應該遵循各自平臺的設計要求。彈層需求根據不同的功用設計不同的樣式。比如操作性彈層-右上角更多按鈕觸發;提示性彈層:弱提示性的應用系統的token飄字提示即可;需要強提示可以使用取消、確定的模塊彈層;更強提示而且彈層需要承載一定操作的使用強引導彈層,右上角提供關閉操作或者可以點擊非彈層區域關閉彈層。
六、Loading規范
頁面loading動畫是APP界面必不可少的元素,增加loading可以給用戶明確的反饋功能正在加載,減少用戶在等待功能響應引起的煩躁感。另外loading動畫除了常規的菊花還可以考慮使用npc,讓APP更生動、活潑;或者使用logo口號加強APP的品牌形象。