有統(tǒng)一的規(guī)范，用來讓所有人對(duì)于這個(gè)產(chǎn)品、這個(gè)平臺(tái)有同樣的認(rèn)識(shí)和理解。這就是平臺(tái)規(guī)范的意義。

說到設(shè)計(jì)規(guī)范，這可能是很多設(shè)計(jì)師會(huì)忽略的一個(gè)東西，或者就算注意到了，也并沒有引起足夠的重視，今天咱們就來講講，為什么設(shè)計(jì)規(guī)范甚至是平臺(tái)規(guī)范對(duì)我們來說很重要？

你覺得蘋果、谷歌、微軟的設(shè)計(jì)團(tuán)隊(duì)怎么樣？或者你有什么向往的設(shè)計(jì)公司或團(tuán)隊(duì)呢？

可以想見，這些團(tuán)隊(duì)的設(shè)計(jì)師都是精挑細(xì)選出來的人才，他們都有各自的擅長的領(lǐng)域，這些精英們一起設(shè)計(jì)出來的軟件系統(tǒng)當(dāng)然就是他們集體的智慧結(jié)晶。同時(shí)，既然是團(tuán)隊(duì)合作，那一定會(huì)有配合的問題，他們是怎么保證團(tuán)隊(duì)內(nèi)部不同的設(shè)計(jì)師做出來的東西能夠有統(tǒng)一的風(fēng)格和交互方式呢？一個(gè)iOS系統(tǒng)，里面除了系統(tǒng)層的設(shè)計(jì)，還包括各種內(nèi)置軟件的設(shè)計(jì)，以及讓第三方團(tuán)隊(duì)設(shè)計(jì)的軟件，他們又是怎么做到看起來就像是同一個(gè)人做的呢？

他們一定有統(tǒng)一的規(guī)范，用來讓所有人對(duì)于這個(gè)產(chǎn)品、這個(gè)平臺(tái)有同樣的認(rèn)識(shí)和理解，才有可能做到這一點(diǎn)。

這就是平臺(tái)規(guī)范的意義。

我之所以用“平臺(tái)規(guī)范”而不是“設(shè)計(jì)規(guī)范”，就是想讓大家意識(shí)到，規(guī)范這東西其實(shí)不只是給設(shè)計(jì)師看的，還會(huì)包含給開發(fā)人員看的部分，甚至于所有接觸到這個(gè)產(chǎn)品的設(shè)計(jì)開發(fā)過程的人都應(yīng)該了解，所以用“平臺(tái)規(guī)范”會(huì)更為貼切一些。

當(dāng)然，有些產(chǎn)品只對(duì)外公開了設(shè)計(jì)規(guī)范，或者本身還不是一個(gè)平臺(tái)性的產(chǎn)品，我們?cè)O(shè)計(jì)師也可以先關(guān)注他們的設(shè)計(jì)規(guī)范，從那里也能學(xué)到很多東西。

是的，其實(shí)規(guī)范這東西最大的意義不只是用來讓你遵守的，作為設(shè)計(jì)師，那些精英團(tuán)隊(duì)所寫出的規(guī)范，完全可以作為你學(xué)習(xí)的對(duì)象，里面包含著他們對(duì)自己產(chǎn)品和平臺(tái)的思考，以及對(duì)自己設(shè)計(jì)理念的總結(jié)。

且不說，我們要在這些平臺(tái)上做設(shè)計(jì)的時(shí)候需要遵循他們的規(guī)范，換個(gè)角度想，我們既然向往這些設(shè)計(jì)團(tuán)隊(duì)，那為什么不從這些規(guī)范開始學(xué)習(xí)呢？

按慣例，先更新技能樹：

我們看平臺(tái)規(guī)范的時(shí)候，可以從這四個(gè)方面入手：

1. 原則（Principle）：
   產(chǎn)品整體的設(shè)計(jì)原則，和其他產(chǎn)品在理念上的區(qū)別；
2. 架構(gòu)（Architecture）：
   規(guī)范的架構(gòu)設(shè)計(jì)，可以了解它的產(chǎn)品全貌；
3. 說明（Instruction）：
   每個(gè)控件的使用規(guī)范，開發(fā)可用的API接口；
4. 動(dòng)效（Motion）：
   他們是怎么做動(dòng)效的，這些動(dòng)效是怎么配合設(shè)計(jì)原則的。

一、原則

我們做任何一款產(chǎn)品的設(shè)計(jì)，首先要知道的就是，自己這款產(chǎn)品是在哪個(gè)平臺(tái)上的？如果會(huì)同時(shí)上線多個(gè)平臺(tái)，那每個(gè)平臺(tái)之間的區(qū)別是什么？做的時(shí)候分別要注意什么地方？

常見的平臺(tái)有：

• 桌面端：Windows、Mac OS；
• 移動(dòng)端：iOS、Android；
• 網(wǎng)頁端：桌面Web、移動(dòng)Web、H5、小程序；
• 可穿戴設(shè)備：手表、VR、AR等；
• 其他：比如電視、車載導(dǎo)航、智能家電的屏幕等。

這些是對(duì)外的大平臺(tái)，往小了看，如果我們?cè)O(shè)計(jì)的是一個(gè)微信上、支付寶上的功能，或者是改進(jìn)騰訊電腦管家上的一個(gè)功能，這時(shí)都可以把微信、支付寶、電腦管家或者自家的產(chǎn)品當(dāng)成是一個(gè)小平臺(tái)，我們應(yīng)該基于之前產(chǎn)品的原則和規(guī)范來做設(shè)計(jì)。

由于各個(gè)平臺(tái)之間存在著差異性，它們會(huì)著重告知自己的特殊原則，比如 iOS10 就強(qiáng)調(diào)這三點(diǎn)：

1. 清晰（Clarity）：縱觀整個(gè)系統(tǒng)，任何尺寸的文字都清晰易讀，圖標(biāo)精確易懂，恰當(dāng)且微妙的修飾，聚焦于功能，一切設(shè)計(jì)由功能而驅(qū)動(dòng)。留白、顏色、字體、圖形以及其它界面元素能夠巧妙地突出重點(diǎn)內(nèi)容并且表達(dá)可交互性；
2. 遵從（Deference）：流暢的動(dòng)效和清爽美觀的界面有助于用戶理解內(nèi)容并與之交互，而不會(huì)干擾用戶。當(dāng)前內(nèi)容占據(jù)整屏?xí)r，半透明和模糊處理能夠暗示其它更多的內(nèi)容。減少使用邊框、漸變和陰影讓界面盡可能地輕量化，從而突出內(nèi)容；
3. 深度（Depth）：清楚的視覺層和生動(dòng)的動(dòng)效表達(dá)了層次結(jié)構(gòu)，賦予了活力，并有助于理解。易于發(fā)現(xiàn)的且可觸發(fā)的界面元素能提升體驗(yàn)愉悅感，讓用戶在成功觸發(fā)相應(yīng)功能或者獲得更多內(nèi)容的同時(shí)還能掌控當(dāng)前位置的來龍去脈。當(dāng)用戶瀏覽內(nèi)容時(shí)，流暢的過渡提供一種縱深感。

從這三點(diǎn)可以明顯看出 iOS10 的設(shè)計(jì)特點(diǎn)，它圍繞著自己的高清屏幕、毛玻璃效果以及扁平化的設(shè)計(jì)風(fēng)格，制訂了核心設(shè)計(jì)原則。

你不妨對(duì)照這三條原則，再去看手機(jī)里的操作系統(tǒng)，你能發(fā)現(xiàn)蘋果的設(shè)計(jì)師們是如何嚴(yán)格遵守這些原則，從而設(shè)計(jì)出獨(dú)具特色的界面交互的嗎？

iOS10還有一些通用的設(shè)計(jì)原則，我們同樣能用在自己的產(chǎn)品設(shè)計(jì)中：

