Web用户体验设计

良好的用户体验包括但不限于：

• 急速的打开速度
• 眼前一亮的 UI 设计
• 酷炫的动画效果
• 丰富的个性化设置
• 便捷的操作
• 贴心的细节
• 关注残障人士，良好的可访问性
• .......

页面展示：

整体布局（左右两栏）

左侧定宽，右侧自适应剩余宽度，同时有一个最小的宽度，保证内容不乱

<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 保证了整个容器的最小宽度。

处理动态内容（不相信外部数据，只相信代码）

• 文本超长，使用 ... 省略

• 保护边界，使用 padding ，避免如下图所示：

  

0内容展示

• 数据为空：其中又可能包括了用户无权限、搜索无结果、筛选无结果、页面无数据
• 异常状态：其中又可能包括了网络异常、服务器异常、加载失败等待

不同的情况可能对应不同的 0 结果页面，附带不同的操作引导。

开发时，不能仅仅关注正常现象，要多考虑各种异常情况，思考全面。做好各种可能情况的处理。

图片相关

• 建议同时写上高和宽，避免因为图片尺寸错误带来的布局问题，同时，提前占位置，避免图片从未加载状态到渲染完成状态因高度变化引起重排

ul li img {
    width: 150px;
    height: 100px;
}

•      利用 `object-fit: cover`，使图片内容在保持其宽高比的同时填充元素的整个内容框。
  

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    object-position: 50% 100%;  // 控制图片在其内容框中的位置,默认居中
}

• 考虑屏幕dpr--响应式图片

<img 
        src = "photo.png" 
        sizes = “(min-width: 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 等视频网站，可以先观看体验，一定观看时间后才会要求登录（登录享受蓝光）
• 电商网站，只有到付款的时候，才需要登录