前言

隨著視覺設(shè)計的行業(yè)演變，越來越多的人從事起UI設(shè)計，視覺設(shè)計，品牌設(shè)計的工作。在這背后，又是哪些設(shè)計原則啟發(fā)我們作出【更好】的設(shè)計，結(jié)合我的學習與探索，整理視覺構(gòu)成四要素系列。從布局，字體，色彩，圖形四大方面為大家解讀是哪些原則影響著用戶對我們設(shè)計的判斷，又是哪些因素改變了體驗的感受。

在正文開始之前，向Material Design，Atlassian , Ant Design,Teambition的設(shè)計團隊致敬，踩在巨人的肩膀上讓我們探索真理的路途更近。

*本文內(nèi)容3959字，將介紹布局和字體兩部分內(nèi)容。文中部分圖片源自網(wǎng)絡(luò)，個人觀點，如有偏頗，歡迎指正。

布局 Layout

界面中空間的應(yīng)用傳遞給用戶不同的心理感受，這里空間應(yīng)用即是我們所說的布局。精巧的布局能力是平面設(shè)計在書籍裝幀時代的基礎(chǔ)，它能給用戶傳達出來一種高級感與信任感，讓用戶感受到不知道為什么好但就是很好的感受，比如我們常聞其名的《設(shè)計中的設(shè)計》就傳遞著日式設(shè)計一貫的簡約與節(jié)奏感。這就是布局所影響的設(shè)計體驗。

 

布局知識中，包含如下幾個部分：

 

1.柵格：通過分列將頁面劃分為相同寬度的N列，并設(shè)定裝訂線，使頁面風格統(tǒng)一工整。根據(jù)不同的屏幕尺寸情況，調(diào)整欄的寬度等比例變化來實現(xiàn)響應(yīng)式的布局。

2.間距：頁面內(nèi)柵格間、模塊間、模塊內(nèi)的各內(nèi)容的距離

3.版面率：頁面中內(nèi)容所占頁面的比例，即頁面的利用率，不同的版面率反應(yīng)出不同的視覺情緒。

 

柵格

建立柵格系統(tǒng)

柵格系統(tǒng)由三個元素組成：列，裝訂線和邊距

1.列Columns 2.裝訂線Gutters 3.邊距Margins （圖片內(nèi)容源自Google Material Design）

 

柵格自書籍裝幀設(shè)計出現(xiàn)就廣泛的被設(shè)計師所應(yīng)用，設(shè)計師將先設(shè)置出血將版面劃分為版心與留白，再將版心劃分為N列，每一列之間通過裝訂線寬度劃分列間距，就將版面劃分成了結(jié)構(gòu)性和連貫性的一個個面。柵格體系的建立，便于設(shè)定模塊的大小，且使模塊之間具有連貫性，使內(nèi)容更具有節(jié)奏感從而提升用戶的閱讀效率。

柵格還有助于進行跨平臺和分辨率的響應(yīng)式設(shè)計，通過對列間距的變化，或?qū)α信c列間距的等比例縮放來實現(xiàn)在不同分辨率下的統(tǒng)一視覺效果（這種系統(tǒng)被稱為流式柵格系統(tǒng)）。

 

較為重要的一點，無論是怎樣的柵格體系，一定是從列開始，到列結(jié)束，并且在絕大多數(shù)情況下，柵格體系中一定要設(shè)置邊距padding，來讓版面集中。

 

流式柵格系統(tǒng)

圖例為Atlassian的流式柵格布局方法

 

1.全局導航：最小寬度為60px。

2.功能性導航：最小寬度為240px。

3.內(nèi)容區(qū)域：自適應(yīng)寬度

4.裝訂線：固定列之間的間距。

5.列：內(nèi)容對齊的依據(jù)。

 

流式柵格指在不同的分辨率下，列數(shù)恒定，列寬和列間距自適應(yīng)改變的柵格體系，舉例說明：

常見的laptop設(shè)備寬度分辨率為1240px，我們設(shè)此時的內(nèi)容區(qū)域?qū)挾葹?136px，分12列，此時列寬設(shè)為80px，裝訂線寬度為16px，邊距為52px。

