如何構(gòu)建設(shè)計(jì)語言

楓橋良夜

武漢/UI設(shè)計(jì)師/6年前/3200瀏覽

版權(quán)

楓橋良夜

“風(fēng)格來來去去。好的設(shè)計(jì)是一種語言，而不是一種風(fēng)格。”——MassimoVignelli

| 為何構(gòu)建設(shè)計(jì)語言

1）品牌形象：隨著公司發(fā)展會衍生一系列線上產(chǎn)品以及線下物料，設(shè)計(jì)語言的構(gòu)建大大統(tǒng)一傳達(dá)了公司品牌形象，產(chǎn)品后續(xù)迭代中也不會混亂，更有效的維護(hù)企業(yè)品牌形象，加深用戶印象，有效提升用戶體驗(yàn)。

2）用戶體驗(yàn)：線上產(chǎn)品的設(shè)計(jì)語言更注重用戶體驗(yàn)，比如不同的界面邊距和字號大小，產(chǎn)品的基調(diào)也會不同，用戶的情緒感受也不一樣。所以在構(gòu)建設(shè)計(jì)語言時(shí)，首先要了解產(chǎn)品特性以及使用場景和使用人群，確定好產(chǎn)品方向再著手構(gòu)建設(shè)計(jì)語言如何傳達(dá)給用戶合適的設(shè)計(jì)體驗(yàn)。

3）開發(fā)效率：統(tǒng)一的設(shè)計(jì)組件可以大幅度提高開發(fā)者的時(shí)間效率以及項(xiàng)目周期，還有就是在項(xiàng)目后期迭代或修改時(shí)，統(tǒng)一的樣式可以快速修改。減輕了設(shè)計(jì)對接和開發(fā)實(shí)現(xiàn)的負(fù)擔(dān)。

| 語言構(gòu)建

1）顏色：無論UI還是平面，顏色是視覺傳達(dá)的最核心也是最基本的語言，不同的主色，會給人不同的視覺感受，同樣的主色不同的配色，視覺感受也會不同。在設(shè)計(jì)中確定好主色后，配色的選擇也較為關(guān)鍵。界面設(shè)計(jì)中除了背景色、字體顏色、圖標(biāo)以外，后期上傳的產(chǎn)品圖以及輪播圖都要規(guī)范。

2）字體：字體的設(shè)定包括字號、字重、行距、顏色對比以及界面間距留白的協(xié)調(diào)性。Material Design對字體標(biāo)題和內(nèi)容文字的大小剛好是1.6倍，接近黃金比例，所以字體的處理也要有所考究。構(gòu)建文字在界面美觀和基調(diào)同時(shí)，更要注重用戶可讀性，分清主次關(guān)系。字體種類在界面中應(yīng)存在一種或者兩種，不可出現(xiàn)三種字體。字號和字顏色避免過于接近，導(dǎo)致無法分清關(guān)系。正文行間距一般為字號的1.5~1.8倍之間。

3）形狀：形狀的使用在界面設(shè)計(jì)中也最為常見，最多的就是直角和圓角，以及帶有品牌元素的形狀。不同的形狀傳達(dá)的情緒也不同，比如說尖銳的和弧度的，包括圓角大小不同視覺感也不同。根據(jù)重復(fù)原則，如果某個(gè)形狀在界面中重復(fù)使用時(shí)很容易加深用戶對于產(chǎn)品的印象，就像很多設(shè)計(jì)師設(shè)計(jì)icon時(shí)結(jié)合產(chǎn)品特性以及l(fā)ogo的設(shè)計(jì)基因相結(jié)合。

4）圖標(biāo)：接著上面形狀的理解，圖標(biāo)的風(fēng)格設(shè)計(jì)也要和界面的其他設(shè)計(jì)元素應(yīng)保持統(tǒng)一的設(shè)計(jì)語言，實(shí)現(xiàn)產(chǎn)品界面中所有視覺設(shè)計(jì)的一致性。圖標(biāo)設(shè)計(jì)構(gòu)成通過形狀、邊框、顏色、圓角、大小、肌理等來延續(xù)傳達(dá)在界面的基調(diào)和品牌基因。

5）網(wǎng)格:網(wǎng)格系統(tǒng)目前比較成熟的設(shè)計(jì)布局工具，設(shè)計(jì)中使用一套規(guī)范的間距，來保持產(chǎn)品的一致性，網(wǎng)格間距以倍數(shù)方式，比如1X，2X，3X，4X。比如現(xiàn)需設(shè)計(jì)一個(gè)讓用戶感受到輕松愉悅的頁面，可以使用較大的柵格間距比例，以12為基準(zhǔn)，比如間距一律使用12,24,36,48。如果是信息較為緊密的，則可以使用8的倍數(shù)，如8,16,24,32等。不同的界面信息承載使用網(wǎng)格也不同，界面空間留白不同，界面風(fēng)格也會不同。比如：Airbnb界面邊距48px，整體產(chǎn)品調(diào)性簡約大氣；馬蜂窩的界面，側(cè)重于突出圖片，因此頁面內(nèi)容區(qū)域比例會比較大。

6）圖片比例:對于圖片比例，設(shè)計(jì)師有的往往憑感覺設(shè)定，但最好合理的使用圖片規(guī)范，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618這些比例經(jīng)過前輩驗(yàn)證也是做合適視覺尺寸。

| 界面呈現(xiàn)

由于界面和產(chǎn)品需求不可預(yù)期性，構(gòu)建設(shè)計(jì)語言無法100%的的滿足所有界面，根據(jù)界面最終呈現(xiàn)在不影響設(shè)計(jì)方向前提下，以及產(chǎn)品后期可迭代空間，可以進(jìn)行局部調(diào)整設(shè)計(jì)方案。