研究视觉引导在网页设计中的应用

时间:2019-09-27

摘 要

　　随着互联网发展和大数据时代的到来，传统信息获取媒介因其局限性正被网页所取代。网页信息内容的接受速度随之日益增加，实现网页信息的正确高效传达愈加重要。视觉是人们获取信息的主要手段，网页中视觉的有效引导可提高用户接受信息效率，引发用户正确操作行为。视觉引导在网页设计中的应用研究成为备受重视的一大课题。

　　视觉引导研究包括生理和心理两个层面。本文通过对视觉焦点、视觉心理、视觉思维等重点内容的研究探讨，发掘视觉移动、视觉方向、视觉流动、视觉感知和视觉顺序的规律，联结引导受众的视觉生理与心理，为视觉引导的应用搭建理论基础。研究总结出视觉引导在设计应用中的积极意义，突显视觉引导应用于网页设计中的研究价值。

　　通过实际案例调查研究发现，现阶段网页视觉信息主要面临大数据时代下信息过载、视觉噪音等现存视觉引导问题。基于用户视觉生理与心理特征，网页设计针对其特点呈现出简约化、感知化、即时趣味化、交互多元化的发展状态。为改善网页设计现存问题，更好应对当前和未来的发展态势，设计时应用视觉引导理论。研究从文字、图形、色彩等静态元素出发，深入探索网页整体布局、动静态元素合理搭配的引导适用法则，以期完善网页视觉设计理论体系。

　　视觉引导在网页设计各环节中的应用都十分必要。基于视觉引导理论和应用法则的研究结果，总结归纳出视觉引导在网页设计中的可行性和实践方法。研究建立网页信息需求与受众视觉心理相结合确定视觉中心点，根据引导规律构建视觉引导流程，运用应用法则选择使用网页设计要素等视觉引导方法，以期实现视觉存留这一网页设计最终目的。应用方法的研究和建立，不仅论证视觉引导体系在网页设计应用中的科学性及实用性，为今后设计实践工作提供有意义的参考。

　　关键词 视觉引导；网页设计；视觉元素；信息传达

Abstract

　　With the development of the Internet and the arrival of the era of big data, traditional information access media are being replaced by web pages because of its limitations. With the increasing speed of the acceptance of Web information content, it is more andmore important to realize the correct and efficient transmission of web information. Vision is the main means for people to obtain information. Effective guidance of vision in web pages can improve the efficiency of users'accepting information and trigger users' correct operation behavior. The application of visual guidance in web design has become amajor issue.

　　Visual guidance research includes two levels: physiology and psychology. This study explores the laws of visual movement, visual direction, visual flow, visual perceptionand visual sequence, links the visual physiology and psychology of the audience, and establishes a theoretical basis for the application of visual guidance. The studysummarizes the positive significance of visual guidance in the design and application, highlighting the research value of visual guidance in Web design.

　　Through the actual case study, it is found that the visual information of web pagesat this stage is mainly faced with information overload, visual noise and other issues in the era of large data. According to the visual physiological and psychological characteristics of users, web page design presents the development state of simplification, perception, instant interesting and interactive diversification. In order to improve the existingproblems of web design and better cope with the current and future developmentsituation, visual guidance theory is applied in the design.Starting from static elementssuch as text, graphics and color, this paper explores the guiding principles for theoverall layout of web pages and the rational collocation of dynamic and static elementsso as to perfect the theoretical system of web page visual design.

　　Visual guidance is very necessary in all aspects of web page design. Based on theresearch results of visual guidance theory and application rules, this paper summarizesthe feasibility and practical methods of visual guidance in Web design.The researchestablishes the combination of the information demand of web pages and the visualpsychology of the audience to determine the visual center point, constructs the visualguidance flow according to the guidance law, and chooses the visual guidance methods such as using the design elements of web pages according to the application rules, so asto achieve the ultimate goal of visual retention in web page design.The research andestablishment of application methods not only demonstrate the scientificity andpracticability of visual guidance system in Web design, but also provide meaningfulreference for future design practice.

　　Keywords: Visual Guidance,Web Design,Visual Elements,Information Transmission

