前端是离用户最近的岗位，优异的前端设计，能大大提高用户的使用体验。之前我们曾经在文章【学完这 4 个小技巧，让你的移动端交互体验更加优秀】聊过一些交互体验上的一些小技巧，本篇文章是在准备内部分享时，重新整理了下，部分内容也与之前的稍微有点重复。
1. 即时反馈 #
用户在看到页面时，或者在页面上做出了什么动作，都应当予以即时的反馈，告诉用户他的操作是有效的，系统已收到他的操作，内部正在处理中。
1.1 点击按钮 #
比如用户点击按钮发起了网络请求，一定要在按钮上（或者页面上）加上 loading 效果，一方面是告知用户系统正在处理，再一个是避免用户的多次重复。若前端没有任何的提示，用户可能以为刚才的点击无效，会多次点击。有同学用防抖的方式来解决，也可以，但使用的场景不太对，最好是用 loading。
还有删除列表数据，或者将该数据流转到其他的状态，有时间的话，可以做个动效，比如该数据所在区域的高度变成 0，或者左滑删除等。
1.2 搜索 #
在 select 等标签搜索或者其他自动搜索时，虽然我们用了防抖策略，避免短时间内发生多次网络请求。但因为网络状态，依然可能会存在这样的情况。这里我们还要添加上时序控制，否则前面的搜索结果可能会把最新的搜索结果覆盖掉。
const App = () => {
const requestIdRef = useRef(0);
const [loading, setLoading] = useState(false);
const request = async () => {
setLoading(true);
requestIdRef.current++;
const requestId = requestIdRef.current;
const result = await fetch("https://api.xxx.com");
if (requestId < requestIdRef.current) {
// 这是之前的请求，直接舍弃掉
return;
}
setLoading(false);
console.log(result);
};
};
2. 数据的展示 #
有的页面一进来就需要展示数据，有些同学可能做的操作有：
- 有 loading 状态，但遇到 loading 就返回 null（此时页面处于白屏中）；
- 没有 loading 状态，默认展示「暂无数据」的提示；
const App = () => {
const [list, setList] = useState([]);
return (
<div>
{list.length ? (
<div>
{list.map((item) => (
<div></div>
))}
</div>
) : (
<div className="nothing"></div>
)}
</div>
);
};
这两种情况对用户来说都不太友好，毕竟网络请求的时长谁也保证不了。一旦请求时长过长，第 1 种方式可能会认为页面崩了；第 2 种方式用户可能以为数据丢了（实际上没丢，正在来的路上）。
若在接口返回数据之前，不方便展示页面（如跟主题相关的），可以添加整屏的 loading，或者用骨架屏来当做 loading。
若存在「有数据」和「暂无数据」的两种展示，可以在外层嵌套一个 。
还有 antd 中的 <Select / 组件，搜索时，其实是有 loading 效果的，但他的 loading 在搜索框的最右边，而且还非常小，特别不明显。我们在下拉面板中添加下 loading 效果：
const App = () => {
const [inputValue, setInputValue] = useState(""); // 输入框中的文案
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState < SelectProps["options"] > [];
return (
<Select
dropdownRender={(menu) => {
if (loading) {
return <Spin />;
}
if (inputValue && !options.length) {
// 有输入的文本，但没有下拉项，说明没检索到结果
return <p>关键词{inputValue}，未找到搜索结果</p>;
}
return menu;
}}
onSearch={debounce(handleSearch, 700)}
/>
);
};
可以有个约定：凡是有网络请求的，一定要有 loading。
3. 页面布局 #
考虑到大部分都是右利手，我们最好是把常用操作（如确认、提交等），或产品希望进行的操作（再想想），放在右侧。
4. 页面兜底 #
一般是在报错时才会白屏，因此我们可能需要做一些预防性编程。如：
- 读取多层级数据时，某个字段数据可能为空，这里需要用到可选链；
- 有数据时接口返回的是数组，没数据时接口返回的是 null；当使用 length 或者 map 时，最好先用
Array.isArray()判断下是否是数组，或者用可选链；
5. 总结 #
当然还有很多需要注意的地方，这里仅是小结一下。我们应当多多从用户角度和产品角度来考虑，每一步的操作是否合理和顺畅。