4.3 图形元素
网站设计中的图形元素是视觉信息传达的基础元素，因此无论设计师采用和中表达形式和手法，都应该符合网站的整体基调和主题。图形长期以来以它的直观、迅速，高效率的表达方式获得用户的认可。到目前为止，很少的信息载体可以在这个层次和范围内超越网页。因此合理的利用图形元素是网页设计师必不可少的技能之一。不可忽略的是当今互联网时代的高速发展，那些网站中极其强调质感和图层样式丰富的网站正被眼前一种质感轻盈，布局新颖大胆的新的网页构成形式所取代。对于这种新型网站，所显示出的网页构成更加的灵活。在图形的使用上拓展空间更强。
1、扁平化
在图形使用过程中，有一个极为重要的元素不容设计师忽视，那就是整体的页面加载速度。由于无论是图形还是图片都会受到文件本身的大小因素的影响。
因此过多的图层叠加，会导致页面加载页面加载过慢，影响视觉效果。所以扁平化的设计风格在一定程度上缓解了这种问题。去除了渐变、阴影、高光等拟真的视觉效果后为页面加载节省了许多空间。同时扁平化的页面设计通过将图形与信息扁平化的处理可以更为直观的展示主题信息；在页面的更新方面，扁平化的页面设计无需在细节的更改上花费更多的经历和时间，通常只需更改符合网页的色调和板块即可。扁平化因其简便，丰富的表现手段，备受许多企业的青睐。如图 4.11 所示的微软官方网页。
微软的 win8 系列的系统所遵循的正是这种扁平化的设计风格。所以网页端的设计和系统本身正好互相印证，相得益彰。不仅如此，微软通过使用扁平化的页面设计，凸显 icon 的图形化语言，并将颜色的对比，字号大小的对比，突出重点所要表达的信息。这样使用户更容易将注意力集中在产品的主要信息上，而不会被网站界面上的其他视觉元素所干扰。从而为用户展示出最核心的信息和操作，这些方式都增强了网站的易读性和可读性。
2、网页插画
设计师通过使用一些手绘插画的形式为页面增加别样的趣味性和活泼感。手绘风格的引入，对于互联网应用作品起到了一个积极的影响。不同的主题和绘画风格，使网站的主题的表现形式更具有原创性，使得整体的呈现效果更加多元化，人性化。
如图所示，谷歌搜索引擎的设计无疑是众多别处心裁的设计中的一种。设计师通过符合特殊节日气氛和主题的元素同 Google 的字体再设计联系在一起，这样的别样表达方式一方面满足了信息间的相互印证，一方面也将互联网时代中的个性化和趣味化的特点表现出来。从而让浏览的用户对于品牌印象极为深刻的同时对品牌抱有一定的认知好感。
3、版面率
互联网时代也可以说是一个读图时代。大量的文字信息其实呈现在用户面前的时候更多的时候是以图片或是图形的形式。网页方面体现的尤为如此。因此，设计师不光要了解图片和图形在网页中设计中直观性表现手法，同时也要掌握这些视觉元素在整个页面中的占用比率，也就是我们常说的的版面率。同样的网页设计下，版面率高的页面会给用户带来热闹以及活泼的感觉，相反版面率低的页面的表达更为沉稳和安静。因此我们可以得出这样的结论，提高版面率可以丰富和活跃网页页面构成，从而进一步优化页面的视觉呈现；而通过降低版面率的方式可以体现页面的稳重和空灵感。为一些典雅的设计提供思路。
如图所示的法国一位设计师的个人网站，很明显图形在页面中的占有率极强，所以整个页面呈现出的效果非常的活泼，版式也显得非常灵动而不会过分呆板。
这也正体现了设计师自我个性和设计自由。
同样在另外的一组图形运用中所给能体会到是版面率低所给人带来的感受。
如图是日本女子美术大学的官方网站首页，页面的整体布局非常的清新淡雅。
图形元素在整个页面占有率并不高，大量的留白面积使得页面显得更加空灵和典雅，也更为符合艺术的氛围和格调。
由以上的对比可以看出，图形元素以及在页面中的表现形式相对于对于网页的页面的设计和构成举足轻重。通过对于图片的灵活运用可以迅速的构建起网页的整体基调，如图例，是活泼？还是空灵？但如何保持设计形式的统一始终是页面设计的首要前提。无论是静态图片还是动态图片，是版面率高还是版面率低，使用图形的目的始终都是为了满足网页和网站最本身的主体需要，网页通过具有感召力的图形形式迅速抓住用户的心理，这才是网页图形所应有的作用和体现。
4.4 字体设计
文字始终是页面设计中不可忽视的一个部分。它是信息源的主体，也是构成页面的骨骼。但是作为如今的互联网时代，仅仅凭借单纯的文字并不能打动现今的互联网用户。因此如今在网页呈现中，文字的表述方式就要更加注重表现手法。一种方式就是通过将字体富有情绪和主题的图形化的表达手法。这是如今的网页设计中最为常见的一种表达方式，也是在短时间内最能迅速制造氛围，吸引用户的方式之一。如上文提到的关于 Google 的标志字体的再设计，同样类似的字体的设计还大量的运用在如今的电商网页设计之中。
如图中所示的天猫和京东等电商网页通过将字体进行重新的图形化组合和重构之后，令字体展现出极强的视觉张力，所蕴含的节日气氛和特性更为凸显。良好的氛围容易酝酿出用户良好的情绪反应。趣味化的表达手段，又不失活动应有的趣味性。
另外一种是通过字体和页面中图形的组合，利用合理的版式布局来创造出一种设计氛围。这种网站的格调相对较高，艺术与设计感尤为明显。
4.14 图例为日本着名音乐家坂本龙一的的个人页面。整个页面的留白区域很多，但是通过页面上字体和图形的组合，却使得页面非常的空灵和宁静。黑白的配比，左右式的页面布局，以及文字的大小对比都令页面呈现出非常人文的叙述性质。坂本的生平叙述似乎从网页中娓娓道来。
另外从案例页面中，可以看出字体选择的重要性。假如尝试将页面的字体换为黑体，又或是幼圆体，那么整个页面的表述风格和格调就有着天翻地覆的变化。
宋体所表达的叙事感和沉淀感将会被削弱。因此好的页面还需要对网站的主题有所把握，并通过合适的字体形式结合内容表现出来。
综上所述，通过对字体的加工和有效利用何以帮助用户迅速的获取信息，感受氛围，从而高效的获取认知需求，但在选择和设计过程中也存在着形式追随主题的问题，切忌过于形式化和设计化。在结合图形的版式构成时，切忌过于自由和随性从而破坏了页面的主题引导，造成页面的视觉逻辑上的混乱。
4.5 交互操作
随着网页计算机语言的不断成熟和 HTML5 语言的兴起，当今的互联网时代已经不满足于 Flash 曾经带给我们的交互体验。通过新型的计算机语言，用户的感官甚至可以随时的切入到如今的网页交互之中，体验页面的便捷。交互设计从设计层次来说就是鼓励用户参与到人机交互的过程当中。并通过体验过程来满足人们在体验过程中的自我需求。
现如今更多网页开始采用响应式的 web 设计，其原因有这么几个方面。首先，响应式设计以其特有的灵活性和可塑性，可以迅速的适配各种尺寸的设备。对于移动设备种类急速爆棚的今天来说，响应式的设计方式无疑节省了大量的人力和物力为网页所做的适配工作。其次，响应式设计形成了多个载体间的人际交互，真正的使得页面的表达更为人性化。过去我们只能在 PC 端呈现的页面设计，如今在各种移动设备中都可以加以呈现，如图 4.16 所示，这样的页面从表达本身来说就形成了一种流通的体验。并真正形成技术与设计多样性的统一。最后，响应式的布局可以快速的构架出页面样式和布局。这点无论从技术还是设计上来说都是曾经所难以想象的。
除了技术环境的提升之外，再具体的页面上也有着滚动视差效果的异军突起。尤其是在近些年来，滚动视差的效果几乎随处可见。视差滚动（Parallax Scrolling）实际上是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。简而言之就是在鼠标滚动屏幕时，页面上的各个元素的位置也发生了变化。并随着元素位置的变化不同，因而产生一种层次错落的感受。这种效果非常贴近人类眼睛的接受事物的反应，所以良好的滚动视差具有极强的吸引力。
滚动视差的效果并非凭空设计而是有着严谨的设计及流程。因为所涉及的对象毕竟是将页面中的静态部分，转换为可响应的动态结构，所以在网页构架前的设计必须缜密。这其中一般分为六个步骤。即：分析交互，场景构思，设计场景，叙述思路，修改反馈，改良优化。只有当这六个环节环环相扣时，才能设计出让人满意的视差效果的作品。
如图 4.17 所示的是国外的一个关于水力压裂（天然气的一种提取手段）的视差网站。通过鼠标，用户可以经历水力压裂的不同场景，从而了解到水力压裂的加工过程和操作细节。通过这种视差的滚动和场景的切换，产生联想，从而更为轻松和简便的使用户理解一个复杂生化过程。同时页面采用的扁平化和矢量化的设计手法，使得整个页面活泼而又充满生趣，不会像是纯文字般介绍那样乏味和枯燥。
综上所述，通过对于交互手段的掌握可以使页面变得更为丰富和立体。多媒体的展现手段和方法，使作为信息载体的网页具有更为丰富的趣味形式和应用前景。
