首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

网站设计中不可忽视的可用性原则(3)

网站设计中不可忽视的可用性原则(3)

单选框、复选框文字可点击单选框、复选框的设计疏忽通常是未设置 id 和 label 的 for 属性,从易用性和 accessibility 角度而言,for 属性都是不能缺少的,for    属性可以关联控件元素的 id,使文本也可点击选中,扩大了选中焦点区域。HTML5,可以使用 for 属性,或是把表单控件放在 label    元素里面两种方法来实现该关联。但使用 for 和 id 找到控件元素的方法要比将控件放在 label 标签内的健壮性好很多。使用   属性跨浏览器和 accessibility 的健壮性要比使用标准的控件元素放入 label 标签下的方法强。所以建议还是第一种方法。
图 8.不妥的设计,使得用户较难判断单选框对应于哪一个选项图 9.点击文字即可选择该复选框,增大了可点击区域链接永远不要让用户去猜测一段文本是否可点击。最为稳妥的作法是颜色和下划线的组合使用,使得超链接很容易辨识。同时不能犯的错误是,通过颜色和下划线设计非链接文本,这样会给用户带来困惑。当我们无法即用颜色,又用下划线标识所有的链接时,我们也要尽量在固定的区域内,使用一样的链接风格,比如不能有些链接有下划线,有些链接没有,有些链接是不同的颜色等。
其次要注意链接文本要清晰,准确描述它所指向的目的地,避免使用含糊的描述。
比如工商银行的首页上几乎每个字都是链接,这种情况下不可能采用全部链接带有下划线的作法。
图 10.“企业网上银行登录”下的文本都是链接,好的作法是红线所指处的链接与“用户登录”区域块链接表现一致,用黑色图 11.非链接用了灰色文本,[详细]是可点击链接,设置成与整站统一链接颜色黑色更为合适图 12.矩形栏目块状内,“客户服务”是链接可点,而“贵宾尊享”是非链接,合适的作法是给“客户服务”同时加下划线,以示区分,减少用户的困惑
返回列表