在UI設(shè)計(jì)領(lǐng)域中，有一個(gè)“形、色、字、構(gòu)、質(zhì)、動(dòng)”的說法來描述UI設(shè)計(jì)的形式。但作為作者的我卻不認(rèn)同，因?yàn)橛幸韵聨讉€(gè)明顯的問題。

最近幾年，說不清是從什么時(shí)候開始，互聯(lián)網(wǎng)行業(yè)做設(shè)計(jì)的小圈子里大家逐漸喜歡用“形、色、字、構(gòu)、質(zhì)、動(dòng)”來概括UI設(shè)計(jì)的形式，分別對(duì)應(yīng)UI設(shè)計(jì)的造型、色彩、文字、布局、質(zhì)感與動(dòng)效。有些同學(xué)喜歡在陳述設(shè)計(jì)方案、構(gòu)建設(shè)計(jì)語(yǔ)言的時(shí)候套用這個(gè)框架，但我每次看到有人用形色字構(gòu)質(zhì)講方案，都有一種牽強(qiáng)附會(huì)的感覺。尤其是造型、質(zhì)感和構(gòu)成，因?yàn)閁I的同質(zhì)化，這幾塊基本沒什么可講的了。構(gòu)成按說很重要，但Ui設(shè)計(jì)最多也就講講柵格吧，質(zhì)感也很重要，UI設(shè)計(jì)最多也就能講講投影大小。

我不喜歡“形色字構(gòu)質(zhì)動(dòng)”，不是因?yàn)樗鼪]有權(quán)威的設(shè)計(jì)理論書籍或者知名設(shè)計(jì)團(tuán)隊(duì)來做背書，而是因?yàn)檫@個(gè)框架非常膚淺表面、牽強(qiáng)附會(huì)。

我不喜歡“形色字構(gòu)質(zhì)動(dòng)”，因?yàn)樗嬖谝韵聨讉€(gè)明顯的問題。這使得它僅僅適合用于UI設(shè)計(jì)的入門學(xué)習(xí)，而不適用于中大型設(shè)計(jì)方案的詮釋和設(shè)計(jì)作品集的包裝等場(chǎng)景。

一、“形色字構(gòu)質(zhì)動(dòng)”淺顯，經(jīng)不起推敲

“形色字構(gòu)質(zhì)”是用美術(shù)生的語(yǔ)言和視角來理解UI設(shè)計(jì)，美術(shù)生可以用它來UI入門，但沒法用它來進(jìn)行設(shè)計(jì)進(jìn)階。

我覺得這個(gè)事情有點(diǎn)好玩，“形色字構(gòu)質(zhì)”本質(zhì)上應(yīng)該是用美術(shù)的語(yǔ)言來理解視覺設(shè)計(jì)，結(jié)果呢，這個(gè)東西在視覺和運(yùn)營(yíng)設(shè)計(jì)中沒有得到應(yīng)用，反而在UI設(shè)計(jì)中得到了很廣泛的應(yīng)用。

這是為什么呢？難道是因?yàn)橐曈X設(shè)計(jì)師們不像 UI 設(shè)計(jì)師這么喜歡討論問，動(dòng)不動(dòng)就進(jìn)行一次前后差別細(xì)微的、需要拆開仔細(xì)論證才能發(fā)現(xiàn)區(qū)別的設(shè)計(jì)語(yǔ)言改版？

視覺設(shè)計(jì)師們會(huì)討論造型和色彩，會(huì)討論字體設(shè)計(jì)，會(huì)討論構(gòu)圖和質(zhì)感，但不會(huì)用“形色字構(gòu)質(zhì)”作為框架概括他們的設(shè)計(jì)。因?yàn)橐曈X設(shè)計(jì)師有更豐富的平面設(shè)計(jì)理論做支撐。

仔細(xì)看看，“形色字構(gòu)質(zhì)動(dòng)”根本經(jīng)不起推敲。比如現(xiàn)在我們要用他來拆解或構(gòu)建一套 UI 界面，那么我們將很快會(huì)面臨很多尷尬的問題。

• 形：一套 UI 界面能做哪些造型上的嘗試呢？呃，看了一圈，我們只能做個(gè)圖標(biāo)，為 button 定義個(gè)圓角弧度。但這就是在給 UI 界面做造型上的設(shè)計(jì)嗎？
• 字：等一下，字不也有造形、色彩嗎？他不是應(yīng)該跟圖標(biāo)一樣被對(duì)待嗎？除了閱讀器產(chǎn)品，絕大多數(shù) UI 設(shè)計(jì)對(duì)中文字體的控制都非常有限，只能使用系統(tǒng)默認(rèn)字體，然后調(diào)整個(gè)字號(hào)、字重、行間距、段間距。
• 構(gòu)：學(xué)畫畫的時(shí)候講“構(gòu)圖”，學(xué)攝影的時(shí)候講“構(gòu)圖”，學(xué)平面設(shè)計(jì)的時(shí)候講的“構(gòu)成”，似乎都與 UI 設(shè)計(jì)里講“構(gòu)”時(shí)唯一能講的柵格系統(tǒng)大不相同。
• 質(zhì)：質(zhì)感在這個(gè)框架里最像是湊數(shù)的。當(dāng)年做擬物化UI的時(shí)候質(zhì)感還是可以講一講的，現(xiàn)在扁平化和同質(zhì)化的 UI 風(fēng)格根本沒法講質(zhì)感，最多也就講個(gè)投影咯。
• 動(dòng)：動(dòng)效在 UI 里面確實(shí)值得講一講的，但尷尬的一幕又發(fā)生了：在座的 UI 設(shè)計(jì)師、UX 設(shè)計(jì)師，都不擅長(zhǎng)動(dòng)效，只是能做一點(diǎn)點(diǎn)而已。

