交互技能樹08 | 平台規範有什麼用？

來自專欄 落羽敬齋

本文是在我的微信公眾號「落羽敬齋」（wingstudy）上連載的系列文章，歡迎關注~

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

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

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

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

這就是平台規範的意義。

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

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

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

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

按慣例，先更新技能樹：

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

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

一、原則

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

常見的平台有：

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

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

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

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

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

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

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

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

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

二、架構

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

Windows平台設計規範

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

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

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

騰訊文檔品牌設定

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

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

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

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

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

[1] https://www.uisdc.com/ios-10-gui-design-guideline-1 《中文版來了！UI設計師必讀的iOS 10人機界面設計指南 （一）》譯者：喵大神經

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

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

三、說明

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

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

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

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

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

示例：數據輸入（Data Entry）[^1]

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

（ST註：然後給出相關的設計原則，每一點都是乾貨）

可能時展示選項

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

可能時從系統中獲取信息

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

提供可靠的默認值

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

只有在收集完必需信息之後才能進行下一步

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

只要求必要的信息

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

簡化值列表的導航

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

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

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

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

四、動效

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

谷歌的動效說明[^2]

先來看一段 Material Motion 的介紹視頻吧：

為什麼動效很重要？

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

動效提供了：

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

Material是如何運動的？

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

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

好動效是怎樣的？

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

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

微軟的動效說明[^3]

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

什麼是連貫動畫？

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

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

查看實際操作

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

為何選擇連貫動畫？

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

如何實施

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

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

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

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

ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("image", SourceImage);

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

附錄：常用平台規範

UI Design Dos and Donts?

developer.apple.comDesign - Apple Developer?

developer.apple.com

中文版來了！UI設計師必讀的iOS 10人機界面設計指南 （一）?

www.uisdc.comGoogle Design?

design.google

Google Material Design - Motion?

material.io

設計通用 Windows 平台 (UWP) 應用?

developer.microsoft.com騰訊文檔品牌設定?

isux.tencent.com

系列文章

• 交互技能樹01 | 交互設計師該會的技能有哪些？
• 交互技能樹02 | 交互設計師的用戶思維
• 交互技能樹03 | 交互設計師的邏輯思維
• 交互技能樹04 | 交互設計師的視覺思維
• 交互技能樹05 | 交互設計師的開發思維
• 交互技能樹06 | 如何積累交互模型？
• 交互技能樹07 | 設計師要懂用戶心理

[1] https://www.uisdc.com/ios-10-gui-design-guideline-2 《中文版來了！UI設計師必讀的iOS 10人機界面設計指南 （二）》譯者：喵大神經

[2] https://material.io/guidelines/motion/material-motion.html 《Material Motion - Motion - Material Design》

[3] https://docs.microsoft.com/zh-cn/windows/uwp/design/motion/connected-animation 《適用於 UWP 應用的連貫動畫》

題圖的圖片來源於：iOS Design Themes

感興趣的朋友歡迎關注我的微信公眾號：落羽敬齋（wingstudy）

推薦閱讀：