詳解設計一致性原則,讓產品帶有生命力

編輯導語:當相似的元素有一致性的外表和相似的功能時,它的可用性和易學性會增強;當一致性運用到你的設計中時,人們將會將知識運用到新的環境並且能夠快速輕易地學習新知識;本文作者分享了關於設計一致性原則的詳解,我們一起來了解一下。

詳解設計一致性原則,讓產品帶有生命力

一、設計一致性概述

一致性是產品設計最為基礎且重要的原則之一,一般主要指品的設計理念、品牌形象、邏輯結構、操作互動以及視覺形象等設計“基因”能夠在設計中較好的保持一致和統一。

如下圖所示為網易雲音樂的排行榜和歌單頁面,雖然是2個不同的功能頁面,但頁面在佈局結構(如標題,背景插圖,歌曲列表)和互動操作(播放歌曲,搜尋,分享)等方面都是一致統一的。

詳解設計一致性原則,讓產品帶有生命力

設計保持一致性的好處是顯而易見的,對產品,可以使產品、品牌形象的統一規範性,降低產品迭代最佳化的成本;對於使用者,能夠在產品不同模組中有一致性的體驗,同時降低使用者對功能的理解和使用成本。

二、設計一致性的作用

設計的一致性無論對用產品還是對使用者都有著巨大的作用和意義,其主要體現在以下幾個方面。

1. 為產品最佳化迭代提供指導和評估準則

在需求討論階段,一致性原則可以保證產品需求不會偏離產品既定的目標和理念;在設計過程中,一致性原則可以讓設計師確保設計方案不偏離需求目標,以及在視覺,互動等細節方面保持一致統一。

在設計方案評審過程中,一致性原則可以作為評估準則來評估具體設計方案。

2. 保持產品和品牌形象的一致

在產品不同的功能模組中或者不同發展時期中,一致性原則可以保證產品在設計理念,品牌形象,功能邏輯結構,操作互動,視覺形象等方面保持一致,從而確保使用者對產品形成的形象認知是一致和統一的。

如下圖所示為網易雲音樂“我的”頁面和播客分類頁面,不僅在圖示設計、Tab元件等視覺形象方面都保持了一致;而且在元素結構佈局以及操作互動上都保持一致,這樣確保了使用者在使用產品後形成的產品和品牌形象認知是一致的。

詳解設計一致性原則,讓產品帶有生命力

3. 保證使用者認知和使用體驗的一致,降低使用者使用產品的成本

產品迭代最佳化帶來的差異總會對使用者的使用造成一定的“阻礙”,而在設計中遵循一致性原則,就可以較大程度的降低這種“阻礙”,以“潤物細無聲”的方式去改變使用者認知,保證使用者認知和使用體驗的一致,從而降低使用者使用產品的成本。

例如iOS系統中,列表左滑刪除操作可以認為是一種較為普遍的認知,因此在合適的場景中使用列表左滑刪除邏輯,使用者就可以很好理解,甚至不需要提示引導就可以完成刪除操作。

4. 提升產品設計效率,降低產品迭代最佳化的成本

產品是一個複雜功能的集合體,其中總有或多或少的功能模組、互動邏輯是比較類似或者相同的,如按鈕,頁面資源載入邏輯等;基於一致性原則,這些功能邏輯應該使用統一規範的設計方案,這樣不僅能夠保證使用者在不同功能模組中體驗趨於一致。

而且由於功能邏輯的複用會降低產品,設計,研發和測試等流程的週期和投入成本,從提升產品迭代最佳化的效率。

三、如何做到設計的一致性

一致性原則的內涵是非常廣的,不是使用一樣的顏色或者一樣的形式就能代表設計的一致性,而是需要從多個方面和角度進行思考和衡量,在設計中,可以從以下方面來進行思考。

1. 設計理念的一致

成熟產品在一定的發展歷程內,必須保證產品設計理念是一致的,即針對不同的需求,要以統一的理念去指導和評估設計,從而形成統一規範的產品形象,使用者認知和使用體驗。

假設產品理念包含“年輕人”的關鍵詞,那麼所有的設計方案都應該能夠表現出“年輕人”的特點,只是具體的表現形式不一樣而已。

值得注意的是,此外設計理念還應該包括設計目標、設計策略、設計原則以及設計語言風格等設計基本“基因”因素。

2. 使用者認知的一致

使用者對任何事物的看法和判斷都是建立在自己以往經驗的基礎上,即看待新事物都會用以往的記憶和經驗來判斷和理解,因此必須保證設計方案是符合使用者認知的,即符合使用者的過往經驗,否則使用者就會產生認知歧義;例如常見的垃圾桶圖示就是代表刪除的含義,設計中就不能用垃圾桶圖示來表達其他含義。

一般來說,使用者對產品的認知可以簡單歸納為兩大類,一是普遍使用者認知,一是產品使用者認知。

普遍使用者認知

