到底什么是前端？当前主流趋势是否有违前端一词出现时的原本意愿？
本文最后更新于：2022年4月4日 上午
🧨 大家好，我是 Smooth，一名大二的 SCAU 前端er
🏆 本篇文章是我在看完张鑫旭大佬文章后以及结合自己平时开发过程中的一些体会而做出的一篇总结
❤ 写作不易，肯请「转发」， 谢谢支持！
前言
其实想写这篇文章挺久的了，作为一个前端工程师，前端的本质到底是什么？
- 是一直框架 + 工程化 的开发流程吗？
- 是只会使用 Vue 或 React 等等的主流框架开发出一个个项目并创造营收吗？
- 是每天都沉浸在写不完的，不断迭代的一个个业务场景里吗？
首先，不可否认的是，具备 Vue 或 React 这些前端主流框架，Webpack 或 Vite 等等的打包工具这些前端开发经验是必须的，是吃饭的本钱，只不过随着每天不断醉心于写业务逻辑，是否渐渐忘了前端的本质到底是什么了？
下面，我想简单谈谈我对于前端的一个理解
什么是前端？
我个人理解，前端的本质应该是设计出符合用户体验的一个个产品，联合后端等等一起
即所有开发都是为了用户服务，不然开发出一个产品，由于交互不合理或不美观或加载慢等等原因导致逐渐丧失用户，那得不偿失了。
下面，简单罗列一下什么样的产品能称作是一个用户体验好的产品
1、友好的视觉配色
- 至少不要压抑（轻快、神秘、高端【风格】）
- 避免凌乱（统一：字体、配色、模块组件）
- 在视觉上引导、聚焦界面中的重要信息（视觉层次）
- 注重点、线、面的配合（饱满、友好）
- 准确的图标、色彩表达
2、友好的询问时机及语句
- 通俗易懂的语言传递对于撤销成本高等的操作
- 合时机的询问用户
- 尽可能的让用户知道计算机在做些什么
- 尽可能的让用户知道如此将会怎样
3、舒服而优雅的交互
- 让等待不那么焦急（功能↑ 等待乐趣、视觉感受）
- 切换、弹出尽可能的优雅（划入、淡出等）
- 大多数软件交互需求是不用跟用户沟通的
4、清晰易懂的操作逻辑
- 明确的鼠标类型（移动、点击、默认、禁止……）
- 明确的触发行为（经过、按下、拖动）
- 简单并且完整的操作逻辑
- 尽可能的让操作可逆
- 尽可能的满足用户个性化的需求
- 异常处理优雅
如果用户突然因为网络不好时，也要保证页面的一些主要功能能够加载出来
（其实这里更多的是涉及到性能优化方面了，在网络不好时如果更快更全地加载出页面主要内容，也要根据元素重要程度不同而分配好加载的先后顺序）例如 hover 实现的下拉列表，如果网速差导致页面渲染出现了卡顿，而 hover 是鼠标放上去才会给元素添加样式，因此很容易导致加载不出来的问题，所以必须得给 hover 触发的事件，添加 click 事件兜底机制，确保点击相关元素也能弹出。
用户体验好的例子
这里的话引用一下 @张鑫旭 大佬对于前端用户体验方面的看法
所有的可点击交互均要有按下的反馈。大家如果仔细观察手机操作系统，无论是 iOS 还是 Android，所有的列表，所有的按钮点击的时候一定会有反馈，无论是颜色变化，还是震动反馈，按下的时候一定是有反应的，这是基本的交互常识，否则用户很容易迷茫，点击了没反应，不知道是不是没有功能，还是设备死掉了，反应慢。
点击区域要大，这个在移动端非常重要。但是很多前端在实现的时候完全就是看心情，点击区域不规整，或者面积很小，只顾及视觉上的还原效果，而忽略真实的点击反馈区域。
比方说有时使用手机浏览网页或使用某个 App，在一些图标按钮处，最终的点击区域高度只有 18px，虽然功能 OK，测试同事也测不出来，但是如果用户在走路，或者手上拿了其他东西，往往就一次点不中，因为点击区域太小。
忽视边界异常处理，例如，低网速、无数据、脚本出错、闪退就不考虑，只关注理想状态下实现，还自我感觉良好。所以，一旦网速慢了，就会有长时间的白屏，这个其实都是可以通过简单的方式优化的。
忽视 HTML 语义和行为在用户体验这块的意义，以至于什么都是
div + JS，按钮是div，链接跳转也是div + JS，而不是<a>元素 + href，这样可以保证就算 JS 加载慢，JS 异常，产品功能也不会有问题。当然，还有很多其他的，装饰图片使用
<img>元素，hover 下拉列表没有 click 事件兜底，导致触屏设备下难以使用等问题。
以及最直观的，就是用户体验方向的前端开发越来越难招。
是什么原因造成了以上现象逐渐成为主流？
总结为下面 4 点原因。
1. 前端发展
在之前，由于前端涉及的领域只是单纯的写一个页面样式以及交互需求，因此用户体验占据很大一块，自然关注多，学习多。
但是现在讲大前端，前端的触角不仅是 Web 开发，还包括小程序、快应用、还有原生端开发，桌面端开发等，这些项目开发上手，背后肯定要懂一些工程化的东西，需要懂 Node 相关知识等。
内容多，庞杂，需要学习的很多，就像这张前端知识图谱所展示的，因为内容太多，我一分为二展示了，用户体验相关知识自然就慢慢边缘化了。
框架与工程化给我们的开发带来的便捷，开发人员无需关注过多的细节，就能实现合格的线上产品，但是这种开发体验是牺牲部分用户体验换来的，比方说 CSS 自动补全所有私有前缀，默认是连 IE 浏览器一起的，对于移动端项目，这就是冗余代码，虽然可以设置，但太多的项目就这样冗余着，可以理解，没必要，放着没事，去掉万一有问题呢。（屎山的由来）
受众多，话语权大，带动大环境往这个方向走，技术栈越来越上层，前端与这个职业原本的定位越走越远。
2. 设备的发展
现在的软件和硬件都已经非常强悍了，VS Code 都可以在浏览器上跑了，那些通常的 Web 应用更是自然不在话下，所以，就算代码差、实现啰嗦，资源开销大，产品也能跑得顺畅，没必要像过去一样为了用户体验抠性能。
基建的发展也使得很多用户体验相关的技术变得不那么重要。例如，当年流量值钱的年代，前端开发产品，会使用一倍图，两倍图。WiFi 模式下大图，4G 下低清图。
现在没有那么多套路了，都是无限流量，直接 3 倍图走起，反正公司也不在意，用户也不会投诉，我开发简单，维护方便，何乐不为。
这也使得用户体验密切相关的前端技术不受追捧，无人问津，比如说兼容性很好、省流量一绝的元素。
比如说图片，什么业务场景用什么样格式的图片，这里面都大有讲究。
3. 互联网 +
也就是互联网和传统行业的结合，这个大趋势造就了大量的前端岗位，但是这些岗位基本上都是乙方工作模式，也就是所谓的外包。
公司收益是订单量，第一要求，deadline，第二要求功能完好，服务稳定，至于产品体验，公司当然希望好一点，但是往往有心无力。毕竟体验即使很一般，也不影响赚钱。
所以，对于这一类广泛从业的前端开发人员，从工作上就不需要你关注比较细节的用户体验知识，降低了整个行业对用户体验的关注。
4. 用户体验本身特性
通常 1-2 个用户体验变好是没有任何意义的，需要整体，上百个，上千个细节变好，才能产生质变的效果。
这是一个成本高，且漫长的过程，其收益往往不可见，不直接相关，对于大多数财力人力紧张的企业就缺少支持的动力。
用户体验优化成果无法量化、见效慢，在晋升的时候吃亏，员工自己就不太乐意做，所以都去做性能优化。因为有数据，都是造轮子，而不是去优化轮子。就是这个道理。
如何冲出上面提到的主流趋势呢？
1. 企业层面，把重视用户体验作为公司的文化
注意，不是喊口号，也不是贴标语，而是实实在在的与绩效和晋升挂钩。
也就是，员工花了大量的时间和精力做了很多用户体验相关的工作，需要得到认可，需要和造轮子的同事、引入热门流行技术的同事有同等的晋升机会。
否则，没用的，全靠技术人员自身的追求，如果公司要想产品体验好，但是公司并没有这样的基因，唯一的办法是招优秀的人，舍得给钱。
2. 需要国家层面出手
比方说去年年底工信部颁布的适老化规定，无障碍访问支持，点名了一些 App 要做相关体验的支持，这点非常好。
国家不出面，让企业自发做这些事情，难的，因为针对小众人群和边界场景的开发投入是一件投入产出比，或者说商业价值这块，不划算的事情，企业自身是缺乏这样的动力的，毕竟商业是逐利的，需要国家层面出手。
以后，老年人足够多的时候，我认为是有可能立法强制要求做无障碍支持的。
3. 等，等待的等
足够内卷，行业不再高速发展，工匠精神就有了，因为这个时候用户体验会成为核心竞争力。这个应该很好理解，在一个充分竞争的、没有垄断行业，用户最终选择的，一定是用户体验最好的，甚至可以为了这个用户体验，高度溢价。
4. 大厂带动，社区觉醒，通过社区的力量进行传播
在这件事情上，个人的力量是极其有限的。个人通过文章、分享苦口婆心，谆谆教导，用户体验很重要，希望提高整个行业对用户体验的重视，希望整个前端行业百花齐放，这么多年实践下来，虽然影响了一部分人，但是并没有预想的那样发展。
一是人轻言微，个体无法左右行业趋势的发展，二是开发者也是人，也是逐利的，如果大环境就是这样，即公司不支持，团队不认可，对自己晋升也没什么帮助，人人都浮躁，就算一时热血沸腾，很快也会随大流的。
所以，还需要大厂带头，需要社区的力量。
因为很多中小企业的技术选型决策，产品思路，业务模式都会参照大厂的做法，如果大厂愿意在用户体验与工程实践这块大力发声，其影响力绝对比个人要大的多。其实，现在有不少领先的企业正在做这样的事情，我觉得是非常好的。
社区的力量，包括组织用户体验为主题的分享大会，对用户体验领域的文章进行活动征集等，因为很多开发人员内心的方向是不清晰的，一旦发现社区言论，或者风向越来越多往用户体验方向靠拢后，是会引起其关注和内心的觉醒的。
总结
由于社会发展，行业发展等各种原因，游走于上层领域，当下的前端逐渐与基础和边界脱离，使得前端开发用户体验相关意识淡薄，知识缺乏成为比较普遍的现象，已经与“前端”原本的职业追求相背离。
这本身不是什么问题，反而在互联网高度发展中起到了举足轻重的作用。问题在于，所带来的整个社区环境，言论氛围，会让新入行的众多前端误认为现在的基于框架和工程的开发套路就是前端，以至于得了没有 Vue 框架不会开发综合征（前端基础不扎实）。
一旦当行业的高速发展停滞，产品进入到比拼用户体验一决胜负的时候，这部分的开发人员可能会面临所谓的 35 岁职业危机，因为用户体验绝对不是有意识就能做好的，是需要大量的前端技术做储备的。
所以，在关注功能实现的同时，多多关注技术的基础与底层，想想前端这个职业的核心竞争力是什么，未来可能会走得更加顺利。
最后
我是 Smoothzjc，致力于产出更多且不仅限于前端方面的优质文章
大家也可以关注我的公众号 @ Smooth前端成长记录，及时通过移动端获取到最新文章消息！
写作不易，「点赞」+「收藏」+「转发」 谢谢支持❤
往期推荐
《都2022年了还不考虑来学React Hook吗？6k字带你从入门到吃透》
《一份不可多得的 Webpack 学习指南（1万字长文带你入门 Webpack 并掌握常用的进阶配置）》
《通过 React15 ~ 17 的优化迭代来简单聊聊 Fiber》
《【offer 收割机之面试必备】一篇非常全面的 从 URL 输入到页面展现的全过程 精华梳理》
《【offer 收割机之手写系列】10分钟带你掌握原理并手写防抖与节流的立即/非立即执行版本》
《【offer 收割机之 CSS 回顾系列】请你解释一下什么是 BFC ？他的应用场景有哪些？》
《Github + hexo 实现自己的个人博客、配置主题（超详细）》
《【建议收藏】长达万字的git常用指令总结！！！适合小白及在工作中想要对git基本指令有所了解的人群》
《浅谈javascript的原型和原型链(新手懵懂想学会原型链？看这篇文章就足够啦！！！)》
参考资料
作者：Smooth
文章链接：http://example.com/2022/04/04/%E5%88%B0%E5%BA%95%E4%BB%80%E4%B9%88%E6%98%AF%E5%89%8D%E7%AB%AF%EF%BC%9F%E5%BD%93%E5%89%8D%E4%B8%BB%E6%B5%81%E8%B6%8B%E5%8A%BF%E6%98%AF%E5%90%A6%E6%9C%89%E8%BF%9D%E5%89%8D%E7%AB%AF%E4%B8%80%E8%AF%8D%E5%87%BA%E7%8E%B0%E6%97%B6%E7%9A%84%E5%8E%9F%E6%9C%AC%E6%84%8F%E6%84%BF%EF%BC%9F/
版权说明：本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！