利用柵格系統(tǒng),構(gòu)建優(yōu)秀的響應(yīng)式設(shè)計

2 評論 10073 瀏覽 80 收藏 39 分鐘

合理運用柵格系統(tǒng)可以幫助我們控制布局結(jié)構(gòu)并實現(xiàn)一致和有組織的設(shè)計,這篇文章介紹了利用柵格系統(tǒng)構(gòu)建響應(yīng)式設(shè)計。

一、寫在前面

今天,90%的媒體互動都是基于屏幕的,通過手機,平板電腦,筆記本電腦,電視和智能手表來與外界產(chǎn)生聯(lián)系。多屏設(shè)計已成為商業(yè)設(shè)計中不可或缺的一部分,響應(yīng)式設(shè)計正迅速成為常態(tài)。作為UI設(shè)計師,我們希望為我們的產(chǎn)品在不同尺寸下都能為用戶提供良好的用戶體驗,柵格系統(tǒng)可以幫助我們做到這一點。

即使是我們只針對一個尺寸進行設(shè)計,我們也經(jīng)常面臨設(shè)計布局方面的問題。合理運用柵格系統(tǒng)可以幫助我們控制布局結(jié)構(gòu)并實現(xiàn)一致和有組織的設(shè)計。柵格系統(tǒng)就像無形的膠水一樣凝聚一個設(shè)計,即使元素看上去是彼此分離,但通過網(wǎng)格將它們連接在一起,實現(xiàn)良好的層次結(jié)構(gòu),位置關(guān)系和一致性。

設(shè)計師和開發(fā)者之間的協(xié)作過程中,柵格系統(tǒng)在前端開發(fā)中是被應(yīng)用的很廣泛一套體系,許多優(yōu)秀的設(shè)計都使用了柵格系統(tǒng),使用柵格系統(tǒng)可以加速開發(fā)并保證視覺還原。柵格系統(tǒng)雖然是傳統(tǒng)設(shè)計方法中的一部分,但它仍舊能幫助我們?nèi)ピO(shè)計這個多終端的世界。

看到這里,你可能非常想知道格柵系統(tǒng)在頁面中是如何運作的,那么今天我們一起來學(xué)習(xí)并且實踐我們的格柵系統(tǒng)。

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

“網(wǎng)格系統(tǒng)可以幫助我們設(shè)計,但卻不能保證我們的設(shè)計。它有多種可能的用途,并且每個設(shè)計師都可以尋找適合其個人風(fēng)格的解決方案。但是必須學(xué)習(xí)如何使用網(wǎng)格。這是一門需要實踐的藝術(shù)?!?/p>

——《平面設(shè)計中的網(wǎng)格系統(tǒng)》作者Josef Müller-Brockmann

二、什么是柵格系統(tǒng)?

網(wǎng)格系統(tǒng)可以讓你依靠秩序與邏輯去完成設(shè)計。

早在20世紀初,德國、荷蘭、瑞士等國的平面設(shè)計師們發(fā)現(xiàn)通過維持視覺秩序,從而使版面能更加清晰有效地傳遞信息,二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展,直到20世紀40年代后期,第一次出現(xiàn)了使用網(wǎng)格進行輔助設(shè)計的印刷作品。

由瑞士設(shè)計師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設(shè)計中的網(wǎng)格系統(tǒng)》一書,自1961年出版以來暢銷至今,對設(shè)計界有著深遠的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設(shè)計運動),后來成為全球風(fēng)靡的International Typographic Style (國際主義設(shè)計風(fēng)格) 。

約瑟夫·米勒一布羅克曼(Josef Muller-brockmann, 1914-1996)

瑞士的一位平面設(shè)計師和教師。1958年任《新平面設(shè)計》(New Graphic Design)主編1966年被任命為 IBM 的歐洲設(shè)計顧問。布羅克曼因他的極簡主義設(shè)計與簡潔的排版、圖形和色彩而聞名,他的設(shè)計對 21 世紀的眾多平面設(shè)計師都產(chǎn)生了重大影響。

三、柵格系統(tǒng)的優(yōu)勢

1、減少決策成本提高設(shè)計理解力

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考,它讓頁面設(shè)計變得有規(guī)律,從而減少了設(shè)計決策成本。

