圖標(biāo)是任何設(shè)計(jì)系統(tǒng)不可或缺的一部分。使用圖標(biāo)的主要原因是幫助用戶快速理解想法，實(shí)現(xiàn)快速導(dǎo)航，解決語言障礙，最終提升用戶體驗(yàn)。

圖標(biāo)作為一種設(shè)計(jì)工具，在UI/UX和平面設(shè)計(jì)師中最受歡迎。這些微小的設(shè)計(jì)元素對(duì)每個(gè)人來說都是簡(jiǎn)單易懂的，這些特征賦予了它們通用數(shù)字語言的地位。

在這篇文章中，我整理了10個(gè)簡(jiǎn)單又重要的技巧幫你設(shè)計(jì)出更專業(yè)的圖標(biāo)。

1.尺寸規(guī)范 

最小的圖標(biāo)大小通常是12 x 12px。以這個(gè)尺寸為基礎(chǔ)，行業(yè)標(biāo)準(zhǔn)中大多數(shù)其他尺寸只是通過將之前的尺寸翻倍而產(chǎn)生的。

• 小尺寸圖標(biāo)，px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
• 中尺寸圖標(biāo)，px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
• 大尺寸圖標(biāo)，px: 512 x 512, 1024 x 1024.
  

重要提示：當(dāng)你設(shè)計(jì)圖標(biāo)時(shí)，重要的是要按100%顯示的比例去設(shè)計(jì)，使圖標(biāo)完美像素并放大像素塊查看準(zhǔn)確性。 

2.保持像素完美 

完美像素圖標(biāo)在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來越好，所以在不久的將來，對(duì)像素完美圖標(biāo)的需求可能會(huì)減少。但就目前而言，讓你的圖標(biāo)具有可伸縮性、響應(yīng)性和適配更多設(shè)備是非常重要的。

1) 像素網(wǎng)格對(duì)齊.

使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實(shí)心） 

2)完美角度

有角度的線更模糊。創(chuàng)建圖標(biāo)的最佳角度是45°，因?yàn)樾纬梢粋€(gè)角的像素彼此對(duì)稱。

3)邊緣清晰

直線必須占據(jù)其邊緣上最暗的4個(gè)像素。這樣線的邊緣看起來更清晰。

3.注意粗細(xì)和間隙 

為了讓圖標(biāo)看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認(rèn)為是必須遵循的:所有線條的寬度都是相同的。

理想情況下，線寬和間隙大小也應(yīng)該相等。 

然而，有時(shí)候你必須打破這個(gè)規(guī)則。當(dāng)你需要解釋我們?cè)谌粘Ｉ钪忻鎸?duì)的一個(gè)具有非對(duì)稱模式的物體時(shí)，它就會(huì)發(fā)生。比如條形碼這個(gè)例子來說，我故意使圖標(biāo)內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。 

4.統(tǒng)一圓角 

在UI設(shè)計(jì)中，對(duì)象(包括圖標(biāo))的角半徑定義了項(xiàng)目的外觀和感覺。當(dāng)我們說到一個(gè)集合中的多個(gè)對(duì)象時(shí)，規(guī)則很簡(jiǎn)單：在正方形和圓角之間進(jìn)行選擇，并對(duì)所有的圖標(biāo)應(yīng)用相同的屬性。

為什么它如此重要?一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則。一個(gè)可用和用戶友好的設(shè)計(jì)總是提供一致的體驗(yàn)。在下面的例子中，你可以看到打破這個(gè)原則是如何影響視覺感知的。 

5.視覺平衡 

在電腦上看起來完美對(duì)齊和平衡的東西，在你的眼睛看來可能并不一樣。

當(dāng)我們把大小相等的正方形和圓放在一起時(shí)，我們會(huì)有一種不對(duì)勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應(yīng)該使圓更大(或減少正方形的尺寸)。 

這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和使用。有些圖標(biāo)的一側(cè)可能較重。試著調(diào)整它們一兩個(gè)點(diǎn)，直到整體對(duì)齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標(biāo)看起來很大，盡管它與其他部分的大小相同。為了平衡這個(gè)集合，我們需要通過縮小圖標(biāo)的大小來調(diào)整突出顯示的圖標(biāo)。

（彩云注：這個(gè)原則很多人應(yīng)該都知道，但我發(fā)現(xiàn)也是在整套圖標(biāo)的設(shè)計(jì)中最容易出現(xiàn)的問題，當(dāng)把圖標(biāo)匯總在一起的時(shí)候，這個(gè)問題尤其需要重視。）

6.視覺對(duì)齊 

我們經(jīng)常在設(shè)計(jì)軟件中使用中心對(duì)齊，這種方法沒有錯(cuò)。但當(dāng)涉及到細(xì)節(jié)時(shí)，比如圖標(biāo)設(shè)計(jì)，我們需要相信自己的眼睛，打破數(shù)學(xué)法則，以增強(qiáng)元素的平衡。

讓我們以播放按鈕作為展示。這個(gè)例子很簡(jiǎn)單，但非常能說明問題，因?yàn)樾螤钤讲粚?duì)稱，需要改進(jìn)的缺陷就越明顯。 

7.保持簡(jiǎn)單和直接 

我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡(jiǎn)單的情況下工作得最好。用戶越容易理解某樣?xùn)|西并與之互動(dòng)，它就越具有通用性。

（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻(xiàn)https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學(xué)習(xí)下。）

它如何適用于圖標(biāo)設(shè)計(jì)?

1）別使用文字

文本和圖標(biāo)的綁定減少了圖標(biāo)的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標(biāo)旁邊的標(biāo)簽。

2）不要過度設(shè)計(jì)

不必要的復(fù)雜性阻礙了合理的表達(dá)，應(yīng)該避免。過載的設(shè)計(jì)會(huì)將用戶體驗(yàn)變成一場(chǎng)噩夢(mèng)。

3）避免不必要的元素 

只要確保每個(gè)圖標(biāo)在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶端中，就不需要再額外增加表示郵件的圖標(biāo)部分）

重要提示：在圖標(biāo)設(shè)計(jì)中合理地使用KISS原則，也不要把事情做得太簡(jiǎn)單，否則會(huì)影響功能。一個(gè)優(yōu)秀的圖標(biāo)應(yīng)清晰易懂。

8.圖標(biāo)規(guī)范框架 

圖標(biāo)規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個(gè)框架來設(shè)計(jì)圖標(biāo)。但是，這個(gè)規(guī)則非常靈活，只是作為參考，方便圖標(biāo)的設(shè)計(jì)在視覺上平衡。所以，如果你覺得你的圖標(biāo)不完全匹配這個(gè)框框，但看起來完全正確——相信你的眼睛！ 

框架是設(shè)計(jì)的“容器”。框架規(guī)范了一個(gè)統(tǒng)一的范圍來設(shè)計(jì)圖標(biāo)，這背后有一些原因：

1) 大小

由于其幾何形狀，所有圖標(biāo)都具有不同的高度和寬度。為了在我們的設(shè)計(jì)中統(tǒng)一圖標(biāo)尺寸，我們應(yīng)該將它們放置在大小始終相同的框架中。

2)輸出

框架內(nèi)的圖標(biāo)與視覺中心對(duì)齊，這經(jīng)常被開發(fā)人員忽略，因?yàn)樗麄兘?jīng)常根據(jù)實(shí)際的中心來調(diào)整圖標(biāo)，而沒有注意到差異。這就是為什么用框架輸出圖標(biāo)是至關(guān)重要的，當(dāng)你按這個(gè)框架輸出圖標(biāo)時(shí)，能保證視覺設(shè)計(jì)時(shí)想要的視覺中心。

3)效率

如果使用Figma，可以通過創(chuàng)建組件來節(jié)省時(shí)間。可以使用實(shí)例快速地將一個(gè)圖標(biāo)替換為另一個(gè)圖標(biāo)。

9.設(shè)置好圖標(biāo)的關(guān)鍵詞 

如果你要打算做圖標(biāo)資源庫的話。要想到當(dāng)設(shè)計(jì)師在庫中搜索圖標(biāo)時(shí)，會(huì)遇到哪些挑戰(zhàn)?他們的痛點(diǎn)是什么?他們的需求是什么?要回答這些問題，請(qǐng)?jiān)O(shè)身處地為用戶著想。 

1）不要讓用戶思考

例如，如果他們不知道自己想要找到哪種花卉圖標(biāo)，那么就讓他們看到一系列選擇:鮮花項(xiàng)鏈，室內(nèi)花卉，植物商店等。

2）展示關(guān)聯(lián)圖標(biāo)

例如，如果用戶想在相同的主題或類別中找到圖標(biāo)，他們可以快速地檢查包含這個(gè)特定圖標(biāo)的完整集合。

3）使用標(biāo)簽

用戶可能很難找到合適的詞進(jìn)行搜索，或者可能希望看到所有類似的補(bǔ)充選項(xiàng)，從中選擇最合適的。例如，當(dāng)一個(gè)圖標(biāo)的實(shí)際名稱是“蘭花花瓣”，你仍然可以找到它與以下關(guān)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫

10.SVG和PNG圖標(biāo)的區(qū)別 

最終應(yīng)該導(dǎo)出SVG或PNG格式？這是一個(gè)關(guān)鍵問題。讓我們來比較一下格式:

• SVG的文件大小非常小，這意味著最終設(shè)計(jì)的加載速度非?？?，而PNG則相當(dāng)大。
• SVG格式是無限可伸縮的，而PNG的分辨率則受創(chuàng)建的文件大小的限制。然而，將一個(gè)復(fù)雜的SVG圖標(biāo)縮小到隨機(jī)大小可能會(huì)產(chǎn)生半像素的邊緣，這可能會(huì)使圖標(biāo)看起來有虛邊。這是因?yàn)楫?dāng)屏幕上的圖標(biāo)變得更小時(shí)，代表其來源的像素就會(huì)減少，從而導(dǎo)致清晰度下降。這并不意味著需要避免使用SVG文件。只需根據(jù)預(yù)期用途調(diào)整 SVG 圖標(biāo)即可。
• SVG文件可以編輯和動(dòng)畫，PNG文件只能是靜態(tài)的。
• 對(duì)于PNG格式，你必須提供各種大小和顏色的資源，而在使用SVG時(shí)就不需要這些了。
• Png與大多數(shù)瀏覽器兼容，而svg可能不被舊的瀏覽器支持。

我個(gè)人的選擇是使用SVG圖標(biāo)，因?yàn)樗梢怨?jié)省很多時(shí)間。但是，一定要小心縮小復(fù)雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。

總結(jié) 

到這里你應(yīng)該已經(jīng)學(xué)會(huì)了這10個(gè)圖標(biāo)設(shè)計(jì)要點(diǎn)，在你的圖標(biāo)設(shè)計(jì)中使用這些規(guī)則，相信會(huì)讓你的圖標(biāo)變得更加專業(yè)！

彩云注：圖標(biāo)設(shè)計(jì)是一個(gè)設(shè)計(jì)師的基礎(chǔ)能力，在彩云看過的無數(shù)份作品集中最普遍的問題也就是圖標(biāo)設(shè)計(jì)。今天這篇文章雖然非?；A(chǔ)，但千萬別小看它，用這10條技巧重新審視自己的圖標(biāo)作品，相信會(huì)有新的收獲！ 

作者：彩云Sky   來源：站酷網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

Hi，我是彩云。界面是用戶在與任何產(chǎn)品、APP或平臺(tái)交互時(shí)看到的內(nèi)容，用戶體驗(yàn)就是建立在堅(jiān)實(shí)的界面設(shè)計(jì)基礎(chǔ)之上的。所以，如果你想要在UI設(shè)計(jì)上提升能力，應(yīng)該多去思考界面設(shè)計(jì)背后的原因。 

今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則，它們能快速使得你的界面設(shè)計(jì)更干凈、高效。

1. 文案要易于理解 

用更容易讓用戶理解（說人話）的引導(dǎo)文案，提升使用體驗(yàn)。 

（彩云注：下面2個(gè)案例中，左側(cè)的“購(gòu)物車”和“庫存2”太過于術(shù)語化，右側(cè)的“僅剩2”和“加入購(gòu)物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）

2. 垂直對(duì)齊易于掃視

良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶的視線更容易掃描。 

（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）

3.給選項(xiàng)加圖標(biāo) 

使用圖標(biāo)、動(dòng)畫作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。 

（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺上也更加美觀。）

4. 大段內(nèi)容要拆分 

大段的長(zhǎng)句會(huì)讓內(nèi)容變得難以閱讀。

為了獲得好的體驗(yàn)和UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶體驗(yàn)，這樣也不至于讓用戶直接忽略。 

（彩云注：左側(cè)的大段文字我想應(yīng)該沒多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。） 

5. 流程增加進(jìn)度條 

進(jìn)度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購(gòu)物，表單填寫，申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡(jiǎn)化流程。 

（彩云注：左邊的表單UI不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。） 

6.錯(cuò)誤提示要明確 

錯(cuò)誤提示一定要明確，易于理解，方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤，用戶就會(huì)感到很失望，可能會(huì)放棄接下來的流程。在UI設(shè)計(jì)時(shí)，在正確的地方用通俗的語言說明問題，以避免歧義，這一點(diǎn)非常重要。 

（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過于術(shù)語化，也沒有提示在正確的地方讓我非?？鄲馈＃?nbsp;

7.按鈕要正確合理 

從菲茨定律（Fitt's Law）中我們應(yīng)該知道，目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此，為了將注意力集中在轉(zhuǎn)化按鈕上，按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外，按鈕的大小應(yīng)該易于點(diǎn)擊，避免用戶因嘗試點(diǎn)擊時(shí)不方便而流失。 

（彩云注：左側(cè)的按鈕不在正確的決策位置以及按鈕太小，右側(cè)的按鈕簡(jiǎn)潔明了并且符合用戶的心理預(yù)期，能夠讓用戶更快決策并點(diǎn)擊。） 

8. 用好色彩心理學(xué)

顏色是UI中不可缺少的部分，它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來更加豐富合理。 

（彩云注：左側(cè)的藍(lán)色按鈕顏色并不符合用戶對(duì)于刪除的心理預(yù)期，右側(cè)的紅色按鈕對(duì)用戶的心理預(yù)期有危險(xiǎn)和警告，用紅色代表刪除能夠讓用戶集中注意力關(guān)注這一特殊的操作。） 

9. 單列更易保持關(guān)注度 

用單列展示內(nèi)容，能更好地幫助用戶掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí)，將所有信息垂直對(duì)齊時(shí)，能更好的保持用戶關(guān)注度。 

10. 優(yōu)先社交媒體賬號(hào)登錄

用戶準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào)，能很好地增加點(diǎn)擊率。 

11. 選擇狀態(tài)要清晰 

在用戶做選擇的時(shí)候，需要清晰地告訴用戶選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗(yàn)。 

（彩云注：左側(cè)的問題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種，選中和非選中，體驗(yàn)會(huì)更好。） 

12. 用留白分組 

如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓UI看起來更加干凈和優(yōu)雅。用線分組的情況適用于類似Twitter、Medium之類的重內(nèi)容平臺(tái)等場(chǎng)景。 

13. 控件樣式保持一致 

保持設(shè)計(jì)的一致性，能夠降低功能復(fù)雜度并讓用戶更快決策，一致性設(shè)計(jì)讓用戶更快熟悉操作而不需要太多思考。

（彩云注：左側(cè)的選項(xiàng)圓角不一致，會(huì)讓用戶思考為什么這里會(huì)有不同，而右側(cè)的一致性選項(xiàng)設(shè)計(jì)，能讓用戶忽略內(nèi)容外的干擾。）

14. 搜索中的占位符要用好 

在搜索輸入欄添加適當(dāng)?shù)恼嘉环崾居脩艨梢栽谄脚_(tái)上搜索和找到的內(nèi)容，這樣可以提供用戶參考并帶來更好的用戶體驗(yàn)。

15. 暗色模式下飽和度不宜過高 

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來說，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松?；诖?，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。 

(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找) 

16. 按鈕要有優(yōu)先級(jí) 

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒在這些按鈕中，讓用戶不知所措。

17. 簡(jiǎn)化不必要的動(dòng)詞 

沒必要在菜單上增加動(dòng)詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。

18. 字體尺寸類別越少越好 

你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數(shù)的。 

19. 不要混用圖標(biāo)風(fēng)格 

盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè)UI界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。 

這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫：

