良好的用户体验包括但不限于：
- 急速的打开速度
- 眼前一亮的 UI 设计
- 酷炫的动画效果
- 丰富的个性化设置
- 便捷的操作
- 贴心的细节
- 关注残障人士，良好的可访问性
- .......
页面展示：
整体布局（左右两栏）
左侧定宽，右侧自适应剩余宽度，同时有一个最小的宽度，保证内容不乱
<div class="g-app-wrapper">
<div class="g-sidebar"></div>
<div class="g-main"></div>
</div>
.g-app-wrapper {
display: flex;
min- 1200px;
}
.g-sidebar {
flex-basis: 250px;
margin-right: 10px;
}
.g-main {
flex-grow: 1;
}
利用了 flex 布局下的 flex-grow: 1，让 .main 进行伸缩，占满剩余空间，利用 min-width 保证了整个容器的最小宽度。
处理动态内容（不相信外部数据，只相信代码）
-
文本超长，使用 ... 省略
-
保护边界，使用 padding ，避免如下图所示：
0内容展示
- 数据为空：其中又可能包括了用户无权限、搜索无结果、筛选无结果、页面无数据
- 异常状态：其中又可能包括了网络异常、服务器异常、加载失败等待
不同的情况可能对应不同的 0 结果页面，附带不同的操作引导。
开发时，不能仅仅关注正常现象，要多考虑各种异常情况，思考全面。做好各种可能情况的处理。
图片相关
- 建议同时写上高和宽，避免因为图片尺寸错误带来的布局问题，同时，提前占位置，避免图片从未加载状态到渲染完成状态因高度变化引起重排
ul li img {
150px;
height: 100px;
}
-
利用 `object-fit: cover`，使图片内容在保持其宽高比的同时填充元素的整个内容框。
ul li img {
150px;
height: 100px;
object-fit: cover;
object-position: 50% 100%; // 控制图片在其内容框中的位置,默认居中
}
- 考虑屏幕dpr--响应式图片
<img
src = "photo.png"
sizes = “(min- 600px) 600px, 300px"
srcset = “photo@1x.png 300w,
photo@2x.png 600w,
photo@3x.png 1200w,
>
利用 srcset，我们可以给不同 dpr 的屏幕，提供最适合的图片。
-
图片丢失
- 利用图片加载失败，触发
<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信息 - 利用图片加载失败，触发
交互设计优化
过渡与动画
适当的增加过渡与动画，能够很好的让用户感知到页面的变化**。
滚动优化
-
滑动平滑：使用
scroll-behavior: smooth让滚动丝滑 -
使用
scroll-snap-type优化滚动效果 -
控制滚动层级，避免页面大量重排
尽量让需要进行 CSS 动画（可以是元素的动画，也可以是容器的滚动）的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。
点击交互优化
- 优化手势 -- 不同场景应用不同
cursor- 按钮可点击:
cursor: pointer - 按钮禁止点击：
cursor: not-allowed 等待 Loading 状态：cursor: wait`- 输入框：cursor: text;
- 图片查看器可放大可缩小：
cursor: zoom-in/ zoom-out - 提示：cursor: help;
- 按钮可点击:
点击区域优化-- 伪元素扩大点击区域 (通常用于按钮较小的移动端)
.btn::befoer{
content:"";
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
}
快速选择优化 -- user-select: all（文本）
利用 user-select: all，可以将需要一次选中的内容进行包裹，用户只需要点击一次，就可以选中该段信息：
.g-select-all {
user-select: all
}
这个细节作用在一些需要复制粘贴的场景，非常好用。
选中样式优化-- ::selection（文本）
CSS 还有提供一个 ::selection 伪类，可以控制选中的文本的样式（只能控制color, background, text-shadow），进一步加深效果。
添加禁止选择 -- user-select: none（文本）
跳转优化
对于所有路由跳转按钮，建议都使用 <a> 标签，并且内置 href 属性，填写跳转的路由地址。这样便于用户保留当前页面的内容，同时打开一个新的窗口，即在新标签页中打开页面。
Bad: <div @click="gotoDetail"> Detail </div>
Good: <a href="/xx/detail"> Detail </a>
易用性
- 注意界面元素的一致性，降低用户学习成本
- 延续用户日常的使用习惯，而不是重新创造
- 给下拉框增加一些预设值，降低用户填写成本
- 同类的操作合并在一起，降低用户的认知成本
- 任何操作之后都要给出反馈，让用户知道操作已经生效
先探索，后表态
我们不要一上来就强迫用户去做一些事情，譬如登录。
例子：
- 类似虎牙、Bilibili 等视频网站，可以先观看体验，一定观看时间后才会要求登录（登录享受蓝光）
- 电商网站，只有到付款的时候，才需要登录