2018年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

2017年快要結(jié)束了，2018年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)是什么呢？今天我們就來(lái)分享一些設(shè)計(jì)師的觀點(diǎn)和預(yù)測(cè)。

01、網(wǎng)絡(luò)動(dòng)畫(huà)

“今年的動(dòng)畫(huà)非常強(qiáng)大；數(shù)字創(chuàng)意機(jī)構(gòu)的創(chuàng)意總監(jiān)Mireia Lopez說(shuō)：“他們真的被帶到下一個(gè)層次?！?/span>

我們看到了設(shè)計(jì)團(tuán)隊(duì)的動(dòng)畫(huà)、原型化和學(xué)習(xí)整齊的編碼，以使用更復(fù)雜的原型工具，比如Framer，以便將概念傳達(dá)給客戶，并向開(kāi)發(fā)人員解釋數(shù)字旅程。設(shè)計(jì)師和開(kāi)發(fā)者之間的界線開(kāi)始變得模糊，我絕對(duì)認(rèn)為我們將在未來(lái)的一年里看到快速的融合。

社交媒體管理平臺(tái)Lightful的高級(jí)數(shù)字設(shè)計(jì)師Bruno La Versa對(duì)此表示贊同。他說(shuō)：“講故事和個(gè)性是新老品牌為了吸引用戶的注意力而進(jìn)行的工作，動(dòng)畫(huà)也開(kāi)始在這方面發(fā)揮更大的作用。”

“動(dòng)畫(huà)展示了并將繼續(xù)展示品牌在我們數(shù)字世界的力量，給品牌一個(gè)強(qiáng)大的個(gè)性，使它更少的靜態(tài)和更動(dòng)態(tài)。”

作為這一趨勢(shì)的一部分，我們看到了GIF動(dòng)畫(huà)的回歸。“似乎世界已經(jīng)準(zhǔn)備好了(而且確實(shí)迫切需要)動(dòng)畫(huà)，不管它是喜劇圈的貓從桌子上掉下來(lái)，還是在你的電子郵件簽名中添加了一種有趣的標(biāo)志，”領(lǐng)土項(xiàng)目的創(chuàng)始人和總監(jiān)Lee法西斯說(shuō)。

他補(bǔ)充道：“現(xiàn)在，基本的GIF動(dòng)畫(huà)將會(huì)在這里停留，因?yàn)樗鼛缀蹩梢蚤喿x任何東西?！爆F(xiàn)在，設(shè)計(jì)師們利用這種能力來(lái)激活HTML電子郵件、消息、網(wǎng)頁(yè)等等。一個(gè)精心設(shè)計(jì)的、精心制作和執(zhí)行的GIF序列可以讓任何用戶注意到，而且在2018年將會(huì)有更多的時(shí)間。要了解這一趨勢(shì)，請(qǐng)查看我們的5個(gè)步驟，以掌握web動(dòng)畫(huà)和10個(gè)精彩的web動(dòng)畫(huà)，由Chris Gannon。

02、更冒險(xiǎn)的顏色

“在過(guò)去的一年里，我們看到了在數(shù)字平臺(tái)上使用大膽色彩的增加，”Kagool的創(chuàng)意總監(jiān)James Bearne說(shuō)。一個(gè)很好的例子就是DesignStudio在2016 - 2017賽季的新品牌計(jì)劃。

“一個(gè)自信的離開(kāi)了之前的身份，引人注目的視覺(jué)治療并沒(méi)有停留在網(wǎng)站或它的應(yīng)用上；它以廣告牌、社交媒體等方式在球場(chǎng)上轟鳴。

Bearne預(yù)測(cè)，這不會(huì)在2018年放緩?！坝辛讼駅hroma幫助我們這樣的新工具來(lái)尋找更有趣的色彩使用方法，我們很有可能會(huì)看到更多的設(shè)計(jì)師探索如何使用色彩來(lái)傳遞特殊的體驗(yàn)?！?/span>

