本文首发于微信公众号“Shopee 技术团队”。

前言

本文是基于 Shopee 供应链团队外部 WMS（Warehouse Management System，仓库管理系统）我的项目的整体重构，总结而出的一份 Web 用户体验设计晋升指南。

因为是对曾经存在的我的项目进行齐全的颠覆重构，所以在整个过程中，咱们始终在思考如何尽可能地站在用户的角度，通过前端设计去晋升改良用户的体验与感触，真正达到重构的目标及意义。

一个 Web 页面或是一个 App，想让他人用得爽，取得良好的用户体验，可能须要包含但不限于：

• 急速的关上速度
• 令人眼前一亮的 UI 设计
• 酷炫的动画成果
• 丰盛的个性化设置
• 易用、敌对的便捷操作
• 贴心的细节
• 关注残障人士，良好的可拜访性
• ……

所谓的用户体验设计，是秉承着以用户为核心的思维的一种设计伎俩，以用户需要为指标而进行的设计。设计过程重视以用户为核心，用户体验的概念从开发的最晚期就开始进入整个流程，并贯通始终。

良好的用户体验设计，是团队在产品开发中每一个环节共同努力的后果。

本文将次要从 页面出现、交互细节、可拜访性 三个方面动手，分享一些在理论开发过程中积攒的无益教训。通过这篇文章，你将能：

• 理解到一些细节是如何影响用户体验的；
• 理解到如何在尽量小的开发改变下，晋升页面的用户体验；
• 理解到一些优良的交互设计细节；
• 理解根本的无障碍性能及页面可拜访性的含意；
• 理解根本的晋升页面可拜访性的办法。

1. 页面出现

就整个页面的展现和页面内容的出现而言，不同的展现形式，所失去的成果截然不同。

这其中有十分多值得注意的细节。接下来分为几个要点进行论述：

• 自适应的布局
• 重点内容的排布设计
• 兼容不同场景与异样回退
• 图片的出现及异样解决
• 适当的过渡与动画

1.1 自适应的布局

先来看一些布局相干的问题。

布局，是前端在重构页面过程中须要提前进行布局思考的，个别应该思考分明以下几个问题：

• 对于 PC 端，我的项目是全屏布局还是定宽布局？用户是否还在应用 IE？
• 对于全屏布局，须要适配的最小宽度是多少？
• 对于挪动端布局，你晓得用户设施的散布吗？起码兼容到 Android 什么版本？iOS 什么版本？
• 内容应该以什么样的形式出现？

到明天，各种设施浩如烟海，挪动端屏幕尺寸纷繁复杂（下图仅仅是到 2019 年各种安卓设施屏幕尺寸图的散布）：

不过，咱们的重构我的项目整体是以 PC 为主的 ToB 我的项目，所以这里次要以 PC 端为例进行解说。

对于大部分 PC 端的我的项目，首先须要思考的必定是最里面的一层包裹。假如就是 .g-app-wrapper。

<div class="g-app-wrapper">
    <!-- 外部内容 -->
</div>

首先，对于 .g-app-wrapper，有几点是咱们在我的项目开发前必须弄清楚的：

• 我的项目是全屏布局还是定宽布局？
• 对于全屏布局，须要适配的最小的宽度是多少？

对于定宽布局，就比拟不便了，假如定宽为 1200px，那么：

.g-app-wrapper {
    width: 1200px;
    margin: 0 auto;
}

利用 margin: 0 auto 实现布局的程度居中。在屏幕宽度大于 1200px 时，两侧留白；屏幕宽度小于 1200px 时，则呈现滚动条，保障外部内容不乱。

古代布局更多的是全屏布局。其实当初也更提倡这种布局，即可随用户设施的尺寸和能力而变动的自适应布局。

自适应布局通常有左右两栏，左侧定宽，右侧自适应残余宽度。另外还会有一个最小宽度。那么，它的布局应该是这样：

<div class="g-app-wrapper">
    <div class="g-sidebar"></div>
    <div class="g-main"></div>
</div>

.g-app-wrapper {
    display: flex;
    min-width: 1200px;
}
.g-sidebar {
    flex-basis: 250px;
    margin-right: 10px;
}
.g-main {flex-grow: 1;}

这里利用了 flex 布局下的 flex-grow: 1，让 .main 进行伸缩，占满残余空间，利用 min-width 保障了整个容器的最小宽度。

这是最根本的自适应布局。对于古代布局，咱们应该尽可能思考到更多的场景。做到：

底部 footer

上面一种情景也十分常见：

页面存在一个 footer（页脚）局部，如果整个页面的内容高度小于视窗的高度，则 footer 固定在视窗底部，如果整个页面的内容高度大于视窗的高度，则 footer 失常流排布（也就是须要滚动到底部能力看到 footer）。

看看成果：

这个需要如果可能应用 flex 的话，用 justify-content: space-between 能够很好地解决。同理，应用 margin-top: auto 也非常容易实现：

<div class="g-container">
    <div class="g-real-box">
        ...
    </div>
    <div class="g-footer"></div>
</div>

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}

Codepen Demo – sticky footer by flex margin auto

当然，实现它的办法有很多，这里仅给出一种举荐的解法。

1.2 重点内容的排布设计

上面这一块对于重点内容的展现。

1.2.1 重要内容及性能的展现

让吸引用户注意力的元素前置。如果咱们的页面存在须要让用户理解、解决的外围信息或者表单，尽可能将其地位放在上方，让用户更容易获取这部分信息。

将用户须要的信息、重要的性能展现进去而不是藏起来。

