對于(yu)設計(ji)趨(qu)勢(shi)我(wo)們(men)(men)似(si)乎永遠都聊不完。雖然我(wo)們(men)(men)無(wu)法確知2017年會有怎樣的(de)變化，但(dan)是我(wo)們(men)(men)可(ke)以通過2016年整(zheng)個(ge)設計(ji)圈的(de)演進，來(lai)窺見未來(lai)可(ke)能會越(yue)(yue)來(lai)越(yue)(yue)火熱的(de)設計(ji)趨(qu)勢(shi)。

不過(guo)，因為視(shi)角和領域的(de)(de)(de)(de)差異，各家對于設(she)(she)計趨(qu)(qu)(qu)(qu)勢(shi)的(de)(de)(de)(de)看(kan)法各不相(xiang)同(tong)，不過(guo)總體上(shang)(shang)并(bing)沒(mei)有(you)沖突(tu)，從(cong)優設(she)(she)近期(qi)的(de)(de)(de)(de)幾篇(pian)設(she)(she)計趨(qu)(qu)(qu)(qu)勢(shi)文章中就能(neng)看(kan)出來(lai)。UI設(she)(she)計趨(qu)(qu)(qu)(qu)勢(shi)的(de)(de)(de)(de)轉變，很(hen)大(da)程度上(shang)(shang)會(hui)受到用(yong)戶(hu)交互(hu)習慣、設(she)(she)計語言和數碼(ma)設(she)(she)備的(de)(de)(de)(de)影響，《趨(qu)(qu)(qu)(qu)勢(shi)丨8個(ge)你需要(yao)知道的(de)(de)(de)(de)2017年UI設(she)(she)計流(liu)行(xing)(xing)(xing)趨(qu)(qu)(qu)(qu)勢(shi)》這篇(pian)文章能(neng)讓你更加明白這個(ge)道理;而從(cong)事(shi)電(dian)商(shang)行(xing)(xing)(xing)業的(de)(de)(de)(de)小婷姐(jie)則更多是從(cong)行(xing)(xing)(xing)業發展和從(cong)業經驗的(de)(de)(de)(de)角度來(lai)分享2017年電(dian)商(shang)設(she)(she)計的(de)(de)(de)(de)變化(hua)趨(qu)(qu)(qu)(qu)勢(shi)：《電(dian)商(shang)|入(ru)行(xing)(xing)(xing)5年，我寫文百篇(pian)后總結了(le)這8條趨(qu)(qu)(qu)(qu)勢(shi)分析》;至于相(xiang)對寬(kuan)泛的(de)(de)(de)(de)用(yong)戶(hu)體驗設(she)(she)計，所(suo)探討(tao)的(de)(de)(de)(de)話題也相(xiang)對更加抽象，但是依(yi)然(ran)很(hen)重(zhong)要(yao)，有(you)興趣(qu)可以看(kan)看(kan)這篇(pian)優設(she)(she)重(zhong)譯(yi)之后的(de)(de)(de)(de)《2017年即將流(liu)行(xing)(xing)(xing)的(de)(de)(de)(de)9大(da)UX設(she)(she)計趨(qu)(qu)(qu)(qu)勢(shi)》，相(xiang)信你能(neng)有(you)所(suo)收獲(huo)。

當(dang)然，今天我們要聊的是在(zai)網頁設計領域在(zai)2017年可(ke)能會出現的設計趨勢，也許并不完(wan)全精準，但是相信你會在(zai)接下來的一年中，越來越多地(di)看到這些設計手法。

1、越來越多的襯(chen)線體

除(chu)開(kai)我們所(suo)熟知(zhi)的Helvetica，占據(ju)我們屏幕(mu)首頁的各種非襯線(xian)體字體還(huan)有(you)很多。在過(guo)去幾年(nian)中(zhong)，高(gao)清大圖(tu)的流行和跨平(ping)臺設計(ji)大行其(qi)道，這(zhe)兩種客觀需求之下(xia)讓設計(ji)師慣于將(jiang)加粗、易(yi)讀(du)的非襯線(xian)體和大圖(tu)結(jie)合起來使用。

但是隨著(zhu)高清屏幕的(de)流行與普及(ji)，非(fei)襯(chen)線字體一家獨(du)大的(de)局面(mian)將會發生改變(bian)。

細節豐富，充滿裝飾性的(de)非襯線體字(zi)體在(zai)現如(ru)今(jin)的(de)屏(ping)幕上(shang)(shang)，已經不(bu)(bu)存在(zai)識別度的(de)問題了，可讀性強了很多。在(zai)如(ru)今(jin)高(gao)像素密度的(de)屏(ping)幕上(shang)(shang)，擁有不(bu)(bu)同美學特(te)征的(de)非襯線體字(zi)體的(de)全部特(te)色(se)，都能完整地(di)呈現出來。

2、深色系配(pei)色

在過去的一年(nian)當中，大(da)量(liang)的網站采用了白色(se)和淺(qian)色(se)的背景，采用深色(se)背景設(she)計(ji)的網站相對較少。

