2013年7大網頁設計趨勢

2013年7大網頁設計趨勢

這次要分享國外設計網站整理的2013的7大網頁設計趨勢文章，文中提供了一些歸納後的結果，並提供了一些參考案例。這篇文章在網站企劃粉絲團上引起了很大的迴響。

以下是文章中提出的趨勢：

1. Full Screen Design 全屏網頁設計

搜尋引擎Bing就是這樣的方式，頁面非常簡單，後頭襯了一張填滿整個畫面的漂亮圖片。以前Google首頁曾經提供這樣的工具，可以把自己的照片嵌在搜尋的背景。
隨著不同的手持裝置，以及Responsive Design的出現，這種以全屏圖片襯在網站首頁的方式也越來越常見。

2. Vertical & Infinite Scrolling 垂直無限滾動

圖片搜集網站Pinterest採用了這樣的方式。Pinterest是美國網路界非常關注的一個網站，根據報導，依流量排名，它已經成為全球第3大的社群網站。

Pinterest開創了網頁設計中一個非常重要的範例，你在這個網站上的Pin (指蒐集的圖片)，會隨著你螢幕的解析度，呈現不同的列數。當你的螢幕越大，顯示的列數也越多。當滑鼠一直往下捲動，到某個程度時，它會開始載入更多Pin，所以你可以不斷往下捲動。這個方式是2012~2013年非常主要的一個網頁設計趨勢，然而也要提醒網站企劃或產品企劃的朋友，因為Pinterest是一個看照片的網站，它的特色是大量的照片，搭配少少的文字，因此它的內容是適合多列，加上無限捲動的設計方式。

前陣子Google+改版，也使用了類似這樣的佈局，當網頁比較寬的時候，頁面上會呈現兩、三個橫列的動態，但這樣的方式在用文字呈現是難以閱讀的。網站上如果要做垂直無限捲動呈現方式時，要留意是盡量以照片瀏覽為主的網站，會比較合適。Google的圖片搜尋結果也是這樣的呈現方式，最近Flickr改版也使用了類似的方式。

還有另一點需要注意的，過去我們常會把注意事項、或法律條款等放在footer，但如果使用了這樣的方式，CSS又沒寫好，footer就不太容易被看到。這時可以把footer釘在網頁的最下方，或是在載入一部分內容之後，出現一個按鈕，問你要不要載入更多內容，Facebook的timeline就是這樣的方式。一次載入太多內容，可能會影響頁面的速度，這時它就會出現一個訊息，詢問你要不要載入更早之前的留言，但不會換頁，這樣的設計可以確保使用者要使用footer的資訊時不會追不到footer的訊息。

3. Parallax Design 視差設計

這是一種做動畫時會使用的手法。假設背景是前後兩層不同顏色的山景，前景是一個人物在跑動，相對於只有一個背景跟一個前景在移動的狀況，當兩層背景有不同的移動速度，再搭配前景一起看時，就會覺得很有立體感。視差設計已經有人開發出了前端的CSS套件可作使用，儘管效果非常炫，這樣的方式可能只適合在比較裝飾性的背景使用。以Yahoo! Global News的IOS App為例，它一則一則新聞就使用了這樣的效果，但看久了就會覺得頭暈。當手指向上捲動的時候，文字跟照片捲動的速度是不一樣，前一則被後一則蓋過去的速度也是不一樣，對持久性的閱讀來說，這是很有壓力的。

這種方式可以用在首頁或活動上，但如果希望使用者專注在閱讀上，就不是這麼合適。

4. Large Buttons 超大按鈕設計

這個設計方式非常有趣，但其實一點都不高科技。互動設計中有Primary Action (主要希望使用者進行的動作)跟Secondary Action (次要、或比較不希望希望使用者進行的動作)，假設我們做一個電子商務網站，我們當然會希望消費者儘快確認結帳，但同時又要提供取消(訂單)的功能。此時我們會把主要動作做成比較大的按鈕，另一個比較不重要的動作會做得相對比較小，好比把它換成以文字連結的方式呈現。即使聽起來不怎麼樣，一直到現在，「放大最重要的動作」這樣的製作方式，還是會不斷地被提醒。

這篇文章中有提供一些範例，之前我們MIX 2103研討會也有講者提到過，當我們加大了主要動作的按鈕，產生落差的時候，確實會達到提示的作用。這跟網頁技術沒有關係，只是提高使用者的注意力而已，但這樣簡單的技巧還是很容易被忽略。

5. Social Networking Integration 社群整合

現在很多網站上都會有Facebook按讚、或者是留言的機制。使用者按讚之後就可以推播到Facebook上，藉此吸引更多人觀看。

6. Designed Fonts 網路字型的採用

Google Web Front這幾年在歐美推行得還不錯，提供不少漂亮的英文字形，可以使用在網頁中。因為字型是從網路上下載下來的，它還是可以保有文字的形式，具有SEO效果，被搜尋引擎搜尋到。中文的網路字型雖然有業者在做，但相對英文來說少很多。

7. Responsive web design 響應式網頁設計

在文章中是放在第一點，這裡我們放在最後，即之前已經提過的響應式網頁設計，當我們使用了不同的手持裝置，螢幕大小不同時，或是當瀏覽器的寬度不一樣時，網頁需要有相應的設計方式。

近來使用搜尋引擎尋找responsive tool或responsive design tool等關鍵字，會找到很多網站在介紹這樣的工具，甚至國外已經有專門的研討會在探討這個主題。儘管這個設計方式有相當的技術門檻，但要取得相關資源並非這麼不容易。這邊介紹一個FROONT網站，你可以在這個網站上，簡單進行一些拖拉、編輯文字、上傳圖片的動作，就可以看到在不同解析度的狀況下responsive的效果。網站除了幫你編輯好了responsive相關的CSS，還提供了原始碼。將所有原始碼複製下來，貼進html網頁中，再上傳到網路上，就是一個具有responsive效果的網站了。這樣的工具可以幫助我們瞭解responsive的結構是相當有幫助的，儘管它不一能做到多複雜的設計。這類的工具現在其實非常多，也是未來一個重要的趨勢，建議大家多關注類似的訊息。

轉載自《悠識數位》