網站UI設計的7條黃金法則

今天的網站和應用程式是動態的和互動式的。作為設計師，我們的工作是使他們與我們的 WebUI設計互動的界面儘可能接近理想。幸運的是，有一些幾乎通用的規則可以提供幫助。

了解您的用戶並了解他們的背景

沒有明確目的的漂亮用戶界面不會很有用的。為執行特定任務或一組任務的特定人員設計是將產品結合在一起的粘合劑。確保在為您的下一個項目設計界面時，您清楚了解您的用戶、他們的目標以及他們可能使用該產品的方式和時間。

您和您的團隊將從用戶訪談、調查和其他UX 研究中收集大量訊息，以了解產品在用戶與產品互動的方式和時間的背景下應該如何運作。再看看所有這些研究，並在開發用戶界面時將其全部考慮在內。

定義實用、易於理解的導航

雖然這看起來很簡單，但確保您的用戶界面設計在整個產品中具有明確定義的導航模式很容易忘記。在設計每個螢幕時，問問自己：用戶能否知道他們在哪裡、他們來自哪裡以及他們可以在每個頁面上轉到哪裡？如果沒有，這可以通過實現像麵包屑導航這樣的設計模式來輕鬆解決用戶可以在其中查看他們到達現在所在位置所採取的步驟和頁面的歷史記錄。此外，必須確保您的頂級導航清楚地指示用戶在任何給定時間所在的部分。這些類型的導航模式充當地圖，以便用戶可以在產品中定位自己。如果沒有清晰的地圖，用戶很容易迷路和沮喪。他們經常錯過重要的頁面和工具，而是花更多的時間來質疑他們最初是如何到達那裡的。

保持一致性

一致性是UI設計的關鍵，因為它可以提高產品的易學性。好的UI設計來自於營造一種熟悉感，並確保螢幕上的所有內容都有意義並且以用戶期望的方式工作。UI設計師通過使用重複的組件使用、有效的訊息架構以及產品品牌的流線型外觀來實現這一點。

顏色和排版

最好的UI設計示例具有對視覺設計基礎的清晰理解，尤其是在顏色和排版方面。確保用戶看到的所有內容都是「品牌」和可訪問的，這將有助於讓用戶專注於手頭的任務，而不是想知道為什麼，例如，他們在整個應用程式的一個頁面上看到紫色的正文文本而沒有其他地方。像這樣缺乏一致性和差異會使用戶感到困惑，這是UI設計師不惜一切代價想要避免的。雖然UI設計師仍然應該在他們的界面設計上發揮創意，但產品的外觀不應該分散用戶完成手頭任務的注意力。事實上，在UI設計做得好的最好的例子中，每個視覺設計決定是為了支持用戶完成任務或目標的能力。有時，特別是在企業UX的情況下，應用程式的外觀和感覺是如此無縫，以至於普通用戶不會注意到它。 

此外，在做出排版決定時應仔細考慮用戶將如何處理訊息。好的UI設計示例將展示如何有效地使用分層排版選擇來區分不同級別的標題與正文和按鈕文本，並確保排版選擇清晰易讀。從本質上講，好的排版決策應該很容易與用戶溝通，他們應該在整個產品中關注哪些訊息。

按鈕和連結

我們遇到的每個網站和應用程式中都使用了按鈕和連結，因此可以肯定地說，用戶對與它們互動時的外觀和功能有期望。僅在單個產品中，就有許多按鈕和連結變體旨在提供不同的功能。確保這些元素之間的一致性是幫助用戶正確預測當他們使用其中一個元素時會發生什麼的關鍵方法。UI設計師應該建立這些區別，並通過他們的設計向用戶傳達每個按鈕和連結的功能（和不做什麼）。請密切注意這些規則，因為它們的定義是為了在整個產品中保持清晰和一致。

互動

就此而言，互動是一致性（或不一致）的另一個重要點。想一想UI設計如何指示與用戶的互動。用戶是否知道當他們與UI元素互動時會發生什麼？例如，如果用戶點擊一張卡片，該互動會將他們帶到另一個螢幕還是展開卡片？懸停狀態在互動設計中也扮演著重要的角色。懸停狀態可以是洩露額外訊息的關鍵部分（例如將滑鼠懸停在圖表上以查看有關數據點的額外訊息）或純粹有用（例如連結更改顏色或在懸停時添加下劃線以幫助用戶知道他們可以點擊它）。在指示每個互動的方式上保持一致對於出色的UI設計至關重要。

圖像學

小細節對良好的UI設計有很大的影響。設計師使用圖標作為一種與用戶直觀地交流產品的某些功能、特性或內容的方式。一些圖標變得如此普遍，以至於它們幾乎立即被用戶識別（例如，設計成房子的圖標意味著「家」，放大鏡圖標意味著「搜尋」）。除了確保圖標可識別之外，UI設計師還必須確保一旦建立了圖標樣式和視覺語言，他們就會堅持下去。

