起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識2019年值得關注的UI和UX設計趨勢
對于設計趨勢，我們一直都在定期總結和梳理。但是以往的設計趨勢總結通常只會聚焦在某個很小的、特定的點上。實際上，在設計越來越現代的今天，其實當下的語境是塑造各種設計趨勢的根源，而它幾乎是全部趨勢的最好概括。
我們以往所總結的「設計趨勢」大多停留在風格和技法層面上，而現在當你觀察設計領域所呈現出來的狀態，會發現這些東西都是互相關聯的，單獨挑出其中的一種趨勢，往往有以偏概全的嫌疑。
現在我們設計師所面臨的狀況，仿佛是所有的技術進步和全部的新工具，正在打造各種產品一齊解決用戶所面臨的全部問題。
設計越來越系統化，設計師的身份不再局限于視覺呈現這一個層面，對于產品、營銷的要求早已成為很多企業招聘的基本要求。更系統的知識、更全面的方法支撐，讓設計師能夠在產品設計流程中作出更好的決策。
盡管我們還沒有達到這個可預期的未來，但是我們仍然向著那個方向堅定不移地靠近著。
我們會將這些明顯的設計趨勢視作為當下設計不足的一種提醒，密切關注，確保我們能在現有基礎上越做越好。下面，看看我們通過持續觀察所預測的2019年的設計趨勢。
更強的瀏覽器
毫無疑問，技術的發展讓瀏覽器正在變得近乎無所不能，無論是桌面端還是移動端。
瀏覽器基礎測試所呈現出來的數據，反映出的情況很明顯，絕大多數的瀏覽器在性能上都在飛速地增長著。由于流式編譯的流行，使得瀏覽器的設計和開發的效率越來越高。Mozilla 的報告顯示：目前新的編譯器比以往優化過的編譯器還要快10到15倍。
如今，所有的現代瀏覽器都支持 WebGL 2 ，它支持全新的3D紋理和對象渲染，邊度深度和頂點數組對象。
桌面端和移動端的瀏覽器正在彌合概念設計和實際可行設計之間的鴻溝，想到就能做到正在成為一件越來越真實的事情。
雖然瀏覽器本身性能一直在提升，不過瀏覽器的開發者仍然無法兼顧到全部的網站，尤其是以往設計得比較糟糕的網站。身為設計師應該多了解瀏覽器，并且盡量去發揮瀏覽器應有的性能。
目的明確的動畫效果
近兩年來動畫效果的持續升溫，這幾乎成了設計師的新必修課。而瀏覽器和硬件的性能提升，使得動畫效果近乎無處不在。可是，現在新的問題出現了，那就是設計師不僅要讓元素動起來，而且要更加合理地運動。
動效設計是一個典型的多學科交叉之后的產物，設計師不僅要懂得物體運動的物理規則，而且要懂得在 UI 和網頁中使用動效的心理學效應。
動效已經不僅僅代表著時尚，它是諸多知識的交匯處，設計師需要通過學習來了解如何合理、正確、有效地呈現動畫，傳遞信息，確保體驗，還不會讓人厭倦。
以前，界面和界面之間的間隙是無人區，如今是動效設計師的后院。
△ Cocoladas Creative Blog Artist Preview Page by?Zhenya?Rynzhuk
動效讓用戶更深層地參與到 UI界面當中，并且每一個交互都更有意義。但是，動效能做的東西更多，UI界面中每個元素的運動和變化都有意義，都會有產出價值，你要怎么駕馭它們？這是2019年需要面對的問題。
△ Fuck by?Eduard Mykhailov
哪怕是 LOGO，加入動效之后，都會呈現出不同的樣子。你的LOGO 要帶有什么樣的感覺，傳達什么樣的情緒，有著什么樣的變化？如果都沒有，那么你應該想想了。
比起簡單的布局、光影和材質，動效所傳遞出來的信息量更大，表現出來的效果更神奇，能承載的故事性是令人咋舌的。那么，為什么不讓動效來幫你做點什么呢？
不要太過放飛，還是讓動畫效果給你產出價值吧。
△ Lakko?—?Logo animation by?Zlatko Kelemeni?
深度扁平和3D
如今3D建模和渲染已經非常普遍了。不過在此之前，很長一段時間內，為了確保速度和可訪問性，設計師盡量在 UI 中少用3D建模和渲染，不過更好的瀏覽器和應用性能讓這一點越來越容易實現和普及。
界面中的3D效果和現實的交疊，創造出一種超現實的質感。
這種設計方法，對于設計項目而言，是非常有用的，借助3D實現可視化效果，它可以兼容各種不同技術流程，并且更容易被用戶所理解和接受。
在游戲和電影當中，3D效果有過很普遍的使用，不過它大多運用在較短的關鍵部位，借助意義明確的動畫，3D作為強大的設計工具發揮著作用。如今，在移動端 UI 和網頁中，也不是難以做到的。
△ Baker Hughes Digital by?Sanu?Sagar
至于扁平化的 UI 設計，在過去的幾年中一直是主流。最近，我們發現扁平化的 UI 元素，在視覺深度上開始發生明顯的變化，但是整體風格和使用方式上并沒有明顯變化。當然，在縱深上的變化，很大程度上是強化層次的象征意味，讓用戶更容易理解，而扁平依然是核心的特征。
深度扁平，就是新的扁平化設計。
△ Cards 3D transition by?Gleb Kuznetsov
△ 3D flip menu by?Minh Pham??
3D 和 CG技術的結合讓用戶在視覺上感覺仿佛是在和真實內容進行交互，這一點和深度扁平在內核上是一致的。從某種意義上來說，深度扁平也可以算是偽3D ，它是為了營造出真實的質感，而調整出擬真的光影效果（在縱深上）。
△ ARTA / Art Gallery by?Mike?|?Creative?Mints
另外還有一種偽3D的處理方式，就是使用AE 這樣的傳統工具，在二維平面上模擬物體在3D的運動方式。
△ Astronaut by?Markus Magnusson
在接下來的2019年，我們有很大的機率會迎來擬物化設計的回歸。如果扁平化設計在縱深上足夠明顯的話，它會更加接近等軸測的效果。如果真的要給未來一年的趨勢進行界定的話，應該是保留扁平化設計的趨勢，并且在界面中盡力探索還原真實世界的層次和質感。
當然，我們能擁有的選項太少了，要么做的更簡單，要么更復雜。想要給人留下深刻的印象，必須是讓人感覺印象深刻的，無論是徹底拋棄復雜性，還是使用瘋狂的概念，都需要設計師擁有足夠的勇氣。最重要的始終是界面本身功能明確，否則設計的形式感就失去了意義。
我們可以使用令人深刻的圖片，但是如果解決不了用戶深層次的問題，還是沒用。
超現實主義的設計
更好的性能和更好的技術并不一定能塑造優秀的設計，如果不能產生情感影響，那么技術也解決不了。具有諷刺意味的地方在于，如果你想最大程度地發揮影響力，不一定需要太強大的技術支持。而在設計領域，叛逆的設計一直都顯得那么吸引人，這很大程度上是因為它們天然地與其他不同，讓人忍不住被吸引。
有時候，我們需要一些不一樣的東西來平衡常識，比如讓魔鬼站在肩膀上，這樣會更好玩。
一些特立獨行的插畫會讓整個設計變得更加有趣：
△ How to stay scrappy by?Justin Tran?for?Dropbox?Design
△ hop Small by?Joe Montefusco?for?Mailchimp
這些風格獨樹一幟的 UI插畫的目的只有一個：讓視覺和內容保持新鮮。在很多同類設計當中，插畫的風格稱得上是八仙過海各顯神通，其中不乏設計得并不好看的，因為它們的首要目標，是用獨特的視覺來給人留下深刻的印象，哪怕用的是丑陋的視覺。這些先鋒而獨特的視覺設計，你會在接下來的2019年看到更多。
不過，并不是所有的設計師或者企業都能接受的路子。這就像之前的粗野主義設計風格，通常是一些大企業和品牌更容易接受這樣先鋒的設計，而在生死線上掙扎的企業，通常會選擇更加穩妥的風格。
漸變 2.0，熾烈的色彩
對于色彩表現力的追求，也是一個非常明顯的趨勢，從最新的網站配圖和配色上，就表現得非常明顯。設計師在 UI 的可訪問性的探索上，所投入的精力是令人震驚的。
扁平化之后所進化出來的「微妙的漸變」已經無法滿足需求了，直接的反映就是大家在漸變的色彩梯度和縱深上，開始更加用力，更加大膽了。
△ Grabient 2.0 by?Eddie Lobanovskiy
就像之前我們將更加成熟的扁平化設計命名為扁平化 2.0 一樣，如今我們也有了漸變 2.0 。所謂的漸變 2.0 也不難理解，使用不沖突的色彩來構建色彩變化，擁有清晰的光源，使用具體的形狀或者形體來統籌色彩，構建縱深。
鮮艷的色彩不會平鋪滿整個屏幕，我們將會看到更加清晰的色彩組合和明確的圖層，事實上，即使是單色為主的頁面也可以借助漸變 2.0 來創造視覺美感。
△ Valley Illustration by?J.HUA?for?Tunan
△ crypto app by?uixNinja
更酷的地方在于，鮮艷的漸變色彩在深色系網站當中會變得尤為醒目和富有表現力。
當然，另外一方面，設計師也要考慮到色彩本身的可訪問性，在色彩表現力并不那么突出的屏幕上會呈現出的效果，以及對比度過強的配色，會不會對整個頁面產生喧賓奪主的效果。追隨趨勢的同時，注意平衡。
△ Dashboard by?uixNinja
多變的字體
傳統上，字體被視作為可有限調整參數的靜態對象，設計師在設計字體時候需要仔細考慮字體的筆觸和風格，兼顧到整體的視覺體驗和可讀性。
在需要設計多種字體的時候，字體設計師需要盡量為用戶提供全部的字體，確保如今的用戶能夠實現承諾中的豐富的排版。如今的可變字體可以在一個字體中實現多種效果，讓一個字體能夠承載更多的變量，字體的粗細變化、類別也更加豐富了。
△ Marvin Visions
可變字體在響應式設計中蓬勃地發展著，設計師不得不絞盡腦汁地在不拉伸的前提下給各種屏幕，塞入他們所設計的字體。這僅僅只是一個開始，可變字體在接下來的2019年還會有更多的變化和發展。
△ Typography.Guru
Figma
如今，依然有很多人在問這兩個問題：
- 設計師是否還需要學習代碼？
- 開發者是否需要學習用戶體驗設計？
這兩個問題都因為很多設計和開發之間存在割裂?？墒?，無論是設計師還是開發者都很難真正兼顧到全部的知識領域，好在還有其他的選擇。在如今的很多新興工具當中， Figma 就是其中一種，它讓設計師無需考慮操作系統、集成開發環境，不需要管理插件、存儲，也不需要管同步和協同的問題。
△ Totally switched to Figma by?Alexey?Kolpikov
從某種意義上， Sketch 和 Adobe XD 沒有做到的事情，它做到了，Figma 的組件通過 API 轉換和 React 組件來進行前端效果的實現，設計師可以在它的幫助下輸出實際可用的代碼和數字產品。在2019年，這款工具非常值得關注。
語音用戶界面
設計師所實現的界面不一定非得是可見的。近年來，語音助手類產品越來越成熟，對于看不見的語音交互的要求越來越高。語音這種交互方式更加直覺，也更加感性。
而另外一方面，語音用戶界面的構建要求也更高，它們和數據緊密關聯，而非我們所熟知的視覺設計。令人深刻的語音用戶界面在處理自然語言邏輯上有著突出的表現，為數不多的需要視覺化呈現的地方，也大多是報告和列表頁，以及動效。
△ Organic Artificial Intelligence design by?Gleb Kuznetsov
視覺上的 UI設計和語音用戶界面在絕大多數時候沒有什么共同點。不過兩者在深層邏輯上有很多共通的地方。本質上都是幫助用戶更好的控制，獲得想要的結果。在2019年，越來越多的設計師會參與到語音用戶界面的設計當中來，從單純的視覺美學工作逐步過渡到更有意義的體驗設計當中。
UX寫作和UX文案
從去年開始，UX設計師的關注點開始更多地投注到遣詞造句上。UX設計師開始從表述上更加精細地掌控和用戶溝通的方式。
曾經有很長的一段時間，數字產品中流行使用高深的技術術語來同用戶進行溝通，但是這種方式在現在越來越不可行了 。
為了避免誤解，確保信息傳達的通暢，UX設計師需要在文案上進行控制，保持誠實，確保清晰，不隱藏缺陷，專注于幫助用戶，而不是炫耀口才，也不僅僅是為了 SEO。
一旦抱有尊重，旨在讓產品可用，UX寫作就不是那么難于駕馭了。用戶最關心的事情，始終是你是否可以幫到他們。借助更好的 UX文案，你能讓你的產品和服務更好地同用戶產生情感關聯。
另一方面，UX寫作和語音用戶界面之間有著非常緊密的關聯，因為在這個看不到的用戶界面當中，語言本身就是最重要的「界面」。
2018年，我們觀察到主流的大公司在語言和表述的用戶體驗上有了更高的追求，甚至設立了專門的職位和職能團隊來進行這方面的工作，不再單純追求獨創性，而是將重心偏移到了用戶價值上。2019年，我們將會在這個領域看到更大的變化。
產品設計師成為了一個新的職業
UX設計和服務設計都是覆蓋領域非常廣泛的術語。它們是跨行業服務設計的一部分。從最初的視覺設計，到體驗設計，再到如今所流行的服務設計，設計師的職能越來越復雜和多變。
不過，考慮到絕大多數的公司都是產品公司，所以當企業需要設計師走的更加深入的時候，會需要一個真正能夠貫穿團隊、深入到產品當中的角色，不僅能夠用好數據，做好設計，還能夠影響整個系統，統籌全部的工具和人員。
于是產品設計師成為了越來越清晰、獨立和炙手可熱的職能。相比于更加寬泛的服務設計的概念，產品設計的針對性更強，更加講究分析、測試、設計、決策的綜合能力。
產品設計師關注當前產品的服務形態和產品細節，深入洞悉產品所涉及用戶的統計數據和調研個案，清楚如何利用真實的數據來完善產品，怎樣讓產品服務于這些需求迫切的用戶，比起服務設計師更貼近產品，更接地氣。
△ Innovative Eye Pillow Landing Page Design by Sasha Turischev
不過，想要過渡到產品設計師并非易事，它需要一名設計師深入某個行業或者產品，需要具備當前行業的專業性，有清晰而富有遠見的洞察能力。
在2019年，我們會看到更多更加專注于特定行業的設計師，逐漸演化為產品設計師審視產品專家，用一部分技能來換對于某個行業或者產品的掌控。
結語
對于即將過去的2018年和即將到來的2019年，我們所洞察到的最重要的趨勢，其實并不是特定的技能、發展方向或者某種風格，而是在整體上，「人性」和「真誠」的回歸。身為設計師，必須面對人性中固有的需求和傾向，必須保持良好的意圖和 真誠的心境，方可帶來用戶能夠接受的產品。
作者：Moses Kim
譯者：陳子木
來源：https://www.uisdc.com/2019-ui-ux-design-trends
本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
從視覺 到 交互 到 用戶體驗 再到 產品，設計之路任重道遠啊