網(wǎng)頁設(shè)計(jì)也要有一顆與時(shí)俱進(jìn)的心

　　去年，網(wǎng)頁設(shè)計(jì)的世界出現(xiàn)了很多新變化。2016年，在網(wǎng)頁設(shè)計(jì)領(lǐng)域必將出現(xiàn)更為令人驚奇的革新。與以往不同的是，今年的變化將更為重大，更為有利。事實(shí)上，很多業(yè)內(nèi)專家都預(yù)言：2016年將是真正屬于網(wǎng)頁設(shè)計(jì)的一年。

　　技術(shù)變?nèi)招略庐?，設(shè)計(jì)潮流也是如此。不同類型的公司都在設(shè)法賦予自己的網(wǎng)站更為時(shí)尚的外觀，并致力于提高網(wǎng)站的響應(yīng)性和互動(dòng)性。

　　正如人們常會(huì)通過一本書的封面來評(píng)判該書的好壞一樣，一個(gè)網(wǎng)站的審美，設(shè)計(jì)和功能往往決定了擁有該網(wǎng)站的公司的聲譽(yù)。不僅網(wǎng)站的外觀需要不斷改進(jìn)，網(wǎng)站的功能，呈現(xiàn)方式，加載速度以及更新方式同樣需要注意。

　　在2016年，網(wǎng)頁設(shè)計(jì)領(lǐng)域?qū)⒂瓉碓S多值得期待的新變化。網(wǎng)頁設(shè)計(jì)潮流將擺脫夸張的陰影效果，復(fù)雜的材質(zhì)和嚴(yán)格的分層，整體風(fēng)格會(huì)變得更為簡潔和扁平化。使用圖片和互動(dòng)元素將提升網(wǎng)站的吸引力，這一事實(shí)已得到廣泛認(rèn)可。

　　2016年，你的目標(biāo)應(yīng)該是設(shè)計(jì)出令用戶著迷的，一再返回的網(wǎng)站。為了幫助你抓住先機(jī)，站在設(shè)計(jì)潮流的尖端，中國設(shè)計(jì)網(wǎng)的筆者在這篇文章中列出了一些詳盡的2016年網(wǎng)頁設(shè)計(jì)趨勢。絕對(duì)值得你一看!

　　1、新穎的滾動(dòng)方式

　　由于智能手機(jī)的流行，今天每個(gè)用戶都已經(jīng)習(xí)慣了滾動(dòng)式的長網(wǎng)頁。根據(jù)UX Movement最近所做的一份研究，多數(shù)用戶更為偏愛縱向滾動(dòng)的網(wǎng)頁設(shè)計(jì)，而非靠點(diǎn)擊導(dǎo)航元素才能完成的網(wǎng)頁切換。2016年，我們將看到不同以往的網(wǎng) 頁滾動(dòng)方式。它可能是縱向的，也可能是橫向的?？赡苁怯|控式的，也可能是動(dòng)畫滾動(dòng)?？傊瑒e忘了在你的設(shè)計(jì)中融合新的滾動(dòng)功能來吸引用戶。這同樣可以為網(wǎng) 站用戶提供更多的樂趣和便利。NASA Prospect的頁面就是創(chuàng)新式網(wǎng)頁滾動(dòng)方式的一個(gè)范例。該網(wǎng)站的網(wǎng)頁滾動(dòng)方式永遠(yuǎn)不會(huì)使用戶感到無聊或無趣。不信的話，你可以自己去看看!

　　2、標(biāo)題和頁面的平行視差

　　2016年的另一個(gè)重要網(wǎng)頁設(shè)計(jì)趨勢會(huì)是網(wǎng)頁平衡視差運(yùn)動(dòng)。它將在用戶向下滾動(dòng)頁面時(shí)營造出3D效果，從而為用戶帶來更多視覺樂趣。為了做到錦上添花，你還可以設(shè)法使用戶每一次移動(dòng)鼠標(biāo)時(shí)，都能啟動(dòng)標(biāo)題和網(wǎng)頁的平行視差運(yùn)動(dòng)。

　　網(wǎng)頁中平行視差的好處在于，用戶每一次移動(dòng)鼠標(biāo)，都能看到不一樣的東西。它也能讓你用更為簡便，更為有趣的方式將信息傳達(dá)給用戶。當(dāng)然，任何事情過了頭都會(huì)變壞，所以這種方式也不能過度使用。示例中The Royal British Legion網(wǎng)站就采用了平行視圖的網(wǎng)頁設(shè)計(jì)，它以極富娛樂性的方式傳達(dá)了明確的信息。

　　3、半扁平化(Semi-flat)的設(shè)計(jì)

