對(duì)于設(shè)計(jì)趨勢，我們一直都在定期總結(jié)和梳理。但是以往的設(shè)計(jì)趨勢總結(jié)通常只會(huì)聚焦在某個(gè)很小的、特定的點(diǎn)上。實(shí)際上，在設(shè)計(jì)越來越現(xiàn)代的今天，其實(shí)當(dāng)下的語境是塑造各種設(shè)計(jì)趨勢的根源，而它幾乎是全部趨勢的最好概括。

我們以往所總結(jié)的「設(shè)計(jì)趨勢」大多停留在風(fēng)格和技法層面上，而現(xiàn)在當(dāng)你觀察設(shè)計(jì)領(lǐng)域所呈現(xiàn)出來的狀態(tài)，會(huì)發(fā)現(xiàn)這些東西都是互相關(guān)聯(lián)的，單獨(dú)挑出其中的一種趨勢，往往有以偏概全的嫌疑。

現(xiàn)在我們設(shè)計(jì)師所面臨的狀況，仿佛是所有的技術(shù)進(jìn)步和全部的新工具，正在打造各種產(chǎn)品一齊解決用戶所面臨的全部問題。

設(shè)計(jì)越來越系統(tǒng)化，設(shè)計(jì)師的身份不再局限于視覺呈現(xiàn)這一個(gè)層面，對(duì)于產(chǎn)品、營銷的要求早已成為很多企業(yè)招聘的基本要求。更系統(tǒng)的知識(shí)、更全面的方法支撐，讓設(shè)計(jì)師能夠在產(chǎn)品設(shè)計(jì)流程中作出更好的決策。

盡管我們還沒有達(dá)到這個(gè)可預(yù)期的未來，但是我們?nèi)匀幌蛑莻€(gè)方向堅(jiān)定不移地靠近著。

我們會(huì)將這些明顯的設(shè)計(jì)趨勢視作為當(dāng)下設(shè)計(jì)不足的一種提醒，密切關(guān)注，確保我們能在現(xiàn)有基礎(chǔ)上越做越好。下面，看看我們通過持續(xù)觀察所預(yù)測的2019年的設(shè)計(jì)趨勢。

更強(qiáng)的瀏覽器

毫無疑問，技術(shù)的發(fā)展讓瀏覽器正在變得近乎無所不能，無論是桌面端還是移動(dòng)端。

瀏覽器基礎(chǔ)測試所呈現(xiàn)出來的數(shù)據(jù)，反映出的情況很明顯，絕大多數(shù)的瀏覽器在性能上都在飛速地增長著。由于流式編譯的流行，使得瀏覽器的設(shè)計(jì)和開發(fā)的效率越來越高。Mozilla 的報(bào)告顯示：目前新的編譯器比以往優(yōu)化過的編譯器還要快10到15倍。

如今，所有的現(xiàn)代瀏覽器都支持 WebGL 2 ，它支持全新的3D紋理和對(duì)象渲染，邊度深度和頂點(diǎn)數(shù)組對(duì)象。

桌面端和移動(dòng)端的瀏覽器正在彌合概念設(shè)計(jì)和實(shí)際可行設(shè)計(jì)之間的鴻溝，想到就能做到正在成為一件越來越真實(shí)的事情。

雖然瀏覽器本身性能一直在提升，不過瀏覽器的開發(fā)者仍然無法兼顧到全部的網(wǎng)站，尤其是以往設(shè)計(jì)得比較糟糕的網(wǎng)站。身為設(shè)計(jì)師應(yīng)該多了解瀏覽器，并且盡量去發(fā)揮瀏覽器應(yīng)有的性能。

目的明確的動(dòng)畫效果

近兩年來動(dòng)畫效果的持續(xù)升溫，這幾乎成了設(shè)計(jì)師的新必修課。而瀏覽器和硬件的性能提升，使得動(dòng)畫效果近乎無處不在?？墒?，現(xiàn)在新的問題出現(xiàn)了，那就是設(shè)計(jì)師不僅要讓元素動(dòng)起來，而且要更加合理地運(yùn)動(dòng)。

動(dòng)效設(shè)計(jì)是一個(gè)典型的多學(xué)科交叉之后的產(chǎn)物，設(shè)計(jì)師不僅要懂得物體運(yùn)動(dòng)的物理規(guī)則，而且要懂得在 UI 和網(wǎng)頁中使用動(dòng)效的心理學(xué)效應(yīng)。

