手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

2022追波設(shè)計流行趨勢

2023-3-24    博博


追波年度最佳作品

追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個贊。


為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢?既不是C端也不是純B端的作品,更像一個網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標、分類圖標和按鈕,你可以理解它就是一個平面作品,一個字體加幾何形體構(gòu)建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出,這種使用線條突出重要信息的設(shè)計也是今年追波設(shè)計流行趨勢之一。


MetroUI是Windows8的界面設(shè)計語言,在2010年至2013年間曾經(jīng)風靡一時,那也是移動互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國家推行實體經(jīng)濟、數(shù)字化帶動To B 、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實現(xiàn)B端產(chǎn)品與C端設(shè)計風格的傳承與銜接,你會發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風,毛玻璃的多彩高斯模糊漸變風,年度作品當之無愧。


最后來看下按鈕的設(shè)計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設(shè)計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現(xiàn)B端設(shè)計重功能和交互體驗,視覺點到為止的設(shè)計理念。


下面我們來欣賞年度最佳作品里面的流行趨勢吧。


易讀性(停頓感)

字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設(shè)計文章,肯定設(shè)計文章的內(nèi)容可讀性更好。易識性是用在字體設(shè)計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設(shè)計師都息息相關(guān),因為我們都需要編排文本。當我們小時候?qū)懽魑臅r,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。


通過給用戶制作停頓感來增加用戶的易讀性。可以在相關(guān)聯(lián)文本后面添加圖片、表情、圖標來更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達愛意時會輸入文本,“我愛你”、“我Love你”、“我ai你”、“我??你”,哪個更加會有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。



曲線

在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一,第一個設(shè)計目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實書寫的感覺。之前很多帶有簽名的設(shè)計中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機械字體會帶有一種人文氣息,也會讓兩者之間產(chǎn)生一種對比、矛盾


除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設(shè)計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應(yīng)的熱點圖。



多彩高斯?jié)u變風

多彩高斯?jié)u變風是從色彩的角度來傳達和豐富畫面的,多彩高斯?jié)u變風其實是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。


多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達信息需要去設(shè)計與內(nèi)容相匹配的視覺風格。




B端界面設(shè)計


側(cè)邊欄Sidebar

B端設(shè)計的火爆帶動了B端相關(guān)模塊設(shè)計,更多的人也愿意嘗試B端相關(guān)模塊設(shè)計,側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導航系統(tǒng),好的側(cè)邊欄設(shè)計能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計已經(jīng)不再是假大空概念設(shè)計,而是一套實用美觀可落地的設(shè)計。



儀表盤設(shè)計

儀表盤設(shè)計是一個很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺界面的儀表盤設(shè)計也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標欄、導航欄、待辦任務(wù)、個人信息、報表數(shù)據(jù)、消息中心、快捷入口等。當然最重要的就是報表數(shù)據(jù),團隊收益、任務(wù)進度、轉(zhuǎn)化比例、新增、存量、團隊工作時長等都是老板或領(lǐng)導關(guān)心的內(nèi)容。每個公司業(yè)務(wù)不同、每個人員權(quán)限不同,自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級系統(tǒng)性去思考和設(shè)計。



流程設(shè)計

復(fù)雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設(shè)計是每一個企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計的難點,需要對業(yè)務(wù)高度抽象,讓每一個業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計。



B端C化

B端C化是B端產(chǎn)品設(shè)計的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計的視覺靠齊,國內(nèi)B端產(chǎn)品界面設(shè)計視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務(wù)的發(fā)展,B端產(chǎn)品也開始移動化、智能化,國內(nèi)主流還是通過小程序、H5來現(xiàn)實B端產(chǎn)品C端化。



輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式,彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時,又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個性化管理系統(tǒng),輕松實現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。


輕代碼化將功能進行打包,升級成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時直接選擇使用模版,綁定對應(yīng)的變量即可使用。




界面設(shè)計技巧


人文氣息

為什么人加色塊的組合方式能流行起來?還是B端行業(yè)流行帶動的。B端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外,還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價值觀已經(jīng)就不言而喻了。


當然企業(yè)也需要進行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。


這種風格更適合大公司,國內(nèi)的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現(xiàn)科技與人文的結(jié)合,而對于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應(yīng)當下UI扁平化的設(shè)計趨勢。蘋果Mac OS Big Sur系統(tǒng)的圖標、界面中運用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個技法”,完全能滿足UI設(shè)計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權(quán),具體安裝購買方法可以上“某寶”就可以輕松搞定,真香。




輕擬物

輕擬物這幾年一直流行,在UI設(shè)計中趨于穩(wěn)定的位置。從寫實到扁平再到輕擬物,其實是設(shè)計師們一路不斷探索的結(jié)果。本質(zhì)就是光影對形體產(chǎn)生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個部分的處理。寫實三維的圖標等設(shè)計更適用于簡潔的畫面中,扁平等設(shè)計更適用于復(fù)雜一點的界面中,比如B端產(chǎn)品界面中的功能圖標。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。




簡潔設(shè)計

簡潔設(shè)計遵從了密斯·凡德羅的“少即是多”的設(shè)計原則,在B端產(chǎn)品界面中更加需要簡潔設(shè)計,我們最熟悉的Sketch軟件界面已經(jīng)是相當?shù)暮啙嵙??;氐浆F(xiàn)實當需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡潔是設(shè)計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數(shù)據(jù)說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。



幾何圖形

幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個整體。B端產(chǎn)品視覺設(shè)計C端化的進程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產(chǎn)品的視覺設(shè)計一定會更上一個臺階。



幾何圖形另一個場景化的地方就是品牌,作為一名UI設(shè)計師一定會經(jīng)歷從圖標到幾何圖形到品牌設(shè)計的過程,品牌設(shè)計的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計的技巧對產(chǎn)品定位、品牌宣傳打下扎實的基礎(chǔ)。



暗黑設(shè)計

暗黑模式的設(shè)計是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時長增大,如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。


在設(shè)計暗黑主題時,不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計的衡量指標。Material Design給出了暗黑主題的設(shè)計準則,即正文和背景之間的對比度應(yīng)至少為15.8:1。按照此標準設(shè)計,可讀性都還不錯。這里介紹一個插件“Stark”(Figma、Sketch、XD、Chrome插件)用來測試界面的對比度。



模塊化(組件化)

為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面,但在B端產(chǎn)品設(shè)計中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提,是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計師一生中最寶貴的經(jīng)驗之一,它能提高設(shè)計師的系統(tǒng)化思維、邏輯思維和抽象思維能力。


產(chǎn)品模塊化設(shè)計就是將產(chǎn)品分成幾個部分,也就是幾個模塊,每一部分都是具有獨立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。




插畫

插畫作為設(shè)計的一大品類,不同的插畫師都有自己擅長的風格,本質(zhì)是都有自己的個性,但是在產(chǎn)品設(shè)計中更多是需要共情、共性來講故事,表達產(chǎn)品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計類的插畫風格。設(shè)計的本質(zhì)是舊元素的重新組合,插畫不會過時,而是需要結(jié)合當下和產(chǎn)品找到最匹配的設(shè)計風格。



幾何插畫

幾何插畫算是插畫簡化的一種表現(xiàn)形式,人和物的形態(tài)不再寫實,而是抽象成幾何圖形拼湊的感覺,同時保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達出簡潔、科技的現(xiàn)代感。難點還是在人物形態(tài)的表現(xiàn)上,平時多練習練習速寫還是很有必要的。



線面插畫

線面插畫最近一兩年非常流行,準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時某些結(jié)構(gòu)會表現(xiàn)不出來,這時候用線條簡單勾勒后,結(jié)構(gòu)就會清晰明了。其次當線面插畫運用在界面上時,可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時,還能保持界面的干凈整潔。




動效


微交互

界面微交互動效會讓用戶的體驗更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計,微交互和動效設(shè)計是繞不開的,UI界面設(shè)計通過微交互反饋告知用戶當前正在發(fā)生的事情,所處的狀態(tài)。細微的動效更能調(diào)動用戶情緒,取悅用戶。C端產(chǎn)品微交互和動效已經(jīng)很成熟了,一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動效更多還是在學習海外產(chǎn)品,還需要給前端工程師灌輸微交互和動效的設(shè)計價值,共同打造產(chǎn)品體驗細節(jié)。



Mg動畫

Mg動畫需要很好的節(jié)奏感、韻律,每一個場景動畫都需要其中的元素進行連接變化,讓轉(zhuǎn)場動畫更加自然,MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。




三維


三維圖標

MacOS Big Sur系統(tǒng)圖標的更新帶動了三維圖標的流行,三維圖標的應(yīng)該場景還是需要有較大留白空間的界面,因為三維圖標太小后就看不到更多細節(jié)。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上?設(shè)計師應(yīng)該保持開放多元的視角。設(shè)計本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設(shè)計價值。



輕三維

為什么輕三維在界面設(shè)計中占有一席之位?一個是設(shè)計師不斷追求差異化的產(chǎn)物。另一個是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機界面中的各種元素,比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標、進度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡單的幾何形體建?!驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質(zhì)自由添加,特別是當下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個出彩點就是可以加局部燈光,局部的漸變色或環(huán)境光更佳出彩。



P4D(PS+C4D)

P4D是PS加C4D的設(shè)計表現(xiàn)技法,也是視覺設(shè)計的最后一個環(huán)節(jié),通過PS對C4D的渲染圖片進行調(diào)色,利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強大的合成功能,將渲染圖片與圖片素材進行合成,來表現(xiàn)畫面的視覺度,當然三維軟件比較難實現(xiàn)的水、粒子、煙花等效果,也可以通過PS的后期合成來實現(xiàn),這也是P4D的強大之處。



卡通IP

卡通IP設(shè)計最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通IP也從傳統(tǒng)的純PS手繪技法,轉(zhuǎn)到C4D建模—角色綁定—MD衣服制作—OC渲染—PS(靜態(tài))/AE(動態(tài))調(diào)色。


卡通IP火的本質(zhì)更適合做營銷,相比于品牌或Slogan,卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱,受互聯(lián)網(wǎng)大廠影響下,卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標配了。如果團隊中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。


對于UI設(shè)計師來說學習是有成本的,暫時并不是必備技能,如果喜歡完全可以學習,從設(shè)計差異化的角度來看三維視覺確實有一定的競爭力



三維動畫

C4D三維場景動畫通過構(gòu)建實物和場景模擬生活中的現(xiàn)實場景,會讓用戶體驗真實感,三維軟件制作動效的最大優(yōu)勢是通過動力學和表達式來模擬真實感,未來在AR/VR領(lǐng)域會有更好的發(fā)展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優(yōu)勢。

作者:水手哥。    來源:站酷網(wǎng)

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.88yangsc.com

存檔