新擬物化——Neumorphism ,這么說可能不容易理解,但如果說「新擬物風格」,想必 UI 界的設計師們就知道這股「風頭」,在2020年刮的多么兇猛了。
烏克蘭設計師亞歷山大·普盧托 (Alexander Plyuto) 在 Dribble 平臺發布了一張 UI 作品《Skeuomorph Mobile Banking》,由于該作品使用了擬物化的設計風格,令人耳目一新,導致了作品的熱度持續飆升,并登上了平臺 Popular 榜首。Dribble 的評論區直接炸開了鍋,大家紛紛討論。
△ 普盧托的《Skeuomorph Mobile Banking》,獲得了3000多次喜歡
隨后一位評論者杰森·凱利(Jason Kelley)在評論中將 New Skeuomorphism 「新擬物化」組合得到的 Neuomorphism 稱為「新擬物」 ,并決定去掉「 o 」,于是新設計詞匯「 Neumorphism 」便產生了。之后大家便用此做 Tag ,為自己的新擬物化設計作品打標簽上傳。
此風格的出現也給一直流行的扁平化設計添加了新的展現形式。今年2月初,三星召開 Galaxy Unpacked 活動,為宣傳新設備而發出的邀請函,便應用了新擬物化。
△ 凸出的部分,用來比喻新機型的賣點
想要了解新擬物的由來,就必須知道擬物的概念。擬物又被稱為擬物化,或是現實主義(Realism),概括的說其主要目標是使用戶界面更有代入感,降低人們使用的學習成本,產生熟悉親和的情感聯系。
A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.
via:en.wikipedia.org/wiki/Skeuomorph維基百科上關于擬物化的釋義
Apple 蘋果公司最早提出了擬物化的設計概念,通過模擬現實物體的紋理、材質來進行界面設計,當時的 UI 設計師們都為擬物化設計「癡狂」。蘋果創始人喬布斯也非常推崇擬物化,他認為:「通過擬物化,用這種更加自然的認知體驗方式,可以減少用戶對電腦操作產生的恐懼感」。不妨來回憶下曾經擬物化的 IOS 界面:
△ IOS 5系統中的相機展開狀態(擬物化的鏡頭)
△ 擬物化的精美 ICON
△ IOS 6系統中,被精細刻畫的錄音機(底部指針也很惟妙惟肖)
而新擬物則是擬物的變體,在擬物的基礎上改變了圖形的樣式,讓設計元素看起來更有真實感,不再是精細的模擬,更像是從界面中「生長」出來。設計師 Michal Malewicz 以卡片的形式,將新擬物和質感設計(Material Design)對比,闡述了二者在實現時的差別。
新擬物卡片給人呈現的是一種無縫隙的「閉合」感,由界面中凸起;而質感設計卡片,則是漂浮狀,陰影向四周發散,沒有邊界限制;二者的光影效果也非常明顯,新擬物偏柔和,質感設計則相反,非常凸顯物體本體。
Michal Malewicz 還標注了新擬物卡片的背景、陰影和高光的色值,整體色調比較接近。
擬物化風格的結構由背景色+高光色+陰影組成,掌握了基本規律,就可以通過改變按鈕、卡片的參數進行調整變換。
△ 形狀、陰影參數的不同,實際效果也有區別
新擬物也經常被拿來與扁平化比較,因為擬物和扁平化是兩個相對的概念。其實在蘋果創造的設計系統的早期界面其實是非常擬物風的,但系統從 IOS 7開始,才轉向扁平的設計風格。
隨著 AR、VR 技術的進步,其實對于真實物理環境,或者說對顯示效率的提升之后,我們對接近物理環境的設計更熱衷了。比較有代表性的就是 Google 推出的 Material Design System,它基于人們去模擬真實的物理世界的樣子,進而在數字世界里展現我們對于真實世界的一個反饋后,這樣的設計流程和邏輯,也讓我們的設計更真實,更具有感染力。當然也不止 Google 一家發布了這樣偏擬物化的設計風格。
從美學角度來看,其實新擬物化拋棄了之前很多擬物化里不必要的冗余,比如一些陰影、細節的繁瑣設計,更偏近現在先進科技發展的設計風格。比如 Windows 推出的 Fluent Design System ,正迎合了未來的 AR、VR 技術廣泛普及后的設計環境,希望打造一個先趨的設計系統。
在 Fluent Design System 提到的特點有:Lignt、Depth、Motion、Material、Scale。
1. Lignt
光照,它指的是點擊或 Hover 的動作上面加入光照的效果,或是像柔和的光源灑落在空間中,可以去反應物體本身的反光質感,它和 Material Design 強調的光影的擴散的光影效果是不同的概念。
2. Depth
深度,其實它的概念從 Material Design 開始就已經被強調了,但是 Fluent Design System 希望是用更多的方式去呈現,比如井深的模糊效果,視差滾動的動態效果,物件彼此的大小與位置等等。
3. Motion
動效,其實它想強調的動態效果更接近真實的世界,更強調細膩的變化,比如李安的電影「比利·林恩的中場戰事」,這個電影拍攝的幀數與以往傳統電影不一樣,看起來的感覺會更加的流暢自然,你體驗過之后會很難回去之后那種電影呈現效果了。而 Windows 強調的 Motion 也是一樣的,比起這種單調的動作,它也會去強調每個設計對象彼此之間的動態效果的時間差,看起來會更加的流暢自然。而且與真實空間中前景后景的物理概念一樣,不同的時間差會更容易凸顯出想要凸顯的主題效果,也會更加的聚焦。
4. Material
材質,其實在 Windows 提出的 Fluent Design System 里面,它會出現大量的模糊,透明的背景。也就是模擬毛玻璃的材質感。通常也會代入一些微光源的效果。除了能夠吸睛,吸引你的視覺之外呢,其實在 AR、VR 的界面上面感知空間中的物件是很重要的,所以模糊的背景的利用可以在不影響觀看內容情況下,還能起到背景暗示的作用。其實毛玻璃效果在 Windows 系統中已經被運用到了,但是由于當時的效能以及干擾視線的問題僅僅運用在了一些小區域,而這次 Fluent Design System 的就成為了最強烈的視覺焦點,其實同樣的 iOS 和 Mac iOS 系統里面在最近的更新也大量使用了模糊效果。
6. Scale
縮放,在視覺上眼前的物體大,后面的物體小,所以縮放也是來營造空間感、縱深感,尺度感的這樣一個設計特性。
常應用于圖標、卡片或按鈕元素設計上,背景板多為干凈的純色;界面平滑,沒有明顯的顆粒感;
△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》
△ Filip Legierski 《 Banking App 》
按鈕的外邊框均設置了陰影、漸變效果,突出立體感;
△ Samson Vowles《 Neumorphic dark ui kit components 》
在視覺處理上,凸出的按鈕為可點擊的狀態,凹進去則代表已選中。
△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》
層次結構弱
Whale Lab 觀察發現,新擬物弱化顏色區分而強調近遠景陰影布局,所以整體色彩都相近,除了在個別的位置加入其它顏色點綴,用戶識別起來也會迷茫;而卡片、按鈕都使用了陰影,高光效果,層次結構不明確,也很難帶來流暢的體驗;
△ 新擬物風格,Filip Legierski《 Neumorphism UI Elements 》
對比度和視覺限制
明顯的對比是界面設計的重要原則。由于新擬物風格具有各種陰影色調和角度,可單擊的內容與不可單擊的內容區域在哪里不是很好區分。根據產品的功能和要求,每個應用神經同構的產品都可以具有自己的UI階段規則;但是由于陰影,角度和浮動水平的不同,由于缺乏一致性,迷失方向的可操作項,「神經變形」會給用戶帶來混亂,最終為殘疾用戶造成使用障礙。
如同下面這個例子,按鈕狀態已點擊和未點擊的一個效果,由于受壓狀態的反差太小,則看起來的效果也沒有什么不同。
增加開發難度
更為嚴重的是,不少設計者在使用 Neumorphism 進行界面開發過程中,也遭遇到了不少局限。要實現這個風格,主要有兩個方式:
卡片、按鈕切圖,每個狀態(Normal、Hover、Pressed)都要裁切,導致資源庫圖片量過載;
代碼實現,這個風格的實現效果是對元素增加兩個不同方向的投影,但需要開發對每個元素添加投影,樣式代碼增多,工作量浩大。
網站neumorphism.io,可以快速生成 Neumorphism UI 。設置按鈕的參數值,就能看到多樣的新擬物化效果,非常神奇!
新技術、事物、趨勢的出現,起初都會給人們帶來焦慮甚至是恐慌。不管是擬物還是扁平,Whale Lab 覺得若是絕對化的去推崇某一種,都是錯誤的,盡管蘋果放棄了擬物進入扁平化,也不一定代表扁平就是最好,畢竟二者始終相輔相成。不敢否認,新擬物風格在今后是否變得「真香」,但對于設計師來說,從用戶體驗、產品出發的優秀設計,都值得被認可與尊敬。
文章來源:優設 作者:UX辭典
編者按:這篇文章來自 UI 設計師 Diana Malewicz,她在日常工作中會非常注意 UI設計的流行趨勢,而這篇總結就是她梳理總結的10個小趨勢。它們更多的是偏向 UI 視覺方面,并不涉及到體驗和交互。
最近我花了不少時間來觀察 UI 設計的發展趨勢,我偶然間注意到了不少很有意思的苗頭,或者說設計趨勢。我認為這些設計趨勢,能夠在不久的將來塑造更加獨樹一幟的UI 。
下面是我所梳理總結出來的 10 種趨勢。
的確,新擬物化是2020年處于風口浪尖的一種視覺風格,無論你喜歡不喜歡,覺得它可行不可行,它現在都已經是一個確定的、成型的風格,并且會持續存在著。
不過,新擬物化從最初誕生到現在,已經有一定的改變了,并且在向著更加復雜、完善的方向發展,有著更為良好的可訪問性,開始具備更多擬物化的設計特征,但是更加新鮮、現代,并且更能渲染出獨特的氛圍感。
漸變這種設計趨勢正在進入兩極分化的一個階段。一方面,在視覺設計領域,一部分漸變變得更加夸張,但是在 UI 設計領域,無論是背景、UI元素(比如按鈕、卡片和圖形),漸變依然存在,只不過會顯得更加微妙柔和。
在 UI 設計領域,還有的設計師會使用雙色漸變,并且結合模糊效果,讓它更加柔和。
幾何元素既可以作為背景來使用,也可以作為裝飾細節,讓你的設計越來越有趣。幾何元素在最近幾年受到的關注非常多,在設計上的應用也頗為廣泛,甚至有人將幾何元素拼接成為馬賽克,最終呈現出來的視覺效果非???!
必須說,我個人是非常喜歡這種設計趨勢的。我已經看到了很多令人驚艷的、輕巧且極富美學價值的背景設計,它們用明亮柔和的色彩鋪滿背景,展現出極強的色彩和搭配的技巧。
使用色調柔和的背景能夠讓整個設計都顯得現代而沉靜,清新,讓內容真正抓住用戶的注意力。
插畫毫無疑問是非常流行的。不過,不論是配色還是視覺風格,無論是什么樣的插畫風格,最終的目標依然是要契合產品和 UI,所以很多插畫都選擇了相對扁平的風格,或者選擇模擬類似3D的視覺外觀。相比于每個數字項目都在使用的免費圖片,插畫真的是向前走出了一大步!
在這篇文章當中,我有分享在 UI 中使用插畫的一些簡單技巧:
和傳統的規則的幾何圖形不同,抽象而不規則的圖形可以讓界面顯得更加不拘一格和好玩,更通俗的來講,就是讓 UI 界面更加「有機」,我認為這是一件好事。使用鋼筆工具在原始的圓形和矩形上進行編輯,嘗試不同的輪廓,承載不同的顏色和漸變效果,最后生成的效果會非常有趣。如果你不想去自己繪制,可以嘗試一下 Blobmaker 這個工具,能夠幫你節省時間~
深色模式在這2年絕對是人所共知的一個設計風尚了,如今的深色模式 UI 設計已經深入到各個不同的應用。簡單來說他是整個界面配色反轉之后的效果,便于用戶在深夜更輕松地瀏覽界面信息。只不過在具體的設計實施上,深色模式遠不是簡單的色彩反轉就可以實施的,有很多注意事項,尤其是在對比度控制上,具體可以看看下面的文章:
最初大家在 Dribbble 上會傾向于使用非標準的排版布局方式來呈現UI界面,后來這種展現方式開始逐漸在實際的設計項目中應用開來。在實際的設計當中,絕大多數情況下都會挑選30度到50度之間的傾斜角度。這種方法非常不錯,可以多嘗試。
陰影是擬物化設計當中最重要的視覺元素之一,而如今它又再次大規模流行開來了。只不過相比于之前「沉重」的陰影,柔和的彌散陰影在美學上更加令人愉悅,通常,陰影會讓 UI 元素的「可點擊感」更強,并且有助于區分界面中的層次結構。在這篇文章當中,我有詳細說明:
實際上早在 iOS 7 的時代,曾經一度流行過筆觸纖細且字體寬度比較窄的字體,不過很慶幸這個時代過去了?,F在所流行的字體更加講究字體的可讀性,字體的外輪廓都大體趨近于正方形,外觀顯得更加大氣而現代。如果你正在尋找類似這樣的字體,可以試試 Poppins、Montserrat、Gilroy、Sofia Pro、Proxima Nova 等字體。
這篇總結,基本上都是基于我個人對于趨勢的觀察和了解,在我看來,它們都有著非常強大的生命力,UI 設計的未來會更加富有希望。
快速變化的技術每年都在影響著設計趨勢。作為設計師,我們需要時刻保持關注,對設計趨勢擁有較高的敏感度,不斷學習,擴充自己的設計技能,目的是為了跟上的市場環境?;谖业恼{研,經驗和觀察,我甄選了在2020年你將會看到的最為關鍵的8個UI/UX設計趨勢。讓我們一起來看看吧。
插圖被應用到APP中已經有很長一段時間了,它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設計元素,為我們產品的整體產品增加了情感化體驗。插圖非常能抓人眼球,尤其是在融入動效后會顯得更加的自然,將產品帶入生活的氣息,使得產品功能更加突出,同時也增添了更多的細節和個性。
△ Welcome to Swiggy by Saptarshi Prakash
△ Onboarding animations — Virgil Pana
另一個好處是使用動效后,能抓住用戶的注意力使其能夠更加沉浸在你的產品中。動效同樣是講好品牌故事,產品或者服務最有影響力的途徑之一。
微交互存在與每一個網頁或者app界面中。每當打開你最喜歡的那些應用時,都有機會看到它們,比如像Facebook中就有大量不同的微交互,我認為「Like」功能就是一個完美的例子。有時,我們幾乎意識不到它的存在,因為它們非常的不顯眼,非常自然地融到界面中去了。但是,如果當你把這些微交互移除掉的話,你又會非常快的注意并能感受到一些非常重要的東西丟失了。
△ Menu toggle close animation — Aaron Iker
△ Tab bar active animation — Aaron Iker
一般來說,在UI/UX中即使非常小和細節處的設計都可能會帶來巨大的沖擊力。微交互就是完美的證明,細節和對它的關注能極大的改善產品的整體體驗,并讓產品體驗上升一個臺階。每年,新設備的發布伴隨著新的機會,能給產品塑造新品牌和創造富有創意的微交互。
3D圖形設計幾乎無處不在,比如在電影,游戲或者運營廣告里等等。3D圖形設計早在10年前就出現了然后一直在不斷提升和進化。手機和web技術進展迅猛,新的web瀏覽器能力打開了3D設計新世界的大門,這給了設計師們在web和手機界面中創造炫酷3D設計的機會。
△ 3D flip menu by Minh Pham
△ Car health report UI by Gleb Kuznetsov
創造并整合這些3D創意設計到web和手機界面中需要特殊的技能和花費大量的工作,但這些付出會得到回報。
△ Apple AirPods Pro landing page
3D設計對于產品和服務來說,具有非常大的吸引力,例如在交互上能夠支持用戶360度查看產品,從而大大提升整個的產品體驗。
在2020年會有更多的品牌利用3D渲染模型的產品和服務去模仿線下購物體驗。
VR技術在2019年有一個巨大的飛躍。最近的一年我們激動地看到了頭戴式設備有了非常大的發展,尤其是在游戲領域。我們需要記住的是,游戲行業經常在引領著新技術的發展并落地到實際的產品設計中。研究表明,VR也不例外,在Oculus Quest于2019年推出后,許多機會為其他行業打開了大門。Facebook CEO 扎克伯格已經測試了激動人心的手部交互功能,并正式宣布將在2020年初為Quest進行更新。
△ Oculus Quest — hand interaction feature
△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan
索尼和微軟計劃在2020年夏季發布他們的新設備,這就給VR技術帶來巨大的機會和發展空間。
學習VR 可以閱讀優設這個專題:https://www.uisdc.com/zt/vr-design
在最近幾年,我們能看到在AR(增強現實)這塊有了很大的進步和驚喜。世界引領著科技公司在AR開發方面進行了巨大的投入,所以我們應該期待這項技術在2020年有更大的成長和發展。蘋果公司也發布了他們自己的AR套件叫AR KIT3來幫助設計師和開發者在他們的產品中打造AR體驗。
△ Apple ARKit 3 by Apple
△ Public transit app by Yi Li
△ House of Plants AR Concept by Nathan Riley
在AR空間里會有無限的機會和創意去打造一個新的品牌和激動人心的體驗。為AR做UI設計會在2020年成為一大趨勢,這就要求設計師們在面對創造AR產品體驗前,應該去準備和抓緊學習新的工具,原型之類的知識。
學習AR 可以閱讀優設這個專題:https://www.uisdc.com/zt/ar-design
一般來說,擬物化設計是指以現實風格/方式創造出來與現實中的物體相匹配的設計元素。不斷發展的VR/AR技術以及在各大最流行設計平臺(Dribbble,Behance等)上展示的設計作品趨勢來看,預示著擬物化的回歸,但這次換了個更現代,更酷略微高大上的名字叫「新擬物風」(也叫Neumorphism)。
△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto
△ Simple Music Player by Filip Legierski
△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison
你可能注意到了:Neumorphism代表了豐富細節和明確的一種設計風格。高光,投影,發光,這些細節非常令人印象深刻。Neumorphism風格已經鼓舞了全世界一大批的設計師創作作品,它也會成為2020年最大的設計趨勢。
學習新擬物風可以閱讀優設這個專題:https://www.uisdc.com/zt/neumorphism
最近一年我們也注意到一種不對稱風格正在快速發展。傳統基于「模板」的布局肯定會消失。這種設計趨勢給2020年的設計帶來了更多的差異化。合適的不對稱風格將會在我們的作品中增多一大批不同的性格,火力以及個性,所以設計不再單純的基于模板。
△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk
△ Carine fashion store — selection screen concept — Dawid Tomczyk
當設計這種不對稱風格時,設計師擁有非常多的選項以及巨大的發揮空間。但是,想設計好這種不對稱風格需要大量的練習,它絕不是將元素隨機的擺放在網格中,而應該小心使用和實現它們,時刻需要把用戶的訴求考慮到設計中。我們并不想讓用戶迷失在我們的產品中,對嗎?
故事在整個用戶體驗中扮演著非常重要的角色。你可能經常會在著落頁看到它作為品牌介紹,產品或者一個新的服務。講故事就是利用創意的形式把信息傳遞給用戶。這可以通過強大的視覺元素來呈現(字體,插畫,高清圖片,顏色,動畫,交互元素)。
△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk
△ Free Sketch Template :: Mimini by Tran Mau Tri Tam
講故事可以幫助產品創造出品牌和用戶之間積極的情感連接。講故事可以為你的產品創造出非常多的記憶點,讓用戶感受到自己就是產品或服務的一部分,他們便會更加愿意使用你的產品。話雖如此,講故事也是一種非常有效的營銷手段,它可以極大地提高你的產品/服務的銷量。講故事作為一種非常成功的手段,將在2020年繼續發揚光大。
1. 動態插圖
通過把動畫和插圖進行結合,我們可以使得設計變得更加突出,并把它帶入用戶的日常生活,為產品賦予了的細節和個性化。
2. 微交互
微交互被證明是可以在當用戶注意到他們是能夠帶來非常大的驚喜體驗,它能夠有效的提升整個產品的用戶體驗并把產品的品質提升一個等級。
3. 3D圖形的應用
新的瀏覽器技術打開了3D圖形應用的大門,能夠給設計師帶來非常大的創意機會去打造讓人驚嘆的3D圖形設計應用到網頁和手機APP中。
4. 虛擬現實
游戲行業將迎來新的變革,新的技術能夠應用到產品設計中。
5. 增強現實
在AR空間中擁有無限的機會去創造新的品牌和令人激動的新體驗。為AR技術服務的UI設計將在2020年成為主要趨勢,設計師需要位為之準備并去學習新的工具,原型,當真的需要你去做一款AR應用時就需要用到。
6. 新擬物風
AR/VR技術不斷發展,以及在各大流行設計平臺上大量涌現的寫實設計作品預示著擬物風的回歸,但只是這次換了個新的更加現代化的名字。
7. 不對稱布局
運用不對稱布局能讓設計創意變得擁有更多選項和機會。雖然,設計一個成功的不對稱布局需要投入大量的練習和時間。
8. 講故事
講故事就是利用創意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具,可能會大大增長產品的銷售額或服務。
文章來源:優設 作者:彩云譯設計
寫在前面
過去幾年中,我們的積極反應促使我們繼續探索和分析主要設計領域的新趨勢。盡管大多數趨勢都是去年發生的變化,但到2020年,我們仍有一些新趨勢值得追求。最重要的趨勢是與技術有關的趨勢,以及它們的發展趨勢,以及它們如何影響設計領域。
總體趨勢
2020年的主要趨勢動作設計與動畫, 對于2020年,我們認為運動設計是主要趨勢,因為我們在所有設計領域都遇到動畫,從小的交互到徽標和UI,一切都在變化。動畫內容正在進入現代世界,在現代世界中,書面內容沒有以前那么吸引人。 動作設計正確實施后,可使廣告系列的信息更快,更正確地傳達給受眾。
01. theQoos品牌插圖由 閔慶 02 軍團賽季 3由 尼克Scarcella 03. 溶劑-使大麻銀行公開賽由 BluBlu工作室 04 云服務(動畫圖標)由 亞歷山大Baleev 05. 病毒性肝炎由 昂布爾集體 , 蒂博ZELLER , 喬納森Plesel 06 。 UXC_Design2020_Project研究通過 Donerzozo
目錄
1. UI / UX
2.插圖
3.動態圖形
4.平面設計
5.基于技術的趨勢
6.包裝
7.版式
8.趨勢工具
1. UI / UX
1.1暗模式(Android Q和iOS 13)
暗模式是2020年的新趨勢,Android引入了兩種類型的暗模式,分別稱為“強制暗模式”和“系統暗模式”。微軟通過在其電子郵件應用程序中展示其暗模式擊敗了谷歌,但谷歌迅速推出了自己的針對Android 10的Gmail應用程序的暗版本模式。
有了介紹此更新的大公司,許多設計師將選擇在他們的應用程序或站點中使用暗模式,因此希望在來年看到越來越多的暗模式。
1.2粗體顏色
在過去的兩年(到2020年)中,強烈的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。
01. EMART UX / UI可再生的通過 加X, 李寶藍 , Sabum卞 , 熙榮, 尤金全度妍 , ? ? ?, Bongho彩 02 NSH通過 索菲婭費多托娃 03. 埃爾多拉多賭場-移動Web UI,應用程序ü用 的Loredana PAPP-Dinea , Mihai Baldean , Milo主題 04. mmcité+網站由 工作室9 茲林,帕維爾Valek 05. 自動哈克系列#21-25由 安德烈福 06. Flipd應用程序通過 ESTUDIO PUM
1.3 UI中的插圖
多年來,插圖一直是設計中最強勁的趨勢之一。插圖是對概念的直觀解釋,可以使用戶更好地理解產品背后的思想。除了一些精美的插圖使這一概念獨具匠心外,它們還可以更快地傳達信息。
01. 海妖重新設計,以 西爾Theyssens , 安東尼科拉德 02 浮雕-醫療項目由 馬丁Pankiewicz 葛爾若, 米沃什Po?arkowski 03. abuk:圖書封面設計有聲書商店到 謝爾蓋Valiukh, Tubik工作室 04.我llustration系統GOL到 ESTUDIO PUM 05 。 智能家居的應用程序- IOS到 瑪麗亞Osadcha 06.斯基林貿易(skilling.com) - Loredana酒店PAPP-Dinea , 米哈伊Baldean
1.4講故事
設計中的講故事是關于幫助用戶在平臺上的旅程,從而使他的體驗盡可能輕松和流暢(在UX設計中)。一個好的故事可以幫助用戶更輕松地了解產品。為了講述一個故事,我們可以使用一個特別創建的角色,將這個角色賦予他個性,我們創建一個故事和一個沖突,最終由我們的產品(UI設計)解決。這是產品設計中講故事的基礎。講故事在UI和UX中都使用,并且基于相同的原理,但實現方式有所不同。
01. 余吳-旅行計劃應用由 朱莉張庭 02. UX / UI | 食品外賣應用由 康斯坦丁Seredkin 03. COOC通過 cuneyt仙
1.5動畫圖形和微交互
正如我們所說,動態圖形是今年的趨勢,它在UI設計中也有很強的表現,它為插圖增添了力量,使創意更易于吸收并保留在用戶的記憶中。
微交互在2018年成為第一流,但這一趨勢值得在2020年關注。它們是UI設計中極其重要的趨勢,這使基本應用程序/網站與非凡的應用程序/網站有所不同。微交互在使用戶了解系統的工作原理并引導其獲得更好的體驗方面起著至關重要的作用。
如果您是UI設計師,但尚未在工作中使用微交互,建議您這樣做,因為到2020年,沒有UI的任何UI設計都將是非?;镜摹?nbsp;
01. UI / UX | 智能藥房應用的 阿納斯塔西婭中號, 謝爾蓋Nikonenko UX 02. 氣候與動物:滅絕危機網站UI / UX 由 丹尼爾·譚, 達芙妮龍 03 飛素食者由 帕特里夏賴納斯 04. UKRPOSHTA。烏克蘭國家郵政局的移動應用程序,伊洛娜·金( Ilona Kim) 05 . Tagir Tikeev 的聾人報警應用程序
1.6用戶界面中的視頻
到2020年,信息必須非常快地到達用戶手中,最好通過視頻內容來完成。您選擇通過動畫或經典電影來解釋產品,視頻內容對于任何網站或應用程序都是必不可少的。
1.7功能
UI設計中的一個重要部分是功能,即,根據其目的和功能選擇每個元素。許多人認為您必須在設計和功能之間進行選擇,但是在新技術的幫助下,這兩種技術可以很好地融合在一起并相互補充。設計負責引起對站點或應用程序的注意,其功能使體驗變得更輕松。它使用戶可以更快地找到信息。
01.斯基林貿易(skilling.com) - Loredana酒店帕普用餐 , 邁克爾Baldean
1.8注意細節
在UI設計中,對細節的更多關注非常重要。從按鈕,圖標,加載到導航到細微的細節,都可以打造出非凡的設計。隨著新技術的出現,我們在UI中必須注意的細節始終在變化。
在明年,我們將看到越來越少的按鈕,以及更多基于手勢的導航。例如,后退按鈕(Android的導航常用)在Android 10中正式消失。
01. FLYR的視覺形象和營銷網站的 Ramotion
02. 鬧鐘應用聾人通過 Tagir Tikeev
1.8漸變
幾年來,我們一直在談論設計中的漸變,這種趨勢在2020年將繼續保持強勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標,插圖,甚至用于排版。
01. Wavecut - IOS應用程序通過 Eleken局 02. 抗憂郁癥的應用程序-產品設計(UX / UI)由 安娜Arutiunian
03. 保羅回腸-電影音樂作曲家,制作人,DJ,Perfomer 通過 的Loredana PAPP-Dinea , 米哈伊Baldean , 米洛主題 04. ITEXIA通過 下一頁局 , 亞歷克斯海鷗 , Jegor Walowski
2.插圖
2.1角色設計
角色設計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設計師向角色灌輸了強烈的個性。您在應用程序或網站中遇到的虛擬助手是角色設計的一個很好的例子。
01. 新微小的事情?兒童圖畫書由 Vuon插圖 , 榮阮 , 榮范 02 的Adobe X Createfulness由 邁特弗蘭基, 馬蒂厄Tarwane 03。 3D人物V2由 安東尼奧·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2紋理
插圖和紋理很好地結合在一起,可以創造出令人難忘的構圖。從粒狀紋理到預制的筆觸,您可以找到許多想法來為插圖添加紋理,也可以手動創建它們。瀏覽網絡時,您可以找到許多可以在插圖中使用的紋理,預制筆刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀
2.3平面插圖
在過去的幾年中,我們到處都可以看到平面插圖。它們仍然處于趨勢中,但現在有了一個新的組成部分:對每個元素應用細線。大多數藝術家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。
01. BILLY KENNY -剛剛為音樂通過 桑戈BANG 02 Babelia - Lecturas對維拉諾由 米格爾·安赫爾Camprubí 03. 拳擊貓-第一滴血由 Felms 04. COUSCOUS STUDIO | 解釋器VIDEO 由 哈立德abdelazi ?
2.4等軸測圖
是的,等軸測圖仍然在這里。它們主要可以在UI設計中找到。隨著人們對加密貨幣的興趣不斷增加,這種趨勢似乎已經生效,但是在2019年它已經發展了,現在我們在其他業務領域中發現了這一趨勢。
01. 龐克市由 溫祚_ 02 FastCompany -等距號由 阿圖爾Tenczynski 03和05. 抗體亞型由 馬里奧·德?梅耶爾 04. 松弛插圖由 京張
2.5 3D
隨著效率越來越高的軟件和工具的出現,3d渲染已逐漸發生變化。3D插圖非常受歡迎,因為與2D插圖不同,它提供了更逼真的圖像。
01. 游戲巴伊亞之家由 Miagui 02 天平 由 卡韋薩Patata工作室 03. 城堡毀滅者由 穆罕默德Chahin 04. Eyoo家庭3D插圖由 Baianat 05. 個人插圖第1卷由 巴勃羅·馬林 06. 一個人旅行通過 亂伊萊恩
2.6超大膽的色彩
大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,并在圖像背后展現故事。
01. 瑪莎·希肖娃(Masha Shishova)攝于莫斯科的 STRTFD咖啡壁畫 02. 作家- 利奧·夏目( Leo Natsume)的移動互聯網思想 03. 可口可樂圓罐插圖由塔尼亞·雅庫諾娃( Tania Yakunova)
3.動態圖形
3.1 3D視頻
在2020年,無法想象沒有3D設計的運動。設計的這個分支打開了一個世界的大門,在這個世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動等中找到3d。
01. 龐克市由 溫祚_ , 視覺設計藝術的影響
3.2視頻+動畫插圖(混合媒體)
拍攝的視頻,動畫插圖以及有時是靜止的照片的結合可以產生非凡的效果。2d或3d插圖可創建令人難忘的視頻,從幾行運動到3D真實人物甚至是現實生活中不存在的復雜視覺效果。
01. Coppel /回到學校通過 大量工作室 02 PWR 由安娜·霍查, Edvina元
3.3 2D動畫-說明性視頻
2D動畫專注于創建故事和角色,并在創作過程中使用矢量。當您想要廣告系列或產品的說明性視頻時,2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中,說明性視頻對于任何網站都是必不可少的。
01. Freelive 由 工作室Infografika , 謝爾蓋·薩多斯基 , 阿納斯塔西婭Alterka , Arsentiy Lesnik賓館 , 尤里·阿姆斯特朗 , 阿林好, 喬治VALD ,馬克西姆Tleubaev
3.4動畫徽標
您已經了解到動畫是2020年的“必備”,為了保持競爭力,我們還必須將它們集成到徽標設計中。許多公司已開始對其徽標進行動畫處理,以引起人們的注意。這也是徽標設計的主要趨勢。
01. 杯茶由 維多利亞伍 02 - 07. 運動野獸?Logomachine。動畫標志的 運動設計學院, 維克托Villamarin的, 波格丹·杜米特留, Logomachine .NET , 亞歷山大·庫茲涅佐夫, 扎克李, 丹尼斯Siurin , 斯坦尼斯拉夫·馬爾琴科, 莉扎薇塔Tsareva , Supremus Levenus , 安東·福明, 埃米爾Khafizov , 膽堿哈達
3.5混合動畫2D和3D集成
這一趨勢不是一個新趨勢,但絕對值得一提。混合動畫就是使用為此創建的特定軟件將2D與3D結合在一起。
4.平面設計
4.1平面設計中的3D
盡管2d壟斷了設計的這一分支,但3d可以為最終概念添加額外的內容。3d渲染可以采用插圖,動畫或字體的形式。
01. 畫像由 費爾南多·多明格斯Cózar 02. NASA | 太空時代的 工作室-JQΔ 03. 美國宇航局X BBC | 不自然世界的 工作室,JQΔ
4.2雙色
精益求精的概念可以完美描述這一趨勢,設計師在其中創造出大膽的元素,并帶有優雅的手感和強烈的對比。這種趨勢是創建更易于訪問的打印的理想選擇,因為某些打印技術如果顏色更多,則價格會更高。
01. 冬季公開賽'18由 Kinoto Studio, Romina Rios, Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物館由 de_form工作室, 諾拉demeczky , 的Eniko DERI 04. 刻字系列IX由 拉斐爾·塞拉
4.3光學感知藝術
歐普藝術作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動感,隱藏的圖像,閃爍和振動的圖案或腫脹或翹曲的印象。(來源:wikipedia.org)。
這種趨勢給人以動靜的印象,但是以一種靜態的方式。如果要實現在印刷海報中移動圖形的想法,這是最合適的方法。
01 02 東京電影節共混物由 梅賽德斯巴桑 , 的Adobe住 03. 海報-第一卷由 Xtian米勒
4.4平面設計中的插圖
插圖在設計的所有領域都非常重要,因此我們在圖形設計中也可以找到它們。2D插圖在現在已經非常流行了幾年,并且即使在2020年,也將繼續成為設計師的最愛。
01. GOOSE赫爾-海報由 Ewelina鵝 02 CAT酒吧和舞廳/ 2019至 kissmiklos, Eszter薩拉
4.5動畫海報
動畫無處不在,我們在設計的各個領域都可以找到它們,當然它們也存在于數字海報中。動畫可以將2D與3D混合在一起,效果令人著迷。
01 節地鐵地鐵由 Bzoing, 維吉尼貝達德 02. 失敗的Windows由 皮埃爾Kleinhouse, 轄Zivony
4.6復古合成波
復古合成波是一種在80年代出現的趨勢,但一旦好萊塢開始發行該十年的電影后便開始重新出現。隨著《陌生人事物》系列的成功,這一潮流再次開始流行。
01. 雞尾酒和夢想通過 Gjorgji Despodov 02. CINEMAX由 杰森巴爾巴 03.奇怪的事情(Netflix.com)
4.7瑞士設計,達達主義,包豪斯
20世紀最重要的圖形設計運動始終是最好的設計師的靈感來源。這些樣式值得一提,因為它們始終是的,遵循它們所施加的規則幾乎不可能在設計中犯錯誤??偟膩碚f,這些運動強調版式,無襯線字體(Helvetica于1957年在包豪斯舞臺上創建),幾何形狀,簡單的線條,體積和顏色。
01. 瑞士海報01(版式方面)由 Mehman Mammedov 02. 黃視VOL.3通過 維奧萊納齊名
4.8大的不間斷彩色空間
大型,不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用,可以在圖形設計,產品設計以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌內容由 約翰Vernizzi 03. Kekkil?-BVB的 Kurppa Hosk
4.9超極簡主義
極簡主義的設計僅使用必需品,非常有限的調色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素,使所有設計項目都有目的。要創建超極簡主義的設計,您需要使用盡可能多的白色/負空間,簡單的配色方案和一些基本的幾何形狀。
01. Heim雜志,第3頁, Sasha Yaguza撰寫 02. Andrei Gheorghe- DADA-通過 moodley品牌標識發布
5.基于技術的趨勢
技術通過智能設備和嶄新的理念正在徹底改變我們的生活。這些新技術使設計師已經開發出進入當前趨勢的新功能。人工智能,機器學習,虛擬現實和增強現實正在影響設計師的思維方式和創作方式。
5.1增強現實的移動應用
隨著蘋果和谷歌推出自己的AR開發平臺ARKit和ARCore,很明顯,整個世界將面向增強現實技術。
許多大品牌已經在其應用程序中采用了這項技術,而那些尚未采用這種技術的公司必須認真考慮如何使用戶在這種新現實中與之交互。
有一些AR交互可用于創建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環境相關聯時。最常用的互動方式之一
是當UI與對象相關并通過掃描特定項目觸發時。該動作將數字動畫連接到特殊的“標記”。
有關更具體的AI規則,請閱讀Apple指南,以提供“將真實的虛擬對象與現實世界無縫融合的沉浸式,引人入勝的體驗”。
5.2 AI,ML,聊天機器人和虛擬助手
聊天機器人是一種 通過聽覺或文本方法 進行 對話的 軟件。[1] 此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為,盡管截至2019年,它們仍遠遠不能通過 圖靈測試。[2] 資料來源:維基百科
人們還不習慣與AI對話,因此設計師(和開發人員)的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統可以做什么以及如何使用它。
使用AIML(人工智能標記語言)設計和編寫腳本聊天機器人,是出色的UX設計人員的魔力可以發揮作用的地方。
大多數使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。
5.3 VR
大多數人將VR與游戲行業聯系在一起是有充分理由的,但是隨著所有大型科技公司開發VR套件和應用程序,我們可以肯定地說,我們將發現使用和享受這項技術的新方法。VR已經用于教育,醫療保健,旅游,房地產或建筑。
5.4語音用戶界面(VUI)
語音用戶界面(VUI)使用語音識別 來理解語音命令和問題,通常是文本到語音以播放答復,從而 使語音與計算機的人機交互成為可能 。語音命令設備(VCD)是受語音用戶界面控制的設備。資料來源:維基百科
去年,使用互聯網連接的設備的人中有40%每月至少使用一次語音助手,與去年相比,這一數字增加了10%。
6.產品設計
6.1包裝中的圖案
在過飽和的包裝市場中,很難創造出可以脫穎而出的新產品,因此設計師要回到根源并創造出使產品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產品包裝的大膽選擇。
01. 飛行山羊咖啡由 妮可LaFave 02. VITA SPA皮膚 由 DWYW 03. 巧克力包裝設計由 算術 04. 100手繪無縫的圖案和形狀 的 Arseny Samolevsky
6.2包裝插圖
插圖一直是包裝設計中的重要元素。通過他們,我們可以講述一個故事,使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經存在了數十年,并且很可能會一直處于流行趨勢。
01. 布里格斯原件由 熙宰金 02 天鵝絨咖啡杯 由 安東Malishev, 呵呵卡羅拉 03. 廢物不包括廚房-品牌打造的 嘗試和真正的DESIG ň04 家,甜蜜的壽司兒童 通過 精明的機構, 馬里亞納星火 05. Cerveza塔Maleante通過 Antonay
6.3留白
極簡主義是設計的基本原則,而今天它又是新事物。它放棄了設計中不需要的所有內容,并用負空間代替了它。這種趨勢將功能帶到了最前沿,并專注于簡潔的設計,使版式脫穎而出。
01. 香味精油 由Y u型簡林, 黃惡嗯-祥 , 智泰蓮 02. 重塑品牌理念,為BodriPincészet由 克里斯托夫Gáthi
6.4單色和兩種顏色
首先,在調色板中僅使用1或2個色調似乎有些限制,但它們可以創建非常強烈的視覺識別感。僅使用一種或兩種顏色,就可以保持簡約的外觀,放棄所有多余的東西。結果是精美,高雅的產品令人賞心悅目。
01. Zerbet冰糕由 才林賈爾斯 02. 貝利啤酒 由 埃德大廳 悉尼, 葉卡捷琳娜Leontyeva , 波阿斯孫
6.5大膽的顏色
大膽的顏色和漸變仍然是非常強烈的趨勢,這種趨勢將在2020年持續。使用這些顏色,您可以創建令人難忘的產品。
01. 極簡主義和享樂主義:Fabula Branding 重新設計了 千年品牌
02 紋身商城 通過 Openmint工作室, 葉卡捷琳娜Teterkino , 煙, 葉戈爾Kumachov
03. Organic by Larissa Kendrik 和 加布里埃爾· 沙茨曼
04. VIZOU -老花眼鏡 的 工作室開頭語, 阿克塞爾杜馬克
05. 包裝的調味開心果由 米拉Katagarova
6.6注意細節(受新藝術風格啟發)
注重細節的包裝比以往任何時候都更受歡迎。設計師選擇這種趨勢是因為它賦予了產品真實性。這種趨勢使我們以現代方式思考經典。
01. HYWILDE由 查德·邁克爾·工作室 02 AMSTEL KARGO IPA通過 卡帕羅設計船員
03. 大島咖啡烘焙-咖啡咬傷的 農場設計
6.7包裝中的講故事
到2020年,品牌將不得不重新考慮其產品和包裝。品牌必須講述一個故事,以幫助客戶體驗產品的本質。這可以通過為包裝創建視覺和敘述身份來實現。
01. 喙接通過 骨干品牌推廣 02. Colorea用t 骨干品牌
7.版式
7.1粗體印刷
粗體印刷術是設計中的重要趨勢,它取代了圖像作為主要元素。勇敢的排版可以在網頁設計和圖形設計中發揮作用。
01. 埃里克·林格(Eirik Lyng),作者: 埃里克· 赫斯特雷(ErikHerrstr?m); 02. 包豪斯(Bauhaus_100)(x3),作者: BunkerType(JesúsMorentin)
03. UCCA當代藝術中心北京由 布魯斯·莫設計(BMD) ,耶勒馬雷夏爾
7.2小寫
越來越多的應用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡約和現代的設計中。在明年,我們絕對必須關注這一趨勢。
01. Autea品牌和網頁設計由 米哈爾Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定義字體
盡管自定義字體沒有什么新意,但我們將看到這種趨勢越來越多地出現在設計中,尤其是在徽標和海報中。這種做法在大品牌中更常見,因為生產專用字體可能會非常昂貴,但是設計人員可以對現有字體進行少量調整,結果可能會非常獨特。
01. Think8全球研究院通過 勃洛克設計 02 ZINEZ?//設計周期由 芭芭拉·卡托納 , 媒體與設計系埃格爾 03. 式設計'19通過 TRüF創意 04. Cako字體由 維奧萊納齊名
7.4動力學排版
就像我們說的那樣,動畫在設計中無處不在,因此在排版中也很常見。動態字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術可以處理文本并創建最終產品,該產品保留在查看器的內存中。
01和02. Grafika , Gimmick Studio設計 。03&04. 增強現實與動作排版,作者: Alex Slobzheninov
7.5堆疊字體
堆疊文本可能是一種現代化的解決方案,可以吸引您注意基本信息。我們可以在網頁設計,應用程序設計和圖形設計中看到這種趨勢。
01. L'嗡通過 Atipus巴塞羅那 02 期刊由 杰瑪馬奧尼 03. 海報收藏| VOL.8由 羅馬發表 04. SMLXL由 梅麗莎Baillache, 墊新郎, 杰森·利特爾
8.趨勢工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 開發的 用于移動和Web的媒體創建應用程序的集成套件 。[1] 它包含三個獨立的設計應用程序: Spark Page, Spark Post和 Spark Video。(來源:WIkipedia)
他的免費Adobe Spark Web應用程序可與Spark Page,Spark Post和Spark Video iOS移動應用程序同步 ,從而使用戶可以從任何設備創建,編輯和共享其視覺故事。
[3] 這三個設計應用程序允許用戶創建和設計可用于企業,教育,社交媒體營銷人員等的視覺內容。[4] Spark Gallery突出顯示了使用該應用程序的人們所做的不同項目。使用這三個應用程序時,用戶可以導入圖片或搜索圖片。
8.2繁殖
Procreate是 由Savage Interactive針對iOS開發和發布的 用于 數字繪畫的 光柵圖形編輯器 應用程序。針對iPad的藝術可能性而設計 ,并且適合從初學者到專業人士的藝術家。
它提供130多種逼真的畫筆,多層, 混合模式, 蒙版, 過程視頻的4K分辨率導出 , 自動保存以及許多其他經典和原始的 數字藝術 工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限 。(來源:Wikipedia)Procreate是2018年App Store上最暢銷的應用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc開發和發布的 用于 Web應用程序 和 移動應用程序的基于矢量的 用戶體驗設計工具。它適用于 macOS 和 Windows,盡管有適用于iOS 和 Android的版本 可幫助直接在移動設備上預覽工作結果。XD支持 網站線框圖,并創建簡單的交互式點擊型原型。(來源:維基百科)
作者授權
總結
每一年每一個時間段都會有新的趨勢,學會的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應,念念不忘,必有回響。共勉!
文章來源:站酷-木七翻譯整理
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
創意動畫1. 品牌加載
公眾喜歡有趣,可塑的動畫。Airbnb 和 Netfilx 將品牌 logo 動畫應用到了啟動頁和加載頁面。結合品牌特點、風格和符號,融合到產品設計中,從而提升視覺的一致性,創造富有特有性格的產品界面。
△ Netflix & Airbnb
2. 圖標動畫
微交互是建立在移動端上微妙視覺效果的小動畫,而圖標動畫是微交互其中的一種。它的目的是吸引用戶,讓用戶感覺順暢、愉悅。
最近,讓我印象深刻的一個圖標動畫是 Facebook 的新消息提醒界面,這些由產品所包含的一個個小細節,創造出了新穎而有趣的設計。
△ Facebook Website
在 UI 界面中,最常見的分隔方式是用細線對模塊進行劃分,但隨著設計重心趨向簡約,注重內容本身,傳統的分隔線方式就略顯多余。
根據格式塔親密原則,通過留白控制間距大小,可以清晰地劃分模塊層級,同時界面看起來也更加透氣、富有張力。可以看到 QQ、飛聊、Gmail、Messenger 等應用都采用了留白分隔。
△ Gmail & Messenger
1. 品牌形象插畫
一個好的插畫作品可以為產品帶來極佳的辨識度。Snapchat 的頁面用了很多情感化設計和品牌形象,包括開啟通知引導動畫、查找好友 landing page、下拉刷新頁、照片回憶等等。
從品牌的個性化設計,尋找一種基于插畫的設計語言,把產品塑造成一個高辨識度的 ID。
△ Snapchat
2. 3D插畫
隨著軟件技術的提升,3D 插畫在這幾年中大受歡迎,很多應用都使用 3D 渲染產品,如:星巴克、Keep、毒App 等等,因為它真實立體,有著更高的轉化率。
△ Starbucks by Wojciech
△ Keep & 毒
圓角代表友好、親和力,而卡片模塊化的布局更為清晰、有效、整潔。
在上周的微信改版《微信 7.0.5 發布:9個細節提升體驗》的文章中,我講到了訂閱號的推送文章去掉了標題欄的背景,卡片變得更加簡潔。另外,公眾號詳情頁由原先的列表式,改成了圓角卡片式,彈窗也由直角改成圓角。
△ Broadcasting & 微信
長期以來,圖像在視覺設計中起著至關重要的作用,而視頻能夠更直觀的吸引用戶,傳達主要的思想。
在移動端中,視頻主要用于登錄頁背景,一般可以是幾秒鐘的循環剪輯視頻,它可以帶來一種身臨其境的體驗感受。
△ Lyft & Nike
Toast 是一種輕量級的提示,作為用戶操作后的反饋。UI 形態上從居中浮層,慢慢趨向于底部通欄樣式。這樣設計的好處是不會擋住當前界面的內容。
舉一個反例,iOS 的調整音量提示,大范圍的遮住了界面,特別是對正在玩游戲的用戶非常不友好,直到 iOS 13 這個設計才被修改。
△ Google Earth & Spotify
隨著扁平化設計和 Material Design 進一步占據主流趨勢,簡約的界面,明亮,大膽的色彩一直都處于增長趨勢。色彩平鋪已經成為清新、酷炫、數字時代的代名詞。
△ Snapchat & Spotify
重內容、輕 UI,把注意力引導在重要內容和功能上。像 Facebook、Instagram 這種以圖片社交為主的 App 都有一個特點,就是文字都是黑白灰,將彩色交給圖片去傳達,讓用戶關注內容即可。
△ Facebook for Android
增強現實的技術,已經出現在很多 Web、App 等領域中。許多平臺開發者也將增強現實技術納入其開發工具里面,可預期到這種類型的 App 將會越來越多。
1. 地圖導視界面
地圖+AR,讓你不再盯著二維平面上那個藍色的點,而是現實世界中的箭頭告訴你在哪個路口轉向。
△ Google Map
2. 表情貼紙
Instagram、Snapchat、Messenger 等平臺可用 AR 濾鏡來創作,表情貼紙可以幫助用戶更直白有效地自我表達、獲取注意力。
△ Spark AR
隨著 5G、車聯網、人工智能、自動駕駛的發展,車載界面也越來越受重視了。
在今年的 Google I/O 開發者大會上,針對車載系統 Android Auto,推出了新的設計語言,它有著更好的可拓展性。在 UI 上,完全重新設計了導航欄,能夠更輕松地訪問應用、通知,和你的 Google 智能助理,最大限度的幫助駕駛者減少分心,將注意力集中在道路上。
△ Android Auto UI
此外,還開發了新的系統小部件,在使用地圖進行導航時,仍然可以一鍵控制音樂應用,或者正在進行的電話,同時在屏幕上保持地圖的完整視圖。
UI 設計的趨勢除了側重內容和情感之外,還會根據不同設備載體、新的技術(3D、AR)而變化。但歸根結底還是以人為本,借用 Adobe 設計副總裁 Jamie Myrold 的一句話:如今設計師要思考的,絕不僅僅是設計一款 App、網站或設計工具。我們要思考的是人類的需求,用戶的需求,打造真正人性化,多元化與包容性的設計。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
抽象圖形拼接
坦白說,這些抽象的 LOGO 設計讓我立刻想起了JK·羅琳和她書中的魔法符號。如果這些Logo背后都有著獨特而富有力量的故事,那么它們確實可以很好地服務于品牌。這樣的了 LOGO 設計應當在筆觸上保持一致,并且充滿意義,我覺得如果能傳遞出這樣的信息,它就很優秀了。
利落清晰的筆觸,完美的角度和弧線,這樣精準的設計會給人帶來可靠的感知。當然,這些Logo 的應用場景同樣有著嚴格的環境要求,設計師幾乎沒有異想天開的余地。這些 Logo 看上去相當正式,有著明顯的高級感。
借助負空間來傳遞信息一直一種巧妙的 LOGO 設計技巧,它就像缺少關鍵證據的犯罪現場,墻上的洞,它并不是借助現有存在的因素來告訴你信息,而是通過一個「不在場的關鍵元素」,來傳遞重要信息。負空間就是這樣,它同樣也是一塊畫布,只不過給人的感覺是通過畫布的背面來呈現信息和故事。
負空間并不是為了隱藏信息而存在,就像聯邦快遞 (FedEx) Logo中隱藏的箭頭,或是 Toblerone 巧克力 Logo 中山腰上的熊。這些元素都不是為了隱藏信息,而是為了通過這種不完整來傳遞更多的信息。通過正空間來凸顯負空間就是關鍵的技巧,正如 Reinhard Ernst 博物館的 Logo 所示,中間開放的矩形區塊如同畫框,似乎可以代表博物館的任何一件藏品,這也是一種「less is more」的設計。
很多做 Logo 的設計師都曾經歷無法控制的時刻,發呆失神應該也經常會發生。如果你是在紙上畫草圖,筆尖無意識地滑動,或者墨水洇出,都會產生有趣的筆觸痕跡。我知道這不是電腦上繪圖的方式,但它確實幫助我描繪出這種視覺設計的特征。將筆尖繪制成一個完美的圓,而筆尖后則是留下托拽的痕跡,在筆痕結束的位置,自然留下的也是一個圓弧邊緣。
不管這些 Logo 的布局特征是怎樣的,它們都呈現了類似視覺特征。小圓點和托拽痕跡構成了它主要的「筆觸」,它們而生動地拼出字母,繪制出路徑,或者勾畫出有意義的符號。我想你已經捕捉到了它們的特征了——活力四射,生動新鮮的筆觸路徑。
在logo設計中廣泛使用漸變色,是整個行業在過去十年中經歷的最兩極分化的趨勢之一。仍有很多設計師抵觸過渡色,因為從LOGO設計的角度上來說,漸變色違背了很多規則,而這些規則是在數字時代之前就已經存在了。不過,LOGO 設計師們總能想出好辦法,比如間隔漸變式的設計。
將均勻漸進的色彩變化用連續的純色片段來替代,同樣呈現出色彩的變化和韻律感,但是消解了漸變色在 LOGO 展示過程中潛在各種問題。上面案例中,Qwant 的 logo 就是通過輪廓化的顏色分割來實現這一點,它真實地模擬了漸變的效果,所呈現出的效果比CPA Ireland 要好,CPA Ireland 則使用了的四等分幾何分割加上色階轉換。總體上來說,間隔漸變的色彩使用技巧,很好地在當下的流行趨勢和 LOGO 設計訴求之間找到了平衡點,值得嘗試。
使用線條來勾勒和描摹事物,傳達信息,是一項古老而傳統的技藝。在時下的審美體系當中,使用輪廓線條來繪制 LOGO 似乎顯得太過于老派,不夠現代。不過技術總歸是服務于表達的,依然有設計師能夠充分的利用這一技術——加入透視,不再局限于二維,而是開始描繪三維的對象。
這一的設計看起來和如今的線性圖標的繪制方式在技法上保持了延續性,但是它在維度呈現上更加深入,更加具有表現力和形式感。通過富有規律性的利落的線條,設計師不用太多的線條就能勾勒出立體而抓人眼球的LOGO。這種設計要求設計具備更強大更精準的描摹能力。你可以延續這種思路到整個設計當中,這會使得整個品牌化設計思路更加開闊、有趣。
在 LOGO 設計當中,使用句點這樣的標點符號,通常都會借用它身處標點符號中的含義和功能。當我仔細琢磨這一趨勢時,發現這些類似句點的符號有時像句號,有時則偏向冒號,它們在LOGO中總帶著一些奇特的意味。如你所見,這些原點在更多的時候,它更接近于句號,充當收尾和封頂的終止符。
有的時候,它的裝飾性更強,以不同的形式漂浮在文本和符號周圍。如果你要深究這些 LOGO 設計本身的含義會發現,這個小圓點可能是字母 i 上的那個小圓點簡略之后的殘留痕跡。這個小圓點,在如今的很多 LOGO 中已經超出了裝飾性的范疇,基于不同的需求和設計出發點,它可能意味著時間,可能代表著字母,承載著特定的詞匯和含義,可能是感嘆號或者句號,表達情緒或者終止。設計師將內容抽象成幾何圖形,承載意義,提升了對話的智慧。
在傳遞放飛、飛翔、展望、自由、遠見、輕盈、速度等含義的時候,很多設計師都會借用翅膀的意象。這也是為什么越來越多的地方會看到被提煉和抽象出來的翅膀和羽毛的符號或者圖形,某種意義上,翅膀已經遠超出了它本身的意味。這些被設計得形制不一的翅膀類的圖形,有著冥想的前傾或者后掠的姿態,仿佛在對抗變幻莫測的大風,借助空氣動力學向上飛起。
很多翅膀元素形制類似于字母 U,只不過兩只翅膀在傾斜角度、弧度和長短上,進行了比較深入的調整。之后,再對 Logo 進行弧度和細節進行修飾,這樣就完成了。如同我們上面所在展示的幾個案例,設計師經過很快的迭代就可以完成這樣的設計。與此同時,在具體的設計過程中,設計師還會引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了雙翼的意象。蘋果有翅膀,烏龜也可以有翅膀。我們可以用翅膀填補空白。
門其實我們常常會引申出「打開新世界大門」的概念,它在實際設計中會帶有通道、時間、新世界,甚至一種全新心境和意境的概念。很多品牌 LOGO 都想借助這個意象來承載更高遠的含義,微軟就是一個典型。門和窗本身一直都是一組象征性極強的元素。門象征著通行的權利,解決方案的途徑,機會,甚至歡迎的含義,某種意義上它們和眼睛在含義和隱喻上是共通的。這也是很多設計師在設計 LOGO 的時候青睞這一意象的原因所在。
2019年的LOGO趨勢報告,是我們的第17份 LOGO趨勢報告。每年的趨勢報告都是從成千上萬的 Logo 中,尋找新趨勢和細微微妙的差別。我們承認,每一個設計案例都代表著來自世界各地的設計師們的思考和心血,我們對他們表示敬畏,并感謝他們不遺余力地幫助我們完成這份報告。感謝所有在過去、現在和未來幾年為潮流報告做出貢獻的設計師們。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
在UI行業里面,設計趨勢是更新非常快的,它能夠更好的指導我們的設計方向,包括一些設計手法,都在不斷地發生變化。作為一個UI設計師,需要更多的了解設計趨勢。所以今天MICU哥將與大家分享2019年UI和UX設計趨勢,希望給大家帶來一些幫助。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
現在,當你打開 Instagram、Airbnb、Apple Music、Twitter、Dropbox 這些應用的時候,乍一看很難區分清楚彼此的區別:帶有圓潤邊緣、現代感極強的非襯線字體大標題,極簡的黑白色調為主的界面,大量的留白,少量的提亮色甚至沒有提亮色。
這種現代的界面設計風格,乍一看很簡陋。而具有諷刺意味的地方在于,它們出自于最大的公司,是也是受眾最廣的產品,在視覺觀感上,讓人覺得幾乎沒有被設計過。
Instagram 的深藍的頁頭怎么變了?Lyft 中經典的亮粉色元素怎么不見了?這些有著深厚底蘊的品牌是否已經放棄了標識性的設計?又或者是它們開始共享相同的模板了?
問題在于,這不止是 Instagram 和 Lyft 這樣了,有跡象表明,Google 這樣的大廠也有類似的傾向。比如Gmail 中標志性的紅色大幅度減少,白色的背景,白色的交互按鈕,白色的輸入框,其他的Ui控件都很精準到位地保持了這種簡約而一致的風格。
身在硅谷的大型企業,互相之間的借鑒學習是常有的事兒,但是至少保持了足夠的差異化。但是現在的局面則不同,這種高度趨同的趨勢,讓整個事情看起來非常反直覺。
到底是怎么回事?
好吧,我們認為產品設計的一致性是好事情,這里有幾個值得注意的原因。
讓用戶更加關注內容和結果
對于大量APP 的視覺和信息疲勞是誰都無法忽略的真實存在,絕大多數人已經厭倦了在太多應用之間來回切換,每一次下載新的應用都要花費大量的時間來重新了解界面的設計
調研表明,超過四分之一的應用,在首次下載之后,用戶只用過一次就卸載了。絕大多數人日常使用的APP 其實是非常固定的,它們中絕大部分,核心在于幫助人們節省時間和金錢(或者兼而有之),讓生活更輕松。
對,讓生活更輕松。而這需要數字產品具備良好的一致性,而設計師也越來越多地將注意力投注在這一個點上。
正如同我們熟知的UX設計專家唐納德·諾曼所說的:「很多用戶界面所存在的真正的問題,在于它僅僅只是用戶界面。很多用戶界面的設計阻礙了功能。我想努力達成某個目標,而不是將精力耗費在界面上。」
更一致意味著更好的可用性
所有的電商網站基本上都遵循著類似的交互邏輯和視覺元素,你不會搞錯購物車的圖標,也不會錯過任何環節。這些約定俗成的慣例,意味著用戶不再需要重新學習在某個新的平臺上購物,降低學習成本。
絕大多數約定俗成的規則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。
以 Snapchat 為例,今年早些時候曾經發布過一個版本,其中包含有一些比較有爭議的設計。這個版本當中,被重新修改過的導航和幾乎隨意堆砌的功能模塊,讓用戶活躍度幾乎立刻下降了73%,甚至直接導致了用戶流失和股票下跌。
正如同 Snapchat 所證明的那樣,新穎的設計是有風險的。一致的設計,確實有一定的機率降低用戶在面對新興事物時候的不安感。
設計不應止步于視覺
明白用戶的需求和意圖,在不斷探索解決方案的過程中,才能真正創造出偉大的用戶體驗。相比于獨特的外觀,差異化的體驗是更有價值的。
當然,樣式和風格很重要,它們也確實會影響到體驗,當人們感知到有視覺吸引力的設計的時候,即使有一些混亂和無效的設計,也是可以忍受的。
但是設計師的精力是有限的,用戶的也是如此,相比于在色彩和花哨的動畫上反復嘗試,幫助用戶找到更好完成任務的方式,無疑更有價值。設計好的產品,最終能夠給用戶帶來價值的東西,是需要看似無限的測試和迭代,來向著可用和易用的產品更進一步。
奧巴馬、喬布斯和扎克伯格每天穿著相同的衣服,他們的衣服和這種行為同樣出名。心理學家將這種現象稱之為「決策疲勞」,它們每天需要用有限的能量來做大量的決定,而為了給更重要的事情留下足夠的精力,他們穿相對固定的衣服,就可以省心很多。
設計師面對的是同樣的局面。隨著界面設計的趨同化,設計師可以花費更少的時間來決定用什么色彩,而可以將更多的精力投注在更為深入的設計當中,比如更有效的布局,反思為什么要這樣設計,等等。
趨同的設計是否會扼殺創造力
我想你一定在思考這種設計趨勢之下的缺點,比如這樣的設計是否會顯得缺乏創新,甚至會扼殺創造力。老實說,我覺得這樣的影響是存在的。
但是,即使每個產品設計師都參與到極簡主義設計的運動當中來,仍然有大量的設計工作有待完成,設計的范疇太廣泛了,需要設計的東西遠超用戶界面本身。
事實上,界面中的趨同化在近期看來是頗為有益的,對于長期的影響也是非常巨大的。
首先,最重要的一點,VR、AR 和人工智能的逐漸普及,用戶和數字設備之間的互動可能會變得更加隱形,小屏幕同樣在普及,手勢操作將會成為最基本的交互語言,我們將會越來越多地參與到無屏幕的交互當中去。
即使我們在iPhone 上,人工智能加持下的 Siri 越來越好用,越來越多的用戶開始習慣使用類似的語音助手來創建待辦事項,選擇音樂,發送消息,查看天氣,簡單的功能它們已經可以很好地完成了,復雜的功能和需求也會通過機器學習逐步習慣、越做越好。
在諸如人工智能、機器學習這樣相對高深的概念背后,是軟硬件正在更好地幫助人類完成任務,做對事情。設計師的角色需要更進一步,更深入地參與到產品當中。
如果設計師要改進 Siri 的設計,那么要做的工作遠不止設計界面,已經有很多相關領域的專家討論過這個問題了,設計師所需要了解、掌控的維度越來越多,設計正在變得更加深入和復雜。更通俗的講,設計師需要考慮新的方式,更加富有創造力的策略來吸引用戶的注意力,甚至要深入到情感和感知當中去,而不是單純的視覺。
如果我們僅僅將優秀的設計局限于我們在屏幕上看到的內容,未來更多的可能性,可能就止步于此了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn