產(chǎn)品設(shè)計中需要了解一些設(shè)計規(guī)范，規(guī)范我們更好地判斷界面的交互設(shè)計。本文總結(jié)了兩大設(shè)計規(guī)范——iOS HIG和Material Design，希望對你有所幫助。

中國每年有50萬的設(shè)計畢業(yè)生，相比之下，能夠進入大廠的寥若晨星。但所有投身于設(shè)計的設(shè)計師，都有一顆渴望成長的心?，F(xiàn)在，我們整理成文章發(fā)表出來，希望給選擇并從事設(shè)計行業(yè)的你一點成長的力量。

一、什么是兩大設(shè)計規(guī)范？

iOS Human Interface Guidelines和Material Design是最經(jīng)典的兩大系統(tǒng)級設(shè)計規(guī)范。

▲圖1 設(shè)計規(guī)范類型

設(shè)計規(guī)范按照覆蓋范圍可以分為三類，最上層是應(yīng)用級規(guī)范，即針對單個應(yīng)用的設(shè)計指導(dǎo)比如vivo應(yīng)用商店設(shè)計規(guī)范，它們與下層的平臺級規(guī)范有一定傳承和包含關(guān)系，比如各大手機廠商的OS設(shè)計規(guī)范，而這些規(guī)范的設(shè)計思想和內(nèi)容很多又都來源于底層的系統(tǒng)級規(guī)范，最經(jīng)典的就是iOS Human Interface Guidelines（后文簡稱iOS HIG）和Material Design。

iOS HIG是蘋果官方出品的用戶界面指南，指導(dǎo)iOS應(yīng)用程序設(shè)計，目的是為了使運行在iOS上的應(yīng)用都能遵從一套特定的規(guī)范，保證體驗統(tǒng)一。Material Design是谷歌官方出品的設(shè)計語言，和大家的常規(guī)認(rèn)知不同，這套規(guī)范不僅僅是安卓產(chǎn)品的設(shè)計規(guī)范，還可以跨平臺使用在Android、iOS以及Web上。

二、為什么要學(xué)習(xí)兩大設(shè)計規(guī)范？

1. 設(shè)計理念指導(dǎo)

iOS HIG和Material Design作為最經(jīng)典的設(shè)計規(guī)范，可以讓設(shè)計師學(xué)習(xí)到頂級設(shè)計規(guī)范思想，從更高的設(shè)計理念層面指導(dǎo)做設(shè)計，比如Material Design核心設(shè)計思想是將平面的二維空間變成現(xiàn)實世界的三維空間，在vivo游戲聯(lián)運懸浮窗改版設(shè)計中就吸收了這個思想，延伸X軸降維Z軸，創(chuàng)造出了更好的交互形式。

▲圖2 設(shè)計規(guī)范提供理念指導(dǎo)-vivo游戲聯(lián)運懸浮窗案例

2. 系統(tǒng)交互知識

iOS HIG和Material Design還能幫助設(shè)計師系統(tǒng)梳理交互基礎(chǔ)知識，讓你和別人講清楚你所熟悉但又無法確切闡述的設(shè)計控件，糾正原有設(shè)計誤區(qū)，比如橫向進度指示條一定用于指示明確進度，而轉(zhuǎn)圈進度環(huán)代表進度無法衡量嗎，答案是否定的。

3. 方案判斷依據(jù)

最關(guān)鍵的是iOS HIG和Material Design能為設(shè)計方案提供理論支撐和判斷依據(jù)，提高正確性和說服力，比如開關(guān)控件該怎么設(shè)計、行為召喚按鈕該怎么設(shè)計，這些平時設(shè)計工作問題的答案其實都在設(shè)計規(guī)范當(dāng)中。

4. 設(shè)計創(chuàng)意來源

iOS HIG和Material Design還能幫助打破思維局限，提供更多開闊的設(shè)計創(chuàng)意來源，比如微信懸浮窗的設(shè)計，大家都覺得很有創(chuàng)意并且實用，解決了用戶痛點，這個設(shè)計其實就來自于Material Design的底部拓展面板組件（Expanding bottom sheet），設(shè)計規(guī)范里還有很多這樣有意思的交互細(xì)節(jié)等著大家去發(fā)現(xiàn)。

三、如何學(xué)習(xí)兩大設(shè)計規(guī)范？

