推薦閱讀

在之前風(fēng)向里，我有介紹過(guò)國(guó)內(nèi) C 端 APP 界面設(shè)計(jì)的趨勢(shì)，視覺(jué)越來(lái)越復(fù)雜，越來(lái)越平面化。

但這種復(fù)雜也是有傾向的，不是什么設(shè)計(jì)風(fēng)格都會(huì)應(yīng)用，比如數(shù)據(jù)大屏設(shè)計(jì)這種給一般表盤界面上 “科技感” 的風(fēng)格就不會(huì)出現(xiàn)。

而目前應(yīng)用最廣的風(fēng)格類型，很難用一個(gè)固有的名詞去形容它，所以我用了 “國(guó)潮” 一詞。這個(gè)國(guó)潮不是帶有古風(fēng)印記的國(guó)風(fēng)潮流，而是國(guó)內(nèi)品牌、廣告設(shè)計(jì)中獨(dú)立孕育的國(guó)產(chǎn)潮流……

而品牌廣告中這類設(shè)計(jì)的風(fēng)向早就吹進(jìn)了 UI 行業(yè)中，應(yīng)用它們來(lái)完成界面的設(shè)計(jì)或活動(dòng)頁(yè)設(shè)計(jì)的案例不在少數(shù)，比如下面這些案例：

雖然不是所有應(yīng)用的設(shè)計(jì)必須跟隨潮流的腳步，或是在作品集中應(yīng)用這類設(shè)計(jì)，但對(duì)于今天的 UI 設(shè)計(jì)師來(lái)說(shuō)不掌握這種風(fēng)格設(shè)計(jì)的技巧就奧特辣~

所以我們就要認(rèn)識(shí)這類設(shè)計(jì)具有哪些風(fēng)格的特點(diǎn)和設(shè)計(jì)技巧。

一、國(guó)潮風(fēng)的色彩應(yīng)用

在這類設(shè)計(jì)中，色彩的應(yīng)用是最顯著的特征，比如下面這些案例，相信我們立馬會(huì)關(guān)注到它們豐富的色彩。

它們的配色思路和傳統(tǒng)的 UI 配色邏輯背道而馳，除了顏色用的多以外，還有個(gè) “有違祖訓(xùn)” 的特點(diǎn)就是使用——熒光色。

這是我在過(guò)去的配色分享中都會(huì)建議避開(kāi)的色彩類型，因?yàn)樗鼈兲粒炔贿m合作為文字、圖標(biāo)的填充色，也不適合作為背景色。

而在國(guó)潮設(shè)計(jì)風(fēng)格中，熒光色的應(yīng)用非常普遍，并且看起來(lái)似乎并沒(méi)有不合理，對(duì)元素的可視性造成太大影響。原因就是為熒光色搭配了大量的—— 黑色，這也是我一直不建議直接使用的顏色。但因?yàn)?a href="http://www.hx168888.com/tag/%e5%9b%bd%e6%bd%ae%e9%a3%8e" class="tag_a" target="_blank">國(guó)潮風(fēng)格中直接放棄了簡(jiǎn)約和挪走了奧卡姆，用以毒攻毒的方式形成了一套自洽的設(shè)計(jì)風(fēng)格（負(fù)負(fù)得正）。

熒光色本身并不多，常用的色相總結(jié)起來(lái)就下面這些：綠、藍(lán)、黃、橙、紫、粉

通常這類設(shè)計(jì)會(huì)選用一種色相類型為主（不一定是品牌主色），然后盡情的添加臨近色和固有色作為輔助色。臨近色即在色環(huán)內(nèi)角度相近的色彩，而固有色則是類似用戶對(duì)紅包、禮盒等元素的固有印象色彩。

這種配色邏輯的應(yīng)用就會(huì)忽略常規(guī)的色彩搭配思路，比如出現(xiàn)大量紅配綠的撞色，因?yàn)閲?guó)潮用綠色很常見(jiàn)，而優(yōu)惠元素又必須要用紅的，所以會(huì)將它們強(qiáng)行組合到一起使用。

色彩的應(yīng)用除了純色填充外，還會(huì)應(yīng)用大量的漸變、彌散色，增加色彩表現(xiàn)的豐富性。

最后就是黑色的應(yīng)用了，這類國(guó)潮設(shè)計(jì)的黑色應(yīng)用量是顯著高于常規(guī)設(shè)計(jì)的，包括按鈕、標(biāo)題、數(shù)字、卡片等元素，和背景的熒光色漸變形成鮮明的落差。

總結(jié)起來(lái)，國(guó)潮風(fēng)格就是應(yīng)用先對(duì)年輕、熱鬧的亮色為主填充頁(yè)面和模塊的背景，然后使用大面積的黑色來(lái)和這種“輕浮”的顏色對(duì)沖，讓畫面看起來(lái)雖然亂但是有重心，最后再使用臨近色和功能色作為輔助提升的層次感和豐富度。

