My Secret Rainbow

智能UI：面向未来的UI开发技术

前言

虽然我是木耳，但是，偶尔还是会拿有线耳机听一下无损音乐。同事跟我说：你那个耳机手机带不动，要配个耳机放大器。耳机放大器（简称“耳放”）的原理，笼统概括就是把微弱信号变成强劲信号，从而能带动（专业术语是“推”）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和交互

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开放平台带给前端设计稿生成代码的能力，未来，我们还会带来更多前端智能化实践。如果你希望加入前端智能化方向，共同定义前端智能化的未来，欢迎与我交流：zhenyankun.zyk@alibaba-inc.com。

原文：https://mp.weixin.qq.com/s/1RNEQb8N68Muu6YmFa-QrQ