2016年網頁前端設計趨勢案例推薦

發表於2016-04-29

2015年已經過去,網頁設計的世界出現了很多新變化。2016年,在網頁設計領域必將出現更為令人驚奇的革新。與以往不同的是,今年的變化將更為重大,更為有利。事實上,很多業內專家都預言:2016年將是真正屬於網頁設計的一年。

技術變日新月異,設計潮流也是如此。不同型別的公司都在設法賦予自己的網站更為時尚的外觀,並致力於提高網站的響應性和互動性。

正如人們常會通過一本書的封面來評判該書的好壞一樣,一個網站的審美,設計和功能往往決定了擁有該網站的公司的聲譽。不僅網站的外觀需要不斷改進,網站的功能,呈現方式,載入速度以及更新方式同樣需要注意。

在2016年,網頁設計領域將迎來許多值得期待的新變化。網頁設計潮流將擺脫誇張的陰影效果,複雜的材質和嚴格的分層,整體風格會變得更為簡潔和扁平化。使用圖片和互動元素將提升網站的吸引力,這一事實已得到廣泛認可。

2016年,你的目標應該是設計出令使用者著迷的,一再返回的網站。為了幫助你抓住先機,站在設計潮流的尖端,我們在這篇文章中列出了一些詳盡的2016年網頁設計趨勢。絕對值得你一看!

新穎的滾動方式

由於智慧手機的流行,今天每個使用者都已經習慣了滾動式的長網頁。根據UX Movement最近所做的一份研究,多數使用者更為偏愛縱向滾動的網頁設計,而非靠點選導航元素才能完成的網頁切換。2016年,我們將看到不同以往的網頁滾動方式。它可能是縱向的,也可能是橫向的。可能是觸控式的,也可能是動畫滾動。總之,別忘了在你的設計中融合新的滾動功能來吸引使用者。這同樣可以為網站使用者提供更多的樂趣和便利。NASA Prospect的頁面就是創新式網頁滾動方式的一個範例。該網站的網頁滾動方式永遠不會使使用者感到無聊或無趣。不信的話,你可以自己去看看!

示例網址:http://nasaprospect.com/

根據Chartbeat.com上的一篇文章,70%的使用者在該網站的網頁還未載入完成時就已經迫不及待地滾動網頁了。

標題和頁面的平行視差

2016年的另一個重要網頁設計趨勢會是網頁平衡視差運動。它將在使用者向下滾動頁面時營造出3D效果,從而為使用者帶來更多視覺樂趣。為了做到錦上添花,你還可以設法使使用者每一次移動滑鼠時,都能啟動標題和網頁的平行視差運動。

網頁中平行視差的好處在於,使用者每一次移動滑鼠,都能看到不一樣的東西。它也能讓你用更為簡便,更為有趣的方式將資訊傳達給使用者。當然,任何事情過了頭都會變壞,所以這種方式也不能過度使用。示例中The Royal British Legion網站就採用了平行檢視的網頁設計,它以極富娛樂性的方式傳達了明確的資訊。

示例網址:http://poppyspend.britishlegion.org.uk/

半扁平化(Semi-flat)的設計

這種設計手段已經存在多年,只是近些年才開始流行。如今,扁平化的設計風格隨處可見,無論是在個人部落格還是最著名的國際品牌網站中。扁平化的設計易於建立和管理。但潮流是永遠變化的,越來越多的設計師都願意在圖示,目錄和插畫中增加一些元素以使網站更為豐富。

在需要建立使實用,獨特和富有創意的網站時,很多網頁設計師會毫不猶豫地選用扁平化設計風格。Vine網站就是半扁平化設計風格的一個典型。該網站將實時展示的圖片與扁平化設計無縫融合,很多網頁設計者甚至認為這個網站是半扁平化設計的最佳代表。

示例網址:https://vine.co/

突破思維框架的設計

這是去年最重要的網頁設計趨勢之一,可以預見,今年它依然會是網頁設計的潮流。長期以來,長方形的網頁佈局一直是網頁設計師們的第一選擇。但在2016年,我們將見到更多的網頁設計師精心的設計的,長方形之外的網頁佈局方式。

事實上已經有很多其他的幾何形狀被用於網頁佈局中了。不論是在體育網站,健身網站還是別的網站,長方形之外的幾何佈局都能收到不錯的效果。這種設計手段不僅能幫助使用者更好地利用網站的導航元素,也更能吸引使用者的注意力。這類網站中一個極佳的範例就是Full Stop。這個網站醒目的圓形LOGO將使用者的目光引向公司名稱。其他一些著名的體育品牌如阿迪達斯和Columbia Sportswear也在各自的網站中融入了很多幾何形狀。

示例網址:http://www.fullstopinteractive.com/

全屏佈局

我們現在要談談用一張圖片佈滿整個網頁(當然會有少量文字)的設計手段。俗話說一圖勝過千言萬語。這句話用在網頁設計中最為適合不過。在網頁中使用一張全屏圖片或一段視訊無疑能有效地從開始就抓住使用者的吸引力。我們相信這一設計潮流在2016年會席捲網頁設計界。

