雖然我是木耳，但是，偶爾還是會(huì)拿有線耳機(jī)聽(tīng)一下無(wú)損音樂(lè)。同事跟我說(shuō)：你那個(gè)耳機(jī)手機(jī)帶不動(dòng)，要配個(gè)耳機(jī)放大器。耳機(jī)放大器（簡(jiǎn)稱“耳放”）的原理，籠統(tǒng)概括就是把微弱信號(hào)變成強(qiáng)勁信號(hào)，從而能帶動(dòng)（專業(yè)術(shù)語(yǔ)是“推”）xx歐姆的耳機(jī)。如果把整個(gè)耳機(jī)看做一個(gè)功率耗散元件——電阻，這里xx歐姆就是電阻的阻值。滿足耳機(jī)功率要求，耳機(jī)才能夠播放出強(qiáng)勁的低音、豐富的細(xì)節(jié)、廣闊的音場(chǎng)……帶給我們身臨其境的震撼。

手機(jī)上的耳放

要帶動(dòng)上圖這個(gè)大家伙，手機(jī)上插的就是耳放。耳放很復(fù)雜，不僅需要提升電流電壓，還有音色、降噪、還原……等DSP（數(shù)字信號(hào)處理）能力。不過(guò)，我們可以像把耳機(jī)近似成電阻一樣（耳機(jī)的功率xx歐姆），把整個(gè)耳放近似成一個(gè)三極管。

放大電路

上圖左邊是三極管的元件符號(hào)，右邊是功放（耳機(jī)功放的“功放”）電路圖。如果我們事先在三極管的基極上加上一個(gè)合適的電流（叫做偏置電流，上圖中那個(gè)電阻 Rb 就是用來(lái)提供這個(gè)電流的，所以它被叫做基極偏置電阻），那么當(dāng)一個(gè)小信號(hào)跟這個(gè)偏置電流疊加在一起時(shí)，小信號(hào)就會(huì)導(dǎo)致基極電流的變化，而基極電流的變化，就會(huì)被放大并在集電極上輸出。如果這里的偏執(zhí)電流Rb是手機(jī)輸出的音頻信號(hào)，在集電極上輸出的就是放大后的信號(hào)了。

放大電路的前端類比

如果換個(gè)角度看這個(gè)放大電路，我們可以把偏執(zhí)電流類比為用戶需求，把輸入電源類比為產(chǎn)品設(shè)計(jì)（包含視覺(jué)和交互設(shè)計(jì)及技術(shù)方案等），把前端技術(shù)類比為三極管，把集電極輸出類比為UI和交互（最終的交付物）。

首先，不論用戶需求是用戶提出的、產(chǎn)品YY的還是老板拍的，在最初提出的那一刻都模糊而粗糙。根據(jù)這些原始粗糙的想法，通過(guò)產(chǎn)品設(shè)計(jì)和前端開(kāi)發(fā)，最終才能在用戶面前呈現(xiàn)強(qiáng)勁的低音、豐富的細(xì)節(jié)、廣闊的音場(chǎng)……帶給用戶身臨其境的震撼。

其次，三極管——前端開(kāi)發(fā)是放大電路的心臟，三極管從截止區(qū)（未進(jìn)入工作狀態(tài)）末端到飽和區(qū)（超負(fù)荷）開(kāi)端的范圍：工作區(qū)，直接決定了三極管的放大倍數(shù)。就像用不同的前端技術(shù)方案去實(shí)現(xiàn)需求，技術(shù)方案的先進(jìn)性和合理性，直接決定了最終交付的UI和交互質(zhì)量，進(jìn)而影響用戶體驗(yàn)。

最后，具體如何理解放大需求呢？放大需求是相對(duì)于滿足需求而言的。中國(guó)有句古話叫：飽暖思淫欲。“飽暖”是人的基本生理需求，相當(dāng)于滿足需求。“思淫欲”是人的高級(jí)需求，有人可能會(huì)問(wèn)：這不是生理需求么？那叫“繁殖”。舉個(gè)例子，在相機(jī)出現(xiàn)之前，繪畫(huà)的目的主要是記錄，記錄人物、事件……等等。相機(jī)的出現(xiàn)，讓記錄這件事變得簡(jiǎn)單高效，繪畫(huà)得以從繁重的記錄工作中釋放出來(lái)，從而追求藝術(shù)性。這就相當(dāng)于，照相技術(shù)本質(zhì)上放大了繪畫(huà)的價(jià)值——藝術(shù)性。

