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