【记录：前端提高用户体验】

学习来源：https://segmentfault.com/a/1190000040970567

1.排版优化

左右排版

左边固定，右侧自适应

html 复制代码

<div class="g-app-wrapper">
    <div class="g-sidebar"></div>
    <div class="g-main"></div>
</div>

js 复制代码

.g-app-wrapper {
    display: flex;
    min-width: 1200px;
}
.g-sidebar {
    flex-basis: 250px;
    margin-right: 10px;
}
.g-main {
    flex-grow: 1;
}

上下排版

页面存在一个 footer（页脚）部分，如果整个页面的内容高度小于视窗的高度，则 footer 固定在视窗底部，如果整个页面的内容高度大于视窗的高度，则 footer 正常流排布（也就是需要滚动到底部才能看到 footer）。

html 复制代码

<div class="g-container">
    <div class="g-real-box">
        ...
    </div>
    <div class="g-footer"></div>
</div>

js 复制代码

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}

内容、功能展示

文本超出

css 复制代码

/**
	单行
**/
{
    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;
}

边界保护

css 复制代码

/**
	也就是在一定宽度内，内容较多的情况会贴边，
	配合padding即解决
**/
.btn {
    ...
    min-width: 88px;
    padding: 0 16px
}

兼容不同场景与异常回退：空数据内容展示

数据为空
用户无权限------要告知用户无权限访问的原因和解决方案
搜索无结果------告知用户搜索无数据的结果，如有必要可推荐相关内容
筛选无结果------一般直接告知筛选无结果
页面无数据------文案设计有几个方向：
告诉用户这里将会存放什么数据
给用户一个主动创造数据的理由，比如通过话术引起用户心理共鸣
若页面无数据会给用户造成困惑，则可以说明原因打消用户的困惑
异常状态
网络异常------指出当前状态为网络异常，并给出解决方案
服务器异常------指出当前状态为服务器异常，并给出解决方案
加载失败------加载失败主要会由网络异常或服务器异常造成
不同的情况可能对应不同的空数据结果页面，附带不同的操作引导
举例说明：

图片优化

图片异常
图片的呈现及异常处理
给图片同时设置高宽
另外，给 <img> 标签同时写上高宽，可以在图片加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。

css 复制代码

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;/*使图片内容在保持宽高比的同时填充元素的整个内容框。*/
    object-position: 50% 100%;
}

响应式图片

html 复制代码

<img 
        src = "photo.png" 
        sizes = "(min-width: 600px) 600px, 300px" 
        srcset = "photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

图片加载失败

适当的过渡效果和动画效果

加载效果 loading
骨架屏动画
滚动平滑：使用 scroll-behavior: smooth 让滚动丝滑（吸顶）
合理使用动画能让页面增色不少，但同时要避免踩入下面的一些坑：（让动画持续时间保持在 300ms 或更短）
动画没有关联性
为了动画而动画，没有目的性
过于缓慢，阻碍交互
不够明确
优化手势：不同场景应用不同 cursor
点击区域优化：伪元素扩大点击区域

css 复制代码

.btn::before{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

针对一些特定元素，方便用户复制（快速选择优化：user-select: all）
选中样式优化：::selection
添加禁止选择：user-select: none
举例子：

尽可能地简化表单

对于没法省去的输入项，尽可能简化用户的输入：

智能预设默认项

输入时提供智能联想

对于选择框，尽可能精简选项信息

使用单选项来代替下拉菜单

及时校验

表单及时校验，而不是用户填完一堆信息，统一提交后才告诉用户填错了：

先探索，后表态

这一点非常有意思，什么叫先探索后表态呢？就是我们不要一上来就强迫用户去做一些事情，例如登录。

想一想一些常用网站的例子：

类似虎牙、bilibili 等视频网站，可以先蓝光体验，一定观看时间后才会要求登录；
电商网站，只有到付款的时候，才需要登录。

字体优化

尽量使用系统默认字体
兼顾中西：西文在前，中文在后
兼顾多操作系统
兼顾旧操作系统：以字体族系列 serif 和 sans-serif 结尾
举个例子
天猫：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

保证非鼠标用户体验，合理运用 :focus-visible

css 复制代码

button:active {
  background: #eee;
}
button:focus {/*键盘点击*/
  outline: 2px solid red;
}
button:focus:not(:focus-visible) {/*鼠标点击*/
  outline: none;
}