• 美學(xué)完整性：視覺表象、交互行為與其功能整合的優(yōu)良程度；
• 一致性：內(nèi)部一致的標(biāo)準(zhǔn)和規(guī)范有助于塑造統(tǒng)一的用戶模式；
• 直接操作：用戶直接操作對(duì)象（而不是通過控件）能夠提升用戶的參與度并有助于理解；
• 反饋：用戶的每個(gè)交互行為都需要有對(duì)應(yīng)的反饋，如果有進(jìn)度的話要有明確的提示，還可以適當(dāng)加入動(dòng)效和聲音；
• 隱喻：當(dāng)界面的視覺表象和操作行為與用戶熟悉的日常體驗(yàn)相似時(shí)，用戶就能更快速地學(xué)會(huì)這款應(yīng)用；
• 用戶控制：應(yīng)用可以對(duì)用戶行為做出智能提醒和建議，但不應(yīng)該替用戶做決定。

如果你在做設(shè)計(jì)的過程中，真的理解透iOS給出的這些設(shè)計(jì)原則，并且用這些原則來檢驗(yàn)自己的產(chǎn)品，你做出的東西就不會(huì)太差。因此在你真正有足夠的設(shè)計(jì)經(jīng)驗(yàn)和領(lǐng)悟之前，完全沒必要重新發(fā)明輪子——真的沒那么多新原則。

二、架構(gòu)

除了看規(guī)范的內(nèi)容之外，其實(shí)每一個(gè)規(guī)范文檔的結(jié)構(gòu)也有很多值得我們學(xué)習(xí)的地方。

1. Windows平臺(tái)設(shè)計(jì)規(guī)范

如果你要做一個(gè)完整的軟件系統(tǒng)，比如騰訊電腦管家這種，那要怎么開始設(shè)計(jì)，要考慮哪些內(nèi)容？既然這些都是桌面端的應(yīng)用，那不妨參考下微軟的Windows設(shè)計(jì)規(guī)范。²

可以看出，設(shè)計(jì)這類軟件，布局、樣式和控件是重點(diǎn)要考慮的三塊內(nèi)容，甚至在樣式那里還要細(xì)化設(shè)計(jì)到每一種控件，有了這個(gè)目錄在，我們?cè)谠O(shè)計(jì)的完整性上面就得以保證了。

當(dāng)然，未必是全部都要重新設(shè)計(jì)，這需要考慮到我們的設(shè)計(jì)成本，你完全可以只挑選其中的一部分進(jìn)行設(shè)計(jì)，有些部分不需要或者用得極少的話，你可以直接用Windows的或者Web默認(rèn)樣式，但是提前了解全局和默認(rèn)樣式總是有好處的。

2. 騰訊文檔品牌設(shè)定

如果你需要做一套新的品牌設(shè)計(jì)，那不妨參考下最近騰訊文檔做的品牌設(shè)定說明。³

騰訊文檔雖然只是一個(gè)新品牌，但這是騰訊ISUX團(tuán)隊(duì)親自操刀做的品牌設(shè)計(jì)，整個(gè)設(shè)計(jì)流程和內(nèi)容方面還是很值得我們借鑒的。他們?cè)O(shè)定品牌目標(biāo)、提取關(guān)鍵詞的過程，具體落地時(shí)的樣式規(guī)范，這些都可以作為品牌設(shè)計(jì)的范本來參考。

怎么樣？這么看來，無論你想做什么類型的設(shè)計(jì)，是不是都有可以借鑒的目標(biāo)了？

有一點(diǎn)值得提醒的是，這些平臺(tái)規(guī)范往往都是以網(wǎng)站的形式作為呈現(xiàn)，內(nèi)容還特別多，而且有些還是英文版的，所以大多數(shù)人容易望而怯步。我推薦大家在看的時(shí)候最好根據(jù)自己的情況，先選定iOS、Android或者微軟三者之一作為目標(biāo)，邊看邊寫筆記，看完一家，消化后再看其他的，這樣效果會(huì)更好一些。

