交互干貨必收 | App界面交互設計規(guī)范

42 評論 291702 瀏覽 1470 收藏 10 分鐘

在上篇《APP界面設計風格》確定下來后,產品經理(兼交互設計)還不用著急將所有的交互稿扔給設計師進行細致的界面設計。在細節(jié)設計啟動前,拉上設計師和安卓前端開發(fā)、ios前端開發(fā)一起商議確定設計規(guī)范先吧!

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

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

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

244174-681062d1a410283b

頁面布局

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

推薦使用mac矢量設計工具”sketch”。以ios平臺的iPhone5的尺寸640*1136px作為標準尺寸設計。在界面設計完成后可以做相應的微調導出適用ios和安卓尺寸的稿子。這里可以首先統(tǒng)一設計稿輸出規(guī)范:

  • 安卓(720*1280px):界面預覽圖、界面坐標圖、標準界面的圖標png文件
  • IOS(640*1136px):界面預覽圖、界面坐標圖、1-3倍圖矢量圖標pdf文件

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

244174-6a9f0032dce8c8af

界面坐標圖實例

二、標準色規(guī)范

244174-dd76e93c198cce22

標準色規(guī)范

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

244174-64832b9214e30e9c

標準色實例

三、標準字規(guī)范

244174-53a10bf40b54e19b

標準字規(guī)范

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

244174-5b6ff350de69686e

標準字實例

四、界面元素間距

244174-4fe880e3fc14accb

界面元素間距

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

244174-4af7348becd31f74

微信iPad版vs微信iPhone版

五、彈層規(guī)范

244174-5ac66478727d585e

彈層規(guī)范

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

六、Loading規(guī)范

244174-446167c3ecd77e82

Loading規(guī)范

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

244174-8b97e8bd72060c67

次元社、閨蜜圈loading截圖

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

244174-2b523bc2dc22badb

圖標按鈕規(guī)范

圖標規(guī)范要注意安卓和ios平臺需求不同的大小和不同的文件格式:如安卓需要720*1280px標準頁面的png圖標格式;ios需要3個尺寸320*(1-3)倍圖的圖標pdf文件。圖標還應該根據不同的功能需求設計不同的狀態(tài):如常態(tài)、選中態(tài)、點擊態(tài)等。

按鈕規(guī)范按狀態(tài)分有:常態(tài)、點擊態(tài)、不可點擊態(tài)。按鈕規(guī)范因不同功能和場景需要,設計不同的樣式和顏色,在尺寸上也分有:長、中、短;而且按不同手機平臺長中短尺寸也注意有所不同。

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

244174-ef9853634ac600b1

加載失敗、頁面為空

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

……

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

#專欄作家#

鷹眼Eeyes,閨蜜圈產品經理,人人都是產品經理專欄作家。擅長產品策劃,產品運營,項目管理。專注于移動社交方向,深度調研女性社交;關注O2O電商、智能硬件、物聯網發(fā)展。厚積薄發(fā),總結,升華中…

本文原創(chuàng)發(fā)布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 濫竽充數的交互文

    來自廣東 回復
  2. 額,這是ui規(guī)范,不是交互吧

    來自菲律賓 回復
  3. 大哥,標題寫交互規(guī)范,實際內容卻是UI規(guī)范,交互和UI是兩個崗位,你不懂就別忽悠別人

    來自浙江 回復
  4. 標題欄是個什么鬼? ??

    來自江蘇 回復
  5. 那對于ios7的話,不用再做一套交互設計稿?

    來自廣東 回復
  6. 頂部標題欄的icon,安卓和ios怎么是用了兩種大小的icon?是做了兩套設計圖嗎

    來自北京 回復
  7. 這個好像也可以做UI規(guī)范呢,我其實也覺得交互文檔和UI規(guī)范其實有相同之處,這篇UI方面內容就不少呢

    來自廣東 回復
  8. 好混亂的文檔,到底要給誰看呢?搞不清楚。

    來自北京 回復
  9. 必須贊一個

    來自北京 回復
  10. 寫的很詳細,贊……

    回復
  11. nice

    來自廣東 回復
  12. 希望能有更多更全的分享,已經在學習了 ??

    來自北京 回復
  13. 這個大部分算視覺設計規(guī)范更多一些,交互層面上的太少了

    來自廣東 回復
  14. 學習了,謝謝分享!

    來自北京 回復
  15. 大部分還是視覺上的規(guī)范,交互的比較少呢

    來自北京 回復
  16. 我們的IOS設計,基準是750*1334px,2倍可以切3倍也可以。畢竟現在iPhone6更主流。

    來自重慶 回復
    1. 是的

      來自北京 回復
  17. 太棒了,太棒了,多謝哦

    來自北京 回復
    1. 123

      來自北京 回復
  18. 非常不錯的分享~雖然每一款APP產品在UI上的規(guī)范是不一樣的,但可以借鑒和學習,形成產品的自身氣質

    來自浙江 回復
  19. 這個設計規(guī)范應該是由設計人員出初稿,產品經理、前端、設計三方溝通,最終由產品經理決定。

    來自安徽 回復
    1. 這個版本好像是外包公司做的吧

      來自廣東 回復
  20. 這個還不能稱為交互設計規(guī)范,最多是視覺設計規(guī)范!至少少部分基礎交互

    來自廣東 回復
  21. 遇到不少產品經理都是跟UI的同學說你來定啥啥的,等UI的同學出成品后又嫌這嫌那改改改的節(jié)奏(⊙o⊙)…

    來自廣東 回復
    1. 同意

      來自廣東 回復
  22. 涉及到規(guī)范,就不要用px作為單位了,用dp或pt吧

    來自四川 回復
    1. 贊同!

      來自湖南 回復
    2. 是的!

      來自湖南 回復
  23. 新手必須收了

    來自湖北 回復
  24. 同問 何小白+1

    來自浙江 回復
  25. 干貨收下! ??

    來自廣東 回復
  26. 文章寫得很好,但是產品經理把這些字體大小,顏色,間距都做了,請問你們的UI還能做什么呢?剩下只是畫圖標而已嗎

    來自廣東 回復
    1. 有道理

      來自北京 回復
    2. 多學點總是沒錯的

      來自河北 回復
    3. 我也是同感,產品經理怎么把美工的活干了~

      來自北京 回復
    4. 你丫才美工。你全家都是美工

      來自上海 回復
    5. 這些本來就是設計做的啊,只是產品經理整理發(fā)出的吧?

      來自廣東 回復
  27. 謝謝~~希望可以盡早用上

    來自北京 回復
  28. 很具體,感謝總結! ??

    來自北京 回復