空間的組織是每一個出色的網(wǎng)站設(shè)計的關(guān)鍵，空間系統(tǒng)、網(wǎng)格和布局提供規(guī)則，使您的網(wǎng)站設(shè)計具有一致的節(jié)奏、約束決策，并幫助團(tuán)隊保持一致，這種基礎(chǔ)支架是所有設(shè)計系統(tǒng)的要求。在本指南中，我們將介紹定義空間基本單元、用網(wǎng)格創(chuàng)建關(guān)系規(guī)則以及為現(xiàn)代UI布局將它們組合在一起的基礎(chǔ)知識。

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計、做網(wǎng)站網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計,成都響應(yīng)式網(wǎng)站建設(shè)公司,網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:028-86922220

什么是空間系統(tǒng)？

從按鈕的高度到圖標(biāo)周圍的空間，網(wǎng)站設(shè)計師每天都在做空間決策?？臻g系統(tǒng)是一組規(guī)則，用于度量UI元素的大小和空間?？臻g層次上的一致性使您的產(chǎn)品更加一致，使您的團(tuán)隊更好地進(jìn)行溝通，并減少了網(wǎng)站設(shè)計師一天內(nèi)必須做出的決策的數(shù)量。空間系統(tǒng)的一個例子是“8pt網(wǎng)格”?！叭欢性S多變體和配置可供選擇。

例如，請注意登錄表單在沒有立即可識別的空間模式時的感覺。對用戶來說，這種設(shè)計可能會讓人感覺廉價、不一致，而且通常不值得信任。節(jié)奏的可預(yù)測性是視覺上的愉悅，是你對自己信任的品牌的期待。

當(dāng)這個相同的登錄表單被調(diào)整為遵循一個8pt空間系統(tǒng)時，節(jié)奏變得可預(yù)測和視覺上的愉悅。對于用戶來說，這種體驗(yàn)是經(jīng)過修飾和可預(yù)測的，這增加了對品牌的信任和喜愛。

無論誰在設(shè)計，現(xiàn)在有一個一致的空間語言和選擇，你必須大大減少。您可以輕松地從另一個網(wǎng)站設(shè)計師停止的地方開始，或者輕松地并行構(gòu)建。由于這些決策也被捕獲在代碼庫中，因此可以為工程師節(jié)省時間。

如何建立一個空間系統(tǒng)？

定義基本單元將允許您在空間系統(tǒng)中創(chuàng)建支持的大小范圍，查看web上的不同產(chǎn)品，您將看到一些不同的實(shí)現(xiàn)方法。您將看到4pt、5pt、6pt、8pt、10pt增量系統(tǒng)。這里沒有錯誤的答案，只要你知道這些方向促進(jìn)和防止什么。

我喜歡的方法是對元素使用8pt線性比例，對間距圖標(biāo)或小文本塊使用4pt半步。我喜歡4pt的基線網(wǎng)格，這意味著我的字體選擇的行高總是能被4整除。該系統(tǒng)旨在減少混亂，但也易于實(shí)現(xiàn)。

當(dāng)你探索建立自己的空間系統(tǒng)時，合理地考慮你的需求。這里有一些事情需要考慮：

用戶需求

考慮你的設(shè)計的用戶和你所追求的一般品牌審美，你想要一個寬敞的用戶界面，大字體風(fēng)格和有限數(shù)量的行動？您是否需要為技術(shù)用戶構(gòu)建具有復(fù)雜數(shù)據(jù)表和多個操作的信息密度？調(diào)查你現(xiàn)有的設(shè)計，并創(chuàng)建一個情緒板，以獲得清晰度和對齊為您和您的團(tuán)隊。

數(shù)量的變量

選擇較小的基本單元，如4pt、5pt或6pt，可能會導(dǎo)致系統(tǒng)中出現(xiàn)太多的變量?，F(xiàn)在很難分辨12分和16分的差別，這使得整個球隊很難保持一致。發(fā)現(xiàn)8pt增量是視覺上的距離與合理數(shù)量的變量之間的平衡。

奇數(shù)

在空間規(guī)則中引入奇數(shù)（如5pt基數(shù)）會使不拆分像素的元素難以居中。例如，25像素高的按鈕中的居中文本和圖標(biāo)可能會為一些用戶創(chuàng)建模糊的分割像素。在類似的方面，對于需要1.5倍縮放的不同移動和桌面屏幕，縮放ui將導(dǎo)致分裂像素的模糊。

