首頁(yè)

除了大廠的社交app,這些小眾app你也會(huì)喜歡

博博

1.遙望app

1.視覺設(shè)計(jì)

遙望app的設(shè)計(jì)在整體上的風(fēng)格化很強(qiáng),有自己的獨(dú)特性。為了讓用戶之間的粘性更好,更是在活動(dòng)上、動(dòng)效上花了很多心思,給用戶帶來很多有趣且良好的體驗(yàn),讓我?guī)闳ンw驗(yàn)一下吧



2.設(shè)計(jì)語言

整個(gè)app的設(shè)計(jì)語言貫穿了星形、圓形和三角形 ,同時(shí)增加上面三種圖形的線性來點(diǎn)綴設(shè)計(jì)。tab圖標(biāo)是圓形和三角形的排列組合,同時(shí)增加線的形式點(diǎn)綴其中,層次更加豐富。其他頁(yè)面的設(shè)計(jì)也是同理,通過將上面3種圖形排列組合,貫穿到整個(gè)頁(yè)面,設(shè)計(jì)語言十分統(tǒng)一。



3.空界面設(shè)計(jì)

空界面的設(shè)計(jì)運(yùn)用手的動(dòng)作將每個(gè)頁(yè)面的情緒感拉的滿滿的,在互動(dòng)消息的版塊,從關(guān)注到@我,每一個(gè)頁(yè)面通過不同的情緒表達(dá)方式極大了緩解了用戶的焦慮,同時(shí)也增加了一些趣味性。



4.勛章設(shè)計(jì)

勛章是根據(jù)你的確幸值的多少,等級(jí)的高低,送禮物的多少,以及你在平臺(tái)的表現(xiàn)會(huì)給你發(fā)放不同的勛章,以此讓用戶享受到尊享和定制的感覺,增加用戶的參與感和在平臺(tái)的粘性。



2.動(dòng)效設(shè)計(jì)

遙望app的動(dòng)效設(shè)計(jì)也是十分的流暢和有趣,線性的風(fēng)格特征的插畫、溫暖的文案和趣味的動(dòng)效,帶來的絲滑體驗(yàn)感十分強(qiáng)烈。

1.匹配器

遙望app首頁(yè)上面的頭像是匹配器,隨著頭像慢慢的流過,頭像旁邊還有對(duì)話框彈出介紹用戶的信息,點(diǎn)擊會(huì)有兩只手彼此召喚,再點(diǎn)擊幸會(huì)就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點(diǎn)擊也可進(jìn)入到好友快速閃過的頁(yè)面,點(diǎn)擊可以同樣到打招呼頁(yè)面,多個(gè)入口引導(dǎo)用戶相互吸引從而形成社交動(dòng)機(jī)。



2.下拉加載

加載的動(dòng)態(tài)效果加入了遙望的IP形象,一個(gè)是像地球一樣的自轉(zhuǎn),一個(gè)是像風(fēng)箏一樣在天空飛的效果,動(dòng)態(tài)十分流暢且有趣。



3.記錄心情

記錄心情這個(gè)是個(gè)很有趣的設(shè)計(jì)細(xì)節(jié),在記錄心情發(fā)表后,在查看心情的小罐子里就能夠看到你的心情小表情,并且還有心情占比、情緒波動(dòng)分析,最后在日歷上還能看到每日心情的狀態(tài),可以很好的記錄每日的心情。



查看心情



3.彩蛋設(shè)計(jì)

1.放個(gè)氣球

放個(gè)氣球把心情寫進(jìn)氣球發(fā)送出去,可以抒發(fā)自己的情緒。同時(shí),你想自己接收就可以點(diǎn)收一個(gè),出現(xiàn)氣球動(dòng)效加載,就會(huì)接收到別人發(fā)出的信息,不想要了,可以點(diǎn)放飛消息就沒有了。



收氣球



2.發(fā)射泡泡

雖然泡泡這種形式很常見,但是遙望在細(xì)節(jié)處做的設(shè)計(jì)還是很用心,很容易觸動(dòng)用戶。發(fā)射泡泡很容易讓然想到泡泡相機(jī),加上“biubiu”的音效,有很強(qiáng)的場(chǎng)景感。