目 录

　　第 1 章 绪论

　　1.1 研究背景、目的及意义

　　1.1.1 研究背景

　　中国互联网络信息中心（CNNIC)收集的最新数据显示，截至 2018 年 6 月中国网民规模达 8.02 亿，互联网普及率为 57.7%；仅 2018 年上半年新增网民就高达2968 万人[1]。根据网民数统计图和互联网普及率的走势图预测，我国上网人数将持续增加。（如图 1.1）。

　　互联网在经济社会发展中的地位凸显，随着互联网+、大数据、人工智能的发展，人们更多的选择网页来作为获取信息的渠道，以此实现工作、生活需求和需要。但随之而来的是网页信息过载、视觉噪音、网页冗杂等问题的出现，迫切需要设计师通过有效的设计手法实现网页信息的准确快捷、高效便利地传递给用户视觉是人们获取信息的主要来源，视觉的有效引导成为解决网页问题的首要研究内容。目前国内外对于网页设计的研究更加重视，在布局、配色、排版、交互等研究领域形成理论原则和实践方法，主要针对于网页制作和视觉美化工作，重视网页技术或界面版式，将视觉引导和针对于网页发展状态所暴露出的新问题作为主要研究内容的研究则相对匮乏。在网络快速发展和信息爆炸的现如今，应用视觉引导理论和规律，实现信息有效整合，针对视觉元素设计科学的引导方法，使信息正确呈现于网页中，是网页设计的重要研究方向。

　　1.1.2 研究目的及意义

　　本课题通过对视觉引导及其规律的理论研究，结合心理学、信息学及人机工学等学科理论知识探究，进一步完善视觉引导研究成果。针对网页中的现存问题，结合当前网页发展状态提出设计应用法则，从而为网页设计思路、方法的创新性发展提供参考。结合优秀案例，研究视觉引导在网页设计实践中的可行性和方法，完善网页设计领域中视觉引导的应用研究。完整而有成效的网页设计具有正确及高效传达信息，引导受众视觉注意并形成特定流程的特点。网页设计不再以视觉美感为基础，而应以视觉信息引导的相关研究为前提，引发设计师在网页设计领域对视觉引导的重视。在满足视觉审美的同时，使受众正确、高效接受网页内容，引导用户行为，已成为网页设计的发展目标。随着网络时代发展，互联网信息不断膨胀，现代文明从知识爆炸过渡到信息爆炸，网页设计不再只局限于视觉设计与网页制作方面，同时要考虑信息结构的整体规划，甚至是前期建设的策划工作。[2]将视觉引导应用于网页设计，以期实现网页设计的最终目的——准确、高效的信息传达。通过对视觉引导的分析及规律探索，发掘积极意义，将视觉引导结合网页特点应用于设计。本研究提出视觉引导体系，从文字、图形、色彩、布局、动静态元素应用这五方面进行视觉引导探讨，完善网页视觉设计理论研究。研究确立的视觉引导方法，为切实解决网页设计中的现存问题，优化用户视觉体验，引导用户行为的设计实践工作提供参考。

　　1.2 国内外研究现状

　　1.2.1 国外研究现状

　　国外对视觉引导的研究主要是心理学研究和在计算机软件及计算机技术中的应用研究。对于网页设计中视觉引导的研究主要针对视觉元素对于用户认知和视觉流程建立方法的探讨，对网页信息视觉引导方面的研究成果有限，可供参考的文献较少。在论述视觉的文献中一定程度上涉及视觉引导理论的相关内容，美国维尔在《设计中的视觉思维》中深入研究人们的视觉生理及视觉要素对视觉思维的影响，结合视觉生理与视觉思维的探讨，研究如何有效地运用各种视觉要素进行设计，从而产生不同的视觉心理，影响人们对不同设计的感受。阿恩海姆在《视觉思维：审美直觉心理学》系统分析视觉效能。日本佐佐木刚士的《版式设计原理》针对书籍和杂志设计，探讨页面构成理论、图片理论、图解图说理论和文字组合理论。其中，在页面构成理论中，提出根据版式设计来区分先后顺序的法则和按照阅读顺序引导视线的移动方向的法则。日本野村顺一研究得出色彩对大脑和生理的影响理论。英国伊恩·诺布尔，拉塞尔·倍斯特利在《视觉设计方法》中结合案例探讨平面设计中的视觉设计方法。日本原研哉在《设计中的设计》中探究信息设计。Jennifer Kyrnin 在《在布局和艺术品中设计传达运动流程》中总结图形、透视、尺寸等视觉流程方式。针对网页设计的探讨，国外尤其日、韩两国在视觉效果方面的研究成果趋于成熟，已形成可行性的基本理论和设计原则，并在实践中得以验证。