動(dòng)效已經(jīng)不僅僅代表著時(shí)尚，它是諸多知識(shí)的交匯處，設(shè)計(jì)師需要通過學(xué)習(xí)來了解如何合理、正確、有效地呈現(xiàn)動(dòng)畫，傳遞信息，確保體驗(yàn)，還不會(huì)讓人厭倦。

以前，界面和界面之間的間隙是無人區(qū)，如今是動(dòng)效設(shè)計(jì)師的后院。

△ Cocoladas Creative Blog Artist Preview Page by?Zhenya?Rynzhuk

動(dòng)效讓用戶更深層地參與到 UI界面當(dāng)中，并且每一個(gè)交互都更有意義。但是，動(dòng)效能做的東西更多，UI界面中每個(gè)元素的運(yùn)動(dòng)和變化都有意義，都會(huì)有產(chǎn)出價(jià)值，你要怎么駕馭它們？這是2019年需要面對(duì)的問題。

△ Fuck by?Eduard Mykhailov

哪怕是 LOGO，加入動(dòng)效之后，都會(huì)呈現(xiàn)出不同的樣子。你的LOGO 要帶有什么樣的感覺，傳達(dá)什么樣的情緒，有著什么樣的變化？如果都沒有，那么你應(yīng)該想想了。

比起簡單的布局、光影和材質(zhì)，動(dòng)效所傳遞出來的信息量更大，表現(xiàn)出來的效果更神奇，能承載的故事性是令人咋舌的。那么，為什么不讓動(dòng)效來幫你做點(diǎn)什么呢？

不要太過放飛，還是讓動(dòng)畫效果給你產(chǎn)出價(jià)值吧。

△ Lakko?—?Logo animation by?Zlatko Kelemeni?

深度扁平和3D

如今3D建模和渲染已經(jīng)非常普遍了。不過在此之前，很長一段時(shí)間內(nèi)，為了確保速度和可訪問性，設(shè)計(jì)師盡量在 UI 中少用3D建模和渲染，不過更好的瀏覽器和應(yīng)用性能讓這一點(diǎn)越來越容易實(shí)現(xiàn)和普及。

界面中的3D效果和現(xiàn)實(shí)的交疊，創(chuàng)造出一種超現(xiàn)實(shí)的質(zhì)感。

這種設(shè)計(jì)方法，對(duì)于設(shè)計(jì)項(xiàng)目而言，是非常有用的，借助3D實(shí)現(xiàn)可視化效果，它可以兼容各種不同技術(shù)流程，并且更容易被用戶所理解和接受。

在游戲和電影當(dāng)中，3D效果有過很普遍的使用，不過它大多運(yùn)用在較短的關(guān)鍵部位，借助意義明確的動(dòng)畫，3D作為強(qiáng)大的設(shè)計(jì)工具發(fā)揮著作用。如今，在移動(dòng)端 UI 和網(wǎng)頁中，也不是難以做到的。

△ Baker Hughes Digital by?Sanu?Sagar

至于扁平化的 UI 設(shè)計(jì)，在過去的幾年中一直是主流。最近，我們發(fā)現(xiàn)扁平化的 UI 元素，在視覺深度上開始發(fā)生明顯的變化，但是整體風(fēng)格和使用方式上并沒有明顯變化。當(dāng)然，在縱深上的變化，很大程度上是強(qiáng)化層次的象征意味，讓用戶更容易理解，而扁平依然是核心的特征。

深度扁平，就是新的扁平化設(shè)計(jì)。

△ Cards 3D transition by?Gleb Kuznetsov

△ 3D flip menu by?Minh Pham??

3D 和 CG技術(shù)的結(jié)合讓用戶在視覺上感覺仿佛是在和真實(shí)內(nèi)容進(jìn)行交互，這一點(diǎn)和深度扁平在內(nèi)核上是一致的。從某種意義上來說，深度扁平也可以算是偽3D ，它是為了營造出真實(shí)的質(zhì)感，而調(diào)整出擬真的光影效果（在縱深上）。

△ ARTA / Art Gallery by?Mike?|?Creative?Mints

另外還有一種偽3D的處理方式，就是使用AE 這樣的傳統(tǒng)工具，在二維平面上模擬物體在3D的運(yùn)動(dòng)方式。

△ Astronaut by?Markus Magnusson

在接下來的2019年，我們有很大的機(jī)率會(huì)迎來擬物化設(shè)計(jì)的回歸。如果扁平化設(shè)計(jì)在縱深上足夠明顯的話，它會(huì)更加接近等軸測的效果。如果真的要給未來一年的趨勢進(jìn)行界定的話，應(yīng)該是保留扁平化設(shè)計(jì)的趨勢，并且在界面中盡力探索還原真實(shí)世界的層次和質(zhì)感。

