騰訊高階設計師：互動知識樹系列之平臺規範

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

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

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

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

這就是平臺規範的意義。

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

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

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

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

按慣例，先更新技能樹：

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

• 原則（Principle） ：產品整體的設計原則，和其他產品在理念上的區別；
• 架構（Architecture） ：規範的架構設計，可以瞭解它的產品全貌；
• 說明（Instruction） ：每個控制元件的使用規範，開發可用的 API 介面；
• 動效（Motion） ：他們是怎麼做動效的，這些動效是怎麼配合設計原則的。

一、原則

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

常見的平臺有：

• 桌面端：Windows、Mac OS；
• 移動端：iOS、Android；
• 網頁端：桌面Web、移動Web、H5、小程式；
• 可穿戴裝置：手錶、VR、AR等；
• 其他：比如電視、車載導航、智慧家電的螢幕等。

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

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

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

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

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

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

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

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

二、架構

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

1. Windows 平臺設計規範

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

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

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

2. 騰訊文件品牌設定

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

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

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

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

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

參考資料：

1. 《譯文 | iOS 10 人機界面設計指南 （一）》
2. 《Introduction to UWP app design》
3. 《騰訊文件品牌設定》

三、說明

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

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

舉個例子，比如 iOS10 的人機互動規範中，它對於如何設計資料輸入介面的說明，就是一個很好的學習範本。

示例：資料輸入（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. 如何實施

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

• 準備源頁面上的動畫物件，這向系統表明源元素將參與連貫動畫
• 啟動目標頁面上的動畫，將參考傳遞到目標元素

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

你可以通過呼叫  ConnectedAnimationService.GetForCurrentView 來訪問當前的 ConnectedAnimationService 例項。 要準備動畫，請在此例項上呼叫 PrepareToAnimate，將參考傳遞到你想用在轉換中的唯一金鑰和 UI 元素。 該唯一金鑰讓你可以稍後檢索動畫，例如在不同頁面上檢索。

ConnectedAnimationService.GetForCurrentView().PrepareToAnimate(「image」, SourceImage);

（ST注：在說明了動畫的作用之後，他們開始說明如何在開發中使用這種動畫的方式，你想用這種動畫的時候可以把它給開發看）

附錄：常用平臺規範

• iOS的 Do’s and Don’ts： https://developer.apple.com/design/tips/
• 蘋果的人機互動指南（HIG)： https://developer.apple.com/design/
• iOS10人機互動指南（中文版翻譯）： https://www.uisdc.com/ios-10-gui-design-guideline-1
• Google Design：  https://design.google
• Google Material Design – Motion ： https://material.io/guidelines/motion/material-motion.html
• 微軟的UWP設計規範： https://developer.microsoft.com/zh-cn/windows/apps/design
• 騰訊文件品牌設定： https://isux.tencent.com/articles/tencent-docs.html

參考資料：

• 《譯文 | iOS 10 人機界面設計指南 （一）》
• 《Material Motion – Motion – Material Design》
• 《適用於 UWP 應用的連貫動畫》

歡迎關注作者的微信公眾號：「落羽敬齋」

圖片素材作者：runo Pego

互動知識樹系列往期回顧：

• 《騰訊高階設計師：互動知識樹系列之產品思維》
• 《騰訊高階設計師：互動知識樹系列之視覺思維》
• 《騰訊高階設計師：互動知識樹系列之開發思維》
• 《騰訊高階設計師：互動知識樹系列之如何積累互動模型？》

================ 明星欄目推薦 ================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手並製作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com