今天，耳放技術(shù)可以推xx歐姆的高級(jí)耳機(jī)，把手機(jī)從音頻播放的聽(tīng)個(gè)響、打電話等基本需求中釋放出來(lái)，放大至“唯美的音樂(lè)”、“震撼的視頻臨場(chǎng)感”……那么，前端技術(shù)應(yīng)該如何把UI和交互從“功能”中釋放出來(lái)，放大至更廣闊的領(lǐng)域呢？接下來(lái)談?wù)勎业囊恍┯抟?jiàn)。

基礎(chǔ)UI和交互

macintosh 桌面

System 6, 1988

System 7.5.3, 1991

MacOS 8.1, 1997

MacOS 9, 1999

Mac OS一直深受其用戶的贊譽(yù)，它的很多設(shè)計(jì)都成為了其它軟件和系統(tǒng)所模仿和借鑒的對(duì)象，對(duì)全世界人機(jī)界面及其相關(guān)行業(yè)的影響極其深遠(yuǎn)。在諸多版本的Mac OS中，MacOS 9及以前的Mac操作系統(tǒng)通常被稱為古典系統(tǒng)（Classic OS），從2000年開(kāi)始，Mac OS進(jìn)入了全新的Mac OS X時(shí)代。

我認(rèn)為，在進(jìn)入Mac OS X之前，Apple著重在打造一套完善的基礎(chǔ)UI和交互系統(tǒng)。這就像照相技術(shù)出現(xiàn)前的繪畫(huà)一樣，先去滿足人們的基本需求：記錄。

搞UI的都應(yīng)該聽(tīng)說(shuō)過(guò)Fitts’ Law－鼠標(biāo)光標(biāo)指向某一物體的時(shí)間，受物體大小和光標(biāo)距離其遠(yuǎn)近這兩個(gè)因素所決定。位于頂部的菜單欄其實(shí)是對(duì)Fitts’ Law的靈活運(yùn)用：由于光標(biāo)不會(huì)跑到屏幕外面去，因此你盡可以隨便把鼠標(biāo)往上甩，光標(biāo)肯定位于菜單欄上，這降低了光標(biāo)指向的難度。

然而時(shí)過(guò)境遷，在大屏幕、多顯示器越來(lái)越普及的今天，這個(gè)設(shè)計(jì)逐漸受到了挑戰(zhàn)：在某些極端的情況下（比如主窗口位于最右面的顯示器上），用戶不得不移動(dòng)鼠標(biāo)橫跨數(shù)臺(tái)顯示器、幾千個(gè)像素去操作菜單。

被技術(shù)放大的UI和交互

Apple Quartz Extreme 放大器

2000年5月10日這天的apple.com

在Jobs第一次公開(kāi)介紹Mac OS X的用戶界面時(shí)，他宣稱不僅要作出一個(gè)高可用性的用戶界面，更重要的是，Mac OS X將具備一個(gè)名為AQUA的“Dream User Interface”。AQUA一方面保留有古典系統(tǒng)高度易用的特點(diǎn)；另一方面，通過(guò)各種視覺(jué)特效的引入，AQUA將帶來(lái)前所未有的用戶體驗(yàn)。

Mac OS X Public Beta, 2000

Mac OS X 10.0 Cheetah, 2001

Mac OS X 10.1 Puma, 2001

Mac OS X 10.2 Jaguar, 2002

從上圖可見(jiàn)，從 Jaguar 開(kāi)始拉絲金屬已經(jīng)得到廣泛的應(yīng)用。由于 Quartz Extreme 這項(xiàng)被簡(jiǎn)稱為QE的新技術(shù)給UI設(shè)計(jì)帶來(lái)了新的可能性。簡(jiǎn)單地說(shuō)，它就是利用了顯卡的強(qiáng)勁性能，為UI提供硬件加速。這樣進(jìn)一步解除了機(jī)器性能對(duì)UI設(shè)計(jì)的限制，設(shè)計(jì)師可以充分發(fā)揮自己的創(chuàng)造力。由此可見(jiàn)，想要產(chǎn)出或保持一個(gè)高水平的UI設(shè)計(jì)，先進(jìn)的底層技術(shù)是重要基礎(chǔ)。

Apple Core Animation放大器

Core Animation是一個(gè)面向程序員的動(dòng)畫(huà)開(kāi)發(fā)框架，它旨在統(tǒng)一、規(guī)范并簡(jiǎn)化程序員在UI設(shè)計(jì)上的編碼工作，并通過(guò)提供一系列預(yù)定義好的API，讓開(kāi)發(fā)者可以輕松地實(shí)現(xiàn)各種視覺(jué)特效。

