一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：
急速的打开速度
眼前一亮的 UI 设计
酷炫的动画效果
丰富的个性化设置
便捷的操作
贴心的细节
关注残障人士，良好的可访问性
...
所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。
良好的用户体验设计，是产品每一个环节共同努力的结果。
除去一些很难一蹴而就的，本文将就页面展示、交互细节、可访问性三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到：
了解到一些小细节是如何影响用户体验的
了解到如何在尽量小的开发改动下，提升页面的用户体验
了解到一些优秀的交互设计细节
了解基本的无障碍功能及页面可访问性的含义
了解基本的提升页面可访问性的方法
页面展示就整个页面的展示，页面内容的呈现而言，有一些小细节是需要我们注意的。
整体布局先来看看一些布局相关的问题。
对于大部分 PC 端的项目，我们首先需要考虑的肯定是最外层的一层包裹。假设就是 .g-app-wrapper。
<div> <!-- 内部内容 --> </div>首先，对于 .g-app-wrapper，有几点，是我们在项目开发前必须弄清楚的：
项目是全屏布局还是定宽布局？
对于全屏布局，需要适配的最小的宽度是多少？
对于定宽布局，就比较方便了，假设定宽为 1200px，那么：
.g-app-wrapper { width: 1200px; margin: 0 auto; }利用 margin: 0 auto 实现布局的水平居中。在屏幕宽度大于 1200px 时，两侧留白，当然屏幕宽度小于 1200px 时，则出现滚动条，保证内部内容不乱。
对于现代布局，更多的是全屏布局。其实现在也更提倡这种布局，即使用可随用户设备的尺寸和能力而变化的自适应布局。
通常而言是左右两栏，左侧定宽，右侧自适应剩余宽度，当然，会有一个最小的宽度。那么，它的布局应该是这样：
<div> <div></div> <div></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）。
看看效果：
嗯，这个需求如果能够使用 flex 的话，使用 justify-content: space-between 可以很好的解决，同理使用 margin-top: auto 也非常容易完成：
<div> <div> ... </div> <div></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
当然，实现它的方法有很多，这里仅给出一种推荐的解法。
处理动态内容 - 文本超长对于所有接收后端接口字段的文本展示类的界面。都需要考虑全面（防御性编程：所有的外部数据都是不可信的），正常情况如下，是没有问题的。
但是我们是否考虑到了文本会超长？超长了会折行还是换行？
对于单行文本，使用单行省略：
{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }