點，不能平平庸庸；

在之前風向里，我有介紹過國內 C 端 APP 界面設計的趨勢，視覺越來越復雜，越來越平面化。

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

而目前應用最廣的風格類型，很難用一個固有的名詞去形容它，所以我用了 “國潮” 一詞。這個國潮不是帶有古風印記的國風潮流，而是國內品牌、廣告設計中獨立孕育的國產潮流……

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

雖然不是所有應用的設計必須跟隨潮流的腳步，或是在作品集中應用這類設計，但對于今天的 UI 設計師來說不掌握這種風格設計的技巧就奧特辣~

所以我們就要認識這類設計具有哪些風格的特點和設計技巧。

一、國潮風的色彩應用

在這類設計中，色彩的應用是最顯著的特征，比如下面這些案例，相信我們立馬會關注到它們豐富的色彩。

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

這是我在過去的配色分享中都會建議避開的色彩類型，因為它們太亮，既不適合作為文字、圖標的填充色，也不適合作為背景色。

而在國潮設計風格中，熒光色的應用非常普遍，并且看起來似乎并沒有不合理，對元素的可視性造成太大影響。原因就是為熒光色搭配了大量的—— 黑色，這也是我一直不建議直接使用的顏色。但因為國潮風格中直接放棄了簡約和挪走了奧卡姆，用以毒攻毒的方式形成了一套自洽的設計風格（負負得正）。

熒光色本身并不多，常用的色相總結起來就下面這些：綠、藍、黃、橙、紫、粉

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

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

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

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

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

二、國潮風的字體應用

除了顏色，第二個重點就是字體的應用，這里的字體使用邏輯也和一般的 UI 設計思路背道而馳，所以對于很多基礎扎實的新手來說也是很陌生的。

比如常規(guī)設計中我們會強調使用系統(tǒng)默認字體，如蘋方、思源黑，或是安卓為主的設計使用 Mi、OPPO、VIVO 的字體都可以，因為這些是系統(tǒng)自帶字體，可以直接渲染出來，便于最終的開發(fā)實現(xiàn)。

而今天的國潮風格設計中顯然大量應用了系統(tǒng)沒有的特殊字體類型，不惜通過內置字體或切圖來實現(xiàn)，即為了畫面的效果進一步增加開發(fā)工作量。

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

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

第一種字體設計，如果沒有足夠的平面設計經驗建議可以直接忽略，因為字體設計的難度對于 UI 設計師來講是超綱的，你很難做出整組符合場景需求的字體。

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

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

三、國潮風的圖形應用

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

這類圖形的應用風格可以分成兩個大類，一種是簡約扁平風格，一種是 3D 盲盒風格。

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

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

和簡約相對的，就是更顯復雜的 3D 盲盒風格，即使用 3D 軟件或 AI 生成的類似盲盒潮玩的立體視覺元素。

雖然這種風格看起來更復雜，但是做起來卻是更簡單的那種。因為用戶對插畫、形象的接受度有很大的玄學成分在里面，越簡約抽象的圖形效果隨機性就越強，能被用戶接受的不確定性就更大，所以實際畫起來非常困難。

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

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

所以這類應用了 3D 元素的界面看多了并沒有太多的新意，因為都是套路化的圖形，很難調動用戶情緒，僅僅是用來豐富頁面視覺樣式的工具而已。

但不管怎么說，這些圖形的應用可以作為點綴，但一定不要濫用，如果你的畫面看起來不夠有意思，那應該把精力更多花在組件的設計中，而不是強行增加 3D 圖形，比如下面的 H5 界面案例。

四、國潮風的輪廓應用

上面說了，畫面的豐富性不是圖形元素堆砌出來的，還和組件的應用有很大的關系。如果組件都按官方那種中庸、嚴肅的方式設計，最后是沒辦法和前面色彩、字體、圖形元素結合起來的。

所以組件、控件的輪廓就開始不走尋常路起來，應用了各種奇形怪狀的輪廓，比如最常見的就是下面案例中邊緣的缺口設計。

再或者，破壞 “對齊” 感，故意使用層級、透視、縮放來制造錯位，增加視覺的緊張感。

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

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

同時，在今天 UI 設計的方法中大量引用了運營設計中模塊設計的方式，兩者之間的界限也越來越模糊，所以想要找到合適的靈感可以參考運營頁面中的案例。

以上就是我們對 UI 國潮風格設計的總結，關注并總結這些領域，就可以很快在實踐中掌握它們的要點和套路。如果沒有經驗實在不知道該怎么下手，那么建議先專門針對這類風格創(chuàng)建一個畫板，然后收集幾百張同類型的頁面找感覺，然后通過一定數(shù)量的臨摹來上手。

結尾

老實講翻這類案例的過程是很痛苦的，因為這種界面實在是太“花”了，高強度高頻次看下來我都要出現(xiàn)幻視了。而且站在個人角度，我也非常不喜歡這種設計傾向，因為它在朝著形式主義狂奔，是對年輕群體喜歡什么設計和風格的刻板印象……

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

我們下篇再賤~

作者：超人的電話亭