App介面互動設計規範

標籤：

 

策劃007-App介面互動設計規範字數1805 閱讀3544 評論20 喜歡154
互動設計規範

在上篇《策劃006-APP介面設計風格》確定下來後，產品經理（兼互動設計）還不用著急將所有的互動稿扔給設計師進行細緻的介面設計。在細節設計啟動前，拉上設計師和安卓前端開發、ios前端開發一起商議確定設計規範先吧！

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

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

一、頁面配置規範
頁面配置

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

推薦使用mac向量設計工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作為標準尺寸設計。在介面設計完成後可以做相應的微調匯出適用ios和安卓尺寸的稿子。這裡可以首先統一設計稿輸出規範：

安卓（720*1280px）：介面預覽圖、介面座標圖、標準介面的表徵圖png檔案

IOS（640*1136px）：介面預覽圖、介面座標圖、1-3倍圖向量表徵圖pdf檔案

PS：介面座標圖指在設計已定稿的介面預覽圖上標註：介面元素的間距、文字的顏色、文字的字型大小大小、表徵圖的尺寸、按鈕不同狀態顏色、按鈕的尺寸等等

介面座標圖執行個體二、標準色規範
標準色規範

標準色規範：重要、一般、弱。標準色重要：重要顏色中一般不超過3種，這裡的例子重要顏色之一紅色需要小面積使用,用於特別需要強調和突出的文字、按鈕和icon；而黑色用於重要級文字資訊比如標題、本文等。標準色一般：都是相近的顏色，而且要比重要顏色弱，普遍用於普通級資訊、引導詞比如提示性文案或者次要的文字資訊。標準色較弱：普遍用於背景色和不需要顯眼的邊角資訊。

標準色執行個體三、標準字規範
標準字規範

文字是APP主要資訊的表現，尤其新聞閱讀、社區APP等制定標準的設計規範和良好的排版方式，使用者使用APP也覺得毫無疲勞感，這一點很重要。標準字規範重要、一般、弱。這裡主要規範標準字的大小，標準字要注意跟上文的標準色進行組合突出APP重要的資訊和弱化次要的資訊。標準字重要：大字型大小普遍用於大標題、top導航，較小字型大小用在分割模組的標題上。標準字一般：主要用在大多數文字，比如本文。標準字弱：普遍與標準色較弱組合用於輔助性文字如一些次要的文案說明。

標準字執行個體四、介面元素間距
介面元素間距

APP介面要給人簡潔整齊，條理清晰感，依靠的就是介面元素的排版和間距設計。這裡間距設計還要注意考慮適配不同的螢幕解析度。一般解決方案有據螢幕等比放大縮小間距，或者固定某些介面元素的間距，讓其他空間留空展開。為了滿足螢幕解析度較大的裝置，有時甚至需要改變APP介面的頁面配置。

iPad版vsiPhone版

五、彈層規範

彈層規範

彈層規範要注意分別設計安卓和ios的彈層，比如ios大多操作彈層由底部彈出，而安卓直接顯示操作再頁面中央，這樣的互動搞作應該遵循各自平台的設計要求。彈層需求根據不同的功用設計不同的樣式。比如操作性彈層-右上方更多按鈕觸發；提示性彈層：弱提示性的應用系統的token飄字提示即可；需要強提示可以使用取消、確定的模組彈層；更強提示而且彈層需要承載一定操作的使用強引飛彈層，右上方提供關閉操作或者可以點擊非彈層地區關閉彈層。

六、Loading規範
Loading規範

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

次元社、閨蜜圈loading七、表徵圖/按鈕規範
表徵圖按鈕規範

表徵圖規範要注意安卓和ios平台需求不同的大小和不同的檔案格式：如安卓需要720*1280px標準頁面的png表徵圖格式；ios需要3個尺寸320*（1-3）倍圖的表徵圖pdf檔案。表徵圖還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。

按鈕規範按狀態分有：常態、點擊態、不可點擊態。按鈕規範因不同功能和情境需要，設計不同的樣式和顏色，在尺寸上也分有：長、中、短；而且按不同手機平台長中短尺寸也注意有所不同。

八、頁面載入失敗、頁面為空白展示
載入失敗、頁面為空白

頁面載入失敗、頁面為空白可以統一規範為NPC、文案、按鈕。要注意根據不同的情境顯示不同的NPC和文案。

......

...

設計規範主要由設計童鞋來梳理，但必須要與前端開發、產品經理達成共識，嚴格遵守約定的規範，否則這個設計規範就毫無意義了。在制定設計規範過程中，產品經理要積極主動充當橋樑角色群組織設計師、前端開發一起制定設計規範，保證設計規範考慮的更切合實際、更全面、更完整。

 轉自：連結

App介面互動設計規範