“有趣的是，顏色可以與定制和個(gè)性化一起使用，為消費(fèi)者創(chuàng)造出真正獨(dú)特的體驗(yàn)，讓他們同時(shí)打幾個(gè)盒子。”

03、排版

在爭(zhēng)奪眼球的斗爭(zhēng)中，印刷術(shù)是一種強(qiáng)大的武器，它在網(wǎng)絡(luò)上的使用今年已經(jīng)擴(kuò)大，99設(shè)計(jì)的內(nèi)容策略高級(jí)經(jīng)理Kelly Moor說(shuō)。

印刷術(shù)很強(qiáng)大，而且越大越好。因此，雖然像Helvetica這樣的新風(fēng)格的無(wú)襯線風(fēng)格仍在流行，但設(shè)計(jì)師們卻在尋找各種各樣的字體。

她預(yù)測(cè)，2018年將會(huì)有大量的劇集回歸熒屏?！拔覀冞€會(huì)看到越來(lái)越多的網(wǎng)站使用對(duì)比的serif和sans - serif字體來(lái)創(chuàng)建用戶體驗(yàn)的動(dòng)態(tài)相似之處，比如GE的華麗網(wǎng)頁(yè)設(shè)計(jì)?！?/span>

事實(shí)上，設(shè)備分辨率越來(lái)越高，提高了可讀性的因素，也為定制字體的興起打開(kāi)了方便之門(mén)?！霸O(shè)計(jì)師們選擇了大量的字體，不僅是為了強(qiáng)調(diào)，而且是為了美觀?！彼羞@一切，加上超大字體所帶來(lái)的戲劇性，表明2018年將不會(huì)都是微妙的，我們可以期待看到大膽的趨勢(shì)繼續(xù)發(fā)展。

另一種與打字相關(guān)的趨勢(shì)，是由Hyped Marketing的studio經(jīng)理Gee Guntrip所發(fā)現(xiàn)的，是排版印刷技術(shù)。她說(shuō)：“這項(xiàng)技術(shù)使用了一種顏色塊，通過(guò)清晰的字母來(lái)顯示靜止或移動(dòng)的圖像?！边x擇合適的字體和限制字母的數(shù)量是最重要的。

例如，丹伯里做得很好，它有一個(gè)明亮的文本，吸引用戶注意它的視頻。法國(guó)喜劇《法蘭西絲》使用了文字懸停的印刷效果。并通過(guò)字母來(lái)培養(yǎng)數(shù)字展示視頻。

04、數(shù)據(jù)講故事

Ito World高級(jí)數(shù)據(jù)可視化設(shè)計(jì)經(jīng)理克雷格?泰勒(Craig Taylor)表示：“2017年是設(shè)計(jì)的好年份?！薄拔覀円?jiàn)證了動(dòng)畫(huà)可視化的蓬勃發(fā)展，以及從3D角度對(duì)數(shù)據(jù)表達(dá)的需求增加?！钡?，如果不是可消化的，最終可用的話，這些數(shù)據(jù)，是漂亮的還是其他的呢?

輸入泰勒所說(shuō)的信息故事講述者。他解釋說(shuō)：“現(xiàn)在，人們非常注重通過(guò)設(shè)計(jì)來(lái)進(jìn)行有效的敘事，將復(fù)雜的信息盡可能簡(jiǎn)單地傳達(dá)給不同的觀眾?！薄霸O(shè)計(jì)師們正在用新的、定制的作品來(lái)思考盒子之外的東西——老式的、柔和的調(diào)色板，支持充滿活力的色彩過(guò)渡，搭配極簡(jiǎn)而大膽的版式?！?/span>

那么，信息設(shè)計(jì)的2018年是什么呢?泰勒相信，“更容易獲得新技術(shù)的人無(wú)疑將會(huì)看到，使用動(dòng)畫(huà)作為一種講故事方式的設(shè)計(jì)師數(shù)量將會(huì)增加?！?/span>

