哈嘍，這里是設(shè)計(jì)夾，今天為大家分享的是「界面設(shè)計(jì)要素」。

當(dāng)下大多數(shù)界面設(shè)計(jì)類軟件都是以矢量圖的方式工作。通過(guò)調(diào)整參數(shù)來(lái)定義圖形的大小，并且在不降低質(zhì)量的情況下對(duì)圖形進(jìn)行拉伸和放大。

在進(jìn)行界面設(shè)計(jì)時(shí)，我們需要生成出各種尺寸的矩形、圓形等對(duì)象，規(guī)定這些對(duì)象的尺寸和樣式，并對(duì)這些對(duì)象進(jìn)行移動(dòng)，將它們放到合適的位置上。

很多基礎(chǔ)知識(shí)可能看起來(lái)很簡(jiǎn)單，容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來(lái)越多，更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)，厚積薄發(fā)才能越走越遠(yuǎn)！

一、盒子模型

我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型進(jìn)行，因此了解盒子模型對(duì)界面設(shè)計(jì)來(lái)說(shuō)非常重要。

盒子模型由四個(gè)主要元素組成：

內(nèi)容 （content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）。

內(nèi)邊距（padding）是內(nèi)容和邊框線之間的空間，如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣，內(nèi)容的安全區(qū)域就越大。

外邊距（margin）是盒子與其他元素之間的空白區(qū)域，如下圖藍(lán)色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。

二、尺寸

寬度（width）和高度（height）是定義對(duì)象大小的參數(shù)。在二維空間上，寬度代表橫軸上的比例，高度代表縱軸上的比例。

一定比例的寬和高構(gòu)成的矩形是容納對(duì)象的最小矩形框。如果對(duì)象本身是不規(guī)則的形狀，在設(shè)計(jì)時(shí)我們需要根據(jù)對(duì)象的尺寸制定一個(gè)規(guī)則的矩形框，方便交付開發(fā)。

三、角度

角度定義了對(duì)象順時(shí)針旋轉(zhuǎn)的方向，默認(rèn)為 0°。另外旋轉(zhuǎn)也可以是負(fù)數(shù)，比如-15°旋轉(zhuǎn)與 345°旋轉(zhuǎn)的角度是相同的。

如果我們想要一個(gè)統(tǒng)一的界面，最好不要手動(dòng)旋轉(zhuǎn)對(duì)象，而是通過(guò)輸入度數(shù)來(lái)旋轉(zhuǎn)，這樣會(huì)比手動(dòng)旋轉(zhuǎn)更精確。

旋轉(zhuǎn)對(duì)圓形來(lái)說(shuō)是特殊的存在，因?yàn)橐粋€(gè)圓形無(wú)論旋轉(zhuǎn)到哪個(gè)角度看都是一樣的。

四、圓角半徑

邊框半徑數(shù)值越大，這個(gè)形狀的圓角度數(shù)就越大。例如一個(gè)矩形，既能一次性設(shè)置四個(gè)點(diǎn)的圓角半徑，也可以單獨(dú)設(shè)置某個(gè)點(diǎn)的圓角半徑。

正常來(lái)說(shuō)，設(shè)置圓角的圖形看起來(lái)比直角圖形更友好。界面設(shè)計(jì)中，相同的圖形最好能保持一樣的的圓角度數(shù)，這樣界面看起來(lái)會(huì)更統(tǒng)一。

另外一個(gè)圖形是否需要圓角，要根據(jù)產(chǎn)品風(fēng)格靈活選擇，確保與當(dāng)前使用場(chǎng)景相匹配。例如某個(gè)產(chǎn)品的 logo 或主視覺使用了不同半徑的圓角，在界面中我們也可以使用不同半徑的圓角按鈕，保持風(fēng)格統(tǒng)一。

一旦我們決定了用某種樣式的圓角按鈕，那么界面中的其他按鈕也應(yīng)該保持一致。

五、填充

填充是指對(duì)對(duì)象內(nèi)容的操作，填充的可以是一種顏色，也可以是一張圖片。

針對(duì)不同對(duì)象，我們需要差異化定義每個(gè)對(duì)象的填充效果，保證這些對(duì)象簡(jiǎn)單易懂，清晰可見。

在設(shè)計(jì)過(guò)程中，可以對(duì)同一個(gè)對(duì)象組合使用多種填充效果。例如一個(gè)正方形頭像，首先填充一張照片，在照片的基礎(chǔ)上再添加各種顏色效果，能讓頭像的設(shè)計(jì)與界面更匹配。

六、描邊

如果說(shuō)填充強(qiáng)調(diào)對(duì)象內(nèi)部，那么描邊就是對(duì)對(duì)象外部邊框的操作。

描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式，其中只有內(nèi)部邊框不會(huì)在視覺上使對(duì)象變大。

例如下圖是一個(gè) 60px 大小的正方形，有 2px 的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因?yàn)閮?nèi)邊框是在正方形內(nèi)部描邊，所以視覺上看這個(gè)正方形仍是 60px 大小。

居中邊框是指正方形的外部和內(nèi)部各占 1px，那么采用居中邊框的正方形尺寸變成了 62x62。