　　這種設(shè)計(jì)手段已經(jīng)存在多年，只是近些年才開始流行。如今，扁平化的設(shè)計(jì)風(fēng)格隨處可見，無論是在個(gè)人博客還是最著名的國際品牌網(wǎng)站中。扁平化的設(shè)計(jì)易于創(chuàng)建和管理。但潮流是永遠(yuǎn)變化的，越來越多的設(shè)計(jì)師都愿意在圖標(biāo)，目錄和插畫中增加一些元素以使網(wǎng)站更為豐富。

　　在需要?jiǎng)?chuàng)建使實(shí)用，獨(dú)特和富有創(chuàng)意的網(wǎng)站時(shí)，很多網(wǎng)頁設(shè)計(jì)師會(huì)毫不猶豫地選用扁平化設(shè)計(jì)風(fēng)格。Vine網(wǎng)站就是半扁平化設(shè)計(jì)風(fēng)格的一個(gè)典型。該網(wǎng)站將實(shí)時(shí)展示的圖片與扁平化設(shè)計(jì)無縫融合，很多網(wǎng)頁設(shè)計(jì)者甚至認(rèn)為這個(gè)網(wǎng)站是半扁平化設(shè)計(jì)的最佳代表。

　　4、突破思維框架的設(shè)計(jì)

　　這是去年最重要的網(wǎng)頁設(shè)計(jì)趨勢之一，可以預(yù)見，今年它依然會(huì)是網(wǎng)頁設(shè)計(jì)的潮流。長期以來，長方形的網(wǎng)頁布局一直是網(wǎng)頁設(shè)計(jì)師們的第一選擇。但在2016年，我們將見到更多的網(wǎng)頁設(shè)計(jì)師精心的設(shè)計(jì)的，長方形之外的網(wǎng)頁布局方式。

　　事 實(shí)上已經(jīng)有很多其他的幾何形狀被用于網(wǎng)頁布局中了。不論是在體育網(wǎng)站，健身網(wǎng)站還是別的網(wǎng)站，長方形之外的幾何布局都能收到不錯(cuò)的效果。這種設(shè)計(jì)手段不僅 能幫助用戶更好地利用網(wǎng)站的導(dǎo)航元素，也更能吸引用戶的注意力。這類網(wǎng)站中一個(gè)極佳的范例就是Full Stop。這個(gè)網(wǎng)站醒目的圓形LOGO將用戶的目光引向公司名稱。其他一些著名的體育品牌如阿迪達(dá)斯和Columbia Sportswear也在各自的網(wǎng)站中融入了很多幾何形狀。

　　5、全屏布局

　　我們現(xiàn)在要談?wù)動(dòng)靡粡垐D片布滿整個(gè)網(wǎng)頁(當(dāng)然會(huì)有少量文字)的設(shè)計(jì)手段。俗話說一圖勝過千言萬語。這句話用在網(wǎng)頁設(shè)計(jì)中最為適合不過。在網(wǎng)頁中使用一張全屏圖片或一段視頻無疑能有效地從開始就抓住用戶的吸引力。我們相信這一設(shè)計(jì)潮流在2016年會(huì)席卷網(wǎng)頁設(shè)計(jì)界。

　　全屏布局最有趣的一點(diǎn)在于，用戶可以更輕松地找到并理解自己所需的信息。這種設(shè)計(jì)允許你使用產(chǎn)品和服務(wù)的圖片/視頻來更有效地與用戶互動(dòng)。Jobs Is Free就是一個(gè)采用全屏布局的網(wǎng)站。它的簡潔和迷人都使它成為一個(gè)趣味盎然的站點(diǎn)。

　　6、互動(dòng)式的敘事方式

　　視覺敘事——在所有處于上升地位的設(shè)計(jì)潮流中，這是最流行，最受歡迎的一種。它在2015年已登上舞臺(tái)中央，在2016年也必將繼續(xù)贏得關(guān)注。所以在今年， 你應(yīng)該勇敢地穿上講故事者的裝束，在設(shè)計(jì)中與用戶分享一個(gè)故事。此外，還要確保你的故事是互動(dòng)式的，這樣能更能吸引你的聽眾積極參與故事，并促使他們?cè)诰W(wǎng) 站上停留更長時(shí)間。

　　你可以通過在全站點(diǎn)中設(shè)置謎題，調(diào)查，視頻，圖像，音頻等來傳達(dá)你的信息。下面的MoMA Century of the Child就是互動(dòng)敘事型網(wǎng)站中的一個(gè)絕佳范例——它的確有讓用戶一直向下滾動(dòng)網(wǎng)頁的魔力!

　　7、更少的網(wǎng)頁數(shù)量