1)Unicorn (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons (https://www.figma.com/community/file/931906394678748246) 

20. 不同背景下的顏色飽和度適當(dāng)微調(diào) 

通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問題最好辦法是使用2套不同飽和度的顏色。 

21. 新手引導(dǎo)多給用戶自主權(quán)

App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開需要哪些具體步驟，增加”跳過“和前后移動(dòng)查看的能力對(duì)新用戶來說非常重要。 

22. 在圖片上增加疊加層 

許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。 

23. 信息部分露出 

對(duì)于一些大屏設(shè)備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來說，盡量通過設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。 

24. 拆分大段文字 

為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。

（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來描述，很可能直接勸退面試官） 

25.Z字形原理 

Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。 

26. 擴(kuò)大可點(diǎn)擊范圍 

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(diǎn)擊困難，造成流失。

27. 盡量使用簡(jiǎn)潔的圖標(biāo) 

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。

（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

28. 正確的文案表達(dá) 

選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。

29. 考慮手勢(shì)操作 

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。 

30. 展示部分文案 

在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。 

31. 接近法則 

”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。

（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來定）

32. 文字控件可視化 

在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。 

33. 占位符要接近要填寫內(nèi)容 

對(duì)一些人來說容易理解的東西，對(duì)某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內(nèi)容時(shí)出錯(cuò)。

34. 系列位置效應(yīng) 

根據(jù)”系列位置效應(yīng)“，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何App中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。

（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。） 

35. 減少點(diǎn)擊次數(shù) 

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過程。簡(jiǎn)化過程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。

（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。） 

36. 少即是多 

為了使內(nèi)容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。 

37. 留白定義重點(diǎn) 

留白在設(shè)計(jì)中非常重要，太少或者沒有留白會(huì)使得設(shè)計(jì)非?；靵y。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。 

38. 別讓用戶閑著 

根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率?！啊Ｒ虼?，我們可以使用動(dòng)畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到） 

Hi，我是彩云。設(shè)計(jì)趨勢(shì)年年在變，設(shè)計(jì)技能也在不斷更新，但回到本源，底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書，比如《寫給大家看的設(shè)計(jì)書》之類的，會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。隨著工作年數(shù)增加，對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來越深刻，不知道你會(huì)不會(huì)有這種感覺？

在Medium上看到一位工作超過17年的國(guó)外設(shè)計(jì)leader寫的一篇關(guān)于設(shè)計(jì)原理的文章，講設(shè)計(jì)如何變得有效？總結(jié)得很好。

當(dāng)沒有認(rèn)知緊張時(shí)，用戶心流才會(huì)發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí)，你才能體驗(yàn)到認(rèn)知上的輕松。如果沒有，你的“心流狀態(tài)”就會(huì)中斷(稍后會(huì)詳細(xì)討論)，讓我們陷入認(rèn)知緊張，于是“設(shè)計(jì)失敗了”。

當(dāng)基本設(shè)計(jì)原則被忽略時(shí)，這種情況很容易發(fā)生，導(dǎo)致設(shè)計(jì)無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負(fù)空間、接近性、對(duì)比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實(shí)際設(shè)計(jì)時(shí)犯錯(cuò)最多的也是這些問題）

從神經(jīng)科學(xué)的角度來說，當(dāng)一個(gè)設(shè)計(jì)起作用時(shí)，我們會(huì)“感受到它”。其影響立竿見影。它發(fā)生在潛意識(shí)里，在一瞬間完成，是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。

優(yōu)秀設(shè)計(jì)以簡(jiǎn)潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。

人們常說，優(yōu)秀設(shè)計(jì)背后的工藝是無形的。然而，這不是隨機(jī)發(fā)生的。不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會(huì)在畫板上隨意地將各種元素組合在一起，這是有方法的。

為什么有些設(shè)計(jì)具有美的感受，而有些卻沒有

相反地，當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對(duì)勁”時(shí)，人們就會(huì)下意識(shí)地覺得這個(gè)設(shè)計(jì)是有問題的。這樣的結(jié)果會(huì)給品牌或產(chǎn)品帶來不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí)，這種影響尤其有害。這就是為什么你永遠(yuǎn)不會(huì)遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。

“你對(duì)一件事的第一印象會(huì)建立起你隨后的觀念，如果一家公司在你看來不專業(yè)，你可能會(huì)認(rèn)為他們做的其他事情都不專業(yè)。——Daniel Kahneman，普林斯頓大學(xué)心理學(xué)教授。

這不是一個(gè)精心制作的設(shè)計(jì)，會(huì)導(dǎo)致認(rèn)知緊張。你會(huì)在這個(gè)網(wǎng)站上預(yù)訂你的行程嗎?

我們都同意上面是糟糕的設(shè)計(jì)，就像建在沙子上的房子，一個(gè)忽視基本設(shè)計(jì)原則的設(shè)計(jì)將會(huì)崩潰。潛意識(shí)里，它會(huì)立即被認(rèn)為是破碎的，無論是視覺上、精神上和情感上。

人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí)，它的“美學(xué)完整性”、視覺感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。

當(dāng)一個(gè)設(shè)計(jì)是合理的，換句話說，它是令人愉快的、有效的，我們會(huì)迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會(huì)有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會(huì)沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中?！霸谶@種狀態(tài)下，人們會(huì)專注于一項(xiàng)活動(dòng)，其他一切似乎都不重要”——來自于一個(gè)心理學(xué)概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗(yàn)的心理學(xué)》中寫道。

你更愿意住進(jìn)哪個(gè)房間？

設(shè)計(jì)原則在審美完整性中的作用

蘋果的人機(jī)界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱為“設(shè)計(jì)完整性”或“審美凝聚力”。

蘋果對(duì)美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”（彩云注：我的理解就是所見即所得，符合用戶的心理預(yù)期）。換句話說，設(shè)計(jì)的構(gòu)成是產(chǎn)品的一個(gè)組成部分。我們將研究決定設(shè)計(jì)組合成敗的設(shè)計(jì)原則——更多的是關(guān)于 UI，而不是關(guān)于 UX。

美學(xué)完整性不僅僅是關(guān)于設(shè)計(jì)有多好看。它指的是具有明顯連貫性的設(shè)計(jì)：有效的結(jié)構(gòu)和布局，是什么讓它產(chǎn)生效果。換句話說，它的元素在視覺層次、對(duì)齊、間距、平衡、對(duì)稱、重復(fù)、比例、強(qiáng)調(diào)、接近、對(duì)比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用，這里僅舉幾個(gè)例子。

這與“黃金比例”無關(guān)，黃金分割不能解決問題。斐波那契數(shù)列螺旋沒那么玄乎，給設(shè)計(jì)師帶不來驚人的設(shè)計(jì)。

設(shè)計(jì)師們?cè)诎布惸取ぶ炖蚧蛎赡塞惿哪樕袭嫵鼋鹕菪螘r(shí)驚呼道：”果然是”黃金比例“（彩云注：但事實(shí)上有點(diǎn)故弄玄虛了）。當(dāng)然，自然界中確實(shí)有神圣幾何學(xué)(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設(shè)計(jì)原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。

這是我的洗衣機(jī)，上面疊加了斐波那契螺旋。

“審美的完整性”不是沒道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則，是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。

讓我們來看看一些設(shè)計(jì)原則，以及它們?yōu)槭裁磿?huì)使得你的設(shè)計(jì)更能更加有效。通常情況下，真正優(yōu)秀的設(shè)計(jì)會(huì)結(jié)合這些設(shè)計(jì)原則。

我們將探討以下這些最底層的設(shè)計(jì)原理：

1. 視覺層次感
2. 間距、對(duì)齊和網(wǎng)格
3. 平衡
4. 對(duì)比
5. 對(duì)稱
6. 重復(fù)
7. 幾率原則和三分原則
8. 引導(dǎo)線
9. 比例
10. 強(qiáng)調(diào)
11. 整體性
12. 親密性
13. 一致性
14. 顏色
15. 排版
16. 負(fù)空間

視覺層次感

視覺感知的基本規(guī)則對(duì)任何視覺設(shè)計(jì)都是至關(guān)重要的，因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級(jí)。它決定了人們接受和處理信息的順序，因?yàn)樗砸环N視覺方式引導(dǎo)他們。

視覺層次感重在打造視覺優(yōu)先級(jí)。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺元素來傳達(dá)構(gòu)圖的意義、概念和情緒。

核心關(guān)注點(diǎn)是什么，你希望用戶首先注意到或開始閱讀的設(shè)計(jì)中最重要的元素是什么？我們想讓它成為焦點(diǎn)，然后其他部分的設(shè)計(jì)從這里展開。

一個(gè)具有良好視覺層次的網(wǎng)站會(huì)引導(dǎo)用戶關(guān)注重要的部分

視覺層次對(duì)于每一種視覺設(shè)計(jì)都是至關(guān)重要的，無論是需要引導(dǎo)訪客眼球的首頁還是移動(dòng)端UI的導(dǎo)航入口。用戶對(duì)每個(gè)元素的理解取決于組合中的其他元素及其上下文。

建立視覺層次的一些技術(shù)是:位置、大小和比例、顏色和對(duì)比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周圍使用豐富的負(fù)空間可以使它看起來更有意義。使用引導(dǎo)線可以創(chuàng)造移動(dòng)，就像一個(gè)人的眼睛在設(shè)計(jì)上移動(dòng)一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色，通過不同的大小和權(quán)重，我們可以讓更重要的文本元素脫穎而出并建立秩序。

加分技巧

• 使用一個(gè)隱形三角形連接設(shè)計(jì)中的三個(gè)重點(diǎn)區(qū)域（構(gòu)圖）。
• 注意古騰堡圖模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和層蛋糕模式（Layer Cake Pattern）的視覺掃描，并順應(yīng)趨勢(shì)而不是反對(duì)趨勢(shì)。（彩云注：這里的這些模式彩云就不過多介紹了，感興趣的可以自行了解下）

沒有視覺層次的網(wǎng)站沒有明顯的興趣點(diǎn)。

留白、對(duì)齊和網(wǎng)格

設(shè)計(jì)中的對(duì)齊和間距通過空間上的連接傳達(dá)出一種秩序和組織感，這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識(shí)之一是在網(wǎng)格上編排設(shè)計(jì)，然后對(duì)齊和分隔這些元素。

左對(duì)齊、居中對(duì)齊、右對(duì)齊都沒錯(cuò)，但你必須對(duì)齊，否則當(dāng)元素沒有對(duì)齊時(shí)，設(shè)計(jì)就會(huì)給人崩潰的感覺。它給人一種不安的感覺。