但是這三家的設(shè)計(jì)規(guī)范更新得也很快，比如上面說的是 iOS10 的中文版規(guī)范，但其實(shí)官網(wǎng)上早就更新到 iOS11 了，而以前Windows有一版全中文的規(guī)范特別詳細(xì)有用，現(xiàn)在也更新成英文的UWP版本的規(guī)范了。所以要學(xué)習(xí)的話千萬要趁早，多存檔（保存PDF、書簽），不要等到找不到了才追悔莫及啊。

參考資料：
[1]《譯文 | iOS 10 人機(jī)界面設(shè)計(jì)指南 （一）》

[2]《Introduction to UWP app design》https://docs.microsoft.com/zh-cn/windows/uwp/design/basics/design-and-ui-intro

[3]《騰訊文檔品牌設(shè)定》https://isux.tencent.com/articles/tencent-docs.html

三、說明

如今蘋果為它的多個(gè)平臺(tái)都撰寫了詳細(xì)的人機(jī)交互規(guī)范，包含桌面系統(tǒng)（macOS）、移動(dòng)系統(tǒng)（iOS）、可穿戴系統(tǒng)（watchOS），還有電視（tvOS）和車載系統(tǒng)（CarPlay），這里簡(jiǎn)直是一個(gè)平臺(tái)交互說明的百科全書有沒有？你想做任何一個(gè)類型的平臺(tái)的設(shè)計(jì)，都可以過來參考他們制訂的交互規(guī)范，可以學(xué)到不少好東西。

再次強(qiáng)調(diào)，你要學(xué)的是他們寫的、對(duì)應(yīng)平臺(tái)的交互知識(shí)，就算你做的是Windows、Android這些平臺(tái)上的設(shè)計(jì)，一樣能學(xué)到很多好東西，別被思維框架限制了！

嗯，除了都是英文版的之外，也沒有什么缺點(diǎn)了，所以好好學(xué)英語真的很重要，至少要能看得懂這些文檔吧。

好了，知道你現(xiàn)在再惡補(bǔ)已經(jīng)來不及了，用谷歌瀏覽器自動(dòng)翻譯吧，右鍵后選擇“翻成中文（簡(jiǎn)體）”，親測(cè)可用。

舉個(gè)例子，比如 iOS10 的人機(jī)交互規(guī)范中，它對(duì)于如何設(shè)計(jì)數(shù)據(jù)輸入界面的說明，就是一個(gè)很好的學(xué)習(xí)范本。

1. 示例：數(shù)據(jù)輸入（Data Entry）

無論是點(diǎn)擊界面元素還是使用鍵盤，信息輸入都是一個(gè)冗長的流程。當(dāng)一個(gè)應(yīng)用在做一些有用的事情前要求用戶一連串的輸入，進(jìn)而拖慢了流程，那么用戶會(huì)很快感到失望，甚至?xí)氐椎貟仐夁@個(gè)應(yīng)用。（ST注：先從用戶使用的角度說明為什么重視這里的設(shè)計(jì)，暗示我們這里要做到高效和簡(jiǎn)單）

（ST注：然后給出相關(guān)的設(shè)計(jì)原則，每一點(diǎn)都是干貨）

（1）可能時(shí)展示選項(xiàng)

盡可能地提高信息輸入的效率。比如，考慮使用選擇器或是列表來替代輸入欄，因?yàn)閺囊涣刑崆霸O(shè)定好的選項(xiàng)中選擇一個(gè)比打字容易。

（2）可能時(shí)從系統(tǒng)中獲取信息

不要強(qiáng)迫用戶提供那些可以自動(dòng)或是在用戶許可內(nèi)就能獲取的信息，比如聯(lián)系人或是日歷信息。

（3）提供可靠的默認(rèn)值

盡可能地預(yù)填最可能的信息值。提供一個(gè)可靠的默認(rèn)值縮短了做決定的時(shí)間從而加快了流程。

（4）只有在收集完必需信息之后才能進(jìn)行下一步

在允許“下一步”或“繼續(xù)”按鈕前，確保所有必要的輸入框都有信息。盡可能地在用戶輸入之后就立馬檢查輸入值，這樣他們就能立即改正。

