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