移動設備的盛行,改變了網站網頁設計的技術,同時也影響了設計風格。RWD響應式網頁設計、全幅背景、一頁式網頁成了主流設計,來看看有哪些設計趨勢適合用在期盼高大上的企業網站上。
1.響應式網頁設計RWD,Responsive Web Design
響應式網頁設計(Responsive web design,RWD),又稱為自適應網頁設計。是一種網頁設計的技術工法,可使網站在多種瀏覽裝置(桌電、筆電、平板電腦、移動電話)上閱讀和瀏覽。RWD網頁可讓同一個網頁畫面隨著屏幕或瀏覽器寬度變化,同一筆圖文數據在桌電為橫式排列,當瀏覽器寬度縮減到手機尺寸時,則顯示為直式排列。當你用桌電看到一個網頁想傳給正在用手機上網的朋友時,不會因裝置尺寸不同而無法正常閱讀。

2.大背景(全幅背景)Full-width Background
隨著屏幕尺寸越來越大以及行動裝置盛行,可隨屏幕縮放圖片尺寸的全幅背景網頁設計開始流行起來。全幅背景相較于傳統固定寬度的banner情境圖,更能突顯氣勢磅薄的企業形象。近來在html5影片格式的支持下,還可以采用全幅視頻。

3.一頁式網頁One-page Web Design
平板電腦及行動裝置改變了人們瀏覽網頁的方式。過去在使用臺式機常常會希望網頁不要有卷軸,到了平板電腦反而開始習慣手滑屏幕來瀏覽網頁,這個時候一頁式網頁就成了設計主流。「單欄式網頁設計」也是一頁式網頁的呈現特點,單欄式網頁設計近似于瀏覽PPT的概念,讓user一次專注于了解一件事情,不會分心去看左右不相干的文章。過去一個頁面塞滿一堆信息的網頁設計已經不再流行,在信息海量的時代,簡單的內存塊式設計才能讓客戶專心理解你想傳達的信息。

4.固定式菜單Fixed Menu
固定式的主菜單也是近來流行的趨勢之一,尤其是功能性菜單,大多會設計成固定式菜單。當網頁逐漸趨向一頁式的版型設計后,由于網頁卷到下方后就找不到主菜單,這個時候就會將主菜單改為固定式的做法。在網頁下方加上「回到頁頂」(Back to top)的固定式按鈕,也是常見的解決方案。

5.扁平化設計Flat Design
扁平化設計流行一段時間了,最早從微軟Windows8問世開始,后來連Apple iOS7也開始采用扁平化設計,以別過去講求擬真立體感的設計。有趣的是,這次微軟難得站在流行設計的前端。
6.微動畫Micro Animation
過去Flash時代常見企業網站充滿了飛天鉆地的動畫,這么多年大家也看膩了,取而代之的是簡單、不影響閱讀的微動畫,首頁輪播圖(Slider)是常見的做法。另外,用CSS3制作的色彩漸變按鈕、主菜單特效,都讓企業網站有畫龍點睛的效果。

7.SVG網頁圖片向量格式
一般桌電、筆電的屏幕分辨率為72dpi,手機行動裝置的分辨率則是高達96dpi,因此有些jpg或png的icon在電腦看起來很正常,但到了手機版卻是糊的,采用SVG格式的向量圖就可以解決這個問題。由于SVG向量格式可以隨意放大縮小,因此在RWD網頁設計也經常采用SVG圖檔來取代其他圖片格式。
8.磚墻式設計
磚墻式設計經常用在呈現許多信息流的頁面,例如用圖片呈現一整個照片墻。磚墻式設計由于可橫排/直排切換,因此也很常見于RWD響應式網頁設計中。

9.頁尾模塊Big Footer
Big Footer近來出現在政府網站檢核表內,適合用來呈現企業網站構架或相關連結,對于SEO也有很好的幫助。

10.時間軸Timeline
時間軸的設計概念很適合放在企業歷史沿革或里程碑的網頁設計上。