普遍使用者認知指的是在整個社會群體中大家對於某事物有比較統一的認識。一般來說,能被絕大部分社會群體認可的觀點,日常生活或和行業領域中較為普遍且一致的行為、經驗以及科學規律等都可以成為普遍使用者認知;例如上文所講述的垃圾桶圖示代表刪除含義和物理移動規律就屬於普遍使用者認知。

產品使用者認知

產品使用者認知指的是使用者在使用產品過程中形成的認知,這些認知侷限於產品內和使用使用者群體,超出這個範圍其他的使用者可能就難以理解。

產品使用者認知一般都是一些複用的功能邏輯或者設計,例如JD中使用了動態的JD狗作為載入等待狀態的提示,那麼在使用者在JD中看見動態的JD狗,那麼就能理解頁面當前處於載入或者等待狀態,需要等待一會。

如果產品做得足夠好,使用者群體足夠大,那麼產品使用者認知也可以演變為普遍使用者認知,例如微信中長按按鈕進行語音的操作方式,現在基本上已經成為語音互動的通用互動方式之一(之前很多產品都是單擊進行語音互動)。

3. 功能結構的一致

功能結構是產品的骨架,決定了使用者在產品中的主要體驗路徑,功能結構的一致性可以幫助使用者快速理解整個產品的功能和保證不同模組中使用者體驗的一致。

常見的功能結構一致性包括兩方面,一是相似的功能使用相同的結構,例如在設定模組,同一個層級的不同的設定模組使用的列表結構應該是一致的,都使用雙行列表或者都使用單行列表;二是不同功能模組中相同的功能應該使用一樣的功能結構,產品中所有的頁面標題欄的邏輯和結構都應該是一致的。

4. 互動操作的一致

互動操作的一致能夠降低產品邏輯結構的複雜程度,能統一使用者的認知和使用體驗以及降低使用者的使用成本。在實際設計中關於互動操作的一致性可以從以下幾個方面進行考慮。

互動邏輯的一致

在產品內有很多互動操作的邏輯本質是相同的,不能為這些相同的互動操作設計多種邏輯或方案,因為這樣不僅會造成使用者體驗的不一致,還會造成產品架構的混亂。

如下圖所示為常見的2種溢位選單按鈕的操作列表,左圖中點選蒙版區域會關閉選單列表,而右圖是利用取消按鈕關閉選單列表;這2種設計方案的設計都是合理的,但在產品中不應該同時混用這兩種設計方案,根據產品自身需要選擇其中一種方案就可以了。

詳解設計一致性原則,讓產品帶有生命力

操作方式的一致

常見的互動操作方式有點選,長按,滑動,拖動等,每一種操作方式都有著其獨有的特點和使用場景,在設計中需要保證這些互動操作方式的使用是一致的。

例如產品中的本地資料在大部分情況下都支援長按進入編輯管理狀態後者出現操作選單列表,再比如常見Tabs元件中都支援左右滑動切換不同的Tab選項卡,在產品設計中就需要保持這些互動操作方式的一致,不能為同一種互動操作設計多的操作方式(不包括主操作方式和快捷操作方式)。

狀態邏輯的一致

產品頁面中的元素狀態應該能夠很好地表現出互動操作的邏輯,相同狀態的元素其代表的互動邏輯也應該是相同的,例如產品中按鈕的可點選狀態、按下狀態、拖拽狀態、禁用狀態、選中狀態以及載入等待狀態、操作反饋等在產品中都需要保持一致。

如下圖所示為為不同型別按鈕的禁用狀態示意圖,其狀態邏輯的設計是一致的。

詳解設計一致性原則,讓產品帶有生命力

5. 視覺形象的一致

視覺形象對產品一致性的影響是最為直觀的,因為使用者形成產品認知和體驗感受的基礎就是視覺形象。設計中視覺形象的一致性可以從以下幾個方面進行考慮。

設計風格/語言

設計風格/語言指的是整個產品的視覺形象基調,是視覺設計的基本理念和重要的指導評估原則之一。

本質上講設計風格/語言就是產品設計理念的一部分,只不過設計風格/語言更多的體現在視覺設計方面。例如微信和QQ,兩者的視覺設計風格是完全不同的,再細節一點,圖示的設計是使用線形風格還是面形風格。

一致的設計風格可以保證產品整體形象的一致,能在產品設計過程中提供明確的設計指導、設計要求、設計準則以及方案評估準則。

品牌形象(VI)

嚴格意義上講,品牌VI是自成體系的,不會與普通的產品視覺設計歸為一類。但在具體的設計中,我們還是會使用品牌VI中的一些元素,包括吉祥物,產品logo,品牌色等;如JD的吉祥物狗joy和天貓的超級符號等在其應用中都有非常多的使用場景和使用形式。

在產品設計中與品牌形象保持一致性也是非常重要的,可以加強使用者對品牌的認知以及利用品牌來為產品功能背書。

色彩