相似于导航、搜寻等高频操作，肯定不要让用户屡次点击能力用到。

1.2.2 解决动静内容：文本超长

对于所有接管后端接口字段的文本展现类的界面，都须要思考全面。失常状况如下，是没有问题的：

然而咱们是否思考到了文本会超长？超长了会折行还是换行？

对于单行文本，应用单行省略：

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

当然，目前对于多行文本的超长省略，兼容性也曾经十分好了：

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

1.2.3 解决动静内容：爱护边界

对于一些动静内容，咱们常常应用 min/max-width 或 min/max-height 对容器的高宽限度进行正当的管制。

在应用它们的时候，也有一些细节须要思考到。
譬如常常会应用 min-width 管制按钮的最小宽度：

.btn {
    ...
    min-width: 120px;
}

当内容比拟少的时候是没问题的，然而如果内容比拟长，就容易呈现问题。下图就是应用了 min-width 却没思考到按钮的过长的状况：

这里就须要配合 padding 一起：

.btn {
    ...
    min-width: 88px;
    padding: 0 16px
}

借用 Min and Max Width/Height in CSS 中一张十分好的图，作为释义：

1.3 兼容不同场景与异样回退：空数据内容展现

这个模块是兼容不同场景与异样回退，是一个经常被疏忽的中央。

页面常常会有列表搜寻、列表展现。那么，既然存在数据的失常状况，当然也会存在搜寻不到后果或者列表无内容可展现的情景。

对于这种状况，肯定要留神空数据后果页面的设计；同时要晓得，这也是疏导用户的好中央。对于空数据后果页面，分分明：

（1）数据为空

• 用户无权限——要告知用户无权限拜访的起因和解决方案
• 搜寻无后果——告知用户搜寻无数据的后果，如有必要可举荐相干内容
• 筛选无后果——个别间接告知筛选无后果

• 页面无数据——文案设计有几个方向：

  • 通知用户这里将会寄存什么数据
  • 给用户一个被动发明数据的理由，比方通过话术引起用户心理共鸣
  • 若页面无数据会给用户造成困惑，则能够阐明起因打消用户的困惑

（2）异样状态

• 网络异样——指出以后状态为网络异样，并给出解决方案
• 服务器异样——指出以后状态为服务器异样，并给出解决方案
• 加载失败——加载失败次要会由网络异样或服务器异样造成
• 不同的状况可能对应不同的空数据后果页面，附带不同的操作疏导

例如网络异样，能够疏导用户刷新页面：

或者的确是零后果，譬如没有订单信息，能够疏导用户去进行订单的创立（疏导生产）：

小小总结一下，上述篇幅始终都在论述一个情理：开发时，不能仅仅关注失常景象，要多思考各种异常情况，思考全面，做好各种可能状况的解决。

1.4 图片的出现及异样解决

图片在咱们的业务中十分常见。然而要完满解决图片，并不轻松。

1.4.1 给图片同时设置高宽

有的时候产品和设计会约定，只能应用固定尺寸大小的图片，咱们的布局可能是这样：

对应的布局：

<ul class="g-container">
    <li>
        <img src="http://placehold.it/150x100">
        <p> 图片形容 </p>
    </li>
</ul>

ul li img {width: 150px;}

假如后端接口呈现一张非正常大小的图片，上述不加爱护的布局就会出问题：

所以对于图片，咱们总是倡议同时写上高和宽，防止因为图片尺寸谬误带来的布局问题。

ul li img {
    width: 150px;
    height: 100px;
}

另外，给 <img> 标签同时写上高宽，能够在图片加载之前提前占住地位，防止图片从未加载状态到渲染实现状态高宽变动引起的重排问题。

1.4.2 object-fit

限度高宽也可能会呈现问题，比方图片被拉伸了，十分难看：

这个时候咱们能够借助 object-fit，它可能指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽。

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}

利用 object-fit: cover，使图片内容在放弃宽高比的同时填充元素的整个内容框。

object-fit 还有一个配套属性 object-position，它能够管制图片在其内容框中的地位（相似于 background-position），m 默认是 object-position: 50% 50%。如果你不心愿图片居中展现，能够应用它去扭转图片理论展现的地位。

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    object-position: 50% 100%;
}

像是这样，object-position: 100% 50% 指明从底部开始展现图片。

这里有一个很好的 Demo 能够帮忙你了解 object-position：

CodePen Demo – Object position

1.4.3 思考屏幕 dpr：响应式图片

失常状况下，图片的展现应该没有什么问题了，但咱们还能够做得更好。

在挪动端或者一些高清的 PC 屏幕（例如苹果的 Mac Book），屏幕的 dpr 可能大于 1。这种时候，咱们可能还须要思考利用多倍图去适配不同 dpr 的屏幕。

正好，<img> 标签提供了相应的属性 srcset 供咱们操作。

<img src='photo@1x.png'
   srcset='photo@1x.png 1x,
           photo@2x.png 2x,
           photo@3x.png 3x' 
/>

不过，这是比拟旧的写法，srcset 减少了新的 w 宽度描述符，须要配合 sizes 一起应用，所以更好的写法是：

<img 
        src = "photo.png" 
        sizes =“(min-width: 600px) 600px, 300px" 
        srcset =“photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

利用 srcset，咱们能够给不同 dpr 的屏幕提供最适宜的图片。

1.4.4 图片失落

好了，当图片链接没问题时，曾经解决好了。接下来还须要思考，当图片链接挂了，应该如何解决。

解决的形式有很多种。最好的解决形式，是我在张鑫旭老师《图片加载失败后 CSS 款式解决最佳实际》这篇文章中看到的。这里简略讲讲：

