文字元素网页设计论文

2022-04-19

摘要:在人类以计算机作为基础界面技术开发的二十一世纪,迅速发展的互联网络覆盖了人们的所有生活,使生活节奏和工作学习更加的方便快捷。互联网络不仅综合了文字和声音,还综合了图形和动画等各种信息,形成了人们易接受的媒体形式,使人们之间的信息传递更加丰富多元化,为人们提供了一种全新便捷的交流方式。下面是小编整理的《文字元素网页设计论文(精选3篇)》,欢迎大家借鉴与参考,希望对大家有所帮助!

文字元素网页设计论文 篇1:

版式设计中符号化文字的运用研究

摘要:现代版式设计当中,文字作为其设计的压要组成部分,具有一定的装饰性。人类在漫长的进化当中,通过不断积累的社会经验以及创新思维,逐渐形成了记录事物和表达情感的艺术手段,而符号化的文字,就是这种表达情感的艺术手段之一。文字是具有强烈生命力和感染力的设计元素,在现代版式设计当中应用最为广泛。文字作为高度符号化的一种设计元素,以及传播信息的手段,近年来受到了设计界人士的广泛关注。因此,研究版式设计中符号化文字的运用,对于促进符号化文字设计的未来发展,促进人类艺术的前进,有着重要的现实意义。本文从文字设计的重要性以及符号化文字设计的特点入手,浅谈字体符号化的表现手法,探讨符号化文字在版式设计当中的具体应用,为促进版式设计中符号化文字的进一步应用提供参考。

关键词:版式设计;符号化文字;设计元素;应用与研究

文章编码:1672-7053(2019)07-0076-02

版式设计依靠其独特的视觉性、符号性等特征,向人们传递着各种各样的信息。可以说版式设计,实际上是一个传递信息的媒介。在版式设计当中,融合了不同的艺术形式和门类,在相互渗透和影响下逐步将版式设计推进成为一种综合性极强的艺术设计形式。随着信息时代的来临,书籍、杂志、网页、广告以及自媒体的发展,多样的艺术设计形式开始冲击着人们的视觉,而其中符号化文字的运用,逐渐成为了版式设计当中重要的组成部分。

1 符号化文字的特点

文字不仅具有承载着传递信息的功能,同时也有传递情感的作用,因此,在版式设计中文字设计成为的重要视觉元素之一。字体设计的大小、线条的粗细可以根据不同版式设计的需求,自由合理地进行组合,以达到想要的不同视觉效果。文字设计可以说是连接版式设计与观者之间的桥梁。因此,文字设计对于增强版式设计的效果有着极其重要的作用,更是提升版式设计表现力的重要环节。符号化文字设计的特点体现在如下几个方面:

1.1 夸张化

我国文字的起源非常久远,经历了几干年的传承和发展,形成了特有的结构模式。而这种结构模式发展到现代,人们在设计当中将其符号化,打破传统的固定模式,在不改变文字原有的结构模式情况下,通过对客观事物某一点进行强化,实现夸张变形。目前,这种夸张化在版式设计当中应用非常广泛,但也要注意夸张化的尺度和标准,不能过分夸张,使文字失去原有的内涵。

1.2 个性化

汉字有着不同的结构和笔划,版式设计中对文字的应用,首先需要注意的就是文字笔划和结构调整,如何使文字笔划在版式设计当中表现的张弛有度,又不失本意,是现代版式设计重点关注的内容。符号化文字的个性化表现在设计者将文字的笔划进行重新排版与重组,使文字产生一种乱中有序、错落有致的个性化排列方式,在贴近表现主体的同时,也同样实现了文字艺术的加工与创作。

1.3 图形化

从最古老的象形文字的发展,可以看出中国文字主要来源于图画。随着人类社会不断进步,文字也在不断发展,人们将复杂的图形进行了不断简化,最终将其演变成为我们现代使用的文字。在符号化文字设计当中,人们参考了文字的发展历程,利用文字所具有的图形化含义来表达文字的内容,更加简单和直接地实现了信息的传递,并且还具有装饰和美化的效果。因此,综合文字图形化的特点,在版式设计当中将文字图形化,也是一种常用的文字设计手段。

2 字体持号化的表现手法

2.1 文字提取

