基于图形美化技术的视觉传达设计研究

李云歌

摘 要： 传统基于认知心理学的网页界面视觉传达设计方法同用户间的情感交流以及互动性差，用户满意度低。因此，设计基于图形美化技术的视觉传达设计方法。其基于心理学以及符号学，设计网页界面设计中的信息传达模式以及信息接收模式；对网页界面视觉传达设计过程中采用的圖像美化技术视觉信息元素的图形化表达形式实施分析；设计网页界面中的点化、线化以及面化的图形化表达方式；对信息图形化在网页界面设计中的文字图形化以及音乐图形化进行设计；对网页界面中信息图形化与交互设计过程中的提示和反馈以及信息图形化的情感进行详细设计。在遵守美学原则的基础上，通过图形美化技术带给用户更好的体验。实验结果说明，所提方法设计的网页界面的视觉传达效果佳，具有较高的用户满意度。

关键词： 图形美化； 视觉传达； 信息传达； 图形化； 情感设计； 视觉信息元素

中图分类号： TN911?34； TP391.41 文献标识码： A 文章编号： 1004?373X（2018）13?0065?05

Abstract： The traditional design method of webpage interface visual communication based on cognitive psychology has poor emotional communication and interaction with users， and low user satisfaction. Therefore， a visual communication design method based on graphic beautification technique was designed. On the basis of psychology and semiology， the information transmission mode and information acceptance mode in webpage interface design are designed. The graphical expression form of visual information element is analyzed while the image beautification technology is adopted in the design process of webpage interface visual communication. The graphical expression forms （point， line and plane） in webpage interface are designed. The character graphics and music graphics in webpage interface design of information graphics are designed. The reminder and feedback in the process of information graphics and interaction design in webpage interface， and emotion of the information graphics are designed in detail. In compliance with the aesthetic principle， the graphic beautification technology can provide a better experience for users. The experimental results show that the visual communication effect of the webpage interface designed with the proposed method is perfect， and has high user satisfaction.

Keywords： graphic beautification； visual communication； information transmission； graphics； emotional design； visual information element

0 引 言

由于计算机网络技术的高速发展，网页设计领域也日益引起人们的关注。网页界面是一种常用的传播媒介，其可全面采用文本、图像以及动画等视觉传达内容向用户反馈信息和内容。依据网页界面特征，其设计过程中应关注信息传达的需求。视觉信息是当前网页界面传达的关键信息，网页界面设计的关键视觉元素以及设计规范应遵守视觉传达的规律。传统基于认知心理的网页界面视觉传达设计方法同用户间的情感交流以及互动性差，用户满意度低[1]。图形美化技术是一种个性化的视觉传达方法，其能够提高网页视觉传达设计的情感性以及交互性，提高用户满意度。因此，本文研究了基于图像美化技术的视觉传达设计方法，增强了网页界面视觉传达设计效果。

1 基于图像美化技术的视觉传达设计研究

1.1 网页界面设计中的信息传达设计

1.1.1 信息传达模式设计

网页界面视觉传达设计过程中的信息传达模式为：设计人员将信息变换成视觉语言后再编码成图形化的网页界面，用户对信息实施解码变换，得到所需的有价值信息，详细过程用图1描述。

利用图形可对设计师以及用户同网页界面进行互动的过程进行准确描述，完成信息的传达以及接收。设计师同网页界面实施互动的过程[2]能够看成是原始数据变换成视觉信息的过程；用户同网页间的互动过程能够看成是视觉信息变换成知识的过程。基于结构主义以及符号学原理可将上述两个过程当成是“编码”以及“解码”过程，两个过程能够对网页视觉传达过程进行直观描述。

信息传达过程需要先解析网页中的初始数据，将这些数据变换成信息，实现不同数据的解释。通过组织以及加工的初始数据能够变换成有价值的信息[3]，为网页用户实现交流提供基础。网页设计师通过分析以及汇总获取的数据，是向用户反馈的内容，将这些数据信息通过合理的手段实施描述，能够实现视觉信息高效、准确的传达。将设计师规划好的传达数据通过网页界面基于图形美化技术实现数据变换后，通过视觉信息的方式显示给用户，该数据变换过程是信息的“编码”过程。

1.1.2 信息接收模式设计

信息接收模式是“译码”的过程，如果网页中的视觉信息激发了用户的兴趣度，用户会基于自身的需求理解该视觉信息，采用合理的方式阐释这些信息，将其变换成知识。人的信息操作系统包括感觉器官、中枢神经系统以及运动器官，用图2描述。中枢神经系统对感觉器官实施管控，采集外界信息，再通过中枢神经系统对信息实施加工，完成信息的辨识、记忆以及分析，传递出相关的处理命令。网页界面进行视觉传达过程中，人们重点对网页中的视觉信息产生视觉翻译，产生相关的心理活动，最终接收网页信息。考虑到不同用户的心理以及生理因素，用户视线流向具有规律性，呈现视觉流程的属性。高质量的网页界面视觉传达设计过程中，应确保视觉流程的清晰性和直观性[4]，而图形美化技术可实现该效果，确保网页页面视觉传达设计更为紧凑美观，增强用户的兴趣度。并且采用图形美化技术可提高用户对网页信息的“解码”效率以及对网页信息的认知能力。

