张鑫旭：前端工程师应该为用户体验负责

作者｜张鑫旭

编辑 ｜孙瑞瑞、邓艳琴

用户体验将是未来企业的核心竞争力，但在当下，很多新生代前端相对缺乏用户体验的意识，为什么？怎么解？GMTC 全球大前端技术大会邀请到知名 CSS 专家、阅文集团前端技术专家张鑫旭分享题为《用户体验的困境与破局》的主题演讲，十几年来，他一直工作在前端一线，对于用户体验有非常多的心得体会，本文为演讲实录。

大家好，非常荣幸可以给大家做一个关于用户体验的主题演讲。本次演讲不会介绍用户体验怎么做，也不会介绍用户体验的意义和价值，而是作为一个前端从业者，谈谈前端技术人员在用户体验支持这块的困境与破局。

在正式开始内容之前，先做个简单的自我介绍。

我叫张鑫旭，就职于阅文集团体验设计部，担任前端技术专家，我从业十几年，一直都在一线，并且从入行开始就一直专注于用户体验相关的领域，在 HTML、CSS、JavaScript、SVG 和 Canvas 这些与用户体验密切相关的领域有大量的学习心得和体会，有幸出版了 3 本畅销书籍，《CSS 世界》、《CSS 选择器世界》和《CSS 新世界》，被称为 CSS 三部曲，这三本书还是很不错的，《CSS 世界》是 2018 年人民邮电出版社技术类新书销量第一，《CSS 新世界》上架 3 个多月已经 4 印了，读完之后会觉得专业的就是不一样。

好，下面开始正式开始我的分享。

先讲下起因。

前段时间我在社交平台放了一道校招笔试题，一道用了很多很多年的笔试题，因为这道题的正确率极低，没有了筛选的意义，所以放了出来，结果很意外，收到了不少冷嘲热讽的评论，只能靠蒙，没有意义之类的。

在我入行那个年代，font 缩写必须有字号是常识，大量的文章介绍，也是面试经常问的，现在很多人都不知道了，所以作为技术 tips 分享出来，结果很多人表示拒绝。

这让我意识到：大人，时代变了。

另外一个原因就是对新晋一批 95 后前端从业者的观察，就是我发现这批小朋友，他们主流框架、工具和库使用非常熟练，但是用户体验这块的意识相当匮乏。

先不说无障碍访问这种高阶一点的用户体验支持，就连很多面向常规用户的常识都不知道，或者说忽略。

例如，所有的可点击交互均要有按下的反馈。大家如果仔细观察手机操作系统，无论是 iOS 还是 Android，所有的列表，所有的按钮点击的时候一定会有反馈，无论是颜色变化，还是震动反馈，按下的时候一定是有反应的，这是基本的交互常识，否则用户很容易迷茫，点击了没反应，不知道是不是没有功能，还是设备死掉了，反应慢。

我试用了很多 App，像是微信、QQ 这块做得很好，然后也有一些国民级的 App 就在这块没注意，具体我就不点名了。

然后，这样一件简单且基础的交互体验常识，在新一代的前端中是被大量忽视的，或者说完全没有意识，没有这方面的概念。

又例如点击区域要大，这个在移动端非常重要，但是很多前端在实现的时候完全就是看心情，点击区域不规整，或者面积很小，只顾及视觉上的还原效果，而忽略真实的点击反馈区域。

比方说右侧这个图标按钮，最终的点击区域高度只有 18px，虽然功能 OK，测试同事也测不出来，但是如果用户在走路，或者手上拿了其他东西，往往就一次点不中，因为点击区域太小的。

忽视边界异常处理，例如，低网速、无数据、脚本出错、闪退就不考虑，只关注理想状态下实现，还自我感觉良好。所以，一旦网速慢了，就会有长时间的白屏，这个其实都是可以通过简单的方式优化的。

忽视 HTML 语义和行为在用户体验这块的意义，以至于什么都是 Div + JS ，按钮是 Div，链接跳转也是 Div + JS，而不是 <a> 元素 + href，这样可以保证就算 JS 加载慢，JS 异常，产品功能也不会有问题。

当然，还有很多其他的，装饰图片使用 <img> 元素，hover 下拉列表没有 click 事件兜底，导致触屏设备下难以使用等问题。

以及最直观的，就是用户体验方向的前端开发越来越难招。

所以我就开始思考，问什么会这样？这就引出了下一趴内容，困境分析。

我总结为下面 4 点原因。

先讲第一个，前端发展。

现在的前端已经不是我入行那个时候的前端了，当年前端就那点东西的时候，用户体验占据很大一块，自然关注多，学习多。

但是现在讲大前端，前端的触角不仅是 Web 开发，还包括小程序、快应用、还有原生端开发，桌面端开发等，这些项目开发上手，背后肯定要懂一些工程化的东西，需要懂 Node 相关知识等。

内容多，庞杂，需要学习的很多，就像这张前端知识图谱所展示的，因为内容太多，我一分为二展示了，用户体验相关知识自然就慢慢边缘化了。

框架与工程化给我们的开发带来的便捷，开发人员无需关注过多的细节，就能实现合格的线上产品，但是这种开发体验是牺牲部分用户体验换来的，比方说 CSS 自动补全所有私有前缀，默认是连 IE 浏览器一起的，对于移动端项目，这就是冗余代码，虽然可以设置，但是据我观察，太多的项目就这样冗余着，可以理解，没必要，放着没事，去掉万一有问题呢。

受众多，话语权大，带动大环境往这个方向走，技术栈越来越上层，前端与这个职业原本的定位越走越远。

