編輯導(dǎo)讀：設(shè)計在滿足基本的產(chǎn)品需求的同時，也要注意各業(yè)務(wù)線平臺的設(shè)計一致性，給用戶傳達(dá)好正確的品牌認(rèn)知。本文從使用場景出發(fā)，結(jié)合具體案例，梳理總結(jié)了推動產(chǎn)品設(shè)計一致性的幾點(diǎn)實(shí)用方法，與大家分享。

“優(yōu)秀的設(shè)計讓人無法感覺到它的存在”，設(shè)計中的一致性會在無形之中使你的設(shè)計效果更加優(yōu)秀，也更易于用戶使用。對于B端視覺設(shè)計來說，我們的目標(biāo)是讓用戶發(fā)出“哇！”的感嘆，不是因?yàn)榻k麗的界面，而是因?yàn)楫a(chǎn)品能夠幫助他高效地完成工作。

01?為什么做一致性

B端設(shè)計并無特殊之處，優(yōu)秀設(shè)計的一切準(zhǔn)則，在這里都適用。不過，設(shè)計B端產(chǎn)品和C端產(chǎn)品，確實(shí)存在一些差別。對B端設(shè)計團(tuán)隊(duì)來說，最大的挑戰(zhàn)如何通過提高產(chǎn)品的用戶體驗(yàn)一致性來幫助B端用戶高效完成任務(wù)。

B端產(chǎn)品通常有更長的產(chǎn)品周期且多平臺合作，很容易導(dǎo)致產(chǎn)品設(shè)計不一致。這些問題隨著團(tuán)隊(duì)的擴(kuò)大或者產(chǎn)品的功能增加而變得更加嚴(yán)重。這時怎么保證設(shè)計的一致性就是我們必須要考慮的問題。

02?一致性的好處

其實(shí)無論C端還是B端，都要考慮模塊的一致性和可復(fù)用性，B端尤甚。一方面是為了保持設(shè)計的統(tǒng)一，另一方面也是降低開發(fā)成本和維護(hù)成本。

產(chǎn)品保持“一致性”能夠有效降低用戶學(xué)習(xí)成本，而視覺一致性又可以提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶的認(rèn)知成本。

好比你進(jìn)去LouisVuitton的店鋪時，你不可能會看到有Chanel或者其他品牌風(fēng)格的包包羅列在里面吧，LouisVuitton同一個系列的包，從手提包到肩包到行李箱，雖然產(chǎn)品上略有不同，但它們的細(xì)節(jié)和氣質(zhì)都是一致的，標(biāo)識圖形、埃爾澤菲爾字體以及顏色已經(jīng)形成了其品牌的識別符號。甚至其衍生產(chǎn)品也都保留著LV獨(dú)有的氣質(zhì)。

03?怎么保持一致性

尼爾森十大交互設(shè)計原則中對于“一致性原則”這樣定義：同一用語、功能、操作保持一致。同樣的語言，同樣的情景，操作應(yīng)該出現(xiàn)同樣的結(jié)果。

在設(shè)計B端產(chǎn)品時，大量會涉及到PC端，移動端的場景，對于高度依賴PC端操作的情景與靈活的移動端場景，在關(guān)鍵的節(jié)點(diǎn)采用一致性的設(shè)計語言尤為重要

1. 結(jié)構(gòu)一致性

保持一種類似的結(jié)構(gòu)，新的結(jié)構(gòu)變化會讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān)；我們在列表的布局設(shè)計中，每個模塊都是統(tǒng)一的結(jié)構(gòu)樣式，讓用戶快速定位到自己想要關(guān)注的信息，這就是結(jié)構(gòu)一致性的體現(xiàn)。

2. 色彩一致性

保持產(chǎn)品所使用的主要色調(diào)是統(tǒng)一的，而不是換一個頁面顏色就不同。如下圖，我們的產(chǎn)品中（網(wǎng)頁版和APP）圖標(biāo)顏色與界面的主色均為紅色，也包括其中一些標(biāo)簽和按鈕的文字顏色都是紅色，整個界面都通過黑、白、紅色來呈現(xiàn)，界面保持了很好的一致性，這就是色彩一致性原則。

