***交互乾貨必收 | App界面交互設計規範

時間 2019-11-10

原文原文鏈接

在上篇《APP界面設計風格》肯定下來後，產品經理（兼交互設計）還不用着急將全部的交互稿扔給設計師進行細緻的界面設計。在細節設計啓動前，拉上設計師和安卓前端開發、ios前端開發一塊兒商議肯定設計規範先吧！html

APP設計規範指對APP界面進行風格統一，對界面元素的樣式、顏色和大小設定統一的規範和使用原則。與設計、前端約定好統一的設計規範很重要，約定設計規範能夠減小產品、設計、前端的溝通成本；可使界面設計整潔、統一，減小界面元素的重複設計；能夠減小設計素材，控制安裝包的大小。前端

APP設計規範主要包括對界面佈局、背景色、字體顏色大小、界面元素間距、彈層、loading、圖標、按鈕常態點擊態等進行統一的梳理和規範。ios

1、頁面佈局規範

頁面佈局微信

頁面佈局和交互規範上建議安卓、ios儘可能統一，這樣能夠避免安卓和ios分別設計一套稿子。固然土豪公司能夠忽略這個建議，安卓和ios分別作專門的設計固然更好。在中小型項目來看，設計資源緊張的話能夠考慮安卓和ios用同一個稿子，分別作相應的微調後輸出適用安卓和ios不一樣的尺寸要求就能夠。ide

推薦使用mac矢量設計工具"sketch"。以ios平臺的iPhone5的尺寸640*1136px做爲標準尺寸設計。在界面設計完成後能夠作相應的微調導出適用ios和安卓尺寸的稿子。這裏能夠首先統一設計稿輸出規範：工具

安卓（720*1280px）：界面預覽圖、界面座標圖、標準界面的圖標png文件
IOS（640*1136px）：界面預覽圖、界面座標圖、1-3倍圖矢量圖標pdf文件

PS：界面座標圖指在設計已定稿的界面預覽圖上標註：界面元素的間距、文字的顏色、文字的字號大小、圖標的尺寸、按鈕不一樣狀態顏色、按鈕的尺寸等等佈局

界面座標圖實例字體

2、標準色規範

標準色規範動畫

標準色規範：重要、通常、弱。標準色重要：重要顏色中通常不超過3種，這裏的例子重要顏色之一紅色須要小面積使用,用於特別須要強調和突出的文字、按鈕和icon；而黑色用於重要級文字信息好比標題、正文等。標準色通常：都是相近的顏色，並且要比重要顏色弱，廣泛用於普通級信息、引導詞好比提示性文案或者次要的文字信息。標準色較弱：廣泛用於背景色和不須要顯眼的邊角信息。設計

標準色實例

3、標準字規範

標準字規範

文字是APP主要信息的表現，尤爲新聞閱讀、社區APP等制定標準的設計規範和良好的排版方式，用戶使用APP也以爲毫無疲勞感，這一點很重要。標準字規範重要、通常、弱。這裏主要規範標準字的大小，標準字要注意跟上文的標準色進行組合突出APP重要的信息和弱化次要的信息。標準字重要：大字號廣泛用於大標題、top導航，較小字號用在分割模塊的標題上。標準字通常：主要用在大多數文字，好比正文。標準字弱：廣泛與標準色較弱組合用於輔助性文字如一些次要的文案說明。

標準字實例

4、界面元素間距

界面元素間距

APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計。這裏間距設計還要注意考慮適配不一樣的屏幕分辨率。通常解決方案有據屏幕等比放大縮小間距，或者固定某些界面元素的間距，讓其餘空間留空拉伸。爲了知足屏幕分辨率較大的設備，有時甚至須要改變APP界面的頁面佈局。

微信iPad版vs微信iPhone版

5、彈層規範

彈層規範

彈層規範要注意分別設計安卓和ios的彈層，好比ios大多操做彈層由底部彈出，而安卓直接顯示操做再頁面中央，這樣的交互搞做應該遵循各自平臺的設計要求。彈層需求根據不一樣的功用設計不一樣的樣式。好比操做性彈層-右上角更多按鈕觸發；提示性彈層：弱提示性的應用系統的token飄字提示便可；須要強提示可使用取消、肯定的模塊彈層；更強提示並且彈層須要承載必定操做的使用強引導彈層，右上角提供關閉操做或者能夠點擊非彈層區域關閉彈層。