Core Animation把UI設(shè)計(jì)向前推進(jìn)了一大步，是它加速了直接操縱（Direct Manipulation）這種交互方式的普及。在10.5中，它作為一個(gè)重要的基礎(chǔ)框架被提出，奠定了未來(lái)幾年Apple在其各個(gè)產(chǎn)品上UI設(shè)計(jì)的基礎(chǔ)。 我們目前常見(jiàn)的最典型的應(yīng)用就是iphone，可以說(shuō)，Core Animation是iPhone易用且絢爛多姿的UI的最大功臣。

下面是此技術(shù)在iPhone上的幾個(gè)直接操縱的例子：

被技術(shù)放大的UI和交互，基本實(shí)現(xiàn)了Jobs：不僅要作出一個(gè)高可用性的用戶界面，更重要的是，Mac OS X將具備一個(gè)名為AQUA的“Dream User Interface”之愿景。AQUA一方面保留有古典系統(tǒng)高度易用的特點(diǎn)；另一方面，通過(guò)各種視覺(jué)特效的引入，AQUA將帶來(lái)前所未有的用戶體驗(yàn)。

在近幾年的擬物、扁平、分層……等設(shè)計(jì)風(fēng)格的小幅變化外，UI和交互最重要的變化就在于：如何滿足不同人群的需求。過(guò)去，對(duì)于一個(gè)視力不好的人，會(huì)外掛輔助功能來(lái)解決：放大鏡。如今，對(duì)于一個(gè)視力不好的人，手機(jī)淘寶利用智能UI這個(gè)牛逼的放大器，直接從UI和交互上來(lái)解決。

淘寶的智能UI

智能UI：一枚牛逼的放大器

理論依據(jù)

先看一個(gè)UGD（User Growth Design）的例子：

UGD的例子

UGD這個(gè)思想，試圖回答：什么樣的設(shè)計(jì)能夠驅(qū)動(dòng)增長(zhǎng)？就像當(dāng)初UCD（User Center Design），視圖回答：什么樣的設(shè)計(jì)能夠改善用戶體驗(yàn)？然而，他們都忽略了一個(gè)問(wèn)題：一萬(wàn)個(gè)人眼里有一萬(wàn)個(gè)哈姆雷特。假如把上面這些問(wèn)題變成：什么樣的設(shè)計(jì)能夠驅(qū)動(dòng)什么類型用戶增長(zhǎng)？什么樣的設(shè)計(jì)能夠改善什么類型用戶的體驗(yàn)？我們就給一萬(wàn)個(gè)類型的人，每類提供一萬(wàn)種類型的UI和交互，再根據(jù)用戶的行為數(shù)據(jù)判斷每類用戶喜歡那種類型的UI和交互，就能解決一萬(wàn)個(gè)人眼里有一萬(wàn)個(gè)哈姆雷特的問(wèn)題。

實(shí)現(xiàn)方法

1. 業(yè)務(wù)可變性方案
   業(yè)務(wù)可變性方案須要和業(yè)務(wù)確認(rèn)允許變化的范圍和選項(xiàng)。比如，業(yè)務(wù)上有一個(gè)彈窗，如果業(yè)務(wù)需要中斷用戶當(dāng)前操作流程，可變性就從“用彈窗還是浮層”問(wèn)題降級(jí)到“必須用彈窗”，這和產(chǎn)品設(shè)計(jì)、UI和交互設(shè)計(jì)無(wú)關(guān)。假如業(yè)務(wù)允許在“用彈窗還是浮層”問(wèn)題上做選擇呢？一般來(lái)說(shuō)，設(shè)計(jì)會(huì)介入和產(chǎn)品一起判斷“用彈窗還是用浮層”，最后，還是拿著一個(gè)彈窗一個(gè)浮層兩套方案，去找老板拍板。我們智能UI的做法卻不同，兩套方案都實(shí)現(xiàn)，根據(jù)不同類型用戶在兩套方案上的數(shù)據(jù)表現(xiàn)，分別給用戶呈現(xiàn)不同的方案。
2. 設(shè)計(jì)可變性方案
   設(shè)計(jì)可變性方案須要和設(shè)計(jì)確認(rèn)：不同類型用戶可能在UI和交互上的差異（如視弱、冷淡、二次元……），并根據(jù)這些差異輸出不同的設(shè)計(jì)方案。這里的設(shè)計(jì)方案主要由三部分構(gòu)成：頁(yè)面、模塊、組件，很熟悉是不？《前端智能化》里有介紹我們針對(duì)頁(yè)面構(gòu)成的原理，如何設(shè)計(jì)智能生成頁(yè)面代碼的體系，如今 imgcook.com 已經(jīng)在組件識(shí)別上取得了較大的進(jìn)步。我們可以用組件去對(duì)應(yīng)設(shè)計(jì)中Symbol，例如 material design 的Components：通過(guò)不同的頁(yè)面布局、模塊布局、模塊內(nèi)布局，并組合不同樣式的組件，最終給每類用戶呈現(xiàn)出他們喜愛(ài)的UI、提供他們最舒服的交互方式。