二、國(guó)潮風(fēng)的字體應(yīng)用

除了顏色，第二個(gè)重點(diǎn)就是字體的應(yīng)用，這里的字體使用邏輯也和一般的 UI 設(shè)計(jì)思路背道而馳，所以對(duì)于很多基礎(chǔ)扎實(shí)的新手來(lái)說(shuō)也是很陌生的。

比如常規(guī)設(shè)計(jì)中我們會(huì)強(qiáng)調(diào)使用系統(tǒng)默認(rèn)字體，如蘋方、思源黑，或是安卓為主的設(shè)計(jì)使用 Mi、OPPO、VIVO 的字體都可以，因?yàn)檫@些是系統(tǒng)自帶字體，可以直接渲染出來(lái)，便于最終的開(kāi)發(fā)實(shí)現(xiàn)。

而今天的國(guó)潮風(fēng)格設(shè)計(jì)中顯然大量應(yīng)用了系統(tǒng)沒(méi)有的特殊字體類型，不惜通過(guò)內(nèi)置字體或切圖來(lái)實(shí)現(xiàn)，即為了畫面的效果進(jìn)一步增加開(kāi)發(fā)工作量。

這類字體的應(yīng)用有兩種方法，一種是原創(chuàng)設(shè)計(jì)，一種是使用第三方字體。不管應(yīng)用哪種方式，首先要理解國(guó)潮類字體的特征，再進(jìn)行相應(yīng)的設(shè)計(jì)和選擇。

通常這類設(shè)計(jì)風(fēng)格中畫面比較嘈雜，而需要獨(dú)立設(shè)計(jì)和選擇字體的文本通常是比較重要的信息，所以需要能被凸顯，并且在風(fēng)格上能和目前年輕潮流的調(diào)性匹配。所以字體往往形體得粗，而且筆畫要簡(jiǎn)單，字體大小前后均勻，修飾性元素和襯線也不能太復(fù)雜，才能提升文字的辨識(shí)度，比如下面這些案例。

第一種字體設(shè)計(jì)，如果沒(méi)有足夠的平面設(shè)計(jì)經(jīng)驗(yàn)建議可以直接忽略，因?yàn)樽煮w設(shè)計(jì)的難度對(duì)于 UI 設(shè)計(jì)師來(lái)講是超綱的，你很難做出整組符合場(chǎng)景需求的字體。

而第二種方式，選擇其它字體，則要重點(diǎn)注意字體的版權(quán)問(wèn)題，這幾年基于消費(fèi)市場(chǎng)對(duì)字體應(yīng)用需求的爆發(fā)，符合這類場(chǎng)景的字體類型也快速增加，有非常多的選擇。如果你們僅僅是練習(xí)還是做作品集隨便怎么用都行，但如果要正式上線，那么字體版權(quán)問(wèn)題就一定要檢查，要不然讓公司報(bào)銷買下來(lái)，要不然換字體。

下面是整理的一些適用的字體類型供參考：

三、國(guó)潮風(fēng)的圖形應(yīng)用

IP 形象和插畫也是經(jīng)常會(huì)使用的視覺(jué)元素之一，用于渲染頁(yè)面的主題、氛圍，提升畫面的趣味性，建立和用戶情緒的聯(lián)系。

這類圖形的應(yīng)用風(fēng)格可以分成兩個(gè)大類，一種是簡(jiǎn)約扁平風(fēng)格，一種是 3D 盲盒風(fēng)格。

簡(jiǎn)約扁平風(fēng)格不是指 B 端常用的看起來(lái) “土里土氣” 的互聯(lián)網(wǎng)扁平插畫，而是更簡(jiǎn)約、抽象的簡(jiǎn)版插畫風(fēng)格，通過(guò)大色塊、粗線條等方式勾勒出生動(dòng)、有趣的視覺(jué)元素。

這種繪畫風(fēng)格和目前流行的 IP 繪畫方式有很大的關(guān)聯(lián)，很多用戶喜聞樂(lè)見(jiàn)的形象或表情包都是由非常粗糙、簡(jiǎn)潔的線條筆觸創(chuàng)作而成。它們的成功不在于繪畫技法的優(yōu)異性，而是對(duì)情緒準(zhǔn)確的把握和輸出，讓用戶得以共情或被調(diào)動(dòng)情緒。

和簡(jiǎn)約相對(duì)的，就是更顯復(fù)雜的 3D 盲盒風(fēng)格，即使用 3D 軟件或 AI 生成的類似盲盒潮玩的立體視覺(jué)元素。

雖然這種風(fēng)格看起來(lái)更復(fù)雜，但是做起來(lái)卻是更簡(jiǎn)單的那種。因?yàn)橛脩魧?duì)插畫、形象的接受度有很大的玄學(xué)成分在里面，越簡(jiǎn)約抽象的圖形效果隨機(jī)性就越強(qiáng)，能被用戶接受的不確定性就更大，所以實(shí)際畫起來(lái)非常困難。

