網(wǎng)站設(shè)計(jì)最吸引人的地方在于它是不斷變化的。技術(shù)的進(jìn)化讓設(shè)計(jì)師和工程師不斷地進(jìn)行實(shí)驗(yàn)和創(chuàng)新，帶來更好更流暢的體驗(yàn)，以及讓各地的人們驚喜的感官盛宴。今年有哪些有趣的風(fēng)格會主導(dǎo)我們的屏幕？我們整合了Webflow、The  Next  Web、AWWWARDS等媒體和網(wǎng)站設(shè)計(jì)公司的預(yù)測，整理出了網(wǎng)頁設(shè)計(jì)十大趨勢：

　　1.打破布局設(shè)計(jì)的框架

　　這幾年來，一成不變的頁面布局已經(jīng)開始讓人疲憊。還好有Flexbox和CSS  Grid！(Chrome和Firefox預(yù)計(jì)今年3月開始支持)等技術(shù)使得布局設(shè)計(jì)更加靈活，為設(shè)計(jì)師和工程師帶來了更廣闊的空間。今年，我們將看到更多的網(wǎng)站打破通常的“對稱”和“有序”的規(guī)則，各種網(wǎng)頁的布局將會很精彩。但不變的原則是設(shè)計(jì)的重點(diǎn)是襯托“內(nèi)容”，內(nèi)容是有血有肉的，這是人們訪問網(wǎng)站的主要原因。所以設(shè)計(jì)尺度也要考慮，天馬行空的時(shí)候，不要反客為主，拿走內(nèi)容的優(yōu)雅。

　　2.極簡出，色彩在舞動！

　　色彩作為表達(dá)個(gè)性的重要元素，在極簡主義成為潮流時(shí)被剝離。但是從去年開始，大規(guī)模的漸變色塊似乎有了很強(qiáng)的回報(bào)。Instagram、Asana、Stripe都用飽和的漸變重塑品牌視覺主題。今年，艷麗的色彩和流動的漸變將變得更加流行；另外，圖像以雙色調(diào)制作可能是今年的趨勢。設(shè)計(jì)師莎拉休頓預(yù)測，今年將會是時(shí)髦的一年，希望強(qiáng)烈的色彩能夠刺激人們的視覺。

　　相對于前兩年的明度和明度以及上述張揚(yáng)的色彩對比，以相對平靜的黑色為主色也是越來越多網(wǎng)站的選擇。只要“強(qiáng)調(diào)色”搭配得當(dāng)，黑色一點(diǎn)也不沉悶，反而能在輝煌的世界里脫穎而出。

　　3.華麗實(shí)用的動態(tài)效果

　　動態(tài)效果在當(dāng)代網(wǎng)頁設(shè)計(jì)領(lǐng)域扮演著重要的角色。今年沒有過時(shí)的跡象，但是會廣泛使用。適當(dāng)?shù)膭討B(tài)效果有助于突出重點(diǎn)和吸引注意力。今年SVG和CSS創(chuàng)造的動態(tài)效果有望大幅提升，視差滾動也越來越華麗。但設(shè)計(jì)師要考慮品牌或內(nèi)容的內(nèi)涵以及每一個(gè)動態(tài)效果的意義，避免“為動而動”。

　　4.創(chuàng)造小驚喜的“微互動”“微交互”在網(wǎng)頁上會越來越受歡迎。例如，當(dāng)鼠標(biāo)在各種web部件上移動和點(diǎn)擊時(shí)，如按鈕，滾動滑動過程中會及時(shí)發(fā)生細(xì)微的變化，也可以作為關(guān)鍵點(diǎn)的提醒。當(dāng)然，就像動態(tài)效果一樣，設(shè)計(jì)師也要把握好“動態(tài)”的含義和幅度，以免畫蛇添足。

　　5.無失真、快速加載的SVG矢量圖形文件很受歡迎