同理，外部邊框是指正方形的外部多了 2px，采用外部邊框的正方形尺寸變成了 64x64。

對(duì)于不同的對(duì)象，我們可以設(shè)定不同寬度的描邊，描邊的樣式可以是虛線、實(shí)線、純色、漸變色等多種樣式。

目前大多數(shù)設(shè)計(jì)軟件支持修改描邊的端點(diǎn)和節(jié)點(diǎn)。端點(diǎn)樣式包括方頭、平頭和圓頭，節(jié)點(diǎn)樣式包括斜接連接、圓角連接、斜角連接。

七、陰影

陰影是 UI 設(shè)計(jì)中最常用的效果，根據(jù)對(duì)象的 X 軸、Y 軸的偏移程度、模糊程度、擴(kuò)展程度、顏色和不透明度等屬性構(gòu)成。

通過(guò)設(shè)置模糊能讓陰影的面積擴(kuò)散擴(kuò)得更大，顏色由深變淺。一般來(lái)說(shuō)陰影的不透明度低于 40%時(shí)，呈現(xiàn)的效果比較好。

當(dāng)陰影的擴(kuò)展程度為負(fù)數(shù)時(shí)，陰影看起來(lái)會(huì)更自然。對(duì)比上下兩個(gè)圖例也能看出來(lái)，擴(kuò)展程度為負(fù)時(shí)陰影看起來(lái)更柔和。

使用陰影有助于劃分界面的層次結(jié)構(gòu)，在設(shè)計(jì)中，讓陰影看起來(lái)自然柔和不生硬是界面美觀與否的關(guān)鍵因素之一。

首先要避免純黑色陰影，純黑對(duì)比太強(qiáng)會(huì)影響視覺效果，建議使用基礎(chǔ)色調(diào)派生的顏色作為陰影顏色。

例如基礎(chǔ)色是綠色，可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后，再給陰影足夠大的模糊數(shù)值，最終會(huì)得到了一個(gè)不錯(cuò)的陰影效果。

顏色太深、太生硬的陰影和按鈕顏色對(duì)比太大，設(shè)計(jì)時(shí)應(yīng)盡可能調(diào)整陰影的顏色、透明度等參數(shù)，避免生成這種效果；把黑色陰影調(diào)整成同色系的深色陰影，陰影的效果看起來(lái)就會(huì)更自然、更柔和；再把陰影的擴(kuò)展程度調(diào)成負(fù)數(shù)，就能消除陰影的外展，讓陰影看起來(lái)更真實(shí)。

1. 內(nèi)陰影

內(nèi)陰影在 UI 設(shè)計(jì)中相對(duì)少見，內(nèi)陰影和上面所講的陰影有相同的參數(shù)設(shè)置，只不過(guò)內(nèi)陰影是在圖形內(nèi)部起效果。

內(nèi)陰影無(wú)法像外陰影那樣展現(xiàn)圖層之間的深度和層級(jí)關(guān)系，只對(duì)圖形內(nèi)部起作用。如果內(nèi)陰影使用太多，可能會(huì)混淆圖層間的層級(jí)關(guān)系，讓界面關(guān)系看起來(lái)不明確。

八、模糊

1. 高斯模糊

高斯模糊是最常用的設(shè)計(jì)效果，呈現(xiàn)出從中心向四周均勻擴(kuò)散的模糊效果。高斯模糊由半徑控制，半徑數(shù)值越大，模糊效果越明顯。

高斯模糊常用在界面之間的過(guò)渡或者用來(lái)模糊背景突出景深效果。

高斯模糊還可以作為陰影效果，放在對(duì)象下面使用。例如新建一個(gè)橢圓做成模糊效果，放在對(duì)象下面，就能快速呈現(xiàn)出一個(gè)帶有陰影的效果。

2. 背景模糊

蘋果在操作系統(tǒng)中經(jīng)常使用背景模糊，呈現(xiàn)出背景很模糊的玻璃效果。

背景模糊主要針對(duì)圖層覆蓋的內(nèi)容起作用，比如新建一個(gè)矩形調(diào)整透明度，做成背景模糊效果，那么該圖層覆蓋的區(qū)域會(huì)變模糊，圖層沒有覆蓋的區(qū)域保持不變。

3. 動(dòng)感模糊

動(dòng)感模糊由模糊數(shù)值和角度兩個(gè)參數(shù)控制，用來(lái)模擬對(duì)象在不同角度上的移動(dòng)效果。

4. 縮放模糊

當(dāng)對(duì)象由內(nèi)到外變得模糊時(shí)，就會(huì)發(fā)生縮放模糊。這種模糊效果在界面設(shè)計(jì)中用得較少。

縮放模糊由模糊數(shù)值和原點(diǎn)兩個(gè)參數(shù)控制。在縮放模糊中可以隨機(jī)設(shè)置模糊原點(diǎn)，通過(guò)移動(dòng)原點(diǎn)獲得一些有趣的圖形效果。

最后

以上是界面設(shè)計(jì)進(jìn)階過(guò)程中需要搞懂的基本設(shè)計(jì)要素，希望通過(guò)本次系統(tǒng)性的講解，能更進(jìn)一步提升設(shè)計(jì)精細(xì)度！

作者：Clip設(shè)計(jì)夾