可(ke)是看多了也膩味。有(you)一(yi)部分(fen)網(wang)站已經(jing)開(kai)始倒轉(zhuan)整個配(pei)色(se)，開(kai)始在(zai)自家(jia)的(de)網(wang)站上探(tan)索(suo)深色(se)系配(pei)色(se)的(de)美學。在(zai)配(pei)色(se)上采用深色(se)為主的(de)設計，最需要(yao)注意的(de)就是其(qi)(qi)中(zhong)色(se)彩的(de)對(dui)比度和內容的(de)可(ke)讀性，只要(yao)把握(wo)好其(qi)(qi)中(zhong)的(de)關節，能夠很(hen)好的(de)吸引(yin)訪客的(de)注意力。

隨著深色(se)(se)系配色(se)(se)而(er)來的(de)，還有越來越多的(de)單(dan)色(se)(se)配色(se)(se)方案，更(geng)極端一些的(de)，干脆就只(zhi)在(zai)純色(se)(se)的(de)深色(se)(se)背景(jing)上搭(da)配照片。這樣的(de)配色(se)(se)手法乍一看很單(dan)調，但是深色(se)(se)背景(jing)下，流行色(se)(se)會(hui)顯得更(geng)加突出(chu)，也(ye)更(geng)容易鼓勵訪客與網(wang)站進行互(hu)動。

3、中(zhong)性、自然(ran)的配色方案

如果你一直關心流行色或(huo)者優(you)設(she)的話，你肯定會知道潘通最新(xin)(xin)發布的2017 年流行色——草(cao)木綠，這一自然氣息(xi)濃郁(yu)的色彩被(bei)大(da)家稱為“新(xin)(xin)中性色”。

在未來(lai)的一年當中，將會(hui)出現越來(lai)越多充(chong)滿自然特色(se)的配色(se)方案，而(er)其(qi)中許(xu)多配色(se)方案會(hui)選擇(ze)使用草木(mu)綠來(lai)搭配。

如(ru)果你想(xiang)了解潘通的(de)草(cao)木(mu)綠是如(ru)何(he)挑(tiao)選(xuan)出來的(de)，那么這篇(pian)文章不容錯過：《潘通發布2017年(nian)流行(xing)色后(hou)，我(wo)們和(he)它的(de)CEO來了一場對話(hua)》。看完(wan)之后(hou)，優設(she)(she)的(de)這篇(pian)《玩(wan)轉草(cao)木(mu)綠!在這里了解2017的(de)年(nian)度潘通流行(xing)色》應該能讓(rang)你更了解，如(ru)何(he)將出草(cao)木(mu)綠融(rong)入到你的(de)設(she)(she)計當中(zhong)~

4、幾(ji)何元素

從(cong)矩形(xing)到(dao)三角形(xing)，從(cong)方形(xing)到(dao)圓形(xing)，幾(ji)何(he)圖形(xing)已經越來(lai)越多地出(chu)現(xian)在網頁設計當中。好的設計不(bu)會讓這些(xie)幾(ji)何(he)圖形(xing)在整(zheng)體中過于突兀，而是盡(jin)量融入，為用戶提(ti)(ti)供視覺引導，強化交(jiao)互體驗，提(ti)(ti)供行動召喚(huan)，或者讓整(zheng)個視覺更加有(you)趣。

網頁中幾何元(yuan)素(su)的(de)設計(ji)要(yao)如(ru)(ru)何設計(ji)好(hao)呢?技巧在(zai)于，盡量采用(yong)(yong)簡單的(de)設計(ji)。例(li)如(ru)(ru)，你喜歡環狀(zhuang)的(de)元(yuan)素(su)，那么(me)你可(ke)(ke)以(yi)(yi)將它(ta)作(zuo)為一(yi)個固定的(de)元(yuan)素(su)，在(zai)整個設計(ji)中使用(yong)(yong)，它(ta)可(ke)(ke)以(yi)(yi)承(cheng)載圖標(biao)，也可(ke)(ke)以(yi)(yi)用(yong)(yong)作(zuo)團隊成員頭像外(wai)框。

幾(ji)何元素(su)(su)(su)的(de)另外一種用(yong)法(fa)，是將多種圖形做成拼貼式(shi)的(de)背景裝(zhuang)飾元素(su)(su)(su)。幾(ji)何元素(su)(su)(su)尺寸(cun)(cun)較小的(de)時候，可(ke)以使用(yong)明亮的(de)色彩，讓整(zheng)個設計(ji)(ji)顯得更加繽紛有(you)趣。如果幾(ji)何圖形尺寸(cun)(cun)較大，就不能這么用(yong)了，而是要通(tong)過(guo)著色讓他(ta)能和其他(ta)元素(su)(su)(su)構(gou)成對比，又不能太過(guo)于突(tu)兀，比如Hive Boxx 這個頁面的(de)設計(ji)(ji)。

5、超大(da)字體(ti)

