增强用户体验

Posted 2020-12-05 bonly-ge

1.给图片加loading效果
2.给ajax增加假的进度条，因为ajax只有0%和100%两种状态，可以随机到50%到80%随机的位置，成功后到达100%。
3.上传文件加载进度条
4.轮播图加过渡效果，明确当时显示的是第几张。
5.单击和输入给一定效果，明确不是页面没有响应。
1）按钮点击下陷的效果。
2）输入表单获取焦点和失去焦点的效果。
3）合理使用input的type类型，在移动端会根据type类型弹出不同的键盘。
6.记住用户使用习惯。
1）比如用户喜欢把某个元素放到固定位置。
2）输入表单时的可记录信息。
7.避免页面闪动
1)图片没加载进来，父级没有高度，等加载进来了，突然有高度了，导致的闪动，可以给父级加高度避免。
2）js控制高度的内容，后加载进来，突然产生的闪动，解决办法在页面写一个内联的script，由于是和dom渲染同步的，就不会有闪动了。
3）尽量保证上面的渲染要比下面dom元素先渲染。
8.在文章新闻列表有翻页功能的时候，可以给浏览器增加前进后退的功能。
9.使用icon图标字体和svg可以减少体积，增加网站的高清体验。

设计方面

1. 加载状态的样式不要设置成模态框，那种情况会引起用户的焦虑感，可采用局部加载状态
2. 选中态和非选中态要配色明确，突出重点
3. 提示信息的展现方式，例如登陆成功，网络加载失败，不需要特殊强调的信息使用1.5秒在手机偏下位置弹出文字提示，不会影响用户使用；例如失败信息需要强烈的告知用户的可以使用模态对话框；支付信息提示需要更为强烈的操作结果页来反馈。
4. 减少输入，输入提示信息，记录用户搜索记录操作习惯等，通过其他方式解决，例如输入银行卡号，获取地理位置信息等，为减少输入错误，可以增加拍照识别和获取地理定位等按钮。
5. 输入框输入文字提示信息，输入文字颜色变亮，文字和边框留有一点距离。
6. 按钮的样式要统一，要有圆角都有圆角，填充背景色，状态提示，通过控制透明度的变化表明那个是主要的信息，通过给不可点击的按钮设置灰色提示用户。
   7.提示文字尽量简单明确，防止不断重复操作，比如多项选择的问题，我们要求至少选择两个，但是用户没有选择，我们提示用户该题至少选择2项，而不是提示用户该题没有选择
   8.一些静态的轮播图设计，如果文案较少的话可以用大图，整屏滚动，视觉冲击力比较强；第二种希望用户把速度变慢，把一些较大的静态banner图，做成呼吸的动态效果，放慢用户节奏。
   9.增加适当的动画效果，例如页面滚动，翻转，缩放，弹出等常见效果。