近幾年網頁設計的技術發展真的變化萬千,就連網頁設計的趨勢也都年年有所成長,尤其是2018年網頁設計又到了另外一個里程碑,如果說你還不知道現在網頁設計最新的趨勢,那建議你趕快仔細閱讀惡補一下!
1. 純色的扁平化區塊設計已經退燒
近年來RWD設計從扁平化設計(flat design)到google 的material design,都是採用單一色彩設計較多,而且區塊設計也開始讓人覺得無趣,所以早期常看到的擬真設計、陰影、漸層等設計手法又開始回歸,但是跟早期用法相比還是有不同的地方,以icon來說,單一色彩的icon開始會出現兩、三種顏色做搭配,以按鈕來說以往採用單一色彩的表現,現在也開始使用漸層色彩與淡淡的陰影凸顯按鈕立體感,如此一來可以解決單一色彩的按鈕在某些佈局下容易被忽略或是誤認的情況。
搜尋框有淺淺的陰影效果 |
icon再也不是單一色彩,而是會透過色彩突顯重要部分 |
2. 大膽的用色更容易加深印象
以往我們總是會用品牌色來當作整體網站的主軸,但是一但跳脫網站的主軸用色反而會讓網友有大吃一驚的效果,通常都可以留下不錯的印象,對於新品牌來說這樣的手法可能還不敢使用,但是對於已經耳熟能詳的品牌,這要的手法反而會帶來意想不到的效果。
範例網站:Dropbox
大眾對Dropbox的印象都是水藍色,但是現在卻可以很百變 |
3. 破格設計打破無聊的佈局
在RWD網頁設計佈局中,因為常用的12欄格線系統,導致所有區塊都方方正正,排列雖然非常整齊,但久而久之也會覺得無趣,所以越來越多網站的內容開始會呈現破格排列,以添增內容排版上的趣味性,提供網友意外的驚喜,可以增加網友在網站上的瀏覽時間。
利用產品原本的造型創造出圓角效果,並且透過錯位的排版增加內容的吸引力 |
範例網站:Bose
4. 微互動大升級,跟著捲軸一起動吃動
隨著捲軸追蹤技術的提升,以往只能在滑鼠移動或點擊時產生互動,但現在隨著你滑鼠捲動就可以安排內容區塊的進場、退場,以往的視差滾動只是圖片上的錯位效果,現在不但有錯位效果,還可以安排在頁面上製作有趣的動畫,例如火箭升空或九大行星環繞等這樣的效果,讓網友目不轉睛。
華麗的視差滾動效果可以讓網友目不轉睛 |
範例網站:invision
5. 影片背景運用
這裡說的影片背景通常影片長度都不會太長,而且也會墊一張大圖在影片下方,以免影片loading過慢時背景只有單一色彩的尷尬,許多用javascript或css3無法做出的視覺特效,可以透過影片的影音結合補強這點的不足。以前只能稍微滿足五感中部分視覺與聽覺,在網站與影片3D特效結合下,強烈視覺感官中又可以即時搭配配樂、音效,這樣的視覺與聽覺感官足以顛覆以往的設計。
將影片襯底,透過canvas製作數字遮罩,創造出不一樣的影片襯底效果 |
範例網站:Audi Q2、Microsoft Surface
6. 字型運用多變性
文字再也不是單純只是出現在畫面上,它也可以是遮罩或是有不同的錯位效果,甚至是一個很好做破格設計的元素,不再是單純呈現內容而已,也可以有互動的可能性。
將文字裸空、描邊,營造出不同的文字效果,加上墊底圖與破格設計可以將死板的網頁排版變成吸睛的動態海報 |
範例網站:benmingo