如何應(yīng)用空間系統(tǒng)？

對UI元素應(yīng)用空間范圍可以采用填充、空白、高度和寬度定義的形式。下面的示例顯示，有時不能同時執(zhí)行劃槳操作，因?yàn)檫@是一個嚴(yán)格的高度定義。

在這個例子中，你可以看到這個文本的行高是20px，但是如果在頂部和底部使用8px的填充，按鈕的高度將是36px。我應(yīng)該優(yōu)先考慮哪些度量？有兩種方法可以解決這個問題：

元素優(yōu)先（嚴(yán)格的元素分級）

在這種方法中，實(shí)體元素的大小在與預(yù)先確定的空間系統(tǒng)匹配時具有優(yōu)先級。這包括按鈕和表單輸入。這些元素更可能具有可預(yù)測的內(nèi)容，并且是在整體構(gòu)圖中創(chuàng)建節(jié)奏的關(guān)鍵。

內(nèi)容優(yōu)先

當(dāng)內(nèi)容的可預(yù)測性較差且我們關(guān)心其顯示時，我們將希望強(qiáng)制執(zhí)行嚴(yán)格的內(nèi)部填充，并允許元素大小由其內(nèi)容決定。這些元素的大小可能仍然符合您的空間系統(tǒng)規(guī)則，但這是次要的內(nèi)容周圍的間距。這對于用戶內(nèi)容不確定的表非常有用。

內(nèi)部或外部的邊界位置

概述的元素，如按鈕或卡可以拋出一個扳手的東西。如何計算2px的邊界？它在代碼中的計數(shù)方式與在Figma中的不同。哪一個是你的真理之源？

Figma測量元素，而不是元素的邊界。在網(wǎng)站設(shè)計上，有兩種不同的處理方法。box-sizing屬性可以是border-box或content-box。要查看它的實(shí)際操作，請查看這個代碼頁并閱讀本文以了解更多信息。這里的TL;DR是指大多數(shù)現(xiàn)代web運(yùn)行在border-box上。

您幾乎總是可以使代碼達(dá)到像素級的完美，但是如果您在實(shí)現(xiàn)上與團(tuán)隊不一致，您可能會犧牲簡單性和可擴(kuò)展性。再次，與你的團(tuán)隊進(jìn)行這些對話來確定你自己的立場。

什么是網(wǎng)格？

空間系統(tǒng)定義大小和間距規(guī)則，而網(wǎng)格幫助您將內(nèi)容安排成結(jié)構(gòu)化的命題。早期的印刷網(wǎng)站設(shè)計師利用網(wǎng)格將文本塊和圖像組織成令人愉悅的視覺層次，這有助于提高可讀性。隨著設(shè)計的發(fā)展，同樣的基本原則仍然適用于信息的二維組織。

列網(wǎng)格

列網(wǎng)格幫助您將內(nèi)容組織成均勻間隔的垂直列，列之間的空間稱為天溝大小。將您的空間系統(tǒng)規(guī)則應(yīng)用到水槽將有助于在您的設(shè)計中驅(qū)動一致的節(jié)奏。一個常見的例子是12列網(wǎng)格，因?yàn)樗试S您將給定的區(qū)域分成一半、三分之一、四分之一、六分之一。

模塊化的網(wǎng)格

模塊化網(wǎng)格考慮列和行來將內(nèi)容組織成矩陣結(jié)構(gòu)，模塊化網(wǎng)格對于像書這樣的嚴(yán)格格式布局是理想的，但是對于相對大小的響應(yīng)式web布局可能會出現(xiàn)問題。記住，這并不一定要包含整個頁面布局。模塊化網(wǎng)格是一種組織工具。你決定在哪里開始和結(jié)束。

基線網(wǎng)格

在傳統(tǒng)的平面設(shè)計中，基線網(wǎng)格用于設(shè)置從一行文本到下一行文本的引導(dǎo)。但是，在網(wǎng)站設(shè)計上，我們根據(jù)行高而不是基線來放置文本。這是一個細(xì)微的差別，但是在跨平臺設(shè)計時應(yīng)該注意這一點(diǎn)。不管你的排版是如何測量的，同樣的基本原則適用——將排版設(shè)置在一個一致的網(wǎng)格上將更容易組織，創(chuàng)建垂直的節(jié)奏，并在美學(xué)上令人愉悅。

組成一個布局