在文字符号化的设计中,文字的提取是极其重要的。符号化的文字在生活当中频繁出现,人们通过各式各样的符号文字来获取信息。随着现代社会的发展,人们对于文字设计的要求也越来越高,字体符号化的表现方法之一,即是文字的提取。文字提取主要是从主题和文字信息当中提炼出关键词汇,通过将关键词进行文字符号化的转换,来实现文字设计的创意,既呈现出图形化的方式,又保留其识别性,使其能够更好地吸引人们的目光。

2.2 位置角度

文字符号化的表现手法当中,位置角度,相当于文字提取的延伸设计。人们在提取文字之后,若都按照简单地排序和设计安排,整体的版式设计将会显得非常枯燥,而适当采用位置和角度对文字设计进行调整,可以更好地使文字适应整体画面,呈现出强烈的视觉刺激,增强视觉焦点,使整体画面错落有致,为画面注入鲜活的动力,使其与主题兼具联系性和活泼性。此外,在设计当中,还应注意整体画面的衔接性,设计中不要偏离主题(图1)。

2.3 空间叠层

空间叠层,是文字符号化表现手法之一,也是在版式设计当中较为常用的一种设计方式。通过对文字提取之后,通常将文字与具体事物进行填充与融合,利用空间、裁切的方式,营造出具有强烈视觉焦点的画面,前后裁切与空间上的氛围营造,为整体版式设计添加了视觉效果和特性。这种空间叠层的表现方式,最能够体现出画面的立体感和空间感,对于人们的吸引力也是极为强烈的。空间叠层的设计方式,视觉效果良好,设计也较为简单,是一种非常实用的文字符号化表现手法。

2.4 移花接木

移花接木的文字符号化表现手法,主要指的是运用字体的一些特性所产生的变化,在设计当中进行删减、增加或是融合一些新元素的设计手法。通常情况下会通过字体与事物的结合,通过暗示,引导人们的自然联想,呈现出带有一定识别性的文字与实物结合的设计。这种文字符号化的表现方式,能够大大增加画面的视觉性和趣味性,以此吸引人们的关注。

3 符号化文字在版式设计中的多元运用

3.1 在电商Banner版式设计中的应用

现代包装中的文字设计需要在有限的空间内利用符号设计的特点来传达特定信息。文字设计的美观和新颖是电商日anner版式设计当中的重点。电商日anner版式设计当中的文字设计具有品牌性和宣传性的特点,其中品牌性主要包括了品牌形象、商品信息、企业名称等等,品牌陛代表着企业的整体形象。因此,电商日anner版式设计在创意上要极具个性化,内容也要符合产品的市场定位,通过良好的视觉表现和效果,突出商品优势,在设计过程当中要注意字体设计的结构以及笔划的变化;宣传性主要用以体现产品的特色,宣傳性文字的设计讲究美观大方,具有一定的亲和力,所表达的内容要能够拉近企业与消费者之间的关系,以实现提高产品美誉度的目的。

3.2 在书籍封面版式中的应用

字体设计在书籍封面中的应用主要是以突出画面感来传达所要表达的信息。无论是纸质版还是电子版,书籍封面作为一项图书宣传的手段,将信息有效地传达给人们。书籍封面的设计表现形式主要以文字作为主体元素进行设计,字体形象的设计能够强化人们的视觉联想,并将形式美与信息传递相互结合,通过对书籍封面的设计,来实现字体设计的形象化、图形化和个性化,实现文字设计功能与形式上的完美结合,向人们传达具有特定信息的文字内容。这样不仅达到吸引人们注意力的目的,也能够起到对书籍的宣传效果,提高和促进文字本身的功能和作用,同时还具有一定的艺术内涵与艺术价值。

4 结论

艺术和创新,是一个民族文明发展的延续,现代版式设计中符号化文字的应用魅力正是基于艺术和创新的精神在不断进步。文字从出现到现代社会对其进行的艺术加工,不仅经历了漫长的演变过程,同时还赋予了文字艺术持久的生命力与价值。这种文化的延续是当代人类社会最具价值的财富,同时,文字设计在多领域的应用也体现了现代社会对于艺术的精神追求。

参考文献

[1]刘妹,现代书剩撇式设计中插图与文与集现形式多样性的研究[D].北京印刷学院,2018.

[2]候少蓉.浅谈平面设计中的版式设计方法及应用[J].中国报业,2018(06):71-72.

[3]魏昕.现代版式设计中文写的编排与创新[J].美与日创代(上),2018(04):63-64.

