2018年的網(wǎng)頁設(shè)計趨勢
2017年快要結(jié)束了,2018年的網(wǎng)頁設(shè)計趨勢是什么呢?今天我們就來分享一些設(shè)計師的觀點和預(yù)測。
01、網(wǎng)絡(luò)動畫
“今年的動畫非常強大;數(shù)字創(chuàng)意機構(gòu)的創(chuàng)意總監(jiān)Mireia Lopez說:“他們真的被帶到下一個層次?!?/span>
我們看到了設(shè)計團隊的動畫、原型化和學(xué)習(xí)整齊的編碼,以使用更復(fù)雜的原型工具,比如Framer,以便將概念傳達給客戶,并向開發(fā)人員解釋數(shù)字旅程。設(shè)計師和開發(fā)者之間的界線開始變得模糊,我絕對認為我們將在未來的一年里看到快速的融合。
社交媒體管理平臺Lightful的高級數(shù)字設(shè)計師Bruno La Versa對此表示贊同。他說:“講故事和個性是新老品牌為了吸引用戶的注意力而進行的工作,動畫也開始在這方面發(fā)揮更大的作用?!?/span>
“動畫展示了并將繼續(xù)展示品牌在我們數(shù)字世界的力量,給品牌一個強大的個性,使它更少的靜態(tài)和更動態(tài)?!?/span>
作為這一趨勢的一部分,我們看到了GIF動畫的回歸?!八坪跏澜缫呀?jīng)準備好了(而且確實迫切需要)動畫,不管它是喜劇圈的貓從桌子上掉下來,還是在你的電子郵件簽名中添加了一種有趣的標志,”領(lǐng)土項目的創(chuàng)始人和總監(jiān)Lee法西斯說。
他補充道:“現(xiàn)在,基本的GIF動畫將會在這里停留,因為它幾乎可以閱讀任何東西?!爆F(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ù)是一種強大的武器,它在網(wǎng)絡(luò)上的使用今年已經(jīng)擴大,99設(shè)計的內(nèi)容策略高級經(jīng)理Kelly Moor說。
印刷術(shù)很強大,而且越大越好。因此,雖然像Helvetica這樣的新風格的無襯線風格仍在流行,但設(shè)計師們卻在尋找各種各樣的字體。
她預(yù)測,2018年將會有大量的劇集回歸熒屏。“我們還會看到越來越多的網(wǎng)站使用對比的serif和sans - serif字體來創(chuàng)建用戶體驗的動態(tài)相似之處,比如GE的華麗網(wǎng)頁設(shè)計?!?/span>
事實上,設(shè)備分辨率越來越高,提高了可讀性的因素,也為定制字體的興起打開了方便之門?!霸O(shè)計師們選擇了大量的字體,不僅是為了強調(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è)計的好年份?!薄拔覀円娮C了動畫可視化的蓬勃發(fā)展,以及從3D角度對數(shù)據(jù)表達的需求增加?!钡?,如果不是可消化的,最終可用的話,這些數(shù)據(jù),是漂亮的還是其他的呢?
輸入泰勒所說的信息故事講述者。他解釋說:“現(xiàn)在,人們非常注重通過設(shè)計來進行有效的敘事,將復(fù)雜的信息盡可能簡單地傳達給不同的觀眾。”“設(shè)計師們正在用新的、定制的作品來思考盒子之外的東西——老式的、柔和的調(diào)色板,支持充滿活力的色彩過渡,搭配極簡而大膽的版式?!?/span>
那么,信息設(shè)計的2018年是什么呢?泰勒相信,“更容易獲得新技術(shù)的人無疑將會看到,使用動畫作為一種講故事方式的設(shè)計師數(shù)量將會增加?!?/span>
“隨著AR和虛擬現(xiàn)實技術(shù)的進步,虛擬模型的模擬探索的前景,我們記住將信息和數(shù)據(jù)保存在我們所做的事情的核心是很重要的?!比绻覀兡茏龅竭@一點,數(shù)據(jù)科學(xué)和設(shè)計的重疊的領(lǐng)域?qū)⒃试S越來越多的信息、基礎(chǔ)和清晰的數(shù)據(jù)可視化的例子。
李·特拉尼同意,AR和VR有更多的東西可以提供。他說:“科技使我們能夠更容易地將現(xiàn)實世界與我們的屏幕世界結(jié)合起來?!薄拔覀冋龔脑絹碓蕉嗟脑竿_始,將視頻添加到我們的數(shù)字體驗中;在不太久以前,用一種深度和豐富的方式來分層。
“喜憂參半的現(xiàn)實使我們堅定地進入了‘新’,大型科技公司致力于在AR領(lǐng)域進行創(chuàng)新,未來的設(shè)計將需要在所有四個方面考慮我們的世界。”我們看到在流行的游戲和更多的功能應(yīng)用程序(如宜家)的混合現(xiàn)實的開始。
05、間距的標準化設(shè)計工具
在2017年,似乎沒有一天沒有新的應(yīng)用程序、工具或功能,比如InVision、Adobe XD、Figma、Axure、Marvel、Vectr等。這包括草圖,它的開放文件格式更新,是一個真正的游戲規(guī)則改變者。
“讓我們這樣說,如果你還在使用Photoshop進行UI設(shè)計,你可能需要看看你的周圍,”布魯諾說。2017年是新設(shè)計工具的一年:Figma、Webflow、InVision Studio等。設(shè)計工具的爆炸凸顯了設(shè)計如何成為企業(yè)運作的核心要素。
然而,Bearne指出,這種趨勢對機構(gòu)構(gòu)成了特殊的挑戰(zhàn)?!?017年,有大量的工具出現(xiàn),希望成為行業(yè)的‘選擇工具’,但同時,大量的產(chǎn)品也變得令人沮喪,因為所有人都聲稱實現(xiàn)了巨大的期望?!?/span>
“這為機構(gòu)間的工作創(chuàng)造了一個問題,團隊有不同的流程,每個團隊都經(jīng)過測試,以發(fā)現(xiàn)是否可以替換草圖?!狈催^來,市場已經(jīng)充斥著各種選擇,但卻沒有多少關(guān)于如何提高效率的指導(dǎo)。
“InVision Studio的發(fā)布——定于2018年1月——將會很有趣,因為我們將會看到它是否能夠使用它的協(xié)同平臺,最終為設(shè)計過程帶來標準化。如果InVision和它看起來一樣好,會發(fā)生什么?Photoshop的生存之戰(zhàn)終于結(jié)束了嗎?
06、平面設(shè)計2.0
平坦的設(shè)計并沒有消亡,但在2018年,它肯定必須學(xué)會適應(yīng)與之保持聯(lián)系。這種新的、所謂的平面2.0或半平面設(shè)計,依賴于在其之前的ascetic標識中添加細微差別和深度。它是怎么做到的?沉溺于一些設(shè)計禁忌:漸變和陰影。但別擔心,這只是適度的。
自2007年以來,漸變已經(jīng)讓人想起了公司的Powerpoint演示文稿、20世紀的網(wǎng)頁標題和過時的logo設(shè)計。“但在2018年,它們又回來了,盡管進化了,”摩爾繼續(xù)說?!疤荻痊F(xiàn)在是搖擺振動的,更新的顏色調(diào)色板和更柔和的,微妙的過渡。”他們在Instagram、Stripe、甚至蘋果的iOS圖標等品牌上引起了轟動。
多虧了web瀏覽器功能的進展,我們也看到了陰影的復(fù)活。和漸變一樣,陰影被擱置在極簡主義和二維設(shè)計中。現(xiàn)實主義和偏態(tài)仍然存在,但在2018年,設(shè)計師們將會越來越多地在他們的作品中不斷更新、軟化和風格化的陰影。
她以一個例子來提供規(guī)模網(wǎng)站。她解釋說:“界面的布局非常簡單,但特點是柔軟的,飽和的梯度,并大量使用基于陰影的微交互。”不僅有許多可點擊的按鈕被拉長的陰影所突出,陰影也強調(diào)了媒體和打破了頁面。深度有助于確定視覺層次結(jié)構(gòu),并可以指向用戶輸入字段,并在屏幕上調(diào)用操作。
平面設(shè)計完全背離了20世紀的偏態(tài)和超現(xiàn)實,但鐘擺擺得太遠了嗎?“在2018年,我們將繼續(xù)朝著世界上最好的局面發(fā)展,”摩爾相信,“在這種情況下,巧妙地重新引入陰影和漸變,可以增加功能和美感。”
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)通過像會話接口(聊天機器人)這樣的技術(shù)進入主流網(wǎng)頁設(shè)計。事實上,據(jù)eBay產(chǎn)品設(shè)計師伊萊恩·李(Elaine Lee)說,你可能已經(jīng)在日常工作中使用人工智能了,甚至不知道它。
正如她在這篇文章中所解釋的那樣,所謂的“人工狹窄智能”已經(jīng)很難在像谷歌Home和蘋果的Siri這樣的語音助手工作了。它還為亞馬遜(Amazon)、Spotify和Netflix等公司提供推薦技術(shù),更不用說智能家居設(shè)備、自動駕駛汽車和聊天機器人了。
“隨著人們越來越習(xí)慣于與機器人互動,我們看到了在設(shè)計中使用對話界面的興起,”《宣言》的首席執(zhí)行官兼創(chuàng)始人吉姆?鮑伊斯(Jim Bowes)說?!罢雇磥恚瑱C器學(xué)習(xí)和人工智能將被引入我們在未來幾年內(nèi)與之互動的許多系統(tǒng)?!?/span>
“作為一種媒體,設(shè)計將以多種方式適應(yīng)這種情況,”他預(yù)測道?!霸谀承┣闆r下,它的目的是展示人工智能,有時設(shè)計會使人工智能看起來自然和不可見。”我想我們將會看到大量的設(shè)計,在實際情況下,試圖展示更多的智慧,而不是真正的人工智能。這通常是通過在數(shù)字旅行中更好地利用上下文來實現(xiàn)的。
09、不對稱布局
2010年的響應(yīng)式設(shè)計運動已經(jīng)徹底改變了網(wǎng)頁設(shè)計,并使設(shè)計者能夠在不同的設(shè)備之間無縫地進行設(shè)計。Bearne說:“今年,我們看到設(shè)計的增加,違背了響應(yīng)性設(shè)計的限制,試圖變得更‘有創(chuàng)意’。”
你幾乎可以聽到客戶的反饋,說:“你能不能少些boxy”,設(shè)計師回答道?!靶录夹g(shù)意味著,在2017年,傳統(tǒng)的網(wǎng)頁設(shè)計規(guī)則已經(jīng)被打破了?!?/span>
但Bearne認為這一趨勢是謹慎的。他指出:“在2015年,那些推動不對稱的設(shè)計真的出現(xiàn)了?!痹谀且荒辏琒potify使用了一種不對稱的設(shè)計來實現(xiàn)“音樂年”。在這種情況下,它感覺良好,并增加了品牌的創(chuàng)造性和大膽的個性。不幸的是,它最基本的形式已經(jīng)開始成為一種普通的方法,并已經(jīng)進入了更多的網(wǎng)站,而不是為了更好的。
“2017年突出的是不斷差異化和脫離規(guī)則的動力?!焙玫脑O(shè)計師接受規(guī)則;他們喜歡他們,和他們一起工作。但他們也找到了推動它們的方法,并創(chuàng)造出新的展示內(nèi)容的方式。這是我希望持續(xù)到2018年的事情。
10、充分利用手機
對于移動網(wǎng)絡(luò)來說,2017年是具有里程碑意義的一年,因為它的使用最終超過了桌面瀏覽。這意味著網(wǎng)絡(luò)設(shè)計師們將比以往任何時候都更加關(guān)注手機用戶。
“當我們進入2018年的時候,我希望創(chuàng)新能充分利用我們從未在桌面上看到的移動功能,”摩爾說?!?018年將繼續(xù)看到設(shè)計師們開發(fā)出巧妙的方法來完美地組織信息,并將其引向更復(fù)雜的用戶體驗,專注于微交互和手勢圖標和按鈕?!?/span>
簡單地說,直觀的導(dǎo)航站點轉(zhuǎn)換更好;g - star把這一切都做得很好。
洛佩茲提供了一個具體的例子,說明了手機優(yōu)先是如何不只是一個通風的原則,而是需要在核心的設(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ā)生什么。”
“事實上,當我們還有些品牌想要讓他們的活動和模板移動響應(yīng)時,幾乎所有人都在問這個問題:‘我們還能做什么?’”
他說,在第一年,阿德斯特拉經(jīng)常使用“動態(tài)”電子郵件:使用CSS3和HTML在電子郵件中創(chuàng)建交互性。這一趨勢源于這樣一個事實,即用戶對移動應(yīng)用程序和網(wǎng)站的UI語言非常滿意,他們很高興在其他地方看到它,包括電子郵件。
“有了這些新的機會,我們邁出了第一步,把單一的電子郵件活動當作一段旅程;百安居對待我們到另一個令人印象深刻的旋轉(zhuǎn)木馬,在比以往更多的電子郵件客戶端,石蕊給我們的能力有一個籃子過程在峰會上的電子郵件和叛軍(原名Rebelmail)現(xiàn)在是銷售的能力來完成整個檢查過程中的電子郵件——唯一的網(wǎng)頁你最后看到的是一個確認頁面。
“這開始改變電子郵件對人們的意義,因為,如果我們能在這里提供這些體驗,我們可以將這些東西與網(wǎng)站只能夢想的個性化程度結(jié)合起來?!闭l說電子郵件已經(jīng)死了?
相關(guān)內(nèi)容推薦
最新文章
更多>>- 什么是SEO優(yōu)化?SEO優(yōu)化怎么做?
- 營銷型網(wǎng)站制作
- 網(wǎng)站優(yōu)化:寵物網(wǎng)站如何優(yōu)化?
- 網(wǎng)站建設(shè)及網(wǎng)站建設(shè)費用-為您提供專業(yè)的網(wǎng)站建設(shè)服務(wù)
- 網(wǎng)站建設(shè)是什么?怎么做網(wǎng)站建設(shè)
- 網(wǎng)站建設(shè)為什么要分高端網(wǎng)站建設(shè)和普通網(wǎng)站建設(shè)
- 醫(yī)療健康科普問答平臺系統(tǒng)介紹
- 抖音小程序如何開發(fā)?
- 公司小程序建設(shè)和公司小程序開發(fā)都需要哪些過程?
- 網(wǎng)站策劃在網(wǎng)站建設(shè)中的重要性
0532-88983785 / 0532-68613670
我要定制網(wǎng)站