&

響應(yīng)式設(shè)計(jì)模式

日期 : 2022-02-08 21:44:44

隨著響應(yīng)式設(shè)計(jì)不斷完善，我們面臨的挑戰(zhàn)也隨著升級(jí):如何為尺寸、環(huán)境各異的終端打造既美觀又實(shí)用的用戶界面?如何優(yōu)化深達(dá)4級(jí)的導(dǎo)航欄?如何處理行列眾多的表格?如何實(shí)現(xiàn)輪播圖片效果? 令人鼓舞的是，從業(yè)人員在不斷創(chuàng)新:另辟蹊徑進(jìn)行響應(yīng)式頁(yè)面布局、調(diào)整現(xiàn)有設(shè)計(jì)規(guī)范使之適應(yīng)多樣化的終端、創(chuàng)造全新的交互模式。對(duì)于一名網(wǎng)絡(luò)設(shè)計(jì)師而言，多終端時(shí)代既充滿機(jī)遇也遍布挑戰(zhàn)。模塊化、設(shè)計(jì)模式和風(fēng)格指南運(yùn)行環(huán)境不同、屏幕尺寸各異、用戶設(shè)置不.....用Photoshop制作出全終端的設(shè)計(jì)圖已經(jīng)成了不可能完成的任務(wù)。所以，我們的當(dāng)務(wù)之急是將設(shè)計(jì)重心由頁(yè)面轉(zhuǎn)向系統(tǒng)。世間萬(wàn)物都由分子組成，分子又由原子構(gòu)成，同理，網(wǎng)頁(yè)也由很多元素構(gòu)成，因而可以把系統(tǒng)化的設(shè)計(jì)拆分成模塊，再進(jìn)一步細(xì)化為易于完成的組件。在這種設(shè)計(jì)模式下，需要定義網(wǎng)頁(yè)中的設(shè)計(jì)元素，明確各元素在響應(yīng)式環(huán)境中的分工，然后再把各元素組裝成完整的系統(tǒng)。
前端風(fēng)格指南指項(xiàng)目中設(shè)計(jì)元素的集合，可以幫助我們從傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)模式順利過(guò)渡到模塊化設(shè)計(jì)。Anna Debenham在“前端風(fēng)格指南”-文中列舉了指南的諸多優(yōu)點(diǎn):測(cè)試更便捷、工作流程更優(yōu)化、團(tuán)隊(duì)成員可共享詞匯表和可供參考。
隨著響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的普及，風(fēng)格指南也變得前所未有地重要。還有什么測(cè)試方法比直接在終端中顯示設(shè)計(jì)元素更便捷呢?眾人拾柴火焰高，響應(yīng)式設(shè)計(jì)風(fēng)格指南愈加充實(shí):星巴克慷慨地分享了對(duì)網(wǎng)站進(jìn)行響應(yīng)式改造的資料庫(kù); Samantha Warren建立了Style Tiles，可以抓取項(xiàng)目的字體、顏色和界面元素的設(shè)計(jì)輔助網(wǎng)站; Dan Cederholm打造了Pears,開(kāi)發(fā)個(gè)人資料庫(kù)的開(kāi)源框架;我也創(chuàng)立了一個(gè)響應(yīng)式設(shè)計(jì)模式的開(kāi)源資料庫(kù)。

條分縷析

我們要從更加模塊化的角度看待網(wǎng)頁(yè)設(shè)計(jì)。一起來(lái)試試看吧，把網(wǎng)頁(yè)拆解開(kāi)來(lái)，對(duì)新興的響應(yīng)式設(shè)計(jì)模式加以研究。我們會(huì)接觸到頁(yè)面布局、導(dǎo)航欄和交互元素的傳統(tǒng)處理方法。仔細(xì)研究新模式和現(xiàn)有的處理方法，我們可以將二者結(jié)合起來(lái)推陳出新。
在大中型屏幕上顯示效果大致相同，在小屏幕上變化較大。主體自適應(yīng)模式受許多響應(yīng)式網(wǎng)站青睞，原因在于它與下文將提到的復(fù)雜模式相比，只需維護(hù)兩種主要設(shè)計(jì)視圖。