所以你會(huì)發(fā)現(xiàn)，“形色字構(gòu)質(zhì)動(dòng)”只是一種解構(gòu)，是一種沒有邏輯又毫無意義（意義很小接近于無）的UI解構(gòu)。

二、“形色字構(gòu)質(zhì)”不是一個(gè)好的思維框架

辛向陽(yáng)老師提出的交互設(shè)計(jì)五要素，“用戶、場(chǎng)景、媒介、目標(biāo)、行為”，是一個(gè)好的思維框架?！队脩趔w驗(yàn)的要素》把產(chǎn)品設(shè)計(jì)劃分為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，是一個(gè)好的思維框架。英國(guó)設(shè)計(jì)委員會(huì)提出的雙鉆設(shè)計(jì)模型將設(shè)計(jì)的過程歸納為調(diào)研、整合、構(gòu)思、實(shí)現(xiàn)，將設(shè)計(jì)的過程劃分為兩次發(fā)散與收攏，它是一個(gè)好的思維框架。

這些好的設(shè)計(jì)思維框架，在提出時(shí)經(jīng)過了反復(fù)的驗(yàn)證，在傳播應(yīng)用時(shí)在不同行業(yè)和地區(qū)經(jīng)過了長(zhǎng)時(shí)間的實(shí)踐，最重要的是它們足夠抽象，使用這些框架可以幫你思考、解決設(shè)計(jì)問題。

那“形色字構(gòu)質(zhì)”最早是由誰提出來的呢？我找了很久并沒有找到有代表性的說法和出處，在百度上搜索到的最早的出處是2018 年百度的一位視覺設(shè)計(jì)師的一篇文章《從“形色字構(gòu)質(zhì)動(dòng)”來評(píng)價(jià)“百度閱讀Pro”的視覺設(shè)計(jì)》（https://baijiahao.baidu.com/s?id=1616461343352352439&wfr=spider&for=pc）——這篇文章似乎并沒有什么問題，首先他是用這個(gè)框架來“評(píng)價(jià)”，而不是構(gòu)建，也不是評(píng)審，其次他評(píng)價(jià)的僅僅是一個(gè)產(chǎn)品的視覺設(shè)計(jì)。

那“形色字構(gòu)質(zhì)”能用來解決設(shè)計(jì)問題，套用到日常的 UI 設(shè)計(jì)工作中嗎？

不能。

因?yàn)樯厦娴?節(jié)提到的一些尷尬， 很遺憾它并不能用來思考問題，因?yàn)槟阋挥盟鼇硭伎迹桶l(fā)現(xiàn)根本思考不下去。同時(shí)他也不能幫你解決問題，如果你要為某個(gè)產(chǎn)品創(chuàng)建一套全新的 UI，你分別從“形、色、字、構(gòu)、質(zhì)”這五個(gè)方面去努力，那么大概率會(huì)以失敗告終。因?yàn)檫@五個(gè)方面維度混亂、排序詭異、互相重疊。

所以說，“形色字構(gòu)質(zhì)動(dòng)”并不能幫你解決設(shè)計(jì)過程中的實(shí)際問題，也不能用來做設(shè)計(jì)方案完成后的設(shè)計(jì)評(píng)審。如果你要做設(shè)計(jì)方案的闡述，我也非常不建議使用這個(gè)框架，因?yàn)橛泻芏嗫蚣芏急人玫枚唷?/p>

三、“形色字構(gòu)質(zhì)”把 UI 設(shè)計(jì)的交互屬性進(jìn)行了剝離，存在嚴(yán)重缺陷

說“形色字構(gòu)質(zhì)”不是好的UI思維框架，還有個(gè)重要的原因，那就是他存在很嚴(yán)重的缺陷。它把UI設(shè)計(jì)的交互屬性完全剝離了出去。如果長(zhǎng)期用這個(gè)框架來思考UI設(shè)計(jì)，那么會(huì)越做越局限。

我們這個(gè)混亂的行業(yè)目前已經(jīng)成功把UI設(shè)計(jì)與交互設(shè)計(jì)進(jìn)行了粗暴地拆分?；谶@種粗暴的拆分，UI 設(shè)計(jì)師似乎更多地只需要考慮視覺表現(xiàn)層的部分、然后跟開發(fā)做好協(xié)同就可以了。UI設(shè)計(jì)等于數(shù)字產(chǎn)品的視覺設(shè)計(jì)嗎？肯定不是。

但仔細(xì)想一下，數(shù)字產(chǎn)品的 UI 設(shè)計(jì)其實(shí)是建立在交互設(shè)計(jì)的基礎(chǔ)上的。用戶界面的全稱是用戶交互界面，所有的UI 都是為了與用戶交互而存在的。而不是像一個(gè)平面設(shè)計(jì)作品一樣，更多訴諸于視覺與情感，而與用戶的行為不直接發(fā)生關(guān)聯(lián)。UI 設(shè)計(jì)必須要考慮交互問題，從一開始就得考慮。

總之，“形色字構(gòu)質(zhì)動(dòng)”，并不是設(shè)計(jì)方法，也不是思維框架。而是在設(shè)計(jì)完成后，對(duì)外解釋或包裝設(shè)計(jì)時(shí)才會(huì)用的工具，一個(gè)淺顯的的工具。需要謹(jǐn)慎使用，或者盡量不使用。

如果你要向非設(shè)計(jì)專業(yè)的人來講解方案，也許他還有那么一點(diǎn)用處。但如果講解對(duì)象是設(shè)計(jì)專業(yè)的人，那么這個(gè)框架可能并不會(huì)幫到你。所以如果你要包裝自己的作品集，我建議最好不要用。因?yàn)楝F(xiàn)在，它可能并不能起到什么“包裝”效果。