當分辨率縮小時，邊距不隨之縮小，內(nèi)容區(qū)域自適應(yīng)變化，則當分辨率為956px時，內(nèi)容區(qū)域的寬度為852px，列寬為60px，裝訂線寬度為12px。

需要注意的是，設(shè)計流式柵格布局時，需要設(shè)置斷點，若裝訂線寬度小于一個特定值，則會導致內(nèi)容容器之間形成粘連，無法有效的進行閱讀和使用。

 

文本內(nèi)容布局

中文閱讀效率最高每行為42個漢字，以42加減12來得到最大值和最小值。如果正文字號為14px，則文本跨越8列為文本內(nèi)容的最大寬度；文本跨越4列為文本內(nèi)容的最小寬度。

間距

遞進式間距組合

在Material Design中，所有間距規(guī)則都是在8的倍數(shù)上進行變化，而且并不是毫無頭緒的遞進，只定義了幾種增量關(guān)系，克制的有序的間距彈性，基礎(chǔ)單位是8，演變出16，24，32，48，56，72。從而我們可以得到這個遞進式間距數(shù)列為1,2,3,4,6,7,9，是結(jié)合用戶研究經(jīng)驗得出的一組間距。

 

同時我們在這里介紹幾種間距組合的定義方法，分別是應(yīng)用等差、等比、斐波那契數(shù)列作為變換規(guī)則，設(shè)定4/8px為恒定基礎(chǔ)單位（因為正文為14px的英文x-height為8px）得出的不同間距組合。如下圖，以8px為基礎(chǔ)單位的遞進式間距組合。

從圖中的間距模塊變化曲線我們可以發(fā)現(xiàn)等差數(shù)列的變化曲線較陡，各個間距之間接近，難以區(qū)分內(nèi)容之間的關(guān)聯(lián)性，在實際應(yīng)用時難以確定什么時候用24什么時候用32。

而等比數(shù)列遞增過快，第五和第六間距異變過多難以應(yīng)用；相比之下，接近黃金比例變化的斐波那契數(shù)列變化具有節(jié)奏性，更容易劃分出邊距margins和間距padding之間的大小關(guān)系，快速建立內(nèi)容優(yōu)先級。

Keylines的設(shè)立 

Keylines可以在布局柵格外部一致地放置元素。在垂直方向貫通，內(nèi)容元素與keylines統(tǒng)一對其。Keylines由內(nèi)容元素與屏幕邊緣的距離決定，以8dp為增量進行變化。 

1.布局柵格2.keylines

內(nèi)容間距Padding

內(nèi)容間距padding是指內(nèi)容元素之間的空間。內(nèi)容元素在模塊內(nèi)可在布局柵格外進行對齊，以8dp或4dp的增量變化。

（圖例，teambition的clarity design設(shè)計語言中的組件內(nèi)容間距，其中1qu=4px） 

版面率

頁面中內(nèi)容所占頁面的比例，即頁面的利用率。不同的版面率反應(yīng)出不同的視覺情緒， 

高版面率的頁面活潑熱鬧，低版面率的頁面則顯得安靜優(yōu)雅。

字體 Typography

字體是體驗設(shè)計體系化的最基本元素之一，不同的字體系統(tǒng)代表了不同的產(chǎn)品性格，傳達給用戶不同的情緒從而達成不同的商業(yè)目標。科學的字體系統(tǒng)能大幅提高用戶的閱讀體驗和認知效率，從而提升用戶的愉悅度。

結(jié)合時下主流的設(shè)計語言，關(guān)于字體的知識主要包含如下幾個部分：

1.字體家族：某一標準字的體系，具體會有襯線，非襯線，等寬，非等寬的區(qū)別

2.字階與行高：字階是字體的遞增組合，行高可以通俗理解為段落中行與行的間距

3.字重：字體的粗細程度，通常會選用Regualr,Medium和SemiBold

4.字間距：字符與字符之間的距離，會影響內(nèi)容的識別性和閱讀的效率

5.字體顏色：字體的顏色，會影響內(nèi)容的可視性和閱讀的效率

 

字體家族

簡介

某一標準字體系，如“微軟雅黑”被稱為一個字體家族。優(yōu)秀的字體系統(tǒng)

