作為一名專業(yè)的 UI 設(shè)計(jì)師，難免會(huì)有一點(diǎn)強(qiáng)迫癥，時(shí)常因無(wú)法平均的像素而苦惱，恨不得所有的元素都達(dá)到完美統(tǒng)一。
本文由矢量人生出品，轉(zhuǎn)載請(qǐng)注明原作者，侵權(quán)必究。
設(shè)計(jì)細(xì)節(jié)的重要性在這里就不多闡述了，有大量文章說(shuō)明了這個(gè)問(wèn)題。此文主要針對(duì) UI 設(shè)計(jì)中經(jīng)常出現(xiàn)的細(xì)節(jié)情形，主要分享以下 6 點(diǎn)：
- 給元素添加方形容器
- 盡可能還原真實(shí)場(chǎng)景
- 以實(shí)際效果為準(zhǔn)
- 1PX 的臨近平均原則
- 對(duì)齊與分布
- 圖層管理
每一個(gè)界面設(shè)計(jì)都是由文字、圖片、線條、圖標(biāo)等組成，我們稱這些為元素。很多元素本身的尺寸大小是不規(guī)則的，例如一個(gè)透明背景的 icon，它的像素有效區(qū)是 38×22，切圖時(shí)四周要留有空隙，導(dǎo)出的大小可以是 48×48。因此，在這個(gè) icon 底部增加一個(gè)導(dǎo)出大小的方形容器（前端定義 block）很有必要。給文字增加容器同樣重要，尤其是標(biāo)題性文字。我們之所以這樣做，是為了讓每個(gè)元素之間的位置相對(duì)固定并具有標(biāo)準(zhǔn)的參考，從而使開(kāi)發(fā)能更好地還原效果。
Sketch 可以直接設(shè)置文字長(zhǎng)度來(lái)固定尺寸從而充當(dāng)容器
設(shè)計(jì)界面要盡可能還原真實(shí)場(chǎng)景，其中包括但不限于文字、圖、字節(jié)數(shù)等。
當(dāng)字節(jié)不固定時(shí)，設(shè)計(jì)固定的區(qū)域，當(dāng)字節(jié)超出此區(qū)域時(shí)，通常有三種解決方式：
- 設(shè)置最長(zhǎng)不超過(guò)固定區(qū)域的字節(jié)，這種方式最簡(jiǎn)單但有些粗暴。
- 用 “...” 表示超出固定區(qū)域的字節(jié)。
- 在字節(jié)尾處添加一個(gè)漸隱蒙版，這種方式也適用于其他元素的設(shè)計(jì)，比如 tab 的滑動(dòng)菜單、內(nèi)容的更多顯示。
除了第一種已經(jīng)在頁(yè)面完整顯示了所有的文字，其他兩種的更多文字是隱藏的，因此鼠標(biāo)經(jīng)過(guò)的時(shí)候可以設(shè)計(jì)一個(gè) tips 窗顯示所有的文字。還有些特殊情況下還可以使用走馬燈的形式顯示剩余字節(jié)。
多行文字并不適用走馬燈形式
靜態(tài)的模塊在文字描述上可以主觀上進(jìn)行控制，使得每個(gè)模塊都相對(duì)統(tǒng)一。然而有些文字是動(dòng)態(tài)數(shù)據(jù)，不能很好地控制文字的字節(jié)長(zhǎng)度，甚至?xí)霈F(xiàn)有的模塊有字節(jié)，有的模塊沒(méi)有字節(jié)。在這種情況，就要思考為空字節(jié)的情況加上固定的字節(jié)，還是讓其空置，這取決于產(chǎn)品需求和使用場(chǎng)景。
我們時(shí)常會(huì)遇到這種情況，例如畫一個(gè)按鈕，里面有文字，一般來(lái)說(shuō)文字都是水平垂直居中對(duì)齊這個(gè)按鈕，于是我們會(huì)使用對(duì)齊工具。然而有時(shí)從效果上看，文字并沒(méi)有垂直居中對(duì)齊，那是因?yàn)槲淖衷谖幢晦D(zhuǎn)曲或者刪格化時(shí)，它的字體存在間隙。但總不能為了對(duì)齊就把文字柵格 / 轉(zhuǎn)曲，因此還需要用移動(dòng)工具去調(diào)整位置。
工具始終是工具，UI 界面設(shè)計(jì)更遵從的是視覺(jué)效果，要以實(shí)際效果為準(zhǔn)。
作為一名專業(yè)的 UI 設(shè)計(jì)師，難免會(huì)有一些強(qiáng)迫癥，恨不得所有的元素都達(dá)到完美的統(tǒng)一，于是會(huì)特別在意細(xì)節(jié)問(wèn)題。專業(yè)的前端觀察力也是很強(qiáng)的，他們也會(huì)盡可能地去還原設(shè)計(jì)圖，但很多情況下他們可能無(wú)視你在乎的那些細(xì)節(jié)，這時(shí)你應(yīng)該有方法使得他們按照描述 / 標(biāo)注去做好細(xì)節(jié)問(wèn)題。
元素的尺寸在很多情況下是無(wú)法平均分配的，就算使用百分比，也有除不盡的情況。例如在兩個(gè)模塊之間添加一條 1px 的橫線，又或者在 1000px 寬度設(shè)計(jì)三個(gè)模塊等等。因?yàn)橄袼氐囊苿?dòng)無(wú)法允許小數(shù)，為了盡量地減少誤差，我們將其分成 334、333、333，我們稱之為誤差為 1px 的臨近平均原則，任何情況下我們都應(yīng)遵守這個(gè)原則。
界面布局時(shí)經(jīng)常遇到這種情況：如果想要模塊的尺寸統(tǒng)一，那么間距就無(wú)法統(tǒng)一；如果想要間距統(tǒng)一，那么模塊的尺寸就無(wú)法統(tǒng)一。為了界面的適配性，間距統(tǒng)一才是優(yōu)先考慮的。正因?yàn)槿绱耍械脑O(shè)計(jì)師就會(huì)使用調(diào)整的分布工具，然而固定的寬度大部分情況下都無(wú)法平均分布，使得間距并沒(méi)有統(tǒng)一。因此界面布局使用分布工具并不能達(dá)到預(yù)期的效果，不符合我們死摳細(xì)節(jié)的態(tài)度，于是心里開(kāi)始不平衡，強(qiáng)迫采取更完美的方式。
有的九宮格布局沒(méi)有明顯的間距，通常會(huì)用 1px 的線條隔開(kāi)。以寬度 750px 為例，如何設(shè)計(jì)模塊之間的間隔線并遵守 1px 的臨近平均原則？方法很簡(jiǎn)單，先畫 250px 寬度的模塊，然后畫一條 1px 的豎線左對(duì)齊模塊，再畫一條 1px 的橫線底對(duì)齊模塊，即它的左內(nèi)邊框和底內(nèi)邊框。
然后將其整體復(fù)制并調(diào)整位置（如果模塊尺寸不統(tǒng)一則需要手動(dòng)調(diào)整其中模塊的大小，如 1000 分成 334、333、333），為了提高效率，做好一個(gè)完整的模塊再進(jìn)行復(fù)制。最后將貼邊的線條隱藏。不要?jiǎng)h除多余的線條，防止后續(xù)可能會(huì)出現(xiàn)模塊數(shù)量的變更。
這種方式同樣適用于 2px 甚至更粗的間隔線，但并不是在一個(gè)模塊上畫更粗的內(nèi)邊框，而是將分割線平均分配在臨近的模塊上。為了方便預(yù)覽，將其放大并用顏色區(qū)分，如 2px 的間隔線平均分配 1px 在兩個(gè)模塊上。
這種方法不單適用在九宮格布局設(shè)計(jì)，也適用在其它需要用到間隔線的地方，比如列表。假設(shè)每一列的高度是 100px，用 1px 的間隔線將其隔開(kāi)，按照上面的方法，1px 的間隔線屬于元素的底邊框（border-bottom），因此整體高度是 400px 而不是 400px+3px。
特別提示：不要因間隔線使得原本尺寸額外增加，如果模塊已經(jīng)有固定尺寸，那間隔線必須是在這固定尺寸的范圍內(nèi)。
有時(shí)候間隔線實(shí)在令人苦惱，如上圖中，加了一條橫線以后，程序會(huì)誤判斷 icon 與底部的間距比上面的間距 - 1px，因?yàn)樗某霈F(xiàn)經(jīng)常被迫允許出現(xiàn)誤差。我們只需記住這一點(diǎn)，設(shè)計(jì)圖的間隔線不是 line，而是模塊的 border（前端未必會(huì)用 border 的形式去實(shí)現(xiàn)），細(xì)微的誤差是無(wú)法避免的。
在設(shè)計(jì)一個(gè)按鈕時(shí)，經(jīng)常會(huì)在旁邊增加一個(gè)圖標(biāo) / 元素，原本垂直水平居中對(duì)齊的文字，因增加圖標(biāo)后不得不作調(diào)整，將其群組并水平居中對(duì)齊。但也有例外，增加的元素不是固定元素，比如新消息提醒、新功能提示，我們將其稱為懸浮元素。
即使我們做的設(shè)計(jì)圖已經(jīng)達(dá)到預(yù)期效果，但是文字的對(duì)齊方式還是要取決于文字原本的對(duì)齊方式。如一個(gè)按鈕中的文字是居中對(duì)齊，那么就選擇居中對(duì)齊的方式，而不要選擇其他方式的對(duì)齊然后調(diào)整為居中對(duì)齊，這樣做的目的是當(dāng)你更改文字的字節(jié)時(shí)，就不需要再去調(diào)整它了。
在設(shè)計(jì)一個(gè)水平的導(dǎo)航菜單時(shí)，若導(dǎo)航的字節(jié)沒(méi)有統(tǒng)一，而每一個(gè)導(dǎo)航菜單的寬度是固定的，這種情況采用對(duì)齊的方式，也就是里面的文字居中對(duì)齊菜單的寬度。
另一種采用分布的方式，使得菜單的間距相對(duì)統(tǒng)一，這種方式經(jīng)常用于列表設(shè)計(jì)（文章《網(wǎng)頁(yè)后臺(tái)設(shè)計(jì)》有詳細(xì)講解）。
采用何種方式取決于設(shè)計(jì)方式及需求
同類元素 / 模塊使用調(diào)整工具使其對(duì)齊或者平均分布能讓畫面看起來(lái)很協(xié)調(diào)，但這仍然不夠。對(duì)界面進(jìn)行布局分析，模塊里面的元素水平居中對(duì)齊，假設(shè)貼邊模塊里面的元素距離邊為 1A，那么模塊與模塊之間的距離即為 2A。這樣的設(shè)計(jì)并沒(méi)有犯邏輯錯(cuò)誤，但是如果每個(gè)模塊的背景顏色一樣，整體視覺(jué)卻無(wú)法達(dá)到視覺(jué)平衡。因此，我們可以給整個(gè)模塊添加一個(gè) “內(nèi)邊距”，即給貼邊的兩個(gè)模塊一定的寬度。
與原來(lái)的對(duì)比，增加內(nèi)邊距后達(dá)到了視覺(jué)平衡，畫面比之前更加協(xié)調(diào)。
事實(shí)上兩邊的模塊尺寸并沒(méi)有偏大，每個(gè)模塊的尺寸始終保持 1px 的臨近平均原則，多出來(lái)的部分只是整體模塊的內(nèi)邊距而已。如果你沒(méi)有描述清楚，那前端可能誤認(rèn)為是旁邊的模塊尺寸偏大，那他們必定會(huì)吐槽了。
支付寶首頁(yè)的功能按鈕也采用了這種設(shè)計(jì)方式，你可以打開(kāi)支付寶首頁(yè)測(cè)試一下，長(zhǎng)按最后一排的按鈕不放，可以看到點(diǎn)擊的熱區(qū)下面仍然有間距。
我們可以用肉眼來(lái)判斷是否需要添加邊距，設(shè)計(jì)應(yīng)該具備靈活性，以實(shí)際效果為準(zhǔn)。
已經(jīng)有諸多文章表明這一問(wèn)題的重要性，沒(méi)有良好的圖層管理習(xí)慣，直接影響了與你對(duì)接的成員甚至整個(gè)團(tuán)隊(duì)。如果你接手的文件，圖層沒(méi)有分組，大模塊隨便命名，圖層的順序也很亂，那你要對(duì)著這個(gè)文件去做調(diào)整 / 優(yōu)化是非常煩躁的，原本以為做好的設(shè)計(jì)只是修改應(yīng)該很快可以完成，但實(shí)際上花的時(shí)間更多，甚至不如新建畫布重新設(shè)計(jì)。
正如開(kāi)發(fā)也有代碼規(guī)范，盡量用簡(jiǎn)潔的代碼去實(shí)現(xiàn)可行的功能，維護(hù)起來(lái)才更有效率。對(duì)于設(shè)計(jì)，能用一個(gè)圖層解決的問(wèn)題就不要有第二個(gè)圖層，前提是要方便后續(xù)的更新和維護(hù)，例如用 PS 畫 icon 時(shí)，很多形狀工具完全可以用一個(gè)圖層（沒(méi)有鼓勵(lì)大家將所有圖層使用 ctl+e）。
關(guān)于圖層命名，如果你了解前端，你就會(huì)站在前端的角度去給圖層命名。現(xiàn)在，已經(jīng)有很多其他輔助工具來(lái)跟前端對(duì)接，如藍(lán)湖、SK 的超級(jí)標(biāo)注等直接查看尺寸和標(biāo)注，懂 PS 的一部分前端可能還需要源文件。對(duì)于圖層，應(yīng)按照界面的層級(jí)關(guān)系對(duì)應(yīng)好分層與排序，讓其他設(shè)計(jì)師產(chǎn)生共識(shí)，使其容易地找到界面上的任何元素。
給圖層命名真的花不了多少時(shí)間，你甚至可以從標(biāo)題文字直接復(fù)制，沒(méi)有規(guī)定每個(gè)圖層都命名，但至少應(yīng)給大模塊命名。圖層管理是決定源文件質(zhì)量好壞的最基本條件，我們應(yīng)該養(yǎng)成良好的習(xí)慣，按界面元素的層級(jí)關(guān)系進(jìn)行分組與排序，按元素的類型進(jìn)行命名，這也是作為一名專業(yè)設(shè)計(jì)師的最基本的要求。
一個(gè)好的界面設(shè)計(jì)，除了視覺(jué)層面，更多的是體現(xiàn)在設(shè)計(jì)上的各個(gè)細(xì)節(jié)。有質(zhì)量的設(shè)計(jì)文件更能提高工作效率，死摳細(xì)節(jié)，是每一位設(shè)計(jì)師最基本的工作態(tài)度。不管將來(lái) UI 設(shè)計(jì)的趨勢(shì)如何，只要我們還從事著這份職業(yè)，就應(yīng)該擁有最起碼的專業(yè)素養(yǎng)。UI 已經(jīng)逐漸形成系統(tǒng)化，如果不在細(xì)節(jié)上做好，那還拿什么優(yōu)勢(shì)來(lái)與其他類型的設(shè)計(jì)做競(jìng)爭(zhēng)？更多細(xì)節(jié)問(wèn)題歡迎大家共同探索。
在我內(nèi)心深處，永遠(yuǎn)有一塊地方為細(xì)節(jié)而保留。我認(rèn)為細(xì)節(jié)比藍(lán)圖更重要，沒(méi)有細(xì)節(jié)，一切皆空談。細(xì)節(jié)是本質(zhì)，是評(píng)價(jià)質(zhì)量的標(biāo)準(zhǔn)。
—— 德國(guó)著名工業(yè)設(shè)計(jì)師 Dieter Rams
