本文3.8K字

文末84頁“京東APP交互設計規范”

交互設計規范，簡單的說就是用來指導設計師和開發者設計產品的一個系統。是對產品界面進行風格統一，對界面元素的樣式、顏色和大小設定統一的規范和使用原則。

與設計、前端約定好統一的設計規范很重要，約定設計規范可以減少產品、設計、前端的溝通成本；可以使界面設計整潔、統一，減少界面元素的重復設計；可以減少設計素材，控制安裝包的大小。

比如色彩規范，typography，導航范式，transition等等，如果不加定義和規范，那大家執行的時候很難一致統一。

具體可以去看看Google material design guidelines, 是目前市面上不多的優秀交互設計規范之一。

建立規范的三要素：

一、明確自己產品定位和目標 ；

二、規劃交互規范的內容范圍；

三、化簡為繁，簡潔易懂。

一、明白自己產品定位和目標

定位和目標會決定產品的風格甚至調性。是活潑、無厘頭，還是嚴肅的。

比如我們的產品是定位于服務于外貿企業用戶的工具，主要目標是幫助客戶建立自己的外貿網站/尋找外貿客戶/客戶管理/外貿營銷，簡單來說就是建站-獲客-管客-營銷-轉化。

那么所以我們的產品中需要最多的就是控件就是輸入/搜索控件和各類表單圖表，而且在控件的設計上不能設計操作性太復雜的控件（千萬不要為了追求新奇炫酷而去設計比較少見的控件，否則不僅加大前端同學工作量，用戶也不一定用的明白），不然就違背了快速操作反應的原則。

在這里建議大家可以參考阿里的Ant design交互規范。

二、規劃交互規范的內容范圍

不同的產品的交互規范范圍內容不同，一般來說網頁端產品的相對移動端產品內容更多，這是因為網頁端產品的頁面布局多樣，交互控件和方式更為復雜。

To C網頁產品比To B網頁產品內容更多，因為To B產品目標明確，更注重使用效率，不會采用過于復雜和新穎的頁面布局和交互方式。

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

1、頁面布局規范

頁面布局

頁面布局和交互規范上建議安卓、ios盡量統一，這樣可以避免安卓和ios分別設計一套稿子。當然土豪公司可以忽略這個建議，安卓和ios分別做專門的設計當然更好。

在中小型項目來看，設計資源緊張的話可以考慮安卓和ios用同一個稿子，分別做相應的微調后輸出適用安卓和ios不同的尺寸要求就可以。

推薦使用mac矢量設計工具”sketch”。以ios平臺的iPhone5的尺寸640*1136px作為標準尺寸設計。

在界面設計完成后可以做相應的微調導出適用ios和安卓尺寸的稿子。這里可以首先統一設計稿輸出規范：

• 安卓（720*1280px）：界面預覽圖、界面坐標圖、標準界面的圖標png文件

• IOS（640*1136px）：界面預覽圖、界面坐標圖、1-3倍圖矢量圖標pdf文件

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

界面坐標圖實例

2、標準色規范

（這兩個建議和UI設計師共同制定）、頁面布局、工具、控件庫、圖表，在這里我的做法是先匯總出當前產品版本所具有的所有規范內容，再參照Ant design、Material Design、element等設計平臺。

部分已有的規范內容進行升級再整理，同時根據使用場景和優使用頻率，將控件分類和調整排序，這樣基本上交互規范的框架就可以建立起來。

標準色規范

標準色規范：重要、一般、弱。

標準色重要：重要顏色中一般不超過3種，這里的例子重要顏色之一紅色需要小面積使用，用于特別需要強調和突出的文字、按鈕和icon；

而黑色用于重要級文字信息比如標題、正文等。

標準色一般：都是相近的顏色，而且要比重要顏色弱，普遍用于普通級信息、引導詞比如提示性文案或者次要的文字信息。

標準色較弱：普遍用于背景色和不需要顯眼的邊角信息。

標準色實例

不同的顏色可以表達不同的感受，顏色上的對比也有很多，這個跟色彩構成有很大的關系。顏色對比主要分色相對比、明度對比和純度對比。

一個網頁是由很多個不同元素構成的，這些元素的重要性都不同，有些元素需要特別突出、有些元素彼此之間存在著聯系，而另外的元素之間則一點關聯性都沒有。

如何去平衡元素中的等同和不同的元素特性，就顯得特別重要，因為如果不能將這些元素在一個畫面當中協調處理，這個畫面便變得突兀。對比就是兩個或更多個元素之間的不同。通過對比，設計師就可以創造出視覺趣味性，同時引導用戶的注意力。

常見的對比有這么多的表現形式：

1) 色調上的明暗對比、冷暖對比等；

2) 形狀上的大小對比、方圓對比、粗細對比、長短對比等；

3) 方向上的垂直對比、水平對比、傾斜對比等；

4) 數量上的疏密對比等；

5) 圖片上的虛實對比、黑白對比等；

6) 事物的動靜對比等。

3、標準字規范

標準字規范

文字是APP主要信息的表現，尤其新聞閱讀、社區APP等制定標準的設計規范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。標準字規范重要、一般、弱。

這里主要規范標準字的大小，標準字要注意跟上文的標準色進行組合突出APP重要的信息和弱化次要的信息。

標準字重要：大字號普遍用于大標題、top導航，較小字號用在分割模塊的標題上。

標準字一般：主要用在大多數文字，比如正文。標準字弱：普遍與標準色較弱組合用于輔助性文字如一些次要的文案說明。

標準字實例

4、界面元素間距

界面元素間距

APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計。

這里間距設計還要注意考慮適配不同的屏幕分辨率。

一般解決方案有據屏幕等比放大縮小間距，或者固定某些界面元素的間距，讓其他空間留空拉伸。

為了滿足屏幕分辨率較大的設備，有時甚至需要改變APP界面的頁面布局。

微信iPad版vs微信iPhone版

5、彈層規范

彈層規范

彈層規范要注意分別設計安卓和ios的彈層，比如ios大多操作彈層由底部彈出，而安卓直接顯示操作再頁面中央，這樣的交互搞作應該遵循各自平臺的設計要求。彈層需求根據不同的功用設計不同的樣式。

比如操作性彈層-右上角更多按鈕觸發；

提示性彈層：弱提示性的應用系統的token飄字提示即可；

需要強提示可以使用取消、確定的模塊彈層；

更強提示而且彈層需要承載一定操作的使用強引導彈層，右上角提供關閉操作或者可以點擊非彈層區域關閉彈層。

6、Loading規范

Loading規范

頁面loading動畫是APP界面必不可少的元素，增加loading可以給用戶明確的反饋功能正在加載，減少用戶在等待功能響應引起的煩躁感。

另外loading動畫除了常規的菊花還可以考慮使用npc，讓APP更生動、活潑；或者使用logo口號加強APP的品牌形象。

7、圖標/按鈕規范

圖標按鈕規范

圖標規范要注意安卓和ios平臺需求不同的大小和不同的文件格式：如安卓需要720*1280px標準頁面的png圖標格式；ios需要3個尺寸320*（1-3）倍圖的圖標pdf文件。

圖標還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。

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

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

加載失敗、頁面為空

頁面加載失敗、頁面為空可以統一規范為NPC、文案、按鈕。要注意根據不同的場景顯示不同的NPC和文案。

設計規范主要由設計童鞋來梳理，但必須要與前端開發、產品經理達成共識，嚴格遵守約定的規范，否則這個設計規范就毫無意義了。

在制定設計規范過程中，產品經理要積極主動充當橋梁角色組織設計師、前端開發一起制定設計規范，保證設計規范考慮的更切合實際、更全面、更完整。

三、刪繁就簡

如果大家通過上述方法來進行設計規范整理，勢必會得到一份體量更加龐大的交互設計規范文件，這個時候，設計師更多的需要根據自己的經驗來進行刪減（會合理刪減的設計師才是優秀的設計師）。

哪些可以刪減？哪些不能刪減？

1、可以刪減

舉例來說：下面兩個時間范圍篩選器，能達成的篩選目的和作用是一致的，但由于長度不一樣，上面的篩選器能適配的頁面場景更多，所以可以直接把下方的時間篩選器刪減。

2. 不可以刪減

舉例來說：下面兩個選擇器，兩個表面上目的看起來都是進行選擇項選擇，但右邊的選擇器帶有搜索框，適合選擇項數據龐大時的進行搜索選擇，左邊的適合選擇項數據量不大時進行直接選擇，所使用的場景并不相同，所以不能進行刪減。

好的交互規范不需要太多的文字說明，團隊成員直接看圖即可明白這個組件的交互方式（點擊前、點擊后、空數據、有數據、極限情況下等的交互樣式），當然有些不好通過圖稿表達的信息也必須需要文字說明輔助，但相比文字而言，大家更喜歡看的肯定是圖片。(完）

附84頁?“京東APP交互設計規范”

完整文檔加管理員獲取

分享本文到朋友圈，并截圖

加微信領取資料/入群

? ?END??

喜歡這篇文章？點個“在看”支持一下！

總結

以上是生活随笔為你收集整理的经典知识：交互设计规范8大总结！附84页资料：《J 东交互设计规范》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。