板塊下移式

許多三欄式網(wǎng)站傾向于選擇板塊下移作為響應(yīng)式處理方法。如果窗口尺寸不足以橫向容納三個(gè)板塊，其中一個(gè)側(cè)邊欄就會(huì)下移到另兩欄下方。在小屏幕終端上，三個(gè)欄目會(huì)縱向堆疊。這種方法適用于內(nèi)容無(wú)關(guān)聯(lián)的三欄網(wǎng)站，如果內(nèi)容有關(guān)聯(lián)，在板塊移動(dòng)過(guò)程中很難保證內(nèi)容層級(jí)不發(fā)生變化。

布局轉(zhuǎn)換式

這種模式相對(duì)復(fù)雜，要為不同斷點(diǎn)設(shè)置不同的頁(yè)面布局。正如L uke在文中所說(shuō): “這種方法本質(zhì)上就比前兩種復(fù)雜，需要投入更多精力，所以普及度相對(duì)要差一些。”
媒介查詢是個(gè)很有趣的功能，但也不能為了響應(yīng)式而響應(yīng)式，設(shè)計(jì)出過(guò)于復(fù)雜的頁(yè)面布局。如果你要更新主要斷點(diǎn)的響應(yīng)式設(shè)計(jì)，那就相當(dāng)于為一個(gè)頁(yè)面布局創(chuàng)造出適合不同終端的重排方式，復(fù)雜程度不容小覷。要將響應(yīng)式設(shè)計(jì)的目標(biāo)銘記于心:為用戶在各終端上提供可讀性、觀賞性與功能性兼?zhèn)涞臑g覽體驗(yàn)。有時(shí)候要用到200次媒介查詢，有時(shí)候只需要2次。

微調(diào)式

顧名思義，微調(diào)模式頗具極簡(jiǎn)風(fēng)格，尤其適用于單欄布局的文章或者網(wǎng)站。窗口尺寸變化時(shí)，微調(diào)模式會(huì)保持頁(yè)面基本結(jié)構(gòu)不變，只對(duì)字號(hào)、圖片和某些其他元素做細(xì)微調(diào)整。

精簡(jiǎn)式

Luke提出了前幾種模式都存在的根本問(wèn)題: 前幾種響應(yīng)式設(shè)計(jì)模式有共同特征，小屏幕顯示時(shí)傾向于將內(nèi)容縱向堆疊，最后把一個(gè)包含各種元素的長(zhǎng)頁(yè)面呈現(xiàn)給用戶。
內(nèi)容縱向堆疊不一定是壞事兒，但手機(jī)用戶習(xí)慣于滾動(dòng)瀏覽只包含一種內(nèi)容縱向堆疊不一定是壞事兒，但手機(jī)用戶習(xí)慣于滾動(dòng)瀏覽只包含一種多種頁(yè)面內(nèi)容類型會(huì)給用戶增加負(fù)擔(dān)，獲取所需信息變成了尋寶游戲，當(dāng)用戶無(wú)意撞見(jiàn)這些新增的無(wú)關(guān)內(nèi)容時(shí)，可能會(huì)感到失望或困惑。怎么辦呢?精簡(jiǎn)式布局設(shè)計(jì)是個(gè)明智的選擇，把頁(yè)面元素精簡(jiǎn)掉，需要時(shí)可通過(guò)側(cè)滑欄顯示。Facebook移動(dòng)版的側(cè)滑導(dǎo)航欄推廣了這種模式，把屏幕可視區(qū)留給核心內(nèi)容，附加內(nèi)容放到容易展開(kāi)的側(cè)邊欄里。Jason Weavers和L uke Wroblewski做了很棒的效果展示。