布局是已定義的空間規(guī)則和內(nèi)容組織成一個單一組成的頂點(diǎn)，將你的內(nèi)容整合到一個有思想的結(jié)構(gòu)中是比較容易的部分，讓它在一個變化的平臺和屏幕大小的海洋中清晰的層次結(jié)構(gòu)中流動是比較困難的部分。

定義擴(kuò)展邏輯現(xiàn)在是本地和web應(yīng)用程序的需求，從臺式機(jī)到手機(jī)，以及介于兩者之間的所有產(chǎn)品，其屏幕大小和比例可能相差很大。這里有三個主要的概念來設(shè)計一個可以優(yōu)雅伸縮的布局。有些設(shè)計需要同時使用這三個概念。

自適應(yīng)

自適應(yīng)布局是一種完全根據(jù)其格式進(jìn)行更改的布局，例如，根據(jù)桌面、平板電腦和移動設(shè)備加載不同的體驗(yàn)。這為用戶的設(shè)備提供了更加量身定制的體驗(yàn)，但將相同的功能重新構(gòu)建成多種格式可能會變得昂貴。

響應(yīng)

響應(yīng)式布局是流動的，可以適應(yīng)不斷變化的格式大小。這是web上的一種常見做法，隨著屏幕大小的變化越來越多，這已經(jīng)成為本地應(yīng)用程序的必要。這允許您一次性構(gòu)建一個功能，并期望它可以跨所有屏幕大小工作。缺點(diǎn)是，觸摸和鼠標(biāo)交互非常不同，而且考慮到所有設(shè)備和用例的成本很高。

嚴(yán)格的

這個布局不會隨著格式大小的變化而伸縮，固定布局通常用于促進(jìn)特定的交互或信息布局，而這些布局在較小的尺寸下就會退化。數(shù)據(jù)表和圖通常會創(chuàng)建一個特定大小的可滾動的嚴(yán)格布局，因?yàn)榭勺x性和交互作用將顯著降低到特定大小以下。

如何在現(xiàn)有的設(shè)計集上實(shí)現(xiàn)空間系統(tǒng)？

從零開始很容易，挑戰(zhàn)在于改造現(xiàn)有的設(shè)計，第一步是讓你的其他合作者參與到對話中來。如果不列出與他們的角色相關(guān)的價值，說服團(tuán)隊成員和涉眾改變當(dāng)前的產(chǎn)品開發(fā)過程是很困難的。工程師們想要更清晰的需求，而不是花時間在一個吹毛求疵的網(wǎng)站設(shè)計師告訴他們“填充物被去掉了”上。產(chǎn)品經(jīng)理們想要更快地交付用戶和業(yè)務(wù)價值。網(wǎng)站設(shè)計師希望他們的設(shè)計能夠快速有效地直接轉(zhuǎn)化為連貫的用戶體驗(yàn)，所有這些都可以通過投資一個共享的空間系統(tǒng)來實(shí)現(xiàn)。

從小事做起，重建一切以適應(yīng)一個新定義的空間系統(tǒng)似乎是艱巨的。尋找要轉(zhuǎn)換的簡單組件，如按鈕，然后將其擴(kuò)展為它們的公共兄弟元素，如表單字段。與你的團(tuán)隊一起建立動力和理解。監(jiān)管設(shè)計系統(tǒng)就像趕貓一樣。授權(quán)那些人，比如工程師，他們將執(zhí)行系統(tǒng)來維護(hù)和執(zhí)行它。

做出平衡決策，向利益相關(guān)者證明這一工作如何減少設(shè)計/技術(shù)債務(wù)，并在此過程中提高速度。完成一段工作后，比如組織圖標(biāo)從設(shè)計到實(shí)現(xiàn)的工作流程，花點(diǎn)時間通過采訪團(tuán)隊來捕捉之前和之后。利用隊友對你節(jié)省時間的評價來強(qiáng)化你工作的價值。無論您是為一家雜亂的初創(chuàng)公司還是大型企業(yè)工作，不投資于設(shè)計系統(tǒng)計劃的常見原因是，業(yè)務(wù)是通過為用戶提供價值而不是組織完美的空間系統(tǒng)來直接維持的。

保持這種勢頭，一旦你開始了，在腦海中有一個完成改變的愿景和日期。一半的工作被困在一個空間系統(tǒng)中，另一半工作被困在一個不確定的地方，這是一個艱難的處境。它使為用戶創(chuàng)造新價值變得更加復(fù)雜。制定一個有明確里程碑的計劃，為團(tuán)隊創(chuàng)建可見性，并分享過程中的進(jìn)展。