UI設(shè)計也是需要理性的、客觀的、具有數(shù)學(xué)邏輯美感的。熟練運用網(wǎng)格系統(tǒng)能夠讓你的設(shè)計更有秩序和節(jié)奏感,頁面信息的展現(xiàn)更加清晰,提高閱讀效率,從而提供給用戶舒適的使用體驗。加快認知速度。這意味著用戶在使用產(chǎn)品完成特定的任務(wù)時,例如發(fā)送消息,預(yù)訂酒店房間或乘車。用戶能夠連貫的理解并找到找到下一條信息或下一步要采取的步驟。

2、響應(yīng)化

因為人們使用不同類型的設(shè)備與產(chǎn)品進行互動,從智能手表的小屏幕到超寬屏電視,交互是流暢的,并且沒有固定的尺寸。使用產(chǎn)品時,人們通常會在多個設(shè)備之間切換,以完成該產(chǎn)品的單個任務(wù)。所以響應(yīng)式設(shè)計不應(yīng)該是一種奢侈品,而是一種必需品。這意味著設(shè)計師不能再為單個設(shè)備的屏幕構(gòu)建。多設(shè)備環(huán)境迫使設(shè)計人員根據(jù)動態(tài)網(wǎng)格系統(tǒng)進行思考,而不是固定寬度。使用網(wǎng)格可以跨不同屏幕尺寸的多個設(shè)備創(chuàng)建連貫的體驗。

3、加速團隊協(xié)作設(shè)計

當多位設(shè)計師共同設(shè)計產(chǎn)品時,一個統(tǒng)一標準就變得尤為重要。如果沒有一個統(tǒng)一的框架去約束的話,我們的產(chǎn)品的頁面和組件的標準可能各式各樣,這樣的話整個產(chǎn)品的頁面都會比較混亂。因此,網(wǎng)格系統(tǒng)有助于將界面設(shè)計工作分開,因為多位設(shè)計師可以在統(tǒng)一的布局下進行不同部分工作,并且無縫集成并保持連貫。

4、加速開發(fā)并保證視覺還原

大多數(shù)設(shè)計項目的實施,涉及到設(shè)計者和開發(fā)者之間的協(xié)作。柵格化提高了頁面布局的一致性跟復(fù)用性;避免了設(shè)計師與開發(fā)者在細節(jié)上的反復(fù)溝通確認,從而提升了整個設(shè)計開發(fā)流程的效率、并能幫助開發(fā)者實現(xiàn)較為理想的設(shè)計還原。

四、柵格系統(tǒng)的基本構(gòu)成

1. 列和槽(Columns and Gutters)

列(Column)是內(nèi)容的容器,水槽(Gutter)用來調(diào)節(jié)相鄰兩個列的間距,把控頁面留白;列和列間距加上頁面邊距(Margin)等于屏幕的水平寬度。

列和列間距的內(nèi)容區(qū)域(Content width)由N個列和(N-1)個水槽組成。通常情況下,web 端采用 12 列,平板采用 8 列,手機采用 4 列。

當然,你可以根據(jù)項目特點來設(shè)計你的網(wǎng)格系統(tǒng),列和水槽的寬度我們可以利用8點網(wǎng)格系統(tǒng)來定義,下面會講到。

列的數(shù)量越多,頁面就會被分割的越“碎”,在頁面設(shè)計時就會越難把控,適用于業(yè)務(wù)信息量大、信息分組較多、單個盒子內(nèi)信息體積較小的頁面設(shè)計,列間距寬度數(shù)值對頁面的影響,與外邊距大體類似,即間距越大頁面越輕松簡單,反之亦然。

用戶已經(jīng)習(xí)慣通過鼠標滾輪或滾動條(scrollbar)來縱向瀏覽頁面內(nèi)容,因此豎直方向可以無限延伸,所以柵格系統(tǒng)在豎直方向的柵格可以不體現(xiàn)出來,我們在執(zhí)行設(shè)計時只要在水平方向保持規(guī)律的變化就可以了。

2. 頁面邊距(Side Margins)

頁面邊距就是內(nèi)容區(qū)域(Content field)以外的空間,比較推薦的設(shè)計就是頁面邊距可以隨著屏幕尺寸的增大而增大。頁面邊距在移動設(shè)備上通常是 12Px到 40Px 之間,在平板設(shè)備和桌面設(shè)備頁面邊距變化就相當多了。

在響應(yīng)式設(shè)計中,你選擇了一個頁面邊距之后,縮小頁面寬度時頁面還是會有你設(shè)置的最小頁面邊距,直到到達下一個響應(yīng)點(breakpoint)。當你增大頁面寬度時,頁面就有更多的頁面邊距,直到頁面寬度到達下一個響應(yīng)點(breakpoint)。

3. 模塊(Field Elements)

模塊就是你的設(shè)計區(qū)塊,可以是一段文字,一張圖片,或是其他更加豐富的元素。背景元素并不能算作是設(shè)計模塊,所以并不需要遵循柵格系統(tǒng)。模塊的定義是很靈活的,它可以是個小的單位或是元素,也可以是一個元素豐富的區(qū)塊。

以12柵格系統(tǒng)為例,一個12柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分、4等分、6等分、12等分,還可以被1:1:1、1:2:1、1:3:2、2:3:3、1:2、1:3、1:5、3:5等不對稱分割,具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定。

4. 8 點網(wǎng)格(8pt spatial system)

柵格系統(tǒng)大的層面可以幫助設(shè)計者更好的進行版式設(shè)計與內(nèi)容布局,而小的方面可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。從用戶體驗角度來講,這兩者同等重要,從執(zhí)行層面來講,我們一般先做版式設(shè)計與布局,然后再填充內(nèi)容、調(diào)整細節(jié)。

由于列跟水槽的寬度是以網(wǎng)格作為基本單位來增加或者減小,所以柵格化的重要一步就是需要先定義好柵格的原子單位“網(wǎng)格”的大小。目前最普適易用的就是 8 點網(wǎng)格。我們也可以利用 8 點網(wǎng)格法來制定產(chǎn)品中的間距,建立 8 點為一個單位的網(wǎng)格,使用 8 的倍數(shù)來定義模塊的間距與元素的尺寸。8 點網(wǎng)格有如下幾點優(yōu)勢:

1)目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被8整除,使用8作為最小原子足夠普適??梢源_保不同布局之間的視覺一致性,同時可以靈活的適配多種尺寸的設(shè)計。以8為單位符合“偶數(shù)原則”。偶數(shù)原則可以在頁面縮放中最大程度的避免類似于0.5、0.75、1.25等次像素的出現(xiàn),從而使頁面各類元素在大多數(shù)場景下都能有比較精致的細節(jié)表現(xiàn)

2)在網(wǎng)格系統(tǒng)中應(yīng)該更加注重的是間距,而間距要遵循網(wǎng)格系統(tǒng)(例如使用 4、8、16、24、32 等和 8 具有規(guī)律的數(shù)字)同時在產(chǎn)品中的各類元素也要遵循這類原則(例如圖標大小、組件大小等)。所以布局的水平和垂直節(jié)奏和各個組件的節(jié)奏會相互重疊,整體的設(shè)計將更加完整。

3)開發(fā)工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設(shè)計,因此如果設(shè)計師也使用以8為基本單位的柵格系統(tǒng),開發(fā)與設(shè)計師相互對接就會更加方便,開發(fā)實現(xiàn)頁面時也能更高品質(zhì)的去還原我們的設(shè)計。

如果設(shè)計上沒有立即可識別的間距系統(tǒng)時,這種設(shè)計可能會讓用戶感覺廉價、不一致,而且通常不值得信任。如果設(shè)計上遵循一個8pt網(wǎng)格系統(tǒng)時,節(jié)奏變得可預(yù)測和視覺上的愉悅。對于用戶來說,這種體驗是經(jīng)過修飾和可預(yù)測的,這增加了用戶對品牌的信任和喜愛。

無論有多少個設(shè)計師在協(xié)同合作,現(xiàn)在都有一個一致的間距規(guī)范,決策成本將大大降低。設(shè)計師可以輕松地從另一個設(shè)計師停止的地方開始設(shè)計,或者輕松地并行構(gòu)建。我們定義下規(guī)范可以及時和開發(fā)同學(xué)溝通,因此可以為工程師節(jié)省時間。