沒對(duì)齊的話，眼睛看著很難受

網(wǎng)格有很多不同的類型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計(jì)使用不同網(wǎng)格，但最基本的是設(shè)計(jì)元素的對(duì)齊和間距。（彩云注：關(guān)于網(wǎng)格方面的知識(shí)，彩云以前也寫過不少，感興趣的也可以在公眾號(hào)的歷史發(fā)文中翻翻看）比如：

《想要用好網(wǎng)格系統(tǒng)，這8個(gè)小技巧你必須知道》

《網(wǎng)格系統(tǒng)真是太好用了，后悔沒有早點(diǎn)學(xué)會(huì)！》

《4px網(wǎng)格設(shè)計(jì)方法，讓設(shè)計(jì)還原更精準(zhǔn)》

(Illustration courtesy UX Engineer)

網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會(huì)在視覺上無趣，除非一個(gè)元素從網(wǎng)格中脫穎而出。錯(cuò)位或“打破網(wǎng)格”是賦予元素更多視覺權(quán)重的一個(gè)機(jī)會(huì)。當(dāng)在設(shè)計(jì)中設(shè)置視覺層次結(jié)構(gòu)時(shí)，它可以用來強(qiáng)調(diào)某些東西。

有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動(dòng)

平衡

設(shè)計(jì)上有兩種平衡:對(duì)稱和不對(duì)稱。所有的構(gòu)成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。

這些元素的放置方式能夠在對(duì)稱設(shè)計(jì)中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對(duì)稱的設(shè)計(jì)。無論對(duì)稱還是不對(duì)稱，我們的大腦都被某種平衡感所吸引，因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。

多重原則:平衡、對(duì)齊和對(duì)稱在網(wǎng)站上發(fā)揮作用

對(duì)比

“對(duì)比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開。強(qiáng)烈的對(duì)比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域，而微弱的對(duì)比可以弱化它，創(chuàng)造一個(gè)視覺層次。對(duì)比在設(shè)計(jì)中也扮演著重要的角色。對(duì)比不足會(huì)使文字特別難以閱讀，尤其是對(duì)視力有障礙的人來說。

在左邊的設(shè)計(jì)中，一些文字和背景之間的對(duì)比不夠。

Web內(nèi)容可訪問性指南 (WCAG)呼吁“文本的視覺呈現(xiàn)應(yīng)該有至少4.5:1的對(duì)比度”，除了大規(guī)模文本，它應(yīng)該有至少3:1的對(duì)比度。因此，設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過，現(xiàn)在這種可用性顏色已經(jīng)越來越被重視了，你也要用起來啊）,之前寫的文章，推薦大家可以看看：

《以前我經(jīng)常為配色發(fā)愁，自從知道這3個(gè)配色神器后，配色變得容易多了！》

其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對(duì)比也是必須的。如果UI元素之間沒有明顯的區(qū)分度，設(shè)計(jì)就容易產(chǎn)生混亂。

對(duì)稱

在格式塔原理中，對(duì)稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個(gè)原理說的是，大腦會(huì)以盡可能簡(jiǎn)單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。

我們傾向于尋找一切事物的對(duì)稱性。幾項(xiàng)研究發(fā)現(xiàn)，面部對(duì)稱能提高人們對(duì)人臉吸引力的評(píng)價(jià)(盡管完全對(duì)稱的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為，這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢(shì)。

對(duì)稱在自然界中也無處不在?？纯匆恢缓?，一朵花，或者一只海星。

對(duì)稱

同樣的原理也適用于數(shù)字領(lǐng)域，平衡對(duì)稱的設(shè)計(jì)更令人愉悅。

對(duì)稱性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。

重復(fù)

重復(fù)是一致性的近親，是優(yōu)秀可用性的標(biāo)志。在設(shè)計(jì)中利用重復(fù)是件好事，因?yàn)槲覀兊拇竽X總是在尋找模式、相似性和一致性。為什么?因?yàn)橹貜?fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。

我們更容易識(shí)別重復(fù)的模式，而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的，大腦作為一種生存機(jī)制是懶惰的，模式識(shí)別和認(rèn)知捷徑意味著有意識(shí)地處理視覺信息所需的能量更少。

例如，重復(fù)元素的形狀和大小、填充、留白、類型和顏色，也有助于更對(duì)稱、更好地平衡，做出美觀的設(shè)計(jì)。

The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子

奇數(shù)原則和三分法構(gòu)圖

奇數(shù)法則意思是說，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對(duì)稱，這可能會(huì)顯得過于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比2個(gè)或4個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。

Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(shè)計(jì)

三分法構(gòu)圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫面中以水平和豎直方向分成3x3的網(wǎng)格和4個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。

為什么會(huì)這樣？因?yàn)?strong>三分法構(gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對(duì)稱的美，產(chǎn)生了更有吸引力的構(gòu)圖。

視覺引導(dǎo)線

你希望用戶關(guān)注哪些地方？高級(jí)設(shè)計(jì)師非常擅長(zhǎng)引導(dǎo)用戶的視覺焦點(diǎn)，這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫面增添視覺沖擊力。

達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導(dǎo)線來實(shí)現(xiàn)。利用透視、顏色、對(duì)比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。

從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上

大小和比例

大?。╯cale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對(duì)大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。

比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。

熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺不平衡”。

大小和比例都沒做好時(shí)(左圖)，看起來處理的比較細(xì)致了，但依然沒有做到很好，在大小上正文和標(biāo)題分不清(右圖)

強(qiáng)調(diào)

強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對(duì)比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁面底部有一個(gè)幾乎看不見的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆]有強(qiáng)調(diào)就沒有層級(jí)。

與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁面和電商轉(zhuǎn)化頁面在99%的情況下都使用這種原則。

使用這個(gè)原則，在購(gòu)物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語和產(chǎn)品，轉(zhuǎn)化效果非常好

統(tǒng)一性

統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺關(guān)系，以幫助傳達(dá)清晰、簡(jiǎn)潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。

運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對(duì)稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個(gè)完美的整體。

一致的顏色、重復(fù)的圖案、平衡和對(duì)稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。

接近原則

格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來說，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。

不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國(guó)郵政服務(wù)的例子所顯示的那樣，缺乏對(duì)鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。

接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混。

下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)

一個(gè)把接近原則用好的網(wǎng)頁設(shè)計(jì)案例

一致性

一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測(cè)，符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!

做好一致性可以增強(qiáng)“審美凝聚力”。“我們都知道，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購(gòu)物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。

除了視覺一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無法傳遞。

在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的UI元素來完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶界面易用性的質(zhì)量屬性，所以一致性對(duì)用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。

一致性是通過使用相同的配色、排版、間距、模式和交互來實(shí)現(xiàn)的。

色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對(duì)顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。

一個(gè)極簡(jiǎn)主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。

排版

排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過。在構(gòu)圖中，字體樣式對(duì)人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。

因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對(duì)一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。

排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。

“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌?！?——蘋果的人機(jī)界面指南

蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計(jì)力量

負(fù)空間(又名留白)

Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。

元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。

蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。

最后

人們已經(jīng)開始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對(duì)所有設(shè)計(jì)師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。

基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶體驗(yàn)。

產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜?huì)美麗?！?Dieter Rams(迪特爾·拉姆斯)

當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象。”

設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身。—— 查爾斯 伊姆斯（Charles Eames）

作者：彩云Sky   來源：站酷網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

前言

筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺設(shè)計(jì)師，由于HMI設(shè)計(jì)發(fā)展的較晚，所以基本上在開始進(jìn)入到這個(gè)領(lǐng)域的人，大多來自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進(jìn)式協(xié)作：交互設(shè)計(jì)師要等到產(chǎn)品PRD評(píng)審結(jié)束才開始介入需求，然后交付黑白線框稿等給到視覺設(shè)計(jì)師繼續(xù)跟進(jìn)。這種工作模式可以讓每個(gè)人在自己的崗位上做得更加專業(yè)，成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時(shí)候，這種工作模式對(duì)于傳統(tǒng)行業(yè)的來講，比較新穎、高效，所以在一定程度上促進(jìn)了行業(yè)發(fā)展，但汽車操作系統(tǒng)的設(shè)計(jì)還是有很多不同于互聯(lián)網(wǎng)設(shè)計(jì)的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進(jìn)行設(shè)計(jì)協(xié)同，以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設(shè)計(jì)協(xié)同方案，希望對(duì)你可以有所助益。

什么是設(shè)計(jì)協(xié)同

對(duì)于HMI設(shè)計(jì)來講，需要了解很多專業(yè)知識(shí)，比如：屏幕、硬件、三電、法規(guī)……這些東西都會(huì)影響到設(shè)計(jì)的視覺表達(dá)，所以設(shè)計(jì)協(xié)同就顯得尤為重要，那么什么是設(shè)計(jì)協(xié)同呢？指設(shè)計(jì)師在設(shè)計(jì)之初，即可開啟分享與協(xié)作，讓協(xié)同者盡可能早的參與到設(shè)計(jì)中，通過提供一系列工具，讓協(xié)同者有更加友好地體驗(yàn)，保證每個(gè)人都可以準(zhǔn)確找到相應(yīng)需求的內(nèi)容，并且快速提出修改意見與反饋。簡(jiǎn)單地講，就是讓每個(gè)人都參與到設(shè)計(jì)過程中，以使最終的結(jié)果能夠滿足用戶的需求。

