惊了，用户体验还能这么做？

大家好久不见，上一期视频我们主要讨论了性能对用户体验的影响，这一期我们就从另外三个维度进一步分析，

分别是：UI 设计、可访问性和个性化。

首先是 UI 设计，它看起来应该是设计师该考虑的问题，但其实站在前端开发的角度，我们还可以考虑这些方面，

加载反馈，异常反馈，兜底渲染，响应式设计和交互习惯适应。

加载反馈是指用户打开页面或执行操作时得到的反馈。比如：

首屏骨架：首屏页面加载时，我们会优先渲染一个页面骨架屏，以减少用户白屏等待时的焦虑感。特别是对于弱网状态下的移动端应用（如小程序和 H5），这一项优化是非常有必要的。

再比如耗时操作：当用户执行的动作耗时较长时（如下单支付，转账，查看下一页）时，前端应该展示一个全局或局部的 Loading 提示，告知用户刚才的操作正在处理，避免用户产生疑问或重复操作。

然后是强弱依赖，这一点其实大家很少注意，但它对于提升用户体验和系统健壮性的帮助会很大

不妨考虑这样一个场景：一个产品销售页面，首屏除了要请求产品详情数据外，同时还要展示营销广告

假设它们分别以两个独立接口提供，并且没有参数依赖，我们很自然地会使用 Promise.all 让请求并发。在 SPA 架构的应用中，这当然是最快的方式，但是并发带来的问题也显而易见：

1、整体耗时取决于性能最差的接口。

2、一个接口失败导致整体失败，整个页面无法正常展示。

如果我们从业务角度分析接口的强弱依赖关系，就能有更好的设计。在这个例子中，营销广告接口的加载速度和成功与否，都不应该影响页面核心产品信息的呈现。

因此产品信息查询接口是强依赖

而营销广告接口应该视为弱依赖

所以，更好的设计应该是：在尽可能保证并发的前提下，分别处理接口，对弱依赖进行降级，以提升用户体验和系统可用性。

异常反馈是指系统遭遇异常时，给予用户的反馈

系统异常时，接口提供方无法提供期望的响应，这可能是由于用户网络问题，或是下游系统故障、不稳定造成的。

虽然此时前端无法呈现功能页面或是处理用户操作，但也应该以错误提示页面（error page），轻提示（toast、黄条），强提示（alert）等方式告知用户稍后重试。

接着是兜底渲染，兜底的意思就是当预期条件不满足时，执行默认动作，可以理解为英文中的 Fallback。我们前面提到的弱依赖降级，异常提示都可以算作兜底。

当然，除了异常需要兜底外，其实非异常状态也需要兜底。

比如空数据最好不要什么都不展示，而应该提示 “暂无数据”，“没有更多了” 等等。

接着是响应式设计，我们都知道前端的页面可能会出现在不同尺寸的设备上，而如何适配不同的屏幕尺寸，为用户呈现最好的页面效果，就需要好好进行响应式设计了。

对于大多数的 WEB 页面，应该多考虑 PC 和移动设备上的呈现效果。几年前流行的 Mobile-First 理念，核心就需要用到响应式设计。

响应式设计并不总是需要的，比如强制竖屏的小程序通常就不需要再单独适配屏幕大小。

我们都知道可以利用 CSS 的媒体查询功能，来为不同宽度的屏幕应用不同的样式，这是一种原生且性能最好的方式

CSS 媒体查询除了检测屏幕宽高外，还可以检测分辨率，色彩深度，触摸屏等，也是实现暗黑模式（Dark Mode）的重要途径。

CSS 媒体查询在一些特定场景中有局限性，比如只能改变样式，无法反过来影响 JS 逻辑。

假设我们需要通过 Drawer 组件的 anchor 参数，调整它在手机和 PC 端的弹出方向，这个时候用 CSS 媒体查询就不太行得通了

此时需要借助另一种方式来实现：JS 计算。

我们可以通过 JS 监听 resize 事件来感知屏幕宽度变化，确定 anchor 的值。

最后是交互习惯适应，很多时候用户在手机和 PC 屏幕上的交互习惯是不同的。为了让用户获得最佳的体验，前端要考虑的事情就很多了。

比如同样是分页加载，用户在手机上会更倾向于滚动加载更多，而在 PC 上则是点击下一页或者页码来完成。

再比如同样是菜单选择，在手机上最好通过 ActionSheet 来完成，而在 PC 上则是下拉菜单，因为 PC 页面的空间更大。

又比如提交按钮，在手机上一般是全宽且位于页面底部，而在 PC 上则是非全宽以及位于页面右侧的。

你看，仅仅是 UI 设计这个维度，前端就能默认做好很多事情，而不需要设计师反复参与。

接下来我们讨论可访问性（或者叫无障碍化）对用户体验的影响。

虽然之前在 UI 设计中提到的部分内容（如响应式设计和交互习惯）也可以归为可访问性的范畴。但在这个视频专题中，我所提到的 UI 设计是对于不同设备而言

而可访问性是对于不同用户而言的。

我们应该知道前端页面不仅会被各种各样的设备访问，还会被不同的人使用

特别是对于国际化业务，残障用户来说，页面的可访问性就变得尤为重要了。

对于国际化业务，通常需要提供多语言切换，目前许多前端框架都提供了多语言方案，比如 Vue 的 vue-i18n，react 的 reactIntl，Angular 的 angular-translate 等等

对于新手用户，特别是在一些具备学习成本的页面上，如果能有一个简洁的新手引导就更好了。

对于残障用户，前端可以适配屏幕阅读器，利用色彩对比度检查工具，确保颜色组合对色盲用户友好等等。

总之，可访问性是前端追求人机交互极致体验的必经之路，需要慢工出细活。

最后要讲的是个性化，

主要介绍三个场景：主题（Theme），记忆（Memory）和 A/B 测试。

关于主题我们应该不陌生。比如：一些网站提供的浅色、深色模式切换功能；我们常说的换肤（比如支付宝的出行码页面，微信的领红包页面）都是让用户自定义页面样式。

主题不仅仅是满足用户个性化需求，我们也应该看到其背后的商业价值。

关于记忆，前端在不借助服务端保存数据的情况下，可以通过本地存储，记住用户上一次访问的状态，以便在下一次访问时恢复先前状态。

比如页面滚动位置，数据筛选条件，复杂表单的草稿等等。这能减少用户重复操作，让用户有一个顺畅的操作体验。

最后一个需要了解的就是 A/B 测试，严格来说它是一种数据分析手段。针对不同的用户画像，前端渲染不同的页面，通过算法分析优化页面布局，文案和营销材料，找到转化率最高的设计方案。

不过我们也可以借助 A/B 测试的技术理念，以用户体验为导向，来为不同用户提供个性化页面。

本期我们从 UI 设计、可访问性和个性化三个维度讨论了用户体验应该怎么做，相信你一定有不少收获。

下一期我们聊聊服务端和全栈开发为前端带来的巨大优势。

更多扩展内容见评论区，记得点个关注，我是小麦，我们下期再见。