5. 基線網(wǎng)格(Baseline Grid)

基線網(wǎng)格由密集的水平行組成,這些行提供文本的對齊和間距準則,類似于您在直紋紙上書寫的方式。在下面的示例中,每8px行在紅色和白色之間交替。

基線網(wǎng)格

提示:將所有行高設(shè)置為基本單位(8x或4px)的增量非常重要,這樣您的文本才能與基線網(wǎng)格完美對齊。

字體行高

五、響應(yīng)式設(shè)計

1. 什么是響應(yīng)式?

設(shè)計師需要通過設(shè)計讓內(nèi)容在不同的平臺上體驗最大化,確保讓用戶在任何一個屏幕上看到內(nèi)容的時候,會覺得這些內(nèi)容就是為這個平臺而設(shè)計的,而不是單純的縮放而來。這種無縫的體驗,才是跨屏幕設(shè)計的真正難點所在。

想要制定一套針對不同設(shè)備和屏幕的設(shè)計方案,你需要一整套的策略。用戶體驗同時包含了性能、交互、效率等多方面內(nèi)容,也就是說,對于一個線上的響應(yīng)式頁面,我們不僅要關(guān)注視覺上看到的,也要關(guān)注我們操作、使用時的感受,這些綜合因素最終影響著用戶使用時的效率與體驗。

2. 響應(yīng)式設(shè)計的核心步驟

1)確保核心的用戶體驗

雖然用戶體驗是無處不在的,但是對于特定產(chǎn)品,最核心的體驗是存在的。產(chǎn)品通常是用來解決用戶所面臨的特定問題的,它的這一特質(zhì)讓產(chǎn)品變得有意義。關(guān)鍵的內(nèi)容和關(guān)鍵的功能的組合,通常構(gòu)成了產(chǎn)品的核心用戶體驗。

如果你并沒有想明白這個問題,不妨問問自己:用戶需要完成哪些最常見/最重要的任務(wù)?找到問題的答案之后,你的產(chǎn)品就應(yīng)當從各個方面、各個渠道,完整而全面地支撐這些功能,幫助用戶完成這些任務(wù)。

舉個例子,Uber 的核心用戶體驗是隨時隨地地叫車,無論設(shè)備的屏幕大小如何,你進行的設(shè)計全部都應(yīng)該圍繞著這個需求和功能來進行。叫車是Uber的核心功能,即使使用Apple Watch這種極小的屏幕尺寸都應(yīng)該順利地完成這個任務(wù)。

2)敲定你的產(chǎn)品所覆蓋的設(shè)備類型

現(xiàn)在的移動端設(shè)備屏幕尺寸各不相同,單獨為某一個設(shè)備設(shè)計內(nèi)容無疑是不現(xiàn)實的。根據(jù)你的產(chǎn)品覆蓋人群、受眾分類、使用場景,綜合考慮你的內(nèi)容會優(yōu)先呈現(xiàn)在哪些設(shè)備和平臺上,然后有意識地篩選出常見的設(shè)備類型:手機,平板,桌面端,智能電視,智能手表……

不同的設(shè)備組合通常是基于不同的場景、需求和服務(wù)來構(gòu)成的,用戶會針對不同的屏幕進行不同模式的交互,甚至處理的內(nèi)容也會有差異。

比如說,在手機上,用戶更加傾向于使用輕量級的任務(wù),并且進行一定量的溝通和交流。在平板上,用戶行為更多集中在內(nèi)容消費上,并且目前平板的使用量被認為在逐步降低。桌面端依然是用戶完成較為專業(yè)、復(fù)雜任務(wù)的首選平臺,足以應(yīng)付復(fù)雜多樣的內(nèi)容。了解各種設(shè)備類型和使用場景是用來構(gòu)建用戶體驗的關(guān)鍵。

3)針對不同內(nèi)容來匹配用戶體驗

并非所有的內(nèi)容都符合不同設(shè)備的使用場景,比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當中,每種設(shè)備的使用場景不同,應(yīng)該匹配的用戶體驗也不一樣。移動端用戶和桌面端用戶的需求就是不同的,場景差異也很大。

