UI 設計綜合指南

已發表: 2022-03-10

快速總結↬ （本文由 Adobe 贊助。）在設計您的用戶界面時，有一個適當的系統是有幫助的。本指南將幫助您找到經得起時間考驗的可靠 UI 方法。

（這是一篇贊助文章。）隨著大圖的建立——映射用戶旅程和定義你的設計的外觀和感覺——我在這十篇文章系列中的第五篇文章深入探討了設計用戶界面組件的細節。

UX、IA、UI：所有這些縮寫都可能令人困惑。實際上，作為設計師，我們通常會在這些不同的專業領域工作：設計整體用戶體驗 (UX)，在考慮信息架構 (IA) 時邏輯組織信息，以及考慮用戶界面 (UI) 的粒度設計.

在我的 UX 設計指南中，我探討了了解用戶需求和考慮用戶旅程的必要性、考慮到人類行為的設計需求以及建立整體審美的必要性。在本文中，我將詳細探討我們如何設計一致且可擴展的界面。我們在設計過程的這個階段的目標是將我們學到的知識應用到我們的用戶界面設計中：

使用基準測試來開發界面清單，以確保以連貫一致的方式考慮您的用戶界面；
根據您的界面清單構建模式庫，以確保您的設計既具有成本效益又具有一致性；和

跳躍後更多！繼續往下看↓

將動畫作為與用戶交流的一種方式，在功能和愉悅方面改進我們的設計。

簡而言之，本文旨在幫助您開發一種系統化的用戶界面設計方法，該方法廣泛適用於一系列項目，並且具有可擴展性。通過建立設計框架，我們可以應用從他人那裡吸取的經驗教訓，從而改進我們的設計並為我們的用戶帶來更好的結果。

用戶界面設計 (UI) 是一個龐大的主題，因此可以將這篇文章視為一個簡短的入門讀物，但是 - 就像我之前的文章中一樣 - 我將提供一些建議閱讀，以確保您能夠很好地涵蓋。

開始使用接口清單

您可能會從一個全新的產品開始，或者重新審視現有的產品，但從建立接口清單開始會有所幫助。正如內容清單有助於確保內容（即文字、圖像和其他類型的內容）是一致的，界面清單也確保用戶界面在一個全面和考慮的框架內得到一致的開發。

從長遠來看，通過在團隊成員之間建立一致且易於擴展的設計系統，花一點時間在這方面將節省大量時間。構建界面清單可以幫助您將時間和精力集中在此時需要的元素上，但是——就像樣式指南一樣——它應該是一個可擴展的活文檔，隨著產品的增長而增長。

那麼，究竟什麼是“界面庫存”？好吧，這個詞是由 Brad Frost 創造和推廣的。它採用了支撐內容清單的想法並將其映射到用戶界面設計的世界。正如弗羅斯特總結的：

“界面清單類似於內容清單，只是您不是對內容進行篩选和分類，而是對構成您的網站 [或產品] 的組件進行盤點和分類。界面清單是零碎的綜合集合構成你的界面。”

— 接口庫存，Brad Frost

如果您正在重新設計現有產品，則界面清單首先會繪製出所有組件（無論大小），以便系統地記錄它們。如果您正在著手一個新項目，您可能想繪製競爭對手的產品圖，對他人的工作進行分析。這有助於您了解需要考慮的不同界面組件。

界面清單可幫助您定義用戶界面 (UI) 中需要考慮的所有內容。 Brad Frost 提供了一個您可以使用的模板。（圖片來源）

該過程的第一個階段是系統地截取您設計的所有內容的屏幕截圖。這將很耗時，但很重要。正是在這個階段——特別是如果你有一個龐大的設計團隊——你可能會開始看到不同元素的設計方式不一致。您的界面清單將幫助您識別這些元素，然後您可以對其進行修復。

考慮構成用戶界面的所有不同組件，包括：

排版
- 標題和小標題
- 文本元素（Standfirsts，段落）
- 列表
圖像和媒體
- 標誌
- 圖像學
- 圖片
形式
- 文本輸入
- 單選/複選框輸入
- 選擇菜單

如果你和以前的我一樣（在我知道之前！ ），你很可能在需要時設計了這些不同的組件，而沒有任何系統的方法。 接口庫存的想法是在這個過程中強加一個命令，以確保一切都是一致的。

該過程的第二階段，對所有內容進行分類，旨在對您拍攝的屏幕截圖施加一些順序。您可以使用各種工具來組織您的屏幕截圖，但我建議您使用 Keynote 或 PowerPoint 來組織所有內容，這樣您就可以在工作完成後向您的團隊展示。永遠有用的 Brad Frost 提供了一個您可以使用的模板 (ZIP)。

