為更好的用戶體驗創建 UI 樣式指南

收聽本文的音頻版本

確保有凝聚力的產品設計和用戶體驗

1976 年，Johnny Cash 發行了One Piece at a Time ，這首歌講述了一位底特律汽車工人花了 20 年時間收集從裝配線上偷來的凱迪拉克零件的故事。

不幸的是，當工人開始製造他的盜版凱迪拉克時，他發現許多零件不兼容，因為多年來關鍵的設計特徵發生了變化。 憑藉一點獨創性，定制汽車走到了一起，但它是一種難看的混搭，無論走到哪裡都會引起嘲笑。

後端看起來也很有趣
但我們把它放在一起，當我們通過
好吧，那時我們注意到我們只有一個尾鰭。

當今數字體驗的設計者和開發者面臨著類似的挑戰。 時間的流逝是一個強大的敵人，能夠對數字產品的連續性造成嚴重破壞。 隨著時間的推移，團隊成員來來去去，趨勢發展，功能變化。 此外，我們現代數字環境的快速步伐意味著產品創新發生在季度，而不是幾年。

如果業務或設計團隊沒有記錄產品預期外觀和感覺的共享記錄，則會出現視覺和體驗上的不一致，用戶會感到沮喪，品牌的聲譽也會受到打擊。

UI 樣式指南是一種設計和開發工具，可為數字產品的用戶界面和體驗帶來凝聚力。 他們的核心是：

• 記錄產品中發生的所有設計元素和交互
• 列出關鍵的 UI 組件，例如按鈕、排版、顏色、導航菜單等。
• 記錄重要的 UX 組件，例如懸停狀態、下拉填充、動畫等。
• 包含實時元素和代碼片段，供開發人員參考和使用

在我們仔細研究如何編寫專家級 UI 樣式指南之前，重要的是要了解沒有一種萬能的方法。 風格指南的價值不僅限於擁有大型產品團隊的大品牌。 尋求一致數字體驗的中小型企業在根據其特定需求定制 UI 樣式指南時也會受益。

在 UI 樣式指南中包含這些關鍵的設計組件

熟悉品牌標識指南的設計師在過渡到 UI 樣式指南時應該沒有問題，因為與許多必須包含的關鍵設計組件有大量重疊。

專業提示：僅記錄相關的設計組件。 無關信息使 UI 樣式指南變得臃腫且難以使用。

排版方案

排版是最常見的界面設計元素之一，因此僅列出產品中使用的字體名稱是不夠的。 標題、副標題、標題（H1、H2、H3）、正文和標題應給出明確的說明。

此外，還應提供字體大小、指明粗細和定義樣式。 行高和字距調整也是需要的，當出現特殊情況時，最好選擇一種首選字體。

響應式佈局

當圍繞響應式網格系統設計數字產品時，UI 樣式指南必須解決跨屏幕尺寸的界面佈局。 這意味著包括間距、填充和放置的註釋和示例。 顯示與不同屏幕尺寸相關的產品網格系統的疊加層也很有幫助。

這裡的主要目標是提供足夠的上下文來避免一次性屏幕設計的需要。 隨著時間的推移，這些加起來會破壞數字產品的凝聚力。

調色板

破壞界面的最快方法之一是顏色使用不一致，因此需要明確定義顏色組合。 列出顏色及其值（HEX、UIColor）是一個好的開始，但也應該給出具體的配對和使用示例。

如果 UI 樣式指南引用了一組品牌標識指南，請檢查是否有可用的較淺強調色的輔助方案。 如果沒有，請創建您自己的文檔。 灰度值的選擇也很有用。

鈕扣

幾乎每個界面都包含按鈕，因此請花時間記錄它們的大小、樣式、顏色、位置、間距和印刷元素。 如果在不同的上下文中使用了不同的按鈕，也要說明清楚。

可能需要的其他 UI 組件

• 圖像學
• 工具提示和彈出框
• 模態
• 表單元素
• 數據表
• 導航菜單
• 圖表和數據可視化
• 標籤
• 通斷開關
• 對話框
• 內容網格列表
• 垂直列表
• 工具欄
• 日期和時間選擇器
• 加載指標
• 複選框
• 警報
• 下拉菜單
• 滑塊
• 步進器
• 分頁

組織和情境化設計說明

除了必備的 UI 組件之外，還有許多實用功能可以讓企業和設計團隊更輕鬆地參考、導航和實施 UI 樣式指南。

目錄

組織良好且標記清晰的目錄是幫助每個人快速找到文檔內容的簡單方法。

上下文註釋

無法預測產品生命週期中可能出現的每一個有問題的設計決策，因此闡明常用 UI 組件背後的設計原理可以使無法預見的場景更容易解決。

例如：

“我們的產品的核心是展示來自全球的最佳建築圖像。 出於這個原因，我們的界面佈局優先考慮大而引人注目的圖像而不是文本。 只要有可能，就讓圖像成為我們產品的焦點。”

間距和定位說明