以Evernote 為例,它可以在多種不同類型的設(shè)備之間同步和切換,其桌面端版本就針對用戶的內(nèi)容需求進行了優(yōu)化:Evernote 的桌面端應(yīng)用程序針對閱讀性的內(nèi)容和多媒體進行了優(yōu)化,而移動端的Evernote 則強化了拍攝記錄、圖片和音頻記錄的功能:其次,不同的設(shè)備屏幕具備不同的輸入方式,設(shè)計師如果忽略輸入方式上的獨特性,也常常會出現(xiàn)許多問題,這里就不擴展開來了。

4)優(yōu)先為最小的屏幕做設(shè)計

一直以來,設(shè)計師都習(xí)慣從最大的屏幕著手設(shè)計,最后考慮最小的屏幕上的顯示效果,這意味著絕大多數(shù)的設(shè)計都是從桌面端開始設(shè)計的,通常桌面端的內(nèi)容和功能更全面。當桌面端的整體設(shè)計完成之后,再推進到其他設(shè)備端的設(shè)計。

然而,在進行桌面端設(shè)計的時候,我們常常會遭遇“廚房水槽”困境:由于產(chǎn)品通常會牽涉到多個利益相關(guān)方,許多多余的功能會被加入進來。

而實踐經(jīng)驗表明,移動端優(yōu)先的設(shè)計往往能夠更好的專注于核心功能,更適合作為產(chǎn)品設(shè)計的起點。當你優(yōu)先設(shè)計最小屏幕所需要的界面的時候,這種局面會強制你從最關(guān)鍵最重要的地方開始設(shè)計。這也是之前設(shè)計圈和產(chǎn)品開發(fā)領(lǐng)域一直所強調(diào)的“移動端優(yōu)先”的策略的由來。

在此之后,再進行平板、桌面和電視端的設(shè)計,就是一個自然的做加法的過程了。在絕大多數(shù)的案例當中,最小屏幕通常是手機屏幕。

5)測試你的設(shè)計

產(chǎn)品的測試環(huán)境并不一定都得是在現(xiàn)實世界中尋找,但是在盡可能讓真實的用戶來做可用性測試,并且在產(chǎn)品發(fā)布之前解決所有的用戶體驗上的問題。

3. 為何要利用柵格系統(tǒng)來進行響應(yīng)式設(shè)計?

響應(yīng)式可以響應(yīng)的前提有兩點:頁面布局具有規(guī)律性;元素寬高可用百分比代替固定數(shù)值,而這兩點正是柵格系統(tǒng)本身就具有的典型特點,所以利用柵格系統(tǒng)進行響應(yīng)式的設(shè)計是順理成章的,也比較高效快捷,所以響應(yīng)式與柵格化天生一對好搭檔。

六、如何建立柵格系統(tǒng)

第1步:確定列的數(shù)量

第一階段先不要限制自己的列數(shù)。首先,創(chuàng)建一個低保真或高保真的原型。設(shè)計一些基本元素和用戶流程。在此之后,就開始設(shè)計最優(yōu)的列數(shù)和大小。如果在項目開始設(shè)計之后不得不改變我們的柵格系統(tǒng),不要有負擔(dān),我們需要有一些試錯的空間。

我們在設(shè)計頁面時,用到的最多的布局方式就是等分布局,即頁面內(nèi)容區(qū)域被 N 等分,每一份的寬度則根據(jù)屏幕寬度自適應(yīng)調(diào)整。那么就從這個角度出發(fā),思考一下頁面的網(wǎng)格應(yīng)該設(shè)置為多少列,才能最大程度的滿足各種等分布局的需要。與web類似,移動端最方便的網(wǎng)格之一是12列網(wǎng)格。這個網(wǎng)格將允許我們在一行中同時放置偶數(shù)和奇數(shù)個元素。

對于移動端來說,12列網(wǎng)格的缺點是一個列的寬度太小,你可能很少創(chuàng)建一個列寬度的元素。如果你選擇2、4或8列網(wǎng)格,請記住在一行中放置奇數(shù)個元素可能會出現(xiàn)的問題。

Pro-Tip:

