前端如何提升用户的交互体验-蚊子-前端博客

前端是离用户最近的岗位，优异的前端设计，能大大提高用户的使用体验。之前我们曾经在文章【学完这 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时直接返回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. 总结 #

当然还有很多需要注意的地方，这里仅是小结一下。我们应当多多从用户角度和产品角度来考虑，每一步的操作是否合理和顺畅。