第 5 章 案例分析和个人网站设计
5.1 个人网站概述
个人网站作为众多网站中的一种表达方式，其形式更为丰富和灵活。同一般的网页比较，个人网站除了同普通的网站一样保持了域名、程序、后台等基本的建站基础外，更重要的是网站的呈现内容全由建站人自己布局和部署。因此个人网站不仅成了如今各大领域的娇宠。无论是社会名流，还是普通小众，都可以通过构建个人的网页来展现自己的喜好和特点。
作为个性展示的平台，个人网站并没有跳脱网页设计的基本范畴。之前文本中所探讨的关于认知心理学的分析和研究都可以在建立个人网站时提供一些建设性的意见和帮助。换而言之，通过对于用户浏览网页时的认知心理学的分析可以更加准确的把握个人网站中所应该着重表现和强调的表述核心，通过合理的页面逻辑和布局来完善个人网页，并传递出相应的情感氛围和趣味体验。
本文将着重通过设计师的个人网站作为研究探讨的对象，通过具体分析个别设计师的个人网页的页面布局，构成方式结合上文的理论支撑，完成自我的设计实践。
5.2 设计师个人网站设计分析
作为设计群体，设计师（或设计群体）网站中的表现个性的精神和欲望更加明显。因为设计师所拥有的设计天赋和语言相较于其他领域更加丰富，因此他们对于个人页面的整体呈现把控性更强，所呈现出的网页具有极强的设计色彩和趣味感，让用户印象深刻。
同时我们应该注意到，设计师的个站目的不仅是为了展示自己的作品，更重要的是设计师把自己的个站当做一份灵活的简历或公司资质说明。因此无论个站页面的视觉语言怎样丰富，视觉效果怎样怎样强烈，它始终不能忽略页面的主体逻辑。符合认知心理学的网页浏览行为，应是其所遵循的本所在。
1、 PIXEL
PIXEL是一家设计机构的服务行网站。这个设计事务所性质的网站的业务包涵了数码制品设计，印刷品设计，品牌形象设计，其几个大类别下又有相应的细分。网页的结构和布局和传统理解上的布局有相同之处，但不同之处更为明显。本文主要从设计的角度来分析网站的结构构成和流程导向，并探讨如何在这样一个带有商业性质又包涵个性化的网页中体现趣味性。、PIXEL 网页通体使用了黑色的底板作为背景。扁平化的设计，使得整个页面显得年轻而不至于老旧，黑色同降掉饱和度的红色和绿色的搭配所给人的感觉又稍微带上一些复古的成分。初识网站的大体感觉如此，网站第一印象的与众不同似乎是抓住了用户的眼球，接下来我们可以从细节上进一步探讨页面构成的合理性。
从网站最先印入眼帘的主题 logo 和导航来说，网站其实一上来就展示了许多细节。网站的站标 PIXEL 是字体与图形结合的设计呈现。如果仔细看会发现，黑色的背景并非由纯色的黑色，而是加上了带有肌理的纹路。基本构成的导航结构并没有大的变化，值得一提的是，网站是一个艺术和商业相结合的，对于用户体验流程要有非常准确的把握，作为一个视觉流程自上而下的呈现表达，一个简明的网页题头其实已经准确传递出了相应的网站信息。图形同文字构成的导航栏的组合相得益彰，不显得过分单调。
网页在衔接上选用了图形和文字的构成方式。关于 PIXEL 自身的介绍，网站并没有采用大量的文字介绍的形式，而是通过富有趣味性的扁平化的插画设计来表达网站的目的。这些插画从某些角度上看来是在表现网站的目的，但从网站的整体构成上来说又起到了一个吸引用户注意的作用。对于整体版面的构成方式起到一个点睛的作用：即在具体的公司项目的介绍上，通过简单的图形使得用户快速的得知网站所要表达的信息。这些短期的记忆形式一旦引发用户的好奇心之后，也容易形成长期的记忆反应。
另外在网站的整体布局上，设计师多采用图形语言取而代之文字的介绍和叙述，这在页面上呈现出的感觉就是界面变得额极度简洁，用户在浏览这样的页面时，不至于迷失忽略主体方且目标明确。
在案例分析时已经简单说明了网站的色彩布局。但是这里要着重强调的是，网站色彩的选择，直接从视觉感官上给所有的用户最为直观的感受。诚如文中所提到的人们的第一印象，反映出的是直觉最为原始的反应。网站通过大面的黑色呈现，加上红绿白三色的点缀使得页面不至于单调，红绿的互补色的应用使得页面始终有种跳跃的活泼感。自上而下的页面逻辑顺序，使得页面浏览和阅读并不存在什么障碍，体验感非常的流畅。重点主次的区分也非常明显。
2、YUNAKIM 个人设计师网页
YUNA KIM 个人网页设计是本文探讨的第二个实际案例。区别于上一个偏向于事务所性质的设计网页，YUNA KIM 的个人网页因为主要是表现设计师的个人作品为目的，不涉及过多的商业性质，因此网页所呈现形式更加的丰富并且富含个性。网页结合了交互特色使得页面的体验感更加鲜活。别样的构成方式也与其他网页与众不同。
点击近 YUNAKIM 的个人页面后便可以一目了然的得知页面的不同。整个页面在构成时选用了三个最为让大众所熟悉的图形：正方形、圆形、三角形。三个图形的本身就蕴含了极强的构成感。对于设计师来说，三个图形的表现又不仅仅止于表面的构成感。
虽然是个人网站的页面布局，网站在基本风格上依旧保持了非常简洁的页面布局。包括页面的主体站标和图形元素，都保持了相应的引导功能。仔细探究细节，可以发现网站所选用的三个图形，都有着自己对应着相应的作品方向。如方形所对的是数码作品，三角形和圆形代表着品牌设计和印刷设计。网站的图形语言非常丰富，导航栏在鼠标触动后会有准确的目的提示。在认知心理学中我们得知，人对于图形的感知能力比较强，尤其是对于记忆方面，更容易被形象化易于记住。除此之外，网站的交互语言十分丰富这也使得整个页面在视觉呈现方面非常具有细节感和节奏感。
网页采用了 HTML5 的计算机语言构建，所以所呈现的交互特效也非常值得人玩味。如图分别是当鼠标触碰到相应区域所引起的变化。在站标处会有一个简单的下滑，网站设计师的个人信息会从整个页面的顶部下滑下来。这种掩藏的信息经会给人带来一种趣味感和好奇心。
总结以上两个案例可以得知，无论网站的设计出于什么目的，最终的过程都是都是通过用户完整的认知过程对于网站的编排信息进行解码，并通过认知过程的辨别，加工和处理，最终形成终极的认知体验。而两个网站很好通过视觉的形式将网站中的图片，文字等信息元素进行综合处理，结合页面中的版面构成，色彩构成，以交互手段作为衔接方式，使得用户在使用这些网站时，容易被这些呈现出的效果所吸引。并从反思层次给予网站表现加分。
5.3 拟定网站方向和主题
通过本文从认知心理学角度的多重分析以及基于认知心理学相关方法的网页设计方法论的总结，最后一节笔者将通过自我的实践研究来探究趣味性网页的表达，同时也通过设计实例对前文加以验证。
诚如前文所提到的个人网页设计作为众多网页设计的一种，极具个人特色，所能表达的情感元素更加丰富，所展现的维度更加的多元。因此更需要设计师在设计之初对于网站的整体流程做好规划。结合本章提到的两个案例，结合自我的网站构思，本章的设计流程主要如下：
如文中论述可知，个人网站根据展现内容的不同，呈现的方式也不尽相同。
文中的设计实例是以作者即将面对就业的应聘者身份所准备的个人网站设计。网站建站核心是偏向展示设计作品和设计思维的一种简历式网站设计。以此为基础的建站核心，应该把控在突出自我在学习和实习期间的表现为首要，并将一些实际的设计实践项目和所完成的设计作品作为重点内容穿插其中。比较上一节所提到的两个个人性质的设计网站个案，自我实践环节的个人网站设计最重要的是对于信息量的把控。考虑到各个公司的人事对于求职者的简历阅览呈现正处于饱和状态，而丰富而又饶有趣味感的网页组织方式，不仅可以使页面的整体逻辑看上去更加清晰，也不会给阅读者造成阅览负担；展示信息的分解和转化，易于被浏览的用户吸收和识别。另外通过对于用户浏览网页时的认知心理过程分析，可以结合知觉，注意，记忆等相应的感知觉要点所反映在设计上的要点做归纳分析。
以此作为建站的方向和参考特点。
5.3.1 网站的布局构思和模块划分
建站之前首先应该明确，设计一个简历性质的个人网站的落脚点在哪里。作为一个介绍性质的网站，其介绍性质是最根本把握的特性之一。因此在页面规划时，笔者个人选择采用了扁平化的设计风格，通过简洁的色块对比以及明晰的版面划分，以降低其他的视觉噪音对于页面主体的影响。一开始就铺陈大量文字和图片的效果，往往使得浏览者过于被这些花哨的视觉元素吸引，而忘记浏览网页的主要目的。因此在设计这样的个人网站前，首要掌握的就是省略一些不必要的文字和图片。根据克拉克在《Don't make me think》一书中提到的第三定律，网站可以采用间接有力的文字来凸显出主题。通过对人们浏览网页时的认知心理行为的归纳分析可知，用户对于网页承载大量文字的接受率和转化率极低。而简洁又富有节奏性的文字则在页面中起到完全不同的作用和效果。通过文字的精简可以有效控制视觉空间，凸显主题。其次，在网页的整体背景图形的使用上不宜过于花哨。背景的作用其实就是为了烘托出主体，因此扁平化的风格恰好避免了这个问题，将界面形式极度单一化和极简化的设计，不仅可以有效的避免信息的冗余，使主体更为明显，同时也有利于引导用户相关操作。最后，不应忽略扁平化的设计风格里有关图形语言的使用。如上所述，合理的图形语言的信息转化形式不仅可以简化页面中不必要的文字信息，也可以使页面更加具体形象，易于识别且具有一定的趣味性质。
5.3.2 网页模型的构建
根据前文的分析和阐述，以及对于网站整体风格上的把控，结合具体的个人信息元素就可以开始进行个人网站的模型构建。网站的模型构建的目的在于更为直观的呈现展示内容和主体逻辑。在规划网站的模型时可以调节和把控网站所要展示的要点，另外根据网站设计风格的不同可以注重一些网站细节部分的搭配。
如扁平化的风格就应该区别注意矢量图形的应用，在阴影上应该使用斜阴影的表现效果。网页的高保真原图呈现效果如下：
整个个人网站的设计风格以扁平化作为切入点，结合着扁平化的表现特点，利用 HTML5 代码集成所实现出鼠标滚屏效果，将以个人的简历信息为主体逻辑的网页框架建立起来。页面的一个最主要的特点在于个站取消了固定区域的导航结构，以取而代之交互提示以及特殊 icon 的切换来做相应介绍的板块划分，并由此引导出一些视觉焦点。页面在色彩的选用上，并没有采用过于鲜明的色彩对比。
相反，相近色的纯度对比使得页面在展示上更为的轻快，信息的主题也有点有面，不至于让用户感到乏味和单调的不良情绪。网页在整体的版面设置上，可以保持了较高的版面率，目的也是为了方面用户轻松阅读。在交互层面上，结合者网页语言所形成的滚屏动效，使页面在使用中的层次更加丰富，体验上也更具备趣味感。