為什么設(shè)計(jì)協(xié)同很重要

從產(chǎn)品功能邏輯層面來講，HMI設(shè)計(jì)的“復(fù)雜度”是具有有一定的“限制性”的，即保證安全第一，過度復(fù)雜的設(shè)計(jì)必然影響駕駛和乘坐人的安全。所以對(duì)于設(shè)計(jì)，是需要進(jìn)行全方位評(píng)估的，必然會(huì)涉及到不同的角色。同時(shí)隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)團(tuán)隊(duì)也在不斷壯大，設(shè)計(jì)師之間的協(xié)作也越來越多，相應(yīng)的溝通和協(xié)作成本就會(huì)不斷增加。如何才能更高效的合作，并把設(shè)計(jì)質(zhì)量和一致性做得更好，是我們需要解決的問題。所以設(shè)計(jì)協(xié)同的最終目的是為了解決問題，做正確的事，讓設(shè)計(jì)師做真正該做的事情。

設(shè)計(jì)協(xié)同的特點(diǎn)

• 設(shè)計(jì)協(xié)同軟件可以在不增加任何工作負(fù)擔(dān)，不影響你的任何設(shè)計(jì)思路的前提下，幫助你理順設(shè)計(jì)的每一張界面，記錄清楚每個(gè)歷史版本，讓你的設(shè)計(jì)不再凌亂。
• 相當(dāng)于設(shè)計(jì)中的得力助手，以一種協(xié)作的方式，使成本降低，可以更快的完成設(shè)計(jì)。
• 隨著社會(huì)信息共享化日益普及，設(shè)計(jì)協(xié)同逐漸成為設(shè)計(jì)行業(yè)發(fā)展的必然趨勢(shì)和技術(shù)革新的一個(gè)重要方向。

設(shè)計(jì)協(xié)同的價(jià)值

消除合作障礙

讓設(shè)計(jì)師專注于真正重要的事情，而不是把精力放在可以自動(dòng)化處理的事情上。對(duì)所有人員的工作進(jìn)行集中化管理，所有人員基于統(tǒng)一數(shù)據(jù)源進(jìn)行協(xié)作。

沉淀設(shè)計(jì)規(guī)范，讓設(shè)計(jì)有能力傳承

通過構(gòu)建團(tuán)隊(duì)資產(chǎn)庫，比如設(shè)計(jì)規(guī)范、控件組件庫等，通過建立健全設(shè)計(jì)規(guī)范，讓數(shù)據(jù)沉淀，一方面讓設(shè)計(jì)師的設(shè)計(jì)有據(jù)可依，提升設(shè)計(jì)的專業(yè)性，另一方面，減少因?yàn)槿藛T變動(dòng)造成的數(shù)據(jù)丟失。

合作設(shè)計(jì)

在設(shè)計(jì)之初，就讓協(xié)同者參與到設(shè)計(jì)之中，保證每個(gè)人都可以準(zhǔn)確的找到他們的需求內(nèi)容，并快速提出修改意見與反饋，讓設(shè)計(jì)師更有針對(duì)性的解決問題，讓設(shè)計(jì)師無需做重復(fù)性的工作。

當(dāng)前主流的工作流

在HMI設(shè)計(jì)的工作流程中，主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師、研發(fā)工程師、測(cè)試工程師、項(xiàng)目經(jīng)理。

不同角色主要工作內(nèi)容是：

產(chǎn)品經(jīng)理

• 根據(jù)市場(chǎng)調(diào)研、競(jìng)品分析或者是已上線產(chǎn)品用戶反饋，發(fā)現(xiàn)創(chuàng)新或改進(jìn)產(chǎn)品的潛在機(jī)會(huì)。
• 確定產(chǎn)品需要做什么，撰寫產(chǎn)品需求文檔。
• 與研發(fā)、設(shè)計(jì)、測(cè)試等部門溝通，確保各個(gè)協(xié)作部門對(duì)產(chǎn)品需求的充分理解。

交互設(shè)計(jì)師

• 根據(jù)需求文檔，撰寫詳細(xì)的產(chǎn)品流程設(shè)計(jì)文檔、產(chǎn)品界面及原型設(shè)計(jì)文檔。
• 與產(chǎn)品、設(shè)計(jì)、研發(fā)、測(cè)試等部門溝通，確保各個(gè)協(xié)作部門對(duì)交互流程充分理解。

視覺設(shè)計(jì)師

• 負(fù)責(zé)項(xiàng)目中各種交互界面、圖標(biāo)、LOGO、按鈕等相關(guān)元素的設(shè)計(jì)與制作。
• 積極與開發(fā)溝通，推進(jìn)界面及交互設(shè)計(jì)的最終實(shí)現(xiàn)。
• 軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意工作和制作工作。

研發(fā)工程師

• 根據(jù)UI界面進(jìn)行代碼化。
• 前端表現(xiàn)層及前后端交互的架構(gòu)設(shè)計(jì)和開發(fā)。
• 配合后臺(tái)開發(fā)人員實(shí)現(xiàn)產(chǎn)品UE及UI頁面結(jié)構(gòu)的代碼編程及腳本編碼。

測(cè)試工程師

• 編寫測(cè)試計(jì)劃、規(guī)劃詳細(xì)的測(cè)試方案、編寫測(cè)試用例。
• 根據(jù)測(cè)試計(jì)劃搭建和維護(hù)測(cè)試環(huán)境。
• 執(zhí)行測(cè)試工作，提交測(cè)試報(bào)告。包括編寫用于測(cè)試的自動(dòng)測(cè)試腳本，完整地記錄測(cè)試結(jié)果，編寫完整的測(cè)試報(bào)告等相關(guān)的技術(shù)文檔。
• 為業(yè)務(wù)部門提供相應(yīng)技術(shù)支持，確保軟件質(zhì)量指標(biāo)。

項(xiàng)目經(jīng)理

• 對(duì)項(xiàng)目進(jìn)行全方位把控，對(duì)工作進(jìn)行分解、落實(shí)在人，在項(xiàng)目開始階段，進(jìn)行排期。
• 在項(xiàng)目進(jìn)行過程中，對(duì)遇到的問題及時(shí)跟蹤，修正，不斷溝通協(xié)調(diào)、以便推進(jìn)項(xiàng)目的進(jìn)展，還要對(duì)各類臨時(shí)出現(xiàn)的事項(xiàng)進(jìn)行拍板和決策。

圍繞著HMI設(shè)計(jì)的整個(gè)工作流程是：

產(chǎn)品經(jīng)理確認(rèn)需求，輸出PRD文檔；交互設(shè)計(jì)師收到PRD文檔以后，基于需求，梳理功能，完善業(yè)務(wù)流程，完成交互文檔的制作，輸出UE文檔；視覺設(shè)計(jì)師在收到UE文檔以后，針對(duì)交互文檔中的流程頁面，進(jìn)行視覺設(shè)計(jì)，輸出UI文件給到研發(fā)同學(xué)；研發(fā)同學(xué)根據(jù)UI文件和交互文檔進(jìn)行代碼化，完成以后進(jìn)入測(cè)試環(huán)節(jié)，測(cè)試工程師和產(chǎn)品、交互、視覺都需要參與到測(cè)試過程中，當(dāng)完成測(cè)試工作以后進(jìn)行發(fā)版。

目前常用設(shè)計(jì)協(xié)同方式

設(shè)計(jì)師自我協(xié)同

涉及角色

自己、設(shè)計(jì)師小團(tuán)隊(duì)。

痛點(diǎn)

工作中很多重復(fù)的內(nèi)容，比如：Button、List等使用的地方很多，如果每個(gè)元素都重新繪制，勢(shì)必會(huì)投入很多時(shí)間，同時(shí)因?yàn)槿藶橐蛩兀y免會(huì)出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個(gè)問題呢？

協(xié)同方式

當(dāng)團(tuán)隊(duì)初期發(fā)展的時(shí)候，或者整個(gè)團(tuán)隊(duì)只有少數(shù)幾個(gè)設(shè)計(jì)師的時(shí)候，通過匯總通用樣式和組件，形成視覺指導(dǎo)Guide，方便通用樣式的復(fù)用，減少重復(fù)工作量，達(dá)到快速完成視覺設(shè)計(jì)的目的。

優(yōu)點(diǎn)

通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復(fù)用，有效的減少了重復(fù)工作量。

缺點(diǎn)

由于控件組件庫是在設(shè)計(jì)進(jìn)行到一定程度以后提煉的，會(huì)存在滯后性，并且隨著設(shè)計(jì)工作越來越往后，會(huì)發(fā)現(xiàn)前期的控件組件存在不合適的地方，需要對(duì)之前的工作進(jìn)行修正。

設(shè)計(jì)團(tuán)隊(duì)協(xié)同

涉及角色

設(shè)計(jì)團(tuán)隊(duì)內(nèi)部。

