本指南旨在幫助設(shè)計師快速且一致地布置 UI，對于設(shè)計有固定約束的移動應(yīng)用程序 UI 尤其有用，同時在響應(yīng)式網(wǎng)頁設(shè)計中也能發(fā)揮作用。和許多設(shè)計指南一樣，這些示例在實際設(shè)計過程中體會，會比單獨閱讀文字更有幫助。
設(shè)計應(yīng)用程序和原型制作工具能讓我們創(chuàng)作出 UI 外觀的奇妙愿景，但在數(shù)字產(chǎn)品設(shè)計中，模型或原型的唯一目的是向利益相關(guān)者和開發(fā)人員清晰傳達建議的解決方案。最終，只有開發(fā)人員在代碼中（結(jié)合資產(chǎn)）能重現(xiàn)的內(nèi)容，才能投入生產(chǎn)。
如今，在設(shè)計工具中創(chuàng)建的幾乎任何內(nèi)容都能在代碼中實現(xiàn)，但出于可用性、發(fā)布時間表、性能等多方面原因，有些設(shè)計構(gòu)建起來可能不切實際。最重要的是設(shè)計在用戶設(shè)備的代碼中表現(xiàn)如何，因此應(yīng)盡可能優(yōu)先減少構(gòu)思和編程之間的時間，而非執(zhí)著于在 Sketch 或 Photoshop 中做出完美布局。
盒模型是描述對象尺寸和間距的一種方法，由 4 個組件組成：邊框、邊距、內(nèi)邊距和元素本身的尺寸。
- 邊框：圍繞元素邊緣的描邊粗細，大多數(shù)設(shè)計工具不允許其影響整體間距和尺寸。
- 內(nèi)邊距：元素邊界與其子元素邊界之間的空間。
- 邊距：元素邊界與相鄰對象之間的空間。
點（pt）是一種取決于屏幕分辨率的空間度量。簡單來說，在 “1x” 分辨率（或 @1x）下，1pt=1px；在 “2x” 分辨率（@2x）下，1pt=4px，因為分辨率在 X 軸和 Y 軸上都翻倍，即寬度為 2px，高度為 2px；在 “3x” 分辨率（@3x）下，1pt=9px（3px×3px），以此類推。
需要注意的是，這里所有內(nèi)容都是基于 “@1x” 設(shè)計的。@2x、@3x 以及所有其他變體的資產(chǎn)，從 @1x 資產(chǎn)中派生會更容易，而不是從以其倍數(shù)創(chuàng)建的設(shè)計中獲取。例如，要將 @2x 設(shè)計的清晰資源轉(zhuǎn)換為 @3x 設(shè)計（假設(shè)線條粗細為偶數(shù)），需要先將圖稿縮放至原始尺寸的 50%（降至 @1x），再將生成的藝術(shù)品縮放至 300%。而 @1x 設(shè)計可以輕松縮放到任何整數(shù)倍，如 @2x、@3x、@4x 等。
雖然在每個單獨的分辨率下工作，能為圖標和精美資產(chǎn)添加更多細節(jié)，但這樣的機會相對較少。大多數(shù)情況下，為了速度和方便，使用 @1x 是理想選擇。
創(chuàng)建的每個 UI 元素都應(yīng)與像素網(wǎng)格對齊，這一概念稱為像素擬合，能確保所有元素在用戶設(shè)備上顯得清晰且定義明確。
不過文本有點特殊，因為字母獨特的指標需要一點點抗鋸齒才能讓眼睛清晰閱讀，而這會使其他形狀變得模糊。因此，不必擔心字母的每個點都與像素網(wǎng)格對齊。
像文本這樣的內(nèi)聯(lián)元素幾乎總是給定界面中最重要的部分，但文本大小和行高之類的設(shè)置，在保持垂直節(jié)奏和易讀性的同時，并不總是像其他元素那樣容易符合相同的 UI 網(wǎng)格。
為文本設(shè)定基線是在設(shè)計中形成垂直一致性的好工具。通過將每行文本的基線定位到等間距的行上，能輕松地將所有 UI 元素置于和諧的垂直節(jié)奏中。
可以將 8pt UI 網(wǎng)格與 4pt 基線網(wǎng)格結(jié)合使用，這種搭配能讓計算簡單明了，同時提供足夠的選項來適應(yīng)各種文本樣式。
大多數(shù)平臺都有一些基本的指導原則，但打破默認字體會帶來獨特的結(jié)果，所以在布局文本時要謹慎，之后再將其作為布局其他元素的基礎(chǔ)。
使用 8 的倍數(shù)來定義塊和內(nèi)聯(lián)元素的尺寸、填充和邊距。
當塊元素的唯一內(nèi)容是文本（如按鈕）時，將文本設(shè)置為與 UI 其余部分和 / 或特定平臺一致的大小，然后使用填充來確定塊元素的大小。對于全寬元素，使用填充來確定高度，使用一致的水平邊距來確定寬度。
這個系統(tǒng)實際上有兩個突出的版本。一種是將元素放置到以 8 點增量定義的系統(tǒng)顯示網(wǎng)格中（稱為 “硬網(wǎng)格” 方法），另一種僅測量單個元素之間的 8 點增量（稱為 “軟網(wǎng)格” 方法）。
硬網(wǎng)格方法的主要觀點是，通過使用額外的透明背景元素，然后將它們分組為一小組前景元素，可以在每個元素的基礎(chǔ)上跟蹤邊距和填充，再將這些容器像磚塊一樣捕捉到網(wǎng)格。Material Design 原本就設(shè)計為 4pt 網(wǎng)格，自然符合這種方法。
軟網(wǎng)格方法認為，在編寫接口時，實際的網(wǎng)格無關(guān)緊要，因為編程語言不使用那種網(wǎng)格結(jié)構(gòu)，它最終會被舍棄。當優(yōu)先考慮獲得高質(zhì)量、可編程的模型集的速度時，繞過硬網(wǎng)格管理附加層的額外開銷，選擇軟網(wǎng)格更流暢、最小的結(jié)構(gòu)可能是一個優(yōu)勢，這也可能更適合 iOS，因為 iOS 中許多系統(tǒng) UI 元素不是由均勻網(wǎng)格定義的。
- 一致的用戶界面：當所有測量都遵循相同規(guī)則時，會自動獲得更一致的 UI。
- 更少的決定 = 更少的時間：通過刪除每 8 個間距選項中的 7 個，減少了可擺弄的量，從而加快編碼速度。
- 多平臺設(shè)計：不管外形如何，最流行的屏幕尺寸至少在一個軸上可以被 8 整除，通常是兩個軸。此外，一些平臺的樣式指南（如 Material Design）特別要求使用 4 或 8 點的網(wǎng)格，這使得該系統(tǒng)非常適用。
有些屏幕的尺寸調(diào)整起來顯然有難度（如 iPhone 6 為 375×667 點），但解決方案其實很簡單。保持填充和邊距尺寸一致，通過減少或增加塊元素的大小來填充剩余空間。如果保持網(wǎng)格一致，就可以使用大小特殊的元素。要記住，用戶可能永遠不會看到實際使用的測量值。
- 對齊網(wǎng)格：幾乎每個設(shè)計應(yīng)用程序都有 “對齊網(wǎng)格” 選項，如果使用硬網(wǎng)格方法，它無疑會讓工作更輕松。無論如何，需要確保啟用 “對齊像素網(wǎng)格” 選項（如果有）。
- 資源和變量：如果將根文本大小設(shè)置為 16，可以輕松使用.5rem 增量在 8 點網(wǎng)格上構(gòu)建布局。如果不喜歡這種方式或不喜歡 rems，可以使用 CSS 或預(yù)處理器間距變量來處理布局，同時保留變量帶來的額外可維護性。
- 快捷方式：許多應(yīng)用程序都有快捷方式，可動態(tài)微調(diào)、調(diào)整大小和調(diào)整增量，建議學習這些快捷方式，特別是輕推和尺寸調(diào)整相關(guān)的。
- 框架你的圖標：圖標通常需要不同的大小以保持相同的視覺重量。在它們周圍放置一個框架，類似于硬網(wǎng)格定義元素大小的方式，是保持測量一致的簡單方法，同時允許在定義的參數(shù)內(nèi)有變化。
- 放大，縮小：如果一直放大到 1600%，可能會誤判垂直節(jié)奏；而如果總是以 50% 的比例查看 UI，可能會錯過像像素擬合這樣的重要細節(jié)。所以要經(jīng)常調(diào)整縮放比例，確保看到整體畫面。
蘭亭妙微（藍藍設(shè)計）m.qdjdjx.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
