11、主頁特點巡迴

在網上新產品通過滾動圖片展示和示例視頻都很常見。著陸頁和新建頁面經常嘗試使用一些甜頭來誘惑潛在的客戶。如果你知道如何在網站上將東西構造的很好,它的作用將會很明顯。

回 顧2012年我會說此趨勢最好的例子是MediaFires homepage.這個頁面的整個頭部是在一系列幻燈片之間滾動。每一個幻燈片都表述了你可以在MediaFire做什麼同時闡述了和其他網站的對比他們 的特點。幫助此例子表現突出的依舊是他們使用的大插圖和圖標。這是一個不適合全站使用的趨勢,你僅僅可為某些產品以此來吸引更多的關注。

12、滑動的網頁面板

過去當flashActionscript很盛行的時候,滾動的網站很火。而現在,動的效果已經可以通過JavascriptJQuery實現,並且依次影響了設計師建設網站的方法。我是偶然喜歡上滾動面板技術並且希望在2013年看到更多。

立馬點擊,你或許會想CaptainDash是一個普通的網站,可是當你通過導航點擊的時候,你會發現每一個頁面都是通過左右連續推動加載的。這些動的效果並不總是對手機用戶是個好的兆頭。

若你可以通過響應式佈局來處理它們,又或者有可供選擇的手機站點,滾動效果在手機上就會很酷,值得一試!

13、移動導航切換

當談到響應式設計時,最難的問題之一是如何創建一個靠譜的導航。你希望能給用戶對你所有重要的鏈接以直接的訪問,而不要淹沒在頁面中而使其難以辨讀。先保持導航隱藏當需要時再出現也是一個很好的點子。

進入移動導航切換菜單漂亮的設計趨勢,Treehouse Blog是極少數將此技術在智能手機和pc端瀏覽器表現都很耀眼的例子之一。但是有許多網站和工作室在他們的個人響應式佈局中使用了此趨勢。

我所喜歡的導航切換是你可以以多種方式設計導航,你可以有從頭部到底部的導航或者往下滑動,又或者左右推動內容。設計師有許多玩的選擇但是對於UI實驗需要更多的時間。

14、全屏排版

前面我提到過使用超大圖片作為網站佈局的背景,這種趨勢依舊可以延伸到文字排版上,設計的你網站文本完全適應瀏覽器。一些用戶可能感覺到很惱火,但是如果佈局對於超大文本很合適這也不是常有的事。

Alex Pierce有一個很棒的專注於排版佈局的網站,你可以通過CSS3的屬性看到富文本效果。另外這個網站很容易被導航以及許多其他頁面的元素顯示的也是超大的。

獨一無二的大字體樣式可以像超大圖片一樣突出,同時我確定在新的一年我們會看到這種設計會得到更多的評論。

15、編程接口和開源

開源軟件已經存在數十年了同時自從它存在就改變了網絡。但是在2012年裡我注意到有更多的關於開源軟件涉及到網頁組件、佈局、動態效果。典型的是我們可以談論免費網站模板,佈局或者像WordPressCMS軟件。

Github這樣開放的編程接口和資源不僅允許設計者進行原型佈局,還可以在頁面上製作動畫和效果。在網絡上jQuery事實上有無數的插件供免費下載使用。

說真的我不希望開源項目在任何時期發展緩慢,現在就是該開始並且促進在創建網站領域知識的時候。

16、深度盒子陰影

我在2012年的文章中已經討論過CSS3的盒子陰影,這種趨勢已被證明是非常準確的。事實上,我經常希望看到在現代網頁設計中加入盒子陰影效果。這種效果看上去很神奇,它們從來不會偏離美學除非過度使用。

我相信在前些年設計師遇到的問題源於盒子陰影太難而不容易實現。往前推幾年,這種效果需要Javascript或者在photoshop中製作陰影背景,而現在陰影盒子可以在CSS中使用幾行代碼來生成。

我將會在整個2013年留意盒子陰影效果。我想此效果已經在設計社區根深蒂固,現在更該關注的是誰最有創造力的實現盒子陰影效果。

17CSS3動畫

CSS3 帶有相關瀏覽器前綴的transition屬性允許CSS實現像Javascript一樣的動畫效果。設計師現在能以不同的CSS屬性實現動畫效果。我有許多恰當使用過渡效果的hover effects and form input fields例子。

另外一個優秀且激動人心的例子來自CSS alerts tutorial on Codrops。提示你如何為各種不同的動畫設置時間。

我對新的設計師推動不通過腳本來實現的動畫充滿信心。

18、垂直導航

當我第一次注意到不同的網站使用此趨勢的時候,並不是很感興趣。可是在過去的一年裡,我看到越來越多的設計師創造了完美的垂直解決方案。當此佈局被正確的完成,垂直網站佈局可以容納充足的內容同時具有好的設計體驗。

Riot Industries的組合對於新設計師是個很好的例子。查看一下導航鏈接是如何工作的,在移動上去是整個組合動的效果是如何實現的。邊框紋理確實展現了一個左右兩列分開的線。

紋理效果同樣在另一個垂直佈局上出現,例如CSS畫廊Design Bombs

19、單頁面網頁設計

單頁面設計是一個很大的話題,覆蓋了許多不同網站分類。顯而易見自從萬維網創建單頁面網站就出現了。但是最近幾年這種趨勢變成了一種更加自然的用戶體驗。

我想為Cage App設計的網站或許是這篇文章中列出的例子中最棒的一個。他們利用單頁佈局通過水平佈局鮮明的展現出內容。但是你還會注意到頁面的頂端有一個模糊的背景圖片效果。

隨著你往下滾動頁面,導航條一直固定在你的瀏覽器頂部。合併其他的網頁設計趨勢到單頁面佈局裡面是吸引用戶注意力和創建一個迷人的網站的解決方法。

20、圓圈元素設計

這一圓圈設計趨勢在網站佈局是比較新的且已經被賦予了很多的關注。設計師喜歡圓圈設計,因為它們乾淨、整潔,一般適合任何塊狀佈局。你可以構建你的原形或者把你的頁面元素更改為圓形設計(例如用戶頭像、分享按鈕、發表日期等等)。

Lucia Soto組合基本上是圓形網頁設計中很棒的一個例子。這個網站是動態創建的所以你得在頁面上水平移動不同的片段。您也將注意到一些可愛的向量藝術品以及星羅棋布的間隙。Web設計師渴望這些額外的花絮在頁面佈局上,因為他們透露出唯一性。

你可以在Site Optimizer主頁上發現一個簡單的例子,它使用了圓形頁面設計作為他們服務的信息賣點。