完成上述工作後，作為一個團隊或與客戶聚在一起並貫穿所有事情是一個好主意。該討論將有助於更好地理解您需要設計的不同組件。它還可能通過識別共享模式來簡化您的不同組件 - 效率的巨大勝利。

構建模式庫

隨著您的界面清單和所有組件的組織，開始識別常見的設計模式並圍繞這些構建是很重要的。您的界面清單可能已經揭示了您的設計中的明顯不一致，現在是設計過程中的重點，您可以通過以模塊化方式重建 UI 來解決這些問題。我發現把這種方法想像成有點像樂高是有幫助的。

使用樂高，您可以（通過使用小組件）構建非常複雜的東西。接口類似。儘管乍一看界面可能非常複雜，但它本質上是由較小的組件組成的。這些組件是模式庫的用武之地。那麼，什麼是模式庫？

模式庫識別和分類設計模式，這些設計模式是針對典型設計問題的重複解決方案。這些可能是：

日曆選擇器
麵包屑小徑
旋轉木馬

模式庫將接口分解為更小的元素，然後可以將其用作可重用的構建塊。這種方法的好處包括：

設計的一致性
通過使用更小、可重用的組件構建複雜的用戶界面元素，您可以確保所有用戶界面元素都是一致的，因為它們都是由相同的簡單組件構建的。
您可以在團隊成員之間共享的視覺詞彙表
通過為您的產品建立模式庫，團隊中的每個人都可以以此為基礎進行構建，而不是構建自己的臨時元素。
隨著設計的發展，效率隨時間推移而變化
即使您的產品隨著時間的推移而增長，它的維護也是有效的，因為它是建立在核心模式庫之上的。

在設計您的用戶界面時，參考其他人的設計模式以了解哪些可行——同樣——哪些不可行是很有幫助的。 UI Patterns 是一個很好的資源，收集了大量的設計模式。

通過使用您的界面清單作為識別常見設計模式的起點，您離建立需要創建的組件以建立設計系統只有一步之遙。這將有助於確保您的 UI 一致且可擴展。

擁抱原子設計

在深入探討原子設計原則之前，重要的是要在應得的地方給予一點信任。 Andy Clarke 一直在寫和談論“設計系統，而不是頁面”已經有一段時間了。

Clarke 的洞察力——我們需要停止孤立地設計頁面，而是專注於創建構建這些頁面的系統——已經為圍繞關注設計模式重要性的寫作提供了很多信息。

我們很幸運，許多設計師接過接力棒，深入探索了這一思路。 Brad Frost 關於原子設計的書和 Alla Kholmatova 關於設計系統的書都充滿了有用的建議，應該是必讀的。我強烈推薦他們兩個。

Frost 強調了採用有條不紊的方法設計界面的重要性，他指出：

“[我]對我們的界面由什麼組成以及我們如何以更有條理的方式構建設計系統感興趣。
在尋找靈感和相似之處時，我不斷地回到化學。 […]所有物質都是由原子組成的。這些原子單元結合在一起形成分子，這些分子又結合成更複雜的有機體，最終創造出我們宇宙中的所有物質。
同樣，接口由較小的組件組成。這意味著我們可以將整個接口分解為基本的構建塊並從那裡開始工作。這是原子設計的基本要點。”

— 原子設計，布拉德·弗羅斯特

Frost 的方法建立了五個不同的層次，包括原子設計：原子、分子、有機體、模板和頁面。通過從頭開始構建，我們創建了設計的基本構建塊，使我們能夠構建任何東西。

Brad Frost 的原子設計方法是構建設計系統的堅實基礎。通過專注於最小的構建塊——然後將它們組合在一起以創建更複雜的設計——您可以構建一個既一致又可擴展的系統。在上面的插圖中，來自 Frost 的書中，這是適用於 Instagram 原生移動應用程序的方法。（圖片由布拉德弗羅斯特提供。）

化學從來都不是我的強項，但本質上是：

原子聚集在一起形成分子；
這些分子結合形成有機體；
然後將這些有機體用作創建（明顯是非化學的）模板和頁面的基礎。

簡而言之，我們創建小的界面構建塊，然後將它們組合在一起以創建逐漸更複雜的界面元素。原子設計的好處是您可以通過在粒度級別組合元素然後從這些元素構建來確保一致性。

開始使用 UI 工具包