[4]巴晓雪.字体设计与版式的关系研究[J].艺术科技,2018(10).

[5]陈笑珊.浅析平面版式设计中图片元素的运用[J].新闻世界,2012(04).

[6]王小月.淺析版式设计在平面设计中的应用[J].中国民族博览,2016(09).

[7]冯永勤.浅谈版式设计的视觉[J].工业设计,2017(06),

[8]王丹.版式设计之中西文字体编排[J].艺术科技,2017(11).

[9]宋福政.基于意象图式的版式设计研究[J].工业设计,2017(08).

[10]胡丽娜.论平面设计中的版式设计广法及应用[J].职业,2016(34).

[11]胡丽丽.信息化视野下的版式设计课程建设研究与实践[J].工业设计,2018(12).

[12]张生英.高职艺术设计专业《版式设计》课程实践教学项目内容探析[J].工业设计,2019(05).

[13]宋玉立.审美视域下现代期刊的版式设计[J].青年记者,2017(24).

作者: 胡丽丽

文字元素网页设计论文 篇2:

试分析网页设计中视觉元素的审美性和功能

摘要:在人类以计算机作为基础界面技术开发的二十一世纪,迅速发展的互联网络覆盖了人们的所有生活,使生活节奏和工作学习更加的方便快捷。互联网络不仅综合了文字和声音,还综合了图形和动画等各种信息,形成了人们易接受的媒体形式,使人们之间的信息传递更加丰富多元化,为人们提供了一种全新便捷的交流方式。而网页设计中,组成网络信息传达的重要部分——视觉元素,不仅需要综合信息传递,还必须具有强而有力的色彩、图像等视觉表现力,以此提高人们的审美和带动情感作用。

关键词:网页设计;视觉元素;审美性;功能

发展迅速的信息网络缩短了各国各地经济和文化的交融。我国的网页设计在国际化的影响下,结合了自身的地域特色开始了新的探索,逐渐营造出具体中国精髓文化的网页设计新格局。二十世纪末期,我国的网页设计有跟风欧美、日、韩的状态,一直未体现出我国文明大国的设计风格。目前,我国的网页设计师已经深入探索网页设计的方向,从平面设计、网页设计和建筑设计等方面进行实质性研究。近些年,网页设计已经从单一的文字样式编排发展到图像、动画、声音等视觉元素的综合体现,在新媒介的推动下,高要求的视觉元素和审美性能更值得深入研究。

一、网页设计以及网页设计中视觉元素的概况

(一)网页设计概况

网页是一个网站的支撑和体现,网站是信息传播的依靠,在互联网全面覆盖的今天,网页设计中的视觉元素的重要性不言而喻。实质上,网页设计已经成为信息传达的重要组成部分。根据现今的信息传递水平,网页设计的方向不仅要符合人们的的心理和生理特点,还要从各视觉元素的构成的顺序和关系上体现自身特征和人文科学的表现风格。

(二)网页设计的视觉元素类别划分

网页设计的视觉元素传达与传统的的相比,以信息传递媒介不同划分为两类,一类是二维平面元素,另一类是视听元素。

就二维平面元素而言,其包含了网页设计中基本的视觉元素,涉及到了文字与字体,图形与图像,版式设计和色彩。第一,在一般的网页设计中,宋体是默认的字体,但计算机提供了多种可选择的变化字体,为编辑网页提供了方便。但一般经过编辑的同一网页设计的字体类别不宜超过4种。因为经过编辑后的文字显示需要计算机本地硬盘的支持,浏览者的计算机没有PC的支持,将导致无法传递视觉的最终效果。第二,网页设计中的图形和图像是经过计算机设计和制作出的效果,精确度和效果特殊较传统手工具有精、准、快的特点。图片经过显示器分辨,质数达到最佳;传输通过宽带,图片尺寸和所占空间越小、传输越快、下载时间越短。第三,网页设计中的版式设计是以屏幕大小为空间,将多种视觉元素进行重叠组合,并做到各元素的连贯性和配置合理,以达到界面内各元素的均衡、颜色饱和,并具有律动和导向作用。以文化为基础不同的网站网页设计格局不同,大致有门字型、拐角型、左右和上下结构型、标题型和变化型等。现阶段我国的门户网站以宣传意义的“门”字格式居多,其他个人或者企业的网站一般根据自身的宣传特点,通常可以自由选择动画、图形等元素设计网页。另外,还应考虑计算机的硬件基础、屏幕的大小、像素等,详细过多的内容可以另建新窗口,以点击链接形式获得充分利用网页的空间性,即三维性。第四,网页设计的色彩必须均衡饱和,并能一眼突出重点。根据计算机的显示设备定出总体网页设计的颜色系,主色强烈。

