2025-3-31 杰睿
對于設計同學來說，很多基礎知識可能看起來很簡單，容易被忽視。但隨著設計經驗越來越多，更建議大家牢固系統地掌握這些基礎知識。在本篇文章中作者給大家系統性地講解了界面設計進階過程中需要搞懂的基本設計要素。一起來看吧。
當下大多數界面設計類軟件都是以矢量圖的方式工作。通過調整參數來定義圖形的大小，并且在不降低質量的情況下對圖形進行拉伸和放大。
在進行界面設計時，我們需要生成出各種尺寸的矩形、圓形等對象，規定這些對象的尺寸和樣式，并對這些對象進行移動，將它們放到合適的位置上。
很多基礎知識可能看起來很簡單，容易被忽視。但隨著設計經驗越來越多，更建議大家牢固系統地掌握這些基礎知識，厚積薄發才能越走越遠！
盒子模型是在設計和開發中定義數字接口最基本的方法。我們所做的大多數設計都是根據盒子模型進行，因此了解盒子模型對界面設計來說非常重要。
盒子模型由四個主要元素組成：
內容 (content)、內邊距(padding)、邊框(border)、外邊距(margin)。
內邊距(padding)是內容和邊框線之間的空間，如下圖灰色區域。內邊距的范圍越廣，內容的安全區域就越大。
外邊距(margin)是盒子與其他元素之間的空白區域，如下圖藍色區域。外邊距保證了盒子與盒子之間有足夠的間距。
寬度(width)和高度(height)是定義對象大小的參數。在二維空間上，寬度代表橫軸上的比例，高度代表縱軸上的比例。
一定比例的寬和高構成的矩形是容納對象的最小矩形框。如果對象本身是不規則的形狀，在設計時我們需要根據對象的尺寸制定一個規則的矩形框，方便交付開發。
角度定義了對象順時針旋轉的方向，默認為0°。另外旋轉也可以是負數，比如-15°旋轉與345°旋轉的角度是相同的。
如果我們想要一個統一的界面，最好不要手動旋轉對象，而是通過輸入度數來旋轉，這樣會比手動旋轉更精確。
旋轉對圓形來說是特殊的存在，因為一個圓形無論旋轉到哪個角度看都是一樣的。
邊框半徑數值越大，這個形狀的圓角度數就越大。例如一個矩形，既能一次性設置四個點的圓角半徑，也可以單獨設置某個點的圓角半徑。
正常來說，設置圓角的圖形看起來比直角圖形更友好。界面設計中，相同的圖形最好能保持一樣的的圓角度數，這樣界面看起來會更統一。
另外一個圖形是否需要圓角，要根據產品風格靈活選擇，確保與當前使用場景相匹配。例如某個產品的logo或主視覺使用了不同半徑的圓角，在界面中我們也可以使用不同半徑的圓角按鈕，保持風格統一。
一旦我們決定了用某種樣式的圓角按鈕，那么界面中的其他按鈕也應該保持一致。
填充是指對對象內容的操作，填充的可以是一種顏色，也可以是一張圖片。
針對不同對象，我們需要差異化定義每個對象的填充效果，保證這些對象簡單易懂，清晰可見。
在設計過程中，可以對同一個對象組合使用多種填充效果。例如一個正方形頭像，首先填充一張照片，在照片的基礎上再添加各種顏色效果，能讓頭像的設計與界面更匹配。
如果說填充強調對象內部，那么描邊就是對對象外部邊框的操作。
描邊分為內部邊框、居中邊框和外部邊框三種樣式，其中只有內部邊框不會在視覺上使對象變大。
例如下圖是一個60px大小的正方形，有2px的描邊。從左起分別是內邊框、居中邊框、外邊框的描邊效果。因為內邊框是在正方形內部描邊，所以視覺上看這個正方形仍是60px大小。
居中邊框是指正方形的外部和內部各占1px，那么采用居中邊框的正方形尺寸變成了62×62。
同理，外部邊框是指正方形的外部多了2px，采用外部邊框的正方形尺寸變成了64×64。
對于不同的對象，我們可以設定不同寬度的描邊，描邊的樣式可以是虛線、實線、純色、漸變色等多種樣式。
目前大多數設計軟件支持修改描邊的端點和節點。端點樣式包括方頭、平頭和圓頭，節點樣式包括斜接連接、圓角連接、斜角連接。
陰影是UI設計中最常用的效果，根據對象的X軸、Y軸的偏移程度、模糊程度、擴展程度、顏色和不透明度等屬性構成。
通過設置模糊能讓陰影的面積擴散擴得更大，顏色由深變淺。一般來說陰影的不透明度低于40%時，呈現的效果比較好。
當陰影的擴展程度為負數時，陰影看起來會更自然。對比上下兩個圖例也能看出來，擴展程度為負時陰影看起來更柔和。
使用陰影有助于劃分界面的層次結構！在設計中，讓陰影看起來自然柔和不生硬是界面美觀與否的關鍵因素之一。
首先要避免純黑色陰影，純黑對比太強會影響視覺效果，建議使用基礎色調派生的顏色作為陰影顏色。
例如基礎色是綠色，可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后，再給陰影足夠大的模糊數值，最終會得到了一個不錯的陰影效果。
顏色太深、太生硬的陰影和按鈕顏色對比太大，設計時應盡可能調整陰影的顏色、透明度等參數，避免生成這種效果；把黑色陰影調整成同色系的深色陰影，陰影的效果看起來就會更自然、更柔和；再把陰影的擴展程度調成負數，就能消除陰影的外展，讓陰影看起來更真實。
內陰影
內陰影在UI設計中相對少見，內陰影和上面所講的陰影有相同的參數設置，只不過內陰影是在圖形內部起效果。
內陰影無法像外陰影那樣展現圖層之間的深度和層級關系，只對圖形內部起作用。如果內陰影使用太多，可能會混淆圖層間的層級關系，讓界面關系看起來不明確。
高斯模糊是最常用的設計效果，呈現出從中心向四周均勻擴散的模糊效果。高斯模糊由半徑控制，半徑數值越大，模糊效果越明顯。
高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。
高斯模糊還可以作為陰影效果，放在對象下面使用。例如新建一個橢圓做成模糊效果，放在對象下面，就能快速呈現出一個帶有陰影的效果。
蘋果在操作系統中經常使用背景模糊，呈現出背景很模糊的玻璃效果。
背景模糊主要針對圖層覆蓋的內容起作用，比如新建一個矩形調整透明度，做成背景模糊效果，那么該圖層覆蓋的區域會變模糊，圖層沒有覆蓋的區域保持不變。
動感模糊由模糊數值和角度兩個參數控制，用來模擬對象在不同角度上的移動效果。
當對象由內到外變得模糊時，就會發生縮放模糊。這種模糊效果在界面設計中用得較少。
縮放模糊由模糊數值和原點兩個參數控制。在縮放模糊中可以隨機設置模糊原點，通過移動原點獲得一些有趣的圖形效果。
以上是界面設計進階過程中需要搞懂的基本設計要素，希望通過本次系統性的講解，能更進一步提升設計精細度！
專欄作家
作者：Clippp，每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan