案例分析和个人网站设计,网页设计论文.docx

《案例分析和个人网站设计,网页设计论文.docx》由会员分享，可在线阅读，更多相关《案例分析和个人网站设计,网页设计论文.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、案例分析和个人网站设计,网页设计论文本篇论文目录导航：【题目】【第一章】【第二章】【3.1 3.2】【3.3】【4.1 4.2】【4.3 - 4.5】【第五章】 案例分析和个人网站设计【总结/以下为参考文献】 第 5 章 案例分析和个人网站设计 5.1 个人网站概述 个人网站作为诸多网站中的一种表示出方式，其形式更为丰富和灵敏。同一般的网页比拟，个人网站除了同普通的网站一样保持了域名、程序、后台等基本的建站基础外，更重要的是网站的呈现内容全由建站人自个布局和部署。因而个人网站不仅成了如今各大领域的娇宠。无论是社会名流，还是普通小众，都能够通过构建个人的网页来展现自个的爱好和特点。 作为个性展示

2、的平台，个人网站并没有跳脱网页设计的基本范畴。之前文本中所讨论的关于认知心理学的分析和研究都能够在建立个人网站时提供一些建设性的意见和帮助。换而言之，通过对于用户阅读网页时的认知心理学的分析能够愈加准确的把握个人网站中所应该着重表现和强调的表述核心，通过合理的页面逻辑和布局来完善个人网页，并传递出相应的情感气氛和趣味体验。 本文将着重通过设计师的个人网站作为研究讨论的对象，通过详细分析个别设计师的个人网页的页面布局，构成方式结合上文的理论支撑，完成自我的设计实践。 5.2 设计师个人网站设计分析 作为设计群体，设计师或设计群体网站中的表现个性的精神和欲望愈加明显。由于设计师所拥有的设计天赋和语

3、言相较于其他领域愈加丰富，因而他们对于个人页面的整体呈现把控性更强，所呈现出的网页具有极强的设计色彩和趣味感，让用户印象深入。 同时我们应该注意到，设计师的个站目的不仅仅是为了展示自个的作品，更重要的是设计师把自个的个站当做一份灵敏的简历或公司资质讲明。因而无论个站页面的视觉语言如何丰富，视觉效果如何如何强烈，它始终不能忽略页面的主体逻辑。符合认知心理学的网页阅读行为，应是其所遵循的本所在。 1、 PIXEL PIXEL是一家设计机构的服务行网站。这个设计事务所性质的网站的业务包容了数码制品设计，印刷品设计，品牌形象设计，其几个大类别下又有相应的细分。网页的构造和布局和传统理解上的布局有一样之

4、处，但不同之处更为明显。本文主要从设计的角度来分析网站的构造构成和流程导向，并讨论怎样在这样一个带有商业性质又包容个性化的网页中具体表现出趣味性。、PIXEL 网页通体使用了黑色的底板作为背景。扁平化的设计，使得整个页面显得年轻而不至于老旧，黑色同降掉饱和度的红色和绿色的搭配所给人的感觉又略微带上一些复古的成分。初识网站的大体感觉如此，网站第一印象的与众不同似乎是捉住了用户的眼球，接下来我们能够从细节上进一步讨论页面构成的合理性。 从网站最先印入眼帘的主题 logo 和导航来讲，网站其实一上来就展示了很多细节。网站的站标 PIXEL 是字体与图形结合的设计呈现。假如仔细看会发现，黑色的背景并非

5、由纯色的黑色，而是加上了带有肌理的纹路。基本构成的导航构造并没有大的变化，值得一提的是，网站是一个艺术和商业相结合的，对于用户体验流程要有非常准确的把握，作为一个视觉流程自上而下的呈现表示出，一个简明的网页题头其实已经准确传递出了相应的网站信息。图形同文字构成的导航栏的组合相得益彰，不显得过分单调。 网页在衔接上选用了图形和文字的构成方式。关于 PIXEL 本身的介绍，网站并没有采用大量的文字介绍的形式，而是通过富有趣味性的扁平化的插画设计来表示出网站的目的。这些插画从某些角度上看来是在表现网站的目的，但从网站的整体构成上来讲又起到了一个吸引用户注意的作用。对于整体版面的构成方式起到一个点睛的