“隨著AR和虛擬現(xiàn)實(shí)技術(shù)的進(jìn)步，虛擬模型的模擬探索的前景，我們記住將信息和數(shù)據(jù)保存在我們所做的事情的核心是很重要的?！比绻覀兡茏龅竭@一點(diǎn)，數(shù)據(jù)科學(xué)和設(shè)計(jì)的重疊的領(lǐng)域?qū)⒃试S越來(lái)越多的信息、基礎(chǔ)和清晰的數(shù)據(jù)可視化的例子。

李·特拉尼同意，AR和VR有更多的東西可以提供。他說(shuō)：“科技使我們能夠更容易地將現(xiàn)實(shí)世界與我們的屏幕世界結(jié)合起來(lái)?！薄拔覀冋龔脑絹?lái)越多的愿望開(kāi)始，將視頻添加到我們的數(shù)字體驗(yàn)中；在不太久以前，用一種深度和豐富的方式來(lái)分層。

“喜憂參半的現(xiàn)實(shí)使我們堅(jiān)定地進(jìn)入了‘新’，大型科技公司致力于在AR領(lǐng)域進(jìn)行創(chuàng)新，未來(lái)的設(shè)計(jì)將需要在所有四個(gè)方面考慮我們的世界?！蔽覀兛吹皆诹餍械挠螒蚝透嗟墓δ軕?yīng)用程序(如宜家)的混合現(xiàn)實(shí)的開(kāi)始。

05、間距的標(biāo)準(zhǔn)化設(shè)計(jì)工具

在2017年，似乎沒(méi)有一天沒(méi)有新的應(yīng)用程序、工具或功能，比如InVision、Adobe XD、Figma、Axure、Marvel、Vectr等。這包括草圖，它的開(kāi)放文件格式更新，是一個(gè)真正的游戲規(guī)則改變者。

“讓我們這樣說(shuō)，如果你還在使用Photoshop進(jìn)行UI設(shè)計(jì)，你可能需要看看你的周圍，”布魯諾說(shuō)。2017年是新設(shè)計(jì)工具的一年：Figma、Webflow、InVision Studio等。設(shè)計(jì)工具的爆炸凸顯了設(shè)計(jì)如何成為企業(yè)運(yùn)作的核心要素。

然而，Bearne指出，這種趨勢(shì)對(duì)機(jī)構(gòu)構(gòu)成了特殊的挑戰(zhàn)?！?017年，有大量的工具出現(xiàn)，希望成為行業(yè)的‘選擇工具’，但同時(shí)，大量的產(chǎn)品也變得令人沮喪，因?yàn)樗腥硕悸暦Q實(shí)現(xiàn)了巨大的期望。”

“這為機(jī)構(gòu)間的工作創(chuàng)造了一個(gè)問(wèn)題，團(tuán)隊(duì)有不同的流程，每個(gè)團(tuán)隊(duì)都經(jīng)過(guò)測(cè)試，以發(fā)現(xiàn)是否可以替換草圖。”反過(guò)來(lái)，市場(chǎng)已經(jīng)充斥著各種選擇，但卻沒(méi)有多少關(guān)于如何提高效率的指導(dǎo)。

“InVision Studio的發(fā)布——定于2018年1月——將會(huì)很有趣，因?yàn)槲覀儗?huì)看到它是否能夠使用它的協(xié)同平臺(tái)，最終為設(shè)計(jì)過(guò)程帶來(lái)標(biāo)準(zhǔn)化。如果InVision和它看起來(lái)一樣好，會(huì)發(fā)生什么?Photoshop的生存之戰(zhàn)終于結(jié)束了嗎?

06、平面設(shè)計(jì)2.0

