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