　　譬如韩国崔美善从图形设计、色彩基础知识、交互式设计等方面结合相关案例研究网页视觉效果的表现技巧。姜恩正和黄静慧在《设计师谈成功网页设计原则》中结合实践案例提出优秀网页的设计原则。Steven Bradley在《如何在网页设计中控制视觉流程》中提及视线移动方式及运动位置的设计是视觉流程设计的主要内容。视觉效果与视觉引导并不是相对问题，效果的表现建立在有效引导的基础上实现，引导的成功同样借助效果的成功表现。视觉引导的应用研究应建立在成功的视觉设计理论和原则的基础上。

　　1.2.2 国内研究现状

　　随着国家对网络发展的重视，国内对于网页设计的关注同样有所提高，逐渐与广告设计分离，形成特定的理论体系，但研究内容较为针对性或局限性。梁景红在《Web Designer Idea-设计师谈网页设计思维》中从设计、思维方面研究导航、版式、色彩等方面的实际应用方法；黄海燕,张辉从信息化及视觉化角度探究了文字在网页设计中的应用，通过设计处理实现文字可读性及视觉感官刺激的双重作用；徐珂，苗彤，赵晖在《网页·视觉与设计中》总结归纳出网页设计制作过程中解决问题方法论； 邹慧琴,谭开界关注了网页易用度问题，在《互动网页设计与易用度》中探究网页与软件的使用功能与平面设计之间的结合。崔莉研究如何设计网页界面功能与审美高度和谐统一。综上可知，国内对于网页设计的研究主要针对于技术层面，而对于视觉层面的研究较多局限于各视觉元素的分析，对切实解决网页信息传达的有效性及正确性的视觉引导研究相对匮乏。国内对于视觉引导应用研究集中在自动化领域，对视觉理论的研究主要局限在视觉元素的设计方法探讨，并未形成完善的视觉引导体系。杜世英在《视觉传达设计原理》中探讨了视觉心理学、视觉元素、视觉表达方式、视觉设计原则等内容。陈敏针对色彩方面探讨配色设计原理与实践方法。崔福荣针对版式编排探究视觉习惯。研究内容较为局限性，理论体系不完善。综上所述，国内现状表现为：第一，国内对于网页中视觉设计方面的研究较少，关于网页方面的着作和研究多为网页制作和软件操作等技术方面，对设计层面的研究不够深入。第二，对网页设计中视觉信息传递性不够重视，多注重视觉审美和界面优化等方面。第三，缺乏从视觉引导角度入手对网页设计进行系统研究的理论体系和实践方法。由此可见，国内网页设计的研究成果缺乏全面系统性、有效针对性的网页设计应用法则，迫切需要有应用意义和实践可行性的有价值理论研究。

　　1.3 研究内容与创新点

　　1.3.1 研究内容

　　本课题研究的主要内容包括以下五个方面：

　　（1）研究视觉引导理论及构成，发掘视觉引导的基本规律，探究理论及规律在设计中的应用意义。

　　（2）研究网页设计的特点，调查并分析网页设计所面临的视觉引导问题，基于现发展状态总结出网页设计迫切需要视觉引导理论的应用。

　　（3）结合视觉引导理论的研究分析，针对网页设计的现存问题和发展状态，建立视觉引导在网页设计中的应用法则。

　　（4）研究视觉引导在网页设计实践中的可行性，结合适用法则，总结视觉引导在网页设计应用中的思路方法。

