UI 設計的一致性:改善用户體驗的 8 個技巧!

語言: CN / TW / HK

TOPIC:

UI · UX

Consistency

UI Design UX Design 

Article:2022/07/26

Hi~,歡迎來到 「交互設計新視覺系」 技法專欄的第七期!

在現代社會的飛速發展和海量信息的包圍下, 人們傾向於選擇簡單,有時甚至沒有考慮這個選擇 。為了減少認知負荷,用户尋求捷徑、模式和模型,使與數字世界和眾多溝通渠道的互動變得 輕鬆和直接 。在用户體驗設計中,支持這一目標的因素之一是 一致性

本文為大家 分享介紹 什麼是 一致性 為什麼 它很重要 存在 哪些類型 的一致性 ,以及 如何 在設計實踐中實現它:

什麼是一致性

網頁設計Mayple

一致性 意味着無論通信點或渠道如何,產品都 以相同或類似的方式 與用户進行通信。在用户體驗方面,這意味着 相似的元素在 外觀和功能 上都是相似的 ,這樣 可以減少認知負荷,使交互更加流暢和直觀

考慮到今天人們承載了太多的信息,他們 傾向於選擇容易理解和互動的產品 。更重要的是, 一致性為產品外觀和工作方式的 和諧 感奠定了可靠的基礎 。和諧總是我們任何體驗中令人嚮往的一部分。一致性 使用户界面 可預測和可學習 ,而 品牌 則因此而獲得可靠而統一的演示和性能

一致性 雅各布·尼爾森 (Jakob Nielsen)在1994年定義的 10個基本可用性啟發式方法 之一,這 是交互設計的核心原則 。此列表中的一致性基於這樣一個原則:即 用户不必懷疑不同的詞語、情況或操作是否意味着相同的事情。

為什麼設計一致性很重要

一致的網頁、移動應用設計  Vertt 汽車共享服務

1.元素的一致性能 減少用户為實現其目標而必須執行的操作數 。以這種方式減少認知負荷,節省了用户的時間和精力。

試想一下,為了在你的網站上找到他感興趣的東西,需要採取很多步驟,這是多麼令人沮喪。

2.遵循這樣的標準,您可以 減少用户與您的產品互動時的誤解 。對於新用户來説,界面也會變得更加容易學習。

人們傾向於按照他們已經使用其他網站的方式行事。因此,當我們否認一致性和標準原則時,可能會給用户帶來困惑,因為他們已經習慣了以某種方式行事。因此,要讓用户無需學習如何使用您的網站。

3.一致性支持網站或應用程序的強大 品牌形象

一致的網頁、移動應用設計  Vertt 汽車共享服務

一致性的類型

從影響因素的角度來看,一致性可以是 視覺功能 性的。

視覺一致性 是基於使 相似的物體或元素看起來相同使元素之間的聯繫清晰建立一個穩固的視覺層次結構 是至關重要的。它涉及圖標、字體、圖像大小、按鈕、標籤和其他重要內容。 例如,當你組織一篇文章時,所有類型的文本元素(標題、副標題、正文、引言等)都應該使用相同的排版呈現系統,以便於瀏覽和結構化。如果你正在創建一個包含多種類型文章的博客或媒體,他們必須堅持相同的視覺表現系統,這樣他們才能被視為一個完整的出版物,而不是一堆雜亂無章的帖子。

功能一致性 意味着 相似對象的行為方式相同 例如,大多數網站在網站標題的左上角使用徽標或出版物名稱,通過單擊它,用户可以返回主頁或刷新主頁。 大多數用户已經習慣了這種模式,並期望它以這種方式運行,即使是在他們第一次訪問的網站上。

異國水果應用程序的屏幕

從連接和規模的角度來看,一致性可以是 內部外部 的。

內部一致性 是關於界面或品牌的不同部分,這些部分的外觀和行為就 像一個清晰的系統 例如,當您將產品不同頁面或屏幕上的所有CTA按鈕 都以相同的方式着色和設計時 ,用户將能夠在用户旅程的任何一步 快速區分它們

