3種常見網(wǎng)格系統(tǒng)的用法,這篇幫你搞清楚!
編者按:這篇文章出自著名的用戶體驗(yàn)設(shè)計(jì)機(jī)構(gòu) NNGroup,資深用戶體驗(yàn)設(shè)計(jì)師 Kelley Gordon 負(fù)責(zé)撰寫了這篇文章。對(duì)于設(shè)計(jì)師而言,網(wǎng)格系統(tǒng)并不陌生,但是在什么時(shí)候用,用什么樣地網(wǎng)格,甚至什么時(shí)候打破網(wǎng)格地規(guī)則,都是有講究地,這篇文章就簡明扼要的闡述了這個(gè)問題。
如果你去過紐約,并且在街道上走過,那么你會(huì)很清楚地知道如何從一個(gè)區(qū)域走到另外一個(gè)區(qū)域,如何從一條街道走到另外一條街道,因?yàn)檎麄€(gè)城市是建立在網(wǎng)格系統(tǒng)之上的。正如同網(wǎng)格的可預(yù)測性幫助當(dāng)?shù)厝撕陀慰投ㄎ晃恢靡粯?,網(wǎng)頁和 APP 中的網(wǎng)格也為用戶和設(shè)計(jì)師提供框架結(jié)構(gòu)。由于它們采用一致的參考點(diǎn),網(wǎng)格為頁面提供了良好的可讀性,并且允許用戶快速抵達(dá)目標(biāo)。
網(wǎng)格定義:網(wǎng)格由行列、內(nèi)邊距和外邊距構(gòu)成,為頁面上的元素和布局提供結(jié)構(gòu)。
網(wǎng)站和界面中阿最常用的網(wǎng)格有 3 種不同的結(jié)構(gòu):柱狀網(wǎng)格、模塊網(wǎng)格和分層網(wǎng)格。
柱狀網(wǎng)格當(dāng)中,頁面通常被劃分為垂直的列,然后將 UI 元素和內(nèi)容和這些柱狀的列對(duì)齊。
模塊網(wǎng)格則是在前者的基礎(chǔ)上進(jìn)一步在橫向做了拓展,行列交叉構(gòu)成的網(wǎng)格讓元素和內(nèi)容可以遵循更小的模塊來對(duì)齊,這種模塊化的網(wǎng)格更加適合電商和列表頁,比起柱狀網(wǎng)格更加自由。
分層網(wǎng)格則不同,它和前兩者的差異在于,行列的構(gòu)成并非完全均等,同時(shí)不同網(wǎng)格區(qū)塊的重要性、優(yōu)先級(jí)也不一樣。最重要的元素和內(nèi)容片段占據(jù)了最大的網(wǎng)格。
網(wǎng)格的構(gòu)成
- 列(Column):縱向延伸的均分條狀區(qū)域,它們占據(jù)來網(wǎng)格的絕大多數(shù)區(qū)域。UI元素和內(nèi)容絕大多數(shù)時(shí)候都放置在列列當(dāng)中,為了適應(yīng)絕大多數(shù)的屏幕,列的寬度通常使用百分比來標(biāo)識(shí),而非固定寬度值,并且列的數(shù)量會(huì)有所不同,比如移動(dòng)設(shè)備上的網(wǎng)格通常有 4 列,而桌面網(wǎng)格則時(shí)常多達(dá) 12 列。
- 內(nèi)邊距(Gutter):內(nèi)邊距是列和列之間的空間,用來將不同的列和其中的 UI 控件、內(nèi)容分割開的間隙。雖然內(nèi)邊距通常都是固定值,但是它回根據(jù)不同的斷點(diǎn)而有所變化。比如在大屏幕上,內(nèi)邊距會(huì)較大,在移動(dòng)設(shè)備上,內(nèi)邊距則較小。
- 外邊距(Margin):外邊距通常只在頁面左右最靠外的區(qū)域,由于內(nèi)容通常不會(huì)延伸到邊緣,因此外邊距通常上固定的。外邊距通常按照屏幕寬度百分比來計(jì)算,同樣也會(huì)隨著斷點(diǎn)而變化。
網(wǎng)格的使用范例
范例1:分層網(wǎng)格
第一個(gè)案例來自《紐約時(shí)報(bào)》的官方網(wǎng)站的設(shè)計(jì)。這個(gè)網(wǎng)站通過分層網(wǎng)格來創(chuàng)造類似傳統(tǒng)報(bào)紙的閱讀體驗(yàn),在桌面端的大屏幕之下,設(shè)計(jì)師使用來2個(gè)主要的列來構(gòu)成分層網(wǎng)格,最重要的頭條新聞?wù)紦?jù)來較大的列,然后其中劃分出二級(jí)和三級(jí)的區(qū)塊分類,它們占據(jù)來較小的列和模塊。
范例2:柱狀網(wǎng)格
第二個(gè)案例來自維生素公司 Ritual.com,這個(gè)網(wǎng)站的設(shè)計(jì)采用了典型的柱狀網(wǎng)格來創(chuàng)建富有吸引力的視覺體驗(yàn),在這個(gè)屏幕尺寸之下,四個(gè)大小一致的列構(gòu)建出來基礎(chǔ)的網(wǎng)格結(jié)構(gòu),而所有的元素都幾乎嚴(yán)格地遵循柱狀網(wǎng)格,而內(nèi)邊距也非常均勻,它們幫助用戶區(qū)分不同的去產(chǎn)品,外邊距則是獨(dú)立的尺寸,相對(duì)內(nèi)邊距要大很多。
范例3:模塊網(wǎng)格
第三個(gè)案例則來自著名的設(shè)計(jì)平臺(tái) Behance。Behance 采用了模塊化的結(jié)構(gòu)來呈現(xiàn)內(nèi)容,在桌面的大尺寸界面之下,每行4個(gè)模塊,水平方向上的內(nèi)邊距較大,并且左右方向上的內(nèi)邊距和外邊距是完全一樣的,和前面一樣,均勻的邊距讓整個(gè)頁面在視覺上均勻舒適。
范例4:打破網(wǎng)格
我們最后一個(gè)范例來自專門研究 Google Material 的網(wǎng)站 Shrine。這個(gè)網(wǎng)站看起來是采用來柱狀網(wǎng)格,但是你仔細(xì)看會(huì)發(fā)現(xiàn),由的內(nèi)容欄并沒有遵循網(wǎng)格的框架。這種設(shè)計(jì)讓整個(gè)網(wǎng)站在快速掃視的時(shí)候,會(huì)比較有挑戰(zhàn)性,有些內(nèi)容會(huì)更容易吸引用戶的注意力,相反有的則非常容易被忽略。只要你有正當(dāng)?shù)睦碛?,這種打破網(wǎng)格的設(shè)計(jì)是沒問題的。
使用網(wǎng)格的好處
使用網(wǎng)格對(duì)于用戶和設(shè)計(jì)師都是有好處的。
- 設(shè)計(jì)師可以快速對(duì)齊整合好頁面
- 用戶可以快速掃讀內(nèi)容,并且可以預(yù)測內(nèi)容的分布和走向
- 一個(gè)好的網(wǎng)格很容易適應(yīng)不同的屏幕尺寸和方向,事實(shí)上,網(wǎng)格布局是響應(yīng)式網(wǎng)頁設(shè)計(jì)的重要基礎(chǔ),響應(yīng)式網(wǎng)頁設(shè)計(jì)根據(jù)斷點(diǎn)來應(yīng)對(duì)不同的屏幕尺寸,比如一個(gè)桌面端界面可以有12列,但是移動(dòng)設(shè)備上只有4列。
更重要的是,網(wǎng)格并非是單領(lǐng)域概念,設(shè)計(jì)師和開發(fā)者都在使用這個(gè)概念,網(wǎng)格本身是設(shè)計(jì)師和開發(fā)者之間溝通的橋梁之一。
正確選擇和設(shè)置網(wǎng)格
如何使用和設(shè)置網(wǎng)格,對(duì)于創(chuàng)建優(yōu)質(zhì)的排版和體驗(yàn)而言,是至關(guān)重要的。
根據(jù)你的需求,選擇合適的網(wǎng)格。
多花點(diǎn)時(shí)間思考你的網(wǎng)站適合哪種網(wǎng)格布局,如果頁面上有些元素的優(yōu)先級(jí)明顯比別的更高,那么分層網(wǎng)格可能是最合適的布局,比如新聞平臺(tái)一類的網(wǎng)站。如果你的網(wǎng)站當(dāng)中內(nèi)容的形態(tài)大小變化很大,那么請考慮使用基礎(chǔ)的柱狀網(wǎng)格或者模塊網(wǎng)格,因?yàn)樗鼈兲峁┝俗銐虼蟮撵`活性。
花時(shí)間好好設(shè)置一下網(wǎng)格。
一旦你確定了哪種類型的網(wǎng)格適合你的需求,那么你就要仔細(xì)考慮如何進(jìn)行設(shè)置。如果你考慮讓你的內(nèi)容適配桌面端、 平板、 手機(jī)等多種設(shè)備,不同屏幕尺寸,那么你需要結(jié)合響應(yīng)式設(shè)計(jì)的策略來詳細(xì)制定列寬度、 內(nèi)邊距、外邊距的參數(shù)。筆記本電腦和臺(tái)式機(jī)的屏幕內(nèi),12列網(wǎng)格足以呈現(xiàn)絕大多數(shù)類型的內(nèi)容,然后隨著屏幕尺寸的縮小,減少網(wǎng)格,設(shè)置斷點(diǎn),優(yōu)化布局。在 Sketch 和 Figma當(dāng)中,系統(tǒng)提供優(yōu)質(zhì)的預(yù)設(shè)網(wǎng)格系統(tǒng),方便你進(jìn)行設(shè)計(jì)。
始終將內(nèi)容放置在列當(dāng)中,而不是內(nèi)邊距。
當(dāng)你在網(wǎng)格系統(tǒng)中防止元素的時(shí)候,盡量讓內(nèi)容繞開內(nèi)邊距,方便讓內(nèi)容和留白清晰的區(qū)分開。
盡量使用 8px 網(wǎng)格。對(duì)于絕大多數(shù)的常見設(shè)備,以像素為單位的屏幕通常是 8 的倍數(shù),盡量采用 8px 的網(wǎng)格系統(tǒng),這樣在屏幕響應(yīng)式變化的時(shí)候,更容易處理、
結(jié)論
網(wǎng)格系統(tǒng)不僅為設(shè)計(jì)師提供了優(yōu)質(zhì)的布局結(jié)構(gòu),而且為終端用戶提供了良好的可讀性,讓產(chǎn)品和界面更好地適配各式各樣地屏幕,這才是網(wǎng)格乃至于設(shè)計(jì)系統(tǒng)地功能所在。
作者:陳子木
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)