2013年6月17日 星期一

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的結構是相當有幫助的,儘管它不一能做到多複雜的設計。這類的工具現在其實非常多,也是未來一個重要的趨勢,建議大家多關注類似的訊息。

轉載自《悠識數位》

沒有留言:

張貼留言