前端如何提升用户的交互体验

蚊子前端博客
发布于 2024-03-28 11:29
前端是离用户最近的岗位,优异的前端设计,能大大提高用户的使用体验

前端是离用户最近的岗位,优异的前端设计,能大大提高用户的使用体验。之前我们曾经在文章【学完这 4 个小技巧,让你的移动端交互体验更加优秀】聊过一些交互体验上的一些小技巧,本篇文章是在准备内部分享时,重新整理了下,部分内容也与之前的稍微有点重复。

1. 即时反馈

用户在看到页面时,或者在页面上做出了什么动作,都应当予以即时的反馈,告诉用户他的操作是有效的,系统已收到他的操作,内部正在处理中。

1.1 点击按钮

比如用户点击按钮发起了网络请求,一定要在按钮上(或者页面上)加上 loading 效果,一方面是告知用户系统正在处理,再一个是避免用户的多次重复。若前端没有任何的提示,用户可能以为刚才的点击无效,会多次点击。有同学用防抖的方式来解决,也可以,但使用的场景不太对,最好是用 loading。

还有删除列表数据,或者将该数据流转到其他的状态,有时间的话,可以做个动效,比如该数据所在区域的高度变成 0,或者左滑删除等。

1.2 搜索

在 select 等标签搜索或者其他自动搜索时,虽然我们用了防抖策略,避免短时间内发生多次网络请求。但因为网络状态,依然可能会存在这样的情况。这里我们还要添加上时序控制,否则前面的搜索结果可能会把最新的搜索结果覆盖掉。

COPYJAVASCRIPT

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. 数据的展示

有的页面一进来就需要展示数据,有些同学可能做的操作有:

  1. 有 loading 状态,但遇到 loading 就返回 null(此时页面处于白屏中);

loading时直接返回null-蚊子的前端博客

  1. 没有 loading 状态,默认展示「暂无数据」的提示;

COPYJAVASCRIPT

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 效果:

COPYJAVASCRIPT

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. 页面兜底

一般是在报错时才会白屏,因此我们可能需要做一些预防性编程。如:

  1. 读取多层级数据时,某个字段数据可能为空,这里需要用到可选链;

  2. 有数据时接口返回的是数组,没数据时接口返回的是 null;当使用 length 或者 map 时,最好先用 Array.isArray() 判断下是否是数组,或者用可选链;

5. 总结

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

标签:
阅读(81)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