作為設計師——大部分時間——在網絡上工作，我們非常幸運地成為一個社區的一員，這個社區慶祝我們工作的共享方法。在過去的幾年中，我們看到了 UI 工具包（系統設計的用戶界面組件集）的爆炸式增長，幫助我們的生活變得更輕鬆。

當 UI Kit 可以為您節省這些時間和精力時，浪費時間重繪常見的 UI 組件是沒有意義的。設計良好的 UI 套件可以構成數字產品的基石，無論是網站還是應用程序，確保其具有一致的外觀和感覺以及視覺識別。

適用於移動設備（左）和 Web（右）的 Adobe XD UI 工具包是在設計項目開始時搶占先機的好方法。通過提供典型的組件（註冊、表單、配置文件），它們可以為您節省大量時間，無需通過重新繪製常用組件來重新發明輪子。

Adobe 與一系列世界知名設計師合作，創造了一些很棒的 Adobe XD UI 工具包，非常值得探索。他們還提供了一些很棒的教程，幫助您開始使用 UI 工具包進行設計，以幫助您快速上手。

除了提供大量免費圖標集（由 Lance Wyman、Buro Destruct 和 Anton & Irene 設計）外，他們還創建了一套全面的免費 UI 套件，其中包含適用於 Web 和移動項目的預構建模板。

UI 工具包非常有用，可以通過避免重繪常用元素來為您節省大量時間。然而，需要注意的是，與任何通用套件一樣，存在陷入模板驅動方法的危險，其中一種設計看起來非常像另一種。 使用您的套件作為起點非常重要，您可以在其上疊加創建元素拼貼時建立的外觀和感覺。

設計交互和動畫

絲網設計和印刷設計之間的關鍵區別之一是，當我們為絲網設計時，我們是在為流體介質進行設計。這是交互設計和圖形設計之間的關鍵區別。

作為交互設計師，我們不是在設計頁面的靜態集合，而是在考慮這些頁面以及這些頁面中的元素如何交互。這是一個關鍵的區別，並且經常被一小部分平面設計師所忽視，他們認為他們的角色只是設計一組頁面，然後由“技術人員”傳遞並“縫合在一起”。

冒著釋放“設計師必須編寫代碼”的風險，這些蠕蟲永遠抬頭，對於在這種媒介中工作的設計師來說，了解這種媒介是如何工作的至關重要。要真正設計出令人難忘的體驗，花一些時間學習動畫原理很重要。值得慶幸的是，像 Adobe XD 之類的工具抽象了過去設計沉浸式交互體驗時必須處理的大量代碼。

在為屏幕（本質上是流體媒體）進行設計時，考慮用戶將如何與您正在設計的內容進行交互、考慮如何處理從屏幕到屏幕的轉換以及在用戶界面組件中提供有價值的反饋是至關重要的。我們需要考慮宏觀交互（在頁面級別）和微觀交互（在對象級別）。

從 A 到 B

在我之前的文章中，我探討瞭如何使用用戶故事開始在高層次上通過您的設計繪製路徑。在這個過程中，我們需要關注用戶如何在這些屏幕之間移動，從 A → B → C 遍歷。

過去，我們可能只是在幾乎沒有動畫或根本沒有動畫的屏幕之間移動，受限於我們當時使用的設備。然而，隨著我們台式機和移動設備的處理能力的提高，我們提供的設計更身臨其境的體驗的機會也越來越多。

當然，我們需要有節制地使用這些新發現的能力，但我們用戶可以使用的硬件現在為我們提供了設計令人愉悅的交互的機會。這就是為什麼我們在過去幾年中看到對動畫的興趣上升的原因。作為設計師，我們對可用的工具做出回應；隨著這些工具的發展，我們的設計也必須如此。

我們可以通過多種不同的方式從一個屏幕過渡到另一個屏幕，包括從下到上淡入或滑動，從左到右淡入或擦除，以及縮小。

在設計屏幕之間的過渡時，我們需要考慮許多因素，包括：

用戶如何觸發轉換以從一個頁面移動到另一個頁面
通過單擊按鈕或在屏幕上滑動。
我們使用什麼樣的過渡
溶解、擦拭、縮放或其他效果。我們選擇的過渡將傳達給用戶，因此謹慎選擇它很重要。
過渡持續多長時間
是快還是慢？

當我們設計從 A → B → C 的旅程時，我們所做的選擇（即觸發器、過渡和時機）將影響敘事，因此對它們進行一些思考很重要。與任何旅程一樣，如果它是愉快的，它會更順利地通過。

