空間的組織是每一個(gè)偉大設計的關(guān)鍵?？臻g系統、網(wǎng)格和布局提供的規則可以使您的設計保持一致的節奏、限制決策并幫助團隊保持一致。這個(gè)基礎腳手架是所有設計系統的要求。在本指南中，我們將介紹定義空間基本單元、使用網(wǎng)格創(chuàng )建關(guān)系規則以及將它們組合在一起以實(shí)現現代 UI 布局的基礎知識。
什么是空間系統？
設計師每天都會(huì )做出空間決策，從按鈕的高度到圖標周?chē)目臻g?？臻g系統是一組關(guān)于如何測量、調整 UI 元素大小和空間的規則?？臻g層面的一致性可以讓您的產(chǎn)品更加一致，讓您的團隊更好地溝通，并減少設計師每天必須做出的決策數量?？臻g系統的一個(gè)例子是“8pt 網(wǎng)格”。然而，有許多變體和配置可供選擇。
舉個(gè)例子，請注意當登錄表單沒(méi)有立即可識別的空間模式時(shí)，它的感覺(jué)如何。對于用戶(hù)來(lái)說(shuō)，該設計可能會(huì )讓人感覺(jué)廉價(jià)、不一致并且通常不值得信賴(lài)。節奏的可預測性在視覺(jué)上令人愉悅，這也是您對您信任的品牌所期望的。
當調整相同的登錄表單以遵循 8pt 空間系統時(shí)，節奏變得可預測且視覺(jué)上令人愉悅。對于用戶(hù)來(lái)說(shuō)，體驗是完美且可預測的。這增加了對品牌的信任和喜愛(ài)。
無(wú)論誰(shuí)負責設計，現在都有一致的空間語(yǔ)言，并且您必須做出的選擇大大減少。您可以輕松地接續其他設計師留下的地方，或者輕松地并行構建。由于這些決策也被記錄在代碼庫中，因此您可以節省工程師的紅線(xiàn)時(shí)間。
如何啟動(dòng)空間系統？
定義基本單位將允許您在空間系統中創(chuàng )建支持的尺寸比例。查看網(wǎng)絡(luò )上的不同產(chǎn)品，您會(huì )發(fā)現幾種不同的方法。您將看到 4pt、5pt、6pt、8pt、10pt 增量系統。只要您了解其中一些方向促進(jìn)和防止的內容，這里就沒(méi)有錯誤的答案。
我的首選方法是元素使用 8pt 線(xiàn)性比例，圖標或小文本塊的間距為 4pt 半步。我更喜歡 4pt 基線(xiàn)網(wǎng)格作為我的排版，這意味著(zhù)我選擇的字體的行高將始終可以被 4 整除。這個(gè)系統旨在減少混亂，但也易于實(shí)現。
在探索構建自己的空間系統時(shí)，請合理考慮您的需求。這里有一些要考慮的事情：
用戶(hù)需求
考慮一下您的設計的用戶(hù)以及您想要的總體品牌美學(xué)。您想要一個(gè)具有大字體樣式和有限數量操作的寬敞用戶(hù)界面嗎？您是否需要為技術(shù)用戶(hù)構建復雜的數據表和多種操作來(lái)提高信息密度？調查您現有的設計并創(chuàng )建情緒板，以便為您和您的團隊提供清晰度和一致性。
變量數量
選擇較小的基本單位（例如 4pt、5pt 或 6pt）可能會(huì )導致系統中出現太多變量。觀(guān)察 12 分和 16 分填充差異之間的差異變得更加困難，這使得很難在整個(gè)團隊中強制執行一致性。我發(fā)現 8pt 增量是視覺(jué)距離和變量數量合理之間的正確平衡。我還利用 4pts 的半個(gè)單位來(lái)間隔圖標或調整小文本塊。
奇數
在空間規則中引入奇數（例如 5pt 基數）可能會(huì )導致在不分割像素的情況下難以將元素居中。例如，將文本和圖標放在 25 像素高度的按鈕中居中可能會(huì )對某些用戶(hù)造成模糊的分割像素。類(lèi)似地，針對需要 1.5 倍縮放的不同移動(dòng)和桌面屏幕縮放 UI 將導致分割像素模糊。
如何應用空間系統？
將空間比例應用于 UI 元素可以采用填充、邊距、高度和寬度定義的形式。以下示例顯示，有時(shí)無(wú)法同時(shí)強制執行填充和嚴格的高度定義。
在此示例中，您可以看到該文本的行高為 20 像素，但如果我在頂部和底部使用 8 像素的填充，則按鈕的高度將為 36 像素。我應該優(yōu)先考慮哪個(gè)衡量標準？有兩種方法可以解決這個(gè)問(wèn)題：
元素優(yōu)先（嚴格元素大小調整）
在這種方法中，當與預定的空間系統匹配時(shí)，實(shí)體元素的大小優(yōu)先。這包括按鈕和表單輸入等內容。這些元素更有可能具有可預測的內容，并且是在整體構圖中創(chuàng )造節奏的關(guān)鍵。
內容優(yōu)先（嚴格的內部填充）
當內容難以預測并且我們關(guān)心其顯示時(shí)，我們將希望強制執行嚴格的內部填充并允許元素大小由其內容決定。這些元素的大小可能仍然符合您的空間系統的規則，但這對于內容周?chē)拈g距來(lái)說(shuō)是次要的。這對于具有不確定用戶(hù)內容的表很有用。
邊框放置在內部或外部
按鈕或卡片等輪廓元素可能會(huì )給事情帶來(lái)麻煩。你如何計算 2px 邊框？它在代碼中的計數方式與 Figma 中的計數方式不同。哪一個(gè)是你的真相來(lái)源？
Figma 測量元素而不是其邊界。在網(wǎng)絡(luò )上，這是通過(guò)兩種不同的方式處理的。該box-sizing屬性可以是border-box或content-box。這里的 TL;DR 是大多數現代網(wǎng)絡(luò )都運行在border-box.
您幾乎總是可以使代碼達到像素完美，但如果您在實(shí)現上與團隊不一致，則可能會(huì )犧牲簡(jiǎn)單性和可擴展性。再次，與您的團隊進(jìn)行這些對話(huà)，以確定您自己的立場(chǎng)。
什么是網(wǎng)格？
空間系統定義大小和間距的規則，而網(wǎng)格幫助您將內容排列成結構化的命題。早期的印刷設計師利用網(wǎng)格將文本塊和圖像組織成令人愉悅的視覺(jué)層次結構，以提高可讀性。隨著(zhù)設計的發(fā)展，相同的基本原則仍然適用于信息的二維組織。
柱格
列網(wǎng)格可幫助您將內容組織成間隔均勻的垂直列。列之間的空間稱(chēng)為裝訂線(xiàn)尺寸。將空間系統規則應用于排水溝將有助于在設計中保持一致的節奏。一個(gè)常見(jiàn)的例子是 12 列網(wǎng)格，因為它允許您將給定區域劃分為一半、三分之一、第四、六等分。
模塊化網(wǎng)格
模塊化網(wǎng)格考慮列和行來(lái)將內容組織成矩陣結構。模塊化網(wǎng)格非常適合書(shū)籍等嚴格格式布局，但可以分解為相對大小的響應式網(wǎng)頁(yè)布局。請記住，這不必包含整個(gè)頁(yè)面布局。模塊化網(wǎng)格是一種組織工具。您決定從哪里開(kāi)始和停止。
基線(xiàn)網(wǎng)格
傳統上，在圖形設計中，基線(xiàn)網(wǎng)格用于設置從一行文本到下一行的行距。然而，在網(wǎng)絡(luò )上，我們按行高而不是基線(xiàn)放置文本。這是一個(gè)微妙的差異，但在跨平臺設計時(shí)應該意識到這一點(diǎn)。無(wú)論您的排版如何衡量，都適用相同的基本原則 - 將排版設置在一致的網(wǎng)格上將更容易組織，創(chuàng )建垂直節奏，并且美觀(guān)。
構建布局
布局是定義的空間規則和將內容組織成一個(gè)單一組合的頂峰。將您的內容整合到深思熟慮的結構中是容易的部分，而使其在不斷變化的平臺和屏幕尺寸的海洋中以清晰的層次結構流動(dòng)在一起是困難的部分。
現在，定義縮放邏輯是本機應用程序和 Web 應用程序的要求。從桌面到移動(dòng)設備以及介于兩者之間的所有設備，屏幕尺寸和比例可能有很大差異。制作可優(yōu)雅縮放的布局需要三個(gè)主要概念。有些設計會(huì )同時(shí)需要所有這三個(gè)概念。
自適應
自適應布局是一種完全根據其呈現格式而變化的布局。例如，根據桌面、平板電腦和移動(dòng)設備加載不同的體驗。這可以為用戶(hù)的設備提供更加量身定制的體驗，但將相同的功能重建為多種格式可能會(huì )變得昂貴。
反應靈敏
響應式布局是流暢的，可以適應不斷變化的格式大小。這是網(wǎng)絡(luò )上的常見(jiàn)做法，并且隨著(zhù)屏幕尺寸變化的增加，已成為本機應用程序的必需品。這使您可以一次性構建一項功能，并期望它能夠在所有屏幕尺寸上運行。缺點(diǎn)是觸摸和鼠標交互非常不同，并且考慮所有設備和用例的成本很高。
嚴格的布局
此布局不會(huì )隨著(zhù)格式大小的變化而變化。固定布局通常用于促進(jìn)特定的交互或信息布局，這些布局在較小的尺寸下會(huì )降級。數據表和圖表通常會(huì )創(chuàng )建特定尺寸的可滾動(dòng)嚴格布局，因為低于特定尺寸易讀性和交互性會(huì )顯著(zhù)降低。
如何在現有的一組設計上實(shí)施空間系統？
從頭開(kāi)始很容易。挑戰在于改造現有的一組設計。第一步是讓其他合作者參與對話(huà)。如果不闡述與其角色相關(guān)的價(jià)值，說(shuō)服團隊成員和利益相關(guān)者改變當前的產(chǎn)品開(kāi)發(fā)流程可能會(huì )很困難。工程師希望有更明確的要求，并減少挑剔的設計師告訴他們填充已關(guān)閉的時(shí)間。產(chǎn)品經(jīng)理希望更快地交付用戶(hù)和業(yè)務(wù)價(jià)值。設計師希望他們的設計能夠快速有效地直接轉化為連貫的用戶(hù)體驗。所有這些事情都可以通過(guò)投資共享空間系統來(lái)實(shí)現。
從小處開(kāi)始。重建一切以適應新定義的空間系統似乎令人畏懼。尋找要轉換的簡(jiǎn)單組件（例如按鈕），然后擴展到它們的公共同級元素（例如表單字段）。一路上與您的團隊建立動(dòng)力和理解。監管設計系統就像放牧貓一樣。授權將實(shí)施該系統的人員（例如工程師）來(lái)維護和執行該系統。
做出平衡的決定。向利益相關(guān)者證明這項工作如何減少設計/技術(shù)債務(wù)并提高速度。完成一部分工作后，例如組織從設計到實(shí)現的圖標工作流程，花點(diǎn)時(shí)間通過(guò)采訪(fǎng)團隊來(lái)捕捉之前和之后的情況。使用隊友關(guān)于節省時(shí)間的引用來(lái)增強您的工作價(jià)值。無(wú)論您是為一家斗志旺盛的初創(chuàng )公司還是一家大型企業(yè)工作，不投資設計系統計劃的常見(jiàn)原因是，業(yè)務(wù)是通過(guò)為用戶(hù)提供價(jià)值而不是組織完美的空間系統來(lái)直接維持的。
保持勢頭。一旦開(kāi)始，請牢記完成變革的愿景和日期。一半的工作遵循空間系統，另一半則陷入困境，這是一個(gè)艱難的處境。它使為用戶(hù)創(chuàng )造新價(jià)值變得更加復雜。制定一個(gè)具有明確里程碑的計劃，為團隊創(chuàng )造可見(jiàn)性，并分享整個(gè)過(guò)程中的進(jìn)展。
