网页按钮的功能与表现_网页设计教程

推荐：按钮上的内容
作者：http://www.esunweb.com/最近UCDChina以“注重界面上的文字”为主题写了一系列的文章，使我在界面文字上的使用受益匪浅。之后，我对按钮上的内容的

　　作者：http://www.chouyu.com.cn/

　　目前在网页中普遍出现的按钮可以分为两类：一种是有提交功能的按钮－－－真正意义上的按钮；另一类是仅仅表示链接的按钮，在这里将其称为“伪按钮”。

　　真正的按钮

　　真正的按钮有两个作用：
　　1．实现提交功能；
　　2．标明当前操作的目的。

　　说明：

　　无疑按钮实现着提交功能。当用户输入了要害字后会点击“搜索”按钮，网页中将出现搜索结果；当用户填写了用户名和密码后，点击“登录”按钮，系统将打开自己的邮箱页面。

　　按钮上的文字说明了整个表单区的内容，比如，有“搜索”按钮的区域显然标明这一区域内的文本输入框和按钮都是为搜索功能服务的，不需要在另外添加标题进行说明了，这也是设计师为提高网页可用性而普遍采用的一种方式―――逐字斟酌按钮文字。

　　按钮的表现形式可以大致总结为两种：

　　1．系统标准按钮
　　2．使用图片自制的按钮

　　对于真正的按钮应当使用系统标准按钮还是自制的图片按钮？

　　笔者认为应当使用系统标准按钮。系统标准按钮的设计起源是模拟真实的按钮，无论是真实生活中的按钮还是网页上的系统标准按钮都具有良好的用户反馈。

　　标准按钮的优势：

　　1．易识别。与各式各样的图片按钮相比，在网页中标准按钮更轻易被用户识别出的按钮。网页中的标准按钮与用户电脑的操作系统中的按钮表现上是一致的，这降低了用户识别上的负担。
　　2．操作反馈好。标准按钮具备多种状态，“正常状态”“被选中状态”“点击时状态”，多种状态使标准按钮能够传达更丰富的信息，而制作图片按钮的设计师通常没这种耐心为一个按钮制作多种状态，因为使用图片按钮多数时候是因为图片按钮更好看，而设计师并不太在意用用户的使用效率问题。使用图片制作出好看的页面是本能水平上的设计，而使用标准按钮制作易于使用的页面是行为水平上的设计(关于“本能水平上的设计”和“行为水平上的设计”理论请参见Donald A. Norman的《Emotional Design》)，我认为针对按钮这个问题应该优先考虑行为水平设计的需要，究竟按钮是网页”行为”部分(web标准将网页分成三部分：结构、表现和行为)的一个重要元素，何况在我看来系统标准按钮并不难看。

　　系统标准按钮也存在自己的问题：样式过于呆板，尤其是windows2000风格的按钮甚至被一些网页设计师认为是无法接受的丑陋，相比之下windowsXP式样的按钮更轻易被接受，无疑多数网页设计师以及公司boss还是更关注本能水平上的设计―――好看的设计。

　　css可以对按钮式样进行一些个性化设置，可以改变按钮颜色、立体效果、文字大小、文字颜色。具体方法可以很轻易的在互联网上找到，这里不多说了。我认为对于按钮这种程度的变化已经足够了。

　　我的观点：对于真正的按钮应该使用按钮这种表现形式，并且应该使用系统标准按钮。

　　伪按钮

　　在网页中大量存在这样的按钮，从表现上看是一个按钮而实际上只提供了一个链接。

　　起源：最初网页上随处可见文字链接，设计师为了突出其中的某些非凡重要的链接，将其设计成了类似按钮的样子，使得这些链接更为突出，引导用户点击。这也从侧面说明了在网页上按钮是很醒目的元素。

　　现在在网页上使用伪按钮的原因更为多样，让我们来看看“民意调查”这个例子：

　　在很多网页中“提交”和“查看结果”被设计成相同系统标准按钮，然而“提交”是将用户的选择提交给网站的系统，存入数据库，而“查看结果”是打开一个小窗口显示目前的投票结果，显然将“查看结果”设计成文字链接是更合理的，设计成按钮的原因通常是为了样式上的美观：最下面一行并排放置两个按钮，都有点击的功能，看上去更和谐，但是这却破坏了用户的可操作性。

　　上面这个例子是由于视觉设计上的需要，而错误的使用了按钮。当然广告中故意使用伪按钮误导用户也是使用伪按钮的一个重要原因。造成伪按钮泛滥的最根本原因还在于相当多的网页设计师还没能意识到伪按钮与真正按钮的区别，在设计过程中随意的使用按钮这种表现形式。

伪按钮的负面效果是：使用户难以辨别哪些是真正的按钮。用户在使用一个滥用按钮的网站时，会花费很多心思来区分一个文字链接和一个伪按钮的区别，而实际上区别仅仅在于伪按钮更为重要，设计师希望伪按钮的链接能引起用户更多的注重。

从网页可用性角度考虑有必要将链接与按钮区别开来，因为点击按钮代表提交一个表单，这不仅仅是网页的技术模型，同时也是用户的心理模型。

　　我的观点：伪按钮不应该使用按钮表现形式，更不应该制作成系统标准按钮。因为这将给用户造成误解，降低用户的使用效率。假如要使链接更为突出，网页设计师完全有义务花费更多的心思进行设计，更出色的表现这个链接，而不是偷梁换柱的模拟按钮，这种带有欺骗性的做法除了给用户造成误会还会使用户产生被愚弄的感觉，激怒用户显然是不明智的。

分享：60种分页案例和好的实践
作者：http://dancewithnet.com/结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入，用户就越轻易理解你观点和得到你想传达的信息。在网页