3. 技術(shù)可變性方案
   在網(wǎng)頁(yè)出現(xiàn)的第一天，模板技術(shù)就幾乎同時(shí)出現(xiàn)了，她的核心任務(wù)是靜態(tài)的框架呈現(xiàn)動(dòng)態(tài)的內(nèi)容。模板像一個(gè)杯子，倒進(jìn)去水，喝完了，再倒進(jìn)去果汁，杯子還是那個(gè)杯子。而智能UI要求的是，一個(gè)茶杯，倒進(jìn)去水，喝完了，拿個(gè)玻璃杯，倒進(jìn)去果汁。模板自身也在變化，就是第一代智能UI的技術(shù)可變性方案。在經(jīng)歷痛苦的模板配置后，第二代智能UI會(huì)根據(jù)設(shè)計(jì)系統(tǒng)的約束、設(shè)計(jì)美學(xué)算法模型打分、分人群優(yōu)秀模板的機(jī)器學(xué)習(xí)等手段，用組件、模塊自動(dòng)化且智能的進(jìn)行模板的生成。

事實(shí)上，如果粗略算一下：100人群風(fēng)格 x 30組件元素 （平均每個(gè)頁(yè)面用到的組件個(gè)數(shù)），即便模塊和模板頁(yè)面都可以自動(dòng)生成，也有3000個(gè)組件需要開(kāi)發(fā)，這龐大的開(kāi)發(fā)工作量需要全新的開(kāi)發(fā)方式來(lái)解決。

imgcook：一個(gè)大功率電源

imgcook設(shè)計(jì)稿生成代碼

為了能夠給智能UI提供充分的組件生成和供給能力，我們對(duì) imgcook.com 進(jìn)行了升級(jí)，支持多態(tài)的組件生成能力：

imgcook 組件生成

當(dāng)然，對(duì)于 imgcook 上生成交互邏輯、業(yè)務(wù)邏輯代碼，以及數(shù)據(jù)字段的自動(dòng)化綁定能力，都是保留和繼承的。我認(rèn)為簡(jiǎn)單的UI和交互，未來(lái)都可以業(yè)務(wù)級(jí)完整交付，輔之以機(jī)器視覺(jué)加持的自動(dòng)化測(cè)試能力，甚至可以做到自動(dòng)化上線。

寫(xiě)在最后

Alan Kay說(shuō)：用技術(shù)去放大人們的需求。就像照相技術(shù)放大了繪畫(huà)的藝術(shù)性一樣，智能UI技術(shù)放大了UI和交互的個(gè)性化，imgcook 放大了什么？對(duì)于接觸編程30年、做前端16年的我來(lái)說(shuō)，一直對(duì)前端被稱為“切圖仔”這件事兒深惡痛絕。在整個(gè)技術(shù)領(lǐng)域，待過(guò)騰訊和阿里的我，深感前端缺乏技術(shù)含量而被歧視的痛苦。imgcook 不僅能把前端“施工隊(duì)”這個(gè)稱號(hào)甩給機(jī)器學(xué)習(xí)和人工智能，我提出并堅(jiān)持了三年多的“前端智能化”方向，也逐漸在眾多領(lǐng)域里開(kāi)花結(jié)果。如果你使用VSCode的imgcook插件，我們的Code2Code前端智能化方向代碼糾錯(cuò)能力，能夠幫助你智能提醒、自動(dòng)推薦前端代碼，還在 BFF（Backend For Front-end）膠水層代碼生成上積極探索：Service2Code。

隨著機(jī)器學(xué)習(xí)和人工智能滲入到各行各業(yè)，隨著你畫(huà)我猜、智能推薦、以圖搜圖、尬舞……滲入生活的方方面面，前端作為編程領(lǐng)域的一支，也必將迎來(lái)更多變化和挑戰(zhàn)。我們開(kāi)源了：http://github.com/alibaba/pipcook 帶給前端機(jī)器學(xué)習(xí)的能力，提供了 http://imgcook.com 開(kāi)放平臺(tái)帶給前端設(shè)計(jì)稿生成代碼的能力，未來(lái)，我們還會(huì)帶來(lái)更多前端智能化實(shí)踐。如果你希望加入前端智能化方向，共同定義前端智能化的未來(lái)，可以發(fā)簡(jiǎn)歷給我：zhenyankun.zyk@alibaba-inc.com 。