2020年，論交互設(shè)計(jì)師的消失

轉(zhuǎn)自城中村群租房：《論交互設(shè)計(jì)師的死掉》，作者李大毛

你在面試的時(shí)候肯定被問(wèn)過(guò)一個(gè)問(wèn)題：你的職業(yè)規(guī)劃是什么。這個(gè)問(wèn)題不好回答，你得說(shuō)一個(gè)困難但又切實(shí)可行的計(jì)劃，顯得你志向遠(yuǎn)大又腳踏實(shí)地；還得隱藏好你打算鍍兩年金就跳槽的小算盤。但是說(shuō)實(shí)話，即使沒(méi)人問(wèn)我，我也一直在思考這個(gè)問(wèn)題，我們?cè)O(shè)計(jì)師的價(jià)值體現(xiàn)在哪，將來(lái)可以怎么發(fā)展。

首先需要說(shuō)明，今天我說(shuō)的設(shè)計(jì)師指的是 UI、交互、用戶體驗(yàn)設(shè)計(jì)師，不包括視覺設(shè)計(jì)。

設(shè)計(jì)團(tuán)隊(duì)說(shuō)了好久的組件化，這到底是什么意思？為什么這么久還在提？

為了說(shuō)清楚這件事，我想從這個(gè)職業(yè)的過(guò)去、現(xiàn)在和將來(lái)分別講一下。

UI/交互設(shè)計(jì)師的發(fā)展

在很多年前，并沒(méi)有 UI 設(shè)計(jì)師的說(shuō)法，有的是網(wǎng)頁(yè)設(shè)計(jì)師。那時(shí)候他們用網(wǎng)頁(yè)三劍客：Flash、Dreamweaver、Fireworks，還有 Photoshop。當(dāng)然作為一個(gè) 90 后對(duì)那段歷史并不了解，我們直接快進(jìn)。

iPhone 4 開啟了 App 的熱潮，突然間 UI 設(shè)計(jì)成了一個(gè)熱門職位。13 年扁平化的 iOS 7 發(fā)布開啟了扁平極簡(jiǎn)化風(fēng)潮，14 年易上手的矢量圖繪制軟件 Sketch 3 發(fā)布，UI 設(shè)計(jì)的門檻極大地降低，加上金錢的誘惑，吸引了超多人進(jìn)入這個(gè)行業(yè)，我也不例外。

Sketch 取代了 Adobe 系列成為了這個(gè)領(lǐng)域的霸主。它只有 Mac 版，所以我們得感謝 Sketch 讓我們用上 iMac。從某種層面上講，UI 設(shè)計(jì)的方式并沒(méi)有本質(zhì)上的變化。都是在繪圖軟件上繪制，再把參數(shù)通過(guò)各種方式交給開發(fā)。用什么軟件畫其實(shí)不重要。

設(shè)計(jì)組件化

為了提高效率，增強(qiáng)與開發(fā)的協(xié)作，這兩年設(shè)計(jì)圈有個(gè)詞很火，就是「組件化」。

這個(gè)思路最早可以追溯到 Brad Frost 提出的「原子化設(shè)計(jì)」。就是按照邏輯層級(jí)，將元素從低級(jí)到高級(jí)組合起來(lái)，就像分子由原子組成，原子有原子核和電子，原子核里有質(zhì)子和中子。

比如按鈕和文本框都是原子，它們組成一個(gè)分子搜索框，然后可以和其他分子繼續(xù)組成更大的模塊。把這些模塊作成可以給其他人引用的公用組件，設(shè)計(jì)界面不再是像畫插畫一樣隨意，而是得從現(xiàn)有的組件里選擇然后拼接。存儲(chǔ)這些公用組件的文件就叫組件庫(kù)。

以前設(shè)計(jì)界面想怎么畫怎么畫，現(xiàn)在你得從現(xiàn)有組件庫(kù)里挑出需要的組件再拼接，除非是組件庫(kù)里沒(méi)有你需要的，才能創(chuàng)建新元素。

工具的支持

模塊化的思維需要設(shè)計(jì)工具的支持。Sketch 有相應(yīng)功能，但是遠(yuǎn)遠(yuǎn)不夠，而且使用起來(lái)很不靈活。

有很多產(chǎn)品在挑戰(zhàn) Sketch 的地位。

• Adobe 推出了 XD。
• 從 Sketch 插件起家的 Invision 推出了 Invision Studio。
• 跟 Sketch 同樣來(lái)自荷蘭的公司開發(fā)的 Framer X，可以寫代碼為設(shè)計(jì)添加交互邏輯。很有創(chuàng)意，但可惜使用門檻太高。
• Webflow，可以把設(shè)計(jì)直接轉(zhuǎn)化成托管的網(wǎng)站，很強(qiáng)大，國(guó)外比較流行。

其中要特別提一下 2019 年的黑馬：Figma。這是一個(gè)在國(guó)外非?；鸬脑O(shè)計(jì)工具，19 年我也嘗試讓我們團(tuán)隊(duì)切換到 Figma 上來(lái)。還在上面做了一套新的組件庫(kù)，在一些項(xiàng)目中完全用 Figma 來(lái)協(xié)作。

推這個(gè)的理由是：

• 基于 Web，數(shù)據(jù)實(shí)時(shí)同步，可以多人在一個(gè)文檔里協(xié)作；
• 能找到任何一個(gè)歷史版本；
• 性能更好（前提是網(wǎng)絡(luò)夠好）；
• 最重要的是 Figma 在組件功能上的設(shè)計(jì)更強(qiáng)大、合理，而且靈活。

后來(lái)因?yàn)橐恍┰驔](méi)有推進(jìn)下去。當(dāng)然，F(xiàn)igma 也有缺點(diǎn)，Sketch 也在不斷優(yōu)化?？梢灶A(yù)見的是，這些設(shè)計(jì)軟件的組件功能一定會(huì)越來(lái)越好用。

編者注：關(guān)于 Figma 的強(qiáng)大，看這篇：

讓產(chǎn)品經(jīng)理拼組件

這就帶來(lái)了一個(gè)問(wèn)題：如果產(chǎn)品設(shè)計(jì)的工作就是把組件拼起來(lái)，那我們存在的意義是什么？留個(gè)人負(fù)責(zé)制作組件，把交互設(shè)計(jì)的工作交給產(chǎn)品經(jīng)理行不行？

現(xiàn)在肯定不行。我們的確比產(chǎn)品經(jīng)理更懂用戶體驗(yàn)。但這些知識(shí)和設(shè)計(jì)技法，是否多到產(chǎn)品經(jīng)理無(wú)法掌握？如果教他們?cè)O(shè)計(jì)理論、軟件，再給他們一個(gè)完善的組件庫(kù)，他們能否跳過(guò)線框圖原型的階段，直接交付給開發(fā)設(shè)計(jì)圖？

事實(shí)上不止我這么想過(guò)。推特上看到一個(gè)說(shuō)法：長(zhǎng)遠(yuǎn)來(lái)看，未來(lái)科技界只會(huì)有三種設(shè)計(jì)師，品牌設(shè)計(jì)師，設(shè)計(jì)系統(tǒng)搭建者，和產(chǎn)品經(jīng)理。

In the long run, there will only be 3 types of designers in tech: brand designers, design systems builders, and product managers

Thread

— Yitong (@zhayitong) August 5, 2019

其實(shí)這也是很合理的。我們都說(shuō)設(shè)計(jì)師需要了解產(chǎn)品的用戶群體，誰(shuí)還能比各業(yè)務(wù)線的產(chǎn)品經(jīng)理更了解用戶呢？

如果要求設(shè)計(jì)師盡可能多的了解產(chǎn)品和用戶，那我們廣撒網(wǎng)的效果肯定不如人家專精一個(gè)業(yè)務(wù)的要好。但如果我們選擇專攻一個(gè)業(yè)務(wù)，那我們和產(chǎn)品經(jīng)理的界限又在哪？其實(shí)就沒(méi)區(qū)別了。事實(shí)上產(chǎn)品經(jīng)理的確是很多設(shè)計(jì)師轉(zhuǎn)型的方向。

有朝一日產(chǎn)品經(jīng)理審美能力提上去了，設(shè)計(jì)師怎么辦，只能充當(dāng)顧問(wèn)，把產(chǎn)品不太好的設(shè)計(jì)改一改？其實(shí)現(xiàn)在有不少項(xiàng)目就是這樣，產(chǎn)品出的原型已經(jīng)很完善了，我們真的只是把線框圖翻譯成設(shè)計(jì)稿而已，發(fā)揮空間很小。加上組件庫(kù)越來(lái)越完善，一天一百?gòu)垐D不是夢(mèng)。

那設(shè)計(jì)師的發(fā)展方向是什么？為了找到答案，我找了一些業(yè)界以技術(shù)和設(shè)計(jì)的高水平而聞名的公司，看他們的招聘需要什么樣的人。有 Google、Facebook、微軟、Airbnb、Pornhub。

悄然發(fā)生的變化

其中一個(gè)明顯的特點(diǎn)是，他們已經(jīng)不招 UI 或者交互設(shè)計(jì)師了，有也只是 UX 設(shè)計(jì)師。UX 就是用戶體驗(yàn)，國(guó)外都用 UX，只有中國(guó)用 UE。有的公司甚至連 UX 設(shè)計(jì)師都不招，有的是聲音設(shè)計(jì)師、AI 交互設(shè)計(jì)師、動(dòng)效設(shè)計(jì)師等。

我們同樣可以根據(jù) T 型人才模型，預(yù)測(cè)一下設(shè)計(jì)師未來(lái)的發(fā)展方向。

首先是往前的產(chǎn)品經(jīng)理。如果不考慮回老家開奶茶店，這可能是中國(guó)設(shè)計(jì)師最常見的轉(zhuǎn)型選擇。設(shè)計(jì)師審美比較好，了解用戶體驗(yàn)，如果再深入了解一下產(chǎn)品和用戶，做產(chǎn)品經(jīng)理是自然而然的。本公司就有不少例子。

如果不想離開設(shè)計(jì)領(lǐng)域，除了聲音、動(dòng)效這些設(shè)計(jì)以外，Google、Facebook、Airbnb 都有一個(gè)中國(guó)公司很少見的職位：Content Strategist 或 UX Writer。這個(gè)工作簡(jiǎn)單來(lái)說(shuō)就是寫產(chǎn)品中的文案。

往開發(fā)實(shí)現(xiàn)方向走，如 Google 就有 UX Engineer，一半需要有 web 前端開發(fā)技能，負(fù)責(zé)開發(fā) UI 組件、構(gòu)建快速原型、數(shù)據(jù)可視化等等。如果像之前設(shè)想的那樣，產(chǎn)品經(jīng)理負(fù)責(zé)功能規(guī)劃和交互設(shè)計(jì)，用戶體驗(yàn)工程師開發(fā)組件，再來(lái)個(gè)項(xiàng)目經(jīng)理負(fù)責(zé)把控進(jìn)度協(xié)調(diào)資源。那就不需要交互設(shè)計(jì)師了。設(shè)計(jì)這個(gè)過(guò)程始終存在，但設(shè)計(jì)師不在了。

保持敏感

本來(lái)我計(jì)劃講的是組件庫(kù)是怎么回事我們又是怎么用的，但我還是決定以這個(gè)話題為引子，討論一些更大的話題。

IT 是一個(gè)變化很快的行業(yè)，工具、工作流、方法論都在頻繁的變化中。在舒適區(qū)待久了會(huì)有慣性思維。比如作為交互設(shè)計(jì)師，我很容易把提升用戶體驗(yàn)設(shè)計(jì)能力作為發(fā)展方向。但很可能這個(gè)行業(yè)變化之快之大，直接淘汰了交互設(shè)計(jì)師，把交互設(shè)計(jì)融入其他工種，這就是降維打擊。

這就好像一個(gè)黃包車夫，在做未來(lái)的規(guī)劃，自己要提高體能，能跑更快，更會(huì)拉客，跑的時(shí)候讓客人更舒服。這些都沒(méi)錯(cuò)。但有可能汽車流行起來(lái)，根本不需要拉車的了。這就是路徑依賴讓我們?cè)诼殬I(yè)規(guī)劃上走了死胡同。

我也不知道這個(gè)分享是怎么從分享經(jīng)驗(yàn)變成了散布焦慮。反正給我自己一個(gè)警醒吧，也給大家共勉。保持敏銳和好奇心，堅(jiān)持到 35 歲不要被優(yōu)化掉。至于 35 歲以后怎么辦？放心，那時(shí)候你孩子到了該上學(xué)的時(shí)候，深圳又沒(méi)有那么多學(xué)位，到時(shí)候你自己會(huì)走的。