视听元素包含了动画、视频和声音。首先,网络广告一般会采用动画,常见的动画模式有3D和Flash,有些会用Swish等。这些动画在印刷媒介中是体现不出来的只有通过电脑完成,运用网页的空间性才能完成。网页动画可以通过Flash、GIF89a软件制作。Flash是利用帧的变化制成;GIF89a是由多帧光栅组合的图像形成的。其次,视频又叫流媒体,指的是音频和视频的数据在网络上按时间顺序传输或者连续播放的数据流,具有连续、实时和时序性等特点。传统观看电影或者听音乐必须先下载到计算机上才能观看,不仅不能马上观看耗用时间,还占计算机内存。现在的流媒体只需要边看边缓存部分内容,数据一边缓冲一边播放,不仅节省了时间,也不占用计算机内存。常见的网络视频播放格式有Real和直播的Media Player。流媒体的常见应用有VOD、视频广播、视频会议、远程游戏等。当今网络中流媒体的应用居多已经成为网络元素的主流,除了应用在宽带网络上,还应用于3G网络的无线流媒体。最后,声音通常是指网络信息传递中声响和语言,甚至音乐的传递。网络中的视觉元素文字信息的传达和视听同步,在感受了视觉元素的同时加入了听觉元素,对网页内容文字的理解和感染力倍增。浏览者也可以在浏览网页内容的同时,通过听觉轻松享受听觉带来的声响音乐或者获取其他信息。

(三)视觉元素的发展

网页设计是视觉设计的一种,它的基础是平面设计并依靠计算机和网络,所以网页设计是平面设计发展的新方向。网页设计在兼具平面设计特征的基础上又加入了视听新元素,使更多信息传递便捷,使用范围广泛。在网页设计上,参入了数字化、多媒体交互性,使浏览者得到视觉和听觉的同时满足,最终便可以实现传递信息的功能。

二、网页设计中视觉元素的审美性和功能

(一)视觉元素的审美性和功能性

网页设计是通过网络,把信息快、准、简的传达给浏览者。网页设计的审美性也应运而生。审美是指通过视觉对美感的感受和心理体验。网络中的审美性是指在信息传达过程中,浏览者对网页上的各个视觉元素带来的感知美和享受性。

网页中的文字、色彩和图形的设计都应遵循视觉美的规律,实现功能形式的统一。故而,各元素之间的流程应有序的准确表达出信息的传达;内容要有突出的主题和清晰的效果;网页设计制作应美观统一使浏览者快捷接受信息,并满足视觉审美。另外,网站的网页版式审美主要指网页设计的版式风格,比如对内容的重要性的安排;图形审美指网站的标志、图标和banner图形等;网页上的动画和流媒体可以增加趣味性和易捷的传递信息;网页中的色彩能提高阅读的准确度。

(二)网页设计的视觉元素功能性和审美性的表现

随着视觉元素趋近国际化,互联网逐渐成为人类最大的信息资源库,融入我们生活各方面。使信息的传递更快、更广。另一方面,网页设计成果之后用户可以利用互联网通过各网页的检索功能或者下载获得自己想要的资料,并实现资源共享。而网页设计上的突出视觉性,方便用户易检性,在视觉上易区别。

此外,在网页上用户可以对看到的内容进行评论和信息反馈,使信息传播的单一性变成双向交流。视觉元素使信息多元化,为信息互动提供了空间性。

(三)视觉元素在不同网站上的审美性和功能差异

随着商品经济的发展,商业网站琳琅满目。而商业网站主要用于商品交易。但是现阶段大部分网页结构单调,过于注重产品介绍。色彩单一,文字多的情况屡见不鲜。尽管少许网站在网页插入一些Flash等,在视觉上形成动感。其次,公共服务网站,其信息量大、结构清晰、色彩简洁、风格正式、视觉上没有装饰,无插页广告,内容可信度高。视觉上简洁明了,给人干净清晰的美感。就现阶段的个人网站而言。这种网站无格式、编排的局限,色彩一般明亮、图形多样、个性鲜明,视觉元素极具感染力。

