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