全屏佈局最有趣的一點在於,使用者可以更輕鬆地找到並理解自己所需的資訊。這種設計允許你使用產品和服務的圖片/視訊來更有效地與使用者互動。Jobs Is Free就是一個採用全屏佈局的網站。它的簡潔和迷人都使它成為一個趣味盎然的站點。

示例網址:http://www.jobsisfree.com/

互動式的敘事方式

視覺敘事——在所有處於上升地位的設計潮流中,這是最流行,最受歡迎的一種。它在2015年已登上舞臺中央,在2016年也必將繼續贏得關注。所以在今年,你應該勇敢地穿上講故事者的裝束,在設計中與使用者分享一個故事。此外,還要確保你的故事是互動式的,這樣能更能吸引你的聽眾積極參與故事,並促使他們在網站上停留更長時間。

你可以通過在全站點中設定謎題,調查,視訊,影象,音訊等來傳達你的資訊。下面的MoMA Century of the Child就是互動敘事型網站中的一個絕佳範例——它的確有讓使用者一直向下滾動網頁的魔力!

示例網址:http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/

更少的網頁數量

這個時代,更少就是更多(Less is more)!這句話同樣適用於網站的網頁數量。網站中採用單網頁設計或簡化的多網頁設計,反而能吸引來更多的使用者。記住,內容龐雜的網站往往會令使用者不勝厭煩。

今天的使用者已經不願去開啟多個網頁了。隨著移動裝置的盛行,單網頁設計成為更為簡便的瀏覽方式。當你設計單頁面站點時,通常瀏覽體驗也更為新奇有趣。單網頁站點Kocha將會告訴你,不用增加網頁數量也可以成為最優秀的站點。

示例網址:http://www.kocha.com.au/

可縮放的向量圖形 (SVG)

SVG圖形已經被使用了很多年,現在依然有著極其重要的作用。SVG圖形在任何裝置上都能保持清晰度和銳利度。它能將所有關鍵的網頁元素與設計元素連線起來,使其適應各種尺寸的螢幕。W3techs.com的分析認為,目前只有1.3% 的網站使用了SVG圖形。但我們相信2016年SVG圖形將會成為創意網頁設計的主流。下面就是一個採用了SVG圖形的網站。

示例網址:http://snapsvg.io/demos/#coffee

響應式網頁設計

如果你依然沒有采用響應式網頁設計的話,以下的驚人資料或許會促使你早做決定:

超過20億人通過移動裝置瀏覽網頁

61%的使用者對能提供良好移動瀏覽體驗的品牌有正面評價

移動裝置使用者的消費額超過PC使用者的50%

每五個使用者中就有四個使用智慧手機購物

Designhill.com釋出的一篇文章透露,谷歌將響應式網頁視為更優質的移動引數。響應式設計為使用者帶來了更好的使用者體驗,有助於提升網站轉化率。如果你還未在響應式站點設計上有任何投入,現在就立即開始吧,現在開始總比不做好。Sparkbox網站就通過採用響應式設計實現了網頁在不同裝置上的無縫轉換。

示例網址:http://seesparkbox.com/

幽靈按鈕

使用大而花哨的按鈕的時代已經結束。幽靈按鈕,或透明按鈕的使用,將成為2016年的另一主流。幽靈按鈕也常被成為空按鈕(hollow buttons),它的特點是僅包含按鈕的邊緣和位於按鈕中央的簡潔字型。這一特點使它看起來往往更有吸引力。World in My Lens站點中的幽靈按鈕就非常有代表性。

示例網址:http://www.worldinmylens.com/

動態背景

動態背景可以採取多種形式,可以是效果強烈的圖片,也可以是3D背景,甚至可以是一段視訊。在背景中放置視訊可以立即抓住使用者的注意力,因為人的視線本能地會趨向運動。我們確信,在今年將會有更多的網站採用動態背景。Yanagiu Kamiko網站的背景是浸入式的,而且十分迷人。它讓使用者忍不住想去了解更多背景圖片之後的故事。

示例網址:http://yanagiukamiko.strikingly.com/

分離式螢幕佈局

分離式佈局在2016年也會繼續流行。這意味著網頁將會分為兩個或更多部分。這種設計方式使設計師能以乾淨利落的佈局呈獻給使用者雙倍的內容。在想要展示產品和服務的不同角度時,這種方式尤其有用。分離式的佈局還可以用於比較兩種不同的事物。例如,標誌汽車的網站就在其主頁上使用了分離式佈局,將汽車的人性元素與汽車的技術元素並列在一起。

示例網址:http://www.peugeot.com/en

伴隨著技術的快速革新,每年都會湧現出新的網頁設計潮流。我們希望上面所列舉的一些潮流能為設計師提供一些靈感,並幫助他們設計出更為獨一無二的網頁。

相關文章