你不应该创造按钮(Nicholas C. Zakas)

Author : lovecicy

易用性的一个重要方面就是管理焦点和用户交互。默认情况下,所有的链接和表单控件都能获得焦点。这使你可以使用键盘的Tab键导航,当一个元素获得焦点以后,可以按下Enter键激活。不管你的web应用有多复杂,这个范例都能很好地工作。只要让使用键盘的用户能够在链接和表单控件之间导航,那么他就可以轻松的使用这个web应用。 不幸的是,有时候web开发者在创建界面的时候过于“聪明”了。当我需要某些看起来像一个链接但是表现的像一个按钮改怎么做呢?你会看到很多像这样的代码: <a href=”#” onclick=”doSomething()”>I’m a button</a> 这段代码应该有点倒你胃口。这是一个不会跳转也不做任何事的链接。它做到仅仅是通过给onclick事件添加了一个处理函数来达到某种意图。因为期待的样式是类链接样式,所以使用了锚点标记并添加了一些JavaScript。 那些熟悉ARIA的开发者可能会这样“解决”这个问题: <a href=”#” role=”button” onclick=”doSomething()”>I’m a button&[Read More]

standard

W3C官网超链接交互样式设计与实现

Author : lovecicy

w3c logo

超链接是网页中,必不可少的内容。超链接的交互设计,也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上,超链接的交互设计,并非只能这么简单。 W3C 的官方网站的超链接交互性不错,而且突破常规,下面我们来分析一下。下图是超链接交互性操作,当然推荐直接去 W3C 官方网站看效果。 实现原理和分析 首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(2px 普通的 1px),同时这个下划线和文字颜色不同(用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的)。所以可以肯定,这个下划线是使用 border-bottom 属性定义的,并且 padding-bottom 了几个像素,空开一定距离。然后交互性操作就很简单了,只需要改变一下底边框的颜色就可以了。当点击事件发生的时候,超链接不是简单的改变了颜色,而是向下移动了几个像素,这样给人的错觉[Read More]

standard