響應式網(wǎng)站頁面設計有哪些布局方式呢？

時間：2024-02-12 17:05:02 | 來源：網(wǎng)站運營

時間：2024-02-12 17:05:02 來源：網(wǎng)站運營

響應式網(wǎng)站頁面設計有哪些布局方式呢？：希望我的文章可以幫到你吧！

近年來，市面上出現(xiàn)了許多新型設備，從智能手表到超寬屏電視，設備的屏幕尺寸、交互方式都在不斷地變化。人們已經(jīng)習慣在多個設備之間進行切換，多屏互動成為日常生活中必不可少的一部分。

「響應式設計」可以為不同設備的用戶提供更好的視覺呈現(xiàn)與體驗，越來越多的設計師與開發(fā)工程師采用這個技術，「響應式」已經(jīng)成為多屏體驗設計的必需品，用“大勢所趨”來形容也不為過。

01「 什么是響應式?」

響應式的由來

過去，網(wǎng)頁設計大多都是定制化的，只需要考慮適配主流設備的屏幕尺寸，分別定制一套設計方案就能滿足需求。

但是，一旦有新的屏幕尺寸出現(xiàn)，現(xiàn)有頁面就有很大機率會出現(xiàn)適配問題，讓用戶體驗大打折扣。（如: 在小屏設備打開了一個僅適合在大屏設備瀏覽的頁面）

顯然, 基于一個固定尺寸對網(wǎng)頁進行設計已經(jīng)無法滿足用戶設備多樣化的需求。理想的情況是為每一個設備都定制設計方案, 但這對大多數(shù)網(wǎng)站來說都是不切實際的, 因為實現(xiàn)成本太高。

2010年5月，著名網(wǎng)頁設計師Ethan Marcotte提出「響應式布局」,即一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本。

響應式是為解決移動互聯(lián)網(wǎng)瀏覽需求而誕生的, 大大地解放了設計師與開發(fā)工程師的勞動力，這一概念的提出迅速引起了業(yè)界的廣泛關注。

直至今天，依然有很多設計師使用「響應式」解決多屏設計的適配問題，甚至運用到跨屏產(chǎn)品的創(chuàng)新體驗當中。

響應式的定義與好處

「響應」就是系統(tǒng)對于外部變化的反饋跟適應，「響應式」就是系統(tǒng)做出這種反饋所依據(jù)的方案與策略。

對于一個網(wǎng)頁而言，「響應式」響應的就是媒介與視窗的變化，響應的結果在視覺上表現(xiàn)為: 頁面在不同媒介、不同視窗下會有不同的布局結構、版式設計、不同數(shù)量的信息展示等。

這個定義有點抽象, 給大家舉個例子:

如上圖,隨著視窗的變化,頁面有著不同的呈現(xiàn),這就是通過響應式實現(xiàn)的。

判斷一個網(wǎng)站是不是響應式，只需要用鼠標拖動邊框，看看是否會產(chǎn)生響應變化。

響應式的好處是能實現(xiàn)一站多屏使用，實現(xiàn)和維護的成本比較低, 更重要的是能讓用戶通過不同的設備訪問都能獲得最佳的用戶體驗。

響應式的實現(xiàn)原理

響應式策略如何制定是由設計師來主導的, 所以, 設計師需要深入了解實現(xiàn)原理,這樣有利于與開發(fā)工程師高效地協(xié)作。

- 斷點

指頁面布局發(fā)生變化的節(jié)點。設計師可以根據(jù)業(yè)務需求,定義不同斷點區(qū)間下的視覺呈現(xiàn)。

- 媒體查詢

媒體查詢是開發(fā)工程師實現(xiàn)「響應式」的一個方法,「媒體查詢」能在不同的條件下調(diào)用不同的樣式，使頁面在不同設備下達到不同的展示效果。

設計師需要設置好「斷點」,而開發(fā)工程師需要通過「媒體查詢」快速判斷設備屏幕尺寸在哪個「斷點」區(qū)間內(nèi), 然后展示對應區(qū)間的視覺樣式, 如下圖:

02「什么是柵格？」

柵格的定義與好處

網(wǎng)頁的柵格就是以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局以及信息分布。

在日常的設計工作中，我們常會用「參考線」讓頁面元素對齊，「柵格」其實也是一個幫助我們規(guī)范網(wǎng)頁排版的好工具。

