本文其实应该叫，Web 用户体验设计提升指南。一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度眼前一亮的 UI 设计酷炫的动画效果丰富的个性化设置便捷的操作贴心的细节关注残障人士，良好的可访问性 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。良好的用户体验设计，是产品每一个环节共同努力的结果。除去一些很难一蹴而就的，本文将就页面展示、交互细节、可访问性三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到：了解到一些小细节是如何影响用户体验的了解到如何在尽量小的开发改动下，提升页面的用户体验了解到一些优秀的交互设计细节了解基本的无障碍功能及页面可访问性的含义了解基本的提升页面可访问性的方法页面展示就整个页面的展示，页面内容的呈现而言，有一些小细节是需要我们注意的。整体布局先来看看一些布局相关的问题。对于大部分 PC 端的项目，我们首先需要考虑的肯定是最外层的一层包裹。假设就是 .g-app-wrapper。

复制代码首先，对于 .g-app-wrapper，有几点，是我们在项目开发前必须弄清楚的：项目是全屏布局还是定宽布局？对于全屏布局，需要适配的最小的宽度是多少？对于定宽布局，就比较方便了，假设定宽为 1200px，那么： .g-app-wrapper { width: 1200px; margin: 0 auto; } 复制代码利用 margin: 0 auto 实现布局的水平居中。在屏幕宽度大于 1200px 时，两侧留白，当然屏幕宽度小于 1200px 时，则出现滚动条，保证内部内容不乱。对于现代布局，更多的是全屏布局。其实现在也更提倡这种布局，即使用可随用户设备的尺寸和能力而变化的自适应布局。通常而言是左右两栏，左侧定宽，右侧自适应剩余宽度，当然，会有一个最小的宽度。那么，它的布局应该是这样：

复制代码 .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 也非常容易完成：

...

复制代码 .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 当然，实现它的方法有很多，这里仅给出一种推荐的解法。处理动态内容 - 文本超长对于所有接收后端接口字段的文本展示类的界面。都需要考虑全面（防御性编程：所有的外部数据都是不可信的），正常情况如下，是没有问题的。但是我们是否考虑到了文本会超长？超长了会折行还是换行？对于单行文本，使用单行省略： { 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; } 复制代码处理动态内容 - 保护边界对于一些动态内容，我们经常使用 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中一张非常好的图，作为释义： 0 内容展示这个也是一个常常被忽略的地方。页面经常会有列表搜索，列表展示。那么，既然存在有数据的正常情况，当然也会存在搜索不到结果或者列表无内容可展示的情形。对于这种情况，一定要注意 0 结果页面的设计，同时也要知道，这也是引导用户的好地方。对于 0 结果页面，分清楚：数据为空：其中又可能包括了用户无权限、搜索无结果、筛选无结果、页面无数据异常状态：其中又可能包括了网络异常、服务器异常、加载失败等待不同的情况可能对应不同的 0 结果页面，附带不同的操作引导。譬如网络异常：或者确实是 0 结果：关于 0 结果页面设计，可以详细看看这篇文章：如何设计产品的空白页面？小小总结一下，上述比较长的篇幅一直都在阐述一个道理，开发时，不能仅仅关注正常现象，要多考虑各种异常情况，思考全面。做好各种可能情况的处理。图片相关图片在我们的业务中应该是非常的常见了。有一些小细节是需要注意的。给图片同时设置高宽有的时候和产品、设计会商定，只能使用固定尺寸大小的图片，我们的布局可能是这样：对应的布局：

图片描述

复制代码 ul li img { width: 150px; } 复制代码当然，万一假设后端接口出现一张非正常大小的图片，上述不加保护的布局就会出问题：所以对于图片，我们总是建议同时写上高和宽，避免因为图片尺寸错误带来的布局问题： ul li img { width: 150px; height: 100px; } 复制代码同时，给标签同时写上高宽，可以在图片未加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。 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%，如果你不希望图片居中展示，可以使用它去改变图片实际展示的 position 。 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 考虑屏幕 dpr -- 响应式图片正常情况下，图片的展示应该没有什么问题了。但是对于有图片可展示的情况下，我们还可以做的更好。在移动端或者一些高清的 PC 屏幕（苹果的 MAC Book），屏幕的 dpr 可能大于 1。这种时候，我们可能还需要考虑利用多倍图去适配不同 dpr 的屏幕。正好，标签是有提供相应的属性 srcset 让我们进行操作的。

复制代码当然，这是比较旧的写法，srcset 新增了新的 w 宽度描述符，需要配合 sizes 一起使用，所以更好的写法是：

复制代码利用 srcset，我们可以给不同 dpr 的屏幕，提供最适合的图片。上述出现了一些概念，dpr，图片的 srcset ，sizes 属性，不太了解的可以移步前端基础知识概述图片丢失好了，当图片链接没问题时，已经处理好了。接下来还需要考虑，当图片链接挂了，应该如何处理。处理的方式有很多种。最好的处理方式，是我最近在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践看到的。这里简单讲下：利用图片加载失败，触发元素的 onerror 事件，给加载失败的元素新增一个样式类利用新增的样式类，配合元素的伪元素，展示默认兜底图的同时，还能一起展示元素的 alt 信息图片描述

复制代码 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 信息： OK，到此，完整的对图片的处理就算完成了，完整的 Demo 你可以戳这里看看：