平坦的設(shè)計(jì)并沒(méi)有消亡，但在2018年，它肯定必須學(xué)會(huì)適應(yīng)與之保持聯(lián)系。這種新的、所謂的平面2.0或半平面設(shè)計(jì)，依賴于在其之前的ascetic標(biāo)識(shí)中添加細(xì)微差別和深度。它是怎么做到的?沉溺于一些設(shè)計(jì)禁忌：漸變和陰影。但別擔(dān)心，這只是適度的。

自2007年以來(lái)，漸變已經(jīng)讓人想起了公司的Powerpoint演示文稿、20世紀(jì)的網(wǎng)頁(yè)標(biāo)題和過(guò)時(shí)的logo設(shè)計(jì)?！暗?018年，它們又回來(lái)了，盡管進(jìn)化了，”摩爾繼續(xù)說(shuō)?！疤荻痊F(xiàn)在是搖擺振動(dòng)的，更新的顏色調(diào)色板和更柔和的，微妙的過(guò)渡?！彼麄?cè)贗nstagram、Stripe、甚至蘋(píng)果的iOS圖標(biāo)等品牌上引起了轟動(dòng)。

多虧了web瀏覽器功能的進(jìn)展，我們也看到了陰影的復(fù)活。和漸變一樣，陰影被擱置在極簡(jiǎn)主義和二維設(shè)計(jì)中?，F(xiàn)實(shí)主義和偏態(tài)仍然存在，但在2018年，設(shè)計(jì)師們將會(huì)越來(lái)越多地在他們的作品中不斷更新、軟化和風(fēng)格化的陰影。

她以一個(gè)例子來(lái)提供規(guī)模網(wǎng)站。她解釋說(shuō)：“界面的布局非常簡(jiǎn)單，但特點(diǎn)是柔軟的，飽和的梯度，并大量使用基于陰影的微交互?！辈粌H有許多可點(diǎn)擊的按鈕被拉長(zhǎng)的陰影所突出，陰影也強(qiáng)調(diào)了媒體和打破了頁(yè)面。深度有助于確定視覺(jué)層次結(jié)構(gòu)，并可以指向用戶輸入字段，并在屏幕上調(diào)用操作。

平面設(shè)計(jì)完全背離了20世紀(jì)的偏態(tài)和超現(xiàn)實(shí)，但鐘擺擺得太遠(yuǎn)了嗎?“在2018年，我們將繼續(xù)朝著世界上最好的局面發(fā)展，”摩爾相信，“在這種情況下，巧妙地重新引入陰影和漸變，可以增加功能和美感?！?/span>

07、有趣的插圖

2017年，我們?cè)诰W(wǎng)站上看到了更多的插圖，這并不是巧合。摩爾說(shuō)：“品牌想要脫穎而出，插圖是將個(gè)性注入網(wǎng)站的絕佳方式?！?/span>

“它們?cè)谝曈X(jué)上吸引人，而不會(huì)妨礙功能和簡(jiǎn)單；插圖有無(wú)限的形狀、大小、樣式，是一個(gè)動(dòng)態(tài)的元素，可以在2018年及以后尋找。我們正在學(xué)習(xí)，不要因?yàn)楹?jiǎn)單的用戶體驗(yàn)而忽視好玩。

然而，這一趨勢(shì)并不僅僅是異想天開(kāi)。插圖可以是展示或解釋信息的非常實(shí)用的方法。沒(méi)有人想要一個(gè)無(wú)聊的網(wǎng)站，而定制繪畫(huà)是一種人類的觸摸，可以為枯燥的內(nèi)容注入活力。

“市場(chǎng)已經(jīng)飽和，競(jìng)爭(zhēng)激烈，而網(wǎng)頁(yè)設(shè)計(jì)需要在個(gè)性和功能之間找到平衡；插圖是展示你是誰(shuí)的最佳方式，只要看看那些有趣的人就可以了。

08、人工智能的發(fā)展