外部一致性 是關於界面中看起來和行為 類似於大多數此類產品的典型模式 的部分。 例如,當您即使在銷售無形產品的網站上使用購物車或為文本鏈接加下劃線以提示它們是可點擊的時,也是如此。

一致性設計技巧

01

使用 簡單的語言熟悉的術語短語模式 。不要用複雜的語言嚇唬你的用户。如今,當 效率 如此重要時,任何由語言混亂引起的延遲都至關重要。

02

“標準”地使用 標準界面元素 。UI 元素(如消息窗口、圖標、滾動條)對用户來説應該是 清晰 的。在這種情況下,“創造力”只會令人煩惱。

03

規劃 UI 時使用 標準網站佈局人類的記憶“記住”了主要界面元素的標準和最方便的位置

例如,將我們的徽標放在左上角對用户體驗有好處,將搜索按鈕放在右上角是件好事。正如我們所記得的,“登錄”總是在右上角。因此,不要害怕遵循這些標準來幫助您的用户實現其目標。

04

不要欺騙用户的期望 。您網站的界面應“執行”其功能。如果用户想購買機票,他們希望輕鬆找到預訂按鈕。一致性意味着您的網站具有所有必需的元素,例如YouTube具有視頻播放器。

05

遵循 視覺元素的一致性 。字體,顏色,內容等應該和諧地在一起。HTML5和CSS3技術約定也是保持一致性原則的方法之一。

06

使其與您的品牌相匹配 。您的數字界面必須反映您的品牌。用户應該能夠 立即 在您的網站或應用程序與您的其他通信工具(名片,小冊子,傳單等)之間 建立連接 。最簡單的方法之一就是 遵循您的視覺識別指南 ,並使用相同的徽標,字體和顏色。儘量在品牌的詞彙和語氣上保持一致。

07

找到風格並堅持下去。缺乏一致性會導致缺乏可信度 ,沒有什麼比具有多種樣式的界面更糟糕的了。所指是具有不同翻轉,顏色不匹配,字體過多,照片集不同的號召性用語......請記住,按鈕、菜單、字體、形狀、空間、視覺材料等應在整個網站或應用中 保持一致 。遵循此建議 將使整體UI在視覺上更漂亮,更流暢,也更專業

通常,設計師對這些小UI元素的關注不夠。隨着在線平台免費提供並立即提供數百個圖標,我們已經變得如此懶惰,以至於我們不僅不再費心設計自定義圖標,而且我們甚至不在乎從單個集合中挑選它們。不幸的是,使用一堆不同的圖標系列會導致混亂和不可靠。因此,請確保您花時間創建個性化圖標或從獨特的圖標集中選擇它們。

08

必要時,應遵循一致性原則, 用户界面的基本元素不應引起誤解 但要明智地使用這個原則:如果它有意義並提升用户體驗,不要害怕創新。

感謝閲讀:)

在許多情況下,遵循規則並不是那麼糟糕。一致性和標準原則證明了這一點。它可以讓你節省時間和過度思考,特別是當沒有理由這樣做的時候。您使用的語言、UI 元素、網站功能和佈局首先應該具有功能性。

(部分圖文來自網絡,若有侵權,請聯繫刪除。)

福利時刻

掃碼添加小助手微信

轉發+截圖領取 書籍福利 ~

《人眼的 Web UI 設計:視覺一致性原則》

瞭解如何創建視覺上一致的界面而不顯得無聊

幫助大家做出更好的設計~

加入 UI&UX交流社羣 ~

設計資源/書籍資源/知識互動

還有更多神祕福利!

往期推薦 | READ MOR E

U設計資訊:動態界面的未來?設計與自然環境同步的用户界面美學

眼見不一定為實:UI交互設計師要向字體設計師學習的6個視覺技巧

知識乾貨:每個原型都是一個重要實驗?為你推薦最佳原型設計工具!

文字丨Jelly

編輯丨Jelly

如果覺得我們做的還不錯點個贊和在看吧!

「其他文章」