使用柵格有很多好處。除了能讓頁面設計更有規(guī)律、好看之外，還能作為全站設計遵循的框架與標準，減少設計決策成本，也便于團隊協(xié)作。

從開發(fā)角度看，柵格能保證布局的一致性和可復用性，降低了設計師與開發(fā)工程師的溝通成本，可以提升效率；從用戶角度看，柵格能讓信息的展示更清晰，提升用戶的閱讀效率與體驗。

柵格的組成元素

- 網(wǎng)格

網(wǎng)格是構成頁面柵格的最小單位，而桌面端我們一般用8作為網(wǎng)格的最小單位。

8能被大部分桌面端的設備分辨率整除，能保證頁面放大或者縮小時還能保持清晰；此外，增加8px或減少8px在視覺上比較容易區(qū)分差異，這樣能保證在響應決策時的成本不會太大。

- 欄/槽/頁邊距

柵格是由「欄」和「槽」交替分布形成的。

「欄」是擺放網(wǎng)頁內(nèi)容的區(qū)域，「槽」用來調(diào)節(jié)相鄰兩個欄的間距，把控頁面的留白，欄和槽的寬度都以網(wǎng)格作為基本單位。

「頁邊距」即柵格寬度外的邊距，也就是頁面兩邊的留白，通常作為自適應的距離，例如：小屏設備和大屏設備之間做響應變化，就會改變頁邊距。

為什么要用柵格設計響應式？

頁面要實現(xiàn)響應式有兩個前提條件：

1.頁面布局具有規(guī)律性2.元素寬高可用百分比代替固定數(shù)值

這兩個條件剛好是柵格所具備的，設計響應式時使用柵格可以事半功倍喔！

03「 如何設計響應式？」

第一步: 選擇響應式方案

做響應式之前需要評估團隊現(xiàn)有的資源和能力, 選擇合適的響應式方案。在《U一點·料:阿里巴巴1688UED體驗設計踐行之路》中提到「常見的三種響應式類型」,我認為概括得很到位：

- 類型1: 多個固定尺寸切換的響應式

基于核心用戶的設備,選擇典型的分辨率,分別定制出幾個尺寸的設計方案,投射到相應的設備中。

這個方案能讓一些尺寸相鄰的設備可共用一套頁面,但不是真正意義上的響應式,因為只考慮了特定尺寸的體驗。

優(yōu)點是不用考慮同一斷點區(qū)域內(nèi)的拉伸規(guī)則,基于現(xiàn)有的設計與開發(fā)流程就能完成網(wǎng)站搭建。

- 類型2: 為移動端、桌面端分別打造兩套區(qū)間尺寸的響應式

評估網(wǎng)站用戶的設備類型、屏幕尺寸、網(wǎng)站定位以及不同終端環(huán)境的用戶使用特性,分別為移動端和桌面端打造兩套獨立的頁面。

這個方案工作量較大且會影響體驗的一致性。另外,不同設備之間的界限已經(jīng)逐漸模糊(如大屏手機與小屏平板、大屏平板和小屏筆記本電腦),在劃分斷點的時候會變得很困難。

對于一些內(nèi)容較為豐富的綜合型的網(wǎng)站來說,這套方案是一個不錯的選擇, 能夠較好地考慮到設備的使用環(huán)境和用戶的操作習慣。

- 類型3: 跨端無縫體驗的響應式

從桌面端到移動端，覆蓋所有用戶的設備尺寸,能兼顧不同類型設備的交互行為差異,保證用戶體驗的一致性。

這套方案需要考慮不同設備的操作差異與各斷點區(qū)間的內(nèi)容如何進行適配。

跨端無縫體驗的響應式對設計師與開發(fā)工程師的能力都提出了更高的要求,有很多難點需要攻克，如：核心業(yè)務的呈現(xiàn)、設計體驗、跨端交互、頁面性能等。

第二步: 選擇斷點與響應區(qū)間

設計師輸出幾套設計稿, 取決于采用哪一種響應方式。確定了響應方式,還需要根據(jù)目標用戶的設備屏幕尺寸設定斷點。

如果需要做一個全新的網(wǎng)站, 但無法獲取目標用戶的設備屏幕尺寸,建議可以查看一下行業(yè)內(nèi)哪些尺寸的占比是比較多的,可以用占比多的尺寸作為斷點(如:桌面端的屏幕尺寸占比前三分別是:1920*1080px、1366*768px、1440*900px)。

