用戶界面是軟件產品的重要組成部分。它是您的用戶用來訪問應用程序的工具。如果您的 UI 有效且高效，您的用戶不會注意到它，這就是大多數 UI 設計師遵循一些基本原則的原因。

在本文中，我們想分享一些關鍵的 UI 設計原則。這些基于 Jakob Nielsen 的UI 設計的 10 條可用性啟發(fā)法、Ben Shneiderman 的界面設計八項黃金規(guī)則和 Bruce Tognazzini 的交互設計原則，以及我們自己的一些想法。

1.使用美觀和簡約的設計

將 UI 保持在最低限度。不要用不必要的視覺元素弄亂它。消除任何對用戶當前任務無幫助的信息。將您的顯示減少到僅顯示必要的組件，而不會犧牲他們當時確實需要的信息。任何不屬于的東西不僅會妨礙 - 它實際上會讓您的用戶感到困惑。

此外，使用易于閱讀和理解的語言。系統(tǒng)應該說用戶的語言。您不應該僅僅為了使用該產品而強迫用戶學習新的面向系統(tǒng)的術語。

最后，為各種能力水平的人設計用戶界面非常重要，包括視力低下、聽力障礙、色彩挑戰(zhàn)或運動障礙的人。所有群體都可以使用出色的用戶界面。

2. 力求一致性

一致的界面是指在相似的情況下使用相同的設計模式和操作序列。這包括布局、排版、顏色、語言、屏幕流程、命令、菜單項和其他元素。

例如，確認操作的按鈕應該具有類似的樣式，以便用戶知道他們正在承諾某件事。如果您使用復選標記圖標來指示操作已完成，則應對所有已完成的操作使用該圖標。但不要將該圖標用于其他任何用途！

3. 為用戶提供快捷方式

對您的產品感到滿意的頻繁用戶需要工具來更快地使用它。為他們提供縮寫、宏、函數或其他快捷方式，幫助他們個性化體驗并快速完成任務。請注意此菜單如何為您可能經常重復的功能提供快捷方式。

也就是說，保持采取行動的傳統(tǒng)方法很重要。例如，您不應該從屏幕上刪除操作菜單，因為您假設用戶只會使用快捷方式。

4.提供清晰的系統(tǒng)反饋

讓您的用戶了解應用程序的每個階段或屏幕中發(fā)生的情況非常重要，尤其是當他們剛剛采取某種操作時。此類反饋應該是相關的、清晰的且有意義的。

加載欄就是最明顯的例子。如果用戶不明白發(fā)生了什么，一個簡單的百分比指示器通常足以讓用戶感到事情正在進展。

5.讓“撤消”變得容易

您是否曾經因為認為自己做了一些不可挽回的事情而點擊了錯誤的按鈕或犯了一個錯誤并感到有點驚慌？我們都有，這就是為什么為用戶提供逆轉的機會如此重要。另外，只要知道他們不會為自己的錯誤負責，就會讓用戶對你的產品更加滿意。

如何賦予用戶這種權力將取決于您產品的性質。在某些情況下，他們只需要一個簡單的“撤消”按鈕即可。在其他情況下，您可能希望讓他們訪問整個操作日志或版本歷史記錄。

6.提供幫助文檔

如果用戶需要幫助，請確保有地方可以了解有關問題的更多信息并解決他們的問題。您可以將文檔存儲在知識庫站點上或使用工具提示將其包含在應用程序中。確保幫助文檔的內容相關且有用。

請注意 Photoshop 如何使他們的幫助文檔可以直接在應用程序中訪問。用戶可以通過多種方式打開幫助窗口，因此在需要時它始終就在那里。

7.減少短期記憶負荷

我們的注意力持續(xù)時間是有限的。我們的短期記憶一次只能維持大約五個項目，因此我們不應該期望用戶記住太多。因此，讓他們識別信息比回憶信息更有效。