　　（5）总结研究成果及不足之处，为今后网页视觉引导应用的进一步研究提供参考。

　　1.3.2 创新点

　　本课题具有的创新点包括以下三个方面：

　　（1）创新性的将视觉引导理念应用于网页设计领域，不但补充和完善视觉引导的研究内容和研究领域，而且拓展网页设计的思路和方法

　　（2）研究从网页设计现存问题入手，针对网页设计发展状态，建立和完善视觉引导在网页设计中的应用法则，为网页设计实践提供方法指导。

　　（3）以往对于网页设计的视觉研究多涉及元素应用研究，重视用户视觉审美。本课题重点基于“视觉信息有效传达为中心”的设计理念，将视觉引导规律应用于网页设计要素，探究信息有效传达与视觉审美的和谐统一，创新网页视觉引导体系。

　　1.4 研究方法

　　为深入发掘网络设计的现存问题，准确研究视觉引导在网络设计中的应用，本课题采取了多种研究方法：

　　（1）文献研究法：通过对网页设计和视觉引导的论文、期刊、杂志、图书、学术着作等文献资料的收集、归纳整理、提炼总结，全面、正确梳理视觉引导和网络设计的相关理论知识，为后期课题研究奠定理论基础。

　　（2）调查研究法：搜索整理不同类型的网页设计作品，如宣传型网页、营销型网页、教育型网页等，综合分析、比较归纳出网页设计的共同特点、现存视觉引导问题、发展状态，探索视觉引导应用的必要性，为课题研究指明探讨方向。

　　（3）跨学科研究法：运用视觉设计、心理学、信息学、人机工学等多学科理论成果和方法体系，综合研究视觉引导在网页设计应用中的方法，全面探讨视觉引导应用的可行性，为应用法则和实践方法的建立提供科学的理论依据。

　　（4）实验研究方法：通过实验研究方法论证视觉引导在网页设计应用中的可行性。借助观察、调研、实验等形式，比较、归纳分析理论体系的引导方法对网页设计的影响，通过对比实验体现课题研究的作用和意义。

　　1.5 论文框架结构
 

【由于本篇文章为硕士论文，如需全文请点击底部下载全文链接】

　　第 2 章 视觉引导理论规律及应用意义
　　2.1 视觉引导理论及构成
　　2.1.1 视觉形成与引导原理
　　2.1.2 视觉焦点
　　2.1.3 视觉心理
　　2.1.4 视觉思维

　　2.2 视觉引导的基本规律
　　2.2.1 视觉移动的直线性规律
　　2.2.2 视觉方向的间隔递减性规律
　　2.2.3 视觉流动的重复性规律
　　2.2.4 视觉感知的强弱性规律
　　2.2.5 视觉顺序的主动性规律

　　2.3 视觉引导在设计中应用的意义
　　2.3.1 引导构建基本框架
　　2.3.2 增强视觉的流畅性
　　2.3.3 加快信息的传递性
　　2.3.4 凸显设计的创意性
　　2.4 小结

　　第 3 章 网页设计的探究
　　3.1 网页设计的产生
　　3.2 网页设计的现存视觉引导问题
　　3.2.1 大数据时代下的信息过载
　　3.2.2 界面扁平化发展中的弊端
　　3.2.3 视觉噪音降低网页可用性

　　3.3 网页设计发展状态
　　3.3.1 布局简约化设计
　　3.3.2 视觉感知化设计
　　3.3.3 即时趣味化设计
　　3.3.4 交互多元化设计
　　3.4 小结

　　第 4 章 视觉引导在网页设计中的应用法则
　　4.1 文字易读性法则
　　4.1.1 文字字号与字体
　　4.1.2 文字表现形式
　　4.1.3 文字的排版

　　4.2 图形形象性法则
　　4.2.1 展现信息的内容图形
　　4.2.2 表现效果的背景图形
　　4.2.3 控制界面的图标图形

　　4.3 色彩导向性法则
　　4.3.1 色彩感知
　　4.3.2 色彩层级
　　4.3.3 色彩导向

