2017年網站設計趨勢,來看看吧!
標簽:
網站設計
2017.03.27
1. 全幅背景 Full-screen background
示例網站:https://www.etqstore.com/
全幅設計目前是最廣為設計的類型,因為隨螢幕的尺寸愈來愈大且都約16:9或16:10的比例已占市場大多數,這種以全篇幅來做主題視覺的設計,相較於傳統固定尺寸的主題橫幅來的視野廣闊的多,而現行的HTML5也支援全篇幅的影片取代圖片更為生動。

2. 一頁式或微頁式網站
示例網站:http://gina.tokyo/
說到一頁式的設計,說真得遇到蠻多頁主一開始看到此設計時總是會說"哇!我的網站不是要有很多頁嗎?怎會隻一頁,太長了吧",諸如此類的...,但我不急著表達,我希望能聽業主的想法,再下去作修正。

但如同上述所說的一個總結,我們必須要拋棄原有的使用框架去想這件事,原因是,現行平板電腦和智能手機這些裝置在這幾年已改變了我們瀏覽網頁的方式了,過去以為我們要豐富網站內容,我們要讓網站看到更多動態才不會死板板的畫麵的想法,我們必須要一改以往傳統的想法,想一想為什麼Apple或是Google的使用介麵會如此的簡約,好操作,而在操作之中又可享受簡約帶來的時尚感,因為很簡單,「隻留重要的,收納次要的」概念,想想,如果有一間新房子,把他設計成係統有效率的收納家具,還是去家具店拚拚湊湊,前者和後著的視覺效果您覺得如何?
單頁式網站在呈現上可讓使用者一次專注在頁麵上不需多於的左右掃瞄,隻需上下操作,以最簡單方式把網頁上的訊息傳達給使用者。
3. 扁平元素設計 Flat Design
示例網站:https://www.namesforchange.org/
不難發現,現今包括Android及IOS介麵設計也大多使用色塊、配色、及空間留白等這類的扁平式設計(何謂扁平式設計?)編排,達到從簡而不單調的對襯排版。
話說從windows 8開始,這種色塊的扁平化設計做出來的立體感或是簡約感,頗受大家歡迎。

4. 微量動畫元素 Micro Animation Design
示例網站:http://www.fixedgroup.com/
以往5年前或是更早之前,網頁上充斥著Flash的效果,也有得網站是純Flash完成,但隨著html5、Css3、及Jquery Library的突起這些運用大量圖片的Flash動畫網頁,也足漸被取而代之,就因這麼多年了,大家對於網頁塞滿了動態效果感到厭倦及視覺疲勞。
示例網站:https://www.etqstore.com/
全幅設計目前是最廣為設計的類型,因為隨螢幕的尺寸愈來愈大且都約16:9或16:10的比例已占市場大多數,這種以全篇幅來做主題視覺的設計,相較於傳統固定尺寸的主題橫幅來的視野廣闊的多,而現行的HTML5也支援全篇幅的影片取代圖片更為生動。

2. 一頁式或微頁式網站
示例網站:http://gina.tokyo/
說到一頁式的設計,說真得遇到蠻多頁主一開始看到此設計時總是會說"哇!我的網站不是要有很多頁嗎?怎會隻一頁,太長了吧",諸如此類的...,但我不急著表達,我希望能聽業主的想法,再下去作修正。

但如同上述所說的一個總結,我們必須要拋棄原有的使用框架去想這件事,原因是,現行平板電腦和智能手機這些裝置在這幾年已改變了我們瀏覽網頁的方式了,過去以為我們要豐富網站內容,我們要讓網站看到更多動態才不會死板板的畫麵的想法,我們必須要一改以往傳統的想法,想一想為什麼Apple或是Google的使用介麵會如此的簡約,好操作,而在操作之中又可享受簡約帶來的時尚感,因為很簡單,「隻留重要的,收納次要的」概念,想想,如果有一間新房子,把他設計成係統有效率的收納家具,還是去家具店拚拚湊湊,前者和後著的視覺效果您覺得如何?
單頁式網站在呈現上可讓使用者一次專注在頁麵上不需多於的左右掃瞄,隻需上下操作,以最簡單方式把網頁上的訊息傳達給使用者。
3. 扁平元素設計 Flat Design
示例網站:https://www.namesforchange.org/
不難發現,現今包括Android及IOS介麵設計也大多使用色塊、配色、及空間留白等這類的扁平式設計(何謂扁平式設計?)編排,達到從簡而不單調的對襯排版。
話說從windows 8開始,這種色塊的扁平化設計做出來的立體感或是簡約感,頗受大家歡迎。

4. 微量動畫元素 Micro Animation Design
示例網站:http://www.fixedgroup.com/
以往5年前或是更早之前,網頁上充斥著Flash的效果,也有得網站是純Flash完成,但隨著html5、Css3、及Jquery Library的突起這些運用大量圖片的Flash動畫網頁,也足漸被取而代之,就因這麼多年了,大家對於網頁塞滿了動態效果感到厭倦及視覺疲勞。
而現今,在選單或是大橫幅主題運用Slider、Fade...等已是常見的做法,這種不充斥整版的微動畫,可說是點驋無不過多的效果了。












