首页 理论教育CorelDRAW艺术设计:网页界面

CorelDRAW艺术设计:网页界面

【摘要】:Web应用程序的界面设计,其核心就是网页设计,但它的重点主要是在功能方面。下面,就针对Web网页界面设计中的几个主要问题做一简单介绍。界面元素的处理在用户界面设计中,简单是最重要的原则。图7-70 阴影“三维”效果按钮的“按下”状态许多Web应用程序有自定义的按钮样式。Web应用程序也受益于这种上下文关联的控件,因为这些控件通过只显示用户需要的内容来帮助整洁界面,而并非显示所有的内容,如图7-72所示。

当今越来越多的应用程序迁移到了Web平台。Web应用程序的界面设计,其核心就是网页设计,但它的重点主要是在功能方面。Web要想超越当前流行的桌面应用程序,就必须提供更为简单、更为直观和即时响应的用户界面,让用户花费更少的时间和精力完成想要做的事情。下面,就针对Web网页界面设计中的几个主要问题做一简单介绍。

(1)界面元素的处理

在用户界面设计中,简单是最重要的原则。任何时候,若屏幕上显示的控制项越多,用户就不得不花费更多的时间去搞清楚如何操作界面;当选择变少时,可用的功能将变得更加明显,更容易被发现、使用,如图7-69所示。

978-7-111-41123-9-Chapter07-69.jpg

图7-69 搜索界面显示隐藏

当单击搜索框的搜索链接时,会出现一个类似于下拉式菜单的层。如果需要缩小搜索范围,可以选择菜单中所需要的类型。这些选项的聚合简化了搜索框。隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能,用弹出式菜单和操作把剩余的功能隐藏起来,这在桌面软件中很常见。

(2)模拟窗口的阴影

在弹出菜单和窗口下的阴影不只是看起来很漂亮,它可以帮助菜单或者窗口通过强调从背景中脱颖而出;还可以通过周围的暗色调区域,屏蔽背景内容。由于大多数情景窗口是不容易从桌面程序中辨识出来,所以阴影帮助它们更接近于读者,因为感觉上窗口似乎是三维地浮在其他页面上,如图7-70所示。

978-7-111-41123-9-Chapter07-70.jpg

图7-70 阴影“三维”效果

(3)按钮的“按下”状态

许多Web应用程序有自定义的按钮样式。一般都用自定义图片作为它们背景的锚点或输入按钮。默认输入按钮可能不适合某些情况,以及文字链接有时显得过于渺小。目前的挑战是,按钮通过鼠标操作有动态的效果。

读者可以通过CSS(网页层叠样式表)为按钮增加“按下”效果,如图7-71所示。

978-7-111-41123-9-Chapter07-71.jpg(www.chuimin.cn)

图7-71 按钮正常和按下效果

(4)上下文关联导航

上下文关联控件的最佳范例之一出现在微软Office 2007中的界面,无论是图形编辑、校对,还是简单书面形式,在它的界面中默认每个标签上有不同控件相关的特定操作。Web应用程序也受益于这种上下文关联的控件,因为这些控件通过只显示用户需要的内容来帮助整洁界面,而并非显示所有的内容,如图7-72所示。

978-7-111-41123-9-Chapter07-72.jpg

图7-72 网页关联导航效果

新浪、腾讯等大多知名网站都是采用该效果,如图7-73所示。

978-7-111-41123-9-Chapter07-73.jpg

图7-73 新浪关联导航效果

(5)更加重视主要功能

不是所有的控件都具有相同的重要性。例如,在屏幕上创建一个新项目,一般至少有两个按钮:“创建”和“取消”。“创建”的链接更重要一些,因为这是用户大部分时间会用到的操作,只有少数时候才会使用“取消”,如果这些控件挨着放置,应予以区别,如图7-74所示。

978-7-111-41123-9-Chapter07-74.jpg

图7-74 网页按钮重视对比