2. 配配app

1.視覺設(shè)計(jì)

配配app的設(shè)計(jì)可以說是以IP形象為切入的設(shè)計(jì),app里面有著各種各樣的表情和動(dòng)勢(shì),生動(dòng)且逗比。而且配配在設(shè)計(jì)的時(shí)候會(huì)融入很多小的細(xì)節(jié),也能帶給我們很多不一樣的感受。整個(gè)ip融入可以說做的很徹底,能夠讓用戶的品牌感知十分深刻。



2.文字字體

貼貼功能用了一個(gè)超大的特殊的文字字體設(shè)計(jì),十分醒目,在瀑布流的頁(yè)面對(duì)用戶的信息區(qū)分的比較清楚,但是對(duì)于用戶的照片也形成了遮擋,有的時(shí)候并不是很好。發(fā)布貼貼的超大字體的設(shè)計(jì)很少有人這么設(shè)計(jì),雖然看起來粗糙,但是卻與眾不同。



3.品牌融入

配配app讓人印象比較深刻的就是這個(gè)IP的形象了,在頁(yè)面的各種地方都能看到他,無論是在催促你、還是在悠閑的吃東西,還是舉起手或是一起打call,哪里都少不了它。它的設(shè)定非常生活化,也很貼近我們的日常,所以這樣才更夠親近。



2.動(dòng)效設(shè)計(jì)

1.點(diǎn)亮

點(diǎn)亮設(shè)計(jì)就是點(diǎn)擊后,寫下一個(gè)故事就可以和其他用戶打招呼了,點(diǎn)亮后燈泡會(huì)發(fā)出光,然后有星星散落下來,將表情運(yùn)用在按鈕上也是很新穎的設(shè)計(jì)方法了。



2.發(fā)布動(dòng)態(tài)

發(fā)布動(dòng)態(tài)的功能IP會(huì)向你招招手,引導(dǎo)用戶參與發(fā)布動(dòng)態(tài)。



3.動(dòng)態(tài)背景

配配的動(dòng)態(tài)背景很有意思,打call、吃蘋果、打盹,根據(jù)不同用戶展示不同的動(dòng)態(tài)背景。




3.糖果app

糖果app的設(shè)計(jì)在于匹配器和其他的很與眾不同,像是在一起炫舞的樣子,看起來很有場(chǎng)景感。糖果app的整體視覺風(fēng)格比較中規(guī)中矩,

不過有一些的功能設(shè)計(jì)和設(shè)計(jì)小細(xì)節(jié)值得體驗(yàn)一下。



1.廣場(chǎng)匹配器

糖果的首頁(yè)的匹配器設(shè)計(jì)是一群人在廣場(chǎng)上一起炫舞,然后各自擺著不同的怪異的姿勢(shì),設(shè)計(jì)上十分新穎。



2.戀愛上上簽

戀愛上上簽就像我們?nèi)ニ聫R里求姻緣一樣,通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛,最后終于連接上一個(gè)十分匹配的好友。



3.解憂罐子

解憂罐子就是把心情放在罐子里,發(fā)送出去,別人可以看到你的罐子,然后你自己也可以做罐子發(fā)送給別人。



4.無聊嗶嗶雞

無聊嗶嗶雞就是一只雞不停的晃動(dòng),可以發(fā)送一句消息直接可以連接到好友。



4.Blurrr app

Blurrr app是一款功能強(qiáng)大的視頻剪輯軟件,Blurrr雖然是一款工具軟件,但是在配色和設(shè)計(jì)上還是十分大膽,熒光綠的顏色和黑色的結(jié)合,十分亮眼,里面的動(dòng)效也十分細(xì)膩,非常吸引人的眼球。



引導(dǎo)頁(yè)的設(shè)計(jì)用多彩的圖形設(shè)計(jì)+表情+動(dòng)效設(shè)計(jì)的方式,打造了靈動(dòng)的引導(dǎo)頁(yè)設(shè)計(jì),形成了自己很獨(dú)特的風(fēng)格。




作者:章魚鋪里
來源:站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



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



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

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