• 利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个款式类；
• 利用新增的款式类，配合 <img> 元素的伪元素，展现默认兜底图的同时，还能一起展现 <img> 元素的 alt 信息。

<img src="test.png" alt="图片形容" onerror="this.classList.add('error');">

img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
    content: "";
    /** 定位代码 **/
    background: url(error-default.png);
}
 
img.error::after {content: attr(alt);
    /** 定位代码 **/
}

咱们利用伪元素 before，加载默认谬误兜底图，利用伪元素 after，展现图片的 alt 信息：

到此，残缺的对图片的解决就算实现了，残缺的 Demo 你能够戳这里看看：CodePen Demo – 图片解决。

1.5 适当的过渡与动画

好的页面出现须要适当的过渡与动画，让整体交互体验更加晦涩。适当减少过渡与动画，可能很好地让用户感知到页面的变动，它们有如下作用：

• 缩小认知负荷
• 避免变动视盲
• 空间上营造更好的印象
• 让用户界面鲜活起来

这一块内容也能够放在交互设计优化，读者敌人们理解就好。

1.5.1 loading 期待动画

页面上随处可见的 loading 成果，其实就是这样一种作用，让用户感知页面正在加载，或者正在解决某些事务。

1.5.2 骨架屏动画

骨架屏的布局与页面的视觉出现保持一致，能疏导用户将关注点聚焦到感兴趣的地位，并且能防止过长时间的期待。

1.5.3 滚动平滑：应用 scroll-behavior: smooth 让滚动丝滑

应用 scroll-behavior: smooth，能够让滚动框实现安稳地滚动，而不是突兀地跳动。看看成果，假如如下构造：

<div class="g-container">
  <nav>
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
  </nav>
  <div class="scrolling-box">
    <section id="1">First section</section>
    <section id="2">Second section</section>
    <section id="3">Third section</section>
  </div>
</div>

不应用 scroll-behavior: smooth，就是突兀地跳动切换：

要改善这种景象，能够给可滚动容器增加 scroll-behavior: smooth，实现平滑滚动：

{scroll-behavior: smooth;}

1.5.4 粘性滚动：应用 scroll-snap-type 优化滚动成果

sroll-snap-type 可能算得上是新的滚动标准外面最外围的一个属性款式。

scroll-snap-type：属性定义在滚动容器中的一个长期点（snap point）如何被严格地执行。

光看定义有点难了解，简略而言，这个属性规定了一个容器是否对外部滚动动作进行捕获，并且规定了如何去解决滚动完结状态。让滚动操作完结后，元素进行在适宜的地位。

看个简略示例：

当然，scroll-snap-type 用法十分多，可管制优化的点很多，限于篇幅无奈一一开展。

1.5.5 管制滚动层级，防止页面大量重排

这个优化可能略微有一点难了解。须要理解 CSS 渲染优化的相干常识。

先说论断，管制滚动层级的意思是 尽量让须要进行 CSS 动画（能够是元素的动画，也能够是容器的滚动）的元素的 z-index 放弃在页面最上方，防止浏览器创立不必要的图形层（GraphicsLayer），可能很好地晋升渲染性能。

这一点怎么了解呢？一个元素触发创立一个 Graphics Layer 层的其中一个因素是：

• 元素有一个 z-index 较低且蕴含一个复合层的兄弟元素。

根据上述这点，咱们对滚动性能进行优化的时候，须要留神两点：

• 通过生成独立的 GraphicsLayer，利用 GPU 减速，晋升滚动的性能；
• 如果自身滚动没有性能问题，不须要独立的 GraphicsLayer，也要留神滚动容器的层级，防止因为层级过高而被其余创立了 GraphicsLayer 的元素合并，被动地生成一个 GraphicsLayer，影响页面整体的渲染性能。

1.5.6 转场动画

从一个模块跳转到另外一个模块的时候，转场动画就派上了用场。它的作用在于：在适合的机会，将眼帘疏导到适当的地位。

看上面的例子：

在点击按钮弹出弹窗的过程中，弹窗不是突兀地呈现，而是从点击的中央放大至视窗两头，这个疏导的过程让体验更加丝滑。

1.5.7 操作动画

这个和 loading 有点相似，遇到一些耗时操作，比方下载时，咱们能够通过定制一个非凡的动画，减缓用户期待的焦躁、焦虑感。

上述动画的代码，你能够猛击：

CodePen Demo – Download interaction By Milan Raring

当然，除了下载期待，咱们也能够在一些重要的操作交互上，例如点赞、关注等，定制非凡的动画，让过程更加生动有趣。上面这个是某网站的点赞动画：

上述点赞动画的代码，你能够猛击：

CodePen Demo – Twitter 点赞动画

1.5.8 应用过渡与动画的误区

正当应用动画能让页面增色不少，但同时要防止踩入上面的一些坑：

• 动画没有关联性
• 为了动画而动画，没有目的性
• 过于迟缓，妨碍交互
• 不够明确

简略解释一下。譬如动画关联性，关联性背地的逻辑能帮忙用户在界面布局中了解刚产生的变动，是什么导致了变动。

下图中，右边是关联性差的，左边是关联性好的：

还有一点，大部分动画不宜过久，要足够迅速。

迟缓的动画产生了不必要的进展。过渡动画应该放弃简短，因为用户会频繁看到它们。让动画持续时间放弃在 300ms 或更短。

看下图演示，同一个转场动画会被频繁触发，所以尽可能地让每次的动画不要继续过久，可能帮忙用户节俭更多工夫。