1.2 视觉信息元素的图形化表达形式

1.1节分析了图像美化技术在网页界面视觉传达设计过程中的作用以及价值，网页界面设计中采用图形美化技术对图形元素实施设计，可提高网页的视觉美化效果，降低用户记忆负担，引导用户浏览网页，获取有价值信息。下面对网页界面视觉传达设计过程中采用图像美化技术时视觉信息元素的图形化表达形式实施分析。

1.2.1 点 化

点是组成平面的关键图形元素，平面中的图标以及字符都能产生点的状态，可带给用户“中心感”，将用户视觉聚集到点中。多于两个点连接，基于合理的规律进行分布，能够形成规律感以及空间感[5]，点的位置、方向以及大小会对用户产生不同的兴趣度，如图3所示。

1.2.2 线化以及面化

点的变动构成线，产生运动性以及情感性，直线以及曲线分别呈现静态性以及动态性。通常在面向女性的网页视觉传达设计过程中采用曲线，通过曲线呈现女性曼妙的身体曲线、飘动的裙摆等。线还是网页设计中的关键组成运算，其能够确保将网页页面内的关键信息在视觉上关联起来，并且实现界面的划分。

线构成的封闭图形则是面，具备面积感，几何形面能够呈现一定的性格属性，正方形以及圆形呈现一定的规则感和生命感，自由曲面拥有活泼以及柔软的属性。网页界面视觉传达设计时采用大图片、导航，字符采用规则排列，在视觉中表现出面的属性[6]，不同面间存在小部分的留白区域，可形成线的感觉，如图4所示。

1.3 信息图形化在网页界面设计中的表现方式

1.3.1 文字图形化

网页只通过文字无法满足用户的情感需要，应通过图形化的媒介实现用户同网页间的交流。大多数用户会通过扫描检索感兴趣的文字以及语音，图形比文字更能提升用户的兴趣度。图形化文字可通过图形元素描述文字，提高文字的表达性能。网页设计过程中，采用合理的图形化符号描述不同信息模块链接，能够对用户的认知感受进行直观、准确的描述，实现信息的传达。网页设计中的“请按这里”以及“敲击进入”等文字采用语义描述向用户提供理念上的导向服务，并对文字实施图形化操作[7]，能够对用户形成自觉的视觉导向服务。将海量文字简化成拥有逻辑关系的图形表达，激发用户的兴趣度，确保用户采集到有价值的信息；在百度网站检索产品内嵌入“检索华尔兹”的模式，确保图像构成关键新闻人物的关系图片，如图5所示，这些内容都基于最新新闻事实连接，确保用户能够检索明星近期的活动关联性。用户通过该图形变换到结果页面，能够提高网站的点击率。

1.3.2 音乐图形化

用户通过谷歌音乐的图形化检索措施得到所需的音乐检索结果，如图6所示。网页通过滑块选择展示不同的音乐检索数据，该效果具有更高的动感以及空间感，提高了用户兴趣度。

1.4 网页界面中信息图形化与交互设计

1.4.1 提示和反馈

提示以及反馈是界面的输出结果，由界面元素、声音以及震动等构成，是用户同网页实施信息交互的过程。网页界面提示以及反馈的内容是信息、警告以及确认等内容。用户对界面内的表达元素实施处理，能够获取可视化结果，从图表以及链接等区域采集信息提示[8]。图形可在提示以及反馈时为用户提供帮助以及认知，确保用户高效率地采集反馈信息，实施后续操作。合理采用图表可确保用户迅速地对自身行为结果实施反应，图7描述了淘宝网注册表格内的栏目，当用户输入信息后，右端会产生相关的反馈信息，若信息输入存在错误，则会产生红色叉号图标，用于描述错误以及警告[9]。网页交互设计过程中的图形可确保用户快速地采集信息。

1.4.2 網页界面中信息图形化的情感设计

用户浏览网页过程是人机交互的过程，因此在采用图形美化技术设计网页过程中，应关注用户的感受以及同网页交互的情感感受，对面向目标用户的情感体验实施设计，确保用户心情愉悦。通过图形化的语言能够确保用户同网页交互方式呈现情感性，基于目标用户的情感场景产生的视觉传达[10]可提高产品同用户间的交流性。如淘宝网页检索不到结果时，通过表情图案描述，确保产品同用户情感相沟通，用户会觉得自己被理解，减弱了用户检索不到结果形成的失望情感，进而提高用户对淘宝网页的满意度，如图8所示。

2 实验结果与分析

2.1 运行效果检测

实验分析采用本文提出的图形美化技术设计的几种社会交往网站的运行效果，如开心网以及人人网的网站页面设计，结果用图9描述，能够看出本文方法设计的社会交往网站简洁，都具备主导航、登录信息以及LOGO等内容。

分析图9还能够看出，本文方法设计的社会交往界面满足用户视觉流程，呈现关键信息以及功能，关注交互性，应用性强。这些漂亮的图形界面能够给用户带来更好的情感感受，得到用户的好感。其中的QQ校友界面最为精致，具有光影以及空间感，受到用户的青睐。

设计师设计网页界面的目的是提高网页的知名度以及信誉度，通过更好的视觉传达效果提高用户对网页的关注度。采用本文方法可通过图形美化技术更多地吸引用户以及感染用户，塑造网页同用户间的情感连接。在页面中通过图像美化技术塑造合理的氛围，如图10所示。确保用户在浏览网页时，不断深入到该氛围内，带动同户向其他群体的推广热情，增强网页的点击率，提高网页的经济效益。

2.2 性能檢测

实验通过用户调查问卷方式，检测采用本文设计方法以及传统设计方法设计购物网站后，用户对购物网站的兴趣度情况，进而对本文设计方法的应用效果实施检测。实验在某大学城附近向学生随机发放100份调查问卷，收回100份，有效率是100%，采用不记名措施以及百分制实施打分，调查问卷中包括用户对购物网站的直观感受评分、使用简便性评分、情感氛围评分、感兴趣度评分等，将100份调查问卷随机划分成10组，统计10组调查问卷的平均分，结果用表1以及表2描述。对比分析两个表能够看出，用户对本文方法设计的购物网站各项内容的评分都高于传统方法设计的购物网站，说明本文方法更能提高购物网站的应用性、艺术效果以及用户满意度，是一种高质量的网页界面视觉传达设计方法。

2.3 购物效果检测

实验检测用户对上述不同方法设计的购物网站进行实际购物过程中的购物完成情况，完成情况越高，说明对应购物网站的实用价值越高。实验对象为某高校经济、法律、软件以及英语专业的100名学生，分别统计这些学生对本文方法以及传统方法设计的购物网站进行实际购物时，美妆、服装、学习用品、零食的购物完成度结果分别用图11以及图12描述。对比分析两个图可得，用户对两种方法设计的购物网站中的零食以及学习用品等价格较低产品的购物完成度基本一致；而用户对本文方法设计的购物网站中的美妆以及服装等价格较高产品的购物完成度高于传统方法设计的购物网站的购物完成度。说明相对于传统方法，本文方法设计的购物网站更能激发用户的购物欲望，网站的视觉传达效果更佳、实用价值更高，能够创造更好的经济效益。

3 结 语

本文提出基于图像美化技术的视觉传达设计方法，在网页界面设计中采用图形美化技术对图形元素实施设计，增强网页的视觉美化效果，提高用户兴趣度，引导用户浏览网页，获取有价值信息。

参考文献

[1] HUANG R， CAI J. The Application and research of dynamic structuring element in visual communication design [J]. Journal of Sichuan Vocational & Technical College， 2016， 36（1）： 249?251.

[2] 张宝，丁敏，李燕杰.基于视觉感知强度的人机交互界面优化设计[J].中国机械工程，2016，27（16）：2196?2202.

ZHANG Bao， DING Min， LI Yanjie. Optimization design of human machine interaction interface based on visual perception [J]. China mechanical engineering， 2016， 27（16）： 2196?2202.

[3] CHEN Y. Based on the diversity of visual communication design development in digital era environment [J]. Journal of Jiamusi Vocational Institute， 2017， 40（7）： 126?129.

[4] LUO M. Exploring the practice of visual communication design in the new era based on the view of "Art+Technology" [J]. Asian journal of science studies， 2017， 2（3）： 8?16.

[5] 韩凤娇，周竹荣.基于OWL本体构建的网页图文摘要算法[J].计算机工程与设计，2014，35（5）：1833?1839.

HAN Fengjiao， ZHOU Zhurong. Graphical?text abstract algorithm based on building OWL ontology [J]. Computer engineering and design， 2014， 35（5）： 1833?1839.

[6] WANG C， JIANG P. Deep neural networks based order completion time prediction by using real?time job shop RFID data [J]. Journal of intelligent manufacturing， 2017（4）： 1?16.

[7] WANG Y. Research on the visual communication design based on technology of computer graphics [J]. Advanced materials research， 2014， 846： 1064?1067.

[8] HE Fei. Industrial product graphic design based on visual communi?cation concept [J]. Acta technica csav， 2017， 62（1）： 269?278.

[9] XU X. Design of visual communication symbols for integration hidden Markov model [C]// 2017 IEEE International Conference on Robots & Intelligent System. [S.l.]： IEEE， 2017： 124?126.

[10] RITTER S， BARRETT D G T， SANTORO A， et al. Cognitive psychology for deep neural networks： a shape bias case study [EB/OL]. [2017?06?29]. http：//pdfs.semanticscholar.org/39fb/9fa2615620f043084a2ecbbdb1a1f8c707c9.pdf.