天天看點

設計原則之一緻性

作者:人人都是産品經理

為什麼别人的設計看起來總是那麼專業,而我們自己的就像是山寨版本?其實是因為别人掌握了很多專業的原則和理論,做出來的東西看起來就會非常專業。

這篇文章,作者分享了設計原則中的一緻性原則,看完之後,希望你也能像大佬一樣專業。

設計原則之一緻性

一、什麼是一緻性呢?

一緻性的字面意思和使用的場景不同代表的含義也會有差別,這裡主要使用在UI/UX設計中。

UI/UX設計中一緻性是指在整個應用程式或網站中使用相同的設計元素和模式。它涉及在所有頁面和螢幕上使用相同的視覺語言、布局和互動,以創造一緻且直覺的使用者體驗。一緻性有助于使用者了解如何浏覽應用程式或網站,消除困惑和沮喪,并使他們更容易學習和記住如何使用産品。

設計并非孤立的實踐。它與其他領域交織在一起,其中之一就是心理學。在設計中發揮根本作用的心理學原理是重複定律。

這一定律的起源可以追溯到 20 世紀早期,當時德國心理學家赫爾曼·艾賓浩斯進行了開創性的研究。

他的工作對了解人類記憶具有革命性意義。

艾賓浩斯最著名的貢獻是“遺忘曲線”,它表明如果不嘗試保留資訊,資訊會随着時間的推移而丢失。然而,他還發現,反複接觸資訊會極大地影響我們記憶資訊的能力。從本質上講,重複可以強化回憶。

設計原則之一緻性

艾賓浩斯的重複實驗主要關注學習和記憶的過程,但其影響遠不止于此。這讓人們認識到,重複的元素更容易被記住,進而引導觀衆的注意力和焦點。很明顯,重複可以用來引導行為和了解。

通過重複顔色、形狀和圖案等特定元素,設計師可以創造一種統一感和節奏感。這種重複還使設計師能夠強調基本元素或資訊。

重複不僅僅是一種設計原則,更是生活的一個基本方面。在自然界中,重複以各種方式展現,從雪花的對稱性到海浪拍打海岸的韻律圖案,從貝殼的螺旋到一年四季的循環。這種自然的重複帶來了節奏、結構和可預測性,創造了一種舒适和熟悉的感覺。

人類是自然的一部分,天生就能夠識别和響應這些模式。我們的大腦是出色的模式識别機器,我們傾向于認為重複的模式令人感到舒适和熟悉。這種認知特征解釋了為什麼設計中的重複模式(無論是在數字界面、實體産品、建築還是營銷中)會引起我們的共鳴。

設計原則之一緻性

二、為什麼一緻性很重要?

在 iOS 的設計指南中,一緻性被視為讓設計融入 iOS 生态的關鍵,它幫助使用者在不同應用間建立起一種熟悉感。遵循規範的一緻性可以「help your design feel at home in iOS」,保持一緻性是為使用者帶來産品愉悅感的重要方式。

在經典互動設計原則中,「一緻性」一直是重要的設計準則。在幾乎可以稱為「設計師必讀」的雅各布·尼爾森的十條可用性原則中,一緻性(Consistency and standards)位列第四,原則建議設計者在界面和互動上遵循既定的規則,無論是在應用内部還是跨平台之間。

在具體的執行中,内部一緻性通常指應用内應當使用統一的視覺風格和互動語言,相同的功能和操作應該在體驗上保持一緻。而外部一緻性則更強調使用者應該遵循平台和系統的設計規範,保持使用者在同一平台不同應用間體驗的相似性。

一緻性在UI/UX(使用者界面/使用者體驗)中非常重要,因為它對于提供良好的使用者體驗和使用者界面的可用性至關重要。下面詳細說明一緻性的幾個重要原因:

設計原則之一緻性

1、使用者學習曲線:

一緻的UI/UX設計可以降低使用者的學習曲線。當使用者在應用程式或網站中遇到一緻的元素、布局和互動方式時,他們可以快速了解并準确預測如何與界面進行互動。這減少了使用者的混淆和困惑,提高了他們的效率和滿意度。

2、提升可用性:

一緻性使使用者界面更加易于使用。當使用者在不同的頁面或功能之間找到相似的設計元素和互動模式時,他們可以輕松地将已有的知識和經驗應用于新的情境中。這種一緻性幫助使用者快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。

3、品牌認可度:

一緻的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的管道和平台上保持一緻的設計元素、辨別和視覺風格,品牌可以建立起獨特而可識别的形象。使用者在不同的觸點上都能感受到品牌的一緻性,進而增加品牌的信任和忠誠度。

4、使用者滿意度:

一緻性直接影響使用者的滿意度。當使用者在使用應用程式或網站時感受到一緻的設計和互動方式時,他們會感到更加舒适和自信。一緻性傳遞了專業和品質的信号,讓使用者感到被關注和重視。這種積極的使用者體驗有助于提升使用者滿意度,并促使他們持續使用和推薦你的産品或服務。

三、生活中一緻性的案例

設計原則之一緻性

生活中的案例保持一緻性的有很多,

a、例如紅綠燈,在學習駕照或老師教學時會統一講解紅燈停,綠燈行。

b、向左向右箭頭符号的使用,在日常生活中都會保持一緻。

c、我們乘坐地鐵時,地鐵的線路圖也會保持一緻性,每個站的點大小,文字,到站和未到站以及行駛過的站點都有清晰統一的設計和互動操作。

四、UI設計一緻性的展現

設計原則之一緻性

1、顔色

顔色是一種實體現象和感官體驗,是光波在人眼視網膜上的反射或吸收所形成的視覺效果。

設計中的顔色選擇代表了一個項目的品牌,例如常見的餓了麼藍,美團的黃,京東的紅等等,顔色的一緻性有助于營造良好的視覺體驗,強化品牌形象,提升可用性和無障礙性,最終改善使用者的整體互動感受。這對于産品的成功至關重要。在設計時顔色(品牌色)會延續到按鈕,圖示,字型、标簽,背景,banner等子產品使用。

設計原則之一緻性

2、字型

字型是一種特定的文字樣式,它描述了文字的形狀、大小、粗細、間距等視覺特征。

字型是設計中非常重要的元素之一,不同類型的字型,字型的粗細,有襯線字型和有襯線字型,字型的字重等,這些不一緻會造成頁面混亂,字型的選擇和使用會對使用者的視覺體驗、資訊感覺、品牌聯系和情感體驗産生重要影響。

開發實作上如果字型使用較多,會影響加載速度,沒有統一的字型制定規則後期更新疊代也會比較繁瑣,造成資源浪費。

設計原則之一緻性

3、圖示

圖示是一種簡化的、具有視覺表現力的符号圖形,在使用者界面設計、資訊傳達等領域廣泛應用。

在衆多APP中,常使用APP的你肯定可以感受到,圖示除了準确的表達某個含義,還需要在設計時保持一緻性,圖示的大小,設計的風格例如線型圖示、填充圖示、簡約圖示、立體圖示、卡通圖示等,如果這些圖示風格進行混合使用就會造成混亂,影響使用者體驗,看起來很不專業也會影響使用者使用時對于安全性的擔憂。

設計原則之一緻性

4、按鈕樣式

按鈕是一種常見的互動界面元素,用于觸發某種操作或功能。

設計中的按鈕有很多樣式,因為項目類型的不同按鈕樣式也不同,按鈕的樣式有圓形按鈕,矩形按鈕,圓角矩形按鈕,菱形按鈕等,同一個項目中建議使用統一的按鈕樣式,除了可以展現專業性,還可以讓使用者增加信任度,按鈕樣式使用很多,使用者除了使用體驗不友好,還會覺得是不是跳出了這個産品去到了另一個地方。

設計原則之一緻性

5、排版

排版是指在印刷或數字媒體中,對文本、圖像等内容進行有規則的布局和格式化的過程。

設計中排版的一緻性,使使用者能夠快速适應和了解界面的結構,降低學習成本,使用者對于熟悉的排版模式産生更強烈的歸屬感和安全感,使内容更易讀,使用者可以依照熟悉的視覺動線快速找到所需資訊,提高資訊擷取效率。

五、互動設計一緻性的展現

設計原則之一緻性

1、操作一緻

根據文字意思就是使用者才操作時候的流程保持一緻,操作保持一緻,例如大家常見的下單購買商品流程,

使用者在購買商品時:點選商品——商品詳情——付款購買,其他商品也應該是這樣流程,

如果每個商品流程不同就會很亂,例如:

點選A商品————商品詳情——付款購買;

點選B商品——付款購買——檢視商品詳情;

點選C商品——同類商品清單——商品詳情——付款購買,