6、作用：即在详细的公司项目的介绍上，通过简单的图形使得用户快速的得知网站所要表示出的信息。这些短期的记忆形式一旦引发用户的好奇心之后，也容易构成长期的记忆反响。 另外在网站的整体布局上，设计师多采用图形语言取而代之文字的介绍和叙述，这在页面上呈现出的感觉就是界面变得额极度简洁，用户在阅读这样的页面时，不至于迷失忽略主体方且目的明确。 在案例分析时已经简单讲明了网站的色彩布局。但是这里要着重强调的是，网站色彩的选择，直接从视觉感官上给所有的用户最为直观的感受。诚如文中所提到的人们的第一印象，反映出的是直觉最为原始的反响。网站通过大面的黑色呈现，加上红绿白三色的点缀使得页面不至于单调，红绿的互补色的

7、应用使得页面始终有种跳跃的活泼感。自上而下的页面逻辑顺序，使得页面阅读和阅读并不存在什么障碍，体验感非常的流畅。重点主次的区分也非常明显。 2、YUNAKIM 个人设计师网页 YUNA KIM 个人网页设计是本文讨论的第二个实际案例。区别于上一个偏向于事务所性质的设计网页，YUNA KIM 的个人网页由于主要是表现设计师的个人作品为目的，不牵涉太多的商业性质，因而网页所呈现形式愈加的丰富并且富含个性。网页结合了交互特色使得页面的体验感愈加鲜活。别样的构成方式也与其他网页与众不同。 点击近 YUNAKIM 的个人页面后便能够一目了然的得知页面的不同。整个页面在构成时选用了三个最为让群众所熟悉的图

8、形：正方形、圆形、三角形。三个图形的本身就蕴含了极强的构成感。对于设计师来讲，三个图形的表现又不仅仅止于外表的构成感。 固然是个人网站的页面布局，网站在基本风格上还是那样保持了非常简洁的页面布局。包括页面的主体站标和图形元素，都保持了相应的引导功能。仔细探究细节，能够发现网站所选用的三个图形，都有着自个对应着相应的作品方向。如方形所对的是数码作品，三角形和圆形代表着品牌设计和印刷设计。网站的图形语言非常丰富，导航栏在鼠标触动后会有准确的目的提示。在认知心理学中我们得知，人对于图形的感悟能力比拟强，尤其是对于记忆方面，更容易被形象化易于记住。除此之外，网站的交互语言特别丰富这也使得整个页面在视觉

9、呈现方面非常具有细节感和节拍感。 网页采用了 5 的计算机语言构建，所以所呈现的交互特效也非常值得人玩味。如此图分别是当鼠标触碰到相应区域所引起的变化。在站标处会有一个简单的下滑，网站设计师的个人信息会从整个页面的顶部下滑下来。这种掩藏的信息经会给人带来一种趣味感和好奇心。 总结以上两个案例能够得知，无论网站的设计出于什么目的，最终的经过都是都是通过用户完好的认知经过对于网站的编排信息进行解码，并通过认知经过的识别，加工和处理，最终构成终极的认知体验。而两个网站很好通过视觉的形式将网站中的图片，文字等信息元素进行综合处理，结合页面中的版面构成，色彩构成，以交互手段作为衔接方式，使得用户在使用这

10、些网站时，容易被这些呈现出的效果所吸引。并从反思层次给予网站表现加分。 5.3 拟定网站方向和主题 通过本文从认知心理学角度的多重分析以及基于认知心理学相关方式方法的网页设计方式方法论的总结，最后一节笔者将通过自我的实践研究来探究趣味性网页的表示出，同时也通过设计实例对前文加以验证。 诚如前文所提到的个人网页设计作为诸多网页设计的一种，极具个人特色，所能表示出的情感元素愈加丰富，所展现的维度愈加的多元。因而更需要设计师在设计之初对于网站的整体流程做好规划。结合本章提到的两个案例，结合自我的网站构思，本章的设计流程主要如下： 如文中阐述可知，个人网站根据展现内容的不同，呈现的方式也不尽一样。 文

