请让可点击元素更易识别_附件.pdfVIP

请让可点击元素更易识别 无论你是否喜欢扁平化设计 ，交互组件必须给 够的提示来表明这个组件是可点击的。标记 可点击的提示有边框 ，颜色 ，尺寸 ，连贯性 ，位置或者遵循网页标准 ，这些可以让交互组件 更好看。 用户需要知道网页的哪个区域是空白的内容和哪个区域是可点击的 （或者可被选中 ）。 让可点击的元素易被识别 ，如此一来用户就无需思考元素设计的意思或者当元素的设计超出了他们 的使用习惯 ，他们也不会因此感到困惑。 这里有个简单的交互代价的例子 ：人们对待点击就像货币一样 ，他们不会随便用它。他们小心对待 可点击元素 ，如果强迫他们去寻找可点击的元素甚至是更多地消耗他们的能量在点击上 ，他们会因 此而反感。 To m’s of Maine:让我们做个简单得测试。猜猜这个屏幕里哪块区域是可以点击的。然后滚动到下面 去找答案。 吸引点击的一个主要因素是链接文本的质量。然而 ，这篇文章只关注视觉上的可点击 ：仅仅通过看 着这个网页 ，你可以告诉我哪个点了会有反应吗 ？一个物体通过它的外观就应该让用户知道怎么去 用它 ，Nielsen No rman Gro up 的联合创始人 ，Do n No rman描述过这些生理上可察觉的暗示。在网 络世界里 ，人们判断哪些元素可点击是基于他们在现实世界和网络世界里的经验。他们把看到的 东西 ，通过形状、颜色和背景等属性 ，把他们的性质与以往见过的东西联系起来。视觉暗示与人们 的预期相符 ，这样可以帮助他们很快明白哪个按钮是可以按下。 传统超链接的提示是蓝色加下划线的文本 ，就像我在这篇文章用的一样。按钮就像现实世界中的对 照物一样 ，是长方形的 ，并且有三维特征的。这些元素有着很好的视觉提示 ，早期我们也建议按钮 和链接都遵循这些设计规则。 但是如今用户看到的超链接和按钮有很大的不同。随着用户接触不同的交互提示并且学习这些新的 提示 ，标记物也在不断改进。 有了这种说法 ，扁平化设计 （一种界面设计风格 ，注重二维平面的表达 ，iO S和W indows 8就是个 例子 ）会有一些网页设计师将极简风格运用到极致。扁平化设计背后的理念是简化界面。然而去除 太多会掩盖这个对象 ，使得这个东西更难理解了。平面设计的一个主要问题是其中最重要的一个可 点击的标记——三维视觉 ，被移除了。用户长期依赖的提示功能被移除 ，使得用户很难判断哪个东 西是可点击的。 To m’s of Maine:这个网页里只有绿色覆盖的区域是可点击的。点击这些区域之外的用户只有失望了 。 降低点击的不确定性 绝对不要让用户依赖于靠鼠标放在上面来确定一个文本是否可点击。寻找链接比较费劲 ，用户不会 花太多的时间在上面。 （如果有个永远正确的使用指导 ，这会限制用户的努力。使用越麻烦 ，越少 人用。 ）下面是一些基本设计将帮助用户减少对是否可点击元素的猜测 ： 文本链接 1. 尽管蓝色仍然是最安全的链接颜色 ，其他颜色也可以 ，只要链接文本的颜色和主体的颜色有明显 的差别。如果你没有特别的理由去用其他颜色 ，我们 然建议你用蓝色。 2. 链接的位置将决定是否需要下划线。导航菜单栏和列表 ，特别是在网页外面的位置 ，是不需要下 划线的。它们的位置已经决定了它们的作用。 3. 测试你为超链接所选择的颜色 ，以保证有色盲的人也可以轻易的察觉到它们。 . 静态项目的颜色不能跟超链接的颜色一样。 5. 不要在不可点击的项目上使用蓝色的文本 （或者下划线的文本 ） 6. 不管你选择哪种超链接的风格 ，要保证整个网页经过一致的处理。 Pat ient Saf et y and Q ualit y Healt hcare:这里的提示让人感到困惑。蓝色的标题不可点击。图片可以 点击 ，但它们看起来更像静态的图片。网页顶端的说明告诉你去点哪个东西——这是一个失败的标 记设计。 St arbucks:链接不再是蓝色。在这个网页里超链接显然是绿色的。在网页的右边项目列表是可点 击的 ，因为位置 （页边距很窄 ）和格式 （box和下弹列表只能是链接了 ） 按钮 1. 至少让按钮接近于实际按钮。为了一个对象能被识别 ，它必须有正确视觉提示去触发正确和快速 的联想。保留正方形的形状 （最好有圆角 ）如果你不用三维视图。在扁平化设计中 ，交互组件至少 可以轻易分辨是否可悲点击 ，即使没有了更多的效果如阴影和渐变。 （在早期的研究中 ，从扁平变 成3D的按钮后 ，点击量增加了 16% ，尽管现在的影响越来越小了 ，它仍然起着很大的作用。 ） 2. 相反地 ，不要让不可点击地项目看起来像按钮。例如 ，给不可点击的标题加个背景颜色会使