（5）只要求必要的信息

只有系統(tǒng)運(yùn)行真正必需的信息才使用必填欄。

（6）簡(jiǎn)化值列表的導(dǎo)航

尤其是在列表和選擇器中，必需能夠簡(jiǎn)單地選擇值?？紤]通過將值列表按首字母排序或是其它邏輯排列，從而加快瀏覽和選擇的速度。

（7）在輸入欄顯示提示以輔助說明

當(dāng)輸入欄沒有其它文字時(shí)，可以包含占位符文字——比如“郵件”或“密碼”。當(dāng)占位符文字已經(jīng)足夠說明時(shí)不要再單獨(dú)使用標(biāo)簽來描述。

無論你有沒有設(shè)計(jì)過這類控件，他們提供的這些原則都是很好的參考，如果你正愁沒人對(duì)你做一個(gè)系統(tǒng)性的指導(dǎo)，那這套規(guī)范簡(jiǎn)直就是一套教科書級(jí)別的干貨有沒有？而且還是蘋果設(shè)計(jì)團(tuán)隊(duì)提供的、免費(fèi)的！

四、動(dòng)效

平臺(tái)規(guī)范中不僅包含了交互說明，我們還能從中學(xué)到很多做動(dòng)效的知識(shí)，最出名的當(dāng)然要數(shù)谷歌的 Material Design 里的動(dòng)效系統(tǒng)了。來看他們團(tuán)隊(duì)對(duì)于動(dòng)效的說明：

1. 谷歌的動(dòng)效說明²

2. 為什么動(dòng)效很重要？

動(dòng)效展示了App的組織方式以及可執(zhí)行的操作。

動(dòng)效提供了：

• 不同視圖間的引導(dǎo)
• 提示用戶使用手勢(shì)后會(huì)發(fā)生什么
• 元素之間的層次和空間關(guān)系
• 轉(zhuǎn)移用戶注意力，不去關(guān)注場(chǎng)景背后發(fā)生的程序行為（如獲取內(nèi)容或加載下一個(gè)視圖）
• 讓產(chǎn)品變得有個(gè)性、優(yōu)雅和讓人喜愛

3. Material是如何運(yùn)動(dòng)的？

Material 系統(tǒng)是從現(xiàn)實(shí)世界的力學(xué)中獲得的靈感，比如重力和摩擦。這些力學(xué)理念反映在用戶的輸入對(duì)屏幕上元素的影響以及元素間的相互作用。

• 響應(yīng)：Material 充滿能量，它可以在觸發(fā)的位置快速響應(yīng)用戶的操作；
• 自然：Material 描繪了受現(xiàn)實(shí)世界中的力學(xué)啟發(fā)的自然運(yùn)動(dòng)；
• 聰明：Material 會(huì)聰明地了解其周圍環(huán)境，包括用戶和周圍的其他 Material。它可以和附近元素互動(dòng)并對(duì)用戶意圖做出適當(dāng)?shù)姆磻?yīng)；
• 示意：運(yùn)動(dòng)中的 Material 會(huì)將你的注意力在正確的時(shí)間引導(dǎo)到正確的位置。

4. 好動(dòng)效是怎樣的？

• 動(dòng)效是很快的：交互動(dòng)效不應(yīng)該讓用戶有更長的等待時(shí)間；
• 動(dòng)效是清晰的：過渡動(dòng)效應(yīng)該清晰、簡(jiǎn)單和連貫，應(yīng)該避免一次做太多動(dòng)作；
• 動(dòng)作是凝聚的：Material 元素的速度、響應(yīng)性和意圖是統(tǒng)一的。同時(shí)，你所定義的動(dòng)效體驗(yàn)在整個(gè)App中都應(yīng)該是一致的。

