用王家衛(wèi)的風(fēng)格，來(lái)做 UI 設(shè)計(jì)，行得通嗎？

針對(duì)這個(gè)問(wèn)題，我們先做了一個(gè)定向的設(shè)計(jì)師小調(diào)研。超過(guò)一半的受訪者表示： 不樂(lè)觀。

在認(rèn)知當(dāng)中，王家衛(wèi)式的風(fēng)格是濃郁飽滿、含糊曖昧的，加之其慣用的蒙太奇剪輯手法，使其電影“風(fēng)格大于敘事，氛圍大于邏輯”，與近年流行的功能極簡(jiǎn)主義 UI 設(shè)計(jì)原則大相徑庭。

王家衛(wèi)的風(fēng)格，在平面設(shè)計(jì)中，靈。

在 UI 設(shè)計(jì)中，怕是搞不掂。

于是，我們開(kāi)始 看電視 研究學(xué)習(xí)，并找到了我們?cè)?UI 設(shè)計(jì)中最能化用的兩個(gè)設(shè)計(jì)元素： 配色和字體。

“紅綠”是王家衛(wèi)的舒適區(qū)，“晦暗”是王家衛(wèi)的風(fēng)格，“對(duì)比”是王家衛(wèi)的手段。

王家衛(wèi)電影中的色彩飽滿、濃烈，而且經(jīng)常采用偏色濾鏡，這種對(duì)色彩的獨(dú)特處理方式也可以為 UI 設(shè)計(jì)提供靈感。

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

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

「圖片取色」插件

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

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

「光譜配色」 插件

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

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

字體對(duì)王家衛(wèi)來(lái)說(shuō)至關(guān)重要。

畢業(yè)于平面設(shè)計(jì)系的王家衛(wèi)深諳設(shè)計(jì)中文字的直觀力量，這表現(xiàn)在他喜歡 在電影中用純文字畫(huà)面、用“印刷字”，以及用“很大的字”。

從 1988 年的《旺角卡門(mén)》，到 2000 年的《花樣年華》，再到 2023 年的《繁花》，無(wú)論外面世界的設(shè)計(jì)風(fēng)格如何變化，王家衛(wèi)的作品中都在竭力 用“印刷體”還原時(shí)代的特征。

這些特殊、醒目的字體是構(gòu)建王家衛(wèi)藝術(shù)世界的一部分，更構(gòu)建了我們對(duì)于王家衛(wèi)作品的群體記憶。

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

「字加」 插件

推薦理由： 內(nèi)置萬(wàn)款精品字體，更有字體查找、一鍵換字、字體管理、商用授權(quán)等實(shí)用服務(wù)，充分滿足設(shè)計(jì)師字體實(shí)用需求。

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

「字由」 插件

推薦理由： 內(nèi)置 3000+精選字體，千款免費(fèi)字體

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

整體而言，王家衛(wèi)對(duì)于“濃油赤醬”卻頹廢的配色的青睞，“風(fēng)格大于邏輯”的敘事方式，其濃烈、小眾的個(gè)人風(fēng)格意味著其美學(xué)并不適用于以快速、簡(jiǎn)潔、直觀為設(shè)計(jì)原則的大眾互聯(lián)網(wǎng)產(chǎn)品。 因此：

① 我們可以在特定的產(chǎn)品中大面積地化用王家衛(wèi)美學(xué)。

這樣的設(shè)計(jì)美學(xué)卻很適用于時(shí)尚、影視、音樂(lè)、雜志等文化社區(qū)類(lèi)產(chǎn)品，輕松營(yíng)造出曖昧的藝術(shù)氛圍。 在這類(lèi)產(chǎn)品的設(shè)計(jì)中可以大膽使用其“糜紅”、“頹青”的配色風(fēng)格。

② 也可以在常規(guī) UI 設(shè)計(jì)中小面積地使用一些“王家衛(wèi)技巧”

無(wú)論是 UI 設(shè)計(jì)還是服裝設(shè)計(jì)、平面設(shè)計(jì)、建筑設(shè)計(jì)，美的基本原則總是相同，在構(gòu)建王家衛(wèi)美學(xué)中的一些技巧也都可以為我們的 UI 設(shè)計(jì)所用。

在互聯(lián)網(wǎng)產(chǎn)品更加細(xì)分、更加需要?jiǎng)?chuàng)新的趨勢(shì)下，如何用設(shè)計(jì)的力量，尋找實(shí)用之上的美學(xué)表達(dá)，從而為產(chǎn)品構(gòu)建特殊的品牌記憶，也值得我們思索。