2017 TOP10 RWD網站設計趨勢與特點
標簽：
響應式網站
2017.03.29
過去幾年，全球所有的設計師透過各種方式不斷探索RWD網頁設計的設計模式，2017年即將進入成熟階段， 成熟且大眾化的RWD網頁設計樣式才能提高網站流量。
網(wang)頁(ye)設(she)計(ji)是(shi)一(yi)種(zhong)產(chan)品(pin)設(she)計(ji)，因(yin)此(ci)，不(bu)夠(gou)實(shi)用(yong)或(huo)不(bu)符(fu)合(he)趨(qu)勢(shi)的(de)設(she)計(ji)，不(bu)隻(zhi)會(hui)導(dao)致(zhi)使(shi)用(yong)者(zhe)在(zai)網(wang)站(zhan)裏(li)迷(mi)航(hang)，更(geng)可(ke)能(neng)讓(rang)使(shi)用(yong)者(zhe)對(dui)你(ni)的(de)網(wang)站(zhan)失(shi)去(qu)耐(nai)心(xin)與(yu)信(xin)心(xin)。
在RWD的de時shi代dai，每mei一yi種zhong網wang頁ye設she計ji樣yang式shi都dou必bi須xu找zhao到dao得de以yi同tong時shi適shi應ying電dian腦nao版ban與yu手shou機ji版ban的de解jie決jue方fang案an，成cheng為wei當dang前qian網wang頁ye設she計ji師shi們men的de重zhong要yao課ke題ti。許xu多duo過guo去qu很hen炫xuan且qie視shi覺jiao效xiao果guo強qiang烈lie的de網wang頁ye設she計ji，在zaiRWD的考量下，不見得都可以繼續使用。設計師們必須找出同時可以符合RWD規範，又能具體呈現不同網頁設計風格的作法。我們來看看有哪些成熟的RWD設計方式，能讓你的客戶在手機上順利瀏覽，同時增進網站流量。
1.漢堡選單(hamburger menu)
漢堡選單目前已廣泛作為手機版選單的設計模式，IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式，並保留電腦版的主選單，使電腦版和手機版的操作習慣更為一致。
2.下拉選單(dropdown menu)
過去網站次要選單經常采用左選單的方式來設計，在RWD的時代，GE官guan網wang直zhi接jie將jiang這zhe些xie網wang站zhan次ci要yao選xuan單dan直zhi接jie在zai主zhu選xuan單dan上shang以yi下xia拉la選xuan單dan的de方fang式shi呈cheng現xian。如ru此ci的de規gui劃hua，可ke讓rang使shi用yong者zhe在zai電dian腦nao版ban選xuan單dan和he手shou機ji版ban選xuan單dan，看kan到dao一yi致zhi性xing的de選xuan項xiang。
3.全幅背景(full background)
全幅背景是目前最流行的RWD設計模式，不論內容是圖片輪撥(slider)、影片或單色色塊。由於大背景主要是透過width:100%讓畫麵尺寸自動貼合螢幕尺寸，一來在電腦或行動裝置都可以貼齊邊界，二來大背景可以呈現大螢幕的觀賞效果，因此成為最受歡迎的RWD設計樣式之一。
4.卡片列表(Card List)
卡片式列表應該算是RWD時代最典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換，與手機APP清單的瀏覽模式相近，可清楚呈現每個item，點選範圍也變大了，許多列表的樣式(例如news list)也都直接采用卡片式設計。
有圖有真相，透過照片來介紹是最簡單有效的方式。然而不是所有的相簿外掛都能RWD的(de)。全(quan)螢(ying)幕(mu)相(xiang)簿(bu)可(ke)直(zhi)接(jie)偵(zhen)測(ce)螢(ying)幕(mu)寬(kuan)高(gao)來(lai)自(zi)動(dong)調(tiao)整(zheng)圖(tu)片(pian)呈(cheng)現(xian)的(de)尺(chi)寸(cun)，不(bu)像(xiang)嵌(qian)入(ru)網(wang)頁(ye)的(de)相(xiang)簿(bu)，需(xu)顧(gu)慮(lv)網(wang)頁(ye)上(shang)其(qi)他(ta)元(yuan)素(su)相(xiang)對(dui)的(de)位(wei)置(zhi)，因(yin)此(ci)全(quan)景(jing)相(xiang)簿(bu)成(cheng)為(wei)RWD時代最受歡迎的相簿設計模式。
6.時間軸(timeline)
時間軸是最適合用來呈現曆史記錄概念的設計，經常用在企業曆史沿革。可RWD的時間軸必須能在電腦版和手機版正常呈現時序概念。
7.滑動表格
表格的呈現在RWD手機版中仍然是一件困難的事，很難想像如何在手機如此小的螢幕當中，要閱讀一張像Excel般複雜的表格。以Bootstrap的滑動式表格來說，可在手機上采用手指滑動的方式來回瀏覽整份表格。
隨著技術性問題的克服，全版雜誌式編排在2017年將逐漸成為RWD設計的主流設計樣式。雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌，少了左右的空白區塊，網頁看起來更為簡潔俐落。
9.旋轉輪播 (Carousal)
旋轉輪播在RWD持續發燒，好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數，以適應RWD網頁設計。
10.回到頁頂(Go to top)
GoToTop在zai跨kua裝zhuang置zhi瀏liu覽lan來lai說shuo，是shi個ge簡jian單dan又you十shi分fen便bian捷jie的de設she計ji。由you於yu一yi頁ye式shi網wang頁ye加jia上shang手shou機ji版ban的de設she計ji都dou是shi屬shu長chang頁ye式shi的de網wang頁ye，一yi個ge小xiao小xiao的de箭jian頭tou就jiu能neng幫bang助zhu使shi用yong者zhe回hui到dao頁ye首shou。
網(wang)頁(ye)設(she)計(ji)是(shi)一(yi)種(zhong)產(chan)品(pin)設(she)計(ji)，因(yin)此(ci)，不(bu)夠(gou)實(shi)用(yong)或(huo)不(bu)符(fu)合(he)趨(qu)勢(shi)的(de)設(she)計(ji)，不(bu)隻(zhi)會(hui)導(dao)致(zhi)使(shi)用(yong)者(zhe)在(zai)網(wang)站(zhan)裏(li)迷(mi)航(hang)，更(geng)可(ke)能(neng)讓(rang)使(shi)用(yong)者(zhe)對(dui)你(ni)的(de)網(wang)站(zhan)失(shi)去(qu)耐(nai)心(xin)與(yu)信(xin)心(xin)。
在RWD的de時shi代dai，每mei一yi種zhong網wang頁ye設she計ji樣yang式shi都dou必bi須xu找zhao到dao得de以yi同tong時shi適shi應ying電dian腦nao版ban與yu手shou機ji版ban的de解jie決jue方fang案an，成cheng為wei當dang前qian網wang頁ye設she計ji師shi們men的de重zhong要yao課ke題ti。許xu多duo過guo去qu很hen炫xuan且qie視shi覺jiao效xiao果guo強qiang烈lie的de網wang頁ye設she計ji，在zaiRWD的考量下，不見得都可以繼續使用。設計師們必須找出同時可以符合RWD規範，又能具體呈現不同網頁設計風格的作法。我們來看看有哪些成熟的RWD設計方式，能讓你的客戶在手機上順利瀏覽，同時增進網站流量。
1.漢堡選單(hamburger menu)
漢堡選單目前已廣泛作為手機版選單的設計模式，IBM官網則進一步將它發展成電腦版和手機版共用的選單樣式，並保留電腦版的主選單，使電腦版和手機版的操作習慣更為一致。
2.下拉選單(dropdown menu)
過去網站次要選單經常采用左選單的方式來設計，在RWD的時代，GE官guan網wang直zhi接jie將jiang這zhe些xie網wang站zhan次ci要yao選xuan單dan直zhi接jie在zai主zhu選xuan單dan上shang以yi下xia拉la選xuan單dan的de方fang式shi呈cheng現xian。如ru此ci的de規gui劃hua，可ke讓rang使shi用yong者zhe在zai電dian腦nao版ban選xuan單dan和he手shou機ji版ban選xuan單dan，看kan到dao一yi致zhi性xing的de選xuan項xiang。
3.全幅背景(full background)
全幅背景是目前最流行的RWD設計模式，不論內容是圖片輪撥(slider)、影片或單色色塊。由於大背景主要是透過width:100%讓畫麵尺寸自動貼合螢幕尺寸，一來在電腦或行動裝置都可以貼齊邊界，二來大背景可以呈現大螢幕的觀賞效果，因此成為最受歡迎的RWD設計樣式之一。
4.卡片列表(Card List)
卡片式列表應該算是RWD時代最典型的設計樣式。卡片式的設計可以在電腦版和手機版自由切換，與手機APP清單的瀏覽模式相近，可清楚呈現每個item，點選範圍也變大了，許多列表的樣式(例如news list)也都直接采用卡片式設計。
有圖有真相，透過照片來介紹是最簡單有效的方式。然而不是所有的相簿外掛都能RWD的(de)。全(quan)螢(ying)幕(mu)相(xiang)簿(bu)可(ke)直(zhi)接(jie)偵(zhen)測(ce)螢(ying)幕(mu)寬(kuan)高(gao)來(lai)自(zi)動(dong)調(tiao)整(zheng)圖(tu)片(pian)呈(cheng)現(xian)的(de)尺(chi)寸(cun)，不(bu)像(xiang)嵌(qian)入(ru)網(wang)頁(ye)的(de)相(xiang)簿(bu)，需(xu)顧(gu)慮(lv)網(wang)頁(ye)上(shang)其(qi)他(ta)元(yuan)素(su)相(xiang)對(dui)的(de)位(wei)置(zhi)，因(yin)此(ci)全(quan)景(jing)相(xiang)簿(bu)成(cheng)為(wei)RWD時代最受歡迎的相簿設計模式。
6.時間軸(timeline)
時間軸是最適合用來呈現曆史記錄概念的設計，經常用在企業曆史沿革。可RWD的時間軸必須能在電腦版和手機版正常呈現時序概念。
7.滑動表格
表格的呈現在RWD手機版中仍然是一件困難的事，很難想像如何在手機如此小的螢幕當中，要閱讀一張像Excel般複雜的表格。以Bootstrap的滑動式表格來說，可在手機上采用手指滑動的方式來回瀏覽整份表格。
隨著技術性問題的克服，全版雜誌式編排在2017年將逐漸成為RWD設計的主流設計樣式。雜誌式的區塊分割可以讓網頁看起來更像閱讀雜誌，少了左右的空白區塊，網頁看起來更為簡潔俐落。
9.旋轉輪播 (Carousal)
旋轉輪播在RWD持續發燒，好的Carousal元件可設定在不同的螢幕寬度顯示不同的筆數，以適應RWD網頁設計。
10.回到頁頂(Go to top)
GoToTop在zai跨kua裝zhuang置zhi瀏liu覽lan來lai說shuo，是shi個ge簡jian單dan又you十shi分fen便bian捷jie的de設she計ji。由you於yu一yi頁ye式shi網wang頁ye加jia上shang手shou機ji版ban的de設she計ji都dou是shi屬shu長chang頁ye式shi的de網wang頁ye，一yi個ge小xiao小xiao的de箭jian頭tou就jiu能neng幫bang助zhu使shi用yong者zhe回hui到dao頁ye首shou。
薦讀文章1：網站設計中那些直擊“痛點”的設計秘決