而以 C4D 為主的國(guó)潮 3D 建模+渲染路徑已經(jīng)非常成熟，不僅案例、素材、設(shè)置都有一大堆現(xiàn)成的，還可以直接使用 AIGC 軟件進(jìn)行批量生成，對(duì)應(yīng)的 Prompt 網(wǎng)上也一大堆，想要多少就能生成多少。

而在 3D 元素應(yīng)用中，也要盡量選擇簡(jiǎn)約的類型，建模不會(huì)太復(fù)雜包含過(guò)多的細(xì)節(jié)，渲染的方式也用比較常規(guī)平穩(wěn)的卡通風(fēng)格而不是過(guò)度擬真的光影還原，通過(guò)簡(jiǎn)化細(xì)節(jié)來(lái)融入本來(lái)就已經(jīng)非常復(fù)雜的界面。

所以這類應(yīng)用了 3D 元素的界面看多了并沒(méi)有太多的新意，因?yàn)槎际翘茁坊膱D形，很難調(diào)動(dòng)用戶情緒，僅僅是用來(lái)豐富頁(yè)面視覺(jué)樣式的工具而已。

但不管怎么說(shuō)，這些圖形的應(yīng)用可以作為點(diǎn)綴，但一定不要濫用，如果你的畫面看起來(lái)不夠有意思，那應(yīng)該把精力更多花在組件的設(shè)計(jì)中，而不是強(qiáng)行增加 3D 圖形，比如下面的 H5 界面案例。

四、國(guó)潮風(fēng)的輪廓應(yīng)用

上面說(shuō)了，畫面的豐富性不是圖形元素堆砌出來(lái)的，還和組件的應(yīng)用有很大的關(guān)系。如果組件都按官方那種中庸、嚴(yán)肅的方式設(shè)計(jì)，最后是沒(méi)辦法和前面色彩、字體、圖形元素結(jié)合起來(lái)的。

所以組件、控件的輪廓就開(kāi)始不走尋常路起來(lái)，應(yīng)用了各種奇形怪狀的輪廓，比如最常見(jiàn)的就是下面案例中邊緣的缺口設(shè)計(jì)。

再或者，破壞 “對(duì)齊” 感，故意使用層級(jí)、透視、縮放來(lái)制造錯(cuò)位，增加視覺(jué)的緊張感。

組件層面的設(shè)計(jì)難度最大，可以應(yīng)用的技巧和創(chuàng)意點(diǎn)也是最多的，想要提升界面整體質(zhì)量，最重要的部分就是花更多時(shí)間到組件的布局比例和輪廓的設(shè)計(jì)性上。

這點(diǎn)只能靠大家日常的積累和偶爾閃現(xiàn)的靈感了。

同時(shí)，在今天 UI 設(shè)計(jì)的方法中大量引用了運(yùn)營(yíng)設(shè)計(jì)中模塊設(shè)計(jì)的方式，兩者之間的界限也越來(lái)越模糊，所以想要找到合適的靈感可以參考運(yùn)營(yíng)頁(yè)面中的案例。

以上就是我們對(duì) UI 國(guó)潮風(fēng)格設(shè)計(jì)的總結(jié)，關(guān)注并總結(jié)這些領(lǐng)域，就可以很快在實(shí)踐中掌握它們的要點(diǎn)和套路。如果沒(méi)有經(jīng)驗(yàn)實(shí)在不知道該怎么下手，那么建議先專門針對(duì)這類風(fēng)格創(chuàng)建一個(gè)畫板，然后收集幾百?gòu)埻愋偷捻?yè)面找感覺(jué)，然后通過(guò)一定數(shù)量的臨摹來(lái)上手。

結(jié)尾

老實(shí)講翻這類案例的過(guò)程是很痛苦的，因?yàn)檫@種界面實(shí)在是太“花”了，高強(qiáng)度高頻次看下來(lái)我都要出現(xiàn)幻視了。而且站在個(gè)人角度，我也非常不喜歡這種設(shè)計(jì)傾向，因?yàn)樗诔问街髁x狂奔，是對(duì)年輕群體喜歡什么設(shè)計(jì)和風(fēng)格的刻板印象……

相信多數(shù)同學(xué)站在用戶角度上也不喜歡，但不喜歡歸不喜歡，這類設(shè)計(jì)的涌現(xiàn)證明了它在商業(yè)層面有真實(shí)的價(jià)值和需求（領(lǐng)導(dǎo)/客戶想要也是價(jià)值和需求），所以掌握這種設(shè)計(jì)能力是必要的，而且進(jìn)行合適的優(yōu)化再輸出到作品集中也可以得到更好的作品結(jié)果。

我們下篇再賤~

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」