结束语:

数字信息的时代,给人类带来了信息传递的快捷与方便。网页的设计和表现元素带来了视觉和听觉的美感交融。网页设计功能给我们带来了信息传递的方便性和美感性,使人类可以再互联网的时代中,更加快速识别和接受信息的双向交流。(作者单位:湖南师范大学美术学院)

参考文献:

[1]孟凡军.网页设计创意与视觉元素审美性研究[J].佳木斯教育学院学报,2011(04).

[2]张晶.网页设计中平面视觉元素的应用[J].中国管理信息化,2011(17).

[3]李晓宁.论网页设计中视觉元素的特性[J].大众文艺,2014(02).

作者:吴希

文字元素网页设计论文 篇3:

网页信息结构的格式塔原理研究

摘要:界面信息结构设计在网页界面设计中占着举足轻重的作用。文章通讨对网页中信息元素的分析,挖掘网页界面中信息结构关系。从格式塔原理入手,结合实际网页界面案例,分析各原理对信息元素的组织与加工,体现人的视觉系统对信息结构的处理。

关键词:信息元素;界面结构关系;格式塔原理

文章编码:1672-7053(2019)01-0082-03

面对新的时代,网络成为获取信息最有效的窗口,网页界面成为人与信息互动的载体。网页界面是指人与计算机之间以网络为平台的信息界面,它是一种由非物质化数字设计形态与人进行交互的[1]。在用户与网页界面交互的过程中,实现信息的传达与接受。网页界面设计属于人际交互设计的一种,因其自身的特殊性,信息设计需要具有自身的特点和原则,通过美学和人机交互原理对网页界面中的信息元素进行组织与排列,使信息更好的传达。网页设计的过程是设计师将原始数据转化成视觉信息的过程,是信息的编排与组织的过程。通过对信息元素的合理规划,实现有效的视觉引导效果,强化用户浏览思路,引导用户快速获取信息。

1 网页界面的信息元素

网页界面通过元素的组织向用户传递信息,组织效果的优劣直接影响用户的信息认知。网页界面中信息元素主要包括文字、色彩和图形图像,用户通过浏览界面获取信息。文字作为信息传递的主要手段,是网页界面中必不可少的元素,在信息的描述和解释中起着重要的作用。色彩是网页界面设计考虑的重要因素,人的视觉系统对色彩的敏感度非常高。界面中的色彩可以给人不同的感受,从而使用户产生想象[2]。通过色彩的吸引与引导,可以促使用户在界面中完成一些交互操作,提高操作效率。色彩的区别变化,可使用户得到及时的信息反馈,对用户的操作引导起着重要的作用。图像在网页界面中具有明显的优势,与文字相比,图像所传达的信息量远大于文字所传达的信息量,具有更强的视觉冲击力。图像既包含了静态的图片素材,又包括动态的Flash、视频等元素。网页中的图片类型可根据网站风格和内容进行不同选择,例如对于新闻网站,图片需要真实且高清,与文字相呼应;针对儿童网站,可考虑整体使用插画风格图片,凸显网站的个性化和差异化。图像有效地避免了单独文字描述可能出现的表述不清、理解差异问题。在网页界面中,图形的一般表现形式是几何形态。网页图形的表现形式主要有几何图形、表现符号等。图像和几何图形的结合丰富了网页效果,增添了趣味性和时尚感。

2 网页界面的信息结构关系

作为一个体系庞大的系统,网页界面设计既要考虑显性信息的准确传达,又要注意信息组织的有效作用。通过认知心理学原理可以得知,受生理和心理的影响,人们在视觉信息感知的过程中,视线流动是有一定順序的,视线的接受特性被称为视觉流程。根据设计意图引导用户的视觉焦点,因此,向受众发送的网页信息将清晰、流畅、快速[3]。在设计优良的网页界面中,视觉流程是按照一条引线进行的,能够有效引导用户浏览网站,给予用户清晰的获取信息线索,也能使页面更加紧凑美观。界面结构可以分为显性的界面元素布局和隐性的信息结构化表现。

2.1 界面元素布局

在网页界面中,设计师根据一定的美学原理,在有限的页面空间中,组织各种视觉信息,如文字、色彩、图形图像。网页界面中的显性信息是指用户能直观察觉的,可通过阅读和浏览被感知到。有效地视觉信息交流或是将内容组织设计成块成为我们设计的核心任务[4]。结合用户视觉习惯和认知特点网站通过良好的视觉元素布局使界面具有艺术美感,用户更容易获取信息。

