1.1 了解网页UI

UI的本意就是用户界面，而用户界面是人与机器的交互，要使人机交互和谐、沟通顺畅，就必须设计出符合人机操作的简易性、合理性的用户界面，来拉近人与机器之间的距离。在发展迅速的互联网科技信息时代，知识在不断地更新，科技越来越发达，界面的设计工作渐渐地被重视起来。一个拥有美观界面的网页会给人们带来舒适的视觉享受与操作体验，是建立在科学技术基础上的艺术设计。

1.1.1 什么是网页界面

作为上网的主要依托，由于人们频繁地使用网络，网页变得越来越重要，网页界面设计也得到了发展。网页讲究的是排版布局和视觉效果，其目的是给每一个浏览者提供一种布局合理、视觉效果突出、功能强大、使用更方便的界面，使他们能够愉快、轻松、快捷地了解网页所提供的信息。

网页界面设计以互联网为载体，以互联网技术和数字交互技术为基础，依照客户的需求与消费者的需要，设计有关以商业宣传为目的的网页，同时遵循艺术设计规律，实现商业目的与功能的统一，是一种商业功能和视觉艺术相结合的设计。如图1-1所示为设计精美的网页界面。

1.1.2 网页界面设计的特点

与当初的纯文字和数字网页相比，现在的网页无论是在内容上，还是在形式上都已经得到了极大的丰富。网页界面设计也具有了视觉传达设计的一般特征，同时兼有新时代的艺术形式。

1．交互性

网络媒体不同于传统媒体的地方就在于信息的动态更新和即时交互性。即时交互是网络媒体成为热点媒体的主要原因，也是设计网页界面时必须考虑的问题。传统媒体都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播，而信息接收者只能被动地接受。在网络环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中的。这种持续的交互，使网页界面设计不像印刷品设计那样，出版之后就意味着设计的结束。网页设计人员可以根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常对网页界面进行调整和修改。例如，为了保持浏览者对网页的新鲜感，很多大型网站总是定期或不定期地进行改版，这就需要设计者在保持网站视觉形象统一的基础上，不断创作出新的网页作品。如图1-2所示为网页界面交互性的体现。

2．版式的不可控性

网页界面设计与传统印刷品的版式设计有着极大的差异：一是印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的计算机或浏览器；二是网络正处于不断发展之中，不像印刷品那样基本具备了成熟的印刷标准；三是在网页界面设计过程中，Web标准随时可能发生变化。

这就说明网络应用尚处于发展中，关于网络应用也很难在各个方面都制定出统一的标准，这必然导致网页界面设计的不可控性。其具体表现为：一是网页界面会根据当前浏览器窗口大小自动格式化输出；二是浏览者可以控制网页界面在浏览器中的显示方式；三是不同种类、不同版本的浏览器观察同一网页界面时的效果会有所不同；四是浏览者的浏览器工作环境不同，显示效果也会有所不同。

把所有这些问题归结为一点，即网页设计者无法控制网页界面在用户端的最终显示效果，这正是网页界面设计的不可控性。如图1-3所示为不同版式的网页界面的显示效果。

3．技术与艺术结合的紧密性

设计是主观和客观共同作用的结果，设计者不能超越自身已有经验和所处环境提供的客观条件来进行设计。优秀的设计者正是在掌握客观规律的基础上，进行自由的想象和创造。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术的紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页界面的高质量需求。如图1-4所示为精美的网页界面设计效果。

例如，浏览者欣赏一段音乐或电影，以前必须先将这段音乐或电影下载到自己的计算机中，然后再使用相应的程序来播放，由于音频或视频文件都比较大，需要较长的下载时间流。但当媒体技术出现以后，网页设计师充分、巧妙地应用此技术，让浏览者在下载过程中就可以欣赏这段音乐或电影，实现了实时网上视频直播服务和在线欣赏音乐服务，这无疑会大大增强页面传播信息的表现力和感染力。

4．多媒体的综合性

目前网页界面中使用的多媒体视听元素主要有文字、图像、声音、动画、视频等。随着网络带宽的增加、芯片处理速度的提高，以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页界面，以满足和丰富浏览者对网页不断提高的要求。目前，国内网页界面已出现了模拟三维的操作界面，在数据压缩技术的改进和流技术的推动下，互联网上出现了实时音频和视频服务，比如在线音乐、在线广播、在线电影等。因此，多种媒体的综合运用已经成为网页界面设计的特点之一，也是网页界面未来的发展方向之一。如图1-5所示为在网页界面中应用的动画和视频等多媒体元素。

5．多维性

在印刷品中，导航的问题不是那么突出。例如，如果一个句子在页尾还没有结束，读者会很自然地翻到下一页查看剩余部分，而且印刷品还提供了目录、索引和脚注等来帮助读者查阅。

多维性源于超链接，它主要体现在网页界面中的导航设计上。由于超链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接受信息的线性方式。例如，可以将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅增加了浏览者检索和查找信息的难度，也会给设计者带来更大的挑战。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航及超链接设计。如图1-6所示为网页界面中出色的导航设计。