我們正在設計的內容類型也會影響這些決定。 在某些情況下，我們希望用戶通過使用過渡和時間來加快節奏，從而讓用戶在敘述中更慢一點。在其他情況下，我們希望通過加快轉換來避開阻礙。

當 Apple 首次推出 iBooks 時，它在閱讀書籍時的頁面轉換（“頁面捲曲”效果）會減慢閱讀速度。 “捲頁”乍一看令人愉快，但一旦你看到它數百次——當你只想讀一本書時——它變得難以置信地令人沮喪。每一頁翻頁所用的微秒加起來都是令人沮喪的體驗。

在設計屏幕之間的過渡時，重要的是不要忽視底層功能。歸根結底，我們的目標是取悅我們的用戶，而不是讓他們失望。

當然，動畫可以令人愉快，但如果它以犧牲功能為代價就不會。 Sophie Paxton 在一篇名為“你的 UI 不是迪士尼電影”的優秀文章中寫到了這個主題，它強調瞭如果我們不小心的話，無端動畫和過度動畫的用戶界面會如何讓用戶感到沮喪。非常值得一讀。

與對象交互

在定義了頁面級別的宏交互之後，是時候將注意力轉向對象級別的微交互了。

正如我們需要考慮使用戶從一個頁面到另一個頁面的所有因素一樣，注意簡化用戶與頁面中特定對象的交互也很重要。這些可能包括按鈕、表單字段和其他元素，其中一些明智的動畫可以幫助向我們的用戶提供反饋。

提供視覺反饋在用戶界面設計中非常重要：它通過提供他們的行為已被確認的信號來讓用戶的思想休息。當我在“現實世界”中點擊一個電燈開關時，我會通過聽到令人滿意的點擊以及電燈打開或關閉的結果來接收反饋。這個反饋讓我知道發生了什麼。

我們可以通過將這些來自現實世界的經驗應用到屏幕世界來改進我們的用戶界面設計。 一個設計良好的用戶界面應該響應用戶的行為，讓他們知道他們的行為有預期的效果，讓他們放心。這就是動畫可以發揮重要作用的地方。

用戶界面運動 — 如果您正在尋找靈感，UI Movement 是一個很好的網站，它匯集了應用於用戶界面元素的動畫示例。

UI Movement 等網站提供了豐富的靈感，展示了應用於用戶界面的有效動畫示例。重要的是要考慮您如何提供反饋以及在什麼情況下提供反饋，例如：

當您要求輸入密碼時，在用戶輸入信息時指出密碼的強弱是很有幫助的（後來才發現密碼太弱是令人沮喪的）。
當用戶與按鈕交互時，它有助於提供反饋，讓用戶知道他們的操作已被確認。
在與日期選擇器和日曆交互時，提供有用反饋的空間很大。

以上場景只是冰山一角。任何要求您的用戶與頁面上的元素交互的地方都是考慮使用動畫來提供有用反饋的機會。當然，正如我上面提到的，您的用戶界面不是迪士尼電影，所以不要過火！

最後，值得注意的是，動畫並不適合所有人，而且可能——對某些人來說——會引起問題。對於患有前庭疾病的用戶，運動會導致頭暈或噁心，因此在使用動畫時考慮可訪問性很重要。

為用戶提供選擇可能是一個想法，很高興看到像 CodePen World's Fair 這樣的網站提醒用戶注意其動畫的使用，並為他們提供繼續使用或不使用動畫的站點的選擇。很高興看到這種考慮：為可訪問性而喝彩！

結束時

在設計用戶界面時，建立一個系統會有所幫助。這可確保您構建的任何內容都被考慮和一致。從界面清單開始——尤其是當您作為重新設計的一部分重新訪問現有產品時——將幫助您確定界面需要工作的點。隨著時間的推移，不一致會慢慢蔓延是很自然的。這個工具提供了一種精確定位這些的理想方法。

當需要構建您的界面時，請花一些時間來建立一個經過深思熟慮的設計系統。這不僅可以確保您的設計是一致的，而且還有助於讓您的團隊保持在同一頁面上，並在一個中心位置為從事該項目的任何自由職業者提供他們需要的所有指導。

最後，重要的是要考慮交互和動畫的設計。作為為屏幕工作的設計師，重要的是我們要考慮我們的設計如何響應用戶的交互。畢竟，我們是為可延展的媒介而設計的，讓我們利用這種可延展性來為我們服務吧！將以上所有內容結合在一起，您將擁有經得起時間考驗的可靠用戶界面方法的基礎。