2020年已經過去一大半,這些時間以來,我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集,到今8月份了,我想是時候將發現的一些趨勢風格分享出來,這些風格很有可能繼續延續到2021的產品設計上。
對于UI界面視覺趨勢,同樣需要我們高度重視。畢竟每年改版方向,視覺風格研究是必不可少的一個環節,下面正式開始。
今年在各網站上看到大面積的漸變色設計,相對前兩年來說越來越少,設計上有所克制。大面積的漸變色雖然視覺沖擊力強,但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制,將漸變色彩運用到關鍵功能上,突出強調重要信息。
機票選購界面,將漸變色運用到頭部位置去強調功能。
運用在功能卡片上,突出重點信息。
如上圖,設計上同樣只將漸變色運用在背景上,其他卡片上基本沒有漸變色。
幾何圖形設計是目前運用最多一個設計手法,今年發現一些比較抽象藝術化包豪斯風格幾何圖形,在UI設計中大量運用,且效果還不錯。
這種圖形帶來好處就是記憶性強,應用廣,它不僅可以拓展在品牌包裝,品牌圖形延展,還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形,來表達功能的設計,形成記憶點。
品牌設計上,也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取,進行包豪斯風格化,重復運用在設計中。
今年這樣的設計屢見不鮮,大量3D運用在界面設計中,二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合,形成一種全新的視覺感官。
uber的概念官網就通過3D來呈現,表達功能亮點。
將二維世界三維化,將是2021年重要的趨勢。目前國內外線上有一些產品,開始在部分功能模塊使用這樣設計手法,如Naver,支付寶等。
可以說是趨勢輪回,毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明,用在視覺強調的地方。
如上圖設計,毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用,還可以對功能信息進行強調。
毛玻璃效果運用在個人中心,人物頭像位置,進行設計強調。
運用毛玻璃去包裝UI界面,可以提升品質感與神秘感。
將功能與場景融合設計,用戶在使用產品過程中,能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上,這樣設計出現次數越來越多,設計效果沖擊力強,得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現實設計手法,將人物與酒店場景進行排版布局。
將制作材料與產品集合。
擬真植物元素與土地進行巧妙集合,在視覺上傳達逼真效果。
雜志化設計風格鮮明,可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束,排版使用大字體,同時設計排版上更加個性。我們在做產品概念探索前期,可以多去嘗試這樣的風格。
擬物圖標又回來了,Apple新版本的Big Sur系統,就采用擬態圖標,這也是一個新的嘗試,當然也是一個開始。我們很有必要時刻關注這個趨勢,未來將會在更多設計中看到擬物化圖標的出現。
不過這種風格也不能大面積運用在界面中,我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用,相對之前扁平化設計,目前具有空間的擬物化設計,增加了真實感。
圓形趨勢,我想大家也許會忽略的點,最近幾年設計中,圓形的設計無處不在。它的好處不言而喻,親和力強、場景覆蓋廣,幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計,采用圓形與產品進行集合設計排版。
新擬態趨勢是2020年受到廣泛關注的趨勢之一,這種趨勢大量使用了柔和的陰影和微弱漸變,使設計既具有未來感又具有現實感,并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言,目前新的簡化擬態界面,會克制使用這些元素。
2021年擬態界面,更注重功能與體驗。擬態效果會使用在關鍵功能上,如儀表、按鈕,又或者需要重點強調的地方,避免了大面積使用這種設計手法。
2021年的趨勢相對來說,有繼續延續2020年一些設計風格,這些風格將會在繼續加強,同時我們也有發現,目前越來越多3D元素與二維界面進行集合設計,能更生動傳達功能與將故事,2021年大家務必要注意這種趨勢的延續。
作為設計師,我們對設計的思考不能只停留在表象層面,而更多的需要圍繞信息傳達這一設計的本質功能,以充滿自省的精神深化和反思自己的設計意識,同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中,以產生最大化收益。
文章來源:優設 作者:功夫UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀:隨著醫療行業與互聯網的聯系日益緊密,醫療行業對產品經理的需求也越來越迫切。在這個特殊行業中,醫療產品經理需要具備哪些能力,應該如何工作,創造哪些價值?本文圍繞醫療產品經理展開,從七個方面展開介紹分析,希望對你有幫助。
越來越多的醫療機構開始考慮設置醫療產品經理這個崗位,但是對于產品經理具體應該做什么工作,可能產生何等價值,以及如何招聘到合適的人才,和這個角色在組織內部如何開展工作,都有很多的困惑。今天我們就簡單聊聊這個話題。
總的來說醫療產品經理還是個非常新,甚至可以說有一些超前的職能,傳統FMCG和互聯網行業的產品經理對應的工作內容和思考方式并不能簡單照搬過來使用。我們需要清空過去在這些行業積累的認知,從醫療經營的原點出發,從下面7個方面思考:
產品經理就是足球場上的中場大將,起到承上啟下,功放轉換的樞紐,具體說有三大作用:
什么是進攻?進攻就是嘗試主動去占據一塊領地。
對營利性醫療機構來說最常見的情況有4種:
那么,又何謂防守呢?簡單來說,就是對應上述各種進攻的應對。
十年前私立醫院還不算很多,也還沒有那么多連鎖診所品牌的時候,事實上大家主要都在忙著跑馬圈地,短兵相接的攻防其實并不多?,F在隨著市場參與者的倍增,慢慢開始出現了小區域內的半正面PK,并且我預計在未來兩年內可能會出現直接內部指名道姓對標的戰斗。
足球場上的三條線是進攻、防守和中場,這里我們所說的三條線,大體對應的是:市場營銷、醫療質量和行政職能三大板塊。產品經理的重要價值就是能夠打通這三條線的隔閡,把整個醫院的資源凝結成有效的市場成果。
醫療產品不等于,不等于,不等于“打包套餐”!這個概念請務必建立起來。
首先要厘定什么是醫療產品。
可以用“三個明確”來界定之:
醫療產品開發的邏輯的源頭就在于評估一種醫療服務是否吻合這三個明確,因此不是所有的醫療服務都可能變成“產品”。
比如我們醫院口腔科有一個非常棒的醫生,專注于牙齒美容,我們稱之為“微笑設計”。這種設計是完全量體裁衣的,我們市場團隊對他的關注點就主要在故事性的傳播,而不是試圖將這種高度個性化、動態化的醫療行為產品化。
簡單來說,對于符合三個明確的醫療服務,我們對其進行產品化的“化”,是一系列有序的動作:
囿于篇幅,這里我們就不展開詳述了。
理想中的醫療產品經理對下面4件事情負責:
很容易看出來,這4種不同的職責恰好也就對應了攻防轉換的價值所在。其中促銷是一個容易被忽視和輕視的事情,“不就是打折然后發個微信(十年前是發短信)推文嘛”——絕對不是這樣,促銷是一門大學問,打折、捆綁、買贈、兌獎、積分凡此種種。不僅花樣很多,更重要的是背后的深層次的思考,是“為什么”。
另外,目前的醫療機構基本上也沒有人比較認真、成體系地做競品追蹤。這樣會失去潛在市場機會,非??上?。
我認為一名出色的醫療產品經理應該在下面四個方面都具備一定的能力,沒有特別的短板:
特別就同理心和表達能力簡單闡述。同理心,即換位思考,用現在更流行的話說,是場景意識。能否準確地設置出用戶的場景,體會到用戶的感受,會直接決定產品帶給客戶的體驗,進而一系列結果:定價、毛利、傳播ROI、客戶口碑,口碑帶來的新客增長,等等不一而足。
而表達能力則是決定這個產品經理是否能實現“串聯三條線”價值的決定性因素。醫院是一個觀念高度保守,流程高度復雜的行業,很多人雄心勃勃地進來,最終死在“搞不定那些人”上。因此,優秀的表達能力,包括書面和口頭表達能力,是遴選醫療產品經理必須考量的重要因素之一。
我不是危言聳聽:產品經理幾乎要和醫院里所有部門打交道。
常見的如下面這些:
醫療、護理和財務對于產品工作的重要性相信無需贅言。后面幾個呢?
試想,你精心設計的賣點,是你自己拉著每一個潛在客戶去吆喝么?當然不是,客服要幫你介紹,新媒體要幫你寫文章、畫插圖。他們是不是要吃透你的意思?如果涉及填表、兌獎,要不要和客服商量流程?遇到產品的技術較為復雜,需要不需要策劃一些活動幫助客戶直觀理解其價值?最后,當潛在用戶感興趣而打電話給呼叫中心的時候,接線員是否已經被你提前武裝好,能充分回答各種提問了?
至于獨立的數據部門,是我的一個強力推薦。傳統上由財務和病案提供的數據,更多聚焦于“既往”而很少關注“開來”。如果不由同時懂得醫療業務和有商業經驗的數據部門處理,很難直接推動運營的改善和提升。
很多人問我,產品經理屬于市場營銷部門嗎?難道不是屬于運營部,或者醫療企劃之類的部門嗎?
別忘了,市場營銷最基本的范式——4P中第一個P就是產品,Product。只要你所在的醫療機構設置有相對完整的市場部門,就應該在其中設置產品經理崗位?;蛘叻催^來說,如果你準備建制產品經理崗位,從一開始就應該將其設置在市場部內,并從頭開始考慮這個職位所需要的上下游角色和他們之間的銜接。
如前面所分析的,產品經理的后端,一定要有提供數據支持的部門,前端一定要有專業的傳播團隊,這樣才能實現產品的潛力。橫向上,產品經理和他的上級,一定要高度重視與客戶服務團隊的緊密合作。
老實說,現在幾乎沒有多少現成的、成熟的醫療產品經理。因為營利性醫療行業太新了,而產品經理這個崗位在這個行業又是近一兩年剛剛興起的角色。
從招聘角度來說,我建議不要拘泥于候選人必須有醫療背景。我就沒念過醫學院,十一年前入行,就這樣摸著石頭過河,也多多少少做過一些還不錯的產品,有過幾個“爆款”的心得。相對來說,我更看重候選人是否有完整的商業思考邏輯能力。
換一個角度來說,還可以在醫院內部挖掘有潛力的人才,從臨床部門轉型為產品經理。最關鍵的環節在于這個人是否有足夠強烈的興趣。世上無難事只怕有心人,有醫學院背景的人才,只要對產品工作發自內心感興趣,就有很大的轉型成功概率。
文章來源:人人都是產品經理 作者:易亮
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
世界和技術正在飛速發展,每年都會影響設計趨勢的走向。作為設計師,我們需要了解現有和即將到來的設計趨勢,不斷學習,改進和擴大我們的知識儲備,以便與時俱進。
根據研究、經驗和觀察,我們非常仔細地選擇了2020年應該注意的8種UI / UX設計趨勢。那就讓我們開始吧~
通過對插圖,或者讓插圖進行運動,可以使我們的設計脫穎而出,并使其栩栩如生-增加額外的細節和個性。
微交互完美證明了:著重于細節和發揚這些細節可能會大大改善你的APP的用戶體驗,并將使之更高能/更。
新的Web瀏覽器功能為3D圖形打開了大門,作為設計師可以在現代Web和移動界面中創造和實現驚人的3D圖形。
游戲行業常將創新、和新技術帶入產品設計中。
在AR空間中,有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一,因此,作為設計師,我們應該做好準備,并主動在創建AR體驗時學習新的工具和原理。
VR / AR技術的增長,以及最流行的設計平臺上顯示的那些優秀的設計告訴我們:設計趨勢可能會使擬物設計在2020年卷土重來,但這一次,它會加入更多現代時尚。
非對稱布局有很大的創造空間,不過創建優秀的非對稱布局需要我們有一定的經驗和時間去處理它。
講故事就是以最佳的信息和創意方式將數據傳輸給用戶。講故事也是一種出色而有效的營銷工具,可以極大地提高你的產品/服務的銷售額。
插畫在產品設計中已經存在了很長時間。最近幾年的發展更是令人矚目。插畫作為非常流行的設計元素,為我們產品的整體UX添加了「自然的感覺」和「人性化的感覺」。插畫也是吸引注意力的焦點:通過對這些插畫進行動效的展示,可以使我們的產品栩栩如生,并使它們脫穎而出-增加更多的細節和個性。
歡迎來到我們的商店!
入職動畫
動效展示的另一個好處是可以吸引用戶的注意力并使用戶與您的產品互動。動畫也是講述您的品牌、產品或服務故事的最有效方法之一。
微交互幾乎存在于每個APP或網站中。每次打開喜歡的APP時,你都會看到它們。例如,Facebook有大量不同的微交互,其中「贊」功能就是一個很好的例子。雖然有時我們甚至不會特意感知到它的存在,因為它非常明顯的、自然的「融合」到用戶界面中去了。但是如果你從界面中刪除它們,你將很快意識到,某些重要的功能丟失了。
菜單切換關閉動畫
標簽欄活動動畫
一般來說,在UI / UX設計中,有時即使很小的更改也可能產生巨大的影響。微交互完美證明了細節和發揚它們可能會大大改善你的APP的整體用戶體驗,并將其置于更高能/更的層次。在每一年,每種新設備都會帶來新的創造全新的微交互的機會,當然,2020年也不例外。
3D圖形幾乎無處不在-在電影,視頻游戲,街頭廣告中。3D圖形是幾十年前才被引入到產品設計中的,從那時起,它已經得到了極大到改善,并得到了高速的發展。移動和網絡技術也在快速增長。新的Web瀏覽器功能為3D圖形打開了大門,我們作為設計師可以在現代Web和移動界面中創建和實現炫目的3D圖形。
3D翻轉菜單
汽車健康報告用戶界面
創建3D圖形并將其實現到Web和移動界面中需要一些特定的技能和大量的工作,但是通常結果是非常有意義的。
Apple AirPods Pro登陸頁面
3D圖形以一種更具交互性和吸引力的方式來展示產品或服務:例如,可以以360度演示方式查看3D圖形,從而改善了產品的用戶體驗。
在2020年,更多的品牌將使用3D模型來展示產品或服務,打通線上線下,以模擬現實世界(店內)的購物體驗。
2019年對于VR來說,是重要的一年。在過去的幾年,我們見證了VR技術的發展和其不可思議的效果,其中大部分是在游戲行業。游戲行業通常會首先在產品設計中引入創新和新技術。研究證明VR也不例外,2019年Oculus Quest推出后,其他行業也嘗試了很多可能性。Facebook首席執行官馬克·扎克伯格(Mark Zuckerberg)已經測試了令人興奮的手部交互功能,并于2020年初正式宣布了Quest的手部跟蹤更新!
Oculus Quest-手互動功能
PlayStation虛擬現實網站設計
索尼和微軟將在2020年發布其新一代游戲機。這些將為虛擬現實技術帶來很多機遇和增長空間。
過去幾年中,我們看到了AR的許多發展和改進。世界領先的科技公司在AR開發方面投入了數百萬美元,我們應該期望在2020年行業會擴展和發展此項技術。甚至蘋果公司也推出了自己的AR工具包ARKIT 3,以幫助設計人員和開發人員構建基于AR的產品。
ARKit 3 蘋果
公共交通應用
Nathan Riley的植物之家AR概念
在AR空間中,有無數令人興奮的體驗機會。AR的UI設計將成為2020年的主要趨勢之一,因此,作為設計師,我們應該做好準備,并主動在創建AR體驗時學習新的工具和原理。
一般來說,擬物設計是指以逼真的樣式/方式創建的設計元素,以匹配現實生活中的對象。VR / AR技術的增長和最流行的設計平臺(Dribbble,Behance等)上顯示的設計趨勢顯示:擬物設計可能會在2020年卷土重來,但這一次,它會加入更多現代時尚。同時有了一個略作修改的名稱:“新擬物” (也稱為Neumorphism)。
Skeuomorph手機銀行的黑暗模式
音樂播放器
睡眠周期應用程序
我們可能已經注意到:「新擬物設計」代表非常詳細和的設計風格。高光,陰影,發光都被運用在設計中去。他們對細節的關注令人非常印象深刻。這已經啟發了來自世界各地的許多設計師,并且很有可能成為2020年最大的UI設計趨勢。
在過去的幾年中,我們注意到產品設計中大量使用不對稱布局。基于 傳統/模板 的布局漸漸消失。2020年將依舊如此,因為這一趨勢將繼續保持。正確使用非對稱布局會為我們的設計增加很多特征、動態和個性,或許它們將不再拘泥于模板。
Limnia高級珠寶首飾網格
卡琳時裝商店
創建非對稱布局時、有很大的創造空間。盡管創建成功的非對稱布局需要一定的經驗和時間、將元素隨機放置在網格上當然是不行的) 此外,應謹慎使用和實現它們-因為我們要始終牢記用戶的需求:我們不希望用戶使用我們產品的時候感到困惑。
故事在產品設計中的用戶體驗中扮演著非常重要的角色。可能會在登錄頁面上經??吹剿鼈?,作為對品牌,產品或新功能的介紹。講故事就是以最佳的信息和創意方式將數據傳輸給用戶。這可以通過「版權(品牌)保護」與「強大而平衡的視覺等級」(印刷術,插圖,高質量照片,大膽的色彩,動畫和交互式元素)混合來實現。
講故事就是以最佳的信息和創意方式將數據傳輸給用戶。
「本周青年實驗室」頁面故事動畫
講故事確實有助于在品牌和用戶之間建立積極的情感和關系。講故事還可以使您的品牌更令人難忘,并使用戶覺得他們是我們產品或服務的一部分,因此他們希望與他們建立聯系。話雖如此,講故事還是一種出色而有效的營銷工具,可能會大大提高您的產品/服務的銷售額。作為非常成功的工具,講故事將在2020年繼續并擴大。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源:站酷 作者:一個辛普森
新擬物化——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 設計的未來會更加富有希望。
5G以其更快的速度、連接和云訪問,將大數據引進車內
在MWC上,華為、小米、三星等通訊企業紛紛發布了5G手機,而吉利也在2月26日的MWC上,宣布了與高通和高新興合作發布吉利全球首批支持5G和C-V2X的量產車型計劃。可見5G時代對于各大車企來說有著巨大的影響,尤其是車聯網產業。那么,在5G環境下,汽車行業究竟有什么變化呢?
5G是一代的移動網絡,憑借高帶寬和低延遲,提供了更快的速度、連接和云訪問。5G的最大速度可達到每秒20GB,比4G要快100倍。它可以應用于手機、無人駕駛、VR、電影、充電樁、醫療、農業等多個領域。而基于5G通訊技術推出的C-V2X,是實現無人駕駛和車內技術的重要前提。
萬物互聯
萬物互聯是自動駕駛汽車發展的關鍵,基于5G通訊技術推出的C-V2X能讓聯網車輛與交通基礎設施進行通信。通過5G可以實現自動駕駛汽車彼此之間所有數據的溝通與互聯。并與交通燈、道路、傳感器、停車場等基礎設施之間的信息互聯,最終實現車路協同、萬物互聯。
車車互聯提升駕駛輔助
在5G環境下的汽車,可以通過云計算來計算車與車之間的距離、車輛的下一步動作、隱藏車輛可視化、零誤差高清導航等信息。同時,也可以與其他車輛實現共享數據,提升ADAS和AEB等駕駛輔助功能,來避免車輛之間發生碰撞。
智慧交通引領場景化設計
5G環境下,大量的數據將被引入車內,來提供更準確的數據信息。如,高速收費、紅綠燈、RTTI、實時車位情況、消費支付、行人檢測等情況。眾多的交互有助于車輛更好的了解環境信息,并作出反饋,從而提供更好的場景化設計。如,自動超車、協作式避讓、自動播報前方道路擁擠程度并重新規劃路線功能等場景化設計。
再比如,哈曼正在研發的交通信號燈速度優化建議技術,幫助司機根據紅綠燈信息調整時速;西亞特測試了在交通信號燈中安裝熱像儀,以檢測行人的動作并將數據反饋給汽車。
車、商業、家居互聯改善駕駛體驗
當車輛與酒店、商場、影院、餐廳、健身房、加油站、家居、充電樁等場所相連接,就需要以5g結合C-V2X技術的部署為基準。從而根據車主的需求,更快地預定房間、訂餐、定電影票、充電樁、商場優惠等活動,實現終端之間更的通信。
比如,我們要去看電影,那么車輛會根據實時路況(是否擁堵、有幾個紅綠燈、是否有車禍)為您選擇最佳的路線方案,并通知停車場到達時間,以方便確定是否有符合您時間的停車位,從而得到及時的反饋。
車載娛樂
可以說,如今我們所說的無人駕駛、車載觸屏、全息投影、AR(增強現實)、VR游戲、AR-HUD、實時電影、車輛之間影片共享、移動辦公、多模態交互等車載信息娛樂,都是需要在5G環境下來完成的。在未來,你可以在車內利用幾秒的時間下載一部電影,也可以在車內與其他車輛之間建立網絡游戲通信,實現虛擬內容與車輛運動的實時對接。
奔馳與哈曼合作開發的MBUX信息娛樂平臺也引入了增強現實(AR)的車載導航系統。
MBUX信息AR車載導航系統
BMW Vision Next 100 AR-HUD
奧迪發布的“沉浸式車內娛樂系統”,讓乘客在車內佩戴VR眼鏡,然后車輛會根據行駛路線路況,實時匹配逼真的電競類影片。
奧迪發布的“沉浸式車內娛樂系統”
手勢交互
車載機器人
全息投影
移動辦公
安全駕駛
未來的汽車將變得更加安全和,因為5G憑借其更高的帶寬、最小的延遲和零誤差高清導航,能夠預防事故和觀察到車身周圍的各個角落。再結合C-V2X技術將極大地促進車輛之間、車輛與行人、道路基礎設施之間的信息流動和監控車輛異常情況。從而做到提前預知危險,并迅速作出響應來提高道路安全性。另外,5G對于阻止黑客攻擊和數據攔截能夠得到更快響應,從而保障通訊安全。
想象一下,如果你的車可以在1毫秒內做出反應并將反饋傳達給數百人,那么,危險系數就會降低很多。5G時代,端到端的時長為1毫秒,同時1平方公里內可同時連接100萬個網絡,足以滿足智能交通和自動駕駛的要求。
無人駕駛
5G是實現無人駕駛最為關鍵的因素,如今,5G的成功研發有助于車輛之間大量的數據傳輸和存儲,實現車聯網的同時,也保障了車輛行駛的安全性;另一方面,5G可實現數據更快速的云訪問,從而更有效地減少傳感器技術的成本,最終實現無人駕駛。
總結
5G以其更快的速度、連接和云訪問,將大數據引進車內。從而,在提升駕駛體驗的同時,實現了汽車與萬物的互聯,保障了汽車駕駛中的安全性,從而為無人駕駛汽車提供了技術支撐和更便捷和的信息娛樂系統。
5G將成為未來十年全球主導的移動通信標準;
基于5G的C-V2X技術,會加快無人駕駛技術的落地;
5G環境下的車載信息娛樂系統將改善用戶駕駛體驗,同時催生大量的市場新機會;
共享平臺下,5G將根據實時路況作出更準確的判斷,從而減少時間成本和停車成本;
5G遠不止應用于汽車、手機,它將應用于醫療、機器人、農作業、航空等更多方面;
5G技術為無人駕駛的實現提供了技術支撐和安全保障,同時也降低了安裝傳感器技術的成本;
5G實現了車與車、道路、家居、商業之間真正意義上的“車聯網”,為交通提供更準確的交通信息和通信信息;
5G將會提供更多的場景,從而加快市場社會變革和新的商機,但需要大量的資金投入,能否將技術化為盈利是一大問題;
5G以毫秒的速度,提供更精細的地圖數據和更高級的駕駛輔助,并作出快速的反饋,提高了駕駛的安全性,對于減少交通擁堵,提高交通效率和道路安全有著積極的作用。
轉自-站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
設計總是在變化。在過去一年里,我們不僅看見了五福的C4D運用,雙11的動效插畫運用,以及大量AR/VR智能的設計,還有蘋果黑暗模式的普及,新技術帶來新的體驗和解決方案。2020年,關注研究新興的用戶體驗趨勢,前段時間,在我星球里,我帶著設計師一起來研究關于2020界面設計趨勢,希望能幫助大家是設計中有所啟發。
研究背景
隨著UI/UX領域人工智能的發展,和虛擬現實等新技術的變革,從前單一的內容很難滿足用戶的訴求,用戶的訴求也變得千人前面,所以在研究趨勢之前,我基于這些關鍵詞,來分析2020的設計趨勢。
色彩趨勢
1.彩虹漸變
這兩年來,彩色漸變一直是設計趨勢,設計師將大膽的漸變,飽和度更高的漸變運用在設計中去,讓整體的色彩感覺,更加年輕化與活躍。
▲ Apple一直是這個領域的引領者,隨著當年iPhoneX的發布,彩虹的漸變色,大膽的漸變風格瞬間成為設計師筆下的弄潮兒。
▲ 這組插畫中,作者就運用了大面積的漸變,兩種顏色的運用,通過重疊,明度變化,豐富了整個設計層次。
▲ 不僅在平面設計中,在網頁設計中,也是被大量運用,SWATCH的官網,清新的漸變配合動感的模特照片,以及和產品的完全結合,讓頁面充滿著活力。
▲ 在移動端也是如此,金融產品的背景設計,銀行卡面的設計,可視化圖表的運用,都能看出大膽漸變還是很受歡迎。
2.黑暗模式
隨著google和facebook以及instagram這些知名應用都開始提供黑暗模式,國內微信也開始黑暗模式,2020黑暗模式設計,一定是需要設計師去關注的。
黑暗模式,除了在黑暗中提高內容可讀性以外,還能減少用戶疲勞,還可以節約電池,所以黑暗模式在今年將是所有應用程序必不可少的一個功能。
▲ Google的黑暗模式運用,通過一個簡單的按鈕開關就可以切換,也可以根據系統定義切換。
▲ 黑暗模式未來會成為一種標配,一個軟件設計在剛開始的時候就必須考慮進來。
▲ 關于黑暗模式,正向當年iOS扁平化剛出來的時候,國內的很多產品都還沒有準備好,但是相信過不了多久,黑暗模式一定會普及開來,所以2020大家都應該提前去了解黑暗模式的,設計規范和細節。
3.更大膽的一種顏色
▲ 除了漸變色,那么大膽的單色在設計中運用也會越來越多,整個設計就一套色彩體系貫穿,大多時候以品牌色的形式去運用,配合留白,對比明顯的字體,整體給人印象深刻。
▲ 在韓國的應用中用的比較多,它的優勢是色彩干凈,品牌整體感強,但是對設計師駕馭頁面能力也要求很高,因為大面積的單色,如果用不好就會很刺眼。
▲ Naverpay的設計,整個界面就是用的綠色漸變,清新同時也能很好和Naver品牌色進行結合。
▲ 在它的很多頁面中,很多控件這個綠色運用的很巧妙,不會給人很刺眼的感覺,所以大膽的一種顏色運用在2020頁將是設計師值得去關注的一個方向。
▲ 掃碼加入知識星球,了解更多
插畫趨勢
在過去幾年里,插畫是一種新的表達方式,越來越多的設計師,插畫師通過插畫表達產品的情緒,個人的情緒主張,那么在2020插畫的運用就得和品牌很好的融合起來,如果你的插畫是和品牌割裂的,需要注意。
1.和品牌結合
▲ wibbite的插畫,標志性歐美的風格,除了插畫本身手法比較簡約模塊,插畫中運用的色彩和內容本身也很產品定位匹配。
▲ 插畫對于品牌來說也是非常重要的一個因素,無論在界面設計,還是在品牌營銷很多場景都需要插畫去營造產品氛圍和氣質,插畫有助于將我們的品牌故事講述給聽眾聽,所以在構建一個品牌時候,插畫是非常重要的點之一,但是做之前一定要盡量多去了解我們為客戶提供的設計價值,只有了解了用戶價值,才能去定義去特色的故事,幫助產品。
▲ Uber系列插畫提供暖色,以及安全藍的運用,突出打車服務中安全的關鍵要素。
▲ Google的插畫系統也是如此,沒有很華麗的炫技,有的是對于多元文化的思考,設計場景的融合貫通。
所以不難看出,插畫的方向一定是和品牌結合的,不會為了趨勢而趨勢,一定是圍繞內容去設計。
2.3D插畫
▲ 如果說這2年,各種各樣的插畫手法百花齊放,那么隨著人們的審美變化,趨勢也從靜態變成動態,從平面變成3D,從今年的支付寶五福設計中大家應該能感覺到2020的插畫設計一定是往著3D方向,而且是動態3D方向演進的。
▲ 谷歌一組插畫,結合與大腦、團隊合作、想法、密碼箱為圖形進行創意設計,人物造型可愛好玩,凸顯年輕化潮流。
▲ Apple在中國區App Store 的一組設計,整體設計以紅色為主,運用了象征中國元素的龍、紅包、燈籠、福字、紙牌作為設計元素,整體運用3D表達,凸顯年輕和趣味性。
3.等距插畫
等距插畫這兩年已經是一個主流風格之一,在未來還會接著流行,但是等距插畫未來或許和場景聯系在更緊密,在每年天貓雙11設計中,互動城的設計每年基本都是等距插畫風格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設計,在短時間內,大型活動場景基本都離不開這個風格。
▲ 這組等距插畫場景故事感很強,建立了一個空間世界,作為網站主風格非常的吸引人。
▲ 除了這種大的場景,等距插畫,在小的場景中,作為插畫規范也是運用比較多,它風格可輕可重,隨著5G時代到來,靜態可能會逐步演進成動態插畫。
4.根據內容定制的插畫
隨著內容的升級,對內容的表達也會被越來越重視,那么如何更好的把內容更生動表達出來,插畫就是很好的一個形式,根據內容定制的插畫,在很多產品中被運用到,互聯網教育,IT等領域。所以專門針對內容去設計插畫,在今年或許是一個趨勢,插畫不再是孤零零只是為了情感化而存在。
▲ Crowdrise的產品設計,整體就是運用作為整體設計語言,風格統一,內容突出,畫面效果好。
▲ 插畫的形態終于不再是孤零零的只是用戶情感的表達,而是隨著內容的升級變化,在產品中發揮的重要性也越來越大。
3.3D黏土插畫的運用
3D設計因為今年設計師很喜歡用的樣式之一,我們將盡管3D已經存在了一段時間,但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設計趨勢,我們甚至還會看到很多藝術家在電影,插畫和廣告中結合了2D和3D風格。
▲ 在instagran的一組設計中,設計師運用這種黏土和3D的方式設計,畫面充滿了生活感和溫暖。
▲ 谷歌也在它們的項目中大量運用這種黏土風格設計,會顯得更加的現代和活潑,黏土的設計相對3D插畫區別在于更加細膩,線條上更加柔和。
字體趨勢
這幾年越來越多的公司,開始定制字體,根據自己的品牌特質去做一些獨特的字體,從國外到國內,品牌定制字體未來或許還會越來越多,對于設計師好處來說,這些品牌字體很多都是免費開放給設計師用,會形成一個很高的商業環境。
1.定制字體
▲ 錘子發布了他們的Smartisan T黑字體。
▲ 騰訊發布了定制的“騰訊字體”,相比原來傾斜的黑體字,騰訊的新字體更現代、更協調、更動感。運用起來也非常有力量感。
▲ 阿里普惠體,隨著集團業務龐大,字體使用場景多且復雜,包括各產品客戶端、營銷設計、操作系統、硬件設備、建筑空間及公關傳播等等。決定以現代為核心設計理念,以可靠、明快為設計切入點,將阿里精神融入到字體當中。最終一款擁有現代感滿足全場景黑體誕生了,而且商用免費。
▲ 除了前面的阿里,騰訊,錘子,小米OPPO,京東也都發布了自己的專屬品牌字體,所以在2020年,品牌字體或許是每個公司的一個標配了,我們拭目以待。
▲ 國外其實是最早開始為品牌定制字體的,三星手機雖然銷量消化,但是他們品牌字體:SamsungOne,設計風格,很強的現代感,而且,這個字體有不同粗細的筆畫字重,適用面很廣。
▲ IBM的字體名稱:IBM Plex Sans Text,這款字體設計比較簡潔,干凈,沒有多余的筆畫,這個字體很良心免費商用的。
2.粗體的運用
縱觀2020的一些設計,留白越來越大,邊距越留越多,字體也變的很粗,粗的字體和正文普通字體形成了明顯的對比,再加上網格的布局,讓頁面內容更加凸顯。
▲ 大字體的運用,字體就是內容,重復運用內容元素作為排版手段,對于內容組織和平面要求較高。
▲ 在UI設計中,大字體的設計也很常見,蘋果商店,蘋果官方應用都是大字體的推崇者,隨便5G的來臨,對于內容的追求也會越來越高,那么除了大字體,視覺元素減少,內容本身質量要求也越來越高。
▲ 粗的字體常用語大標題,或者頁面導航性指引作業,幫助用戶更好去理解功能本身,上面這個頁面粗的字體就是導航,告訴用戶這一頁,你需要去完成什么動作指引。
▲ 掃碼加入知識星球,了解更多
最后
設計趨勢必然與技術發展緊密結合,作為設計師我們需要了解,以及平時和我們設計進行結合,下期將帶來,2020的UI設計趨勢下部分,看看還有哪些需要我們去關注的。
轉自:ui中國-skys
分享火爆Dribbble和Ins的設計趨勢
相信最近很多小伙伴在逛Dribbble時候,發現最近流行一波新的設計風格,和以往不同的是,這次趨勢又回到之前擬物化了,但它與純擬物化還是有區別的,現在它有一個流行詞語叫“新擬態”,今天就和大家分享下國外一位設計師對這個趨勢的看法!
雖然UI以各種擬態化的形式存在(例如,您的桌面OS垃圾桶),現在這種風格的趨勢更加明顯。正如卡米爾·法拉納(Kamil Falana)指出的那樣,從無生命的“表達”到現實主義的過渡開始出現。
不久前,我們還觀察到,這種變化開始在我們身邊發生,蘋果(IOS13系統)就是一個很好的例子。向最小化設計和輕擬物化發展,最終帶來了無紋理3d視覺感官。受到了大家的喜歡,來看一張高清圖。
如下圖設計風格,在dribbble上獲得認可度比較高!
Dribbble用戶alexplyuto的作品獲得了四千多次贊,并帶動了這一趨勢。
備注:可看出目前扁平化設計過于雷同,用戶審美疲勞。偶爾出現新設計趨勢風格,反而更個給各位設計師們帶來新鮮感!
新風格的特征點
-
由于按鈕的視覺表現看著變化不大(因為小了一些,不直觀),因此我們將重點放在實際的卡片概念上,以使這種視覺表現更能直觀感受出來
-
這種風格的主要好處是“新鮮”(至少持續很長時間)。它為界面帶來了“新感覺”,并使其脫穎而出。它也可以與其他樣式混合使用,這樣就避免很呆板整個畫面變成這種柔軟凸起的效果。
到目前為止,有一些問題需要解決。我們發現了兩個主要問題:
1. 可見性
2. 易用性
- 可見性
圖形與背景對比度的主要問題是,當它們都是相同的顏色時,就沒有可測量的對比度;客觀上存在陰影,因此我們可以近似并嘗試測量其外部的第一個像素。在上面的示例中,我們得出了這些對比度值。
而且由于幾乎沒有人會嘗試使用如此強烈的陰影,這意味著其余UI元素必須可訪問。這種假設得出的結論是,如果我們通過版式,相近度和與重要元素的對比來進行正確的層次劃分,那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對此進行測試(我將嘗試找到時間做這件事),但現在我們假設下面元素的兩個“版本”均為“確定”。即使有些人看不到陰影,也有足夠的對比度讓他們看到圖標并“使用它”。
- 易用性
僅僅是卡片嗎?
但是,如果我們決定將組件用作按鈕而不是卡片,則會出現可訪問性的主要問題。
我們可以像下面的示例一樣輕松創建帶有內部陰影的按下狀態。
對比度測試
此按下狀態的對比度太小,不足以表示差異。是否可以通過改變的其余部分來表達按鈕的狀態,這里有一些想法,例如使用輪廓和填充圖標,下劃線或甚至用顏色填充按下狀態。
開發實現其實它比我們認為的在CSS中實現“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin,但我認為這不應該成為問題。
https://neumorphism.io/#55b9f3(實現新擬態效果CSS代碼)
您可以輕松地將可開發的設計與這些卡片形狀組合在一起(新擬態卡片),從而獲得很好的效果。
-
盡管這一新趨勢影響了許多設計師,但對比以前使用的卡片組件可訪問性問題相比,它的問題并不那么嚴重。
所以去瘋狂的順應這一趨勢,并對其進行調整以使其成為您的趨勢。UI設計師的工作就是需要不斷來回挑戰自我,探索潮流,以符合產品審美。如果沒有這種不斷的探索的精神,所有產品將再次看起來相同,同質化嚴重。
-
本篇文章,作者通過對新擬態設計趨勢分析,在文中提及“新擬態”和以前材料卡片的區別,同時證實了新擬態風格優勢!但也存在一定的弊端!如何去權衡與設計的把控,需要設計師們多去研究探索!
如今新擬態才初出茅廬,還未被廣泛使用,需要有先驅者引領。畢竟國內的環境大家都不敢冒險去嘗試運用到線上!
關于循環設計,可持續發展是商業領域非常關注的話題,作為UX需提前轉變思維,給企業帶來更多價值,一線大廠已在運用這種思維
本文共 3589 字,預計閱讀 10 分鐘
譯者推薦|本文從“可持續”和“設計”的兩點談起,來論述從線性經濟向可持續經濟的轉變,以及“可持續設計”的四個主要階段:理解、定義、制造、發布。
“循環設計”不是為了追求時髦或者抬升設計地位,而是將這個已經日益庸俗化的“設計”冠為自己的定語,是設計本身發展所趨,以及可持續發展所需,設計界需要對自己的責任有所承擔,形成一個全局觀、系統性看待設計問題的方式。讓回收利用和可持續發展成為一種規范,從而做到一勞永逸。
我們生活在一個呼喚變革的世界。在過去的50年中,現代社會所依賴的漫不經心和無休止的消費是不可持續的。我們從小就不關心自己的事情。如果有什么東西壞了,我們也就不修了。產品被設計成用完直接丟棄,而不是去修復。數字產品也不例外。然而,為了解決這些問題,出現了一種新的思維方式:循環設計(可持續設計)①。(益達說:其實這個理念和風格已經存在了很長的時間,大多應用在不為大眾所知的能源、材料再生流程之中,然而隨著時代的發展,循環設計可以變得更加普世。)
①注:循環設計是20世紀80-90年代產生的一種設計風格,他又稱回收設計,是指實現廣義收回和利用的方法,即在進行產品設計時,充分考慮產品零部件及材料回收的可能性,回收價值的大致方法,回收處理結構工藝性等于與回收有關的一系列問題,以達到零部件及材料資源和能源的再利用。它旨在通過設計來節約能源和材料,減少對環境的污染,使人類的設計物能多次反復利用,形成產品設計和使用的良性循環。
那么,循環設計方法意味著什么?在數字產品上要如何使用?在回答這些問題之前,首先,我們需要仔細觀察我們是如何構建我們的世界,為什么這個世界已經不可持續了,并且要理解環保世界的需求是如何改變我們的思維方式,促使我們渴望從線性設計模型轉變為循環設計模型。
向循環轉變
我們的經濟主要基于“按需配置”流程之上。在此線性系統中,我們構建了會在一段時間后淘汰的產品,并且將其組件視為垃圾。與此相反,循環設計方法將產品的生命周期視為一個閉環,其中資源不斷地被重新利用。
在“經典”線性模型中,產品經歷了生產、消費和破壞的各個階段,最終以浪費告終。在設計一款循環產品過程中,我們使用的方法包含四大階段,這四個階段形成了一個閉環,并形成了一個恒定的循環,在這個循環中,不僅僅只有閃閃發亮的、新的,未使用過的材料才被受歡迎。
循環設計方法的四個階段是:
理解 / 定義 / 制造 / 發布
當我們同時看線性設計和循環設計模型方法時,有一點吸引人的是,開始設計東西的時候,方法的差異。從只是生產某種東西,到對我們將要生產的產品做出深思熟慮的決定,以及在實施過程中付出的努力和關心,這是一個大轉變。
看看我們現在的立場
為什么做出這種轉變如此的重要?我確信每個看新聞的人都聽說過氣候變化。NASA 致力于解決環境問題,因此我們都可以非常詳細地了解人類行為和無限增長對我們生態系統的影響。
但好消息是我們不必繼續這樣做,因為我們可以很容易從數字世界中“產生”方式中學習事物的產生。電力廢棄物已成為現代世界的主要廢棄物來源之一。大量的手機和電腦被扔掉,隨之經濟是建立在每年都有新東西的基礎上的。
當您的手機屏幕意外碎裂時,我們該怎么辦?我們知道如何處理它嗎?我們知道如何修理嗎?我們并不知道……但是幸運的是,有些設計師對此問題提出了解決方案。Fairphone② 是一種合乎情理,模塊化的智能手機,其組件數量很少,可以輕松更換和回收。大公司也應朝這個方向邁出一步,讓回收利用和可持續發展成為一種時尚和規范,一勞永逸。
② Fairphone:這家公司生產的手機希望實現全球手機供應鏈的公平貿易,具體而言就是不使用“沖突礦物”并且確保生產手機的工人沒有被奴役和壓榨,目前仍然堅持在非洲貧困和戰亂的國家進口材料,已經在剛果和盧旺達境內找到了一些礦山,用更好的商業實踐推動當地經濟更健康地發展。
設計和設計師的重要性
設計師,比任何其他專業人士,都更有可能在一轉變中產生巨大的影響的人。我還敢說,我們有責任采用可持續設計的方式行動和思考。因為是我們創造了那些最終出現在傳送帶上的東西。我們也有責任教育我們的用戶。幸運的是,越來越多的人重視具有可持續發展目標的產品或品牌,或者重視起在產品背后有意義的故事。同樣,可持續發展不僅成為流行語,而且成為一種價值觀,被越來越多的人意識到基于有限資源的無限增長是無法實現的目標。但是,要從線性經濟向可持續經濟轉變,我們需要學習不同的思維方式。幸運的是,智能設備和數字產品的時代帶來了一種復雜的設計思維方法,可以作為物理世界中生產鏈的范例。
用戶體驗必須提供什么
地球上有一個地方,您不能隨便丟東西:互聯網。這是一個對已有產品進行再構思的地方,您只能去完善它,不能丟棄它,因為如果您一夜之間說:“我不喜歡我的網站,明天我將推出一個全新的網站”,那您便會失去用戶。
如果我們看一下可持續發展設計方法的四個主要階段,就會發現我們在用戶體驗設計中使用的方法與此很相似。
讓我們再次看一下四個階段,然后將其更詳細地分解:
當我們談論與循環設計相關的理解時,我們談論的是在開始設計一個未來的產品之前就了解它的用戶和環境。研究一直是數字產品設計的基礎。與數字產品的連接比與實體產品的連接要更多的涉及到人類的心理。因此不可避免地要開發出新的研究方法,以幫助我們洞察用戶在使用某種產品時的想法、感受和行為。但這不僅與用戶有關, 研究還必須深入到經濟領域,并研究未來產品的組成部分,同時牢記它們必須可被再次利用。
在此階段,將定義(商業)目標,并構建一個商業模型畫布作為生產過程的計劃。用戶體驗使用這種方法已有一段時間了,讓涉眾參與其中,并在設計過程中更多地激活它們。為我們設計的產品設定一個目標是至關重要的,因為有了它,我們可以為用戶創造額外的價值。因此,無論是制作商業模型畫布還是舉辦精彩的價值主張研討會,在生產方式中實施這些方法都會對當前的生產流程產生巨大的影響。
這是關鍵部分?,F在我們正在做的事情就好像沒有明天一樣。隨著每種無法回收的產品的出現,我們產生的廢料越來越多。但是循環方法是為產品創建一個原型,并定義將需要使用那些材料反映在產品原型上,并在定義階段概述的商業模型上定義材料。原型設計和構思是用戶體驗設計過程中的關鍵要素,這也是為什么需要制作原型。
根據循環設計模型,隨著產品的發布,生產周期進入了第四階段,然同時理解階段又重新開始了。對于數字產品來說,這是自然發生的事前:你發布一個產品,基于該版本收集反饋,然后構思它,周而復始,這個循環再次產生。
但是,觀察這個循環并建立這些連接僅僅是冰山一角。在數字時代發展起來的設計思維給世界帶來了許多反思。
變革中的大佬
幸運的是,已經有許多大品牌意識到轉變的必要性,并采取和提出了數字設計思維方法來支持轉變,并建立循環設計的時代。根據《循環設計指南》,“我們應該把我們設計的所有東西都看作軟件產品和服務——這些產品和服務可以基于我們通過反饋得到的數據而不斷的發?!?
用戶體驗研究和用戶體驗設計一直是在做的一件事是:基于全面的研究和真實的用戶需求來構建產品。上面的設計指南是非常復雜的工具,具有許多可能的方法。它強調了從產品到服務流程轉變的重要性,并展示如何使用敏捷流程并將其實施到構建產品的方法之中。
IDEO(全球頂尖的設計咨詢公司)與 Ellen Macarthur Foundation(艾倫·麥克阿瑟基金會)合作,試圖“試圖通過設計構建一個具有恢復性和再生性的經濟框架”。在這里,您可以找到幾乎每個生產方面和領域——例如食品、時裝、經濟和設計——并在每個領域中提出解決方案,以打破線性生產系統。
耐克還宣布了其基于循環設計模型生產高品質運動鞋的新方法原則。正如您已經看到的那樣,無論您身處哪個經濟領域,都可以為循環生產過程的蓬勃發展做貢獻,并成為一支主導力量。
重要的結論
我認為,作為設計師,我們始終要為變革而努力,并始終努力與客戶、產品或服務保持緊密的關系,并通過構思使其不斷完善,以實現這一目標。這是因為偉大的事情只有通過時間和不斷的反思才能實現。在離線世界中,數字設計過程也有很多東西可以貢獻。希望通過教育,能有更多的大公司意識到用戶真正想要的產品是具有更多功能并可持續使用的,而不僅僅是將它們當作一次性產品,一旦它們不像最初那樣光鮮就把她扔掉。
轉自:站酷-大猴兒er
快速變化的技術每年都在影響著設計趨勢。作為設計師,我們需要時刻保持關注,對設計趨勢擁有較高的敏感度,不斷學習,擴充自己的設計技能,目的是為了跟上的市場環境?;谖业恼{研,經驗和觀察,我甄選了在2020年你將會看到的最為關鍵的8個UI/UX設計趨勢。讓我們一起來看看吧。
插圖被應用到APP中已經有很長一段時間了,它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設計元素,為我們產品的整體產品增加了情感化體驗。插圖非常能抓人眼球,尤其是在融入動效后會顯得更加的自然,將產品帶入生活的氣息,使得產品功能更加突出,同時也增添了更多的細節和個性。
△ Welcome to Swiggy by Saptarshi Prakash
△ Onboarding animations — Virgil Pana
另一個好處是使用動效后,能抓住用戶的注意力使其能夠更加沉浸在你的產品中。動效同樣是講好品牌故事,產品或者服務最有影響力的途徑之一。
微交互存在與每一個網頁或者app界面中。每當打開你最喜歡的那些應用時,都有機會看到它們,比如像Facebook中就有大量不同的微交互,我認為「Like」功能就是一個完美的例子。有時,我們幾乎意識不到它的存在,因為它們非常的不顯眼,非常自然地融到界面中去了。但是,如果當你把這些微交互移除掉的話,你又會非??斓淖⒁獠⒛芨惺艿揭恍┓浅V匾臇|西丟失了。
△ 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. 講故事
講故事就是利用創意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具,可能會大大增長產品的銷售額或服務。
文章來源:優設 作者:彩云譯設計
藍藍設計的小編 http://www.syprn.cn