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