学习来源：https://segmentfault.com/a/1190000040970567
1.排版优化
左右排版
左边固定，右侧自适应
<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;
}
上下排版
页面存在一个 footer（页脚）部分，如果整个页面的内容高度小于视窗的高度，则 footer 固定在视窗底部，如果整个页面的内容高度大于视窗的高度，则 footer 正常流排布（也就是需要滚动到底部才能看到 footer）。
<div class="g-container"><div class="g-real-box">...</div><div class="g-footer"></div>
</div>
.g-container {height: 100vh;display: flex;flex-direction: column;
}.g-footer {margin-top: auto;flex-shrink: 0;height: 30px;background: deeppink;
}
内容、功能展示
文本超出
/**单行
**/
{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即解决
**/
.btn {...min-width: 88px;padding: 0 16px
}
兼容不同场景与异常回退：空数据内容展示
- 数据为空
用户无权限——要告知用户无权限访问的原因和解决方案
搜索无结果——告知用户搜索无数据的结果，如有必要可推荐相关内容
筛选无结果——一般直接告知筛选无结果
页面无数据——文案设计有几个方向：
告诉用户这里将会存放什么数据
给用户一个主动创造数据的理由，比如通过话术引起用户心理共鸣
若页面无数据会给用户造成困惑，则可以说明原因打消用户的困惑 - 异常状态
网络异常——指出当前状态为网络异常，并给出解决方案
服务器异常——指出当前状态为服务器异常，并给出解决方案
加载失败——加载失败主要会由网络异常或服务器异常造成
不同的情况可能对应不同的空数据结果页面，附带不同的操作引导
举例说明：
图片优化
- 图片异常
图片的呈现及异常处理 - 给图片同时设置高宽
另外，给<img>标签同时写上高宽，可以在图片加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。
ul li img {width: 150px;height: 100px;object-fit: cover;/*使图片内容在保持宽高比的同时填充元素的整个内容框。*/object-position: 50% 100%;
}
- 响应式图片
<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
- 点击区域优化：伪元素扩大点击区域
.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
button:active {background: #eee;
}
button:focus {/*键盘点击*/outline: 2px solid red;
}
button:focus:not(:focus-visible) {/*鼠标点击*/outline: none;
}
