作者 | 甄子
前言
雖然我是木耳，但是，偶爾還是會拿有線耳機聽一下無損音樂。同僚跟我說：你那個耳機手機帶不動，要配個耳機放大器。耳機放大器（簡稱“耳放”）的原理，籠統概括就是把微弱信号變成強勁信号，進而能帶動（專業術語是“推”）xx歐姆的耳機。如果把整個耳機看做一個功率耗散元件——電阻，這裡xx歐姆就是電阻的阻值。滿足耳機功率要求，耳機才能夠播放出強勁的低音、豐富的細節、廣闊的音場……帶給我們身臨其境的震撼。
手機上的耳放
要帶動上圖這個大家夥，手機上插的就是耳放。耳放很複雜，不僅需要提升電流電壓，還有音色、降噪、還原……等DSP（數字信号處理）能力。不過，我們可以像把耳機近似成電阻一樣（耳機的功率xx歐姆），把整個耳放近似成一個三極管。
上圖左邊是三極管的元件符号，右邊是功放（耳機功放的“功放”）電路圖。如果我們事先在三極管的基極上加上一個合适的電流（叫做偏置電流，上圖中那個電阻 Rb 就是用來提供這個電流的，是以它被叫做基極偏置電阻），那麼當一個小信号跟這個偏置電流疊加在一起時，小信号就會導緻基極電流的變化，而基極電流的變化，就會被放大并在集電極上輸出。如果這裡的偏執電流Rb是手機輸出的音頻信号，在集電極上輸出的就是放大後的信号了。
如果換個角度看這個放大電路，我們可以把偏執電流類比為使用者需求，把輸入電源類比為産品設計（包含視覺和互動設計及技術方案等），把前端技術類比為三極管，把集電極輸出類比為UI和互動（最終的傳遞物）。
首先，不論使用者需求是使用者提出的、産品YY的還是老闆拍的，在最初提出的那一刻都模糊而粗糙。根據這些原始粗糙的想法，通過産品設計和前端開發，最終才能在使用者面前呈現強勁的低音、豐富的細節、廣闊的音場……帶給使用者身臨其境的震撼。
其次，三極管——前端開發是放大電路的心髒，三極管從截止區（未進入工作狀态）末端到飽和區（超負荷）開端的範圍：工作區，直接決定了三極管的放大倍數。就像用不同的前端技術方案去實作需求，技術方案的先進性和合理性，直接決定了最終傳遞的UI和互動品質，進而影響使用者體驗。
最後，具體如何了解放大需求呢？放大需求是相對于滿足需求而言的。中國有句古話叫：飽暖思淫欲。“飽暖”是人的基本生理需求，相當于滿足需求。“思淫欲”是人的進階需求，有人可能會問：這不是生理需求麼？那叫“繁殖”。舉個例子，在相機出現之前，繪畫的目的主要是記錄，記錄人物、事件……等等。相機的出現，讓記錄這件事變得簡單高效，繪畫得以從繁重的記錄工作中釋放出來，進而追求藝術性。這就相當于，照相技術本質上放大了繪畫的價值——藝術性。
今天，耳放技術可以推xx歐姆的進階耳機，把手機從音頻播放的聽個響、打電話等基本需求中釋放出來，放大至“唯美的音樂”、“震撼的視訊臨場感”……那麼，前端技術應該如何把UI和互動從“功能”中釋放出來，放大至更廣闊的領域呢？接下來談談我的一些愚見。
基礎 UI 和互動
Macintosh 桌面
System 6, 1988
System 7.5.3, 1991
MacOS 8.1, 1997
MacOS 9, 1999
Mac OS一直深受其使用者的贊譽，它的很多設計都成為了其它軟體和系統所模仿和借鑒的對象，對全世界人機界面及其相關行業的影響極其深遠。在諸多版本的Mac OS中，MacOS 9及以前的Mac作業系統通常被稱為古典系統（Classic OS），從2000年開始，Mac OS進入了全新的Mac OS X時代。
我認為，在進入Mac OS X之前，Apple着重在打造一套完善的基礎UI和互動系統。這就像照相技術出現前的繪畫一樣，先去滿足人們的基本需求：記錄。
搞UI的都應該聽說過Fitts’ Law－滑鼠光标指向某一物體的時間，受物體大小和光标距離其遠近這兩個因素所決定。位于頂部的菜單欄其實是對Fitts’ Law的靈活運用：由于光标不會跑到螢幕外面去，是以你盡可以随便把滑鼠往上甩，光标肯定位于菜單欄上，這降低了光标指向的難度。
然而時過境遷，在大螢幕、多顯示器越來越普及的今天，這個設計逐漸受到了挑戰：在某些極端的情況下（比如主視窗位于最右面的顯示器上），使用者不得不移動滑鼠橫跨數台顯示器、幾千個像素去操作菜單。
被技術放大的UI和互動
Apple Quartz Extreme 放大器
2000年5月10日這天的apple.com
在Jobs第一次公開介紹Mac OS X的使用者界面時，他宣稱不僅要做出一個高可用性的使用者界面，更重要的是，Mac OS X将具備一個名為AQUA的“Dream User Interface”。AQUA一方面保留有古典系統高度易用的特點；另一方面，通過各種視覺特效的引入，AQUA将帶來前所未有的使用者體驗。
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
從上圖可見，從 Jaguar 開始拉絲金屬已經得到廣泛的應用。由于 Quartz Extreme 這項被簡稱為QE的新技術給UI設計帶來了新的可能性。簡單地說，它就是利用了顯示卡的強勁性能，為UI提供硬體加速。這樣進一步解除了機器性能對UI設計的限制，設計師可以充分發揮自己的創造力。由此可見，想要産出或保持一個高水準的UI設計，先進的底層技術是重要基礎。
Apple Core Animation放大器
Core Animation是一個面向程式員的動畫開發架構，它旨在統一、規範并簡化程式員在UI設計上的編碼工作，并通過提供一系列預定義好的API，讓開發者可以輕松地實作各種視覺特效。
Core Animation把UI設計向前推進了一大步，是它加速了直接操縱（Direct Manipulation）這種互動方式的普及。在10.5中，它作為一個重要的基礎架構被提出，奠定了未來幾年Apple在其各個産品上UI設計的基礎。我們目前常見的最典型的應用就是iPhone，可以說，Core Animation是iPhone易用且絢爛多姿的UI的最大功臣。
下面是此技術在iPhone上的幾個直接操縱的例子：
被技術放大的UI和互動，基本實作了Jobs：不僅要作出一個高可用性的使用者界面，更重要的是，Mac OS X将具備一個名為AQUA的“Dream User Interface”之願景。AQUA一方面保留有古典系統高度易用的特點；另一方面，通過各種視覺特效的引入，AQUA将帶來前所未有的使用者體驗。
在近幾年的拟物、扁平、分層……等設計風格的小幅變化外，UI和互動最重要的變化就在于：如何滿足不同人群的需求。過去，對于一個視力不好的人，會外挂輔助功能來解決：放大鏡。如今，對于一個視力不好的人，手機淘寶利用智能UI這個牛逼的放大器，直接從UI和互動上來解決。
智能UI：一枚牛逼的放大器
理論依據
先看一個UGD（User Growth Design）的例子：
UGD這個思想，試圖回答：什麼樣的設計能夠驅動增長？就像當初UCD（User Center Design），試圖回答：什麼樣的設計能夠改善使用者體驗？然而，他們都忽略了一個問題：一萬個人眼裡有一萬個哈姆雷特。假如把上面這些問題變成：什麼樣的設計能夠驅動什麼類型使用者增長？什麼樣的設計能夠改善什麼類型使用者的體驗？我們就給一萬個類型的人，每類提供一萬種類型的UI和互動，再根據使用者的行為資料判斷每類使用者喜歡那種類型的UI和互動，就能解決一萬個人眼裡有一萬個哈姆雷特的問題。
實作方法
業務可變性方案
業務可變性方案需要和業務确認允許變化的範圍和選項。比如，業務上有一個彈窗，如果業務需要中斷使用者目前操作流程，可變性就從“用彈窗還是浮層”問題降級到“必須用彈窗”，這和産品設計、UI和互動設計無關。
假如業務允許在“用彈窗還是浮層”問題上做選擇呢？一般來說，設計會介入和産品一起判斷“用彈窗還是用浮層”，最後，還是拿着一個彈窗一個浮層兩套方案，去找老闆拍闆。我們智能UI的做法卻不同，兩套方案都實作，根據不同類型使用者在兩套方案上的資料表現，分别給使用者呈現不同的方案。
設計可變性方案
設計可變性方案需要和設計确認：不同類型使用者可能在UI和互動上的差異（如視弱、冷淡、二次元……），并根據這些差異輸出不同的設計方案。這裡的設計方案主要由三部分構成：頁面、子產品、元件，很熟悉是不？《前端智能化》裡有介紹我們針對頁面構成的原理，如何設計智能生成頁面代碼的體系，如今 imgcook.com 已經在元件識别上取得了較大的進步。我們可以用元件去對應設計中Symbol，例如 material design 的Components：
通過不同的頁面布局、子產品布局、子產品内布局，并組合不同樣式的元件，最終給每類使用者呈現出他們喜愛的UI、提供他們最舒服的互動方式。
技術可變性方案
在網頁出現的第一天，模闆技術就幾乎同時出現了，她的核心任務是靜态的架構呈現動态的内容。模闆像一個杯子，倒進去水，喝完了，再倒進去果汁，杯子還是那個杯子。而智能UI要求的是，一個茶杯，倒進去水，喝完了，拿個玻璃杯，倒進去果汁。模闆自身也在變化，就是第一代智能UI的技術可變性方案。
在經曆痛苦的模闆配置後，第二代智能UI會根據設計系統的限制、設計美學算法模型打分、分人群優秀模闆的機器學習等手段，用元件、子產品自動化且智能的進行模闆的生成。
事實上，如果粗略算一下：100人群風格 x 30元件元素 （平均每個頁面用到的元件個數），即便子產品和模闆頁面都可以自動生成，也有3000個元件需要開發，這龐大的開發工作量需要全新的開發方式來解決。
imgcook：一個大功率電源
為了能夠給智能UI提供充分的元件生成和供給能力，我們對 imgcook.com 進行了更新，支援多态的元件生成能力：
當然，對于 imgcook 上生成互動邏輯、業務邏輯代碼，以及資料字段的自動化綁定能力，都是保留和繼承的。我認為簡單的UI和互動，未來都可以業務級完整傳遞，輔之以機器視覺加持的自動化測試能力，甚至可以做到自動化上線。
寫在最後
Alan Kay說：用技術去放大人們的需求。就像照相技術放大了繪畫的藝術性一樣，智能UI技術放大了UI和互動的個性化，imgcook 放大了什麼？對于接觸程式設計30年、做前端16年的我來說，一直對前端被稱為“切圖仔”這件事兒深惡痛絕。在整個技術領域，待過騰訊和阿裡的我，深感前端缺乏技術含量而被歧視的痛苦。imgcook 不僅能把前端“施工隊”這個稱号甩給機器學習和人工智能，我提出并堅持了三年多的“前端智能化”方向，也逐漸在衆多領域裡開花結果。如果你使用VSCode的imgcook插件，我們的Code2Code前端智能化方向代碼糾錯能力，能夠幫助你智能提醒、自動推薦前端代碼，還在 BFF（Backend For Front-end）膠水層代碼生成上積極探索：Service2Code。
随着機器學習和人工智能滲入到各行各業，随着你畫我猜、智能推薦、以圖搜圖、尬舞……滲入生活的方方面面，前端作為程式設計領域的一支，也必将迎來更多變化和挑戰。我們開源了：
http://github.com/alibaba/pipcook帶給前端機器學習的能力，提供了
http://imgcook.com開放平台帶給前端設計稿生成代碼的能力，未來，我們還會帶來更多前端智能化實踐。如果你希望加入前端智能化方向，共同定義前端智能化的未來，歡迎與我交流：[email protected] 。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向