當(dāng)然，我們能擁有的選項(xiàng)太少了，要么做的更簡單，要么更復(fù)雜。想要給人留下深刻的印象，必須是讓人感覺印象深刻的，無論是徹底拋棄復(fù)雜性，還是使用瘋狂的概念，都需要設(shè)計(jì)師擁有足夠的勇氣。最重要的始終是界面本身功能明確，否則設(shè)計(jì)的形式感就失去了意義。

我們可以使用令人深刻的圖片，但是如果解決不了用戶深層次的問題，還是沒用。

超現(xiàn)實(shí)主義的設(shè)計(jì)

更好的性能和更好的技術(shù)并不一定能塑造優(yōu)秀的設(shè)計(jì)，如果不能產(chǎn)生情感影響，那么技術(shù)也解決不了。具有諷刺意味的地方在于，如果你想最大程度地發(fā)揮影響力，不一定需要太強(qiáng)大的技術(shù)支持。而在設(shè)計(jì)領(lǐng)域，叛逆的設(shè)計(jì)一直都顯得那么吸引人，這很大程度上是因?yàn)樗鼈兲烊坏嘏c其他不同，讓人忍不住被吸引。

有時(shí)候，我們需要一些不一樣的東西來平衡常識(shí)，比如讓魔鬼站在肩膀上，這樣會(huì)更好玩。

一些特立獨(dú)行的插畫會(huì)讓整個(gè)設(shè)計(jì)變得更加有趣：

△ How to stay scrappy by?Justin Tran?for?Dropbox?Design

△ hop Small by?Joe Montefusco?for?Mailchimp

這些風(fēng)格獨(dú)樹一幟的 UI插畫的目的只有一個(gè)：讓視覺和內(nèi)容保持新鮮。在很多同類設(shè)計(jì)當(dāng)中，插畫的風(fēng)格稱得上是八仙過海各顯神通，其中不乏設(shè)計(jì)得并不好看的，因?yàn)樗鼈兊氖滓繕?biāo)，是用獨(dú)特的視覺來給人留下深刻的印象，哪怕用的是丑陋的視覺。這些先鋒而獨(dú)特的視覺設(shè)計(jì)，你會(huì)在接下來的2019年看到更多。

不過，并不是所有的設(shè)計(jì)師或者企業(yè)都能接受的路子。這就像之前的粗野主義設(shè)計(jì)風(fēng)格，通常是一些大企業(yè)和品牌更容易接受這樣先鋒的設(shè)計(jì)，而在生死線上掙扎的企業(yè)，通常會(huì)選擇更加穩(wěn)妥的風(fēng)格。

漸變 2.0，熾烈的色彩

對(duì)于色彩表現(xiàn)力的追求，也是一個(gè)非常明顯的趨勢，從最新的網(wǎng)站配圖和配色上，就表現(xiàn)得非常明顯。設(shè)計(jì)師在 UI 的可訪問性的探索上，所投入的精力是令人震驚的。

扁平化之后所進(jìn)化出來的「微妙的漸變」已經(jīng)無法滿足需求了，直接的反映就是大家在漸變的色彩梯度和縱深上，開始更加用力，更加大膽了。

△ Grabient 2.0 by?Eddie Lobanovskiy

就像之前我們將更加成熟的扁平化設(shè)計(jì)命名為扁平化 2.0 一樣，如今我們也有了漸變 2.0 。所謂的漸變 2.0 也不難理解，使用不沖突的色彩來構(gòu)建色彩變化，擁有清晰的光源，使用具體的形狀或者形體來統(tǒng)籌色彩，構(gòu)建縱深。

鮮艷的色彩不會(huì)平鋪滿整個(gè)屏幕，我們將會(huì)看到更加清晰的色彩組合和明確的圖層，事實(shí)上，即使是單色為主的頁面也可以借助漸變 2.0 來創(chuàng)造視覺美感。

△ Valley Illustration by?J.HUA?for?Tunan

△ crypto app by?uixNinja

更酷的地方在于，鮮艷的漸變色彩在深色系網(wǎng)站當(dāng)中會(huì)變得尤為醒目和富有表現(xiàn)力。

當(dāng)然，另外一方面，設(shè)計(jì)師也要考慮到色彩本身的可訪問性，在色彩表現(xiàn)力并不那么突出的屏幕上會(huì)呈現(xiàn)出的效果，以及對(duì)比度過強(qiáng)的配色，會(huì)不會(huì)對(duì)整個(gè)頁面產(chǎn)生喧賓奪主的效果。追隨趨勢的同時(shí)，注意平衡。