　　這個(gè)時(shí)代，更少就是更多(Less is more)!這句話同樣適用于網(wǎng)站的網(wǎng)頁數(shù)量。網(wǎng)站中采用單網(wǎng)頁設(shè)計(jì)或簡化的多網(wǎng)頁設(shè)計(jì)，反而能吸引來更多的用戶。記住，內(nèi)容龐雜的網(wǎng)站往往會(huì)令用戶不勝厭煩。

　　今天的用戶已經(jīng)不愿去打開多個(gè)網(wǎng)頁了。隨著移動(dòng)設(shè)備的盛行，單網(wǎng)頁設(shè)計(jì)成為更為簡便的瀏覽方式。當(dāng)你設(shè)計(jì)單頁面站點(diǎn)時(shí)，通常瀏覽體驗(yàn)也更為新奇有趣。單網(wǎng)頁站點(diǎn)Kocha將會(huì)告訴你，不用增加網(wǎng)頁數(shù)量也可以成為最優(yōu)秀的站點(diǎn)。

　　8、可縮放的矢量圖形 (SVG)

　　SVG 圖形已經(jīng)被使用了很多年，現(xiàn)在依然有著極其重要的作用。SVG圖形在任何設(shè)備上都能保持清晰度和銳利度。它能將所有關(guān)鍵的網(wǎng)頁元素與設(shè)計(jì)元素連接起來，使 其適應(yīng)各種尺寸的屏幕。W3techs.com的分析認(rèn)為，目前只有1.3% 的網(wǎng)站使用了SVG圖形。但我們相信2016年SVG圖形將會(huì)成為創(chuàng)意網(wǎng)頁設(shè)計(jì)的主流。下面就是一個(gè)采用了SVG圖形的網(wǎng)站。

　　9、響應(yīng)式網(wǎng)頁設(shè)計(jì)

　　如果你依然沒有采用響應(yīng)式網(wǎng)頁設(shè)計(jì)的話，以下的驚人數(shù)據(jù)或許會(huì)促使你早做決定：

　　超過20億人通過移動(dòng)設(shè)備瀏覽網(wǎng)頁

　　61%的用戶對(duì)能提供良好移動(dòng)瀏覽體驗(yàn)的品牌有正面評(píng)價(jià)

　　移動(dòng)設(shè)備用戶的消費(fèi)額超過PC用戶的50%

　　每五個(gè)用戶中就有四個(gè)使用智能手機(jī)購物

　　Designhill.com 發(fā)布的一篇文章透露，谷歌將響應(yīng)式網(wǎng)頁視為更優(yōu)質(zhì)的移動(dòng)參數(shù)。響應(yīng)式設(shè)計(jì)為用戶帶來了更好的用戶體驗(yàn)，有助于提升網(wǎng)站轉(zhuǎn)化率。如果你還未在響應(yīng)式站點(diǎn)設(shè)計(jì) 上有任何投入，現(xiàn)在就立即開始吧，現(xiàn)在開始總比不做好。Sparkbox網(wǎng)站就通過采用響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)了網(wǎng)頁在不同設(shè)備上的無縫轉(zhuǎn)換。

　　10、幽靈按鈕

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

　　11、動(dòng)態(tài)背景

　　動(dòng)態(tài)背景可以采取多種形式，可以是效果強(qiáng)烈的圖片，也可以是3D背景，甚至可以是一段視頻。在背景中放置視頻可以立即抓住用戶的注意力，因?yàn)槿说囊暰€本能地 會(huì)趨向運(yùn)動(dòng)。我們確信，在今年將會(huì)有更多的網(wǎng)站采用動(dòng)態(tài)背景。Yanagiu Kamiko網(wǎng)站的背景是浸入式的，而且十分迷人。它讓用戶忍不住想去了解更多背景圖片之后的故事。

　　12、分離式屏幕布局

　　分離式布局在2016年也會(huì)繼續(xù)流行。這意味著網(wǎng)頁將會(huì)分為兩個(gè)或更多部分。這種設(shè)計(jì)方式使設(shè)計(jì)師能以干凈利落的布局呈獻(xiàn)給用戶雙倍的內(nèi)容。在想要展示產(chǎn)品 和服務(wù)的不同角度時(shí)，這種方式尤其有用。分離式的布局還可以用于比較兩種不同的事物。例如，標(biāo)志汽車的網(wǎng)站就在其主頁上使用了分離式布局，將汽車的人性元 素與汽車的技術(shù)元素并列在一起。

　　伴隨著技術(shù)的快速革新，每年都會(huì)涌現(xiàn)出新的網(wǎng)頁設(shè)計(jì)潮流。我們希望上面所列舉的一些潮流能為設(shè)計(jì)師提供一些靈感，并幫助他們?cè)O(shè)計(jì)出更為獨(dú)一無二的網(wǎng)頁。