一、UI界面中的視覺(jué)骨架

UI 界面的設(shè)計(jì)本質(zhì)上非常的簡(jiǎn)單，但是很多新手，以及工作了多年的設(shè)計(jì)師輸出的作品質(zhì)量都不盡如人意，做出來(lái)的作品效果看上去 "不高級(jí)"、"不精致"、"沒(méi)設(shè)計(jì)感"。

這種情況的核心原因往往不是配圖的問(wèn)題，也不是配色的問(wèn)題，更不是審美的問(wèn)題，僅僅是定義 UI 元素的尺寸、間距做的并不好。

比如我們看下面這些原型，僅僅是置入基本的元素和黑白灰，但看起來(lái)是精致的、和諧的、穩(wěn)定的。

這種感覺(jué)我們可以用 "規(guī)整" 來(lái)形容，即元素模塊合適的尺寸，擺在了合適的位置，在不討論交互、體驗(yàn)的基礎(chǔ)上，沒(méi)辦法挑出什么視覺(jué)的毛病。

這也是我在 UI 界面設(shè)計(jì)的學(xué)習(xí)中建議大家優(yōu)先掌握的技能，因?yàn)檫@種基礎(chǔ)的尺寸設(shè)置和間距控制就是界面的骨架，和人一樣，如果骨相不好，就算后再怎么玩穿搭和化妝也救不回來(lái)，往往還適得其反，讓畫(huà)面的效果變得更糟糕。

二、尺寸和間距的組合

回到我們關(guān)注的要點(diǎn)，尺寸和間距上，它們有什么特征和關(guān)聯(lián)。

尺寸就是元素在界面中占據(jù)的實(shí)際面積，它的長(zhǎng)和寬的數(shù)值大小。UI 的尺寸包含兩種模式，一種是固定尺寸，即長(zhǎng)寬的數(shù)值是固定的不會(huì)改變，另一種是自適應(yīng)尺寸，會(huì)根據(jù)內(nèi)容或外部環(huán)境調(diào)整尺寸。

先拋開(kāi)自適應(yīng)的類型，首先關(guān)注固定尺寸。固定尺寸的元素可以說(shuō)是我們一開(kāi)始學(xué)習(xí) UI 相關(guān)規(guī)范的關(guān)鍵內(nèi)容了，比如頂欄、底欄、按鈕、文字應(yīng)該設(shè)置多大的尺寸。

只有極少數(shù)的元素是有指定數(shù)值的，多數(shù)元素的尺寸都會(huì)有一個(gè)合理的設(shè)置區(qū)間，比如正文是 13-16 之間，關(guān)注按鈕的高度在 24-32 之間，超出了就會(huì)顯得奇怪，和界面格格不入。

而類似按鈕、輸入框這類包含多個(gè)元素的控件，使用固定數(shù)值來(lái)定義背景、邊框的話，那么內(nèi)部的元素就會(huì)根據(jù)背景進(jìn)行水平或垂直的居中，來(lái)確定它所在的位置。

這是個(gè)非常入門(mén)的概念，學(xué)設(shè)計(jì)的第一天應(yīng)該就能領(lǐng)略的知識(shí)。但真正的問(wèn)題在于，那些復(fù)雜的模塊、組件，也能用固定尺寸的模式創(chuàng)建背景，然后再用對(duì)齊來(lái)擺放里面的元素嗎？

這些組件類型五花八門(mén)，內(nèi)容各不相同，在設(shè)計(jì)前能給出準(zhǔn)確的數(shù)值，是不現(xiàn)實(shí)的。所以我們就會(huì)根據(jù)內(nèi)容來(lái)決定背景元素尺寸的大小，內(nèi)容越大，則背景越大。

比如一個(gè)通知彈窗，提示文字的字?jǐn)?shù)是不同的，有的一行有的兩行有的三行，如果直接設(shè)計(jì)一個(gè)固定高度的卡片那么就會(huì)按最大尺寸支持去設(shè)計(jì)，這樣看起來(lái)效果就不理想。而主流的做法，就是使用自適應(yīng)的高度的方法，讓卡片的高度跟隨內(nèi)容的高度做適配，不會(huì)產(chǎn)生過(guò)多不必要的留白。

而在這個(gè)模式下，還有個(gè)關(guān)鍵的因素，就是對(duì)內(nèi)間距的應(yīng)用。這里我們要強(qiáng)調(diào)，間距也包含兩種，一種是內(nèi)間距，一種外邊距，即 CSS 盒模型中的 padding 和 magrin 兩種屬性。內(nèi)間距的值是我們一開(kāi)始制定好的，而組件的自適應(yīng)尺寸，就是內(nèi)容+內(nèi)間距的和。

當(dāng)然，尺寸也可以通過(guò)外邊距來(lái)確定，比如任何 UI 界面都有對(duì)應(yīng)的畫(huà)布，如果我們不想做超出畫(huà)布的設(shè)計(jì)，那么設(shè)計(jì)一個(gè)組件卡片，它的尺寸就應(yīng)該是畫(huà)布尺寸 - 外邊距（也可以理解成是畫(huà)布的內(nèi)間距）。比如在一個(gè) B 端界面中，中間的卡片總寬度就是畫(huà)布寬 1440 - 20*2=1400，一個(gè) App 界面中的卡片寬就是 393-16*2 = 361。

