網頁設計是一個快速變遷的產業,尤其這幾年技術快速變化更迭。
在這些趨勢中包含了響應式網頁、平面設計、網頁的性能與速度還有完善的用戶體驗。
在2016年我們能可以期待看到哪些新的趨勢。
持續嘗試新的網頁導覽和選單
在眾多的網頁中,我們很難找到到一個非常合適的網站導覽或選單。而很多網頁設計師也在不斷嘗試不同的方法讓網頁導覽做的更好。
在網站中找出能讓使用者方便使用的網頁導覽是非常大的挑戰。只能透過不斷嘗試方法以找出適合網站的網頁導覽。
例如:Shellshock利用了icon來排版佈局其網頁選單。
(Image screenshot from: Shellshock)
是否使用滾動式網頁
我們是否會為了增加讀者而使用滾動式的網頁?在2016年,預計會有少數的網站開始會減少滾動式的網頁,當然大部分的網站還是會使用滾動式網頁。
而其優缺點中,常的滾動網站讓讀者看起來比較自然,比起點擊是的選單更為方便。但是用者要尋找網頁內的內容,不一定會比較快,有些使用者或許在還問找到內容就離開網站了。
而沒有使用滾動式網頁的方式下,大寫字型是主要設計的方向。再參考網站上可以看到很清楚地把要表達的內容,不用再滾動找尋內容。
(Image screenshot from: Uppercase)
網頁設計不再是設計頁面而是設計模組和套件
網頁設計朝著模組化、套件設計移動,不再是佈局排版整個網頁。這些套件通常包含設計搜尋功能如何運作,網頁導覽如何排版。
這些套件要能獨立運作也能與其他套件功能整合運作。
套件設計不再只是專注在外面的設計,更重要的是這些套件模組能運用在各個網站上。
模組套版設計: Brad Frost’s Atomic Web Design.
(Image credit: Brad Frost, Atomic Web Design)
設計趨向平面化
隨著響應式網頁越來越普及的情況下,平面化的設計將主導2016年的設計美學。
以Google為例,他們重新設計了他們logo,將斜面的設計移調,而更加的平面,並且改變其字體。Google也發現,使用較乾淨簡單的字體能減少檔案的大小,也方便在更小的瀏覽器上開啟。
素材設計興起
Google在2014年六月發表了素材設計語言(Material design language),它是一套同時適用於Android、iOS、Web等各種平台,且同時能適用於手機、平板、電視、電腦螢幕等不同裝置的跨平台/裝置的設計規則。
Material Design並不強調模擬實際真實的「Material」外觀,相反的,它所要表現的是不同的材質物料擁有不同的透光效應以及陰影表現,若將它們堆疊起來,也會產生凹凸起浮的立體感受,如果我們將這些材料轉換為手機螢幕上平面的畫素,並去除了複雜的肌理材質表現,只要關心它的質感、層次、深度、和其他物體的疊放邏輯,就可以將簡單的平面向量圖案予人實物的操作直覺,僅管它們並沒有實物的材質與紋理。
(Image credit: Google Material Design)
捨棄使用圖庫素材
我們發現越來越多使用者開始放棄使用圖庫的素材來建置網站。很多網站都開始使用自己所拍攝的照片放在自己的網站上。
例如:Flatiron Health使用了自己企業所拍的形象照片放在網頁中,以吸引耕多的人來看。
對於設計師來說,自己創意企劃的圖片與設計能分別與使用圖庫的網站,並使自己網站更獨特。
(Image screenshot from: Flatiron Health)
表單透過全螢幕的方式呈現
越來越多的網站使用全螢幕形式來設計登入及表單窗口,而不再是網頁的其中一部分。點選“登錄”或是“聯繫”按鈕,進入另一頁全螢幕的畫面去操作,例如:Eighty East’s的聯絡頁面。
如上面所講的,響應式網頁有幾個優點,使用行動裝置操作會更加容易點選,能刺激使用者填寫寫表單。
(Image screenshot from: Eighty East)
豐富的動畫效果
網頁設計師透過動畫讓自己的網站能夠脫穎而出,使用者看到會覺得更加豐富。
例如:Slack’s透過循環動畫讓他的logo更加突出與印象深刻。
另一個例子是Twitter的愛心圖示,增加了使用者的互動性。
(Image credit: Christopher Ingraham on Twitter)
使用者看重網站的功能大多於網站的美感
設計出一個好看的網站越來越越不重要,如果你的網站好看但是運作起來不方便。用戶會對於網站不方便操作產生不好的印象。
使用者在使用一個電子商務網站購買商品時,發現網站功能不齊全或是不好操作,對於消費者或是企業是一件很糟糕的事。
所以開發人員除了應該要讓網站看起來好看,更重要的是讓網站能操作起來是順暢及方便的。
使用著要的是:功能和設計。
設計師朝向在瀏覽器上設計網頁
網頁設計師開時朝向在網頁上設計網頁。好處是可以降低在開發網頁上的程序時間,網頁編輯好後能直接看到網頁上觀看結果。
網頁設計師知道這些常見的前端開發語法(HTML/CSS/JS),因此在網頁上設計對他們是有幫助的。
隨著網頁設計的潮流從photoshop,Illustrator和 Sketch到進入瀏覽器中,期待越來越多新的CSS/HTML套件與方法出來。
而你對於2016年的網頁設計趨勢又是什麼呢?