编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例阐述,保证简单易懂。 在网页设计中如何少让用户费脑筋,保持操作流畅。一起来收!
![](http://imgsrc.baidu.com/forum/w%3D580/sign=d0650c30c7fc1e17fdbf8c397a91f67c/8fa0cced8a136327f11c7915998fa0ec09fac7a0.jpg)
往期回顾:
《有图有案例!125个提升网页可用性的优化小技巧(一)》
《有图有对比!125个提升网页可用性的优化小技巧(二)》
除了引导用户,还要减少他们的认知流程,以保持流畅状态。
尽可能少让用户做计算
千万别把计算这种事情丢给用户,让计算机来处理。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6c3803a7c31349547e1ee86c664f92dd/d96fdc13c8fcc3cef11a72159a45d688d53f20ba.jpg)
△ 显示剩余数量
在界面内体现用户当前所处位置
界面就像机场,如果没有“你在这里”的标记,用户会迷路,因此记得提供标记。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=be56450541540923aa696376a259d1dc/276dadfdc3cec3fdcfe41c53de88d43f869427ba.jpg)
△ 在导航菜单上突出当前所选
![](http://imgsrc.baidu.com/forum/w%3D580/sign=fff4c7420123dd542173a760e108b3df/5683a6cfc3fdfc03a6a2589edc3f8794a5c226ba.jpg)
△ 在复杂的界面中提供面包屑导航或步骤图示
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7cb38735d554564ee565e43183df9cde/5db1a6fcfc039245e36f5a298f94a4c27c1e25ba.jpg)
△ 在页面标题前面部分放置描述性或有用的信息
简化选择类任务
做选择需要费脑筋,简化这类任务让用户少费神
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3fc453425e4e9258a63486e6ac83d1d1/5d8299029245d688e2d80982acc27d1ed31b24ba.jpg)
△ 指明多数用户选择的选项
![](http://imgsrc.baidu.com/forum/w%3D580/sign=eab3d8589a58d109c4e3a9bae159ccd0/627cf744d688d43fb0732ad4751ed21b0ff43bba.jpg)
△ 提供常见搜索关键词列表
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ea91c4ed909b3deebbfe460fcbe6cd3/0c3ab389d43f87949c25f308da1b0ef41ad53aba.jpg)
△ 下拉分类菜单置于相应导航菜单内
使用常规的网页设计界面
创新很好,但不要跟常规的设计方式偏离太远。用户习惯于某些布局、结构。常规设计之所以流行,是因为他们确实可行。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=abbf5f1fbbde9c82a665f9875c8080d2/48f7b13e8794a4c244f95c0d06f41bd5ac6e39ba.jpg)
△ 使用常规的导航菜单
![](http://imgsrc.baidu.com/forum/w%3D580/sign=ebee3dc89482d158bb8259b9b00b19d5/4a40e295a4c27d1ee8fc80e213d5ad6edcc438ba.jpg)
△ 把实用功能放在右上角
每次交互动作后提供反馈
用户跟界面进行互动后,需获得实时反馈。操作成功还是失败了?发生了什么变化?
![](http://imgsrc.baidu.com/forum/w%3D580/sign=88391294d958ccbf1bbcb53229d9bcd4/19ebc1c37d1ed21b351395c3a56eddc450da3fba.jpg)
△ 重要的交互动作后反馈提示成功消息
![](http://imgsrc.baidu.com/forum/w%3D580/sign=d0650c30c7fc1e17fdbf8c397a91f67c/8fa0cced8a136327f11c7915998fa0ec09fac7a0.jpg)
往期回顾:
《有图有案例!125个提升网页可用性的优化小技巧(一)》
《有图有对比!125个提升网页可用性的优化小技巧(二)》
除了引导用户,还要减少他们的认知流程,以保持流畅状态。
尽可能少让用户做计算
千万别把计算这种事情丢给用户,让计算机来处理。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6c3803a7c31349547e1ee86c664f92dd/d96fdc13c8fcc3cef11a72159a45d688d53f20ba.jpg)
△ 显示剩余数量
在界面内体现用户当前所处位置
界面就像机场,如果没有“你在这里”的标记,用户会迷路,因此记得提供标记。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=be56450541540923aa696376a259d1dc/276dadfdc3cec3fdcfe41c53de88d43f869427ba.jpg)
△ 在导航菜单上突出当前所选
![](http://imgsrc.baidu.com/forum/w%3D580/sign=fff4c7420123dd542173a760e108b3df/5683a6cfc3fdfc03a6a2589edc3f8794a5c226ba.jpg)
△ 在复杂的界面中提供面包屑导航或步骤图示
![](http://imgsrc.baidu.com/forum/w%3D580/sign=7cb38735d554564ee565e43183df9cde/5db1a6fcfc039245e36f5a298f94a4c27c1e25ba.jpg)
△ 在页面标题前面部分放置描述性或有用的信息
简化选择类任务
做选择需要费脑筋,简化这类任务让用户少费神
![](http://imgsrc.baidu.com/forum/w%3D580/sign=3fc453425e4e9258a63486e6ac83d1d1/5d8299029245d688e2d80982acc27d1ed31b24ba.jpg)
△ 指明多数用户选择的选项
![](http://imgsrc.baidu.com/forum/w%3D580/sign=eab3d8589a58d109c4e3a9bae159ccd0/627cf744d688d43fb0732ad4751ed21b0ff43bba.jpg)
△ 提供常见搜索关键词列表
![](http://imgsrc.baidu.com/forum/w%3D580/sign=6ea91c4ed909b3deebbfe460fcbe6cd3/0c3ab389d43f87949c25f308da1b0ef41ad53aba.jpg)
△ 下拉分类菜单置于相应导航菜单内
使用常规的网页设计界面
创新很好,但不要跟常规的设计方式偏离太远。用户习惯于某些布局、结构。常规设计之所以流行,是因为他们确实可行。
![](http://imgsrc.baidu.com/forum/w%3D580/sign=abbf5f1fbbde9c82a665f9875c8080d2/48f7b13e8794a4c244f95c0d06f41bd5ac6e39ba.jpg)
△ 使用常规的导航菜单
![](http://imgsrc.baidu.com/forum/w%3D580/sign=ebee3dc89482d158bb8259b9b00b19d5/4a40e295a4c27d1ee8fc80e213d5ad6edcc438ba.jpg)
△ 把实用功能放在右上角
每次交互动作后提供反馈
用户跟界面进行互动后,需获得实时反馈。操作成功还是失败了?发生了什么变化?
![](http://imgsrc.baidu.com/forum/w%3D580/sign=88391294d958ccbf1bbcb53229d9bcd4/19ebc1c37d1ed21b351395c3a56eddc450da3fba.jpg)
△ 重要的交互动作后反馈提示成功消息