人工智能不再是科幻小說(shuō)的話題。人工智能已經(jīng)通過(guò)像會(huì)話接口(聊天機(jī)器人)這樣的技術(shù)進(jìn)入主流網(wǎng)頁(yè)設(shè)計(jì)。事實(shí)上，據(jù)eBay產(chǎn)品設(shè)計(jì)師伊萊恩·李(Elaine Lee)說(shuō)，你可能已經(jīng)在日常工作中使用人工智能了，甚至不知道它。

正如她在這篇文章中所解釋的那樣，所謂的“人工狹窄智能”已經(jīng)很難在像谷歌Home和蘋(píng)果的Siri這樣的語(yǔ)音助手工作了。它還為亞馬遜(Amazon)、Spotify和Netflix等公司提供推薦技術(shù)，更不用說(shuō)智能家居設(shè)備、自動(dòng)駕駛汽車和聊天機(jī)器人了。

“隨著人們?cè)絹?lái)越習(xí)慣于與機(jī)器人互動(dòng)，我們看到了在設(shè)計(jì)中使用對(duì)話界面的興起，”《宣言》的首席執(zhí)行官兼創(chuàng)始人吉姆?鮑伊斯(Jim Bowes)說(shuō)。“展望未來(lái)，機(jī)器學(xué)習(xí)和人工智能將被引入我們?cè)谖磥?lái)幾年內(nèi)與之互動(dòng)的許多系統(tǒng)?！?/span>

“作為一種媒體，設(shè)計(jì)將以多種方式適應(yīng)這種情況，”他預(yù)測(cè)道?！霸谀承┣闆r下，它的目的是展示人工智能，有時(shí)設(shè)計(jì)會(huì)使人工智能看起來(lái)自然和不可見(jiàn)。”我想我們將會(huì)看到大量的設(shè)計(jì)，在實(shí)際情況下，試圖展示更多的智慧，而不是真正的人工智能。這通常是通過(guò)在數(shù)字旅行中更好地利用上下文來(lái)實(shí)現(xiàn)的。

09、不對(duì)稱布局

2010年的響應(yīng)式設(shè)計(jì)運(yùn)動(dòng)已經(jīng)徹底改變了網(wǎng)頁(yè)設(shè)計(jì)，并使設(shè)計(jì)者能夠在不同的設(shè)備之間無(wú)縫地進(jìn)行設(shè)計(jì)。Bearne說(shuō)：“今年，我們看到設(shè)計(jì)的增加，違背了響應(yīng)性設(shè)計(jì)的限制，試圖變得更‘有創(chuàng)意’。”

你幾乎可以聽(tīng)到客戶的反饋，說(shuō)：“你能不能少些boxy”，設(shè)計(jì)師回答道?！靶录夹g(shù)意味著，在2017年，傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)規(guī)則已經(jīng)被打破了。”

但Bearne認(rèn)為這一趨勢(shì)是謹(jǐn)慎的。他指出：“在2015年，那些推動(dòng)不對(duì)稱的設(shè)計(jì)真的出現(xiàn)了?！痹谀且荒辏琒potify使用了一種不對(duì)稱的設(shè)計(jì)來(lái)實(shí)現(xiàn)“音樂(lè)年”。在這種情況下，它感覺(jué)良好，并增加了品牌的創(chuàng)造性和大膽的個(gè)性。不幸的是，它最基本的形式已經(jīng)開(kāi)始成為一種普通的方法，并已經(jīng)進(jìn)入了更多的網(wǎng)站，而不是為了更好的。

“2017年突出的是不斷差異化和脫離規(guī)則的動(dòng)力。”好的設(shè)計(jì)師接受規(guī)則；他們喜歡他們，和他們一起工作。但他們也找到了推動(dòng)它們的方法，并創(chuàng)造出新的展示內(nèi)容的方式。這是我希望持續(xù)到2018年的事情。

10、充分利用手機(jī)