总而言之，动画和过渡要用得失当益处，防止为了动画而动画十分重要。

2. 交互设计优化

接下来一个大环节是一些对于交互的细节。

什么是交互设计？交互设计（Interaction Design, IXD）是定义、设计人造零碎的行为的设计畛域，它定义了 两个或多个互动的个体之间交换 的内容和构造，使之 互相配合，独特达成某种目标。

2.1 Web 端交互方式

Web 端交互围绕计算机为核心，次要波及键盘、鼠标两类设施的交互。

对于交互设计，一些比拟通用的准则有：

• Don’t make me think
• 合乎用户的习惯与预期
• 操作便当
• 做适当的揭示
• 不强制用户

2.2 Don’t make me think

有一本书就叫 Don’t make me think，它所想表述的外围是，尽可能让产品做到高可用性，让用户毋庸思考也能明确无误地应用产品中的各项性能。

那么，咱们的页面如何尽可能做到高可用性呢？

2.2.1 应用习惯用法

应用习惯用法。当咱们设计一个新的页面时，页面地位、性能设置、视觉元素该当和惯常用法相差无几，这样能力让用户有舒适感。

这里并不是要扼杀大家的想象力，让所有页面都变化无穷。依据产品的状态及受众，大部分页面是不适用于各种天马行空的设想的。

例如上面这样一个 PC 端页面构造，这种布局曾经十分常见。遇到这种页面，用户可能十分疾速地在指定区域找到想要的元素及信息：

能够再和咱们的 WMS 重构后的页面作比拟，整体是十分相似的：

采纳习惯用法的设置可能让人疾速上手新的生疏的页面或者性能。

2.2.2 升高视觉噪声

另外一种做法是升高视觉噪声，让用户疾速聚焦。

譬如弹窗背地的暗影、虚化，就是十分好的升高视觉噪声的伎俩。

这一点还是十分好了解的，也属于常见设计伎俩之一，在咱们外部的相干组件、自研组件库曾经积淀得很好了。

2.3 合乎用户的习惯与预期

接下来是 合乎用户的习惯与预期，它的意义在于缩小用户的思考，合乎用户的习惯，让用户的体验更加舒服。

上面这几种弹窗，哪一个是更好的抉择？

三个弹窗可供操作的按钮别离是：

• 右下角的勾销和确认，同时右上角的 X 能够敞开弹窗；
• 只有右下角的勾销和确认；
• 只有确认按钮。

更好的抉择应该是第一个：同时有勾销和确认按钮，右上角的 X 能够敞开弹窗。因为这样最合乎用户的习惯预期。

看看这个 Windows 下的弹窗：

大部分 Windows 的弹窗，都是有勾销、确认加上右上角的 X 按钮的。这种弹窗的益处在于：

• 视觉起因，元素均衡；
• 合乎用户习惯，大多数用户都是 Windows 操作系统过去的；
• 交互一致性，升高用户学习老本；
• 晋升页面的可拜访性和无障碍拜访性。

2.3.1 优化手势：不同场景利用不同 cursor

对于不同的内容，最好给与不同的 cursor 款式，CSS 原生提供了十分多种罕用的手势。

在不同的场景应用不同的鼠标手势，合乎用户的习惯与预期，能够很好地晋升用户的交互体验。

首先对于按钮，就至多会有三种不同的 cursor，别离是可点击、不可点击、期待中：

{
    cursor: pointer;    // 可点击
    cursor: not-allowed;    // 不可点击
    cursor: wait;    // loading
}

除此之外，还有一些常见用法：对于一些可输出的 Input 框，应用 cursor: text；对于提醒 Tips 类，应用 cursor: help；放大放大图片 zoom-in、zoom-out 等等：

一些罕用的简略列一列：

• 按钮可点击: cursor: pointer
• 按钮禁止点击：cursor: not-allowed
• 期待 Loading 状态：cursor: wait
• 输入框：cursor: text
• 图片查看器可放大可放大：cursor: zoom-in/ zoom-out
• 提醒：cursor: help

当然，理论 cursor 还反对十分多种，能够在 MDN 或者上面这个 CodePen Demo 中查看残缺列表：
CodePen Demo – Cursor Demo。

2.3.2 点击区域优化：伪元素扩充点击区域

按钮是咱们网页设计中非常重要的一环，而按钮的设计也与用户体验非亲非故。

思考这样一个场景：在摇摆的车厢上或者是单手操作着屏幕，有的时候一个按钮死活也点不到。

让用户更容易点击到按钮无疑能很好地晋升用户体验，并晋升页面的拜访性。尤其是在挪动端，按钮通常都很小，然而受限于设计稿或者整体 UI 格调，咱们不能间接去扭转按钮元素的高宽。

那么，有什么方法在不扭转按钮本来大小的状况下减少点击热区呢？

借助伪元素能够轻松实现。伪元素也是能够代表其宿主元素来响应鼠标交互事件的。咱们能够这样写：

