设计网站的按钮颜色
  • 提交:admin
  • 时间:08-08-14 10:06
  • 更新:08-08-30 13:38
因为大多数网站用户也使用桌面软件,所以色差还有一种特殊用途,即大多数网站用户认为

:不可用的控件是“灰色的”。把控件变成灰色暗示控件不可用,这是桌面软件中长期存在的约

定。用户熟悉这个约定,为了他们的利益,设计网站和网站应用程序可以使用这个约定。相反的

一面是网站设计和基于网站的应用程序冒着使用户混淆的风险违反了这个约定。
违反这个约定的两种方式:
·可用的控件和链接颜色,看上去不可用(变成灰色)
·不可用的控件和链接颜色,看上去可用(没有变成灰色)
按照惯例,许多网站设计者违反了第一种,少数违反了第二种。因此,我们把焦点集中在变

成灰色的可用控件和链接上。
在近期的一次网站升级之前,Erlbaum.com网站在导航条中使用灰色表示除了当前页以外的

页面。导航条中当前页的链接是加粗的黑色字体,通向其他页面的链接是灰色的。链接的颜色错

误地暗示“Home”链接是不可用的,其他的都是不可用的。实际上,所有的链接都可用。讽刺地

,导航条中看起来惟一可用的链接是本应该不可用的那个(参见第3章禁忌20)。
很明显,Erlbaum.com网站制作当前页面的习惯可能在独立的情况下有意义。但是,网站不

是独立存在的。这种习惯在个人计算机和桌面软件中可以存在。由于违反了GUI的约定,

Erlbaum.com网站就违背了用户的愿望。
Travelocity.com网站利用色彩饱和度,将用户的注意力集中到继续当前事务的按钮上。继

续当前事务的按钮颜色加亮显示,那些取消当前事务或者离开当前事务的按钮颜色变暗显示。航

班搜索页面中有两个按钮:Search All Airlines(搜索全部航班)按钮和Cancel(取消)按钮

。Cancel按钮看起来不可用,但是实际上它和Search All Airlines按钮一样,是可用的,变暗

显示是因为它不再继续当前事务。在搜索结果页面中,Buy Now(立即购买)按钮和Hold/Save(

收藏)按钮颜色色彩鲜艳,航班列表底部的两个按钮是变暗的,它们看起来不可用。
此外,除了变暗的按钮容易被认为是不可用的之外,Travelocity网站的约定不应该算是太

差的。
Erlbaum和Travelocity至少有一个明确的基本原则,虽然是一个由变灰的链接和按钮颜色造

成误导的原则。相反,Radio Shack网站使用灰色按钮就是为了让外人看着不明显。

RadioShack.com网站的主页中为网站的不同部分设置了不同的导航条,在大多数导航条中,按钮

颜色看起来色彩鲜艳。但是,在Special Features(特殊用途)的导航条中,按钮显示为灰色—

—不可用。
最后,我们来看一个网站的例子,在这个网站中因为颜色,一些按钮看起来是不可用的。

Monterey.com网站主页中的按钮颜色五颜六色,大多数都是明亮而且颜色饱满,然而,只有两个

按钮颜色是暗色的。来到网站的访问者会假设这两个按钮是不可用的,因而,不会自寻烦恼尝试

这个两个按钮,那么访问者就错了。但是当人们对你的网站中的内容产生误解时,不是他们的问

题,而是你的问题。

解决之道
至少,直到个人计算机(PC)被网站设备所取代,作为网站冲浪的主要工具,设计人员需要

认识的到大多数网站浏览都发生在一台充斥着桌面软件的PC上。因此,应该遵循不可用的控件是

灰色的这一GUI软件约定——至少在网站上不能分开地违反这个约定。
作为如何在网站设计上应用这个约定的例子,我按照约定修改了Erlbaum.com网站的导航条

。仍旧显示我们位于主页,但是颜色颠倒过来了:到主页的链接是灰色的;其他所有的链接颜色

都是黑色的。这样做是有用的;因为这是主页中的导航条,Home(主页)链接应该是不可用的,

而其他链接都应该是可用的。
类似地,修改Travelocity.com网站中的禁忌,需要让所有可用的按钮看起来都颜色饱满,

然而,在标记“on-path”按钮时不要使按钮的颜色更鲜艳。我给Search按钮作了标记,用户按

下回车键时触发的那个按钮)类似(Microsoft,1999)。这种相似不是一种偶然:尽管网页没有

默认按钮,但是“on-path”按钮是最有可能被点击的按钮。

相关主题:
Web设计中关于颜色的问题
网站的颜色设计
WEB按钮点击范围设计禁忌
Web上的“后退”按钮为什么如此重要?
请拨打热线:0571-86586571

文章推荐

    Loading...

人气排行

    Loading...
建站经验 - 业内新闻 - 优化技术 - 网络营销 - 官方论坛 - 建站套餐 - 网站建设单价 - 增值服务 - 建站流程
网站优化套餐 - 网站推广增值服务 - 网站推广流程 - 网站设计 - 设计精选 - 企业网站 - 政府网站 - 电子商务网站 - 行业门户网站

关于我们 - 诚聘英才 - 合作伙伴 - 联系我们 - 杭州网站建设
[ 简体中文 ] [ blue ] 管理模式
Copyright ©2005 - 2008 杭州尚线网络技术有限公司
Processed in 0.004(s) 浙ICP备07025542号