　　相對于傳統(tǒng)的圖片格式JPG、PNG和GIF，近年來出現(xiàn)的可伸縮矢量圖片SVG在網(wǎng)頁上具有更大的優(yōu)勢。把圖形和XML結(jié)合起來，畫出矩形、圓形、直線，簡直易如反掌。復(fù)雜的填充和形狀打不過它，動態(tài)效果很容易制作。而且不受分辨率影響，無論用什么屏幕或設(shè)備觀看，畫質(zhì)都不會受損。SVG成功的關(guān)鍵在于它不需要HTTP  Request，可以大大提高網(wǎng)站的加載速度。比如這是一個(gè)用SVG畫的背包。

　　6.巨大的字體準(zhǔn)確傳達(dá)了品牌的含義

　　主頁以巨大的字體呈現(xiàn)品牌主題，這將是今年各地的流行趨勢。但“巨大”并不是指加寬加粗，而是使用恰當(dāng)?shù)淖煮w設(shè)計(jì)，簡潔準(zhǔn)確地表達(dá)產(chǎn)品精神，而不是冗長的贅言。也可以嘗試字體和背景或顏色之間的交互，或者在字體上形成動態(tài)效果。

　　7.結(jié)合內(nèi)容的虛擬現(xiàn)實(shí)技術(shù)

　　虛擬現(xiàn)實(shí)的話題從上一年蔓延到今年，技術(shù)巨頭對虛擬現(xiàn)實(shí)的投資力度并沒有減弱的跡象。特別是，臉書將在未來十年花費(fèi)30億美元專注于虛擬現(xiàn)實(shí)的研發(fā)?？梢灶A(yù)見，技術(shù)會越來越成熟，越來越多的多媒體或品牌會使用虛擬現(xiàn)實(shí)技術(shù)來“講故事”，給人創(chuàng)造一種更加親密的感覺。

　　8.為不同用戶量身定制的內(nèi)容

　　就內(nèi)容網(wǎng)站而言，有效地將正確的內(nèi)容交付給正確的用戶的能力近年來吸引了很多關(guān)注。但能觸及核心的人不多。因?yàn)闉榱烁鶕?jù)情況給出具體的內(nèi)容，需要考慮不同用戶的不同特點(diǎn)，比如用戶訪問網(wǎng)站是為了個(gè)人使用還是為了工作？用戶從哪里來的網(wǎng)站？用戶此刻在做什么？他們之前在網(wǎng)站上有哪些行為？他們用什么電子設(shè)備上網(wǎng)？他們現(xiàn)在是登錄還是注銷？

　　這些特性增加了復(fù)雜性。一些媒體使用“推薦閱讀”機(jī)制，或者，例如，臉書使用算法來確定作為個(gè)人的不同消息流。比如富比茲使用“創(chuàng)意發(fā)現(xiàn)者”，允許用戶自行設(shè)置“身份”、“地域”、“目的”三個(gè)條件，針對不同用戶過濾出最符合要求的內(nèi)容。畫

　　9.“登陸頁面”比“主頁”更重要

　　登陸頁面和首頁的區(qū)別在于，前者有一個(gè)非常明確的目標(biāo)，比如期望用戶注冊、訂閱電子報(bào)甚至購買，而首頁就像是自己家的大門，提示網(wǎng)站包含哪些內(nèi)容或功能，其功能是勾勒。前者的重要性越來越明顯。在設(shè)計(jì)上，要帶領(lǐng)用戶高效率地完成“轉(zhuǎn)換”，幾乎沒有“導(dǎo)航”組件，因?yàn)槲覀儾幌Ｍ脩魪钠渌胤椒中?，最重要也是幾乎唯一的目的就是促進(jìn)轉(zhuǎn)換。

　　10.設(shè)計(jì)分享

　　就像編程領(lǐng)域的熱心分享文化，近年來越來越多的小公司或大企業(yè)愿意公開分享自己內(nèi)部的設(shè)計(jì)團(tuán)隊(duì)協(xié)作和工作技巧，不僅起到了招募人才的效果，也充分展示了品牌特色，營造了設(shè)計(jì)領(lǐng)域互助的氛圍。