Web用户体验设计提升实践

本文首发于微信公众号“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"