有統一的規范，用來讓所有人對于這個產品、這個平臺有同樣的認識和理解。這就是平臺規范的意義。

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

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

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

他們一定有統一的規范，用來讓所有人對于這個產品、這個平臺有同樣的認識和理解，才有可能做到這一點。

這就是平臺規范的意義。

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

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

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

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

按慣例，先更新技能樹：

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

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

一、原則

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

常見的平臺有：

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

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

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

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

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

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

iOS10還有一些通用的設計原則，我們同樣能用在自己的產品設計中：

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

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

二、架構

除了看規范的內容之外，其實每一個規范文檔的結構也有很多值得我們學習的地方。

1. Windows平臺設計規范

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

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

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

2. 騰訊文檔品牌設定

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

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

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

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

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

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

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

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

三、說明

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

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

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

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

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

1. 示例：數據輸入（Data Entry）

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

（ST注：然后給出相關的設計原則，每一點都是干貨）

（1）可能時展示選項

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

（2）可能時從系統中獲取信息

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

（3）提供可靠的默認值

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

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

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

（5）只要求必要的信息

只有系統運行真正必需的信息才使用必填欄。

（6）簡化值列表的導航

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

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

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

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

四、動效

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

1. 谷歌的動效說明²

2. 為什么動效很重要？

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

動效提供了：

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

3. Material是如何運動的？

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

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

4. 好動效是怎樣的？

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

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

4. 微軟的動效說明³

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

5. 什么是連貫動畫？

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

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

6. 查看實際操作

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

7. 為何選擇連貫動畫？

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

8. 如何實施

設置連貫動畫涉及兩個步驟：

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

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