痛點(diǎn)

當(dāng)公司發(fā)展到一定的階段：

1. 公司有不同的產(chǎn)品，且都需要長(zhǎng)期的開發(fā)和迭代。
2. 越來越多的設(shè)計(jì)師加入公司。

當(dāng)設(shè)計(jì)團(tuán)隊(duì)越來越大，大家分工越來越細(xì)，想法越來越多，就會(huì)發(fā)現(xiàn)，復(fù)制粘貼guide的方式，已經(jīng)無法滿足團(tuán)隊(duì)的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時(shí)因?yàn)闆]有統(tǒng)一的流程，會(huì)發(fā)現(xiàn)不同的業(yè)務(wù)對(duì)于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務(wù)都會(huì)使用的功能，因?yàn)闆]有統(tǒng)一定義，有的業(yè)務(wù)會(huì)采用即時(shí)搜索模式，有的業(yè)務(wù)必須點(diǎn)擊搜索以后才可以進(jìn)行搜索，并且這種問題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時(shí)候才會(huì)發(fā)現(xiàn)。
所以在后期會(huì)針對(duì)每一個(gè)差異點(diǎn)進(jìn)行統(tǒng)一，需要全流程重新來一遍，費(fèi)時(shí)費(fèi)力。那么怎么才可以避免這種情況的發(fā)生呢？答案就是構(gòu)建設(shè)計(jì)系統(tǒng)。

協(xié)同方式

設(shè)計(jì)系統(tǒng)不同于guide的地方是：樣式，控件組件只是設(shè)計(jì)系統(tǒng)中的兩個(gè)組成部分，除此以外，設(shè)計(jì)系統(tǒng)還包括了一系列的標(biāo)準(zhǔn)來指導(dǎo)設(shè)計(jì)。比如：圖標(biāo)、動(dòng)效、音效等。這些標(biāo)準(zhǔn)記錄了設(shè)計(jì)團(tuán)隊(duì)內(nèi)達(dá)成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標(biāo)準(zhǔn)才確保了設(shè)計(jì)方案不僅僅只解決一個(gè)問題，而是可以被復(fù)用的。這些標(biāo)準(zhǔn)也是為什么用戶能獲得一致的體驗(yàn)的原因。
通過設(shè)計(jì)系統(tǒng)的建立，讓設(shè)計(jì)規(guī)?；?，繼而進(jìn)一步強(qiáng)化車機(jī)系統(tǒng)的統(tǒng)一性，同時(shí)為設(shè)計(jì)師在做設(shè)計(jì)時(shí)提供一個(gè)很好的指導(dǎo)方向，讓團(tuán)隊(duì)內(nèi)不同成員的設(shè)計(jì)在風(fēng)格上保持一致，提升設(shè)計(jì)團(tuán)隊(duì)的專業(yè)度。關(guān)于設(shè)計(jì)系統(tǒng)的建立本文就不再過多描述，后續(xù)會(huì)出專門的文章進(jìn)行詳述，這里主要是講述設(shè)計(jì)系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計(jì)系統(tǒng)的搭建需要專門的人或者團(tuán)隊(duì)進(jìn)行，當(dāng)搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進(jìn)行詳細(xì)說明：

UE控件組件庫

提供給交互設(shè)計(jì)師，基于提供的內(nèi)容，交互可以快速的構(gòu)建界面、交互和流程等，就像搭樂高一樣?？梢钥焖俚臉?gòu)建一些產(chǎn)品原型或者是實(shí)驗(yàn)性的功能，來進(jìn)行測(cè)試以快速驗(yàn)證想法。

顏色/字體樣式庫、UI控件組件庫

提供給UI設(shè)計(jì)師，形式可以是Sketch Libraries，一方面方便設(shè)計(jì)師調(diào)用，使不同的設(shè)計(jì)師的設(shè)計(jì)變得更加統(tǒng)一，且更加可預(yù)測(cè)，同時(shí)組件也可以讓設(shè)計(jì)師更多的時(shí)間專注于如何構(gòu)建更好的用戶體驗(yàn)，而不是去糾結(jié)于樣式的調(diào)整。

UI控件組件說明文檔

提供給研發(fā)，可以是pdf之類的文檔形式，主要是詳細(xì)的描述每一個(gè)組件的各種屬性，以及里面包含的交互邏輯等，幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺(tái)。
那么這些資源和不同的角色之間是怎么協(xié)作呢？UE控件組件庫不需要常常更新，完成后給到交互設(shè)計(jì)團(tuán)隊(duì)，供交互設(shè)計(jì)師使用搭建UE文檔。在項(xiàng)目開始之前，負(fù)責(zé)設(shè)計(jì)系統(tǒng)的UI團(tuán)隊(duì)進(jìn)行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團(tuán)隊(duì)內(nèi)，供業(yè)務(wù)設(shè)計(jì)師使用進(jìn)行界面設(shè)計(jì)，同時(shí)進(jìn)行UI控件組件說明文檔的編撰，完成以后提供給相應(yīng)的平臺(tái)研發(fā)，讓平臺(tái)研發(fā)進(jìn)行組件代碼化。當(dāng)代碼實(shí)現(xiàn)以后進(jìn)行走查，檢查是否按照UI準(zhǔn)確的實(shí)現(xiàn)。當(dāng)業(yè)務(wù)設(shè)計(jì)師完成了業(yè)務(wù)的界面設(shè)計(jì)以后，進(jìn)行評(píng)審，輸出給對(duì)應(yīng)的業(yè)務(wù)研發(fā)，研發(fā)對(duì)于相應(yīng)的視覺界面進(jìn)行對(duì)應(yīng)的代碼化，使用組件的地方直接調(diào)用平臺(tái)代碼，剩下的由業(yè)務(wù)研發(fā)進(jìn)行代碼化。

優(yōu)點(diǎn)

組件由專門的UI設(shè)計(jì)師和研發(fā)團(tuán)隊(duì)負(fù)責(zé)，當(dāng)出現(xiàn)設(shè)計(jì)變更以后，業(yè)務(wù)設(shè)計(jì)師可以快速通過組件庫更新最新的視覺樣式，同時(shí)和平臺(tái)研發(fā)對(duì)接，進(jìn)行代碼修改，而不需要每個(gè)業(yè)務(wù)研發(fā)單獨(dú)修改，大大減少了跨部門的協(xié)作溝通成本。

缺點(diǎn)

團(tuán)隊(duì)內(nèi)需要專門的設(shè)計(jì)師構(gòu)建設(shè)計(jì)系統(tǒng)并負(fù)責(zé)日常維護(hù)。

設(shè)計(jì)師和交互協(xié)同

涉及角色

設(shè)計(jì)、交互團(tuán)隊(duì)。

痛點(diǎn)

由于需求的不確定性，以及車聯(lián)網(wǎng)項(xiàng)目周期較長(zhǎng)等特點(diǎn)，會(huì)出現(xiàn)需求經(jīng)常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個(gè)項(xiàng)目結(jié)束以后，會(huì)有幾十份甚至上百份的設(shè)計(jì)文檔的情況出現(xiàn)。

協(xié)同方式

隨著云端化辦公軟件Figma的興起，為多角色協(xié)作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時(shí)設(shè)計(jì)等在線軟件。
設(shè)計(jì)文件現(xiàn)在是一個(gè)鏈接，這意味著：

• 設(shè)計(jì)師可以更輕松地并行工作。
• 工程師可以更早的查看設(shè)計(jì)稿進(jìn)行技術(shù)評(píng)審。
• 利益相關(guān)者或任何有鏈接的人都可以看到設(shè)計(jì)從想法到實(shí)現(xiàn)的過程。
• 設(shè)計(jì)現(xiàn)在是一個(gè)整體而不是在設(shè)計(jì)過程被分割成多個(gè)文件。

UI設(shè)計(jì)師不必再等到交互完成評(píng)審，輸出交互文檔以后進(jìn)行視覺設(shè)計(jì)，交互和設(shè)計(jì)完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發(fā)直接瀏覽器查看，而不需要像之前一樣，不停的進(jìn)行設(shè)計(jì)資源的輸出。極大的節(jié)省了設(shè)計(jì)師輸出時(shí)間。優(yōu)化了協(xié)作工作流。

優(yōu)點(diǎn)

協(xié)作設(shè)計(jì)，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺(tái)轉(zhuǎn)化，步驟簡(jiǎn)單；自動(dòng)生成代碼與標(biāo)注。設(shè)計(jì)稿修改后自動(dòng)更新，無需重復(fù)下載。

缺點(diǎn)

云端保存，會(huì)有數(shù)據(jù)泄露的風(fēng)險(xiǎn)。
必須在線操作。

設(shè)計(jì)和研發(fā)協(xié)同

涉及角色

UE、UI、研發(fā)。

痛點(diǎn)

