等等

寫在前面:

2019年已經來了,新年新氣象!給自己寫一個可以量化的新年計劃,然后努力的去給自己的計劃清單打卡,等到年底了,看著收獲滿滿,想想是不是還有點小激動呢?一起加油吧,騷年!

2019年的第一次推文,就以趨勢開篇吧。這篇文章其實我很早就拿到了授權,但是斷斷續續的翻譯了蠻久,一方面是因為文章比較長,另一方面也確實有些難懂。所以,原文中有部分內容,我覺得對設計師來說不算太重要的,我選擇性的做了刪減,只保留干貨,希望能幫助大家更好的理解,減輕閱讀壓力。

 

2019年 UI 和 UX 設計趨勢

2019 UI and UX Design?Trends

圖片來源 : J.HUA

 

去年我們對移動UI設計趨勢進行了預測,今年我們打算更進一步,不再局限于移動領域。因為在現代設計中最主要的趨勢來自于大環境的變化,不會有獨立存在的某種趨勢,很多事都相互影響。

這就像當我們身邊的工具,技術都在進步,我們所面對的用戶,他們對產品的理解同樣也在更新一樣。

技術的變革,帶來新的趨勢變化,接下來讓我們一起來關注2019年將會有哪些流行趨勢。

 

瀏覽器的升級,帶來新的可能? ??

瀏覽器不僅是互聯網的載體,也是傳遞影響力的手段。如今的瀏覽器,正在變得更快,更強大,更有吸引力。

  • 性能顯著提升。瀏覽器的基準測試和性能測試分析得出的結論,目前大多數瀏覽器的性能都有顯著的提升。
  • 編譯速度更快。基于【流編譯】的新技術使得瀏覽器的編譯速度更快。Mozilla報告說,新的編譯器相比之前的要快10-15倍。
  • 更多效果支持。如今所有的瀏覽器都支持WebGL 2.0,還支持全新的3d紋理和對象渲染,片段深度和定點數組對象。

譯者注:簡單說就是隨著技術的升級,限制條件的減少,能讓設計發揮的地方不斷增多。原來很多不可能實現的效果,現在都可以做到了。

