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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　事 實(shí)上已經(jīng)有很多其他的幾何形狀被用于網(wǎng)頁(yè)布局中了。不論是在體育網(wǎng)站，健身網(wǎng)站還是別的網(wǎng)站，長(zhǎ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)頁(yè)(當(dāng)然會(huì)有少量文字)的設(shè)計(jì)手段。俗話說(shuō)一圖勝過(guò)千言萬(wàn)語(yǔ)。這句話用在網(wǎng)頁(yè)設(shè)計(jì)中最為適合不過(guò)。在網(wǎng)頁(yè)中使用一張全屏圖片或一段視頻無(wú)疑能有效地從開(kāi)始就抓住用戶的吸引力。我們相信這一設(shè)計(jì)潮流在2016年會(huì)席卷網(wǎng)頁(yè)設(shè)計(jì)界。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　10、幽靈按鈕

　　使用大而花哨的按鈕的時(shí)代已經(jīng)結(jié)束。幽靈按鈕，或透明按鈕的使用，將成為2016年的另一主流。幽靈按鈕也常被成為空按鈕(hollow buttons)，它的特點(diǎn)是僅包含按鈕的邊緣和位于按鈕中央的簡(jiǎn)潔字體。這一特點(diǎn)使它看起來(lái)往往更有吸引力。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)頁(yè)將會(huì)分為兩個(gè)或更多部分。這種設(shè)計(jì)方式使設(shè)計(jì)師能以干凈利落的布局呈獻(xiàn)給用戶雙倍的內(nèi)容。在想要展示產(chǎn)品 和服務(wù)的不同角度時(shí)，這種方式尤其有用。分離式的布局還可以用于比較兩種不同的事物。例如，標(biāo)志汽車的網(wǎng)站就在其主頁(yè)上使用了分離式布局，將汽車的人性元 素與汽車的技術(shù)元素并列在一起。

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