例如，電子商務應用程序可能會提醒用戶他們最近查看或購買的內容，而不是期望他們記住。即使是一個簡單的提示，例如“您確定要刪除 photo.jpg 嗎？” 防止用戶必須記住他們選擇刪除的內容。

此外，您可以通過限制完成任務所需的操作數量來減少他們的認知負荷。長序列既乏味又令人沮喪，因此任何任務都應該在三次或更短的時間內完成。

8. 給予充足的封閉空間

每個動作序列都應該有一個開始和結束（有時還有中間）。這樣做的目的是縮小差距，以免用戶感到困惑。

開始是用戶的操作，例如單擊按鈕。中間是正在發(fā)生操作的信息反饋（例如加載圖標）。結尾將是一條消息或指示操作已完成，或者是一條解釋操作未完成原因的錯誤消息。

哦，說到錯誤......

9. 使錯誤處理變得簡單

理想情況下，您的應用程序不會出現任何錯誤，但這實際上是不可能的。當發(fā)生錯誤時，您的應用程序應該清楚地解釋發(fā)生了什么以及用戶如何解決它。通常這就像添加一條解釋問題的應用內消息一樣簡單，以便用戶可以修復它。

在其他情況下，應用內解決方案可能無法實現。讓您的錯誤文本具有唯一性非常重要，以便用戶可以在您的文檔中查找它。您還可以將其與錯誤代碼配對。

10.將您的系統(tǒng)與現實世界相匹配

讓您的應用程序與現實世界保持一致是關鍵。只要有可能，您就應該將用戶在現實世界中找到的語言和概念與應用程序中的相同語言和概念相匹配。這使您的應用程序直觀并幫助用戶快速理解和操作它。

例如，世界上大多數菜單都使用邏輯流，其中父項代表廣泛的類別，子項代表較小的類別。這種分層設計無處不在——餐館菜單、路標、報紙文章等。如果你偏離了這種風格，你很可能會讓你的用戶感到困惑。

11.為用戶提供控制點

控制點是指人們相信自己可以控制結果的程度。讓您的用戶感覺他們在您的系統(tǒng)中擁有自由和代理權非常重要。這意味著您無法通過中斷、強制或鎖定序列以及其他意外來劫持它們。

旨在讓您的用戶成為每項行動的發(fā)起者。這是否意味著您永遠不應該提示他們？不，但如果你確實打斷了他們，請確保有充分的理由。

12. 確保無障礙

您的 SaaS 產品應該可供每個用戶訪問和理解，無論他們的文化水平和視力如何?？杀氖?，大約20% 的美國人口是文盲，而8% 的美國人有視力障礙。通過使您的 UI 盡可能易于理解和導航，幫助這些群體中的人員訪問您的軟件并體驗價值。

例如，如果您使用顏色來區(qū)分按鈕，視力不佳的人將可以更輕松地瀏覽您的 SaaS 產品。如果用戶是色盲怎么辦？這些用戶就是準確標記按鈕至關重要的原因。知識較少的用戶也將受益于使用顏色和不同的符號來區(qū)分按鈕。例如，使用紅色 X 標記表示“否”或“停止”按鈕，使用綠色復選標記表示“是”或“繼續(xù)”按鈕，將確保更容易理解每個按鈕的功能。

13. 實施功能優(yōu)先級

大多數用戶訪問您的 SaaS 應用程序是為了執(zhí)行一兩個主要功能。隱藏執(zhí)行這些常用功能的按鈕是沒有意義的。相反，應優(yōu)先考慮這些基本功能的按鈕，使它們易于查找和訪問。不常用功能的按鈕可以位于級聯菜單中或列表的較低位置。

或者，通過將基本功能放在前面并使用更大的按鈕和更粗的文本來展示它們，使它們更容易看到。您經?？吹降囊粋€很好的例子是 Gmail 帳戶?！白珜憽焙汀笆占洹边@兩個最常用的功能首先出現，文本區(qū)分明顯。

14.保持清潔

雖然區(qū)分基本功能和非基本功能至關重要，但請避免過度使用不同的顏色和款式。例如，如果您有五個函數，則每個函數的文本不必采用不同的顏色。