對(duì)于移動(dòng)網(wǎng)絡(luò)來(lái)說(shuō)，2017年是具有里程碑意義的一年，因?yàn)樗氖褂米罱K超過(guò)了桌面瀏覽。這意味著網(wǎng)絡(luò)設(shè)計(jì)師們將比以往任何時(shí)候都更加關(guān)注手機(jī)用戶。

“當(dāng)我們進(jìn)入2018年的時(shí)候，我希望創(chuàng)新能充分利用我們從未在桌面上看到的移動(dòng)功能，”摩爾說(shuō)?！?018年將繼續(xù)看到設(shè)計(jì)師們開(kāi)發(fā)出巧妙的方法來(lái)完美地組織信息，并將其引向更復(fù)雜的用戶體驗(yàn)，專注于微交互和手勢(shì)圖標(biāo)和按鈕?！?/span>

簡(jiǎn)單地說(shuō)，直觀的導(dǎo)航站點(diǎn)轉(zhuǎn)換更好；g - star把這一切都做得很好。

洛佩茲提供了一個(gè)具體的例子，說(shuō)明了手機(jī)優(yōu)先是如何不只是一個(gè)通風(fēng)的原則，而是需要在核心的設(shè)計(jì)過(guò)程中被烘焙的東西。正如我們前面提到的，動(dòng)畫(huà)現(xiàn)在越來(lái)越多地出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中——“但是有時(shí)候，它太過(guò)了?！庇羞^(guò)度使用的危險(xiǎn)，依賴于運(yùn)動(dòng)來(lái)定義體驗(yàn)。

“設(shè)計(jì)師需要考慮到，大型動(dòng)畫(huà)和過(guò)渡將如何轉(zhuǎn)化為移動(dòng)設(shè)備等瀏覽器和設(shè)備，在那里，沒(méi)有懸停狀態(tài)和內(nèi)容需要適應(yīng)縮小的屏幕尺寸?！?/span>

11、動(dòng)能的電子郵件

阿德斯特拉(Adestra)的數(shù)字設(shè)計(jì)主管羅布?佩羅(Rob Pellow)表示：“今年，至少在英國(guó)，人們終于開(kāi)始關(guān)注移動(dòng)響應(yīng)，并開(kāi)始關(guān)注接下來(lái)會(huì)發(fā)生什么?！?/span>

“事實(shí)上，當(dāng)我們還有些品牌想要讓他們的活動(dòng)和模板移動(dòng)響應(yīng)時(shí)，幾乎所有人都在問(wèn)這個(gè)問(wèn)題：‘我們還能做什么?’”

他說(shuō)，在第一年，阿德斯特拉經(jīng)常使用“動(dòng)態(tài)”電子郵件：使用CSS3和HTML在電子郵件中創(chuàng)建交互性。這一趨勢(shì)源于這樣一個(gè)事實(shí)，即用戶對(duì)移動(dòng)應(yīng)用程序和網(wǎng)站的UI語(yǔ)言非常滿意，他們很高興在其他地方看到它，包括電子郵件。

“有了這些新的機(jī)會(huì)，我們邁出了第一步，把單一的電子郵件活動(dòng)當(dāng)作一段旅程；百安居對(duì)待我們到另一個(gè)令人印象深刻的旋轉(zhuǎn)木馬，在比以往更多的電子郵件客戶端，石蕊給我們的能力有一個(gè)籃子過(guò)程在峰會(huì)上的電子郵件和叛軍(原名Rebelmail)現(xiàn)在是銷售的能力來(lái)完成整個(gè)檢查過(guò)程中的電子郵件——唯一的網(wǎng)頁(yè)你最后看到的是一個(gè)確認(rèn)頁(yè)面。

“這開(kāi)始改變電子郵件對(duì)人們的意義，因?yàn)椋绻覀兡茉谶@里提供這些體驗(yàn)，我們可以將這些東西與網(wǎng)站只能夢(mèng)想的個(gè)性化程度結(jié)合起來(lái)?！闭l(shuí)說(shuō)電子郵件已經(jīng)死了?