前言：「UI 智能化才是用户体验的彼岸」
在 AI 渗透到各行各业的背景下，用户和数字世界交互的方式也需要有智能化的加持，来降低用户和数字世界连接的成本。这种连接的成本可以用“体验指标”来进行分析，从而知道用户使用 UI 的问题并针对性优化。结合技术和产品、运营等知识，我构建了一套符号和公式，试图解决用户体验难以度量和迭代的问题。同时，介绍了大促产品化背后智能 UI 面向用户体验的调控能力，以此来阐释如何进行用户体验的迭代。最后，展望未来，提出 UI 智能化概念来畅想用户体验良好的程序终极形态是怎样的。当下，智能化是基于数据和指标之上的大数据和机器学习技术构建的，只有为 UI 建立一套数据和指标，并沉淀为机器可学习的分析和度量能力，才能逐步从传统 UI 走向 UI 的智能化。
GUI 易用性背后的复杂度
在应用程序提供者和使用者之间的交流中，提供者以 GUI 为媒介，核心实现了两个目标：承载信息、提供交互。承载信息相对于使用者视角就是获取信息，提供交互相对于使用者视角就是进行交互，由此可见交互就是使用者和提供者间借助 GUI 完成的一场交流互动。在冯诺依曼把计算机架构抽象为：运算器、控制器、存储器、输入设备、输出设备，以这种统一的抽象为基础，他把程序当做数据来看待，与数据一起放在存储器中，这样计算机就可以调用存储器中的程序来完成计算机的控制。这种设计思想直接导致了硬件和软件的分离，让硬件和软件设计可以分开执行，从而诞生了程序员这个职业。系统程序员负责编写从存储器中读取、翻译、分析程序指令，然后根据指令向运算器和输入、输出发送控制命令，其实他们编写的就是我们所熟知的操作系统、内核模块、设备驱动等等。应用程序员则是在前者的基础上，开发各种各样的应用，例如 Linux 用文件来抽象 I/O 提供文件句柄对其进行操作，应用程序员就可以借助这些文件句柄开发一个文件压缩解压缩的应用。
我在学习这些 Linux 提供的阻塞式、非阻塞式 I/O 编程接口，并开发一些网络服务如 QQ 拼音词库平台用户上传词库以便在其它设备上下载他们，正是对 I/O 的抽象让我不必直接和内核、网卡驱动等复杂的系统底层打交道，这种抽象带来的简化催生了整个软件生态的繁荣。随着我对 MFC 和 Win32 API 等窗口应用程序的接触，慢慢发现自己掉入一个纷繁复杂的世界，光是窗口句柄和各种事件处理就足以让我头大，还要面对一些：不规则窗体、透明窗体等产品设计需求，为什么技术越发展使用起来却越复杂了？
打开 Github 看看最高 Star 的项目，和 web gui 相关的最高 Star 项目撇开框架外，最多的是各种完整示例网站或组件库。完整的示例网站可以通过替换素材的方式，快速实现某个场景的 GUI 开发工作。组件库可以帮助前端工程师根据产品需求快速搭建 GUI，而不需要面对那么多复杂的 DOM、BOM 等编程接口。表面上 GUI 给用户带来了极大的便利，却给程序员带来上述的压力，让他们想通过 Ctrl C 和 Ctrl V 来解决，为什么？
因为，GUI 易用性背后隐藏了诸多让我惊叹的复杂度。在腾讯工作期间很多桌面应用程序开发过程中，我都会和设计师密切配合，从接到需求那一刻起我就缠着设计师一起探讨甚至一起设计。之所以如此，除了性格外向比较 Open 外，还有一个重要的因素是我意识到了 GUI 易用性背后隐藏的复杂度。拿我在 D2 上分享的 Silverlight QQ 为例，分享一下我在开发这个应用时面对的复杂度。
如图 1-3 中所示的 Silverlight QQ 是我从写服务器到 GUI 全链路端到端独立完成的项目，撇开服务器开发和 Silverlight 这个富媒体技术不谈，单说这个 GUI 的开发过程。这个设计是我和一家著名的香港设计事务所协力完成的，从 Wireframe 到 Proposal 的细节都是我一点点和他们敲定的，因此，小到图中的 Avatar、立体化的 Icon，大到窗口、Platform 切换好友群组等 UI 和交互细节，对我一个人开发造成的压力可想而知。
然而，这些压力中最大的问题是还原度，以往 I/O 编程中可读、可写等简单的状态荡然无存，取而代之的是各种状态以动画的视觉形式呈现时的弹性系数、阻尼系数、关键帧等。我无法把设计事务所提供的视频直接放在 GUI 里实现各种视觉效果（Apple 官网上有 H5 视频和动效结合的典范可以参考，但局限性很大），然而在设计领域很多概念又无法和 GUI 编程概念对齐，就像鸡同鸭讲，谁来翻译？
关于 Silverlight QQ 具体的细节可以从 Github 上https://github.com/d2forum/4th找到，这里就不再赘述了。我对 GUI 易用性背后复杂度的理解是：如图 1-4 以往程序的设计和开发都是由程序员自己完成的，所以设计意图和实现手段是统一的，然而在 GUI 领域里设计和开发分别由产品加设计和程序员分别完成的。
你可能会说：虽然完成工作的角色多了，但多沟通就好了。是的，这样说是没错，就像我在做 Silverlight QQ 时那样，除了充分沟通外，还有很多设计工具可以帮助设计和开发在代码层面沟通，比如现在 AfterEffect 预览并导出特效代码。但是，如果深入探究一下，就会发现一个严重的问题：事实上程序员在做设计，并且可能和产品、视觉和交互设计产生冲突，这个结论是我深入到布局、动效、动画的细节后发现的。
拿布局来说，让产品和设计师针对不同的分辨率出不同的设计方案是理想的，面对数量庞大的各种分辨率和各种挖孔屏带来的 Safe Area，产品和设计师无法穷举所有情况，问题就交到程序员手里，如何用 Media Query、弹性布局等技术手段去解决，尤其是解决过程中的细节如何处理？比如文本的折行、截断等问题。如果我拿着所有问题，一个个去找产品和设计师去确认解决的规则和方案，那我的价值是什么？只是把需求翻译成代码么？那用 imgcook.com 的 D2C 就够了要我做什么？看看国内知名的蚂蚁金服前端大牛玉伯老师是怎么解决该问题的，他在阿里集团第一个提出体验工程这个概念，并大刀阔斧的改革，把自己的部门从前端变成“体验技术部”。
我认为玉伯老师的解法是很高明的，这不仅仅是一个部门名称的变化，其变化的精髓在于诠释了前端工程师工作的本质：向用户体验负责。但是，这里有个问题：前端怎么向用户体验负责？在非 GUI 程序开发中，程序的设计和开发都是由程序员完成的，因此，程序员可以对这些由自己设计和开发的程序负责。在 GUI 程序开发中“向用户体验负责”就要求面向用户体验的程序设计，而设计的前提就是对问题的分析、理解和定义，下一篇文章会分享一下我对面向用户体验程序设计的一些理解和感悟。
我把面向用户体验的程序设计分为三个层次。第一层是从传统程序设计中继承的精确性、可用性和性能部分，这是完成高质量交付的基础。第二层是从协同产品和设计师工作的角度定义的，这部分主要是利用智能 UI 的能力对程序进行调控进而影响用户行为，借助正向的用户行为影响来提升用户体验。第三层是从技术的独立交付价值角度定义的，小到用技术手段适配不同分辨率、深色模式下各种视觉指引的辨识度优化等，大到 3D、AR/VR 等技术带来的全新交互体验。下面就分别介绍一下面向用户体验程序设计的三个层次。
面向用户体验程序设计的三个层次
我把面向用户体验的程序设计分为三个层次。第一层是从传统程序设计中继承的精确性、可用性和性能部分，这是完成高质量交付的基础。第二层是从协同产品和设计师工作的角度定义的，这部分主要是利用智能 UI 的能力对程序进行调控进而影响用户行为，借助正向的用户行为影响来提升用户体验。第三层是从技术的独立交付价值角度定义的，小到用技术手段适配不同分辨率、深色模式下各种视觉指引的辨识度优化等，大到 3D、AR/VR 等技术带来的全新交互体验。下面就分别介绍一下面向用户体验程序设计的三个层次。
▐ 面向用户体验的高质量交付
在日常工作中我观察到这样一个事实：GUI 开发在软件工程视角下不完整，其缺失的部分是交付后调优过程。我在开发服务器的时候，除了将服务器部署到线上环境，还会对服务器功能精确性、可用性和性能优劣进行假设，根据这些假设精心设计一些日志打点和上报。有了对线上服务的观测、测量能力，我就可以针对观测到的事实和自己的假设进行比较，从中找到功能、可用性和性能的问题，并针对这些问题发 Patch 热更新或调整代码重新发布进行冷更新，然后重复上述过程，直到观测事实符合自己假设的预期，调优完成。
调优的过程和监控告警是有本质不同的，监控告警应该在调优完成后，用于防范那些我们难以假设或预期的线上异常。然而调优过程则是我们对功能精确性、可用性和性能是否合格的预期，以及这些预期在线上表现是否符合的检查和调整过程。而我观察到，今天的 GUI 开发中团队缺乏调优过程，开发、联调、提测、发布后就直接进入了监控告警状态。因此，我认为在谈面向用户体验的高质量交付设计前，先要保证面向软件工程的高质量交付。
面向用户体验的高质量交付设计是 GUI 程序设计的超集而非子集，我们要在保证面向软件工程的高质量交付基础上，定义一些并不包含在传统软件工程交付质量中的特殊部分。这些特殊部分到底特殊在哪里？通常谈到 GUI 程序设计，很容易在脑海里浮现出：MVC、MVVM、界面、事件、视觉树、逻辑树、业务逻辑等等，我想从客体的角度尝试诠释一下 GUI 程序设计在面向用户体验的视角下有什么不同？
对 I 的部分可以模拟用户的操作，然后录屏对结果进行分析。如果操作是由产品设计的 Wireframe 所定义，应该包含操作的触发点和响应 frame，分析的对象正是这些响应 frame 的渲染效果和性能。还有一类特殊的 I 是应用程序状态变化产生的 UI 变化，包括应用程序根据宿主环境的输入产生的变化，比如：系统时钟的定时服务、位置传感器的 LBS 输入等。这一类特殊的 I 还包括服务端控制的应用程序变化，比如：登陆状态变化、聊天功能的好友数据同步变化等。总结一下，RWP 总体分为首屏性能和 N 屏性能，N 屏性能又分为用户操作、宿主环境输入、服务端控制三种情况，这四种情况就是我们需要去模拟的部分，通过模拟并录屏针对这四种情况在高端机、中端机、低端机上实际出现的 frame 进行分析评估。为了更贴近用户的视角，这里的评估又可以针对可视和可交互两个部分独立评估。
▐ 面向用户体验的创新设计
除非发生重大的技术变革，否则创新的难度会随着技术和工程在变革下演进的步伐愈发困难。近几年浏览器、Hybrid APP 和客户端技术，伴随着计算的移动化，已经逐渐成熟和稳定。即便有一些局部的技术迭代，也很难大范围的释放创新空间。这种规律统治下，我认为每次技术变革的初期更适合在技术和工程范围内进行创新，在变革中期更适合在跨领域技术范围内创新，变革后期更适合在产品应用的解决方案层面创新。在产品应用的解决方案层面创新，势必能帮助我跟深入的理解产品和用户，更直接和深刻的发现技术和工程的瓶颈，藉此寻找第二曲线和新的技术变革机遇。对于技术和工程乃至跨领域技术范围内创新，想必大家已经轻车熟路不必赘述，本节我想从产品应用的解决方案层面创新，以及寻找第二曲线和新的技术变革机遇，这两个方面来介绍一下我的观察和思考。
先来谈谈第一部分，关于产品应用的解决方案层面创新。在了解变革后期技术应用为什么会大于技术创新前，我想先介绍一下如何判断技术是否进入了变革后期？中国中小企业信息网 2017 年 04 月 28 日在名为《今年来一行三会连续放大招 "重拳出击"显示去杠杆决心》的文章中提出：「总体来看，在央行保持货币政策稳健中性，根据市场需求和预期变化，保持市场流动性基本稳定的同时，三会则针对各个行业、各个市场挤泡沫、降杠杆，引导资金“脱虚向实”，推动金融机构回归服务实体经济的本源。」
还有更多官方媒体释放的信号，都在明确指出互联网技术带来的红利正在消退，为什么这么说？因为本质上互联网技术从根本上改变了信息获取的方式，加速了信息交换的效率从而推动市场的效率提升。但是，中国经济的发展本身存在着“虚胖”的问题，由基建、房地产和代工类工业制造创造的经济增长是无法持续的。基建还稍好一点，因为基建可以加快生产要素如：人、物的流通，本质上能够带动经济实质增长，这就是为何说：要想富先修路的原因。房地产则完全是依靠售卖地皮、炒高房价，把资本向少数人手上汇聚（地产商、地产配套企业、炒房客），挤占人均可支配收入从而降低普通人的消费欲望和能力。代工类工业制造则是赤裸裸的剥削，通过技术或市场优势地位，借助中国廉价的劳动力成本，快速完成市场扩张的同时，并没有提升这些工人的能力。因为，离开了这些资本家（尤其是国际资本家）的产品、设备，这些工人完全无法通过工作掌握的技能持续创造收入，当生活成本因为房价、物价、通胀等原因居高不下，而工人因为可替代性太强、个人能力价值太低没有和资本家议价的能力，要么忍受剥削要么放弃，这也是为什么工厂的人很多跑去送外卖的原因，同时也是国际资本把工厂向人力成本更低的东南亚和印度迁移的原因。中国近几年在大力治理经济发展虚胖的问题，就产生了上述文章中国家政策风向的改变。
那么，互联网技术在这个过程中扮演了什么角色？由于经济的虚胖问题，互联网技术的引入不仅无法通过信息交换效率的提升而促进经济发展，反而加剧了经济虚胖问题的恶化。为什么这么说呢？拿跨境电商为例，互联网技术让国际品牌更具先发优势、市场地位和技术领先性的特点进一步放大，本就缺乏技术含量、技术创新的实体经济雪上加霜，本来有些企业想痛改前非，但缺乏市场的支持没有收入，则更不愿意投入也没有能力投入到技术沉淀和产品创新上。如果中国实体经济无法创造更多消费者喜爱的产品，他们就会失去市场从而缩减规模甚至倒闭，就业在他们遇到困难时受到冲击，进而使消费疲软难以抵抗经济周期带来的各种问题。互联网技术在服务领域、数据领域确实创造了互联网经济，但这种经济在地缘政治和国际局势面前脆弱到不堪一击。举个例子，从平行进口车开始的跨境电商，美国随便加个关税、搞个实体清单、限制一下出口，跨境电商企业就大面积的倒闭，很多从业者被动离职失去收入，又要面对经济虚胖过程中加诸于身的房贷、车贷、消费贷而苦不堪言。为什么美团活得比较舒服？因为美团依托于 O2O 的模式服务餐饮业，而餐饮业是实体经济，餐饮业能够积累经营、烹饪等技能，民以食为天导致餐饮是刚需。这就是阿里巴巴要做产业互联网，要通过电商平台去服务实体经济的原因吧？只有把实体经济做大做强，互联网技术带来的便利才能真正带来经济的实质增长和社会效率的提升。因此，国家对平台经济和资本进行了几轮治理后，又提出了有序引导平台经济和资本服务实体经济的方针，用法律法规增加市场预期的确定性，就是要把互联网技术的应用落到实处促进经济有序健康的发展。
说完大环境再来看看互联网行业本身，在信息交换效率提升方面的发展情况是怎样？中国青年网在 2014 年 12 月 22 日报道：「埃文.威廉姆斯是 Twitter 的联合创始人，一向低调的他于上周接受了媒体的采访，畅谈了他对新网站 Medium 的愿景。Medium 是由埃文创办的一家新兴新闻博客网站，公司员工 75 人，目前每月的访问使用人数达到了 1,700 万，用户包括美国总统奥巴马以及伊隆·马斯克等等。目前 Medium 已经发展成为一家在科技、设计和书籍和诗歌等方面非常有影响力的论坛。近年来，该网站吸引了不少知名作家和原创作者，论坛中涌现出大量聚焦设计的日志和深度的评论文章。」
放眼望去，互联网行业充斥着各种以提升信息交换效率为目的的产品，而 4G 带宽提升带来的短视频和 5G 流量费用降低带来的直播，只是把 PC 上创造的互联网产品做了一下移动端的兼容。做技术的都明白，你创造一个全新的项目和用一个旧项目改造适配新环境哪个更有发挥空间？所以，从大环境互联网技术的应用问题到行业内创新的乏力，都是明确的信号，告诉我们互联网技术发展已从初创期走向成熟期。
技术成熟期的特点是什么？最重要的就是：好的 idea 都被人做出来了。因此，创新的空间有限的情况下，做局部的微创新并做好技术落地应用是最优解。在这种背景下，整个行业充斥着悲观情绪，互联网企业裁员的传闻从 2021 年开始就断断续续的没个够。因为微创新不需要大量的人才，而改变行业获得竞争优势和壁垒的创新又太难、投入太大，让很多互联网企业望而却步。其次，如果技术上有竞争优势和壁垒，消费者就很容易从一堆产品中识别和选择你，就像拥有 M1 芯片的 Apple 手机和一堆用高通芯片的国产手机之间高下立判。但是，前有小米的性价比后有大屏、多摄像头的国产品牌，中国企业在技术应用方面做得足够出色，硬生生从 Apple、三星等国际厂商口中夺下一片市场。那么，回到面向用户体验的软件技术和互联网行业，如何通过技术应用进行局部微创新？
我认为做好技术应用创新的前提是对技术的理解，可以分成技术变化的敏感度和技术理解的深度两个方面。GUI 软件技术和用户体验相关的核心领域有两个：视觉、交互，这两个领域里的技术需要时刻保持关注，并对有应用前景和趋向成熟的技术通过 Coding 来加深理解。视觉方面包括图像、视频、直播、3D、AR/VR、智能化等，交互方面包括触摸屏、手势、声音和智能化等。其它部分都有大量文献和互联网资料，这里就不再赘述，重点讲一下我对智能化这个在视觉和交互领域都存在的技术，阐释一下我的个人理解。
先看一下 UI 自身，视觉领域应用智能化超分辨率算法能力降低带宽提升性能的方法已经在手机淘宝上实装了，我们借助端上超分辨率算法模型把 240p 的视频提升到 720p 显示做到中低端机流畅，这个在之前端智能部分有过介绍。由于 UI 上存在大量的素材图片，手机淘宝的电商业务又充斥着海量的商品图片、视频，超分辨率技术应用能够极大降低带宽消耗提升浏览速度从而提升用户体验。
再看一下 UI 个性化，这是花费篇幅最多的部分，通过智能 UI 技术应用智能化能力让每个用户都能因 UI 方案不同而享受到个性化体验。如果说超分辨率把 Sharp.js 等 JavaScript 图片处理库用智能化能力所替代，从而要求前端开发了解端智能和算法模型，那么智能 UI 则是把切图写 UI 彻底变成生成代码和智能 UI 方案生成和推荐。前者变化相对较小，可以理解为调用 Sharp.js 等库的 API 变为调用智能化超分辨率算法服务 API，后者则要求从研发、构建、发布上线全链路改变现有的技术工程体系。
交互方面应用创新包括两个方面，一方面是应用创新来提升特定场景下的输入能力，另一方面是利用智能化降低交互操作的复杂度和频率。特定场景下的输入能力能够给用户带来很多有趣的体验，比如图 1-10 我在 UC 工作期间国内浏览器团队 2017 年双十一做的 AR 表情大作战，就是借助人面部特征作为输入，用表情来操作游戏。
