每個網頁設計項目都應遵循的 10 條優秀 UI 設計規則

Geocities 網站使用硬編碼、永不改變的 HTML 的時代已經一去不復返了。 今天的網站和應用程序是動態的和交互式的。 作為設計師，我們的工作是使他們與我們的 Web UI 設計交互的界面盡可能接近理想。 幸運的是，有一些幾乎通用的規則可以提供幫助。 我們匯總了我們認為最好的設計原則，以便您可以增強您未來的所有網頁設計項目。

每個網頁設計項目都應遵循的 10 條優秀 UI 設計規則

訂閱我們的 YouTube 頻道

1. 讓用戶所需的一切都觸手可及

無論是用於網頁設計應用程序的一系列設計工具、視頻遊戲中角色的庫存、電子表格還是其他任何東西，如果用戶找不到他們想要的東西，他們就會從您的軟件中反彈。 標籤使事情變得可訪問。 快捷方式和懸停工具提示也是如此。

例如，我們選擇使用標籤來組織 Divi。 您需要的所有工具都在構建器中，按類別分開。 工具欄同樣可以訪問。 如果您使用 WordPress，管理工具欄可讓您快速訪問帖子編輯器、主題定制器、插件設置等。 這些選項都有明確的標籤，您不必搜索它們。

另一個例子是幫助/支持/聯繫選項。 在設計 UI 時，無論是用於移動應用程序、Web 應用程序、WordPress 網站還是其他任何內容，您的用戶始終需要找到“幫助”按鈕（或“聯繫支持”按鈕）。 他們絕對需要在某個時候與您聯繫。 這就是為什麼您必須始終確保將幫助按鈕放在前面和中間。 看看迪維。 在每個模塊中，只要您需要，我們都為您準備了支持按鈕，觸手可及。

最重要的是，幫助窗口會彈出有關您正在使用的任何功能的視頻教程。 通過包含此模塊內，Divi 變得更易於訪問且不那麼令人沮喪。 此外，作為 UI 的一部分，幫助的位置在整個產品中是一致的。 這讓我們進入下一點……

2. 保持一致

正如我們剛才所說的，在您的 UI 中保持一致的功能放置很重要。 但是您還應該擔心您的 UI 是否在整個產品中都能正常工作並且看起來是一致的。 不要在一頁的頂部和另一頁的底部放置菜單。 不要在每次加載時重新排列菜單項。 確保您的用戶知道您網站上的內容。 如果您在博客文章下方保留了聯繫表格，請不要決定將其關閉。 用戶會注意到並感到困惑。

一致性還包括您的字體和設計應該從頁面到頁面到頁面工作。 不要在頁面之間交換頁眉/正文字體。

有一個有趣的想法叫做最小驚喜原則，它說如果你讓你的用戶對某些東西的工作方式感到驚訝……重新設計它，讓它更直觀。

此外，您應該確保您的 UI 適合您的平台——iOS 應用在某些情況下的工作方式與 Android 不同。 桌面站點與移動站點對菜單、畫廊甚至產品結賬的需求不同。 一致性意味著您不會讓您的用戶感到沮喪，因為他們必須弄清楚在您的網站上做什麼。

3. 清楚

這似乎是上面的重複，但清晰度和一致性是不同的。 清晰意味著您希望您的用戶始終知道該做什麼。 在某些方面，這也滲透到 UX 設計中，因為它減少了用戶的挫敗感，增加了留存率並降低了跳出率。

清晰是極簡主義（在某種程度上也是野獸派）網頁設計如此受歡迎的原因。 人們不會因為沒有（或很少）雜亂而對任何站點或頁面的目的感到困惑。 您希望提供與 Ling's Cars 不同的體驗。

實現清晰的一種方法是在不同的頁面上從一個步驟移動到另一個步驟。 與其讓結賬流程向下滾動頁面（或包含在單個部分或框中），不如讓您的用戶從產品頁面導航到購物車頁面到結賬頁面到選擇您的付款頁面再到下訂單頁面確認頁面。 （亞馬遜就是這樣做的，如下圖所示）。