外邊距也可以作為組件之間間距的應(yīng)用，比如在一個(gè)商品列表中，不同的商品卡片之間的距離同樣是外邊距的應(yīng)用。

所以進(jìn)一步總結(jié)，UI 頁(yè)面的"骨架"設(shè)計(jì)，就是尺寸和間距定義的過(guò)程，掌握它們的定義技巧，也就能輸出優(yōu)秀的界面骨架，為后續(xù)的視覺(jué)效果提供良好的基礎(chǔ)。

三、尺寸和間距的應(yīng)用過(guò)程

有了上面的認(rèn)識(shí)，我們就可以進(jìn)行實(shí)際案例的演示了，比如 C 端中的動(dòng)態(tài)卡片：

第一步：通過(guò)左右邊距確認(rèn)它的寬為 361，同時(shí)制定它的內(nèi)間距為 12，即卡片內(nèi)容區(qū)域?yàn)?361-12*2=337。

第二步：完成卡片內(nèi)容的設(shè)計(jì)，包含頂部用戶信息、中間寬為 337 的圖片、底部的圖標(biāo)。

第三步：完成卡片背景的高度設(shè)置，確保上下內(nèi)間距保持一致，然后復(fù)制出新的組件完成列表。

在這個(gè)設(shè)定中，同類、同級(jí)的間距是要具有一致性的，尤其是內(nèi)間距的應(yīng)用。比如上間距和左右間距不一致，看上去就會(huì)非常的不嚴(yán)謹(jǐn)、失衡，這是要第一個(gè)發(fā)現(xiàn)并解決的問(wèn)題。

而不使用這種邏輯完成的設(shè)計(jì)，先確定外部尺寸高再完成子元素的布局，就會(huì)出現(xiàn)強(qiáng)行擴(kuò)大或縮小內(nèi)部元素間距的 "補(bǔ)救措施"，是組件顯得凌亂沒(méi)有設(shè)計(jì)感的罪魁禍?zhǔn)住?/p>

所以總結(jié)一遍自適應(yīng)尺寸類型的組件設(shè)計(jì)流程：

1. 確定組件寬和高是固定還是自適應(yīng)
2. 確定組件的內(nèi)間距和外邊距大小
3. 完成組件內(nèi)部元素的設(shè)計(jì)和布局
4. 重新調(diào)整背景尺寸滿足內(nèi)容和間距的需要

我們熟悉的即時(shí)設(shè)計(jì)、Figma 等 UI 設(shè)計(jì)軟件中提供的自動(dòng)布局，就是基于它們的邏輯關(guān)系構(gòu)建出來(lái)的功能。想要真正用好自動(dòng)布局，并不是去學(xué)習(xí)它的功能和操作然后強(qiáng)行用到項(xiàng)目里去，而是先理解這些元素設(shè)計(jì)的邏輯，再借助自動(dòng)布局功能來(lái)提升效率，這有本質(zhì)的區(qū)別。

同時(shí)，這種制定尺寸和距離的使用邏輯，是需要通過(guò)刻意練習(xí)來(lái)掌握并提升。而最好的練習(xí)方法，就是畫(huà)原型的方法，不要被產(chǎn)品、體驗(yàn)、視覺(jué)上的問(wèn)題綁住手腳，就使用黑白灰和基本的文字、幾何元素來(lái)完成界面的骨架設(shè)計(jì)。

真正掌握這種能力以后，就會(huì)明白骨架的設(shè)計(jì)和視覺(jué)的設(shè)計(jì)是可以拆成兩部分完成的，而前半部分的設(shè)計(jì)成果同時(shí)可以作為產(chǎn)品原型、交互原型用，根本沒(méi)有額外占用多少時(shí)間，而評(píng)審可以提前就大大提高了整個(gè)項(xiàng)目的設(shè)計(jì)效率。

如果不知道怎么開(kāi)始練習(xí)，可以從自己以前的作品中找案例進(jìn)行修改，也可以從線上找案例做改版，方法多種多樣。而基于它對(duì)于 UI 設(shè)計(jì)的重要行，你需要練習(xí)到完全不需要通過(guò)思考就能憑借本能完成參數(shù)設(shè)置的水平。

先定個(gè)小目標(biāo)畫(huà)一百個(gè)界面……

結(jié)尾

在這么多期的教學(xué)中這個(gè)問(wèn)題非常的突出，所以我要單獨(dú)做一篇內(nèi)容進(jìn)行解釋。后面我會(huì)再拿一些案例來(lái)做實(shí)際的改版演示，移動(dòng)端和 PC 端的界面都會(huì)有，你們有自己當(dāng)前設(shè)計(jì)的不滿意的界面案例，也可以在社群中發(fā)給我作為改版對(duì)象。

以上就是今天的分享內(nèi)容。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