第 3 章 基于认知心理学的趣味性网页设计原则
3.1 认知心理学在网页中的体现
认识心理学是从心理学延伸出的一个另一个重要的研究领域，并在传播后迅速得到领域内的认可。通过对知觉、注意、记忆、思维等认知方向的研究，以探求整个认知思维的心理过程。认知心理学从认知过程提炼出了认知过程的基本范式，即信息处理模式。并得出人的认知心理过程同信息处理的模式相似的结论。
而网页传达的过程，实际上就是一种信息处理模式的表现。由分析可知网页的构成形式与信息的编组和解析过程相类似，通过对认知过程中一些感知觉的基本要素的把握，结合网页主体进行布局和规划；通过对于网页主体的合理引导，以求帮助用户更加便捷和高效的寻找到相应的信息源，并使用户在整个浏览过程中准确的把握网站的主题逻辑，享受网站所传递出优质使用体验。从这些方面来说，了解和掌握用户在浏览网页时所产生的认知过程和行为反应就变得极为重要。可以预见的是网页的基本构成元素在这样的环境中并不是孤立的，而是有目的的引导用户的感知觉的浏览和认知。
举例来说，如图 3.1 所示的一款运动鞋的售卖网站，其实际上是由各种不同的视觉元素构成，包括产品，所配合产品展示效果的图形和字体，以图形文字为骨骼所搭建起的版式以及一些交互性质的点击按钮和超链接。由网站整体的点击热力图来可以较为明显的得知，用户在实际浏览网站的过程中，更多的点击方向其实着重于分销的各种类别的产品上，而并非首屏为了营造氛围的 banner 处。加上页面的 banner 处的视觉呈现并不吸引人，所以所造成的负面效果非常的显而易见。大面积的展示空间在页面中处于闲置状态，而实际却并没有真正的获得用户端的认可。因此设计师在设计网页时，最重要的点就是要根据用户最真实的认知体验去合理地规划布局。在这样的一个过程里，设计师并不应该占据“设计师"这个孤立的单位和视角，取而代之的是作为实际消费者的一部分参与设计和体验设计。并将自身的体验心得和经验，融入到页面的设计中来。另外通过对于认知特性的分析，设计师也可以利用色彩、版式、以及合理的交互手段构成吸引用户注意力的要素，并使得用户在浏览的过程中形成良好的感官刺激，并因此留下记忆。根据对于认知过程的掌握和理解，设计师可以了解到用户更为实际的需求点，并以此作与网站的诉诸点相结合，有效的将网页特性表现出来。
3.2 认知心理学引导的趣味性网页设计
由上述网页浏览过程中的认知心理行为的分析可以得知，网站的传输过程同信息的传输过程近类似并和用户的感知觉反应密切相关 .因此，基于认知心理学的网页设计要注意这样几个方面。首先，注意是认知过程中的一个重要反应，也是能在网页设计时相对容易把握的一个方向。因此，在整体的网页设计过程中注意是设计师不可忽视的首要对象。如何通过有效的组织页面上的视觉语言，如文字，图形，色彩，动画，交互效果等元素，使得页面可以先入为主获得用户的青睐，这些都是网页设计师不得不优先纳入思考的问题。除此之外，吸引用户的页面设计可以进一步的博取用户的好感。跟据现有理论分析可以得知，现今浏览网页用户大约可以分为有目的性和无目的性的两类用户群体。而针对两类群体特性的不同，也可以通过设计改变网站的视觉倾向。对于目的性较为明确的用户群体，网站的设计应该保证清晰明朗，着重表达网站主题；而对于无目的的用户，则可以通过网页自身所呈现出的视觉张力，来提高用户的关注度。进而通过良好的浏览体验，使用户对网页产生兴趣。
如果说注意力的吸引可以让用户在网站前驻足，那么合理的逻辑结构和页面层次，则是吸引用户继续浏览和使用的第二个不可忽略的方面。简单的来说，用户使用网站的目的归根结底是明确的。即使是面对并不了解的页面，也最终要从这个页面中找到自己所需要的信息，因此，一个优秀的网页设计应该能够通过明晰的页面结构，让用户体验到网站所要表达的核心，并且成功的引导他们获取相关信息。在这个过程中切记将用户的需求同网站的表达方式一分为二。用户应该是网页构成的一个部分。通过用户的构建和反馈，可以清晰的直到网站的改良方向。
最后不可忽视的是如今的网站虽然有许多相同的诉诸点，不同的诉诸点也有许多表达手法相近似的地方，但是每个网站依旧保持每个网站的特色。如表现体育运动的活力和硬朗，也可能用到某款男性化妆品的页面设计中去。某些典雅、高贵的奢侈品所采用的清新淡雅的页面主调，也可以运用到某款女性衣饰或是博物馆中所珍藏的某件藏品的设计中去。设计元素确实在某种程度上存在着相应的趋同性，但是网站设计归根结底是要表达出产品自身需要的同时，保证用户的实质性需求得以实现。而根据这些需求的差异不同行，也决定了网站风格和细节的不同。
3.2.1 知觉引导的网页趣味性探究
根据信息认知学的理论，所谓知觉就是指人脑对于作用于它的事物的一种最为本能以及直观的反应。通俗的讲也可以理解为大脑刺激的感知觉过程。因此，知觉的存在目的就是为了解释和阐述刺激反应的自身意义。知觉的刺激信息形式一般分为两个方向：所处的环境信息和感知觉者自身的体验过程。在网页设计的的整体范围里，大部分的信息来源通过感知角度获取，在这其中，视觉和听觉在网页浏览过程之中占据主导地位。这种作用于大脑本身的认知反应，不仅和基本的感官功能息息相关，同时也体现出外部环境与人类大脑链接的方式。知觉区别于其他的感知觉可以以一种可以自我选择的方式运行，并与人们主观所获取的相关经验，知识，以及所处环境等因素有关。作为最能体现知觉的视觉方面，也需要在积攒一定的视觉刺激程度时，才会促使机体本身发生相应的反应。
如图 3.2 和图 3.3 所示。两个网站呈现手法不同，所影响到整个网站的构建方式和感知觉体验也会是截然不同的。网站风格倾向于明星时尚性质的第一例页面采用了色彩对比极强的红黑两色。两种颜色在页面中激烈的碰撞使得整个页面在视觉表现上极具张力，硬朗的几何形体的块面划分，令网页看上去非常的棱角鲜明。更为重要的是，用户通过页面中所体现出的强烈视觉对比，可以切身的感知到时尚中所蕴藏的先锋气质，感知觉表达和以及相关信息的传递意图非常的准确明显。相反，在第二个页面中，整个网页的构成几乎是一个无色系的呈现和表达。
在这种对比度极低的感觉下，所传递出是一种非常安静和恬淡的视觉感受。构成页面的板块非常的集约，块面性的划分对所呈现的物品做了分类，但是并没有凸显出集合图形的块面感。另外，图片点缀的色彩以及网页文字的活用又使得页面充满了让视觉活跃的因素，不至于让整体的体验陷入空洞、无趣。
由以上两个网页的对比得知，网页在整体的视觉表现和构成时可以结合与页面中心的表达相吻合的表达形式进行合理的页面布局，以求将将网页信息更加完整的呈现出来。当然，作为设计师本身还要考虑到页面与相近页面的区别之处，以确保用户在相似的页面中依旧能够能体验到网页传递中，不同的个性表达。通过不同元素构建起足够的情感空间给用户的感知觉留下印象。
3.2.2 注意引导的网页趣味性探究
注意一般被理解为一定对象的指向与集中，这种过程通常产生在人的心理活动过程中。简单来说，注意的过程就是一种自我的筛选过程。它像是从众多的元素中筛选出自身需要的部分。因此是一种有选择性的信息加工形式。尤其对于当下来说，这种选择性的信息加工形式颇有意义。信息传输超载以及读图时代的到来，让许多值得关注的问题和信息被忽视掉；同类别的对比和过度竞争也让用户的注意力受到一定的干扰或是混淆。为了避免这些网页中的信息干扰，网页在构成上设置了许多功能性板块。其中搜索选择框就是最为明显的一种体现。用户通过不同的色块构建起的板块，选择自己感兴趣的新闻图片或是热点消息，或是通过这些点的注意链接到相应板块的领域，从而形成了一种信息加工后的稳定集中。
但不可忽视的是，在注意产生的过程里也同时受到一些条件的影响和制约，如个人的喜好，实施任务的动机等方面。不难理解的是如果一个人对某种事物充满好感时，对其爱屋及乌的过度反应，会影响到他对相关事物的关注程度。另外，也可以理解为相对急需解决的任务会迫使人变得更为集中和冷静，从而把注意力集中在一个问题上。从这些问题分析的过程中，可以提炼出，网页在吸引用户的注意力方面的着手方向。例如，许多游戏页面开始在网页端设计的游戏开始增加一些难度，通过一定的复杂操性来增添网站的粘性。然而不可忽视的是，理论上来说一个人对于某一个问题或事件的注意力集中时间不超过 45 分钟。所以在网页的设计在呈现这些注意力的元素时，应该有着合理的视觉化引导。碎片化的呈现方式又或是过度的使用注意力元素，长时间会造成用户的使用疲劳。
为了适应当今互联网所呈现出的的信息爆炸式增长和无局限性传播，网页设计应该衡量对于注意范畴内的展示数量和选择内容的把控，以适应现如今互联网所呈现出的信息膨胀和无局限性传播。使用者常在接收到两个或两个以上来源的信息活动时，发生注意力分散。（认知负荷理论）因此，在页面设计时，冗余的信息陈列或者不合理的布局都有可能造成不必要的认知负荷，在分散用户有限精力的同时，影响用户对主要信息的把握。换而言之，为了避免认知超载，保证用户浏览时注意力集中，在页面设计时应该把握这样几个维度：首先，尽量避免为了趣味性而趣味化设计。为了吸引用户兴趣所大肆添加的感知觉元素所营造出的网站氛围并不一定能让用户接纳和吸收，相反却可能喧宾夺主，影响到用户对主要信息的选择和判断。其次，网页中的引导方式，要有一个完整的起始逻辑贯穿始终，同时要保证相应逻辑的简洁性、易理解性，便于用户在短期内迅速了解和学习。
与此对应，碎片式的逻辑陈述容易造成信息传播过于分散，导致用户在浏览过程中出现选择困难或是信息遗失。另外，为了适应互联网的发展形势，页面的陈述布局上不宜使用过多的文字，或是纯图片的呈现表达。过多的文字对于用户容易造成一定的注意力上的压力，迫使用户注意力发生分散；而过多的图片则在视觉上给予用户过强的感官刺激。如果没有合理的引导逻辑，也容易使得用户注意力涣散。因此，在页面表达应注重二者的结合。相得益彰的图文配比，是一个好的网页的最基本的前提。最后，在网页过程中，样式丰富的交互效果和方式，也容易在浏览过程中造成一定的注意分散，因此在网页设计时也要合理的利用这些交互效果，尤其应该注意一些特殊链接和点击 button 的合理位置。例如天猫购物商城在等待页面刷新时，常有一些底层的主题图片凸显出来。这样的一种反向利用注意力的设计，不仅为页面本身增添了一些趣味性的成分，同时也让用户在实际等待的过程中会因为这一点别样的体验而驻留更多时间。从客观角度来说，天猫的这个细节设计并不属于上述几个原则里所说的添油加醋的设计，而是巧妙的利用网页本身的特性为其增添关注度。
这里需要强调的一点是，随着计算机技术的不断提升，网页的元素也不断丰富。尤其是多媒体应用在这点体现的非常明显。很多网页设计师为了表现网站的丰富性而大量采用 Flash 和音频元素来构建网页。
一旦整个网页上呈现过多的碎片化的视觉语言最为直接的后果就是导致用户的认知超载，令页面在某种程度上失去了注意力的主体。从这个角度上来说，多媒体的有效使用的确避免了这样一个认知弊端。所以眼前网页上通过边框，色域，图形的 GIF 样式作为页面的点缀方式。动态交互的表达方式随着近两年视差网站的兴起而迅速发展。许多页面在点击效果前都有类似交互的动态效果提示。人性化的改变，一方面从行为上吸引用户注意，引导用户有效点击；另外一方面也从人机交互的角度给予用户关怀。用户所对应的机器其实是“通人性”的。因而产生心理上的依赖感。但是过多的媒体元素过应用亦会导致注意力一定程度的偏移和分散。用户可能会把更多的精力放在这些酷炫的特效上，而忽略了本来要关注的要点。
总之，网站在构建之处应该完整的勾画出页面逻辑，分析出吸引用户的注意点和注意方向。通过这些细节和点引导用户快速的找到所要讯息，并将主要问题集中起来。毕竟用户的浏览习惯和本能需求才是网站设立的初衷。合理的版式，明晰的导航，干净利落的气氛渲染以及对细节上的把控，这些都能使得页面的层次变得更加鲜明，易于被用户接受。
3.2.3 记忆引导的网页趣味性探究
作为一种与生俱来能力的记忆，简单说来就是可以把从环境中提取的基本信息在大脑中贮存一定的时限。同时根据自身的需要对于这些信息进行随时的抽取和调用。作为经验存留的一种方式，记忆可以通过记忆自身的存储过程反应出曾经的经验在未来问题发生时所表现出的作用。记忆类似信息的加工过程，这其中包涵了信息的编码，存储，提取和转化的各个阶段。同时根据记忆的时效性不同，又可分为瞬时记忆、短时记忆和长时记忆三种记忆形式。
瞬时记忆凭字面意思便可知这种记忆的时效非常短。它几乎是一种刹那间所形成的记忆印象或是感觉记忆。它的形成过程几近于人体本能的需求和反应，即通过外界对于感官的直接刺激，从而不产生任何信息加工从而存储在大脑之中。
这种记忆特性常被用于视觉元素的表达中。例如许多电商网站在网页的布局上会留出一大块空白区域用来做首屏的视觉轮播。轮播图片在插件的控制下其实有一定的反应时间，但是在瞬时记忆的作用下，用户会觉得这些轮播图其实是连接在一起的。同时应注意到，对于首屏这个轮播的位置很多设计师都使用色彩艳丽或者是色调非常鲜明的图片或者背景。因为根据数据分析，人类对于视觉信息的接收时间约为 200-300 毫秒，所以视觉对比强烈的图片可以在这个短暂的时间点内促使用户发生记忆反应，从而诱发用户点击页面。
而第二种记忆形式，短时记忆的主要来源主要是瞬时记忆。如果说瞬时记忆是原材料，那么短时记忆就是粗加工。短时记忆通过将瞬时记忆部分消失前的元素集结起来，做二次的信息加工。根据美国心理学家乔治·米勒（George Miller）提出的短时记忆基本由 5 到 9 个组块单位构成，这些组块单位一般由数字、单词、字母等元素充当。无论这些基本组块单位以如何形式存在，它们仍需通过感知觉的认知过程进行组合和重构，并将通过信息加工成为短期记忆。短时记忆之所以被称为短时记忆因为其时效周期非常短。如果短时记忆无法进行下一步的转化，那么存在的时间大概也就 30 秒的时间。这样对于网页设计师的挑战也就陡然增加许多。用户一般的视觉焦点落在网页的什么位置？关键部分用什么色调或者版式来表达主题和中心思想？设计师必须通过对手中视觉原色的构建，将网页元素转化成易于被用户吸收接纳的认知信息。
最后一种记忆形式是长时记忆。如同上文陈述的那样，长时记忆是瞬间记忆的原始材料，经由短时记忆的二次加工，再经由长时记忆的精加工最终被长久的储存在人们的大脑之中。可以看出，长期意义的存储过程存在着一定的周期性和复杂性。区别于瞬时和短期的粗加工形式，长时记忆的层次和深度也要高于前两者。所以它的贮存对象一般是个体在认知过程中的经历和体验，甚至对于某种经历体验后所形成的观念或是从中获取的知识。因此不同于前两种记忆形式，长时记忆的存储范围更大，可以加工处理的信息更多。但是记忆的特点就是总有遗忘空间。虽说是长时记忆，但是也会有遗忘周期。与此同时，长期记忆同短期记忆互相转化。因此在网页的设计工程中，设计师需要归纳出这三种记忆模式的特点，通过将信息源的简化和拆分，将原本复杂的信息组合拆分成基本的元素和单位，力求把所要展示的信息化繁为简，去粗取精的提炼出来，使得用户的记忆更为容易消化和吸收。另外设计师也可以针对用户性别的不同来掌控记忆的方式，如男性更倾向于语义性质的逻辑概述，而女性则更倾向于叙述式的表达方式。所以在针对这些不同的时候，网页的页面应该要控制页面的布局形式和逻辑。
3.2.4 情绪引导的网页趣味性探究
基于情感因素所表现出的情绪化反应是网页呈现方面最为直观的体现，同时也是用户在浏览过程中的认知心理需求和最为本能的行为反应。根据认知心理学的理论研究发现，情绪和情感的传递过程对于整个认知心理过程的反作用十分巨大。很久以来的西方哲学观念就把感情和情绪归结为不稳定，非理性和无逻辑的因素。而与之相反的认知，却是相对稳定，理性且符合逻辑性的。情感和认知的长久对立在一定程度上夸大了认知的作用而忽略了情感以及情绪对于认知作用中的影响。社会对于更为理智的认知态度的青睐，也从另一方面遏制了基于人类原始需求和情感的表达。实际上认知和情绪互为依存，不可分割。既不能剥离情感和情绪的因素而单独的分析认知过程，要知道处于原始本能的情绪和情感表达往往通过潜意识的影响到认知作用；另一方面，通过对情绪和情绪化的掌控，创造出符合氛围的情景，也可以趋利避害的将情感合理的运用到认知过程里。如一些富含联想画面的图像和音效，通过对于环境的渲染，诱发这些并“不稳定”的情感有一定的满足和表达的窗口。总而言之，认知成分以及情感成分的结合构成了人们所做的一切行为和活动的根本。“认知部分评价意义，情感系统评价价值。”
回归到网页设计中，网页从自身来说并不存在什么情绪。它们所谓的情绪实际上都是由设计师赋予的。为什么有些网站在浏览时能感受到温暖和温馨，而有些网站却给人带来一种劲酷，冰爽的感觉，其实都是由网页中所表达出的情绪所传达出来的。也就是说设计师通过设计的手段，结合认知过程可以使得页面更贴合用户的自身情绪。而这些所表达出的情感传递所形成的情绪，或多或少的会影响到用户对于产品的感知和认同。对于设计师而言如何抓住用户的情感表达方式，以及传递符合情理符合情景的网页气氛尤为重要。不能说这些页面都有统一的设计表现手段和方法，针对不同的页面情感表达的侧重点的不同，所表现出的页面情绪也是决然不同的。
如图 3.4,在雅安地震时，重庆时报在两版网页单版的设计时采用海报感的表述方式，页面上砂砾，泥土等视觉元素很清晰的告知浏览的用户发生了什么，色调上面并没把黑色当为背景色烘托，因此整个页面的表述并无压抑和昏暗之感。留白的地方，让人觉得有希望存在。整个页面所传递出的人文关怀非常的准确。
诺曼曾在书中提到过：“美观的物品更好用”.不难构想这样的一个问题，美观的产品所带来的良好的情绪作用和用户体验，要比相对应的那些产品的体验感和可操作感要强。其实在这整个的感知过程里，物品所传达出的使用情绪和眼下所探讨的网页所表达的使用情绪是一致的。通过明确的情绪和目的动机的表达，可以抓住用户的情感需求，使页面在表述上更贴近用户需要，也更具感染力。