界面設(shè)計通常包含數(shù)百個不同的頁面,因此,一個網(wǎng)格可能不適合所有的頁面。如果需要,創(chuàng)建額外的柵格系統(tǒng),但不要忘記設(shè)計的一致性。網(wǎng)格系統(tǒng)的一致性:相同的布局邊距、列之間相等或成比例的水槽,以及更改列本身的寬度時其他模塊也需要保持相同的比例。

第2步:定義水槽和邊距

首先,讓我們先翻閱目標屏幕的設(shè)計 Guideline,以找出通常頁面邊距(Side Margins)。目前,Android和iOs的最小推薦布局邊距為16pt。web端則依照屏幕尺寸不同而不同。這意味著,如果你希望遵循系統(tǒng)指南,則頁面邊距不應(yīng)小于16pt。(但可以更大的?)

在選擇12列網(wǎng)格時,列之間的水槽不應(yīng)該太大,因為由于列的寬度小和它們之間的大寬度的水槽,列將在視覺上產(chǎn)生分裂的感覺。同時我建議你選擇與8pt間距系統(tǒng)成比例的水槽大小。所以布局的水平和垂直節(jié)奏會相互重疊。水槽與頁面邊距成比例。那么網(wǎng)格更加一致,也將允許我們輕松地在其中放置特殊元素,如輪播(carousel)。

第3步:定義 8pt間距系統(tǒng)

了幫助不同設(shè)計能力的設(shè)計者們在界面布局上的一致性和韻律感,統(tǒng)一設(shè)計到開發(fā)的布局語言,減少還原損耗。在大量的實踐中,我們提取了一組可以用于 UI 布局空間決策的數(shù)組,他們都保持了 8 倍數(shù)的原則、具備動態(tài)的韻律感。經(jīng)過驗證,可以在一定程度上幫助我們更快更好的實現(xiàn)布局空間上的設(shè)計決策。定義網(wǎng)格系統(tǒng)方法很多,如運用8點網(wǎng)格系統(tǒng)、斐波那契數(shù)列、某最小原子單位的增量、從底層系統(tǒng)參數(shù)化定義間距等,我們以最小原子單位的增量為例去定義網(wǎng)格系統(tǒng)。最小單元格的數(shù)值選擇需要從兩方面考慮:

  • 一方面是該數(shù)值是否能被大多數(shù)手機屏幕的寬度整除,即廣泛的適用性;
  • 另一方面是在具體使用時是否具有一定的靈活性。

在適用性方面,4、6、8、10這四個數(shù)值都是基本可以滿足的,在靈活性方面,4px表現(xiàn)最佳,但是頁面就會被分割的非常細碎,在設(shè)計時比較難于把控。因此我們需要根據(jù) APP 的實際情況選擇合適的數(shù)值,4px或6px單元格比較適合頁面內(nèi)容信息較多,布局排版比較復(fù)雜的產(chǎn)品。而8px單元格對一般的設(shè)計場景都可以很好的滿足,比較適合大多數(shù)的 項目,因此是比較推薦使用的。

那么假設(shè)我們以8為基準的去延展系統(tǒng)間距,得到如下間距系統(tǒng):

1、2、8、16、24、32、40、48、56、64、72、80、88、96、192等,這里都是8的倍數(shù)或能被 8 整除

但是目前間距數(shù)量太多,過于細碎也會導(dǎo)致畫間距比較亂,所以我們繼續(xù)優(yōu)化梳理(以6為基準,前面?zhèn)€數(shù)是后面?zhèn)€數(shù)的2倍遞增),得到以下間距系統(tǒng):

1、2、8、16、24、32、48、64、80、96

第4步:sketch布局設(shè)置

利用 sketch 的布局設(shè)置功能,即可快速搭建出網(wǎng)格系統(tǒng)的參考布局,在平時做設(shè)計的過程中,可以經(jīng)常使用 Ctrl+L 快捷鍵切換布局的顯示,提高設(shè)計效率。