.btn::before{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

当然，在 PC 端下这样子看起来有点奇怪，然而正当地用在点击区域较小的挪动端则能获得非常好的成果：

2.4 操作便当

好的零碎，操作起来应该是晦涩的。同时，它可能通过一些小细节感动用户。

2.4.1 疾速抉择优化：user-select: all

操作系统或者浏览器通常会提供一些疾速选取文本的性能。看看上面的示意图：

疾速单击两次，能够选中单个单词；疾速单击三次，能够选中一整行内容。但如果核心内容被分隔符宰割，或者成为潜藏在一整行中的一部分，这个时候选取起来就比拟麻烦。

利用 user-select: all，能够将须要一次选中的内容进行包裹，用户只须要点击一次，就能够选中该段信息：

.g-select-all {user-select: all}

给须要一次选中的信息加上这个款式，该细节作用在一些须要复制粘贴的场景时，十分好用。

在咱们 WMS 的很多操作页面，须要频繁从表格中复制一些根底信息，例如下述的 Location ID、Cell Name，因为残缺的字段应用了分隔符 -，所以一次点击是无奈选中整段信息的，而利用 user-select: all 能够很好地解决这个痛点：

别看只是缩小一次点击鼠标的次数，但正是这些细节的累积，才更能让用户感触到开发者的用心。

CodePen – user-select: all 示例

2.4.2 选中款式优化：::selection

CSS 还提供了一个 ::selection 伪类，能够管制选中的文本款式（只能管制 color、background、text-shadow），进一步加深成果。

CodePen – user-select: all && ::selection 管制选中款式

2.4.3 增加禁止抉择：user-select: none

有疾速抉择，也就会有它的对立面——禁止抉择。

对于一些可能频繁操作的按钮，可能会呈现如下难堪场景：

• 文本按钮的疾速点击，触发了浏览器的双击疾速抉择，导致文本被选中：
  
• 翻页按钮的疾速点击，触发了浏览器的双击疾速抉择：
  

对于这种场景，咱们须要把不可被选中的元素设置为不可被选中，利用 CSS 能够疾速实现这一点：

{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

这样，无论点击频率多快，都不会呈现内容被选中的难堪状况：

2.5 跳转优化

现阶段，单页利用（Single Page Application）的利用十分宽泛，Vue、React 等框架大行其道。然而有的常见写法也容易衍生一些小问题。

譬如，点击按钮、文本进行路由跳转，常常会呈现这种代码：

<template>
    ...
    <button @click="gotoDetail">
        Detail
    </button>
    ...
<template>
...
gotoDetail() {
    this.$router.push({name: 'xxxxx',});
}

大抵逻辑就是给按钮增加一个事件，点击之后跳转到另外一个路由。当然，这个性能自身是没有问题的，然而没有思考到用户理论应用的场景。

理论应用的时候，用户可能会心愿保留以后页面的内容，同时关上一个新的窗口。这个时候，他会尝试点击鼠标右键，抉择 在新标签页中关上页面。遗憾的是，上述写法不反对鼠标右键关上新页面。

起因在于浏览器是通过读取 <a> 标签的 href属性，来展现相似 在新标签页中关上页面 这种选项，对于上述写法，浏览器无奈辨认它是一个能够跳转的链接。简略的示意图如下：

所以，对于所有路由跳转按钮，倡议都应用 <a> 标签，并且内置 href 属性，填写跳转的路由地址。理论渲染进去的 DOM 可能相似这样：

<a href="/xx/detail">Detail</a>

在理论的 WMS 重构过程中，咱们对于所有有页面跳转性能的按钮，包含但不限于路由菜单、面包屑导航、跳转按钮等，都进行了跳转优化，以满足用户的不同诉求。

路由菜单导航：

表格中的一些按钮跳转：

2.6 表单交互优化

输出及抉择于用户而言，是一项高交互老本的操作。上面提供了一些小的倡议来缩小用户输出出错、晋升用户体验。

2.6.1 尽可能地简化表单

将表单做得简略点，确保用户在抓狂之前能进入下一步（表单越简单，流失率越高）：

对于没法省去的输出项，尽可能简化用户的输出：

• 智能预设默认项
• 输出时提供智能联想
• 对于抉择框，尽可能精简选项信息
• 应用单选项来代替下拉菜单

2.6.2 及时校验

表单及时校验，而不是用户填完一堆信息，对立提交后才通知用户填错了：

2.6.3 贴心细节提醒，校验更宽容

还有一些比拟无益的倡议，能够无效的晋升交互过程中用户的体验，依据理论状况能够思考：

• 在表单中减少一些提示信息，缩小谬误的几率
• 尝试将表单输出变得更加宽容，让用户的填写更加简略

2.7 先摸索，后表态

这一点十分有意思，什么叫先摸索后表态呢？就是咱们不要一上来就强制用户去做一些事件，例如登录。
想一想一些罕用网站的例子：

• 相似虎牙、bilibili 等视频网站，能够先蓝光体验，肯定观看工夫后才会要求登录；
• 电商网站，只有到付款的时候，才须要登录。

上述 易用性 和先摸索后表态 的内容，局部来源于“Learn From What Leading Companies A/B Test”，举荐浏览。

2.8 联合产品的创意交互动画

因为业务的类型限度，在这一块，咱们理论中使用的并不多，然而它也是加强用户体验十分无益且重要的一环，下文将简略讲一讲。

这一类交互为联合产品的创意交互动画。通过定制化的有典礼感的交互，晋升品牌价值，能给予用户粗浅的印象。

联合产品及业务的创意动画，是须要开掘，一直打磨、一直迭代的。比方 bilibili 官网的顶部 banner，配合一些节日、流动，常常会呈现一些有意思的创意交互动画：

以及这个：

我十分屡次在不同中央看到有人探讨 bilibili 的顶部 banner 动画，可见它这块的动画是胜利的。很好地联合了一些节日、实事、热点，作为一种比拟固定的产品去一直新陈代谢，在不同时候带给用户不同的体验。

2.9 字体优化

字体的抉择与应用其实是十分有考究的。

在 WMS 我的项目重构过程中，咱们应用的全局字体定义是：
font-family: Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,"sans-serif";。

这里，咱们的设计师对英文字体有一些强限度，首选字体是 Roboto，并且在零碎中提供了该字体包。

如果网站没有强制必须应用某些字体。最新的标准倡议咱们应用零碎默认字体。也就是“CSS Fonts Module Level 4: Generic font families”中新增的 font-family: system-ui 关键字。它可能主动抉择本操作系统下的默认零碎字体。

默认应用特定操作系统的零碎字体能够进步性能，因为浏览器或者 WebView 不用去下载任何字体文件，而是应用已有的字体文件。font-family: system-ui 字体设置的劣势之处在于它与以后操作系统应用的字体相匹配，对于文本内容而言，它能够失去最失当的展现。

举两个例子，天猫的字体定义与 Github 的字体定义：

• 天猫：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

简略而言，它们总体遵循了以下几项根本准则：

2.9.1 尽量应用零碎默认字体

应用零碎默认字体的次要起因是性能，零碎字体的长处在于它与以后操作系统相匹配，因而它的文本展现成果必然也是令人舒服的。

2.9.2 兼顾中西：西文在前，中文在后

中文或者英文（西文）都要思考到。因为大部分中文字体也带有英文局部，然而英文局部又不怎么难看，并且英文字体中大多不蕴含中文。因而咱们通常会先进行英文字体的申明，抉择最优的英文字体，这样不会影响到中文字体的抉择。

2.9.3 兼顾多操作系统

抉择字体的时候要思考多操作系统。例如 macOS 下的很多中文字体在 Windows 都没有预装。为了保障 Mac 用户的体验，在定义中文字体的时候，先定义 Mac 用户的中文字体，再定义 Windows 用户的中文字体。

2.9.4 兼顾旧操作系统：以字体族系列 serif 和 sans-serif 结尾

当应用一些十分新的字体时，要思考向下兼容，兼顾到一些极旧的操作系统，应用字体族系列 serif 和 sans-serif 结尾总归是不错的抉择。

3. 可拜访性（A11Y）

可拜访性（accessibility，也被称为“A11Y”）在网站中属于十分重要的一环，然而大部分前端（其实应该是设计、前端、产品）同学都漠视了它。

3.1 什么是可拜访性

传统上咱们认为这只与残障人士无关，但晋升网站的可拜访性也能够让其余用户群体（每个人）受害。

依据网页内容可拜访性准则（即“Web Content Accessibility Guidelines (WCAG) 2.0”），Web 可拜访性有以下四个基础性准则。

（1）可感知

• 用文本代替非文本内容
• 多媒体的字幕及其他替代物
• 内容有多种出现形式
• 内容的看和听更容易

（2）可操作

• 能够通过键盘应用性能
• 用户有短缺的工夫浏览和应用内容
• 内容不要诱发癫痫和物理反馈
• 用户能够不便地导航、找到内容并确认本人在哪里
• 用户能够应用除键盘外的不同输出形式

（3）可了解

• 文本容易浏览和了解
• 内容以可预测的形式呈现和操作
• 用户能够失去帮忙，以防止和纠正错误

（4）健壮性

• 强壮的内容和牢靠的解释
• 内容与当初和将来的用户工具兼容
• 在各个平台和环境中都能正确地展现

我埋伏在一个叫无障碍设计小组的群里，其中蕴含了很多无障碍设计师以及患有肯定水平视觉、听力、口头阻碍的用户，他们在群里常常会表白出一个观点，就是国内的大部分 Web 网站及 App 根本没有思考过残障人士的应用（或者可拜访性做得很差），十分令人揪心。

尤其在一些重交互、重逻辑的网站中，咱们须要从高可拜访性的角度思考用户的应用习惯、应用场景。比方：假如用户没有鼠标，仅仅应用键盘，是否顺畅应用咱们的网站？

假如用户没有鼠标，这个真不肯定是针对残障人士。很多状况下，用户拿鼠标的手可能在干其余事件，比方在吃货色；又或者在 To B 类的业务，如超市收银、仓库收货，很可能用户拿鼠标的手操作着其余设施（扫码枪）等等。

本文不会专门论述无障碍设计的方方面面，只是从一些我感觉前端工程师须要关注的，并且仅须要破费大量代价就能做好的一些无障碍设计细节。记住，无障碍设计对所有人都更友善。

3.2 色调对比度

色彩，也是咱们天天须要打交道的属性。大部分视觉失常的用户可能对页面的色彩敏感度还没那么高。然而对于一小部分色弱、色盲用户，他们对网站的色彩会更加敏感，不好的设计会给他们拜访网站带来极大的不便。

3.2.1 什么是色调对比度

是否曾关怀过页面内容的展现，应用的色彩是否失当？色弱、色盲用户是否失常看清内容？良好的色调应用，在任何时候都是无益的，而且不仅仅局限于色弱、色盲用户。在户外应用手机，阳光很强看不清时，合乎无障碍规范的高清晰度、高对比度文字就更容易浏览。

这里引入了一个概念——色调对比度。简略地说，就是两种色彩在亮度（brightness）上的差异。使用到咱们的页面上，大多数的状况就是背景色（background-color）与内容色彩（color）的比照差别。

“最权威的互联网无障碍标准——WCAG AA 标准规定，所有重要内容的色调对比度须要达到 4.5:1 或以上（字号大于 18 号时达到 3:1 或以上），才算领有较好的可读性。”

看看上面这张图：

很显著，对比度由低到高。前两个例子，别说视障用户，失常用户都曾经很难看得清了。

当然，也会存在一些特例，譬如输入框的 placeholder、按钮的禁用状态等等。因而，在网页重构的过程中，咱们须要尽可能遵循这个标准。但又不是自觉遵循，导致毫无回旋余地。

3.2.2 查看色调对比度的工具

Chrome 浏览器从很早开始，就曾经反对查看元素的色调对比度了。以 WMS 页面中的一个 Table Header 为例，咱们能够去查看一些无奈直观界定是否达到规范的文字：

审查元素，别离能够看到以后文字与背景的对比度。下述后果示意，这个对比度是没有问题的：

当然，咱们的页面上也会存在这样的面包屑导航：

能够看到，色调对比度没有达到规范的局部，被用黄色叹号标识了进去。

除此之外，在审查元素的 Style 界面的取色器，扭转色彩，也能直观地看到以后的色调对比度：

3.2.3 不要单纯依赖色彩

为了保障无障碍的准确性，该当确保你没有齐全依赖色彩来展现零碎不同层级的要害信息。

看看上面这个例子：

原本咱们期待利用绿色和红色来表白正确与谬误，然而对于局部视觉阻碍用户，他可能基本感触不到这个提醒。

正确的做法是，应用必要的文字和图标进行阐明：

因而在理论利用中，咱们须要利用能传播精确信息的图标配合文字描述去表白，譬如 WMS 登录谬误页面：

3.3 焦点响应

相似百度、谷歌的首页，进入页面后会默认让输入框取得焦点：

并非所有的有输入框的页面都须要进入页面后进行聚焦，然而焦点可能让用户十分明确地晓得以后本人在哪，须要做些什么。尤其是对于无奈操作鼠标的用户来说。

页面上能够聚焦的元素，称为 可聚焦元素，取得焦点的元素，则会触发该元素的 focus 事件。对应地，也会触发该元素的 :focus 伪类。

浏览器通常会应用元素的 :focus 伪类，给元素增加一层边框，通知用户以后的获焦元素在哪里。

咱们能够通过键盘的 Tab 键，进行焦点的切换。而获焦元素则能够通过元素的 :focus 伪类的款式，通知用户以后焦点地位。

当然，除了 Tab 键之外，对于一些多输入框、抉择框的表单页面，咱们也应该想着如何简化用户的操作，例如用户按回车键时主动后退到下一字段。一般而言，用户必须执行的触按越少，体验越佳。👍🏻

上面的截图，齐全由键盘操作实现：

通过元素的 :focus 伪类以及键盘 Tab 键切换焦点，用户能够十分顺畅的在脱离鼠标的状况下，对页面的焦点切换及操作。

然而，在许多 reset.css 中，常常能看到这样一句 CSS 款式代码，为了款式的对立，打消了可聚焦元素的 :focus 伪类：

:focus {outline: 0;}

咱们给上述操作的代码。也加上这样一句代码，全程再用键盘操作一下：

除了在 input 框有光标提醒，当应用 Tab 进行焦点切换到 select 或者到 button 时，因为没有了 :focus 款式，用户会感到迷茫，不晓得页面的焦点当初处于何处。

3.3.1 保障非鼠标用户体验，正当使用 :focus-visible

造成上述后果很重要的一个起因在于，:focus 伪类不管用户在应用鼠标还是应用键盘，只有元素获焦，就会触发。

而其自身的默认款式又不太能被产品或者设计承受，导致了很多人会在焦点元素触发 :focus 伪类时，通过扭转 border 的色彩或者其余一些形式代替或者间接禁用。而这样做，从可拜访性的角度来看，对于非鼠标用户，无疑是灾难性的。

基于此，在 W3 CSS selectors-4 标准中，新增了一个十分有意思的 :focus-visible 伪类。这个选择器能够无效地依据用户的输出形式（鼠标或是键盘）展现不同模式的焦点。

有了这个伪类，当用户应用鼠标操作可聚焦元素时，就能够做到不展现 :focus 款式或者让其体现较弱；而当用户应用键盘操作焦点时，利用 :focus-visible，让可获焦元素取得一个较强的体现款式。

看个简略的 Demo：

<button>Test 1</button>

button:active {background: #eee;}
button:focus {outline: 2px solid red;}

应用鼠标点击：

能够看到，应用鼠标点击的时候，触发了元素的 :active 伪类，也触发了 :focus 伪类，不太好看。然而如果设置了 outline: none 又会使键盘用户的体验十分蹩脚。尝试应用 :focus-visible 伪类革新一下：

button:active {background: #eee;}
button:focus {outline: 2px solid red;}
button:focus:not(:focus-visible) {outline: none;}

看看成果，别离是在鼠标点击 Button 和应用键盘管制焦点点击 Button：

CodePen Demo – :focus-visible example

能够看到，应用鼠标点击，不会触发 :foucs，只有当键盘操作聚焦元素，应用 Tab 切换焦点时，outline: 2px solid red 这段代码才会失效。

这样，咱们就既保证了失常用户的点击体验，也保障了一批无奈应用鼠标的用户的焦点治理体验。

值得注意的是，有同学会纳闷，这里为什么应用了 :not 这么绕的写法而不是间接这样写呢：

button:focus {outline: unset;}
button:focus-visible {outline: 2px solid red;}

为的是兼容不反对 :focus-visible 的浏览器，当 :focus-visible 不兼容时，还是须要有 :focus 伪类的存在。

咱们在理论的 WMS 重构过程中，也会尽量放弃这一点，让用户尽可能在非鼠标操作下（仅仅应用键盘），也能应用咱们的页面，能做到根底的焦点切换、回车响应事件。

下图是一个简略的演示（仅仅应用键盘进行页面的操作，可能晓得以后焦点在哪，能够回车触发点击）：

3.3.2 应用 WAI-ARIA 标准加强语义：div 等非可获焦元素模仿获焦元素

还有一个十分须要留神的点。

当初很多前端同学在前端开发的过程中，喜爱应用非可获焦元素模仿获焦元素，例如：

• 应用 div 模仿 button 元素
• 应用 ul 模仿下拉列表 select 等等

当下很多组件库都是这样做的，像是 element-ui 和 ant-design。

在应用非可获焦元素模仿获焦元素的时候，肯定要留神，不仅仅只是外观长得像就完事了，其行为表现也须要合乎本来的 button、select 等可聚焦元素的性质，可能体现元素的语义，可能被聚焦，可能通过 Tab 切换等等。

基于大量相似的场景，有了 WAI-ARIA 规范。它是一个为残疾人士等提供无障碍拜访动静、可交互 Web 内容的技术规范。

简略来说，WAI-ARIA 提供了一些属性，用于加强标签的语义及行为：

• 能够应用 tabindex 属性管制元素是否能够聚焦，以及它是否 / 在何处参加程序键盘导航
• 能够应用 role 属性，来标识元素的语义及作用，譬如应用 <div id="saveChanges" tabindex="0" role="button">Save</div> 来模仿一个按钮
• 还有大量的 aria-* 属性，示意元素的属性或状态，帮忙咱们进一步地辨认以及实现元素的语义化，优化无障碍体验

3.4 应用工具查看标签的语义

咱们来看看 Github 页面是如何定义一个按钮的。以 Github Issues 页面的 Edit 按钮为例：

这一块清晰地形容了这个按钮在可拜访性相干的一些个性。比方 Contrast（色调对比度）、Name（按钮的形容），是给屏幕阅读器看到的；Role 标识是这个元素的属性，它是一个按钮，Keyboard focusable 则表明是否被键盘的 Tab 按钮捕捉。

3.5 剖析应用非可聚焦元素模仿的按钮

这里轻易选取了咱们业务中一个应用 span 模仿按钮的场景，是一个面包屑导航，点击可进行跳转：

HTML 代码：

<span class="ssc-breadcrumb-item-link"> Inbound </span>

<br/>

基本上可拜访性为零。作为一个按钮，它不可被聚焦，无奈被键盘用户选中，没有具体的语义，色调对比度太低，可能视障用户无奈看清。并且，作为一个能进行页面跳转的按钮，它没有 <a> 标签，没有 href 属性。

对于面包屑导航，咱们能够不将它革新成 <a> 标签，但也须要做到最根本的一些可拜访性革新：

<span role="button" aria-label="goto inbound page" tabindex="0" class="ssc-breadcrumb-item-link"> Inbound </span>

不要忘了再改一下色彩，达到最低色调对比度以上，再看看：

这样，一个最最最根本的，满足最低可拜访性需求的按钮算是勉强达标。当然，这个按钮能够再更进一步进行革新，波及了更深刻的可拜访性知识，本文不具体开展。

3.6 剖析组件库的可拜访性

最初，咱们来看看罕用的 ant-design 在晋升可拜访性上的一些相干性能。

以 Select 抉择框组件为例，ant-design 利用了大量的 WAI-ARIA 属性，使得用 div 模仿的下拉框不仅仅在体现上合乎一个下拉框，在语义、行为上都合乎一个下拉框。

看看应用 div 模仿下拉框的 DOM 局部：

再看看在交互体验上：

上述操作齐全在键盘下实现，看着平平无奇，实际上组件库在失常响应可获焦元素切换的同时，给用 div 模仿的 select 加了很多键盘事件的响应，能够利用回车、高低键等对可选项进行抉择。其实下了很多功夫。

对于可拜访性相干的内容十分多，本文无奈一一开展，这里有一份简略的指南：

• 通过 Web 内容无障碍指南（WCAG 2.0）理解可拜访性波及的内容；
• 通过 WAI-ARIA 理解如何革新页面；
• 一直理解最新的标准，通过浏览器最新的性能继续加强可拜访性。

4. 总结

本文从 页面展现、交互细节、可拜访性 三个大方面动手，列举了一些在理论开发过程中积攒的无益教训。尽管不够全面，次要是一些可能有用然而容易被忽视的点，也算是一个不错的查缺补漏小指南。

晋升 用户体验 并非易事，但也不难：

• 页面出现 + 重视细节的交互设计 + 欠缺的可拜访性 + 性能（性能本文没有过多提及）= 良好的用户体验；
• 用户体验是能够被晋升的，而且并不难；
• 良好的用户体验设计，是产品开发每一个环节共同努力的后果；
• 晋升用户体验也不是可能欲速不达的，在不同的细节发力，千里之行; 始于足下。

以上观点和想法可能有一些了解存在问题，一些概念没有解读到位，也心愿大家参加交换并斧正。

参考资料

• WAI-ARIA basics
• WAI-ARIA 1.1
• Web 中的焦点治理
• 无障碍性能
• 功能性动画设计：优良的转场成果
• 前端基础知识概述
• 图片加载失败后 CSS 款式解决最佳实际
• 你所不晓得的 CSS 动画技巧与细节
• Web 动画准则及技巧浅析
• 如何设计产品的空白页面？
• 助你轻松做好无障碍的 15 个 UI 设计工具举荐
• Improve Your UI With Winning & Losing A/B Tests

本文作者

Coco，前端开发工程师，来自 Shopee 供应链仓储治理（Warehouse management system, WMS）团队。