第二个是设备的发展。

现在的软件和硬件都已经非常强悍了，VS Code 都可以在浏览器上跑了，那些通常的 Web 应用更是自然不在话下，所以，就算代码差、实现啰嗦，资源开销大，产品也能跑得顺畅，没必要像过去一样为了用户体验抠性能。

基建的发展也使得很多用户体验相关的技术变得不那么重要。例如，当年流量值钱的年代，前端开发产品，会使用一倍图，两倍图。WiFi 模式下大图，4G 下低清图。

现在没有那么多套路了，都是无限流量，直接 3 倍图走起，反正公司也不在意，用户也不会投诉，我开发简单，维护方便，何乐不为。

这也使得用户体验密切相关的前端技术不受追捧，无人问津，比如说兼容性很好、省流量一绝的元素。

第三个是互联网 +。

也就是互联网和传统行业的结合，这个大趋势造就了大量的前端岗位，但是这些岗位基本上都是乙方工作模式，也就是所谓的外包。

公司收益是订单量，第一要求，deadline，第二要求功能完好，服务稳定，至于产品体验，公司当然希望好一点，但是往往有心无力。毕竟体验即使很一般，也不影响赚钱。

所以，对于这一类广泛从业的前端开发人员，从工作上就不需要你关注比较细节的用户体验知识，降低了整个行业对用户体验的关注。

第四个是用户体验本身特性。

通常 1-2 个用户体验变好是没有任何意义的，需要整体，上百个，上千个细节变好，才能产生质变的效果。

这是一个成本高，且漫长的过程，其收益往往不可见，不直接相关，对于大多数财力人力紧张的企业就缺少支持的动力。

用户体验优化成果无法量化、见效慢，在晋升的时候吃亏，员工自己就不太乐意做，所以都去做性能优化。因为有数据，都是造轮子，而不是去优化轮子。就是这个道理。

以上 4 点就是我分析的用户体验遭遇困境的原因，那如何破局呢？

我也总结了 4 点：第一个，企业层面，把重视用户体验作为公司的文化。注意，不是喊口号，也不是贴标语，而是实实在在的与绩效和晋升挂钩。

也就是，员工花了大量的时间和精力做了很多用户体验相关的工作，需要得到认可，需要和造轮子的同事、引入热门流行技术的同事有同等的晋升机会。

否则，没用的，全靠技术人员自身的追求，如果公司要想产品体验好，但是公司并没有这样的基因，唯一的办法是招优秀的人，舍得给钱。

第二个，需要国家层面出手。

比方说去年年底工信部颁布的适老化规定，无障碍访问支持，点名了一些 App 要做相关体验的支持，我觉得这个非常好。

国家不出面，让企业自发做这些事情，难的，因为针对小众人群和边界场景的开发投入是一件投入产出比，或者说商业价值这块，不划算的事情，企业自身是缺乏这样的动力的，毕竟商业是逐利的，需要国家层面出手。

以后，老年人足够多的时候，我认为是有可能立法强制要求做无障碍支持的。

第三个方法就是等，等待的等。

足够内卷，行业不再高速发展，工匠精神就有了，因为这个时候用户体验会成为核心竞争力。这个应该很好理解，在一个充分竞争的、没有垄断行业，用户最终选择的，一定是用户体验最好的，甚至可以为了这个用户体验，高度溢价。

最后一个方法就是大厂带动，社区觉醒，通过社区的力量进行传播。

在这件事情上，个人的力量是极其有限的。这一点我深有体会，虽然我通过文章、分享苦口婆心，谆谆教导，用户体验很重要，希望提高整个行业对用户体验的重视，希望整个前端行业百花齐放，这么多年实践下来，虽然影响了一部分人，但是并没有预想的那样发展。

一是人轻言微，个体无法左右行业趋势的发展，二是开发者也是人，也是逐利的，如果大环境就是这样，即公司不支持，团队不认可，对自己晋升也没什么帮助，人人都浮躁，就算一时热血沸腾，很快也会随大流的。

所以，还需要大厂带头，需要社区的力量。

因为很多中小企业的技术选型决策，产品思路，业务模式都会参照大厂的做法，如果大厂愿意在用户体验与工程实践这块大力发声，其影响力绝对比个人要大的多。其实，现在有不少领先的企业正在做这样的事情，我觉得是非常好的。

另外一个，就是社区的力量，包括组织用户体验为主题的分享大会，对用户体验领域的文章进行活动征集等，因为很多开发人员内心的方向是不清晰的，一旦发现社区言论，或者风向越来越多往用户体验方向靠拢后，是会引起其关注和内心的觉醒的。

最后，总结下。

由于社会发展，行业发展等各种原因，游走于上层领域，当下的前端逐渐与基础和边界脱离，使得前端开发用户体验相关意识淡薄，知识缺乏成为比较普遍的现象，已经与“前端”原本的职业追求相背离。

这本身不是什么问题，反而在互联网高度发展中起到了举足轻重的作用。问题在于，所带来的整个社区环境，言论氛围，会让新入行的众多前端误认为现在的基于框架和工程的开发套路就是前端，以至于得了没有 Vue 框架不会开发综合征。

一旦当行业的高速发展停滞，产品进入到比拼用户体验一决胜负的时候，这部分的开发人员可能会面临所谓的 35 岁职业危机，因为用户体验绝对不是有意识就能做好的，是需要大量的前端技术做储备的。

所以，在关注功能实现的同时，多多关注技术的基础与底层，想想前端这个职业的核心竞争力是什么，未来可能会走得更加顺利。