由于公司發(fā)展，業(yè)務(wù)線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個(gè)屏幕尺寸下，需要設(shè)計(jì)的地方不太多，需要花更多的時(shí)間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時(shí)間換業(yè)績(jī)，為了達(dá)到這個(gè)目標(biāo)，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應(yīng)商人員，都會(huì)增加業(yè)務(wù)支出，并且由于業(yè)務(wù)無法一直保證飽和，所以會(huì)出現(xiàn)一段時(shí)間忙的要命，招了很多人員，過了這段時(shí)間，業(yè)務(wù)不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對(duì)于團(tuán)隊(duì)或是公司來講，并不可持續(xù)。
另外一種方式就是重新梳理工作流，減少一些重復(fù)無意義的工作，比如像是系統(tǒng)設(shè)置等瀑布流式的界面，不同車型下的區(qū)別只來自于功能的有無，界面上并無太大區(qū)別，這里所說的工作，不僅僅指設(shè)計(jì)師的界面設(shè)計(jì)工作，同時(shí)也包括了研發(fā)同學(xué)的研發(fā)落地工作，同時(shí)因?yàn)檠邪l(fā)同學(xué)的適配，也會(huì)造成測(cè)試走查環(huán)節(jié)，這些都是一些重復(fù)性的工作量，所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢？
答案就是我們接下來要講的一種全新的工作模式：C2D2C模式。

協(xié)同方式

由于設(shè)計(jì)團(tuán)隊(duì)在早期的發(fā)展中，積累了大量的設(shè)計(jì)資產(chǎn)。這些設(shè)計(jì)資產(chǎn)的沉淀就是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ)，將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件，也就是C2D的過程。然后將封裝好的組件通過低代碼平臺(tái)進(jìn)行屬性配置、搭建頁面、布局調(diào)整實(shí)現(xiàn)頁面的設(shè)計(jì)就是 D2C 的過程。通過平臺(tái)設(shè)定交互行為和綁定后臺(tái)數(shù)據(jù)，完成整個(gè)系統(tǒng)，最后再進(jìn)行站點(diǎn)發(fā)布，就實(shí)現(xiàn)了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡(jiǎn)單講就是研發(fā)同學(xué)把設(shè)計(jì)資產(chǎn)通過設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式完成代碼化，然后讓設(shè)計(jì)師調(diào)用已經(jīng)代碼化的設(shè)計(jì)資產(chǎn)進(jìn)行設(shè)計(jì)工作，這樣子當(dāng)設(shè)計(jì)師完成了界面設(shè)計(jì)的時(shí)候，相當(dāng)于同時(shí)完成了前端開發(fā)，接下來研發(fā)同學(xué)只需要根據(jù)拿到的界面添加簡(jiǎn)單的邏輯就算完成了研發(fā)工作，實(shí)現(xiàn)中后臺(tái)設(shè)計(jì)研發(fā)流程的整體提效。

優(yōu)點(diǎn)

由于樣式、組件已經(jīng)完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設(shè)計(jì)師重復(fù)設(shè)計(jì)，同時(shí)由于減少了設(shè)計(jì)師和研發(fā)的參與，節(jié)省了大量溝通成本，也減少了很多因?yàn)槿藶橐蛩囟a(chǎn)生的bug。
由于設(shè)計(jì)師減少了重復(fù)工作量，可以有更多的時(shí)間集中在視覺表現(xiàn)上，有效提升了設(shè)計(jì)輸出的質(zhì)量，保證了產(chǎn)品的設(shè)計(jì)感。
對(duì)于大量適配項(xiàng)目的團(tuán)隊(duì)，可以由設(shè)計(jì)師直接配置項(xiàng)目組件，無需經(jīng)過研發(fā)，減少出錯(cuò)概率，極大提升工作效率。

缺點(diǎn)

前期需要研發(fā)同學(xué)代碼化基礎(chǔ)控件，所以需要投入人力、精力進(jìn)行前期的工作。
由于控件提前進(jìn)行了代碼化，后續(xù)可能會(huì)出現(xiàn)無法滿足業(yè)務(wù)需求等情況出現(xiàn)，所以需要有人及時(shí)對(duì)代碼進(jìn)行維護(hù)更新。

全角色協(xié)同

涉及角色

產(chǎn)品、UE、UI、研發(fā)、測(cè)試。

痛點(diǎn)

基于上面講述的C2D2C模式，已經(jīng)完成了一個(gè)共享平臺(tái)的搭建，由于配置需要研發(fā)的參與，所以始終需要研發(fā)同學(xué)作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產(chǎn)品同學(xué)，設(shè)計(jì)同學(xué)，或者說是普通用戶使用呢？

協(xié)同方式

一個(gè)優(yōu)秀的共享平臺(tái)是需要所有人都可以在其中使用的，所以，當(dāng)公司或者團(tuán)隊(duì)發(fā)展到穩(wěn)定階段，我們需要重構(gòu)工作流，以需求為導(dǎo)向，搭建全員工作平臺(tái)，基于設(shè)計(jì)師和研發(fā)搭建的平臺(tái)基礎(chǔ)上，提煉需求，強(qiáng)化個(gè)性化和定制化，滿足品牌產(chǎn)品的個(gè)性化需求，具體來講，就是把UI界面中元素提煉出相應(yīng)的功能，生成功能清單，通過選擇不同的功能，生成相對(duì)應(yīng)的界面。
當(dāng)完整的共享平臺(tái)搭建完成以后，團(tuán)隊(duì)中的每個(gè)角色的工作內(nèi)容都發(fā)生了變化，產(chǎn)品的工作是構(gòu)建更多的需求，交互設(shè)計(jì)師的工作是構(gòu)建更多的交互形式，產(chǎn)品架構(gòu)，UI設(shè)計(jì)師的工作是設(shè)計(jì)更多更好的界面布局，視覺表現(xiàn)，然后研發(fā)把上述內(nèi)容通過代碼匯總進(jìn)我們的需求池中，擴(kuò)展我們的平臺(tái)豐富度。
HMI設(shè)計(jì)工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點(diǎn)擊完成，就可以即刻看到高度定制化的一套系統(tǒng)。

優(yōu)點(diǎn)

讓每個(gè)人回歸工作的本質(zhì)，不需要為了一些重復(fù)的繁雜的內(nèi)容而疲于奔命，做更有價(jià)值的工作，實(shí)現(xiàn)工作的價(jià)值
賦能行業(yè)，可以滿足車企定制化的需求，提供車企一套完整的車機(jī)系統(tǒng)解決方案。

缺點(diǎn)

投入大，對(duì)于小體量的業(yè)務(wù)來講短期無法創(chuàng)造價(jià)值。

最后

對(duì)于現(xiàn)在的行業(yè)環(huán)境，增速提效已經(jīng)達(dá)成了基本共識(shí)，設(shè)計(jì)協(xié)同就成了一個(gè)大課題，但是不同的企業(yè)，不同的團(tuán)隊(duì)面對(duì)的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協(xié)同方式并無定式，需要根據(jù)實(shí)際情況，進(jìn)行具體分析，畢竟效率的提升是為了創(chuàng)造最大的價(jià)值。我們所有的努力最終目的是為了解決問題，做正確的事。

企業(yè)級(jí)B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn)，在大型迭代項(xiàng)目中，如何做好設(shè)計(jì)協(xié)同，把握設(shè)計(jì)一致性和還原度常常讓很多設(shè)計(jì)團(tuán)隊(duì)感覺無從下手，找不到切入點(diǎn)。在長(zhǎng)期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn)，做好設(shè)計(jì)規(guī)范能規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)以及整個(gè)企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗(yàn)統(tǒng)一。

那么，我們?cè)撊绾巫龊皿w驗(yàn)標(biāo)準(zhǔn)化，保障基礎(chǔ)體驗(yàn)一致性？下面將和大家分享我們公司在構(gòu)建設(shè)計(jì)規(guī)范的實(shí)踐案例。

一、為什么要做設(shè)計(jì)規(guī)范？

以我們?cè)O(shè)計(jì)團(tuán)隊(duì)為例，隨著業(yè)務(wù)不斷擴(kuò)大，定制化需求不斷增加，大型迭代項(xiàng)目做不好設(shè)計(jì)和開發(fā)協(xié)同，導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計(jì)效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構(gòu)建設(shè)計(jì)規(guī)范，以保證一致性，實(shí)現(xiàn)工作提效。

從不同角度出發(fā)，構(gòu)建設(shè)計(jì)規(guī)范都能發(fā)揮積極的作用。

對(duì)企業(yè)來說：有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計(jì)和研發(fā)的輸出一致。設(shè)計(jì)側(cè)主動(dòng)建立產(chǎn)品設(shè)計(jì)規(guī)范，很大程度上是為了做好設(shè)計(jì)管控，實(shí)現(xiàn)原型、設(shè)計(jì)稿到線上頁面統(tǒng)一的設(shè)計(jì)語言，從根本上提升設(shè)計(jì)質(zhì)量和還原度，提高用戶滿意度。

對(duì)個(gè)人來說：當(dāng)多個(gè)設(shè)計(jì)師共同協(xié)作同一項(xiàng)目時(shí)，由于設(shè)計(jì)理解不一致等原因，容易出現(xiàn)設(shè)計(jì)控件使用混亂等問題。若有詳細(xì)的設(shè)計(jì)規(guī)范作為引導(dǎo)，有利于實(shí)現(xiàn)產(chǎn)品各個(gè)模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作，讓設(shè)計(jì)師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。

