3.3 基于认知心理学的趣味性网页设计原则
本章在上一节提到了用户在网页浏览和设计时的一些具体认识反应和影响，并从这些具体分析中得知，网页的设计同其他的设计形式虽有一定的相似性，但又有特殊的规律可循。网页设计的表述方式更为直接，所传递的信息范围广，数量大。网页中情感化的传递和趣味性表达，不仅仅是简单的效果叠加，而是在保证性得到良好体现的同时，所做的网页设计细化和改良。因此，在网页页面设计时，首先要确保网页自身的定位准确，不仅要把握住页面主体逻辑的清晰，也要保证与之相关的页面形象的统一性；此外，在交互语言的使用上应该合理、恰当，避免过分的交互效果对于页面功能的干扰，从而影响页面的体验效果；同时，也要保证网页的灵活性和自由度的拓展空间，让网页拥有一定的个性表达的能力。
简而言之，网页设计应该以定位精准，统一易用，交互体验和彰显个性这四个方面有着准确的把握，并在保证基本功能的同时遵循这些原则进行设计。
3.3.1 主体定位
网站的主题和主题逻辑是网站制作的最为根本的呈现。网站的主体确立了网站的调性和风格。试想一下当网站的主体定位不同对于网站整体的设计会有怎样的影响？针对儿童风格的卡通玩具售卖的网站同成年人的购物网站的区别不仅仅是因为网页所体现的氛围和格调，更重要的是浏览网页时所给人带来的不同体验。
即使同样一个购物平台，对于不同区域的呈现方式和所传递的信息也会有所不同。例如洋葱设计公司对于一款针对儿童的“大青蛙动动乐”亲子游戏介绍网站的设计。
如图 3.5 所示，设计师不仅要考虑到低龄儿童的阅读习惯和特点，也要准确的把握当成年人作为陪同参与其中时，对于这款游戏的整体把控。所以网站在定位上有两个维度，并且这两个维度存在着相互交叉的成分。洋葱设计事务所在处理这个网站的维度问题上，牢牢把控网站的基本格调。首先他们有效的控制了网页的版面率，大量的留白保证了这两类人群对于产品主要信息集中关注和理解，同时，一些自然化的交互特效，保证了网页的灵活度和自由性，主题色彩选择了令人并不陌生的中性色彩--绿色，并且贯穿页面始终，结合着产品所特有的颜色，所以整个网站看上去主次分明，尤其是偏向儿童的主题色彩极为突出。
从这样一个多维角度的网站设计上可以看出，网页对于用户的第一印象极为重要。很可能在短暂的几秒之内就决定了一个网站的“生死”.定位准确的网站往往在这短暂的几秒钟的时间内，把握住用户的命门，找到吸引用户注意和眼球的途径，使得用户对于网站的整体氛围有着不同以往的印象，从而诱发用户的情感共鸣，进一步印证了网站主题的合理性和准确性。
3.3.2 整体把控
在网站的主题风格确定下来之后，第二个重要的方向就是跟随着网站主题基调所铺陈出的整齐划一的主题风格。要知道优秀的网页设计主体形象同企业所尊崇的 VIS 识别系统一致，统一整体的视觉规范会传递给用户非常直观并且准确的感受。网站的导航栏，首屏高度，使用的基本色彩的调性，以及不同板块的搭配和组合形式等因素都有着非常严谨的统一规划。例如最为常见的电商购物网站如图 3.6 所示的唯品会网站为例。
唯品会的主页设计是网站整体性表达最为标志的几个网站设计之一。无论网页布局如何根据网站所售卖的产品进行调整，唯品会所采用的标志性的粉色标准色可以迅速的在用户中形成具体的形象认知。除此之外，区别其他购物网站的一些 UI 设计，唯品会在图标的设计上更为精细和与众不同，波浪形的图标边框独树一帜，于是图标与主体色相得益彰的成为网页辨识度的一个重要标志之一。除此之外，整个页面的标题栏，导航栏，以及首屏轮播的画面在页面上所呈现出的位置，都是经过合理的安排和计算；在页面的跳转时也能及时掌控页面的主体色调的延续和迁移，这样做的目的就是为了能够突出自我的品牌形象，使用户在情感上形成先入为主的意识。
网站页面设计的整齐划一，一方面可以牢牢的把握住用户的注意，另一方面也在传递给用户一种更为专业的品牌意识。这一点的传播效应同企业识别系统所要表达的效果极为一致。
设计师在注重网站整体整体统一的设计风格时，也不应该忽视了网站的易读和易懂性的把握。一个网站可能结合了各种的表现手法和呈现方式用以吸引用户的注意力和关注度，但是作为作为网站自身，应该保证其最基本的功能--易懂性。要做到网页易于被用户理解，一方面在于网页布局上的合理引导，如导航以及搜索框的位置摆放，以及一些隐藏交互按钮的位置设置，另一方面，在于网站中所采用的文字，音效以及多媒体技术等元素是否富有贴近和符合用户的使用“语境”,以便于使用者接受和理解。
3.3.3 交互表达
交互体验是以人为本的设计核心最为重要的体现方面。通过计算机技术所构建起的良好的交互环境可以为网页搭建起更为自由和富有生命力的呈现方式。合理的运用技术可以有效的达到吸引用户的注意力，顺间提升用户对于页面呈现的好奇心和兴趣度，从而增加用户在页面停留的时间。通常的交互手段包括，文字，图片，音频，视频等多媒体手段。随着计算机语言的不断拓展 HTML5 语言也被广泛的应用到现在的网页设计中，并起到了非常令人惊喜的效果和成就。
如图 3.7 所示，“疯字形-文字艺术创作展”是一个以亚太语言环境下，互联网时代对于对于汉字的一种重新解读和视觉构成的“文字”主体展览。展览的方向包含了艺术设计的众多方面。而回归到这个展览的宣传网页本身的时候我们却发现，其首页的表达方式却是一种极其富有趣味感的表现手法。
当用户手中的鼠标在点击页面上时会发现页面上所显现的汉字的“字”字发生了结构上的重构和组合；随着鼠标移动的方向不同，字体所被“切碎”和重组的方向也不相同。这个利用 HTML5 实现的网页交互效果，不仅营造出了宣传主题性质的交互体验，同时也将观者带入这次展览的主题之中。汉字的结构和笔画之间本来就有一种天然的美感，鼠标无意识的打碎重组的这个字形正像是当今在互联网和各种新型载体不断兴起的过程里，对于汉字不懂角度的理解和解构重组的体现。
除此之外，当预览展览的平面海报时，会对网页的交互效果会有着更为深刻的认知体验。对于相对较为静态和平面的表现手法，网页的交互效果起到了一种衔接作用。这种认知体验甚至突破了空间和感官的限制，令人过目难忘。如此可见，好的页面呈现需要技术与艺术的相辅相成。
虽然计算机提供的技术支撑可以为网页设计带来许多新的体验和视角，但是却不能因为过分夸大这些技术而忽略了网页本身所要传递的信息和所要表达的情感。技术的变革始终应为网站的主题内容服务。同时也应该考虑到国内的网络环境，例如许多页面呈现过多的视频文件，音效背景和图片动效的时，无疑会影响到网页的加载速率，在网络环境不佳时极易导致页面加载过慢或是页面崩溃，不仅没有起到吸引用户注意的作用，反而影响用户的体验效果。综上所言，技术与设计的结合需要一定的灵活度，也要有个临界点。任谁也不能凌驾于谁之上，二者相辅相成才能使页面呈现出更佳的视觉效果。
3.3.4 个性呈现
区别于之前的网页设计。现今的网页所担当的不仅仅是信息传递的媒介，同时作为企业或是公司形象的推手，希望给予用户一些不同以往的感受。所以如今的网页设计更追求的是一种个性以及特立独行的一种视角。记得从苹果产品开始售卖的开始，苹果网站就被作为业界的网页设计标杆，被广大用户和设计师所喜爱和认可。简洁的板块构成，清晰有序的页面布局。大量的留白使得页面干净整洁，却不失格调。而苹果所追求的那种极致和典雅的精神也被蕴藏在这个网站中被用户所接纳和熟知。
而国内一些品牌也在诸如苹果的网站设计基础上加以拓展和创新，使得整个的电子产品的网站都有着自我个性的凸显。如图 3.10 所示，可以看到锤子手机的官网同苹果官网的设计上存在着许多相似之处。其在秉持着苹果官网的简洁和大气的网页特色的同时，对于版面率的控制以及对于手机产品的展示程度都有着非常准确的把握。但仅仅如此，似乎还不足以凸显锤子官网的特点。网页在设计时，采用的视差分屏处理手法。即在鼠标滚动滚轮的时候，页面上的手机产品也会随页面的切换而更叠交替。而这种黑白的交叠使得页面看上去更有水墨韵味。既表达除了产品需要，也体现了锤子手机所宣扬的“极致”情怀。
除此之外在网页在网页导航的设计上，两个网站都选择了尽量避免复杂的导航形式。锤子手机官网通过具体页面的呈现变换不同导航的形式，使得整个页面在布局整体中又不失灵活，从细节上打动用户。
如此可见，网页中设计个性体现是必不可少的要素之一。在如今互联网飞速发展的今天，个性突出，特点鲜明的网站更容易脱颖而出。从另一个角度来说，大量网站的呈现出的趋同性也需要设计师在网页设计中体现出自身产品的与众不同。因此，合理的把握网页个性结合主题，从细节和方式上打动用户，也是当今网页设计的一条革新之路。