博博


追波年度最佳作品

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


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


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


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


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


易讀性(停頓感)

字體三原則:可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上,不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋尽.?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感,更加適合用戶閱讀。


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



曲線

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


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



多彩高斯?jié)u變風(fēng)

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


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




B端界面設(shè)計(jì)


側(cè)邊欄Sidebar

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



儀表盤設(shè)計(jì)

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



流程設(shè)計(jì)

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



B端C化

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



輕代碼化

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


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




界面設(shè)計(jì)技巧


人文氣息

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


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


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



毛玻璃效果

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




輕擬物

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




簡(jiǎn)潔設(shè)計(jì)

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



幾何圖形

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



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



暗黑設(shè)計(jì)

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


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



模塊化(組件化)

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


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




插畫

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



幾何插畫

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



線面插畫

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




動(dòng)效


微交互

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



Mg動(dòng)畫

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




三維


三維圖標(biāo)

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



輕三維

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



P4D(PS+C4D)

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



卡通IP

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


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


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



三維動(dòng)畫

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

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

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

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

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

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

周周

為了保證這篇文章的質(zhì)量,追波年度的每個(gè)作品都超過550贊。在此原則下挑選了828件作品,作品總的大小為2.2G


相比于《2020年追波設(shè)計(jì)流行趨勢(shì)》多出了328件作品。


總結(jié)

從挑選出的828件作品中,排名前十的作品中9件為B端設(shè)計(jì),另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中:

B端界面設(shè)計(jì)占比476/828,57.4%;

C端界面設(shè)計(jì)占比180/828,21.7%;

視頻動(dòng)效作品占比223/828,26.9%;


明眼人都能看出其中的比重關(guān)系,B端設(shè)計(jì)再次大火,為什么是再次?因?yàn)锽端設(shè)計(jì)之前火過,只不過沒有趕上一個(gè)好的時(shí)代,在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、ToB 、ToG的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過C端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會(huì)再次提升。



追波年度最佳作品

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


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


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


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


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


易讀性(停頓感)

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


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



曲線

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


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



多彩高斯?jié)u變風(fēng)

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


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




B端界面設(shè)計(jì)


側(cè)邊欄Sidebar

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



儀表盤設(shè)計(jì)

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



流程設(shè)計(jì)

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



B端C化

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



輕代碼化

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


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




界面設(shè)計(jì)技巧


人文氣息

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


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


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



毛玻璃效果

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




輕擬物

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




簡(jiǎn)潔設(shè)計(jì)

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



幾何圖形

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



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



暗黑設(shè)計(jì)

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


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



模塊化(組件化)

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


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




插畫

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



幾何插畫

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



線面插畫

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




動(dòng)效


微交互

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



Mg動(dòng)畫

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




三維


三維圖標(biāo)

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



輕三維

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



P4D(PS+C4D)

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



卡通IP

卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通IP也從傳統(tǒng)的純PS手繪技法,轉(zhuǎn)到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色


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


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



三維動(dòng)畫

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



總結(jié)

上一次寫追波流行趨勢(shì)還是兩年前了,通過兩年的沉淀對(duì)趨勢(shì)流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火,隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層,客觀的看待和理解這個(gè)真實(shí)的世界,曾經(jīng)的流行趨勢(shì)也需要慢慢的沉淀下來。


存在即合理,趨勢(shì)流行稍縱即逝,注定是不長(zhǎng)久的,只有大浪淘沙歷史遺留下來的風(fēng)格才能更長(zhǎng)久。但我們也不能不去關(guān)注,因?yàn)槟挠惺裁此^的創(chuàng)新,只不過是舊元素的重新組合,并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝,風(fēng)格永存”大概就是這個(gè)意思吧。


6000多字的設(shè)計(jì)流行趨勢(shì),希望能幫助設(shè)計(jì)師度過互聯(lián)網(wǎng)裁員的寒春。最后希望以后每年堅(jiān)持輸出設(shè)計(jì)流行趨勢(shì)。為設(shè)計(jì)行業(yè)奉獻(xiàn)微薄之力。



文章來源:站酷   作者:水手哥

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