創建自己的圖標時，請牢記一致性，並確保圖標庫中出現諸如線條粗細、填充與未填充形狀以及其他設計選擇之類的內容。同樣，視覺設計選擇不應該分散用戶的注意力。作為UI設計師，您必須確保整個產品中使用的圖標都是同一個圖標系列的一部分，並且如果在整個產品中使用相同的圖標，它們的功能相同。

語言和術語

為了幫助用戶輕鬆瀏覽我們創建的界面，我們必須確保所有內容都以幫助他們從一件事到另一件事自由自信地移動的方式進行標記。 

一致性是這裡的關鍵。例如，「添加」和「創建」似乎可以互換。但是，如果您的工具始終使用「添加」，則用戶在遇到「創建」時可能無法理解所需的操作。作為UI設計師，您可以帶頭建立要在整個產品中使用的語言和術語。請務必堅持您的決定，並在您和您的團隊選擇標記具有相同功能的事物時保持一致。

增加用戶控制和自由

用戶在瀏覽產品並自由移動時應該感到輕鬆，而不必擔心犯任何重大的意外錯誤。為了防止這種情況發生，UI設計師在他們的設計中實現了諸如撤銷按鈕和確認消息等功能。

谷歌在他們的 Gmail 設計中有很好的UI設計示例來防止這種錯誤。如果用戶在他們的電子郵件中提到他們附加了一個文件，但在沒有附加任何文件的情況下點擊「發送」，螢幕上會出現一條彈出消息，通知用戶他們可能忘記將文件附加到他們的電子郵件中。 

此外，在用戶刪除電子郵件後，谷歌在螢幕底部（行動裝置和桌面設備）集成了一個小彈出消息。雖然它只在螢幕上出現幾秒鐘，但一條消息通知用戶該消息已被刪除，並提供「撤消」刪除選項，讓用戶不僅可以確認任務已完成，還可以輕鬆地如果刪除是無意的，則更改並糾正他們的錯誤。像谷歌這樣的小考慮和及時互動可以讓用戶在使用產品時有一種安全感。

應用「少即是多」的方法

UI設計早期要學習的最重要的一課是不要過度設計或一次性給用戶太多選項或訊息。在設計產品界面時，很容易讓您的創意占據主導地位，但螢幕上過多會導致效率低下，讓用戶不知道該關注什麼或採取什麼行動。

有一個著名的實驗探討了這種「選擇癱瘓」的想法，在這種情況下，人們會在一個場景中看到26種果醬選項，而在另一種場景中，他們只看到6個選項。儘管假設人們在有更多選擇時更有可能購買一罐果醬，但實驗得出的結論是，當有更少選擇時，人們更有可能購買果醬。從本質上講，實驗發現，當我們面臨太多選擇時，我們很難滿足於找到最佳選擇。

這種對簡單性的關注推動了今天Apple 產品的成功設計，同樣的原則對於數字產品的UI設計也是必不可少的。對於設計的每個螢幕，力求簡單，並確保呈現的訊息對用戶有幫助，而不是壓倒性的。

為用戶提供系統狀態更新

諸如加載螢幕和確認消息或錯誤消息之類的事情決定了優秀和出色的UI設計之間的差異。重要的是讓用戶知道產品背後發生了什麼，以減少用戶的痛點和沮喪，這將使他們不想使用該產品。

不要讓用戶蒙在鼓裡！讓他們知道一些事情，例如他們的文件完全上傳之前的估計時間，或者他們的消息是否已成功發送給客戶服務。以這些小方式與用戶互動有助於培養對您產品的忠誠度。

使您的UI設計直觀

如果用戶不需要太多（或者，理想情況下，不需要！）關於如何使用它的培訓，那麼用戶界面就是成功的直觀。這可以通過遵循既定和理解的設計模式來實現，確保您使用的顏色（特別是狀態/指示器顏色）、排版和圖標清晰一致，並且當您遇到錯誤時，系統會告訴您什麼是錯誤的。直觀的產品允許用戶專注於他們試圖解決的問題、他們試圖回答的問題或他們試圖完成的任務，而不是專注於如何使用系統。

顯然，以人為本的設計或以目標為導向的設計方法都以直觀的產品為最終目標。通過為您的特定用戶及其工作流程進行設計，您的設計在一天結束時將是直觀的，但它也需要測試和驗證以發現任何看不見的問題。

如您所見，良好的UI設計不僅僅是讓應用程式或網站看起來漂亮。它考慮到了所有用戶的需求，並創建了一個界面來增強一致性並幫助用戶以最無縫的方式完成他們的任務——這一切都與用戶體驗有關！使用這些技巧作為您下一個項目的指導，您將確保不僅交付功能強大的產品，而且還提供用戶會喜歡的產品。希望我們讓您或您的公司開始為您的產品開發一致的設計組件嗎？聯繫我們以啟動您的項目。