我們來解釋一下這些設(shè)置分別是什么:

  • Total Width:就是內(nèi)容區(qū)域(Container)的值
  • Offset:表示柵格的偏移量,我們只要設(shè)定完成以后按Center按鈕即可,會自動居中;
  • Number of Columns:就是柵格數(shù)
  • Gutter on outside:是非常重要的設(shè)置,勾選以后才能跟前端的柵格算法匹配。
  • Gutter Width:就是柵格之間的間距
  • Columns Width:就是柵格的寬度

七、如何做到響應(yīng)式?

在傳統(tǒng)的柵格化系統(tǒng)設(shè)計中,列的寬度和水槽的寬度是保持不變的,只是列的「數(shù)量」發(fā)生變化。為什么要這么處理呢?

這是為了讓設(shè)計更簡單:

如果一組三張卡片分別放在桌面的四列上,那么在平板電腦上,會顯示兩張卡片,并把第三張卡片進行折行顯示在第二行上。不需要做任何的調(diào)整,因為已經(jīng)知道它位于第四列上了。

在手機上,答案也很簡單,只需要一張卡片,其他的就會自動堆到下面的行中。

但是目前我有更多的響應(yīng)策略,例如當視窗(Viewport)發(fā)生變化時,內(nèi)容區(qū)域的元素如何去響應(yīng),具體到我們當前的柵格系統(tǒng),就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子(BOX)四者的值(主要是寬度)如何變化,以及在這種變化之下我們頁面的布局如何調(diào)整。

1. 固定柵格或是斷點系統(tǒng)(Fixed boxes or breakpoint system)

固定網(wǎng)格,列寬和水槽寬不會改變,只是改變列的數(shù)目,當窗口縮放時,排版布局不會發(fā)生任何改變,只有當達到一個臨界值(開發(fā)那邊設(shè)置好的固定的值),界面才會發(fā)生改變。在此之前界面排版都是不變的,就像一部分被切掉了。

如果開發(fā)那邊寫了一個固定柵格,當你從桌面縮小到平板電腦,就像是在桌面的瀏覽器寬度時,你不會看到任何變化,設(shè)計就像是被剪掉了一樣。但當達到平板屏幕尺寸臨界點時,設(shè)計布局馬上就會改變,平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個值,同樣的事情也會發(fā)生,在到達另一個臨界值之前,設(shè)計看起來都是不變的。

下面是常見的斷點系統(tǒng)(Breakpoint System):

如圖,響應(yīng)式是以視窗的最小寬度作為基本依據(jù)來制定每種寬度下Columns、Gutters、與Margins的響應(yīng)策略,也就是說Viewport Min-width是做出響應(yīng)的觸發(fā)條件,視窗每達到一個最小寬度,就會觸發(fā)該寬度下預(yù)設(shè)的頁面布局方式,而每種布局都是在該寬度下的最佳布局,也是因此,響應(yīng)式才會在各種復(fù)雜分辨率條件下都能給用戶比較好的體驗。

每個視窗寬度的最小值是觸發(fā)響應(yīng)的關(guān)鍵值,因此我們給這些用于觸發(fā)的關(guān)鍵值起了個名字叫“Breakpoint”,每個Breakpoint觸發(fā)一種響應(yīng)策略。

2. 流動?xùn)鸥瘢‵luid Grid)

流動?xùn)鸥裣到y(tǒng)是編輯內(nèi)容,儀表板,圖像,視頻,數(shù)據(jù)可視化等理想的響應(yīng)策略。當窗口縮小時,內(nèi)容將動態(tài)的發(fā)生變化,文本會進行換行,元素也會變窄。然而,這些元素在內(nèi)容寬度縮小到下一個臨界值之前,布局是不會變化的。在各種情況下,對用戶來說,擴展內(nèi)容的大小比擴展可見內(nèi)容的數(shù)量更有用。

所以我想說的是,斷點BreakPoint只是一個更改布局的參考點。這就是為什么列寬和水槽的數(shù)量不會改變的原因,因為我們想讓設(shè)計師在考慮布局時能夠更容易地創(chuàng)建一致性。內(nèi)容寬度會隨著窗口的縮放而發(fā)生改變,例如圖片會縮小,文本會換行。水槽的寬度不一定是固定的,可以隨著頁面寬度變化。

在每個斷點處,列計數(shù)是固定的,列寬度是最小網(wǎng)格8PT的倍數(shù)。行高是列大小的倍數(shù),遵循推薦的縱橫比。邊距和填充是小單位的固定倍數(shù)。在斷點之間,實際列寬是網(wǎng)格區(qū)域的百分比,而不是一個小的單位倍數(shù)。內(nèi)容尺度流暢。

首先從所以屏幕大小中選擇一個基本尺寸,然后按照推薦的縱橫比以基本大小的倍數(shù)構(gòu)建每個響應(yīng)式尺寸。當每個塊使用相同基礎(chǔ)大小的倍數(shù)時,就會出現(xiàn)網(wǎng)格。遵循此方法可確保柵格系統(tǒng)一致性,甚至跨產(chǎn)品的一致性。

3. 混合柵格(Hybrid Boxes)

在實際項目中,使用流動網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動網(wǎng)格,因為它要去適應(yīng)各種不同終端的大小。后臺系統(tǒng)設(shè)計、工具型的界面設(shè)計就比較經(jīng)常使用網(wǎng)格和流動網(wǎng)格組合的形式。

例如的后臺管理系統(tǒng)(dashboard)側(cè)邊欄是固定網(wǎng)格,右側(cè)內(nèi)容是流動網(wǎng)格。混合柵格在每個維度上有不同的縮放規(guī)則,所以它們不使用統(tǒng)一的縮放比。當用戶需要調(diào)整瀏覽器的大小以使內(nèi)容在一個維度上伸縮而在另一個維度上不伸縮時,便使用混合網(wǎng)格。

八、面板對柵格系統(tǒng)的影響

How Panel behavior effect Grid system

1. 靈活面板(Flexible panels)

靈活的面板允許折疊和擴展狀態(tài)。面板的展開狀態(tài)為固定寬度,用戶無法調(diào)節(jié)。當用戶將鼠標懸停在折疊的面板上時,面板就會展開。當靈活的面板擴展時,它們要么壓縮內(nèi)容和網(wǎng)格,要么將內(nèi)容推到瀏覽器邊緣之外。

2. 固定面板(Fixed panels)

固定面板保持靜態(tài)寬度,不能折疊,也存在于響應(yīng)網(wǎng)格之外。

3. 懸浮面板(Floating panels)

此面板樣式漂浮在主要內(nèi)容區(qū)域之上,不影響響應(yīng)網(wǎng)格。浮動面板將任何UI元素隱藏在其下方,用戶必須將其移除。內(nèi)聯(lián)菜單、下拉菜單和工具提示也是浮動的。

九、總結(jié) 資源 擴展閱讀

寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計中使用柵格系統(tǒng),我知道對于我自己來說,我花了很多時間理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻,也閱讀了大量的文章,但每個人都在關(guān)注它為什么重要,卻不去注重到底怎么在自己的項目中使用這些原則。

你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計是如何對齊元素的,你將會開始閱讀這些設(shè)計系統(tǒng)。為了幫助理解,這里有一些設(shè)計系統(tǒng)概述了它們的網(wǎng)格使用:

Google’s Material Design System

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

Intuit’s Design System

https://designsystem.quickbooks.com/foundations/responsive-column-grid/

IBM’s Carbon Design System

https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals

在完全理解了網(wǎng)格的工作原理之后,你將成為了一名更好的設(shè)計師,因為你知道了你的設(shè)計將如何在臨界值之間進行轉(zhuǎn)換。你也可以落地你的設(shè)計,使它們能夠達到像素級完美。這樣的規(guī)范帶來了更一致,更簡潔的設(shè)計,當用戶從一個界面到另一個界面流轉(zhuǎn)時,這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計中去應(yīng)用這些網(wǎng)格,并和開發(fā)同學(xué)一起,以實踐的方式將它們落地,這將會是一個非常不錯的進步。

 

作者:Ivan 鄭子越;公眾號:?CoDesign設(shè)計社區(qū)

原文鏈接:https://mp.weixin.qq.com/s/dK0Nz4ixi3bSIW9XdEcHkw

本文由 @Ivan 鄭子越 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 受教了,謝謝

    來自陜西 回復(fù)
  2. 你真棒!謝謝分享~

    來自廣東 回復(fù)