他們將確切地知道他們在這個過程中所處的位置，從而消除任何歧義。 這對移動用戶尤其重要，因為屏幕空間非常寶貴。

4. 提供反饋

用戶最不想做的就是不了解發生了什麼。 如果他們按下按鈕，請提供該按鈕已按下的指示。 您可以通過多種方式做到這一點。 您可以為按鈕設置動畫，使其看起來沉入頁面。 加載圖標（如 MacOS 彩虹輪）提供反饋，“我們正在滿足您的要求”，而不必說出來。

如果您允許用戶上傳文件（例如使用 Dropbox 或 Google Drive），請指明剩餘時間。 提供一個彈出窗口或模式，告訴他們他們的行動是成功的，可以減少沮喪和困惑。

真的，每當用戶在您的界面中執行任何操作時，只需一個小小的確認就可以區分良好的體驗和乏味的體驗。

5. 使用識別，而不是回憶

與良好的應試技巧相反，您希望您的用戶在看到您的網站時能夠識別出有關您網站的所有內容。 他們不應該考慮它並回憶這些信息。 最重要的是，您正在精簡您的界面，以便每個部分都直觀並從一個點移動到另一個點。 這可以通過使用我們上面提到的可識別圖標來完成。 人們識別某些事物的某些圖標。

也可以通過使用虛擬導覽來引導用戶完成一個過程，即使這不是他們第一次。 一旦第一個模態出現，他們就會認出這個過程，而且他們不必花費精力去回憶究竟如何執行這些動作。

您也可以通過精心佈置的消息來實現這一點，提醒您的用戶您網站上的內容。 我們通過簡單的懸停工具提示在 Divi 中實現了這一點——即使有人不記得圖標的作用，我們也會引導他們了解它的功能。 之後，他們應該認出該圖標。 或者至少是工具提示，如果他們再次懸停。 甚至是懸停獲取信息的過程。

6. 選擇人們首先互動的方式

照片來源 John Picklap，由 MarieClaire.com 提供

你知道最糟糕的是什麼嗎？ 推拉門。 尤其是當你只是推動前一個到達那個時。 那個建築的設計師讓用戶界面不一致，所以你不知道如何做你需要做的事情。 按下看起來像按鈕的東西，但無論如何都在等待響應呢？ 嗯，那是因為那些設計師沒有考慮他們的用戶將如何與他們的產品進行交互。 所以當你設計你的 UI 時，選擇一個動作（也許兩個）並堅持下去。

在移動設備上，這往往是滑動。 看看 Snapchat。 幾乎每一個動作都是通過滑動來執行的，包括訪問您的設置和個人資料。 您可以在 Snapchat 上向下滑動以查看您自己，向左滑動進入對話，向右滑動進入故事，向上滑動進入回憶（或本週他們被稱為的任何內容）。 他們選擇了他們希望用戶與他們的產品交互的方式，並設計了他們的 UI 來適應這種情況。 不是反過來。

在設計 UI 時，請選擇是否要使用菜單和點擊、圖標、滑動和手勢，或者完全使用其他方式。 Alexa 和 Siri 使用語音輸入作為主要的 UI 交互。 他們提供信息和執行任務的方式是圍繞該特定輸入設計的。 作為用戶，您會憑直覺知道該做什麼，因為這些信息是一開始就為您準備的。 設計師告訴你該做什麼，你就照做了。 您的用戶會感謝您為他們做同樣的事情。

7. 遵循設計標準

一句老話，如果它沒有壞，就不要修理它在這裡適用。 如果標準有效，真的沒有必要嘗試振興某些東西。 這從圖標使用到元素的標準放置。 您不想違背用戶期望的事情。 人們知道問號(?)表示幫助。 所以不要使用感嘆號(!) 。 如果您希望用戶找到您的移動菜單，請使用漢堡圖標（三個堆疊的線），而不是網格。

