iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
2
自我挑戰組

中風人生30天全記錄系列 第 4

第十二話…Modern Web Design

不知道從什麼時候開始,每年都會有神人寫些貼文來介紹他認為的年度網站計趨勢,例如:20 Modern Web Design Examples for Inspiration in 2016
又或者是6 Web Design Trends You Must Know for 2015 & 2016,也可能你自己心中有一套自己的標準。
但就我所見,所謂Modern Web Design只有兩個大趨勢,一個是一頁書式設計(Single Page WebSite),甚至還有網站專門在介紹一頁書式的網站
其實,MSDN網站Apple官網,也都是一頁書設計的實例。一頁書的泛濫,和框架Bootstrap的流行有關,看Bootstrap的官網,就像是一頁書的最佳應用實例。
MSDN官網
http://ithelp.ithome.com.tw/upload/images/20161226/20017649YS0HYFLcSX.png
Apple官網
http://ithelp.ithome.com.tw/upload/images/20161226/20017649Wa6sHWPz5G.png
Boostrap官網
http://ithelp.ithome.com.tw/upload/images/20161226/20017649OtZlwIRnfA.png
基本上,一頁書的流行和行動裝置的盛行有直接關連,在手機上看一頁書式網站,只要往上滑動就行了,相當方便,如果是傳統網站就還要左右滑動,瀏覽起來沒有一頁書式的方便了。
Single-Page Website,主要是UI及UX的極致發揮的結果,強烈的視覺效果和簡單到不需要複雜的操作經驗,讓網站有更吸引人注目的效果,經常搭配壯濶山河或視覺效果衝突激烈的照片,我們可以參考美國亞歷桑那州官網,這種配搭配雄壯山河照片或視覺衝突強烈照片的一頁書網站,通常還會有個Hero Image的稱呼,意思是全頁照片當成網頁的橫條旗幟(Banner)來用。
第二個大趨勢是所謂RWD(Responsive Website Design),第一次看到RWD,心想,唉呀!我怎麼和網站開發技術脫節這麼嚴重,什麼時後網站開發也講究後輪驅動(Rear-Wheel Drive,RWD)了呀?難不成有人把汽車電腦拿來當網站伺服器了嗎?後置引擎對網站效能有影響?胡思亂想一陣子,才發現現是指所謂回響式網站設計、或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。
所謂回響式的意思是指網頁會自動配合瀏覽者的設備配置的螢幕尺寸及解像度來自動調整網頁上各個元件的大小及相對位置,以達到最佳瀏覽經驗的一種網頁開發技術,不然,網站開發者面臨各式各樣尺寸和解像度的螢幕,單是調網頁大小和擺放元件位置,就傷腦筋,什麼UI&UX,根本就顧不了。
同樣的,RWD也是由Bootstrap框架盛行而流行來,Bootstrap的官網上有一個篇幅在講Bootstrap對不同尺寸螢幕的自動支援,參見下圖,網站開發者只要設計一次,其他就交給Bootstrap框架來幫你自動調整,不管是5吋手機,10吋小平板或42吋大螢幕,Bootstrap都幫你搞定,你只要專設計網站UI即可。
http://ithelp.ithome.com.tw/upload/images/20161226/200176495wIAvKl0tY.png
但,實務上,神人開網站總是會有超出Bootstrap能支援的地方,這時,神人多半拿Bootstrap為基礎來改,像是滑動選單或是縮邊選單,是有神人分享修改Bootstrap.css檔案的做法。例如:navbar lateral slide menu
嚴格來說,RWD和式網頁是相輔相成的兩個網站開發趨勢,一頁書式網頁讓手機瀏覽網站更簡便,RWD則讓網站能在各種尺寸的螢幕上瀏覽,不用特別修改。


上一篇
第十一話..ASP.NET.NET Core專案
下一篇
第十三話...Modern Web Design的幾個基本爛要素
系列文
中風人生30天全記錄5

1 則留言

0
海綿寶寶
iT邦大神 1 級 ‧ 2016-12-26 22:02:32
半神半聖亦半仙
全儒全道是全賢
腦中真書藏萬卷
掌握文武半邊天

提到一頁書
怎麼可以不提到我呢
/images/emoticon/emoticon01.gif

賽門 iT邦超人 1 級 ‧ 2016-12-26 23:19:26 檢舉

素還真,沒想到怎麼出場。

我要留言

立即登入留言