网站布局与网页配色设计
上QQ阅读APP看书,第一时间看更新

1.1 了解网站设计

网站不单单是把各种信息简单地堆积起来能看或者表达清楚就行,还要考虑通过各种设计手段和技术技巧让受众能更多、更有效地接收网站页面中的各种信息,从而对网站留下深刻的印象并催生消费行为,提升企业品牌形象。

1.1.1 什么是网站设计

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

网站设计是以互联网为载体,以互联网技术和数字交互式技术为基础,依照客户的需求与消费者的需要设计有关商业宣传目的网页,同时遵循艺术设计规律,实现商业目的与功能的统一,是商业功能和视觉艺术相结合的设计。

这是一个建筑设计公司的宣传网站,页面的布局与内容结构非常清晰、易读,在页面的顶部和底部分别设置了导航菜单和站内搜索,便于用户在网站各页面之间跳转。网页的内容采用了图文相结合的方式表现,标题与正文内容区分明显,并且采用了简短的文字描述,使用户能够快速阅读。为页面中相应的元素添加交互效果,给用户很好的提示和指引,实现了网站功能、商业宣传和视觉艺术的完美结合。

专家提示

用户在页面上的视线移动并不是随机的,它是人类共有的、对于视觉刺激而产生的、一系列复杂的原始本能反应。在设计网站页面的过程中,可以通过各种视觉手段,吸引或分散用户的注意力。

1.1.2 网站设计的特点

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

1.交互性

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

在该移动端页面设计中,对背景图片进行模糊处理,在版面中间使用不同颜色的矩形色块来突出选项的表现,使界面非常清晰、易用,而当用户单击选择某个选项时,该元素出现相应的交互动画效果,给用户很好的提示和反馈,这些都能够带来良好的用户体验。

2.版式的不可控性

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

上面两张截图为网页在不同分辨率下的显示效果,分辨率为1 024px×768px的网页看起来比较方正,而分辨率为1 366px×768px的网页则呈宽屏显示。分辨率虽然有变化,但对该网页内容的展现却没有任何问题,这就要求设计师在设计网站页面时考虑页面内容,让绝大多数的浏览者得到较好的视觉体验。该网站页面还使用一张大幅图像作为页面的背景,这样在大多数的分辨率下都能够获得很好的视觉体验。

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

把所有这些问题归结为一点,就是网站设计者无法控制网站界面在用户端的最终显示效果,这正是网站界面设计的不可控性。

随着移动设备的普及,使用平板计算机或智能手机来浏览网站的用户越来越多,但是平板计算机与智能手机等移动终端的屏幕分辨率都要小于桌面计算机的显示器,为了使网页能够适应在多种不同的设备中浏览,就需要考虑网站页面能够自适应多种屏幕分辨率或多种终端设备。

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

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

该设计公司的网站设计非常特别,网站页面非常简洁,在页面中间位置使用各种符号图形与字母相结合来表现网站的主题,主题表现具有很强的个性和设计感,当用户在页面中滚动鼠标时,页面会通过非常自然的交互动画切换到下一个需要显示的页面内容中,无论是页面的构图,还是流畅的交互动画效果,都给浏览者留下了深刻的印象,也表现出了该设计企业的独特创意。

4.多媒体的综合性

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

技巧点拨

目前网页中实现的三维技术主要是通过全景视频来实现的,通过拍摄真实世界,然后利用拼接柱形或球形的全景图来实现。全影视频是连续的全景图片展示形式,可以在任意一点展示360°全景图片,突破了点与点端连接的方式。

这是一个旅游宣传网站,该网站创意性地使用多段视频介绍来讲解不同的风土人情,避免了文字介绍内容的枯燥无味。当用户进入该网站时,以几段简短的视频作为页面的背景,并且在页面中通过图标与说明文字相结合的方式给予用户非常明确的交互操作提示,用户通过键盘上的方向键可以切换页面的背景视频,多媒体技术在网页中的应用给浏览者身临其境的感受。

5.多维性

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

这是SONY官方网站的相机系列产品页面,可以看到在页面顶部使用黑色的背景色块来突出导航菜单的表现,并且导航菜单紧靠着网站Logo排列,左上角是浏览者刚进入网站页面的视觉焦点,最能够引起用户注意,页面导航的信息架构非常清楚,便于用户在网站中查找相应的内容。而搜索功能则安排在顶部的右侧,仅仅显示为一个搜索图标,只有当用户需要使用时,单击该图标才可以展现搜索框。

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