3. 文字一致性

我們的產(chǎn)品中（網(wǎng)頁版和APP）呈現(xiàn)給用戶的文字大小、樣式、顏色、布局等都是一致的；兩個界面不盡相同，但是，字體大小、顏色、布局的樣式都一樣，這樣讓整個產(chǎn)品視覺上看起來很和諧，這就是字體一致性。

當(dāng)然，設(shè)計的一致性，是工具，而不是目的。我們不該為了一致而一致，那樣是在本末倒置。規(guī)范本身也應(yīng)該變得靈活一些，而不該成為我們“墨守”的成規(guī)。

因B端產(chǎn)品邏輯功能比較復(fù)雜，平臺設(shè)備比較多，即便我們建立了整套設(shè)計規(guī)范，也未必能夠滿足后續(xù)不同的平臺和業(yè)務(wù)需求，難免出現(xiàn)設(shè)計上不一致的地方。

因此，在產(chǎn)品”一致性”的設(shè)計上，我們根據(jù)平臺的特性（分辨率、系統(tǒng)、工作環(huán)境等），保留一定的空間。比如在顏色上，考慮到網(wǎng)頁版設(shè)備清晰度的問題，適當(dāng)加深最淺色值，在手機(jī)端考慮到屏幕尺寸的限制，增加了最小字號等。

04?一致性的意義

建立產(chǎn)品設(shè)計規(guī)范在一定程度上體現(xiàn)了公司對產(chǎn)品成熟度的要求、設(shè)計者的專業(yè)度、產(chǎn)品用戶體驗(yàn)的質(zhì)量。一致性不僅僅體現(xiàn)在界面視覺上的標(biāo)準(zhǔn)是統(tǒng)一的，在其他方面也有很重要的意義。

1. 產(chǎn)品本身

一致性設(shè)計規(guī)范是基于產(chǎn)品用戶體驗(yàn)的主流趨勢和標(biāo)準(zhǔn)，以及業(yè)務(wù)本身的屬性去制定的，因此使得產(chǎn)品在銷售過程中更有說服力。

2. 團(tuán)隊(duì)內(nèi)部協(xié)作

一致性設(shè)計規(guī)范，可以讓設(shè)計團(tuán)隊(duì)的成員都遵循統(tǒng)一專業(yè)的一致性原則，不僅設(shè)計輸出效率更高，也讓產(chǎn)品的一致性更強(qiáng)。同時降低了設(shè)計師以個人喜好和經(jīng)驗(yàn)的標(biāo)準(zhǔn)輸出設(shè)計物的情況。

3. 團(tuán)隊(duì)間協(xié)作

可以幫助業(yè)務(wù)和研發(fā)團(tuán)隊(duì)更加清晰的認(rèn)識和理解用戶體驗(yàn)設(shè)計，了解設(shè)計師在工作中思考的維度和方向，提升雙方間的信任感和合作效率。

4. 公司品牌

相關(guān)產(chǎn)品間，或產(chǎn)品內(nèi)部建立一致性設(shè)計規(guī)范，會讓公司在商業(yè)競爭中取得更加有利的地位。

5. 客戶角度

可以讓客戶站在產(chǎn)品和設(shè)計師的角度去了解產(chǎn)品設(shè)計的一些問題，進(jìn)而在后續(xù)用戶溝通環(huán)節(jié)中，增加客戶對產(chǎn)品的理解度。

05?最后

企業(yè)本身是在逐步發(fā)展的。B端應(yīng)用不再是難用、無聊的產(chǎn)品，用戶期望B端產(chǎn)品像消費(fèi)類應(yīng)用一樣有著優(yōu)秀的體驗(yàn)，用戶也喜歡好看漂亮的界面。對于我們設(shè)計師來說，所能做的也不止是一致性這一件事…

作者：邰軍軍，UI設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計中心（微信公眾號@58UXD），作者@邰軍軍

題圖來自pexels，基于CC0協(xié)議