1. 兩大設(shè)計規(guī)范拆解、導(dǎo)讀

▲圖3 兩大設(shè)計規(guī)范構(gòu)成層次

iOS HIG和Material Design原文內(nèi)容很長，為方便大家閱讀理解，首先給大家導(dǎo)讀兩大設(shè)計規(guī)范的核心內(nèi)容。兩個設(shè)計規(guī)范的目錄結(jié)構(gòu)有差異，但是基本上可以將規(guī)范拆解成從抽象到具象的三部分：最底層的是基本設(shè)計理念，指導(dǎo)整個規(guī)范的設(shè)計思想；再上層是具體一點的界面基礎(chǔ)規(guī)范，比如導(dǎo)航方式、交互手勢、視覺布局等；最上層就是更加具體的頁面組件了，給出該規(guī)范可應(yīng)用的組件，比如我們常用的彈窗、開關(guān)控件等等。接下來和大家逐一導(dǎo)讀這三部分。

▲圖4 兩大設(shè)計規(guī)范結(jié)構(gòu)導(dǎo)圖

（1） 設(shè)計理念

▲圖5 iOS HIG和Material Design的設(shè)計理念

iOS HIG設(shè)計理念比較多，包括三大設(shè)計主旨和六大設(shè)計原則，清晰、遵從、深度、整體美學(xué)、一致性、直接操作、反饋、隱喻、用戶控制。其中最有系統(tǒng)代表性的是遵從，指好的界面設(shè)計要為內(nèi)容服務(wù)，切勿過度設(shè)計，設(shè)計師常常會因為過度追求美感而忽視這點，iOS通過使用留白、無邊框、簡化UI等方式使得呈現(xiàn)的功能更加清晰，幫助用戶更好地使用產(chǎn)品。

Material Design設(shè)計理念相對精簡，有三大設(shè)計原則，核心思想來自于現(xiàn)實世界中的材質(zhì)。和iOS一樣，Material Design的原則中也有隱喻，目的都是為了讓可用性增加，降低用戶學(xué)習(xí)成本，不過兩者在理念上稍微有些差別，MD很明確在二維界面中引入了三維空間的概念，通過二維的一些表達手段，比如投影、動效等構(gòu)建出了三維空間Z軸的概念，隱喻現(xiàn)實物體，每個界面元素都有厚度和高度，不同投影暗示了不同元素的高度。另外Material Design對動效的重視程度很高，納入設(shè)計原則的一項，動效應(yīng)該要有意義、要合理，不應(yīng)該為了炫技而動效。

2. 基礎(chǔ)規(guī)范

用戶界面基礎(chǔ)規(guī)范，包括導(dǎo)航方式、交互手勢、視覺設(shè)計等等，這部分內(nèi)容比較多雜，兩大規(guī)范的結(jié)構(gòu)和重點也各不相同，這里會抽取核心的內(nèi)容進行對比。

（1）導(dǎo)航

產(chǎn)品基礎(chǔ)規(guī)范離不開導(dǎo)航，iOS導(dǎo)航方式中有大家常見的層級導(dǎo)航和扁平導(dǎo)航，還有不常見的內(nèi)容驅(qū)動/體驗驅(qū)動導(dǎo)航。Material Design規(guī)定的導(dǎo)航類型和iOS差不多，但多了一種反向?qū)Ш?，用戶可以按時間順序在產(chǎn)品中向后移動，Android物理back鍵就是起到這種導(dǎo)航作用。

▲圖6 iOS HIG和Material Design的導(dǎo)航

（2）手勢

手勢是重要的人機交互輸入方式，iOS和Material Design的手勢趨同，如輕擊（Tap）等。另外有一些兩大規(guī)范特有的手勢交互，比如iOS由于沒有Android底部back鍵，點擊左上角返回按鈕又太遠(yuǎn)了，所以補充使用了滑動手勢返回上級頁面。其次對于隱藏操作，iOS一般使用滑動手勢出現(xiàn)，而Android使用長按手勢出現(xiàn)。這些在規(guī)范里都有定義，兩個系統(tǒng)的用戶也形成了習(xí)慣，大家要遵守使用。

▲圖7 iOS HIG和Material Design的手勢

（3）顏色