二、建立設(shè)計(jì)規(guī)范的時(shí)機(jī)？

產(chǎn)品有不同發(fā)展階段，設(shè)計(jì)規(guī)范同樣也有，不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時(shí)也要構(gòu)建一個(gè)合理的規(guī)范迭代思路。

產(chǎn)品探索初期：

該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」，業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長(zhǎng)狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗(yàn)”的情況，導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過關(guān)。

搭建目的：通過定義原則，梳理關(guān)鍵頁面和流程，搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對(duì)產(chǎn)品有統(tǒng)一的設(shè)計(jì)價(jià)值觀和認(rèn)知判斷；從頁面到流程，又能對(duì)應(yīng)設(shè)計(jì)參照標(biāo)準(zhǔn)；同時(shí)業(yè)務(wù)可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗(yàn)的根基牢固，而且不會(huì)限制功能設(shè)計(jì)自由。

搭建范圍：「全局說明」「頁面布局」「通用流程」

產(chǎn)品穩(wěn)定發(fā)展期：

該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長(zhǎng)，會(huì)導(dǎo)致不少設(shè)計(jì)細(xì)節(jié)不一致，從而影響了產(chǎn)品整體的體驗(yàn)和效率。

搭建目的：通過回溯整理過往設(shè)計(jì)，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn)，進(jìn)一步優(yōu)化流程和效率， 讓整個(gè)產(chǎn)品體驗(yàn)達(dá)到相對(duì)穩(wěn)定的狀態(tài)。

搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」

三、一個(gè)好的設(shè)計(jì)規(guī)范是什么樣的？

好的設(shè)計(jì)規(guī)范有很多優(yōu)秀的例子，例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計(jì)風(fēng)尚的公司，設(shè)計(jì)規(guī)范已經(jīng)上升為設(shè)計(jì)語言，指導(dǎo)旗下所有產(chǎn)品的設(shè)計(jì)。國(guó)內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element，arco.design等，像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，把交互、前端和視覺的事情一并解決了，是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計(jì)規(guī)范都包含以下幾個(gè)特點(diǎn)：靈活性，可擴(kuò)展性，系統(tǒng)性和標(biāo)準(zhǔn)性。

一般團(tuán)隊(duì)內(nèi)部構(gòu)建的設(shè)計(jì)規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù)，因?yàn)橹饕菆F(tuán)隊(duì)內(nèi)部成員使用，追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計(jì)規(guī)范的基礎(chǔ)上，適度參考行業(yè)設(shè)計(jì)規(guī)范，能復(fù)用的直接參考，同時(shí)專注于業(yè)務(wù)本身，具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮，使整個(gè)規(guī)范制定效率更高，科學(xué)性、指導(dǎo)性更強(qiáng)。

四、如何制定設(shè)計(jì)規(guī)范？

設(shè)計(jì)規(guī)范的執(zhí)行和推動(dòng)主要分為四大步驟：

類型梳理：分析業(yè)務(wù)場(chǎng)景，整理和歸類組件，評(píng)估具體組件優(yōu)先級(jí)和迭代計(jì)劃；

全局說明：統(tǒng)一布局，色板，字體，常用樣式，規(guī)范設(shè)計(jì)語言；

抽象設(shè)計(jì)：將設(shè)計(jì)共性抽象出來，構(gòu)建組件通用方案；

效果驗(yàn)證：通過定性/定量數(shù)據(jù)追蹤效果，分析原因，迭代改進(jìn)；

第一步：類目梳理

收集現(xiàn)有設(shè)計(jì)頁面，分析業(yè)務(wù)場(chǎng)景，再參考行業(yè)通用規(guī)范的定義，整理和歸類組件，可以先羅列完整，再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。

全局說明：明確影響整站各個(gè)模塊、各個(gè)頁面設(shè)計(jì)的原則和規(guī)范，指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計(jì)。包括統(tǒng)一布局，色板，字體，樣式等設(shè)計(jì)規(guī)則。

基礎(chǔ)組件：可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成，因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況，將基礎(chǔ)組件分為導(dǎo)航，通用，數(shù)據(jù)展示，數(shù)據(jù)錄入，反饋5個(gè)大模塊，每個(gè)模塊下再細(xì)分各小類，構(gòu)成基礎(chǔ)組件的類目。

業(yè)務(wù)組件：根據(jù)業(yè)務(wù)需求，可以定義屬于自己的業(yè)務(wù)組件，這也是區(qū)別于其他通用行業(yè)組件庫的一個(gè)核心部分。

第二步：全局說明

因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中，每個(gè)模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會(huì)降低，需要去補(bǔ)充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。包括布局，色彩規(guī)范，字體，樣式等；

第三步：抽象設(shè)計(jì)

抽象設(shè)計(jì)是設(shè)計(jì)規(guī)范中最核心，工作量最大，難度最高的一個(gè)環(huán)節(jié)。我們可以將它拆解成幾個(gè)部分，先做出基礎(chǔ)組件，再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計(jì)業(yè)務(wù)組件，最后抽象成頁面模板。

基礎(chǔ)組件

組件庫的搭建，就一定要提到原子思維。道爾頓原子論認(rèn)為，物質(zhì)世界的最小單位是原子，原子是單一的，獨(dú)立的，不可被分割的，在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個(gè)原子理論同樣適用于設(shè)計(jì)系統(tǒng)中。

其中，最小單位設(shè)計(jì)元素就是基礎(chǔ)組件。我們?cè)谧鲈O(shè)計(jì)系統(tǒng)的時(shí)候希望當(dāng)你改動(dòng)任何一個(gè)原子，你有自信其他所有依賴于這個(gè)原子的部件全部自動(dòng)更新。只有滿足了這一點(diǎn)，設(shè)計(jì)系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會(huì)真正實(shí)現(xiàn)。例如，在sketch中，分享樣式和嵌套符號(hào)的使用。

業(yè)務(wù)組件

在構(gòu)建完基礎(chǔ)組件后，可以根據(jù)業(yè)務(wù)需求，將使用頻率較高的組件進(jìn)行評(píng)估，抽象成業(yè)務(wù)組件。

一般業(yè)務(wù)組件可分成兩大類：

一類是由多個(gè)基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件，如：復(fù)合標(biāo)簽，快捷時(shí)間選擇器等；

另一類是針對(duì)特定業(yè)務(wù)場(chǎng)景的業(yè)務(wù)組件：如地圖，站點(diǎn)等；

頁面模版

在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后，我們可以根據(jù)全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應(yīng)，加強(qiáng)設(shè)計(jì)說明和組件之間的結(jié)合。

第四步：效果驗(yàn)證

組件質(zhì)量評(píng)估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個(gè)維度。通過一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。

系統(tǒng)應(yīng)用層面的評(píng)價(jià)：

系統(tǒng)是否幫助業(yè)務(wù)提效；

當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng)，能否靈活改動(dòng)；

系統(tǒng)是否幫助業(yè)務(wù)變得更有競(jìng)爭(zhēng)力、更創(chuàng)新；

五、迭代方案和機(jī)制提效

迭代機(jī)制

當(dāng)我們完成設(shè)計(jì)規(guī)范的整體構(gòu)建后，對(duì)于新需求，通過評(píng)估復(fù)用性、通用性和優(yōu)先級(jí)，低級(jí)別的走定制設(shè)計(jì)完成交付。高級(jí)別的通過抽象設(shè)計(jì)、內(nèi)審、沉淀到組件庫中。

機(jī)制提效

在完成設(shè)計(jì)規(guī)范的構(gòu)建后，我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師，幫助每個(gè)環(huán)節(jié)的人員快速搭建產(chǎn)出物，推動(dòng)上下游機(jī)制提效。

例如，我們會(huì)基于設(shè)計(jì)規(guī)范，為產(chǎn)品經(jīng)理提供符合設(shè)計(jì)規(guī)范的Axure元件庫，產(chǎn)品經(jīng)理使用元件庫，可以快速搭建原型，產(chǎn)出prd，與設(shè)計(jì)師、開發(fā)的溝通也更加順暢。簡(jiǎn)單的修改可以跳過設(shè)計(jì)師出圖這一步驟，直接和開發(fā)溝通，極大加快前期的節(jié)奏。甚至通過借助元件庫，產(chǎn)品經(jīng)理可以搭建出高保真原型，用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。

基于設(shè)計(jì)規(guī)范，推動(dòng)研發(fā)實(shí)現(xiàn)組件代碼化，通過設(shè)計(jì)標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過定義標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，開發(fā)側(cè)就可以制定相應(yīng)組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子，同時(shí)減少上線前設(shè)計(jì)走查、測(cè)試的工作量，保證落地效果，提升生產(chǎn)力。

以上就是我們?cè)跇?gòu)建自己的企業(yè)設(shè)計(jì)規(guī)范的流程，最后，給大家展示一下，我們目前的企業(yè)設(shè)計(jì)規(guī)范和部分應(yīng)用情況。