2.2 信息结构化表现

网页界面中的隐性信息是通过界面中的各种显性视觉元素所表现出来的隐藏性信息。界面中的隐性结构关系其实是对视觉信息构建结构,实现信息的结构化。通过对文字、图片等信息元素的组织和编排展现所需传达的信息,搭建合理的信息结构和内容组织对用户认知网页效果至关重要,良好的界面环境对帮助用户认知有很大的促进作用。因此合理规划界面中的元素,在界面设计过程中注重界面信息结构的表达,提高用户对界面信息的认知效率。网页界面以传达信息为目的,信息的组织关系有并列、关联、包含等。当界面中呈现多种信息时,有些信息可能是相关的,可以利用接近、相同形态等方式表现信息的并列关系;信息间的关联关系,可能是一对一或者一对多的关系,将关联的信息放置在一起,保留合适的留白,既能保持元素的联系性,又能提高网页的适用性;网页信息也存在着包合关系,通过对信息合理区分,将页面中的信息进行纵向延伸,减少单页面的信息量,缩减用户的搜索时间。

3 网页界面的格式塔原理应用

界面中元素的组织对界面信息认知有直接影响,因此合理规划界面中的元素至关重要。在界面设计中运用格式塔原理为设计师提供了一种新的思路,通过显性的界面元素布局,传达隐合信息关系,有效提高用户对界面信息的认知效率,提升用户体验。格式塔原理分析人的眼脑视觉规律,从整体角度把握事物的知觉结构,对信息进行简化、组织、加工来规划界面信息,使界面更加协调,易于理解。通过对格式塔原理的分析,提醒设计者在设计时保证让界面上的信息适应人的视知觉规律,提高界面的可视性。对于静态网页界面设计,最重要的格式塔原理有以下几条:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理和主体与背景原理。

3.1 接近胜和相似性原理

接近性和相似性原理都倾向于把信息经过梳理和归纳进行分组,将一大段信息分割成更易于浏览和阅读的若干块,降低认知难度。接近性原理是指人的视觉习惯会根据信息元素的相对物理位置远近,感知信息是如何组织在一起的。在一定的平面区域内,互相靠近的对象看起来是一组,距离较远的则被分为另一组。如图1,蓝色圆形在纵向排列上的距离相对横向上更短,人眼容易将图形认知成四条“竖线”;而右侧黄色圆形在横向排列上的距离相对纵向上更短,人们倾向将图形认知成四条“横线”,同时下方三条“横线”间距更小,所以人们会先将整体图形认知为上下两部分,再区分出上方一条“横线”和下方三条“横线”。

在网页界面中,相关联的信息元素可以利用接近性原理进行整合,利用设计元素的位置距离实现信息关系的表达。如图2,网页功能为展示图片信息,独立的图片模块包括一张图片、名称文字、标签图形三个元素,相关联的三个元素之间的距离明显小于模块与模块的间距。网站通过运用合理的留白方式,改变了使用分栏线区分信息的方式,减轻无关元素的视觉干扰,更具设计感。

相似性原理指的是对于具有相同或相似形状、颜色、结构特征的元素,人眼倾向于将它们归为一组信息。如图3,人眼将圆形归为一组信息,将矩形归为另一组信息,运用形状区分信息种类;颜色相同的蓝色圆形被认知为一组信息,黄色圆形则为另一组信息,通常颜色不同的信息更为突出,运用颜色区分和强调信息;对于结构上存在差异的元素,人眼首先将结构特征相同的归为一组,人们将大矩形视为一个整体,四个小矩形视为另一个整体,结构特征的不同可实现信息分类和区分信息层级。

在网页界面中,相似性原理应用情景一般有两种。一种是利用有共性的元素或元素组织形式表现信息,表示该信息具有相似的功能,满足了同一个任务需求。如图4,推荐的店铺信息包合七种,分别为店浦图片、店铺名称、星级图标、点评数量、菜系类别、位置信息、人均价格。这些信息元素采用一致的排列布局,具有相同的结构特征,用户倾向将界面中的信息感知为三个具有同一功能的模块,增强信息的关联性与整体性。另一种是利用元素的差异表示不同功能,并强调形状、颜色或结构特征独特的元素。如图5,主功能操作为四个按钮图标,其中“发送”按钮样式在颜色和图标上区别于其余三个,从而突出了重点功能,获得用户更多视线关注,提升操作效率。