兩個規(guī)范在顏色上的特點也是符合他們的設(shè)計理念。iOS講究清晰的設(shè)計主旨，所以在色彩的使用上會更謹(jǐn)慎克制，而Material Design提倡使用高飽和度的對比色來提升產(chǎn)品的視覺表現(xiàn)力和品牌認(rèn)知。

▲圖8 iOS HIG和Material Design的顏色

（4）動效

除了兩個規(guī)范共有的導(dǎo)航、手勢、顏色等內(nèi)容外，推薦大家閱讀Material Design動效規(guī)范，由于MD對動效的重視程度很高，所以動效這部分的規(guī)范內(nèi)容也非常豐富實用。規(guī)范給出了4種動效模式，容器切換模式、共享軸模式、淡入淡出模式、褪色模式，可以根據(jù)動效表達意義選擇動效的模式。另外規(guī)范還對動效過渡的時間給出了具體建議，比如大過渡區(qū)域比小過渡區(qū)域的元素動效有更長的持續(xù)時間，動效消失的持續(xù)時間通常比動效出現(xiàn)的持續(xù)時間更短。

▲圖9 Material Design的動效

3. 頁面組件

iOS HIG和Material Design給出的組件非常多，可以大致將頁面組件分為三類：欄、視圖、控件。

▲圖10 iOS HIG和Material Design頁面組件分類

（1）欄

欄用來展示導(dǎo)航和關(guān)鍵操作，比如常見的導(dǎo)航欄。欄根據(jù)在界面上的位置可以分為：頂部欄、底部欄和側(cè)邊欄。iOS設(shè)計體系中主要使用頂部欄和底部欄，而Material Design設(shè)計體系則主要使用頂部欄和側(cè)邊欄，原因是Material Design最早是為Android系統(tǒng)設(shè)計的規(guī)范，而Android機底部都有三個物理按鍵，如果采用底部欄作為主導(dǎo)航，容易造成用戶誤點擊，不過最新版本的MD規(guī)范也開始使用底部欄了（猜測可能是因為越來越多的Android機支持取消底部虛擬按鍵），兩個規(guī)范已經(jīng)呈現(xiàn)融合的趨勢。

▲圖11 iOS HIG和Material Design頁面組件-欄

頂部欄在iOS中叫導(dǎo)航欄，Material Design中叫應(yīng)用欄，能夠?qū)崿F(xiàn)不同層級間的導(dǎo)航，也可用于管理當(dāng)前屏幕內(nèi)容，均有大小標(biāo)題兩種樣式。側(cè)邊欄只在Material Design體系中出現(xiàn)，叫抽屜導(dǎo)航，由于側(cè)邊欄比較隱蔽，一般產(chǎn)品都不會用作主導(dǎo)航方式，都是作為輔助導(dǎo)航方式。底部欄就比較常見了，國內(nèi)產(chǎn)品基本都是用這個作為主導(dǎo)航方式，底部欄在iOS中叫標(biāo)簽欄，Material Design中叫底部導(dǎo)航，兩者使用差異不大，但Material Design更注重對界面空間的利用（從側(cè)邊導(dǎo)航就能看出來），所以Material Design底部導(dǎo)航用戶上滑時是可以隱藏的。

▲圖12iOS HIG和Material Design頁面組件-頂部欄、側(cè)邊欄、底部欄

（2）視圖

視覺用來展示應(yīng)用程序中看到的主要內(nèi)容，視圖包含內(nèi)容視圖和臨時視圖，顧名思義內(nèi)容視圖就是產(chǎn)品中常態(tài)出現(xiàn)的內(nèi)容，臨時視圖是短暫出現(xiàn)的可以關(guān)閉的視圖。

▲圖13 iOS HIG和Material Design頁面組件-視圖

這里提一下我們平時設(shè)計工作中用到比較多的臨時視圖。臨視視圖按照設(shè)計目的可以分為兩類，一類是用來展示產(chǎn)品自發(fā)出現(xiàn)的信息通知、用戶操作后的反饋，形式從強到弱分別是彈窗（Alerts/Dialogs）、橫幅（Banners）、提示條（Snackbars），可以根據(jù)場景來選擇使用；另一類是用戶觸發(fā)控件后展開更多操作項，包含在當(dāng)前位置出現(xiàn)和屏幕邊緣出現(xiàn)的，適用于尺寸不同的屏幕場景。

