标题: 网站设计中不可忽视的可用性原则（2） [打印本页]

---

作者: look_w    时间: 2018-10-19 21:06     标题: 网站设计中不可忽视的可用性原则（2）

固定元素保持惯例设计师容易在设计中让自己的创意占据上风，期望界面脱离传统，具有创意无可厚非，但人们已经根深蒂固的元素，保持惯例会更为稳妥。比如

• 网站标题(header）往往会在网站左上方显示。
• LOGO 通常可以点击，以回到首页
• 退出登录一般会在网站右上方显示
• 版权信息总是位于最下方 footer
• 网站搜索框经常会出现在网站右上方或中部上方
• 切换网站语言版本的功能经常出现在网站 header 右端并配有国旗显示更直观
• 搜索框必需是一个框
• 注册通常在页面的右上角

让搜索更容易为了精确搜索或在特定范围内搜索，网站往往提供各种不同的搜索参数。但多数用户更为青睐不需要思考就知道该如何搜索的界面。针对搜索功能最常见的设计就是一个相对显得宽大的输入框，加上“搜索”按钮组成，以提供最为方便的快捷搜索。
这里需要注重的一个原则是，虽然我们有时必需提供高级搜索功能，但较好的用户体验是，即使用户没有提供额外信息的情况下，搜索功能也应该是正常能够工作的。比如：
图 4.当用户未选择任意一个 within 下拉列表内容时，搜索照常工作巨型菜单(Mega menu)的优劣势我们提倡仅在必要时使用下拉菜单，虽然下拉菜单占较少的屏幕空间，但其缺点也是明显的，例如选项可见性较低，下拉菜单所包含的内容项太多时将造成困扰。然而根据 Jacob Nielsen 对下拉菜单的研究，他认为下拉菜单并不一定要很小，“巨型”导航下拉菜单效果也不错。近年来，mega menu 成为在网页设计中成为一种趋势，尤其是在电子商务网站，如果运用得当，它确实能有效帮助到用户快速获取信息，大的二维下拉面板可以对导航选项进行清晰，组织良好的导航分组，将用户从不得不进行的滚动中解脱出来。运用是否得当成了设计的关键。
巨型菜单的优势：

• 所有选项一目了然
• 可通过分隔线、富文本、图标、图片修饰等视觉上手段更加清晰地组织菜单结构

图 5.利用图标，分隔线，文字加粗等手段使 mega menu 更易读巨型菜单的劣势：

• 未展开前的 mega menu 不易被用户发觉
• 大量的菜单选项占据了屏幕空间，遮住了一部分内容
• 缩小浏览器尺寸或在小屏幕手持设备上不易看到全部菜单内容
• Load 巨型菜单速度有影响
• Accessibility 方面，fly-out 菜单很容易导致可访问性问题，代码书写需要更小心谨慎

图 6.缩小窗口后 mega menu 显示不完整，滚动条出现图 7.窗口高度缩小后 mega menu 显示不完整需要注意的是：

• 不能无节制地堆放过量菜单选项，降低友好度
• 激活 Mega menu 较好的作法是加一个倒三角小图标，暗示用户鼠标经过可展开更多内容。因为 Mega menu 本身不象一个按钮能更直观能告诉用户此处可点击
• 避免菜单太难使用，鼠标指针轻微失去焦点，就得从头开始。
• 避免使用多个下拉级别，多个层级的导航必须进行水平滚动，不够友好
• 避免在 Mega menu 内加“搜索”功能
• 避免在 Mega menu 区域内右上角加“关闭”按钮，这本身并不是必需的，关闭菜单较好的设计方案是将鼠标移开一定的距离才能关闭它，Jacob Nielsen 的另一个建议是鼠标移开 0.5 秒后，菜单在 0.1 秒内消失

---

欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)

Powered by Discuz! 7.0.0