11、中的设计实例是以作者即将面对就业的应聘者身份所准备的个人网站设计。网站建站核心是偏向展示设计作品和设计思维的一种简历式网站设计。以此为基础的建站核心，应该把控在突出自我在学习和实习期间的表现为首要，并将一些实际的设计实践项目和所完成的设计作品作为重点内容穿插华而不实。比拟上一节所提到的两个个人性质的设计网站个案，自我实践环节的个人网站设计最重要的是对于信息量的把控。考虑到各个公司的人事对于求职者的简历阅览呈现正处于饱和状态，而丰富而又饶有趣味感的网页组织方式，不仅能够使页面的整体逻辑看上去愈加清楚明晰，也不会给阅读者造成阅览负担；展示信息的分解和转化，易于被阅读的用户吸收和辨别。另外通过对于用

12、户阅读网页时的认知心理经过分析，能够结合知觉，注意，记忆等相应的感悟觉重点所反映在设计上的重点做归纳分析。 以此作为建站的方向和参考特点。 5.3.1 网站的布局构思和模块划分 建站之前首先应该明确，设计一个简历性质的个人网站的落脚点在哪里。作为一个介绍性质的网站，其介绍性质是最根本把握的特性之一。因而在页面规划时，笔者个人选择采用了扁平化的设计风格，通过简洁的色块比照以及明晰的版面划分，以降低其他的视觉噪音对于页面主体的影响。一开场就铺陈大量文字和图片的效果，往往使得阅读者过于被这些花哨的视觉元素吸引，而忘记阅读网页的主要目的。因而在设计这样的个人网站前，首要把握的就是省略一些不必要的文字和

13、图片。根据克拉克在(Don t make me think一书中提到的第三定律，网站能够采用间接有力的文字来凸显出主题。通过对人们阅读网页时的认知心理行为的归纳分析可知，用户对于网页承载大量文字的接受率和转化率极低。而简洁又富有节拍性的文字则在页面中起到完全不同的作用和效果。通过文字的精简能够有效控制视觉空间，凸显主题。其次，在网页的整体背景图形的使用上不宜过于花哨。背景的作用其实就是为了衬托出主体，因而扁平化的风格恰好避免了这个问题，将界面形式极度单一化和极简化的设计，不仅能够有效的避免信息的冗余，使主体更为明显，同时也有利于引导用户相关操作。最后，不应忽略扁平化的设计风格里有关图形语言的使

14、用。如上所述，合理的图形语言的信息转化形式不仅能够简化页面中不必要的文字信息，可以以使页面愈加详细形象，易于辨别且具有一定的趣味性质。 5.3.2 网页模型的构建 根据前文的分析和阐述，以及对于网站整体风格上的把控，结合详细的个人信息元素就能够开场进行个人网站的模型构建。网站的模型构建的目的在于更为直观的呈现展示内容和主体逻辑。在规划网站的模型时能够调节和把控网站所要展示的重点，另外根据网站设计风格的不同能够注重一些网站细节部分的搭配。 如扁平化的风格就应该区别注意矢量图形的应用，在阴影上应该使用斜阴影的表现效果。网页的高保真原图呈现效果如下： 整个个人网站的设计风格以扁平化作为切入点，结合着扁平化的表现特点，利用 5 代码集成所实现出鼠标滚屏效果，将以个人的简历信息为主体逻辑的网页框架建立起来。页面的一个最主要的特点在于个站取消了固定区域的导航构造，以取而代之交互提示以及特殊 icon 的切换来做相应介绍的板块划分，并由此引导出一些视觉焦点。页面在色彩的选用上，并没有采用过于鲜明的色彩比照。 相反，相近色的纯度比照使得页面在展示上更为的轻快，信息的主题也有点有面，不至于让用户感到乏味和单调的不良情绪。网页在整体的版面设置上，能够保持了较高的版面率，目的也是为了方面用户轻松阅读。在交互层面上，结合者网页语言所构成的滚屏动效，使页面在使用中的层次愈加丰富，体验上也更具备趣味感。