響應(yīng)式設(shè)計模式
日期 : 2022-02-08 21:44:44
隨著響應(yīng)式設(shè)計不斷完善,我們面臨的挑戰(zhàn)也隨著升級:如何為尺寸、環(huán)境各異的終端打造既美觀又實用的用戶界面?如何優(yōu)化深達4級的導航欄?如何處理行列眾多的表格?如何實現(xiàn)輪播圖片效果? 令人鼓舞的是,從業(yè)人員在不斷創(chuàng)新:另辟蹊徑進行響應(yīng)式頁面布局、調(diào)整現(xiàn)有設(shè)計規(guī)范使之適應(yīng)多樣化的終端、創(chuàng)造全新的交互模式。對于一名網(wǎng)絡(luò)設(shè)計師而言,多終端時代既充滿機遇也遍布挑戰(zhàn)。模塊化、設(shè)計模式和風格指南運行環(huán)境不同、屏幕尺寸各異、用戶設(shè)置不.....用Photoshop制作出全終端的設(shè)計圖已經(jīng)成了不可能完成的任務(wù)。所以,我們的當務(wù)之急是將設(shè)計重心由頁面轉(zhuǎn)向系統(tǒng)。世間萬物都由分子組成,分子又由原子構(gòu)成,同理,網(wǎng)頁也由很多元素構(gòu)成,因而可以把系統(tǒng)化的設(shè)計拆分成模塊,再進一步細化為易于完成的組件。在這種設(shè)計模式下,需要定義網(wǎng)頁中的設(shè)計元素,明確各元素在響應(yīng)式環(huán)境中的分工,然后再把各元素組裝成完整的系統(tǒng)。
前端風格指南指項目中設(shè)計元素的集合,可以幫助我們從傳統(tǒng)網(wǎng)頁設(shè)計模式順利過渡到模塊化設(shè)計。Anna Debenham在“前端風格指南”-文中列舉了指南的諸多優(yōu)點:測試更便捷、工作流程更優(yōu)化、團隊成員可共享詞匯表和可供參考。
隨著響應(yīng)式網(wǎng)頁設(shè)計的普及,風格指南也變得前所未有地重要。還有什么測試方法比直接在終端中顯示設(shè)計元素更便捷呢?眾人拾柴火焰高,響應(yīng)式設(shè)計風格指南愈加充實:星巴克慷慨地分享了對網(wǎng)站進行響應(yīng)式改造的資料庫; Samantha Warren建立了Style Tiles,可以抓取項目的字體、顏色和界面元素的設(shè)計輔助網(wǎng)站; Dan Cederholm打造了Pears,開發(fā)個人資料庫的開源框架;我也創(chuàng)立了一個響應(yīng)式設(shè)計模式的開源資料庫。
- 條分縷析
在大中型屏幕上顯示效果大致相同,在小屏幕上變化較大。主體自適應(yīng)模式受許多響應(yīng)式網(wǎng)站青睞,原因在于它與下文將提到的復(fù)雜模式相比,只需維護兩種主要設(shè)計視圖。
- 板塊下移式
- 布局轉(zhuǎn)換式
媒介查詢是個很有趣的功能,但也不能為了響應(yīng)式而響應(yīng)式,設(shè)計出過于復(fù)雜的頁面布局。如果你要更新主要斷點的響應(yīng)式設(shè)計,那就相當于為一個頁面布局創(chuàng)造出適合不同終端的重排方式,復(fù)雜程度不容小覷。要將響應(yīng)式設(shè)計的目標銘記于心:為用戶在各終端上提供可讀性、觀賞性與功能性兼?zhèn)涞臑g覽體驗。有時候要用到200次媒介查詢,有時候只需要2次。
- 微調(diào)式
- 精簡式
內(nèi)容縱向堆疊不一定是壞事兒,但手機用戶習慣于滾動瀏覽只包含一種內(nèi)容縱向堆疊不一定是壞事兒,但手機用戶習慣于滾動瀏覽只包含一種多種頁面內(nèi)容類型會給用戶增加負擔,獲取所需信息變成了尋寶游戲,當用戶無意撞見這些新增的無關(guān)內(nèi)容時,可能會感到失望或困惑。怎么辦呢?精簡式布局設(shè)計是個明智的選擇,把頁面元素精簡掉,需要時可通過側(cè)滑欄顯示。Facebook移 動版的側(cè)滑導航欄推廣了這種模式,把屏幕可視區(qū)留給核心內(nèi)容,附加內(nèi)容放到容易展開的側(cè)邊欄里。Jason Weavers和L uke Wroblewski做了很棒的效果展示。