2015年1月3日 星期六

預見2015年 10 大網頁設計趨勢

每年網頁設計都有長足的進步,很多令人驚嘆的設計幾乎天天被發表,2015年我想也只會有更厲害的設計,其中也包含了一些2014年被預測的趨勢也許在新的一年繼續被發揚光大,許多趨勢也可能會延續到2016,我們也可能在2015年看到新趨勢的出現!
當許多人都在溫故並且企圖知新,在這個換一本新日曆的時刻,來看看新的一年有甚麼網頁設計趨勢吧!

1.更長的卷軸式網頁

不難發現近年來的網頁設計趨向更長的卷軸設計,當行動裝置越受歡迎,長型卷軸網頁就更普及,取代了連結呈現的網頁,對使用者來說,卷軸網頁讓獲得資訊比起不斷點擊按鈕更加容易。首頁不再是唯一的頁面出現卷軸趨勢,當長卷軸網頁變得更加受歡迎,它的優點也會漸漸擴散到其他頁面,例如:產品頁,以更優雅的方式展示網頁內容。
iPhone 6 頁面為例,不同於Apple首頁,使用長型的捲軸業展示iPhone 6 的特色。此外這個頁面也搭配了一些滑動的動畫,讓瀏覽視覺經驗更加卓越。

2.故事性與互動性

精彩的內容是網站的關鍵,能夠透過網頁設計來表示你的內容絕對更加高招!2015的網頁設計將會更專注在如何設計同時對著使用者講故事。舉個例子,Space Needle 的網站就你在使用網頁的過程,漂亮地講了一個Space Needle 的故事,他正是符合上述長卷軸趨勢精彩範例。

Space Needle也展示了2015年的網頁設計趨勢:互動性。網頁增加互動與動畫更能夠幫助展示內容。互動與動畫被使用在網站設計上,運用得好會給網頁帶來更多特色。再看看 Impossible Bureau 的網站,充滿互動性同時兼具卷軸與滑鼠動作的不同元素(取代了以往的點擊動作)。

3.超大標題單純背景

大圖標題背景已經流行好幾年,常常在最上方出現讓訪客一眼看見,那要怎麼在一堆有超大圖片背景的網頁殺出重圍?反向操作是個不錯的選擇。開始有不少網站開始選擇設計大大的標題搭配單純的背景。我猜這不是因為他們不想跟風,而是想要讓網站的呈現速度加快(第10點會分析),而不用這麼大的圖片。The New Wave Company 的網站把這樣的設計發揮得很好,大大的標題與大中至正的設計迎接訪客,甚至在背景沒讓你看到圖片。這個作法蠻高雅的並且有別於其他用盡圖片背景的網站。
(譯者按:女生愛科技2015年選用的版型也是走這路子的呀!)

4.拿掉無用的設計元素,讓整體更乾淨清爽

有一種設計是把非必要的設計元素通通拿掉,我相信2015年我們會看到更多這樣試圖保持簡單乾淨的網站。趨勢3提到的New Wave Company 網站也是一個這樣的範例,另一個可以參考的是 Rareview Digital Agency 網站,他也沒有大背景圖出來跟你打招呼,這個團隊使用一個乾淨簡單清爽的方式呈現,沒有太多餘的設計、圖片或是一大堆的顏色。

5.固定寬與大中至正版型

近年有很多網頁會把版型寬度設定 100% 來設計,讓整個版面充滿整個瀏覽器,在這風潮成型前,固定寬與大中至正的設計才是主流,風水輪流轉,固定寬度的網站似乎又流行回來,只是這次是更潮的方式呈現,這些網站用固定寬度確保內容集中在中央取代發散兩邊的設計。
Michele Mazzucco 的網站就做得不錯,當瀏覽器寬度超過 1350PX,你會看到內容(還有背景顏色與段落)左右邊都看的見盡頭。這個設計讓整個站的內容更聚焦,並且降低寬滿版設計所帶來的複雜狀況。

6.專業高品質的客製圖像

Stock圖庫仍在設計領域占有一席之地,但如今Stock圖庫關注更專業的的高品質獨特客製與網站目的性的圖片。使用客製圖片來設計而不只是選擇圖庫裡的照片讓你的網站與眾不同,舉 Grain and Mortar 的例子,這個網站你可以看見這個趨勢,在網站開宗明義的表頭就看到特色的圖片,並且直接帶起特色,因為照片上就是一群人在 Grain and Mortar 前面的合影。這個是讓人更加對你公司印象深刻的做法,高品質的專業攝影自己辦公室的照片,而不是去圖庫找一張假的辦公室的照片。

7.仿 APP 飛出滑入選單
響應式網頁(Responsive Web Design)已經大行其道好一陣子了,直到最近,更多設計強調他們在不同裝置看起來都一樣優,無論是桌機、手機還是平版裝置。RWD已經走向在每一種裝置都能夠游刃有餘的境界了。這個改變讓我們開始看到甚麼元素應該怎麼在不同裝置呈現出一個網站。

24 waysRawnet 為例,這兩個也是把這個趨勢呈現,用像是 APP操作方式的選單貫穿整個網站,而不只是因為裝置不同改變。這兩個網站無論是從左邊或右邊滑出垂直選單(而非典型在頁面上方),像是飛出滑入的選單動作是網頁APP與RWD通吃的技術。
(譯者按:女生愛科技的選單也是被藏起來der~)

8.隱藏主選單

像是剛剛談到許多飛出滑入的選單,我期待看到當拜訪更多網站時後看到他們將網站的選單藏起來,隱藏的選單,再訪客需要使用的移動或點擊的時候選單再出現。這個響應式的技術已經開始在各網站出沒,而不只是應用在小螢幕瀏覽狀態。Brain Hoff Design 的新網站就是很好的範例,他使用漢堡 icon 在頁面頂端隱藏了選單直到客倌點擊icon,這個行為模式已經在 web apps出現在手機、行動裝置等被使用數年,甚至許多apps 也是採取這樣的模式。他使用這個方法讓無論寬度多大的瀏覽都能保持畫面乾淨。

9.超大的字型呈現

2014年超大字型已經開始出沒在許多網站中,我也不覺的短期內這個風潮會有甚麼大改變,2015年,網頁表頭的大字只會更大吧!我指得是大到像在地上看到飛機那樣。(哈哈~不是真的這麼大,但你懂的。)
Tiny Giant 的網站用了超大字型呈現在他的網站,這要錯過他想闡述的理念都很難,大的字型可能會在 2015年大行其道,提升與讀者溝通的效力,因為這是馬上抓到我們眼球的方式。Tiny Giant的網站在這方面真的發揮淋漓盡致。
(譯者按:女生愛科技也是使用這個樣的設計喔!整個挑到一個很 in 的版型XD)

10.呈現與速度
有些設計趨勢是為了讓下載速度更快,減少頻寬,本文提到許多趨勢其本意也是為了滿足減少網頁的承載,在各種裝置與較慢的網路都能快速呈現的需求,許多網頁設計或網站開發人員都非常注意網站的重量與使用者如何與網站互動。RWD讓這些問題得以被關照,在龜速的網路與行動裝置讓設計者與開發者花更多心血在減少網站與資料重量,如何以最快的速度呈現無論是在甚麼樣的網路速度,留心使用者的使用狀況像是他們的網路傳輸狀態。更快速完美呈現,不需要花太多時間等候無疑是2015年要發表的網站需要考量的重大決策。
你覺得還有甚麼是2015年網頁設計趨勢?歡迎在下面留言區(The Next Web 原文)一起討論吧!

圖文來源:TNW-10 Web design trends you can expect to see in 2015