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

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

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

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

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

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

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

作為這一趨勢的一部分，我們看到了GIF動畫的回歸?！八坪跏澜缫呀?jīng)準(zhǔn)備好了(而且確實迫切需要)動畫，不管它是喜劇圈的貓從桌子上掉下來，還是在你的電子郵件簽名中添加了一種有趣的標(biāo)志，”領(lǐng)土項目的創(chuàng)始人和總監(jiān)Lee法西斯說。

他補(bǔ)充道：“現(xiàn)在，基本的GIF動畫將會在這里停留，因為它幾乎可以閱讀任何東西。”現(xiàn)在，設(shè)計師們利用這種能力來激活HTML電子郵件、消息、網(wǎng)頁等等。一個精心設(shè)計的、精心制作和執(zhí)行的GIF序列可以讓任何用戶注意到，而且在2018年將會有更多的時間。要了解這一趨勢，請查看我們的5個步驟，以掌握web動畫和10個精彩的web動畫，由Chris Gannon。

02、更冒險的顏色

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

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

Bearne預(yù)測，這不會在2018年放緩。“有了像khroma幫助我們這樣的新工具來尋找更有趣的色彩使用方法，我們很有可能會看到更多的設(shè)計師探索如何使用色彩來傳遞特殊的體驗?！?/span>

“有趣的是，顏色可以與定制和個性化一起使用，為消費者創(chuàng)造出真正獨特的體驗，讓他們同時打幾個盒子?！?/span>

03、排版

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

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

她預(yù)測，2018年將會有大量的劇集回歸熒屏。“我們還會看到越來越多的網(wǎng)站使用對比的serif和sans - serif字體來創(chuàng)建用戶體驗的動態(tài)相似之處，比如GE的華麗網(wǎng)頁設(shè)計?！?/span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

06、平面設(shè)計2.0

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

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

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

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

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

07、有趣的插圖

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

“它們在視覺上吸引人，而不會妨礙功能和簡單；插圖有無限的形狀、大小、樣式，是一個動態(tài)的元素，可以在2018年及以后尋找。我們正在學(xué)習(xí)，不要因為簡單的用戶體驗而忽視好玩。

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

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

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

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

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

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

“作為一種媒體，設(shè)計將以多種方式適應(yīng)這種情況，”他預(yù)測道。“在某些情況下，它的目的是展示人工智能，有時設(shè)計會使人工智能看起來自然和不可見?！蔽蚁胛覀儗吹酱罅康脑O(shè)計，在實際情況下，試圖展示更多的智慧，而不是真正的人工智能。這通常是通過在數(shù)字旅行中更好地利用上下文來實現(xiàn)的。

09、不對稱布局

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

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

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

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

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

對于移動網(wǎng)絡(luò)來說，2017年是具有里程碑意義的一年，因為它的使用最終超過了桌面瀏覽。這意味著網(wǎng)絡(luò)設(shè)計師們將比以往任何時候都更加關(guān)注手機(jī)用戶。

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

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

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

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

11、動能的電子郵件

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

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

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

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

“這開始改變電子郵件對人們的意義，因為，如果我們能在這里提供這些體驗，我們可以將這些東西與網(wǎng)站只能夢想的個性化程度結(jié)合起來?！闭l說電子郵件已經(jīng)死了?