提升用户体验用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理

前言

用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。说白了就是，一个 Web 页面或者一个 APP，用户用的爽，也就是所谓的良好的用户体验

实现
- 文本要会设置省略号、不要超出容器
```
 # 单行文本
 {
   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;
 }
```
- 容器尽量留边
```
  padding: 10px
```
- 页面尽量不要为空白
  
  内容会出现空白的情况主要分为以下几种：
  - 数据为空
    1. 用户无权限
    2. 筛选无结果
    3. 搜索无结果
    4. 页面无数据
  - 异常状态
    1. 网络异常
    2. 服务器异常
    3. 加载失败
  页面一片空白会给用户带来很不好的体验，通常有以下几种处理情况：
  1. 图案+文案 //适用场景：数据为空
  2. 图案+文案+引导操作 //适用场景：异常状态
  3. 图案+文案+推荐内容 //适用场景：搜索无数据、页面无数据
- 图片尽量固定宽高
  
  当然，限制高宽也会出现问题，譬如图片被拉伸，非常的难看：这个时候，我们可以借助 object-fit即可解决
```
.img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}
```
  图片显示失败需要默认图使用 onerror
- 页面切换
  
  在我们的交互过程中、例：页面切换、加载数据等需适当的增加loading与动画，能够很好的让用户感知到页面的变化,增加动画不会显得那个突兀。
- 点击交互
  
  点击区域可以适当加大，可以利用伪元素来实现
```
.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}
```
cursor 鼠标手势
- 快速选择
```
  #快速点击全部选中
  .text {
      user-select: all;
  }
  #选中样式
  .text::selection {
      background: red;
      color: blue;
      text-shadow: 0 0 .5px yellow;
  }
  #禁止选中
  .text {
      user-select: none;
  }
```
- 易用性
  1. 注意界面元素的一致性，降低用户学习成本
  2. 延续用户日常的使用习惯，而不是重新创造
  3. 给下拉框增加一些预设值，降低用户填写成本
  4. 同类的操作合并在一起，降低用户的认知成本
  5. 任何操作之后都要给出反馈，让用户知道操作已经生效
  尽量不要让用户一进APP就强制登录，避免引起用户反感，登录应该是用户主动行为。
- 字体统一
  
  尽量使用系统默认字体
```
font-family: system-ui //能够自动选择本操作系统下的默认系统字体。
```
- 获取焦点
  
  在需要输入的页面，尽量给输入框自动获取焦点
```
:focus
```
最后

本文到此结束，以上都是一些在实际的开发过程中，积攒的一些的经验。很多都是我个人的观点想法，可能有一些理解存在一些问题、也不是很全面，希望对大家有帮助，不足的地方也可以告诉我哦，共同进步。

提升用户体验

前言

实现

文本要会设置省略号、不要超出容器

容器尽量留边

页面尽量不要为空白

图片尽量固定宽高

页面切换

点击交互

快速选择

易用性

字体统一

获取焦点

最后