推薦大家閱讀谷歌Material Design設計手冊，里面有很多網(wǎng)站搭建的設計原則,也包括了主流設備的常用斷點區(qū)間。




第三步: 思考布局與柵格

- 響應式設計一般從大屏往小屏做

我的個人習慣是從桌面端著手設計響應式,因為桌面端的信息是最多的,往移動端適配會比較流暢，就像我們平時做設計的時候,會先思考頁面信息最多、最全的情況。

- 響應式常用布局

彈性布局以百分比作為頁面的基本單位,可以適應一定范圍內(nèi)所有尺寸的設備屏幕及瀏覽器寬度, 可以理解為頁面中的元素不是固定尺寸的,而是會進行等比縮放的。

混合布局與彈性布局比較類似,只是采用了像素和百分比兩種單位作為頁面單位,也就是頁面中部分的內(nèi)容可以設置為固定尺寸,其余部分還是根據(jù)設備視窗的變化等比縮放。

- 響應式布局調(diào)整

在各個斷點區(qū)間，我們都可以賦予該區(qū)間特有的視覺呈現(xiàn)。常見的有：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。

內(nèi)容增減某些內(nèi)容在大屏端可以呈現(xiàn)得比較好，但到小屏端的體驗會非常不好，可以選擇把這些內(nèi)容在小屏端隱藏掉。

布局調(diào)整比較常見的是模塊的排列順序與數(shù)量的變化，如：在桌面端一行展示5個模塊，大屏移動端一行展示3個模塊，而小屏移動端則變?yōu)橐恍姓故?個模塊。

樣式變更針對不同的斷點區(qū)間設計不同的樣式，如: 在桌面端我們可以把導航欄信息展示完全，但是到了移動端，由于視窗變小，需要把信息收起，點擊側邊欄才能展示完全，如下圖:

- 響應式常用柵格

響應式常用「12柵格」或「24柵格」，也就是縱向有12欄或24欄。

12等分的柵格在前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用，適用于業(yè)務信息較少，信息體積較大的頁面設計。

24柵格變化更加靈活,適用于業(yè)務信息量大，信息分組較多，信息體積較小的頁面設計。

- 設計靈感與自測

推薦大家使用everysize，它可以把響應式網(wǎng)站各區(qū)間的設計很直觀地展示出來。一方面，可以學習一下優(yōu)秀響應式網(wǎng)站的多屏信息處理，另一方面，可以測試自己做的網(wǎng)站效果。

第四步: 確定內(nèi)容占比與排版

把框架定好了,接下來在劃分好的區(qū)域內(nèi)進行內(nèi)容排版即可，就不展開說明了。

第五步: 制定響應策略

完成設計稿后,可以把響應策略制作成如下表格，在頁面中標明相關元素的變化規(guī)律, 便于與開發(fā)工程師以及團隊其他設計小伙伴進行溝通。

END

在文章的最后我為大家整理了一些常用工具以及實戰(zhàn)總結，希望能幫助大家快速上手設計響應式吧！請點贊 / 在看 / 收藏三連喔，我們下期見！




Bootstrap優(yōu)站精選https://www.youzhan.org/這里有海量的響應式網(wǎng)站,可以上去找找靈感

Everysizehttps://everysize.kibalabs.com/把好看的響應式網(wǎng)站導入可快速生成各斷點的頁面呈現(xiàn),可以學習頁面布局，也可以把自己設計的網(wǎng)站導入Everysize測試效果

谷歌Material Design設計手冊https://material.io/design/

Grid.Guide柵格平臺工具http://grid.guide/這是一個在線生成柵格的工具,十分方便！預覽了大概的效果后,可以在sketch中直接制作柵格

參考: 《U一點·料:阿里巴巴1688UED體驗設計踐行之路》流動法則與響應度量—1688網(wǎng)站的響應式設計這本書在微信讀書APP可看這篇實戰(zhàn)文章總結得很全面，響應度量很值得學習

參考: 《超全面！柵格系統(tǒng)及其在后臺設計中的應用總結》https://www.uisdc.com/grid-system-and-application-in-background-design雖然寫的是后臺設計,但這篇文章總結的設計策略很實用

更多干貨文章,請關注我的微信公眾號: 喵小大的手記