有一個統計瀏覽器技術發展的網站(http://evolutionoftheweb.com/),可惜的是在2012年這個統計網站就關閉了。

瀏覽器技術已經發展到很好的水平了,但是目前很多網站設計的卻很糟糕,用戶的體驗并跟上技術的發展。我們必須做更好的設計來挖掘web瀏覽器目前的潛力。

大多數網站讓瀏覽器看起來就像一個很糟糕的軟件。

 

更有意義的動畫? ??

新的瀏覽器功能為動畫的運用打開了大門,這不僅是讓頁面元素動起來那么簡單,更是給設計師提供了一個非常好的設計機會。動畫設計會涉及到多個不同的學科,這要求設計師不僅要懂得讓運動符合物理學的運動規律,同時還要滿足心理學上的用戶預期。

在2019年,我們將會看到在這個領域會有一些更深入的探索。動畫的合理性取代了單純為了炫酷的動畫形式,通過合理的運動路徑和過渡形式,準確傳達信息。

以前,界面與界面之間的元素間隙和跳轉是不需要過多設計的,然而現在卻給了設計師非常多的發揮空間。

圖片來源:Zhenya Rynzhuk的創意博客

 

通過這些動效設計,讓用戶與產品能有更深層次上的接觸,讓每一秒都有價值,設計師應該抓住這樣的機會。動效設計不僅僅只是做展示,如今也已經成為了品牌的一部分。然而,Logo仍然是一個商標最容易被人記住的代表,可以利用動效賦予它們一些新的活力!

圖片來源: Eduard Mykhailov

 

如果你還沒怎么去思考過你的logo是怎樣得來的,它能給人帶來什么樣的心理感受,那就應該去補補課了。

動效相比較于光影,布局,材質所能傳達的信息會更多。動畫往往能夠很好的傳達出一個品牌特質,運用動效也能更加吸引用戶,學好動效,刻不容緩啊,朋友們。

圖片來源: Zlatko Kelemeni? 的一個Logo動畫

但是需要注意的是,所有內容的使用都要注意場景,動畫也一樣。設計師設計的效果要符合用戶的預期,符合一般規律,不可以隨意濫用。如果產品的性能達不到要求,就需要適度的做出妥協,甚至放棄動畫的使用。如果動畫可能還存在情感上的某種傾向,請記住,一定要保持中立。

讓動畫發揮出它應有的價值。

 

融合3D效果的深度扁平化設計? ??

3D渲染和一些超現實質感的設計已經出了很長一段時間了,不過為了平衡速度和性能,設計師在UI中一般會盡可能的避免用到復雜的3D模型。隨著瀏覽器性能的快速發展,能夠將這樣需要高性能要求的設計變為現實,高復雜性的電影特效和場景都可以在瀏覽器中得到運用。

虛擬的三維圖形與真實場景進行融合,能夠打造出一種科幻大片的既視感。

這種趨勢的運用對于流程復雜又不大直觀的產品來說尤其有用。通過使用3D可視化,能夠將復雜的技術流程簡單直觀的呈現給用戶,加深用戶對產品的理解。

圖片來源: Sanu Sagar

 

3D在電影和游戲中很早就被運用,是因為這些圖像顯示的時間都很短,觀眾或者玩家需要的是體驗而不是要去深度學習。結合有意義的動畫,3D可以成為一種非常強大的設計工具。現如今,隨著手機芯片的不斷發展,不僅可以渲染3D物體,還可以在UI界面中使用它們。小而美的界面,能夠讓3D發揮出它非常好的效果。

圖片來源:3D卡片翻轉 by Gleb Kuznetsov

 

圖片來源:3D 翻轉的菜單 by Minh Pham ?

 

扁平化設計成為主流設計趨勢已經有超過5年多的時間。直到最近,我們看到了一些新的突破,即在扁平化大趨勢上增加了深度的變化,通過3D技術,投影,讓UI界面上有了更多的層次感,目的也是便于用戶理解信息。信息的扁平依然是扁平化設計的核心特征。

 

深度扁平是一種新的扁平化設計

3D和CG技術的結合,目的是為了讓用戶得到一種更加逼真的體驗,而深度扁平就是為了實現這一目標,從而進一步提升用戶體驗。深度扁平也可以稱之為偽3D技術,它是通過堆疊效果創造出一種三維的感覺,在深度扁平設計中增加3D的感覺主要是通過陰影,高光,和反射來塑造的。

圖片來源:ARTA / Art Gallery by Mike | Creative Mints

 

還有另一種偽3D的趨勢正在興起,它使用像Principle和After Effects這樣的傳統設計工具,在二維界面中打造3D的運動形式。

圖片來源:Astronaut by Markus Magnusson

 

在2019年,我們甚至可能會看到擬物設計以一種新的方式回歸。深度扁平化設計可以是有縱深空間的,它也可以是以等軸視圖的形式(譯者注:今年就已經見到非常多等軸視圖的設計了)。總的來說,未來的趨勢應該是保留扁平化設計的同時,盡可能的去還原真實場景體驗。

現如今,3D UI還沒有完全確定的發展方向,留給大家的選擇其實也很少,要么越來越復雜,要么越來越簡單。想要自己產品給別人留下深刻的印象,必須要骨氣勇氣,努力的去創新,不論是做徹底的簡單還是拋出一些瘋狂的概念設計。如果復雜的界面對用戶沒有意義,而大膽的想法也只是自己的一廂情愿,那么你的努力也就白費了。(譯者注:意思是說要針對自己的產品特征,在明確用戶的需求前提下,勇于創新。)

我們可以做出令人印象深刻的圖片效果,充滿人性化并能解決用戶更深層次的問題,我們的設計才會變得更加有意義。

 

另類的插畫設計? ??

技術的發展帶來了3D和動畫的設計機會,但如果不能與用戶產生情感共鳴,就也沒有多大意義。比較具有諷刺意味的是,有些時候,復雜炫酷的設計效果并不能產生很好的共鳴,而一些另類的設計風格卻會有一種天然的吸引力。我們需要一些東西來與主流常識進行平衡,比如我們可能會讓一個魔鬼站在肩膀上,這樣會顯得自己很特別。

一些另類好玩的插畫會讓整個設計變得更加有趣:

如何保持斗志 by Justin Tran for Dropbox Design

 

小店?by Joe Montefusco for Mailchimp

 

這種卡通風格的插畫和UI都有一個相同的目的——保持視覺上的新鮮感。如果想讓品牌長期保持鮮活,你必須要不斷的給用戶帶來新鮮感,插畫這種形式就非常適合打造新鮮感,甚至無所謂美丑,只要能給用戶帶來深刻印象,就算是成功了。這種獨特的設計意識在2019年將會看到更多。

但是,并不是所有公司和產品都適合用到這種設計風格。對于老牌品牌來說,他們更愿意嘗試這種新潮的設計風格,但是對于那些規模較小或者那些已經處在危險階段的公司來說,采用這種設計風格時就必須要謹慎,保持中立的設計風格可能更穩。

 

漸變2.0,更加豐富的顏色? ??

屏幕技術的革新帶來的更加出色的色彩表現能力。這也給設計師帶來了一些新的機會點,設計師可以給UI界面打造出更加豐富的色彩,以給用戶帶來新的視覺享受。微漸變風格已經無法滿足用戶視覺上的刺激,從漸變顏色的跨度可以看出,設計師對于用色變得更加大膽了。(譯者注:這種配色用的好會很好看,用的不好的話,也會很糟糕,對于顏色拿不準的同學,慎重使用。)

漸變 2.0 by Eddie Lobanovskiy

 

漸變 2.0 的用法說難也不難,它沒有使用相互沖突的顏色,而是會用一個清晰的光源,在符合物理規律的情況下,通過在界面中的元素光影關系來打造空間層次感。鮮艷的色彩并不會隨處都用,我們看到更多的是顏色和界面元素的組合使用。事實上,即使是單色的界面也可以通過部分使用漸變2.0來打造視覺美感。

山谷插畫 by J.HUA for Tunan

 

鮮艷的顏色,給人感覺太過于強烈,不夠沉穩,你會使用下面這種配色的加密app嗎?(譯者注:反正我有點擔心不夠安全。)

加密 app by uixNinja

 

更酷的是,在深色界面下,漸變2.0的表現會更加優秀。暗黑主題將繼續流行,而且會變得更好。這篇文章(https://shakuro.com/blog/in-the-dead-of-night-why-we-are-drawn-to-dark-interfaces/)采用人類學的方法研究了暗黑主題以及它在什么場景下是有效的。那些能夠在暗黑主題下做到可訪問性與炫酷色彩之間取得平衡的作品,將會在2019年大受歡迎。

后臺管理界面 by uixNinja

 

可訪問性并不是漸變 2.0中唯一需要注意的問題。明亮的顏色通常是用來強化內容的,但當隨處都是明亮的顏色時,你又怎么強調呢?而且并非所有用戶的界面都是OLED屏幕,過多的顏色有時也會影響用戶的注意力。在運用趨勢做設計的同時,注意保證設計與用戶體驗之間的平衡。

 

更多的可變字體? ??

(譯者注:Variable Fonts(可變字體)是微軟在Windows 10 Build 17074版本中首次引入的新功能,無需多個文件就能通過編程方式讓單一文件適應和生成自定義字體樣式。目前關于這個可變字體,我查了下,網上的資料還比較少,大多數還都是英文的,有興趣的朋友可以去看看吧。)

傳統意義上來說,字體的調整限制是非常多的,設計師在設計字體的時候必須考慮到字體結構和識別性。

當設計師設計多種字體時,需要盡量為用戶提供所有字體文件,確保用戶能夠在使用時能夠看到不同粗細,實現很好的版式效果。但對于可變字體,你只需要提供一個文件,就可以實現字體的多種變化,為設計師的設計效果提供了更多的可能性。

Marvin Visions

 

可變字體在響應式設計中非常流行,有時候設計師不得不絞盡腦汁,在不拉伸字體的情況下將字體放到界面中以實現最佳視覺效果。

VOTE by Josh Rinard

 

當年引入web字體時,無法做到響應式是一大缺陷,由于字體本身不夠靈活,導致設計還原經常不到位。可變字體是一個新的技術,能夠提供更好的web字體,并能幫助設計師簡化設計過程。

而這僅僅是一個開端,可變字體在2019年可能會大放異彩。

Typography.Guru

 

Figma值得關注? ??

現如今,很多人仍然在問2個問題:

“設計師需要會開發嗎?”

“開發需要懂用戶體驗嗎?”

為什么會提出這2個問題的原因也很簡單,就是目前的設計的實現還原做的還不夠好。

設計師去學開發是一個解決辦法,如果讓設計師去寫代碼還原自己的設計稿,理論上就可以避免一系列的問題。但是作為設計師或者程序員,要去掌握好對方的技能樹其實是一件挺不容易的事。如果你能做到,那當然最好,但是對于那些做不到的人,應該允許他們有別的選擇。

目的不是要培養一個全能的設計師,而是為了要做出更好的產品。

還有一個好的辦法是使用一個更好的工具,Figma就是其中之一。在此之前,設計師與開發對接需要考慮很多因素,如操作系統,集成方式,插件,存儲,資源同步,協作方式,還要考慮各種適配問題。對于開發這些工作流程的人,確實是有價值的,但是對于我們設計師來說,其實還是想要更輕松一些的工作。

Figma 可以幫助我們改善這些流程 by Alexey Kolpikov

 

如今,Sketch和Adobe XD可以做到的事情,Figma都可以實現,甚至能做的更好。更重要的是,Figma能夠直接對接到開發,每個Figma組件都可以通過API轉換成React組件,直接在前端實現想要的效果。到目前為止,Figma在成本,性能,速度,協作,共享,嵌入,支持等方面均擊敗了競爭對手。話雖如此,Figma仍然在不斷發展中,2019年將會更加值得期待。

(譯者注:我不知道是不是原作者在給Figma打廣告,其實這款軟件我自己也嘗試用過。在瀏覽器上工作,目前來說,還是有些不大習慣,可能也有些心理壓力,對于瀏覽器的穩定性還不是很放心。不過,據我所知,目前這款軟件在國外還是蠻流行的,可能是國外很多公司都是遠程工作,這種基于瀏覽器的多人協作軟件,合作起來確實會很方便。而且,基于云端的工作模式,在未來肯定也是一大趨勢。有時間的朋友,也可以嘗試用用看。)

 

語音UI界面,更多的體驗式設計? ??

界面不一定都要是可見的。如果我們能夠把語音交互的體驗做的很好,那么界面的有無就變得沒那么重要了。而針對語音交互的設計,就需要做到更加的人性化,更加符合人的普遍交互習慣。

語音交互界面是既感性又復雜的。

語音UI界面最大程度的實現了無UI的概念。而對于語音UI界面的設計,要求則不同于大家平時所接觸到的界面,它的交互過程是在系統內部的,由接收到的信息自動進行構建和轉換,更關注數據邏輯,而非視覺。但即便與此,在為數不多的需要進行界面設計的地方,設計師也做了很多努力,比如創造出了很多令人印象深刻的語音動畫。

人工智能 design by Gleb Kuznetsov

 

大多數時候,普通的UI視覺設計與語音UI的實現沒有太多共同之處,但從本質上來說,兩者在邏輯層都是相通的,都是為了幫助用戶更好的控制軟件產品。在2019年,會有越來越多的設計師從單純的視覺設計過渡到體驗設計,我們可以有望從語音UI中的變化得到見證。

 

UX文案會更加受到重視? ??

去年,設計師們就開始在越發注重每一句文案了,UX設計師會更加注重界面中所用的詞句,怎么樣才能把信息準確的傳達給用戶。

在以前,企業喜歡在自己的產品中使用非常專業的術語,以期望能讓他們的客戶確認他們是非常專業的,甚至其中一些客戶也確實被教育的認為這樣一般人看不懂的術語真的就是靠譜的。但其實,這給最終的用戶帶來了很大的麻煩,客戶也需要再對使用人員進行培訓,這無形增加了成本,并且,如今這種方式已經越來越行不通了。

UX文案基于兩個簡單的原則:尊重和實用。其他的一些擴展都是基于這兩點。比如文案的簡潔意味著你可以尊重別人的時間多于你自己的時間,因為你要想一個簡潔的文案花的時間其實更多。清晰意味著避免出現誤解,對用戶來說就是有用的。永遠把重心放在幫助用戶上,而不是去炫耀你自己的文筆。

在2018年,我們注意到一些大公司在文案的設計上更加重視了,不再一味追求獨創性,而是更專注于用戶價值。到了2019年,我們可以預見到,對于文案的把控會更加嚴格,甚至會為UX文案專門發展一門學科。

 

產品設計師成為一種職業趨勢? ??

UX設計是一個非常寬泛的術語,它也是跨行業服務設計的一部分,設計師們往往都做過大量跨度很大的項目,從簡單的APP到復雜的金融平臺項目。

服務設計師可以有自己的個人風格,也可以應用于任何產品,這就是他們的價值體現。

然而,大多數公司都是產品型的公司,它們可能需要設計師能更深層次的去理解它們的產品。這些公司需要一個產品設計師,需要他必須深入到團隊中,掌握所有可用的數據,并能統籌,規劃好工具和資源。(譯者注:這跟產品經理有啥區別?)

產品設計師有能力專注于與他們相關的產品細節,而忽略其他一切。與大多數服務設計師所面對的需求正好相反,他們對自己所設計的用戶群有深入的了解,并且有真實的數據可供操作。

創新的眼睛枕頭 by Sasha Turischev

 

但是,想要轉成產品設計師其實并不容易。它要求你扎根在某一個行業,深入研究,積累專業性,可能你將來想再轉行就很難了。基于這樣的情況,你必須要慎重考慮,必須要對你即將從事的行業的專業發展前景做一個充分的評估。(譯者注:服務設計師,我理解其實就是我們現在所處的狀態,萬精油類型,無論哪家公司都可以隨時開工,反正都是做視覺,大體的思路都是差不多的。優點是好跳槽,缺點是隨時都可以被取代。)

《財富》雜志青睞敢于冒險的人(譯者注:意思是說膽子大的人賺的錢多),在2019年我們將會看到更多有獻身精神的設計師嘗試跳出他們的舒適區,成為專業人才,時間會證明這一切。

 

最后? ??

我們把眼光放到一個更長的時間段看會發現,最大的趨勢其實并不是某種風格,某種技能,某個軟件,而是回歸“真誠”。沒有那么多的小聰明,而是真誠的對待你的用戶,真心的為用戶考慮,用戶才能真正喜歡用你的產品。

 

原文地址:uxplanet

譯文地址:彩云譯設計(公眾號)

原文作者:Moses Kim

譯者:彩云Sky

轉載請注明:學UI網 » 2019年 UI 和 UX 設計趨勢

登錄收藏
 
你可能喜歡的:
獨家 | 2020年交互設計趨勢獨家 | 2020年交互設計趨勢
Behance 年度好文!2020年設計趨勢全方位分析Behance 年度好文!2020年設計趨勢全方位分析
2019中國用戶體驗行業調查報告2019中國用戶體驗行業調查報告
扁平風格的問題在哪?扁平風格的問題在哪?
體驗設計“發展觀”- 期望能力模型體驗設計“發展觀”- 期望能力模型
重磅登場!2019,雙11創意貓頭秀重磅登場!2019,雙11創意貓頭秀
?iOS 13 做了哪些體驗升級?iOS 13 做了哪些體驗升級
動效賦能 助力用戶體驗設計動效賦能 助力用戶體驗設計
折疊屏場景設計探討折疊屏場景設計探討
iOS 13 隱秘的細節④:系統組件·下iOS 13 隱秘的細節④:系統組件·下
?
陕西快乐10分