這樣就會很亂,使用者不知道點選下一個商品會是什麼樣子。

例如:

設計原則之一緻性

1、APP中的視訊浏覽是上下滑動,進入新的子產品後視訊浏覽變成了左右滑動。

2、需要确認某些操作時,确認按鈕一會在右側,一會确認又在左側。

使用者在操作時會除了體驗很亂,也很難培養使用者習慣。

設計原則之一緻性

2、文案符号一緻

文案和标點符号的一緻比較好了解,例如常見的輸入框,“請您輸入帳号”,“請輸入你的密碼”,同一頁面場景下文案和稱呼不統一,會造成使用者操作遲疑,是不是這個不重要才用了“你”,重要的才用“您”,為了避免使用者進行不必要的思考文案保持一緻,符号亦是如此。

設計原則之一緻性

3、回報一緻

當我們看到下一步按鈕時,有些地方互動是進入了新的頁面,有的是分步式使用。建議使用一種保持統一,避免使用者産生誤導。

操作回報後的彈窗,相同功能回報的彈窗樣式不一緻:一會是圖文彈窗,一會純文字提示,使用者也會很亂,包括互動時出現的樣式也需要保持一緻,劇中或從下向上彈出。

六、總結

一緻性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的使用者體驗。通過保持設計元素、布局和互動方式的一緻性,可以降低使用者的認知負荷,提高使用者的學習效率,增強品牌形象,提升使用者滿意度,并最終實作更好的業務成果,詳細分為以下七點:

設計原則之一緻性

1、提高使用者學習速度

一緻性允許使用者借鑒他們在應用程式或網站的一個部分學到的知識,并将其應用于其他部分。這減少了學習新操作所需的時間和努力,因為使用者可以預測未知界面的行為。

2、增強使用者效率

當使用者熟悉一個系統的操作模式後,他們可以更快地完成任務,因為不需要在每個新界面或功能上重新學習如何操作。這種熟悉感減少了思考和決策時間,直接提高了操作效率。

3、降低使用者錯誤率

一緻的界面和互動邏輯可以減少使用者犯錯的可能性。使用者更容易記住和了解一緻的操作模式,進而減少誤操作和混淆。

4、增加使用者滿意度和信任

使用者傾向于對看起來和行為一緻的系統感到更舒适,更有信心。這種信任感是使用者繼續使用産品的重要因素,也是提高使用者滿意度的關鍵。

5、促進品牌一緻性

在不同的産品、服務或平台中保持視覺和功能一緻性有助于加強品牌識别。使用者通過一緻的設計元素(如顔色、字型、布局)來識别和聯想品牌,這增強了品牌的整體形象和市場競争力。

6、減少開發和維護成本

一緻的設計和代碼庫可以減少開發時間,簡化測試過程,降低長期的維護成本。當所有部分遵循同樣的規則時,對系統進行修改或添加新功能變得更加簡單和快捷。

7、改善可通路性

一緻性也有助于改善産品的可通路性。一個一緻的界面讓那些有視覺障礙或認知障礙的使用者更容易了解和使用,因為他們可以依靠重複和預測性的模式來導航。

參考文獻:

https://blog.prototypr.io/the-3cs-of-design-consistency-clarity-content-e58d58825626

https://bootcamp.uxdesign.cc/crafting-consistency-the-role-of-design-systems-in-ui-ux-eddb7e31570f

https://medium.com/as-a-product-designer/how-to-write-ux-guideline-%E5%BB%BA%E7%AB%8B%E7%94%A2%E5%93%81%E7%9A%84%E4%B8%80%E8%87%B4%E6%80%A7-47e0118baf4fhttps://medium.com/@pennylanedesign/design-documentation-a-key-pillar-for-consistent-and-collaborative-ui-development-68fce178b403

https://medium.com/super-jump/mass-effect-how-to-indoctrinate-users-with-ux-consistency-1aaff84afe68

https://medium.com/kubo/the-law-of-similarity-creating-visual-consistency-77d59957f14chttps://medium.com/weavedesign/the-law-of-repetition-designing-for-consistency-63ea3ff7920e

專欄作家

南設,公衆号:南設(ID:NANSHE18),人人都是産品經理專欄作家。專注設計,邏輯性強,注重體驗。分享體驗設計、人工智能開發等。

本文原創釋出于人人都是産品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協定

該文觀點僅代表作者本人,人人都是産品經理平台僅提供資訊存儲空間服務。

繼續閱讀