▲圖14 iOS HIG和Material Design頁面組件-臨時視圖

（3）控件

控件是用來進行操作輸入等行為，比如按鈕、開關(guān)、滑塊等，兩大設(shè)計規(guī)范的控件種類也非常多，這里就不一一在文章中介紹了，大家感興趣可以自己閱讀規(guī)范原文。

▲圖15 iOS HIG和Material Design頁面組件-控件

2. 兩大設(shè)計規(guī)范的學(xué)習(xí)建議

（1）如何閱讀？

設(shè)計規(guī)范的學(xué)習(xí)要講究方法，建議大家在新手期直接閱讀設(shè)計規(guī)范的原文，先進行一次系統(tǒng)性的遍歷式閱讀（可借助上文的導(dǎo)讀），對整體知識有個印象，不要求死記硬背全部記住，閱讀的時候或者平時體驗產(chǎn)品的時候可以想一想產(chǎn)品中哪些應(yīng)用了規(guī)范哪些沒有應(yīng)用，思考為什么沒用，用了會不會更好，之后再把這些規(guī)范當(dāng)成字典，等真正做的時候再有針對性的查閱。

（2）如何應(yīng)用？

建議辯證看待規(guī)范，學(xué)習(xí)規(guī)范的思想方法，而不是死板遵守，遇到設(shè)計問題的時候，規(guī)范可以當(dāng)成工具書來針對性查閱，根據(jù)具體設(shè)計場景再判斷是否需要遵守。

▲圖16 如何遵守iOSHIG和MaterialDesign

對于iOS和Android操作系統(tǒng)規(guī)定的、用戶約定俗稱的習(xí)慣，是需要遵守的，比如iOS使用邊緣滑動手勢返回上級頁面、Android使用底部back鍵向后返回等。而對于規(guī)范比較模糊沒覆蓋到、用戶已經(jīng)被教育、或針對當(dāng)前場景有更合適的設(shè)計時，我們可以斟酌是否要遵守。

系統(tǒng)級別的設(shè)計規(guī)范因為要考慮到大量該系統(tǒng)產(chǎn)品的通用性，所以不可能覆蓋非常全面，很多設(shè)計細(xì)節(jié)都是可以按照具體情況去調(diào)整、增加的，比如iOS對刷新控件只規(guī)定了常用的下拉頁面內(nèi)容刷新，而淘寶首創(chuàng)了下拉距離超過閾值進入二樓，利用隱藏的頁面空間和手勢，創(chuàng)造驚喜且實用、被行業(yè)復(fù)用的設(shè)計。

所以我們設(shè)計師在熟悉規(guī)范、學(xué)習(xí)思想后，具體設(shè)計時還是要從實際場景和問題出發(fā)，敢于挑戰(zhàn)和勇于創(chuàng)新，考慮是否有更優(yōu)秀的解決方案，設(shè)計規(guī)范規(guī)定了你的設(shè)計下限，能夠保證你的設(shè)計不出錯，也就是70分，但可能會有更令人驚艷的90分以上的設(shè)計，當(dāng)這個設(shè)計足夠好的時候，也許你的設(shè)計就會成為行業(yè)約定俗成的新規(guī)范。

四、小結(jié)

最后小結(jié)一下全文的重點：

1. 什么是兩大設(shè)計規(guī)范：設(shè)計規(guī)范分為應(yīng)用級、平臺級、系統(tǒng)級，兩大設(shè)計規(guī)范iOS Human Interface Guidelines和MaterialDesign屬于系統(tǒng)級規(guī)范。
2. 為什么要學(xué)習(xí)兩大設(shè)計規(guī)范：提供設(shè)計理念指導(dǎo)、系統(tǒng)交互知識、方案判斷依據(jù)、設(shè)計創(chuàng)意來源。
3. 如何學(xué)習(xí)兩大設(shè)計規(guī)范：兩大設(shè)計規(guī)范均可以拆解成從抽象到具象的三部分：設(shè)計理念、基礎(chǔ)規(guī)范、頁面組件。建議先遍歷式全文通讀、建立認(rèn)知，等真正使用的時候再當(dāng)成字典有針對性的查閱，根據(jù)具體設(shè)計場景判斷如何使用，嘗試突破和創(chuàng)新。