如何用“王家衛美學”做 UI 設計？模版來了！

用王家衛的風格，來做 UI 設計，行得通嗎？

針對這個問題，我們先做了一個定向的設計師小調研。超過一半的受訪者表示： 不樂觀。

在認知當中，王家衛式的風格是濃郁飽滿、含糊曖昧的，加之其慣用的蒙太奇剪輯手法，使其電影“風格大于敘事，氛圍大于邏輯”，與近年流行的功能極簡主義 UI 設計原則大相徑庭。

王家衛的風格，在平面設計中，靈。

在 UI 設計中，怕是搞不掂。

于是，我們開始 看電視 研究學習，并找到了我們在 UI 設計中最能化用的兩個設計元素： 配色和字體。

“紅綠”是王家衛的舒適區，“晦暗”是王家衛的風格，“對比”是王家衛的手段。

王家衛電影中的色彩飽滿、濃烈，而且經常采用偏色濾鏡，這種對色彩的獨特處理方式也可以為 UI 設計提供靈感。

我們從《繁花》將近 60 張海報/劇照中 ，篩選出了 28 張圖片并提取了配色 ，又從其中尋找出最常用的配色規律，組合出了 將近 10 套設計方案 ，最后挑選出了 4 組界面設計案例。

上述的配色方案&設計稿源文件都整理好啦， 點下方鏈接獲?。?br /> https://js.design/f/2KEZUG?p=X8epHgnP6J&mode=design&source

「圖片取色」插件

推薦理由： 選取上傳自己喜歡的電影/海報。該插件即可智能識別圖片顏色并生成調色板，方便確定配色方案，一鍵取色。

點擊鏈接獲取插件：
https://js.design/community?category=detail&type=plugin

「光譜配色」 插件

推薦理由： “五彩斑斕的黑”到底怎么調？通過這個插件，選取基色，即可自動創建色調、陰影、飽和度及純度的色彩變體，同時插件還將自動推薦 6 種配色方案。

點擊下方鏈接獲取插件：
https://js.design/community?category=detail&type=plugin&id=62a331d07e0b8f1a8dc1793d&source=uisdc&plan=18

字體對王家衛來說至關重要。

畢業于平面設計系的王家衛深諳設計中文字的直觀力量，這表現在他喜歡 在電影中用純文字畫面、用“印刷字”，以及用“很大的字”。

從 1988 年的《旺角卡門》，到 2000 年的《花樣年華》，再到 2023 年的《繁花》，無論外面世界的設計風格如何變化，王家衛的作品中都在竭力 用“印刷體”還原時代的特征。

這些特殊、醒目的字體是構建王家衛藝術世界的一部分，更構建了我們對于王家衛作品的群體記憶。

此外，與“繁花”二字同樣借鑒了魯迅萌芽字體的 「逐浪萌芽字」 也已經上傳到即時設計官方內置字體， 搜索「逐浪萌芽字」即可一鍵 get 同款！

「字加」 插件

推薦理由： 內置萬款精品字體，更有字體查找、一鍵換字、字體管理、商用授權等實用服務，充分滿足設計師字體實用需求。

點擊鏈接獲取插件：
https://js.design/community?category=detail&type=plugin

「字由」 插件

推薦理由： 內置 3000+精選字體，千款免費字體

點擊鏈接獲取插件：
https://js.design/community?category=detail&type=plugin

整體而言，王家衛對于“濃油赤醬”卻頹廢的配色的青睞，“風格大于邏輯”的敘事方式，其濃烈、小眾的個人風格意味著其美學并不適用于以快速、簡潔、直觀為設計原則的大眾互聯網產品。 因此：

① 我們可以在特定的產品中大面積地化用王家衛美學。

這樣的設計美學卻很適用于時尚、影視、音樂、雜志等文化社區類產品，輕松營造出曖昧的藝術氛圍。 在這類產品的設計中可以大膽使用其“糜紅”、“頹青”的配色風格。

② 也可以在常規 UI 設計中小面積地使用一些“王家衛技巧”

無論是 UI 設計還是服裝設計、平面設計、建筑設計，美的基本原則總是相同，在構建王家衛美學中的一些技巧也都可以為我們的 UI 設計所用。

在互聯網產品更加細分、更加需要創新的趨勢下，如何用設計的力量，尋找實用之上的美學表達，從而為產品構建特殊的品牌記憶，也值得我們思索。