△ Dashboard by?uixNinja

多變的字體

傳統(tǒng)上，字體被視作為可有限調(diào)整參數(shù)的靜態(tài)對(duì)象，設(shè)計(jì)師在設(shè)計(jì)字體時(shí)候需要仔細(xì)考慮字體的筆觸和風(fēng)格，兼顧到整體的視覺體驗(yàn)和可讀性。

在需要設(shè)計(jì)多種字體的時(shí)候，字體設(shè)計(jì)師需要盡量為用戶提供全部的字體，確保如今的用戶能夠?qū)崿F(xiàn)承諾中的豐富的排版。如今的可變字體可以在一個(gè)字體中實(shí)現(xiàn)多種效果，讓一個(gè)字體能夠承載更多的變量，字體的粗細(xì)變化、類別也更加豐富了。

△ Marvin Visions

可變字體在響應(yīng)式設(shè)計(jì)中蓬勃地發(fā)展著，設(shè)計(jì)師不得不絞盡腦汁地在不拉伸的前提下給各種屏幕，塞入他們所設(shè)計(jì)的字體。這僅僅只是一個(gè)開始，可變字體在接下來的2019年還會(huì)有更多的變化和發(fā)展。

△ Typography.Guru

Figma

如今，依然有很多人在問這兩個(gè)問題：

1. 設(shè)計(jì)師是否還需要學(xué)習(xí)代碼？
2. 開發(fā)者是否需要學(xué)習(xí)用戶體驗(yàn)設(shè)計(jì)？

這兩個(gè)問題都因?yàn)楹芏嘣O(shè)計(jì)和開發(fā)之間存在割裂。可是，無論是設(shè)計(jì)師還是開發(fā)者都很難真正兼顧到全部的知識(shí)領(lǐng)域，好在還有其他的選擇。在如今的很多新興工具當(dāng)中， Figma 就是其中一種，它讓設(shè)計(jì)師無需考慮操作系統(tǒng)、集成開發(fā)環(huán)境，不需要管理插件、存儲(chǔ)，也不需要管同步和協(xié)同的問題。

△ Totally switched to Figma by?Alexey?Kolpikov

從某種意義上， Sketch 和 Adobe XD 沒有做到的事情，它做到了，F(xiàn)igma 的組件通過 API 轉(zhuǎn)換和 React 組件來進(jìn)行前端效果的實(shí)現(xiàn)，設(shè)計(jì)師可以在它的幫助下輸出實(shí)際可用的代碼和數(shù)字產(chǎn)品。在2019年，這款工具非常值得關(guān)注。

語音用戶界面

設(shè)計(jì)師所實(shí)現(xiàn)的界面不一定非得是可見的。近年來，語音助手類產(chǎn)品越來越成熟，對(duì)于看不見的語音交互的要求越來越高。語音這種交互方式更加直覺，也更加感性。

而另外一方面，語音用戶界面的構(gòu)建要求也更高，它們和數(shù)據(jù)緊密關(guān)聯(lián)，而非我們所熟知的視覺設(shè)計(jì)。令人深刻的語音用戶界面在處理自然語言邏輯上有著突出的表現(xiàn)，為數(shù)不多的需要視覺化呈現(xiàn)的地方，也大多是報(bào)告和列表頁，以及動(dòng)效。

△ Organic Artificial Intelligence design by?Gleb Kuznetsov

視覺上的 UI設(shè)計(jì)和語音用戶界面在絕大多數(shù)時(shí)候沒有什么共同點(diǎn)。不過兩者在深層邏輯上有很多共通的地方。本質(zhì)上都是幫助用戶更好的控制，獲得想要的結(jié)果。在2019年，越來越多的設(shè)計(jì)師會(huì)參與到語音用戶界面的設(shè)計(jì)當(dāng)中來，從單純的視覺美學(xué)工作逐步過渡到更有意義的體驗(yàn)設(shè)計(jì)當(dāng)中。

UX寫作和UX文案

從去年開始，UX設(shè)計(jì)師的關(guān)注點(diǎn)開始更多地投注到遣詞造句上。UX設(shè)計(jì)師開始從表述上更加精細(xì)地掌控和用戶溝通的方式。

曾經(jīng)有很長的一段時(shí)間，數(shù)字產(chǎn)品中流行使用高深的技術(shù)術(shù)語來同用戶進(jìn)行溝通，但是這種方式在現(xiàn)在越來越不可行了 。

