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

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

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

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

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

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

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

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

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

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

按慣例，先更新技能樹：

我們看平臺規(guī)范的時候，可以從這四個方面入手：

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

一、原則

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

常見的平臺有：

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

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

由于各個平臺之間存在著差異性，它們會著重告知自己的特殊原則，比如 iOS10 就強調(diào)這三點：

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

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

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

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

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

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

二、架構(gòu)

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

1. Windows平臺設(shè)計規(guī)范

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

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

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

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

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

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

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

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

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

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

[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

三、說明

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

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

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

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

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

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

無論是點擊界面元素還是使用鍵盤，信息輸入都是一個冗長的流程。當一個應用在做一些有用的事情前要求用戶一連串的輸入，進而拖慢了流程，那么用戶會很快感到失望，甚至會徹底地拋棄這個應用。（ST注：先從用戶使用的角度說明為什么重視這里的設(shè)計，暗示我們這里要做到高效和簡單）

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

（1）可能時展示選項

盡可能地提高信息輸入的效率。比如，考慮使用選擇器或是列表來替代輸入欄，因為從一列提前設(shè)定好的選項中選擇一個比打字容易。

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

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

（3）提供可靠的默認值

盡可能地預填最可能的信息值。提供一個可靠的默認值縮短了做決定的時間從而加快了流程。

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

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

（5）只要求必要的信息

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

（6）簡化值列表的導航

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

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

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

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

四、動效

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

1. 谷歌的動效說明²

2. 為什么動效很重要？

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

動效提供了：

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

3. Material是如何運動的？

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

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

4. 好動效是怎樣的？

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

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

4. 微軟的動效說明³

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

5. 什么是連貫動畫？

（ST注：說明其中一種動畫——連貫動畫的作用）

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

6. 查看實際操作

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

7. 為何選擇連貫動畫？

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

8. 如何實施

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

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

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