間距和定位通常在“響應式佈局”部分中介紹。 根據數字產品的複雜性，說明可能包含一般的“經驗法則”或非常細化。

該做什麼和不該做什麼

通常，清楚地勾勒出設計的注意事項和注意事項會很有幫助。 例如：

• “請在界面頁腳中使用我們公司徽標的白色文字標記版本。”
• “不要在黑色背景上使用我們公司文字標記的替代顏色版本。”

該做什麼和不該做什麼可以防止辯論並節省設計和開發時間，但最好提供這樣的上下文註釋：

“這份注意事項列表涵蓋了廣泛的重要設計決策，但並未考慮到對我們產品設計元素的所有可能濫用。 考慮到這一點，在出現不確定性時做出最佳判斷，並做出準確反映我們產品整體外觀和感覺的選擇。”

實時元素和代碼片段

品牌標識指南通常是靜態文檔，但 UI 樣式指南包括在最終產品中運行的實時元素——這意味著按鈕的行為類似於按鈕，下拉菜單實際上是下拉，並且動畫是動畫的。

代碼片段允許開發人員快速將實時元素的代碼複製並粘貼到產品的後端。

使設計團隊可以輕鬆訪問 UI 樣式指南

現在我們了解瞭如何創建樣式指南以及 UI 樣式指南中包含的組件和功能，我們將注意力轉移到共享和交流上。 更具體地說，容納 UI 樣式指南的選項有哪些？

傳統上，UI 樣式指南作為網頁存在。 這為設計人員和開發人員提供了方便的訪問方式，並允許設計元素像在產品中一樣發揮作用。

最近，出現了一些基於雲的平台，允許團隊協作設計、原型和測試產品。 這些相同的平台還能夠容納 UI 樣式指南，並使團隊成員能夠交流持續的反饋和想法。

讓我們看看這些平台中的一些如何描述他們的 UI 樣式指南方法。

無花果

“使用整個團隊都可以使用的鏈接 UI 組件創建設計系統。 對共享組件進行更改時獲取更新”

階段

“庫本來應該是這樣的：顏色、屬性和元素……甚至轉換時間——現在組件中的所有內容。 就地編輯——一切都是大師。 覆蓋任何你不需要的東西，每個實例。”

視覺

“所有品牌和用戶體驗組件——包括使用文檔——都在一個地方進行管理。 更改同步到整個團隊，設計師可以隨時切換到最新版本或回滾更新。”

材料.io

“通過將樣式更改應用於顏色、形狀和排版，製作您自己的 Material 主題並創建品牌符號庫。 在圖庫中分享、上傳和展示設計迭代。 然後使用檢查模式訪問開發人員文檔。”

UI 樣式指南應該易於使用

在組裝 UI 樣式指南時，不能認為交流是理所當然的。 產品團隊由來自不同學科、文化背景和專業經驗的人組成。 使用這些原則來確保清晰和易於使用。

簡單的佈局

UI 樣式指南需要乾淨、整潔的屏幕佈局。 每個屏幕都應該井井有條，標籤清晰，清晰易讀。 用視覺信息使屏幕過載並沒有什麼好處，所以要盡量安排既簡約又寬敞的佈局。

簡明說明

保持說明簡短而甜蜜。 避免冗長的段落，並使用要點。 在可能的情況下，用視覺而不是文字進行演示。

信息性使用場景

想知道什麼時候在那個滑塊上使用這種風格的滑塊？ “使用場景”解決了這種困惑。 同樣，這裡的視覺效果比文字更強大，因此請提供能夠清楚地展示場景和正確前進道路的示例。

相關版本歷史

數字產品更新頻繁。 由於產品團隊希望完善每一個界面細節，因此保持對設計組件如何演變的持續記錄非常重要。 在這裡謹慎使用——對於較小的企業和產品團隊，維護一個廣泛的版本歷史庫可能是不切實際的。

UI 樣式指南是一種寶貴的資源和強大的設計工具

現代設計和開發團隊重視效率和多學科協作——MailChimp、Google 和 Salesforce 等大品牌所吹捧的設計語言系統就是明證。

設計語言系統允許從事複雜數字產品的不同團隊使用標準化的視覺語言進行交流。 UI 樣式指南融入了設計語言系統的結構，並作為一種工具，可用於快速迭代和一致的數字體驗。

同時，設計也不是大公司才有的追求。 各種產品團隊和數字項目都將從精心構建的 UI 樣式指南中受益，但資源（財務、時間和人才）因企業而異。

出於這個原因，當 UI 樣式指南針對個別企業和設計團隊的需求量身定制時，它們是最有用的。 每個 UI 樣式指南的最高目標是在清晰度和實用性之間取得平衡，從而帶來始終如一的令人愉悅的用戶體驗。

進一步閱讀 Toptal 設計博客：

• 網頁和印刷設計的字體樣式
• 響應式設計——最佳實踐和注意事項
• 為什麼初創公司需要風格指南
• 圖標可用性和設計最佳實踐
• 發揮你的靈感——情緒板指南