　　4.4 布局协调性法则
　　4.4.1 界面的版式设计
　　4.4.2 重视留白的应用
　　4.5 动静平衡性法则
　　4.5.1 静态元素的动效设计
　　4.5.2 动态元素的合理应用
　　4.6 小结

　　第 5 章 视觉引导在网页设计实践中的可行性与方法
　　5.1 视觉引导在网页设计实践中的可行性研究
　　5.2 视觉引导在网页设计实践中的方法
　　5.2.1 确定视觉兴趣中心点
　　5.2.2 构建视觉引导流程
　　5.2.3 合理运用网页视觉要素
　　5.2.4 实现信息存留
　　5.3 小结

第 6 章 总结与展望

　　6.1 研究总结

　　6.1.1 研究成果

　　本文通过导入视觉引导理念，从视觉引导理论基础和原理入手，探究视觉移动、视觉方向、视觉流动、视觉感知、视觉顺序这五方面的视觉引导规律，挖掘出视觉引导在设计应用中的积极意义。将视觉引导与网页设计相结合，针对信息过载、界面扁平化发展中的弊端、视觉噪音降低网页可用性等现阶段网页发展所产生的问题，结合布局简约化、信息感知化、即时趣味化和交互多元化的网页发展状态，探索归纳出文字、图形、色彩、布局、动、静态元素在视觉引导方面的应用法则，以期通过法则的建立和完善，改进网页中的现存问题。探讨视觉引导在网页设计实践中的应用可行性，基于视觉引导应用法则，梳理以确定视觉中心点、构建视觉引导流程、选择和运用网页设计视觉要素及最终实现视觉存留的实践应用方法和策略，以期完善网页设计方法体系。通过研究探讨，建立视觉引导与网页设计的新融洽，一方面，有助于网页设计理论体系的完善和丰富；另一方面，对于未来网页设计创作提供理论参考和实践指导。

　　6.1.2 研究局限

　　当今网页终端繁多，屏幕尺寸大小不一，本研究并未从网页不同界面尺寸角度进行视觉引导的探讨。视觉元素的选择、应用和网页布局、排版方式等，都应建立在适应网页界面尺寸的基础上，屏幕尺寸的不同影响视觉引导效果。由于互联网产品发展迅速，网页应用增多，本文并未展开深入探讨不同网页尺寸下的视觉引导应用。不同年龄阶段的受众在视觉感知力上有一定的差异，针对不同受众群体的不同网页类型，在引导方法上可能存在差异，例如成人和儿童的视觉心理差别较大，男性和女性视觉焦点和视觉关注点有所不同等。本文仅简单以儿童受众为例，探讨视觉引导在该受众群体网页设计中的应用方法，对受众差异化影响的研究不够深入透彻。

　　网页设计在互联网和技术催化下，拥有广阔的发展空间，加之学术积累和掌握文献有限，本研究处于探索阶段，部分研究内容并不深入，也难免存在疏漏和不当之处，恳请老师批评指正，以期望在后期研究和设计中改进和完善。

　　6.2 研究展望

　　视觉引导在网页设计中的应用主要包括动态和静态两个方面。本研究重点探索静态元素的选择与应用法则，在一定程度上对动态元素有一定的指导意义。但由于动效元素多结合多样化交互方式应用，在受众视觉心理及视觉认知等方面必然与静态元素存在差异；加之现阶段关于视觉动效设计研究成果和理论也相对较少，今后对网页设计中的视觉引导研究可在本研究结果基础上，深入研究和比较动态元素产生的视觉引导效果。在今后网页设计实践中，期望将视觉引导在开发周期中实现应用的程序化和规则化。网络技术部门和网页设计部门能共同参与探讨前期方案的制定和实施，积极推进“以信息有效传达为中心”的设计理念，增加网页信息传达的正确性和高效性，实现用户便捷使用，让网页设计不再单纯被视为网页制作或网页美工的职业。

　　参考文献

【由于硕士论文篇幅较长，此页面不展示全文，如需全文，请点击下方下载全文链接】

TAG标签： 视觉引导  视觉元  网页设计  

上一篇：研究宝莱施公司的品牌营销中的问题及优化策略
下一篇：探讨忆阻器件模拟特性及期优化研究