任何視覺形象都是由色彩組成的,因此在設計中我們需要形成一個完整且一致的的產品色彩體系,包括品牌色(主色調),主要色系以及衍生的輔助色色彩。

保證色彩的一致性,既可以保證使用者對產品認知的一致性以及形成獨有的品牌認知,還有利於頁面資訊層次和優先順序的表達。

如下圖所示為網易雲音樂和QQ音樂中我的頁面的設計方案,其中圖示和Tab元件等設計都統一使用了其品牌色(紅色和綠色)。

詳解設計一致性原則,讓產品帶有生命力

文字

與色彩類似,文字也是視覺形象的重要組成部分。在絕大數的產品中,文字是使用者獲取產品資訊的基本途徑,這也意味著文字對產品的使用體驗有非常大影響。

一般來說,文字的一致性就是指文字樣式的一致性,常見的文字樣式包括字型,字號,字重,顏色,字間距,行間距,段落,文字區域寬度高度,對齊方式和透明度等;透過這些具體的文字樣式可以為產品設定統一規範的文字樣式,如標題,副標題,正文,說明文字,出錯/警示文字等。

如下圖所示為網易雲音樂中不同模組中2個卡片,其中卡片標題,正文以及其他文字標籤的文字樣式都是一致的。

詳解設計一致性原則,讓產品帶有生命力

佈局

頁面的佈局是視覺設計方案的基礎框架,是一個非常複雜的問題,涉及到互動和邏輯,以及眾多的視覺因素。

常見的影響頁面佈局的視覺因素有元素間距,排序,對齊方式,字型以及大小,位置約束,元素縮放,輸出單位,裝置適配等,在這裡也無法一一說明解釋。在設計過程中,需要對這些因素進行統一合理的的規劃和設計。

標準控制元件/元件

視覺形象的一致性在產品中最為直接的體現就是產品中標準控制元件和元件的使用,如按鈕,彈窗,Tabs等。

控制元件和元件的一致性,不僅包括視覺樣式,還包括其使用規範以及互動邏輯等;如下圖所示的為淘寶的首頁和逛逛頁面,其頁面中的標題欄就屬於元件,2個頁面的標題欄在佈局結構,視覺樣式和互動操作等方面都是是一致的,僅僅在細節視覺樣式上有所差異。

詳解設計一致性原則,讓產品帶有生命力

四、設計一致性與可變性

任何事物都需要把握一個度,設計的一致性亦是如此。如果一味的追求設計的一致,就會讓設計陷入固定的模式,設計出來的方案就會缺少“生機”和“靈動”;隨著時間的增長,會導致產品缺少吸引力和競爭力下降。所以在遵循設計一致性的基礎上,探索設計的可變性也是不可缺少的。

同設計的一致性原則類似,設計的可變性也是有一定的要求和限制的,不能一味的追求設計的多變,否則只會起到負面作用,如讓設計變得毫無特色,讓產品變得雜亂無章,讓產品體驗變差。

實際的設計過程中,可以從以下幾個方面考慮設計的可變性。

滿足產品和使用者需求

任何設計都需要滿足產品和使用者的需求,設計的一致性和多變性也需如此,如果不能滿足產品和使用者需求,那麼任何形式的設計都是沒有意義的。

設計的拓展

成熟的產品中(不包括運營活動),任何設計都需考慮設計拓展性,需要考慮這種“變化”在產品內的拓展,即能否將新方案應用到其他地方或後續的設計方案中;如果設計方案能拓展,那麼這種“可變性”最終能夠演變成設計的“一致性”。

設計“基因”延續

對於產品而言,設計的風格和設計理念等設計“基因”是不會經常或者在較短時間內改變的,在任何背景下的設計方案都需要遵循和體現這些設計“基因”,因此在探索設計多變性的過程中,同樣需要保證這些設計“基因”的延續和表達。

這樣做的好處不僅能在設計方案中體現出靈活多變,還能在一定程度上保持設計的一致性,這樣不會因為多變的設計而導致迭代前後使用體驗和使用者認知的差異較大。

緊跟社會/行業發展的腳步

社會和行業領域都在不斷進步發展,設計也是如此,不可能能一直停留在“原地”;因此需要不斷的關注社會和行業的進步發展,不斷思考這些“改變”對計的影響,並適時的調整設計,讓設計能夠跟隨社會和行業的發展。

例如行業內的色彩,佈局,圖示設計等流行趨勢是在不斷變化的,合理適時的將這些設計趨勢運用到新的設計方案中去,對產品和使用者都是有好處的。

設計一致性原則的好處和重要性是顯而易見的,但在實際設計中,決不能為了一致性而一致性,不能讓一致性原則成為設計的桎梏。

一致性與可變性都是為了更好的服務使用者,為產品和使用者帶來更多的價值;需要在設計過程中把握好一致性和可變性之間平衡性,這樣設計出來的方案才更有生命力。

本文由 @小乞丐 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

頂部