別再講“形色字構(gòu)質(zhì)動(dòng)”了
在UI設(shè)計(jì)領(lǐng)域中,有一個(gè)“形、色、字、構(gòu)、質(zhì)、動(dòng)”的說(shuō)法來(lái)描述UI設(shè)計(jì)的形式。但作為作者的我卻不認(rèn)同,因?yàn)橛幸韵聨讉€(gè)明顯的問(wèn)題。
最近幾年,說(shuō)不清是從什么時(shí)候開(kāi)始,互聯(lián)網(wǎng)行業(yè)做設(shè)計(jì)的小圈子里大家逐漸喜歡用“形、色、字、構(gòu)、質(zhì)、動(dòng)”來(lái)概括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ì)的感覺(jué)。尤其是造型、質(zhì)感和構(gòu)成,因?yàn)閁I的同質(zhì)化,這幾塊基本沒(méi)什么可講的了。構(gòu)成按說(shuō)很重要,但Ui設(shè)計(jì)最多也就講講柵格吧,質(zhì)感也很重要,UI設(shè)計(jì)最多也就能講講投影大小。
我不喜歡“形色字構(gòu)質(zhì)動(dòng)”,不是因?yàn)樗鼪](méi)有權(quán)威的設(shè)計(jì)理論書籍或者知名設(shè)計(jì)團(tuán)隊(duì)來(lái)做背書,而是因?yàn)檫@個(gè)框架非常膚淺表面、牽強(qiáng)附會(huì)。
我不喜歡“形色字構(gòu)質(zhì)動(dòng)”,因?yàn)樗嬖谝韵聨讉€(gè)明顯的問(wèn)題。這使得它僅僅適合用于UI設(shè)計(jì)的入門學(xué)習(xí),而不適用于中大型設(shè)計(jì)方案的詮釋和設(shè)計(jì)作品集的包裝等場(chǎng)景。
一、“形色字構(gòu)質(zhì)動(dòng)”淺顯,經(jīng)不起推敲
“形色字構(gòu)質(zhì)”是用美術(shù)生的語(yǔ)言和視角來(lái)理解UI設(shè)計(jì),美術(shù)生可以用它來(lái)UI入門,但沒(méi)法用它來(lái)進(jìn)行設(shè)計(jì)進(jìn)階。
我覺(jué)得這個(gè)事情有點(diǎn)好玩,“形色字構(gòu)質(zhì)”本質(zhì)上應(yīng)該是用美術(shù)的語(yǔ)言來(lái)理解視覺(jué)設(shè)計(jì),結(jié)果呢,這個(gè)東西在視覺(jué)和運(yùn)營(yíng)設(shè)計(jì)中沒(méi)有得到應(yīng)用,反而在UI設(shè)計(jì)中得到了很廣泛的應(yīng)用。
這是為什么呢?難道是因?yàn)橐曈X(jué)設(shè)計(jì)師們不像 UI 設(shè)計(jì)師這么喜歡討論問(wèn),動(dòng)不動(dòng)就進(jìn)行一次前后差別細(xì)微的、需要拆開(kāi)仔細(xì)論證才能發(fā)現(xiàn)區(qū)別的設(shè)計(jì)語(yǔ)言改版?
視覺(jué)設(shè)計(jì)師們會(huì)討論造型和色彩,會(huì)討論字體設(shè)計(jì),會(huì)討論構(gòu)圖和質(zhì)感,但不會(huì)用“形色字構(gòu)質(zhì)”作為框架概括他們的設(shè)計(jì)。因?yàn)橐曈X(jué)設(shè)計(jì)師有更豐富的平面設(shè)計(jì)理論做支撐。
仔細(xì)看看,“形色字構(gòu)質(zhì)動(dòng)”根本經(jīng)不起推敲。比如現(xiàn)在我們要用他來(lái)拆解或構(gòu)建一套 UI 界面,那么我們將很快會(huì)面臨很多尷尬的問(wèn)題。
- 形:一套 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)格根本沒(méi)法講質(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),是一種沒(méi)有邏輯又毫無(wú)意義(意義很小接近于無(wú))的UI解構(gòu)。
二、“形色字構(gòu)質(zhì)”不是一個(gè)好的思維框架
辛向陽(yáng)老師提出的交互設(shè)計(jì)五要素,“用戶、場(chǎng)景、媒介、目標(biāo)、行為”,是一個(gè)好的思維框架。《用戶體驗(yàn)的要素》把產(chǎn)品設(shè)計(jì)劃分為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層,是一個(gè)好的思維框架。英國(guó)設(shè)計(jì)委員會(huì)提出的雙鉆設(shè)計(jì)模型將設(shè)計(jì)的過(guò)程歸納為調(diào)研、整合、構(gòu)思、實(shí)現(xiàn),將設(shè)計(jì)的過(guò)程劃分為兩次發(fā)散與收攏,它是一個(gè)好的思維框架。
這些好的設(shè)計(jì)思維框架,在提出時(shí)經(jīng)過(guò)了反復(fù)的驗(yàn)證,在傳播應(yīng)用時(shí)在不同行業(yè)和地區(qū)經(jīng)過(guò)了長(zhǎng)時(shí)間的實(shí)踐,最重要的是它們足夠抽象,使用這些框架可以幫你思考、解決設(shè)計(jì)問(wèn)題。
那“形色字構(gòu)質(zhì)”最早是由誰(shuí)提出來(lái)的呢?我找了很久并沒(méi)有找到有代表性的說(shuō)法和出處,在百度上搜索到的最早的出處是2018 年百度的一位視覺(jué)設(shè)計(jì)師的一篇文章《從“形色字構(gòu)質(zhì)動(dòng)”來(lái)評(píng)價(jià)“百度閱讀Pro”的視覺(jué)設(shè)計(jì)》(https://baijiahao.baidu.com/s?id=1616461343352352439&wfr=spider&for=pc)——這篇文章似乎并沒(méi)有什么問(wèn)題,首先他是用這個(gè)框架來(lái)“評(píng)價(jià)”,而不是構(gòu)建,也不是評(píng)審,其次他評(píng)價(jià)的僅僅是一個(gè)產(chǎn)品的視覺(jué)設(shè)計(jì)。
那“形色字構(gòu)質(zhì)”能用來(lái)解決設(shè)計(jì)問(wèn)題,套用到日常的 UI 設(shè)計(jì)工作中嗎?
不能。
因?yàn)樯厦娴?節(jié)提到的一些尷尬, 很遺憾它并不能用來(lái)思考問(wèn)題,因?yàn)槟阋挥盟鼇?lái)思考,就發(fā)現(xiàn)根本思考不下去。同時(shí)他也不能幫你解決問(wèn)題,如果你要為某個(gè)產(chǎn)品創(chuàng)建一套全新的 UI,你分別從“形、色、字、構(gòu)、質(zhì)”這五個(gè)方面去努力,那么大概率會(huì)以失敗告終。因?yàn)檫@五個(gè)方面維度混亂、排序詭異、互相重疊。
所以說(shuō),“形色字構(gòu)質(zhì)動(dòng)”并不能幫你解決設(shè)計(jì)過(guò)程中的實(shí)際問(wèn)題,也不能用來(lái)做設(shè)計(jì)方案完成后的設(shè)計(jì)評(píng)審。如果你要做設(shè)計(jì)方案的闡述,我也非常不建議使用這個(gè)框架,因?yàn)橛泻芏嗫蚣芏急人玫枚唷?/p>
三、“形色字構(gòu)質(zhì)”把 UI 設(shè)計(jì)的交互屬性進(jìn)行了剝離,存在嚴(yán)重缺陷
說(shuō)“形色字構(gòu)質(zhì)”不是好的UI思維框架,還有個(gè)重要的原因,那就是他存在很嚴(yán)重的缺陷。它把UI設(shè)計(jì)的交互屬性完全剝離了出去。如果長(zhǎng)期用這個(gè)框架來(lái)思考UI設(shè)計(jì),那么會(huì)越做越局限。
我們這個(gè)混亂的行業(yè)目前已經(jīng)成功把UI設(shè)計(jì)與交互設(shè)計(jì)進(jìn)行了粗暴地拆分?;谶@種粗暴的拆分,UI 設(shè)計(jì)師似乎更多地只需要考慮視覺(jué)表現(xiàn)層的部分、然后跟開(kāi)發(fā)做好協(xié)同就可以了。UI設(shè)計(jì)等于數(shù)字產(chǎn)品的視覺(jué)設(shè)計(jì)嗎?肯定不是。
但仔細(xì)想一下,數(shù)字產(chǎn)品的 UI 設(shè)計(jì)其實(shí)是建立在交互設(shè)計(jì)的基礎(chǔ)上的。用戶界面的全稱是用戶交互界面,所有的UI 都是為了與用戶交互而存在的。而不是像一個(gè)平面設(shè)計(jì)作品一樣,更多訴諸于視覺(jué)與情感,而與用戶的行為不直接發(fā)生關(guān)聯(lián)。UI 設(shè)計(jì)必須要考慮交互問(wèn)題,從一開(kāi)始就得考慮。
總之,“形色字構(gòu)質(zhì)動(dòng)”,并不是設(shè)計(jì)方法,也不是思維框架。而是在設(shè)計(jì)完成后,對(duì)外解釋或包裝設(shè)計(jì)時(shí)才會(huì)用的工具,一個(gè)淺顯的的工具。需要謹(jǐn)慎使用,或者盡量不使用。
如果你要向非設(shè)計(jì)專業(yè)的人來(lái)講解方案,也許他還有那么一點(diǎn)用處。但如果講解對(duì)象是設(shè)計(jì)專業(yè)的人,那么這個(gè)框架可能并不會(huì)幫到你。所以如果你要包裝自己的作品集,我建議最好不要用。因?yàn)楝F(xiàn)在,它可能并不能起到什么“包裝”效果。
本文由人人都是產(chǎn)品經(jīng)理作者【柴林】,微信公眾號(hào):【柴林的設(shè)計(jì)筆記】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!