想想搜索欄。 在大多數網站上，它們往往位於相似的位置：側邊欄的頂部或標題菜單的末尾。 如果不存在，則為頁面頂部的中心。 如果您決定在側邊欄底部、頁腳或博客文章文本下方包含唯一的搜索字段，人們將不知道該往哪裡看。 即使您使用標準放大鏡圖標來識別它。

跳出框框思考並尋求新的創新設計並沒有錯，但這並不意味著設計難以使用。

8. 元素層次很重要

不，我們並不是說地、風、水或火中的任何一個是其他人的老闆。 我們的意思是，您頁面上的元素需要針對實用程序和用戶查看頁面的方式具有清晰的層次結構。 基本上，您要確保最重要的功能位於各自頁面的頂部。 此外，這種層次結構可以有機地引導用戶向下瀏覽頁面，引導用戶瀏覽您的服務。

隨著您在整個過程中移動而尺寸減小的大元素表示重要性和順序。 顏色和對比度也是如此。 使用空白也很重要，因為雜亂會阻礙用戶的進步並使人們的注意力從頁面的目的上移開。 簡潔的線條、大量的空間和定義明確的元素可以直觀地向您的用戶指示如何在沒有任何文檔或註釋的情況下在您的 UI 中移動。

一個體面的經驗法則是，您希望讓事物從左到右、從上到下流動。

9. 保持簡單

看看這個聯繫表格：

現在看看這個：

兩者都是提出請求的聯繫表格。 其中一個填寫沒有問題，而另一個則比較頭疼。 除了作為政府表單之外，底部表單的設計不是為用戶設計的，而是為管理員設計的。 那不是你的工作。 你的工作是讓用戶盡可能地無摩擦。 而做到這一點的最好方法之一就是去掉任何不是絕對必要的東西。

10.讓您的用戶保持自由和控制

我們最不想接觸的事情——也是你想對 UI 做的最後一件事——是從用戶那裡獲得控制權。 或者讓他們覺得你的設計受到限制。 你想賦予他們權力，你的 UI 應該允許他們執行他們想要的操作。 該規則有兩部分： context 和 permission 。

首先，用戶需要採取的任何行動都應該靠近他們想要採取的行動。 如果他們需要編輯帖子，編輯按鈕應該靠近保存、發布/提交、預覽按鈕。 事實上，更好的選擇是為用戶可以在任何特定項目（或頁面）上執行的所有操作提供上下文菜單。 如果您在 UI 中保持一致，正如我們在上面討論的那樣，您的用戶將理解這些上下文菜單或工具欄將始終包含任何給定元素的完整操作列表。

此外，您的 UI 應該始終讓用戶覺得他們可以退出或恢復他們採取的任何行動。 當您設計 UI 時，他們將使用它。 因此，他們需要許可（甚至可能是自由）來做他們完成工作所需的事情。 這樣做就像在電子商務結賬的每個頁面上添加一個取消按鈕一樣簡單（因為按下瀏覽器的後退按鈕可能會導致事情變得混亂）。 也許這是一個撤銷功能，所以他們覺得實驗是可以的。 或者大型項目的修訂歷史（例如在 Google Drive 或 WordPress 或 Git 中）。

當您的用戶感到自由和不受約束時，您顯然遵循了一些良好的 UI 設計原則。

用戶界面準備好了嗎？

糟糕的雙關語。 我知道，對不起。 但是有了這些 UI 規則，您絕對可以準備好將您的下一個網頁設計項目趕出公園。 雖然其中一些可能比其他項目更適用於某些項目，但好的 UI 就是好的 UI，好的 UI 會導致好的 UX。 但這是一個完全不同的帖子的主題。

您是否有任何一直遵循的良好 UI 設計規則？

文章特色圖片由 emojoez/shutterstock.com 提供