UI设计全书(全彩)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.5 网页中按钮的实际作用

从功能上进行划分,目前在网页中普遍出现的按钮可以分为两种:一种是真正意义上的按钮,可以实现提交功能;另一种是“伪按钮”,仅仅是作为链接的图片。

3.5.1 具有提交功能的按钮

实现提交功能的按钮,例如,当用户输入关键字后,单击“搜索”按钮,网页中将会出现搜索的结果;当用户输入用户名和密码,单击“登录”按钮,网页中将显示用户的相关信息。在按钮上的文字说明了整个表单区域的内容,如有“搜索”按钮的区域,标明这一区域内的文本框和按钮都是为搜索功能服务的,不需要再另外添加说明了,这也是网页设计师为提高网页可用性而普遍采用的一种方式。

实现提交功能的按钮,在按钮的表现形式上可以分为两种:

◎ 系统标准按钮

系统标准按钮是网页中默认的实现提交功能的按钮,与各种各样的图片按钮相比,在网页中使用系统标准按钮更容易被用户识别,但是样式过于单一、呆板,在很多情况下与网页的整体风格不相符,如图3-104所示。

图3-104

◎ 使用图片制作的按钮

由于系统标准按钮很难与网页的整体风格相符,所以在很多情况下,网页设计师会使用与网页整体风格相符的图片按钮来代替系统标准按钮,但它同样可以实现提交的功能。使用图片制作的按钮,美观大方、形式多变,但是用户很难将它与网页中其他一些普通链接图片按钮相区别,如图3-105所示。

图3-105

3.5.2 具有链接功能的按钮

在网页中除了有能实现提交功能的按钮,还有许多的“伪按钮”,这些按钮从外观上看是一个按钮而实际上只是提供了一个链接。设计师为了突出某链接的重要性,与普通文字链接区别开,将其设计为按钮的样式,使得这些链接更为突出,引导用户关注。

网站上“伪按钮”的表现形式分为三种:静态图片按钮、JavaScript翻转图片按钮和Flash动画按钮。不管是什么形式的按钮,重要的是设计者一定要把握好按钮的风格,要与整个页面风格保持一致,并且能够给用户留下深刻的印象,如图3-106所示。网页中按钮的表现形式及风格的把握,需要读者多看成功作品,多从设计者的角度思考问题,才能够快速地提高设计水平。

图3-106