有一些(xie)設(she)計(ji)師已經(jing)開始這樣做設(she)計(ji)了(le)，不過隨(sui)后你會在(zai)網頁(ye)設(she)計(ji)中(zhong)看到更多的(de)(de)超大(da)字(zi)體(ti)的(de)(de)設(she)計(ji)。字(zi)體(ti)尺(chi)寸拉大(da)之后，搭(da)配多樣的(de)(de)樣式、飛濺的(de)(de)色彩(cai)，這些(xie)尺(chi)寸超大(da)的(de)(de)文字(zi)如今已經(jing)變(bian)得越來越重(zhong)要了(le)。

超大(da)字體流行背后的(de)(de)邏(luo)輯是頁面(mian)需要通過它們(men)抓住用戶(hu)的(de)(de)注意(yi)力(li)，每(mei)個(ge)設(she)計師都需要讓(rang)特定的(de)(de)部分在整個(ge)設(she)計中(zhong)脫穎而出。擁擠的(de)(de)瀏覽(lan)器頁面(mian)中(zhong)，要怎樣才能抓住用戶(hu)的(de)(de)注意(yi)力(li)呢?肯定是強視(shi)覺化的(de)(de)內容，這樣一來，超大(da)字體的(de)(de)流行就解釋得通了。

當然，你可以從最經(jing)典的英文(wen)字(zi)體(ti)(ti)入手：《灰晝(zhou)的字(zi)體(ti)(ti)庫!10款常用的經(jing)典基礎英文(wen)字(zi)體(ti)(ti)推(tui)薦(已打包)》

6、虛擬現實

對，虛擬現實是目前最火熱的趨(qu)勢(shi)，并且它已(yi)經入侵到了(le)網(wang)頁(ye)設(she)計領域了(le)。

許多設(she)計師已經開始在他們(men)自己的(de)網頁中嘗試設(she)計類似虛擬現實的(de)效果(guo)。從游戲到(dao)360度(du)視頻，設(she)計師試圖讓用戶無需VR眼鏡而擁有環(huan)繞(rao)的(de)真實視野。雖然技術上和VR幾乎完(wan)全不沾邊，但是它同樣是追(zhui)求真實的(de)體驗。

目前，這種(zhong)設(she)(she)計(ji)(ji)還(huan)沒有(you)完善的(de)規則，許多類VR的(de)網頁設(she)(she)計(ji)(ji)還(huan)是需要設(she)(she)計(ji)(ji)師(shi)動腦子想辦法來(lai)實現，非常考驗設(she)(she)計(ji)(ji)技(ji)巧(qiao)。

如(ru)果你對于VR和AR感興趣，優設之前的(de)這篇文(wen)章(zhang)應(ying)該能讓(rang)你有所思考(kao)：《AR|也許AR增(zeng)強(qiang)現實技術才是(shi)距離(li)設計(ji)師(shi)最近的(de)未(wei)來》

　　7、新的導航模式

如果你(ni)(ni)一(yi)直在(zai)關注(zhu)新的(de)設計(ji)(ji)趨勢，你(ni)(ni)會(hui)發現設計(ji)(ji)師一(yi)直在(zai)嘗試(shi)尋(xun)求不同的(de)導(dao)航模式。當然，截至目前，絕(jue)大多(duo)數(shu)的(de)頁(ye)面(mian)(mian)依然還是將導(dao)航掛(gua)著頁(ye)面(mian)(mian)的(de)頂部。

隨著不(bu)同的尺寸(cun)比例屏幕、不(bu)同的設備的出現，新的導航(hang)模式(shi)擁有了(le)存在的可能性。首(shou)先流行開(kai)來的是屏幕側邊導航(hang)設計和隱藏式(shi)的導航(hang)設計。

這種看(kan)似微小(xiao)的(de)(de)變化，讓(rang)(rang)網(wang)站(zhan)的(de)(de)瀏(liu)覽方式和體(ti)驗出現了翻天(tian)覆地的(de)(de)變化：它們讓(rang)(rang)頁面變得(de)更加時尚，可以兼(jian)容(rong)不(bu)同的(de)(de)屏幕(mu)需求，甚至讓(rang)(rang)整個網(wang)頁布局(ju)都能進行(xing)全新的(de)(de)設計了。

隱(yin)藏(zang)式菜(cai)單設計并(bing)不是讓導航(hang)完全(quan)隱(yin)藏(zang)，而(er)是讓整(zheng)個屏幕都(dou)成了(le)呼出菜(cai)單的(de)控(kong)件，這樣的(de)設計已經被很多(duo)用(yong)戶所(suo)理解并(bing)熟(shu)知，它在移動端上的(de)應用(yong)已經相當的(de)廣泛。

結語(yu)

今(jin)天所(suo)聊(liao)的(de)這7個(ge)網頁設計趨勢，其實只是(shi)諸多(duo)趨勢中，相(xiang)對明顯的(de)7個(ge)，如(ru)果你仔細觀(guan)察還(huan)能發現(xian)更(geng)多(duo)。