除了上面關(guān)于動(dòng)效的基本定義，他們還寫了很詳細(xì)的做動(dòng)效時(shí)應(yīng)該注意的細(xì)節(jié)，以及各種動(dòng)畫曲線的應(yīng)用場(chǎng)景等，非常推薦喜歡動(dòng)效的同學(xué)去好好了解一下。如果說交互說明方面蘋果團(tuán)隊(duì)是大佬，那動(dòng)畫說明方面毫無疑問谷歌團(tuán)隊(duì)才是大佬！

4. 微軟的動(dòng)效說明³

微軟在 Windows 10 以后，也做了一套自己的Fluent設(shè)計(jì)系統(tǒng)，也是蠻有特色的，我也舉例介紹一下他們對(duì)于動(dòng)效的說明吧（他們稱之為動(dòng)畫）。

5. 什么是連貫動(dòng)畫？

（ST注：說明其中一種動(dòng)畫——連貫動(dòng)畫的作用）

連貫動(dòng)畫讓你可以通過為一個(gè)元素在兩種不同視圖之間的轉(zhuǎn)換創(chuàng)建動(dòng)畫來創(chuàng)建動(dòng)態(tài)和引入注目的導(dǎo)航體驗(yàn)。 這有助于用戶維持其上下文并提供不同視圖之間的連貫性。 在連貫動(dòng)畫中，當(dāng) UI 內(nèi)容發(fā)生變化時(shí)，元素似乎在兩種不同視圖之間保持“連貫性”，從其在源視圖中的位置掠過屏幕，到達(dá)其在新視圖中的目標(biāo)位置。 這強(qiáng)調(diào)了不同視圖之間的共同內(nèi)容，并創(chuàng)建了轉(zhuǎn)換過程中美觀且動(dòng)態(tài)的效果。

6. 查看實(shí)際操作

在這段簡(jiǎn)短的視頻中，應(yīng)用使用連貫動(dòng)畫來為一個(gè)正在“繼續(xù)”變成下一頁標(biāo)題中一部分的項(xiàng)目圖像制作動(dòng)畫。 該效果有助于在轉(zhuǎn)換過程維持用戶上下文。

7. 為何選擇連貫動(dòng)畫？

在頁面之間導(dǎo)航時(shí)，很重要的一點(diǎn)是讓用戶了解導(dǎo)航過后會(huì)出現(xiàn)哪些新內(nèi)容，以及這些新內(nèi)容與他們?cè)趯?dǎo)航時(shí)的意圖有何關(guān)聯(lián)。 連貫動(dòng)畫提供了一個(gè)強(qiáng)大的視覺隱喻，通過將用戶的注意力轉(zhuǎn)移到兩個(gè)視圖之間共享的內(nèi)容，強(qiáng)調(diào)了二者之間的關(guān)系。 此外，連貫動(dòng)畫為頁面導(dǎo)航增添了視覺效果和潤色，這可以幫助讓你的應(yīng)用的動(dòng)態(tài)設(shè)計(jì)與眾不同。

8. 如何實(shí)施

設(shè)置連貫動(dòng)畫涉及兩個(gè)步驟：

1. 準(zhǔn)備源頁面上的動(dòng)畫對(duì)象，這向系統(tǒng)表明源元素將參與連貫動(dòng)畫
2. 啟動(dòng)目標(biāo)頁面上的動(dòng)畫，將參考傳遞到目標(biāo)元素

在這兩個(gè)步驟之間，源元素將以凍結(jié)狀態(tài)顯示在應(yīng)用中的其他 UI 上方，讓你可以同時(shí)執(zhí)行任何其他轉(zhuǎn)換動(dòng)畫。 出于此原因，你在兩個(gè)步驟之間不應(yīng)等待超過 250 毫秒，因?yàn)樵丛氐拇嬖诳赡軙?huì)讓人分心（ST注：這個(gè)對(duì)動(dòng)畫時(shí)間的規(guī)定可以記?。?/em>。 如果你準(zhǔn)備一個(gè)動(dòng)畫且并未在三秒內(nèi)啟動(dòng)它，則系統(tǒng)將釋放該動(dòng)畫，且任何對(duì) TryStart的后續(xù)調(diào)用將失敗。