不必要的顏色和視覺風格會讓你的用戶界面變得忙碌和分散注意力，增加認知超載的可能性。通過避免不必要的線條、顏色、背景、字體變化和動畫來防止這種結果。相反，目標是簡約的設計，讓事情變得簡單并有目的地使用顏色。

Grammarly 打字助手是一個可以有效實現此目的的 SaaS 平臺。正如您在下面的屏幕截圖中看到的，Grammarly 頁面對大多數文本使用相同的字體類型和顏色，并將關鍵消息加粗。它還通過將其品牌顏色用于 CTA 和其他顏色來有目的地應用顏色，以區(qū)分用戶寫作中發(fā)現的問題。

15.不斷迭代  

我們堅持的UI設計的另一個關鍵規(guī)則是不斷迭代。持續(xù)迭代不需要將設計過程視為一次短暫的一次性飛行。相反，請將其視為不斷進步的重復往返，讓您更接近目標 - 構建完美的 SaaS 產品。

持續(xù)迭代涉及創(chuàng)建產品版本、測試它以及實施用戶和利益相關者的反饋以改進下一個版本。根據用戶反饋改進產品并不需要徹底修改整個軟件。只需一個小小的改變就足以讓您的 SaaS 產品更具吸引力和吸引力。例如，對結帳頁面的文本、流程或設計進行少量更改就可以幫助提高轉化率和銷量。

您還可以通過分析頁面來識別跳出率高或轉化率低的頁面，從而獲得改進每次迭代的見解。然后，您可以運行 A/B 測試來識別這些頁面的版本，以提供更好的結果?？偠灾?，通過不斷的迭代，你的SaaS產品可以不斷變得更加美觀、更加用戶友好、更加盈利。

用戶界面設計的 4 個核心支柱

您已經了解了我們遵循的 UI 設計的關鍵規(guī)則，以提供引人入勝、響應迅速且有吸引力的 SaaS 產品，幫助企業(yè)實現其目標。我們討論的所有規(guī)則都基于 UI 設計的四個基本支柱。無論您在 SaaS 行業(yè)的定位如何，您的應用程序或網頁設計都不應偏離這四個核心原則，它們是：

1. 整個 SaaS 軟件的一致性

您的用戶界面在所有頁面上都應該具有一致的外觀和感覺。例如，您不能擁有藍色背景的主頁和具有不同配色方案的其他頁面。通過確保所有頁面上的顏色、字體、按鈕、交互和色調等元素匹配來保持整個軟件的一致性。

美觀的一致性可以防止分心、混亂和脫節(jié)，從而使您的 SaaS 產品看起來不專業(yè)且組合不佳。一致性還可以讓用戶有一種熟悉感，無論用戶訪問哪個頁面，您的網站都可以預測和熟悉。這會帶來清晰度，進而帶來直觀的導航，確保無縫的用戶體驗。

2. 用戶無憂訪問

您的 SaaS 產品應該盡可能直觀且用戶友好。否則，用戶將獲得令人沮喪的體驗，從而增加跳出率和流失率。用戶友好且直觀的軟件確保用戶可以導航、找到他們想要的內容并在沒有幫助的情況下完成操作。

您可以通過使按鈕可見并提供清晰的信息來確保無憂的用戶體驗。這些信息將指導用戶通過您的軟件完成任務。所有鏈接、圖像、文本和其他內容在頁面上都應該有明確的目的，并且結構合理。此外，消除不必要的步驟并優(yōu)化交互以提高用戶工作效率。

我們?yōu)槟峁┝艘惶?UI 設計最佳實踐，將推動您走向正確的方向。它們適用于大多數接口，但這只是開始。這些設計規(guī)則只能帶你到目前為止。使用它們作為起點，然后運行您自己的實驗來確定最適合您的應用程序和用戶的方法?！?a href="http://www.lnqkjt.com/" target="_self">言鼎科技】