Tab(选项卡)的产品设计原则及应用[译](5)

作者:西乔 来源:西乔的九卦 时间:2009-07-09 19:05:00 


四、提升之道

在提供了一些基本的可用性建议和原则后,我们还可以讨论一些方法来进一步提高Tab元素的可用性。在标签上使用icon来形象化地描述内容区说包含的信息。

在标签上配合使用形象的icon,可以增强对内容区信息的描述。

例如在网站 DrawIt 中,图标用于形象地补充说明所对应的内容区的功能。

在标签上使用icon,必须保证它们是形象的,切题的。使用不相关的icon会适得其反。

避免在标签上直接用icon来代替文字。

不同的人对一个图像有不同的解读,最安全的方法是使用加上文本来描述内容区信息。

在内容区切换的时候使用过渡动画。

在内容区切换的时候使用过渡转场动画是一个不错的选择,可以为用户提供积极的视觉反馈——内容区正在变化!

大家可以去网站 Coda ,从左到右点击Tab标签,欣赏切换时的效果。

当用户在Tab的标签区进行操作时,有明确的悬停响应。

默认情况下,当用户将鼠标移到超链接或标签区域上时,鼠标指针的样式会发生改变,让用户知道标签区域是可点击的。

除此之外,还可以利用背景色变化来响应用户的鼠标操作。对于那些不熟悉Tab标签操作的网站新用户而言,这是很有用的。

下图中Vyniknite.sk 网站的案例里:当用户鼠标划过未选中状态的标签,背景色会变成鲜明的红色。

标签:产品设计,应用,tab,选项卡
0
投稿

猜你喜欢

  • 通过数据库引擎来加速的MySQL数据库

    2012-01-29 18:07:09
  • ASP使用wsImage组件给图片加水印代码

    2010-06-09 19:23:00
  • 如何获取浏览器的更多信息?

    2009-11-23 20:48:00
  • 在Win2003 64位下ASP无法连接Access数据库

    2011-03-30 11:22:00
  • 从两个方面讲解SQL Server口令的脆弱性

    2009-01-08 13:40:00
  • 一个ACCESS数据库数据传递的方法

    2008-03-05 11:58:00
  • 用CSS设置表格Table的细边框的比较好用的方法

    2010-09-06 14:58:00
  • 重新阅读《HTTP协议基础》

    2008-04-04 17:40:00
  • position、z-index、top、right、bottom和left属性

    2009-10-04 20:33:00
  • css reset中的list-style:none

    2010-05-26 13:56:00
  • ASP UTF-8编码生成静态网页的函数

    2011-03-07 11:24:00
  • 常见系统中文字体的英文名

    2008-03-03 12:44:00
  • ASP技巧:禁用清除页面缓存的五种方法

    2009-07-21 12:33:00
  • ASP分页类(支持多风格变换)

    2011-04-08 10:39:00
  • asp 去除最后一个逗号为空字符串的代码

    2010-06-09 19:18:00
  • YUI3设计中的激进和妥协

    2010-01-17 09:59:00
  • 可以随便改别人的网页的代码

    2008-03-25 12:54:00
  • Firefox 下 innerHTML 的一个 BUG

    2008-08-05 18:19:00
  • 在IE浏览器下面指定表单编码方式

    2009-10-02 16:47:00
  • asp如何从数据库中删除废旧的电子信箱地址?

    2009-11-15 20:04:00
  • asp之家 网络编程 m.aspxhome.com