為了避免誤解，確保信息傳達(dá)的通暢，UX設(shè)計(jì)師需要在文案上進(jìn)行控制，保持誠實(shí)，確保清晰，不隱藏缺陷，專注于幫助用戶，而不是炫耀口才，也不僅僅是為了 SEO。

一旦抱有尊重，旨在讓產(chǎn)品可用，UX寫作就不是那么難于駕馭了。用戶最關(guān)心的事情，始終是你是否可以幫到他們。借助更好的 UX文案，你能讓你的產(chǎn)品和服務(wù)更好地同用戶產(chǎn)生情感關(guān)聯(lián)。

另一方面，UX寫作和語音用戶界面之間有著非常緊密的關(guān)聯(lián)，因?yàn)樵谶@個(gè)看不到的用戶界面當(dāng)中，語言本身就是最重要的「界面」。

2018年，我們觀察到主流的大公司在語言和表述的用戶體驗(yàn)上有了更高的追求，甚至設(shè)立了專門的職位和職能團(tuán)隊(duì)來進(jìn)行這方面的工作，不再單純追求獨(dú)創(chuàng)性，而是將重心偏移到了用戶價(jià)值上。2019年，我們將會(huì)在這個(gè)領(lǐng)域看到更大的變化。

產(chǎn)品設(shè)計(jì)師成為了一個(gè)新的職業(yè)

UX設(shè)計(jì)和服務(wù)設(shè)計(jì)都是覆蓋領(lǐng)域非常廣泛的術(shù)語。它們是跨行業(yè)服務(wù)設(shè)計(jì)的一部分。從最初的視覺設(shè)計(jì)，到體驗(yàn)設(shè)計(jì)，再到如今所流行的服務(wù)設(shè)計(jì)，設(shè)計(jì)師的職能越來越復(fù)雜和多變。

不過，考慮到絕大多數(shù)的公司都是產(chǎn)品公司，所以當(dāng)企業(yè)需要設(shè)計(jì)師走的更加深入的時(shí)候，會(huì)需要一個(gè)真正能夠貫穿團(tuán)隊(duì)、深入到產(chǎn)品當(dāng)中的角色，不僅能夠用好數(shù)據(jù)，做好設(shè)計(jì)，還能夠影響整個(gè)系統(tǒng)，統(tǒng)籌全部的工具和人員。

于是產(chǎn)品設(shè)計(jì)師成為了越來越清晰、獨(dú)立和炙手可熱的職能。相比于更加寬泛的服務(wù)設(shè)計(jì)的概念，產(chǎn)品設(shè)計(jì)的針對(duì)性更強(qiáng)，更加講究分析、測試、設(shè)計(jì)、決策的綜合能力。

產(chǎn)品設(shè)計(jì)師關(guān)注當(dāng)前產(chǎn)品的服務(wù)形態(tài)和產(chǎn)品細(xì)節(jié)，深入洞悉產(chǎn)品所涉及用戶的統(tǒng)計(jì)數(shù)據(jù)和調(diào)研個(gè)案，清楚如何利用真實(shí)的數(shù)據(jù)來完善產(chǎn)品，怎樣讓產(chǎn)品服務(wù)于這些需求迫切的用戶，比起服務(wù)設(shè)計(jì)師更貼近產(chǎn)品，更接地氣。

△ Innovative Eye Pillow Landing Page Design by Sasha Turischev

不過，想要過渡到產(chǎn)品設(shè)計(jì)師并非易事，它需要一名設(shè)計(jì)師深入某個(gè)行業(yè)或者產(chǎn)品，需要具備當(dāng)前行業(yè)的專業(yè)性，有清晰而富有遠(yuǎn)見的洞察能力。

在2019年，我們會(huì)看到更多更加專注于特定行業(yè)的設(shè)計(jì)師，逐漸演化為產(chǎn)品設(shè)計(jì)師審視產(chǎn)品專家，用一部分技能來換對(duì)于某個(gè)行業(yè)或者產(chǎn)品的掌控。

結(jié)語

對(duì)于即將過去的2018年和即將到來的2019年，我們所洞察到的最重要的趨勢，其實(shí)并不是特定的技能、發(fā)展方向或者某種風(fēng)格，而是在整體上，「人性」和「真誠」的回歸。身為設(shè)計(jì)師，必須面對(duì)人性中固有的需求和傾向，必須保持良好的意圖和 真誠的心境，方可帶來用戶能夠接受的產(chǎn)品。

作者：Moses Kim

譯者：陳子木

來源：https://www.uisdc.com/2019-ui-ux-design-trends

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議