【網(wǎng)頁(yè)設(shè)計(jì)】探尋2018年將可能出現(xiàn)的網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)
2017-12-27 09:32:49一、彈出式/插入式內(nèi)容的終結(jié)
Google往往是網(wǎng)頁(yè)趨勢(shì)發(fā)展背后的驅(qū)動(dòng)者。最近，這家搜索引擎公司宣布將處罰那些在搜索結(jié)果中使用彈出式或插入式內(nèi)容等擾人政策的網(wǎng)站，例如屏蔽那些當(dāng)用戶點(diǎn)擊彈出窗口上的“X（關(guān)閉）”按鈕之后才會(huì)消息的內(nèi)容。
不過(guò)并不是所有插入式內(nèi)容都會(huì)消失，像年齡驗(yàn)證、登錄窗口等內(nèi)容則會(huì)被保留下來(lái)。
二、破碎/非常規(guī)網(wǎng)格布局
相信明年會(huì)有越來(lái)越多的網(wǎng)站開(kāi)始嘗試新的網(wǎng)格布局，非常規(guī)甚至破碎的網(wǎng)格將成為更加流行的設(shè)計(jì)美學(xué)。
Invision Studio就是一個(gè)很好的例子，最新發(fā)布的網(wǎng)站就在推動(dòng)網(wǎng)格設(shè)計(jì)的邊界，其對(duì)用戶在滾動(dòng)頁(yè)面時(shí)候的網(wǎng)格布局進(jìn)行了一番改變，甚至還在某些情況下通過(guò)在特定位置采用文本覆蓋圖片的方式“打破”邊界。
三、襯線的回歸
曾經(jīng)的扁平化設(shè)計(jì)為了盡可能地扁平化甚至去掉了襯線。然而當(dāng)扁平化設(shè)計(jì)開(kāi)始走到盡頭的時(shí)候，人們又開(kāi)始看到了襯線的回歸。
在眾籌網(wǎng)站Kickstarter上大家就可以看到一些襯線。這為原本干凈、現(xiàn)代的設(shè)計(jì)布局加入更多的個(gè)性，因?yàn)橐r線就是增加個(gè)性化和真實(shí)性的方式之一。
四、動(dòng)畫的存在不再分散用戶注意力
多虧了jQuery和CSS3，動(dòng)畫在各大網(wǎng)站發(fā)展起來(lái)，然而到最近，設(shè)計(jì)師們想要網(wǎng)頁(yè)上的所有東西都動(dòng)起來(lái)。所以2018年預(yù)計(jì)網(wǎng)頁(yè)會(huì)出現(xiàn)更多的動(dòng)畫和交互式內(nèi)容，但它們出現(xiàn)的目的是為了體驗(yàn)而非分散用戶的注意力。
Concrete Rep網(wǎng)站就是一個(gè)很好的例子。當(dāng)滾動(dòng)頁(yè)面時(shí)將會(huì)出現(xiàn)不同的圖片和文字內(nèi)容。
五、銳利的漸變
另一個(gè)開(kāi)始流行的趨勢(shì)將來(lái)自漸變的呈現(xiàn)。銳利的漸變風(fēng)格開(kāi)始不斷出現(xiàn)，它能帶來(lái)更強(qiáng)烈的視覺(jué)效果。
Sketch網(wǎng)頁(yè)是一個(gè)代表例子。大家可以在網(wǎng)頁(yè)右邊看到紫色的銳利漸變。另外當(dāng)滾動(dòng)頁(yè)面的時(shí)候還將看到一個(gè)圓形靶心效果，這能有助于將漸變的東西變得更加引人注目。
六、打破橫向水平的傳統(tǒng)
誰(shuí)說(shuō)橫線必須是水平的？最近，設(shè)計(jì)師們就開(kāi)始打破這種傳統(tǒng)將橫線以斜線的形式表現(xiàn)。通過(guò)這種銳利的斜線，網(wǎng)站頁(yè)面能夠獲得更多的視覺(jué)樂(lè)趣并變得更加獨(dú)特。
Stripe網(wǎng)站展現(xiàn)的效果，可以看到，只要設(shè)計(jì)得當(dāng)，斜著的橫線看著也非常漂亮、舒服。
七、圓角復(fù)活
看起來(lái)圓角并沒(méi)有真正死去，實(shí)際上現(xiàn)在設(shè)計(jì)師們又將它帶來(lái)了回來(lái)?？碩witter的新推文發(fā)布框就是一個(gè)很好的證明。
八、鮮艷大膽的配色
想要想出新的配色方案并不容易，所以直到年代才開(kāi)始出現(xiàn)越來(lái)越多的新配色方案，它們看起來(lái)好像不大可行但實(shí)際上卻又行得通。等到2018年，人們可能將會(huì)看到更多鮮艷、大膽的實(shí)驗(yàn)性配色方案。有時(shí)候許多明亮的顏色都被認(rèn)為不大可能和平共處，但真把它們放在一起的時(shí)候效果卻出奇得好。
不信請(qǐng)看Spotify，其采用了粉色、金色、橙色這三種一般不會(huì)有人想到將它們組合在一起的顏色，最終的效果相信大家也都看到了，非常棒。
九、交互式的故事內(nèi)容
現(xiàn)在，越來(lái)越多的網(wǎng)頁(yè)開(kāi)發(fā)者開(kāi)始通過(guò)動(dòng)畫或視頻來(lái)幫助他們更好地呈現(xiàn)其所要訴說(shuō)的故事。
CNN最近發(fā)布的一篇關(guān)于全球變暖和格陵蘭島冰川融化的新聞報(bào)道，其將故事分成多個(gè)部分并且在每個(gè)部分都提供了不同的背景、動(dòng)畫。
十、分割桌面屏幕的設(shè)計(jì)
眼下還出現(xiàn)了這樣一個(gè)流行趨勢(shì)，即讓一或兩張圖片來(lái)接管網(wǎng)頁(yè)試圖，從中間垂直向下分割。
Jaune de Chrome網(wǎng)站就是這一趨勢(shì)的代表之一。
十一、粗獷主義的出現(xiàn)
也許許多人沒(méi)有聽(tīng)說(shuō)過(guò)粗獷主義，當(dāng)在網(wǎng)頁(yè)設(shè)計(jì)中談?wù)摰竭@個(gè)也就意味著與以上談?wù)撍汹厔?shì)的對(duì)立面。它幾乎打破了所有網(wǎng)頁(yè)設(shè)計(jì)和用戶體驗(yàn)的規(guī)則。
粗獷主義網(wǎng)站只遵循自己的設(shè)計(jì)美學(xué)，其不符合任何美學(xué)趨勢(shì)。上圖就是一個(gè)粗獷主義網(wǎng)站的典型框架，下圖則是一個(gè)粗獷主義網(wǎng)站設(shè)計(jì)的范例。
總結(jié)
就網(wǎng)頁(yè)設(shè)計(jì)而言，2018年注定會(huì)是令人興奮的一年。上面談到的趨勢(shì)在2017年最后幾個(gè)月已經(jīng)廣受歡迎，所以相信到了明年它們勢(shì)必將能大放異彩。