首先是要選擇合適的字體家族。選擇與當前平臺最為匹配的字體，使不同平臺以及瀏覽器的顯示下，字體盡可能清晰有效地展示設(shè)計和內(nèi)容，給予用戶友好穩(wěn)定的使用體驗。

 幾個常見平臺的默認字體家族如下：

1.mac OS & ios 中文：蘋方 英文：San Francisco

2.Chrome & Andriod 中文：思源黑體 英文：Roboto

3.windows 中文：微軟雅黑  英文：Segoe UI

 

同時為了保證字體穩(wěn)定的顯示，預防某些字符在默認字體家族中不存在的情況，還會設(shè)置備用字體，如在iOS平臺下，Helvetica Neue被用做備用字體。

 

等寬字體

指字符寬度相同的電腦字體。東亞語言中，方塊字基本上都作為等寬字體處理，如各個地區(qū)的漢字、日語假名的全形字符、韓語諺文音節(jié)等字符都是等寬的。而字母，數(shù)字，符號在大多數(shù)字體家族中是比例字體。

 有一些特殊情況時，設(shè)計師需要將字母或者數(shù)字也處理成等寬的，如在某些表格文檔產(chǎn)品中，數(shù)字需要進行縱向比對，我們可以將其聲明為Mono（等寬）字體，還有一些字體家族本來就是等寬的，如Tahoma。

圖例，數(shù)字123與234在等寬字體Tahoma中能邊緣對齊，而在非等寬字體Helvetica中則不能。等寬字體在縱向的數(shù)字列中不會產(chǎn)生錯落感。

字階與行高

字階和行高，可以影響一套字體系統(tǒng)的節(jié)奏與秩序之美。字階是指一系列有規(guī)律的字號的遞增組合。行高Lineheight可以通俗理解為段落中行與行的間距。

為了使字階符合自然韻律變化，結(jié)合斐波那契數(shù)列，我們得出以下一組字號與行高的組合。

具體的定義方法為設(shè)定主字號為14px，根據(jù)斐波數(shù)列乘二來變化，得到12，16，20，

26，36，52，78為字號。行高的計算則為n+6+4。

(計算方法根據(jù)英文字符 Line Height=2Fontsize-xHeight+Baseline)

 當我們正文字號為14時，建議使用24的行高。在一個系統(tǒng)設(shè)計中（展示型頁面除外），字階的選擇盡量控制在 3-5 種之間，保持克制的原則。

字重

字重的選擇同樣為了創(chuàng)建字體系統(tǒng)的節(jié)奏與秩序感。在系統(tǒng)性設(shè)計中，主要出現(xiàn)的字重分別為Regular和Medium，分別對應(yīng)代碼中的400和500。在英文字體加粗和部分特別強調(diào)標題的情況下會采用 Semibold 的字體重量，對應(yīng)代碼中的600。

字間距

字母間距，也稱為tracking，是指對一段文字中字母間的空間進行統(tǒng)一調(diào)整。

 字號較大時（例如標題）使用更緊密的字母間距來提高可讀性并減少字符之間的空間。 

字號較小時，較寬的字間距可以提高可讀性，因為字符之間的更多空間增加了每個字母形狀之間的對比度。

 

字體顏色

文本顏色如果和背景顏色太接近就會難以閱讀。為了文本清晰可讀，準確的傳達我們的設(shè)計目標，我們需要將文本，標題與背景色區(qū)分開來，Web內(nèi)容可訪問性指南（WCAG 2.0）級別AA要求正常文本的文本和背景之間的顏色對比度為4.5.1，大文本為3：1。

 

 

如下圖例，AntDesign參考 WCAG 的標準，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA級對比度。

不要在彩色背景上使用灰色的文本和圖標，而應(yīng)該通過降低的白色或黑色文本圖標的不透明度，來創(chuàng)建更好的對比度。

例如，在玫紅色背景上以85％不透明度顯示的黑色文本使文本呈現(xiàn)黑色外觀，具有玫紅色的色彩傾向。

* 或也可以根據(jù)色彩章節(jié)中的色階來選擇對比度足夠的同類顏色，但這種方法的問題是當背景色色相發(fā)生變更時還需要重新計算文本色值。

圖例，在彩色表面上使用具有透明度的黑色使文本具有清晰可讀的對比度。

上半部分完，接下來我們會繼續(xù)學習色彩與圖形的知識，共同在設(shè)計之路上前行。