3.2 连续断口封闭性原理

连续性和封闭性原则倾向于让信息以完整形态的方式呈现,将不熟悉的形式转换成符合以往认知的对象,自动补齐缺少的部分,从整体上把握事物。连续性原理是指人们倾向利用物体运动的趋势,将没有连接在一起的个体加工成连续的,将零散的信息认知成一个相互联系的整体。如图6,人眼在识别断断续续的线段时,会将断裂的部分在脑海中连接,同时连接成的整体是具有方向倾向,在识别图形时,会将图形认知为两条相交的直线和交叉延伸的弧线。如图7,在视频网页界面的“播放记录”信息中,节目图片最下方用线条元素表示观看进度,通过不同灰度的线段表示已观看和未观看的节目长度。用户在认知该信息时,不会独立地去理解这两条线段,而是根据方向的引导,将两条线段连接起来,理解线段合义。

封闭性原理指的是人们根据自身经验,更倾向于识别一个完整熟悉的物体,会自觉将存在缺漏的物体补充完整。如图8,左侧图形为四個扇形,人眼在识别时,倾向将图形认知为一个熟悉且完整的图形——圆形,自主将缺少的空白区域在脑中填充。封闭性强调信息的完整,呈现出的元素存在空缺,人们意识中仍会将元素当作完整的整体处理。如图9,“用户”和“星标”图形因重叠组合与前后遮挡的关系变得不完整,而人眼会根据已有经验,将后面的“用户”形象补充完整。采用不完整图形作为图标,使图标更透气,更具节奏感,且不会给用户感知理解造成困难。

3.3 对称断口主体与背景原理

对称性和主体与背景原理具有简化对象的倾向。对称性原理是指在面对复杂的对象时,我们的视觉系统会按照最简化的形式来认知对象,更易感知匀称的物体,倾向将对称的元素感知为一个整体。如图10,当人们看到左侧的图形时,人眼趋向将复杂的图形简单化,寻找具有秩序与稳定的元素,把图形认知为左右两个方形,从而降低图形复杂度。如图11,在网站中,对称的元素看起来是舒适、和谐的。

主体与背景原理是指在一个场景中突出强调某些元素,占据人们主要注意力,而其余元素退后成背景,起衬托作用。该原则为图像营造一种层次感,主体元素在视觉上更靠前,人们会优先感知主体部分,背景则不容易引起注意,从而通过这种形式简化人们的认知过程。如图12,人们的视线会先被面积较小的圆形吸引,面积大的矩形在之后才被感知。如图13,在网页界面中,在背景之上添加蒙版是常用手法。主体元素在蒙版之上,是页面中最突出的元素;背景在蒙版下面,进行弱化处理,用户仍能知道他们所处的环境。

3.4 格式塔原理的综合应用

格式塔原理是描述人们如何直观的感知对象。格式塔原理中各原理并不是孤立的,而是共同起作用的,它们之间具有强关联性,是相辅相成的关系,可以根据具体需求和用户场景,进行组合运用。但各原理之间存在着相互作用,同时使用某几个格式塔原理进行设计的时候,可能产生违反预期效果的情况。为了消除这种影响,当设计好页面之后,逐一的用各个原理来考量各设计元素之间的关系是否符合设计初衷,以达到最好的网页视觉效果。

4 结语

通过对网页界面中信息结构的分析,得知优秀的网站除了具有视觉上的美观,更重要的是信息结构设计。以格式塔原理为指导,界面上的信息以结构化的形式呈现,挖掘信息之间的相互关系和规律。这样的网页界面适应人的视知觉规律,提高网页的可视性。

参考文献

[1]乔柳.网页界面设计中的信息图形化研究[D].上海交通大学,2010.

[2]谭先联.开放性网络基于超链接的信息组织策略的应用[J].科技资讯,2010(22):19-20.

[3]Shi P.Visual Information Interactive Design on Web Interface[J].Advances in Multimedia,Software Engineering and Computing,2011,(2):457-462.

[4]黄琳斯.视觉层级下的网页布局设计研究[D].中南民族大学,2014.

作者:邢梦霞

上一篇:广播电视财务管理论文下一篇:地方农业技术推广论文