400-100-7350
首页 >资讯干货 >行业头条 >艺术符号学视角下的移动学习客户端GUI设计
艺术符号学视角下的移动学习客户端GUI设计
发表时间:2016-02-15 来源:《现代教育技术》 6740阅读

QQ图片20160215092953.png

摘要

  文章基于艺术符号学的视角,从版式、色彩、图标、文字四个方面讨论了移动学习客户端GUI的设计,并结合相关案例探索问题解决的策略,以期为理想的移动学习客户端GUI设计提供新的思路。



引言


  随着移动4G以及互联网技术的迅猛发展,移动终端和APP逐渐成为了人们工作、学习的主要介质。“移动学习客户端”作为学习者与移动设备的直接媒介,对移动学习的推广和发展具有重要意义。而设计出一套便于学习者准确、快速、有效接受与认知的移动学习客户端GUI(Graphical User Interface),就成了“移动学习客户端”成功与否的标志之一。


  移动学习以其“Anyone、Anytime、Anywhere、Anystyle”的4A自由学习方式,满足了人们在信息爆炸时代的学习需求;同时,‘‘移动学习为教育带来了学习方式、学习内容、学习场所、学习文化的变革”,是高校学习者必不可少的学习方式[1]。纵观近十年来移动学习的相关研究,主要集中在移动学习的概念、理论、技术、学习平台开发、课程资源开发等方面。在平台设计开发研究中,整体还是偏向于走“重技术、轻艺术”的路子,而站在艺术学角度的研究尚少。随着经济、科技的不断发展,艺术成为了现代人生活、学习中不可或缺的精神食粮,人们对艺术审美、艺术传达情感的需求越来越强烈。因此,基于艺术符号学的视角来研究移动学习客户端GUI设计,有利于移动学习的推广和发展,并对“信息技术支撑下的视觉素养培养和新型视觉教育资源开发”有着重要的推动意义和实践意义[2]。



移动学习客户端艺术化设计的理论依据


  20世纪初,瑞士语言学家索绪尔和美国哲学家皮尔士最早提出符号学理论,认为符号学是研究符号系统的学问。根据此理论,又延生出“符号是代表或表现其它事物的东西,它可以被某人所理解或解释并对某人具有一定意义”[3]等观点。可见,符号作为一种传播手段,承载着信息传播的功能。


  艺术符号是符号系统的高级层面,它不仅是一种表现,更是一种创造和解释。艺术符号学理论由美国哲学家、美学家苏珊?朗格在20世纪50年代创立[4],她注重艺术符号的内涵,表达并强调艺术符号的意味特征,将艺术符号归结为难以名状的“生命形式”,认为艺术中的符号都有自己的定义,是人类情感符号的创造[5]。受传统思维模式的影响,艺术形式长期以来一直被视为作品内容的附庸。因此,理解和把握艺术形式,将有利于调整只强调内容而忽视形式的理论偏差。符号要被感知,必须通过载体,本研究中艺术符号的载体就是GUI。



情感与审美——移动学习客户端学习资源的建设


  GUI是指用图形方式显示计算机操作用户界面,也称图形用户界面。GUI设计是一种集计算机科学、美学、心理学等多学科为一体的人机系统工程,强调将人一机一环境三者作为一个系统的总体。目前,移动学习客户端“缺乏教学设计、内容缺少趣味性和吸引力”[6]成为了移动学习进一步发展的瓶颈。移动学习有效性的实现依赖于艺术符号对GUI设计的指导,移动学习信息的传播则依赖于艺术符号的存在和应用。


  1传递情感交流


  苏珊·朗格认为,“艺术符号在设计作品中就是情感的意象,情感依附于生命的存在,所以情感特征反映了生命体的特征,情感形式表现了生命过程的形式。”[7]艺术符号学视角下的GUI设计是以一种客观的符号将一个主观的事件或活动表现出来,即以独特的形象将主观经验对象化,而“情感正是在这一过程中投射、外化为动态的情感形式与艺术作品直接融合在一起的”[8]。GUI设计中的情感释放能给学习者带来愉快的学习体验,调动他们的学习积极性和主动性,并拓展学习活动的深度和广度。


  2培养审美素养


  艺术符号的抒情是一种审美表现,需要有意识地予以控制和组织,使之有序化。本研究的GUI设计依据学习者的审美需求,对设计对象进行组织和安排,赋予新的表现形式,融汇成一种美的知觉。视觉审美能力在信息时代非常重要,审美交互能触发学习者的探索欲望和创造激情,并营造出一种寓学习于审美之中、以审美促进认知与创造的学习氛围。


  3建设学习资源


  随着移动学习的不断推广,学习者逐渐掌握了获取知识的权力,并通过利用新技术自主享受学习资源,故学习资源的建设成为了教育发展的重中之重。不重视学习资源的开发建设,不仅会造成教学投资上的浪费,还将直接影响教育改革的质量[9]。先进的移动学习客户端对学习资源质量的依赖性更大。基于艺术符号学的移动学习客户端GUI设计,利用现代信息技术手段,开启教育资源的新视角,赋予教育资源新特质[10],必将推动高质量学习资源的开发与建设。



有“意味”的形式——移动学习客户端GUI设计


  苏珊?朗格认为艺术符号能够创造有“意味”的设计形式。艺术符号学视角下的移动学习客户端GUI设计,既要寻找一种最恰当的表现形式去实现移动学习的交互,还要兼顾视觉表达的艺术性。当移动学习客户端和学习者的环境发生联系并具有个体性的意义和价值时,学习将变得更加有吸引力,学习者才能对移动学习的交互认知更加持久、深入,学习效果的提升也才会更加明显。


  1版式设计


  版式设计是学习者对移动学习客户端的一个整体认识,它的整体元素布局直接决定了学习者学习的逻辑性和交互性,对提高学习效率和实现交互功能有积极的意义。


  (1)移动学习客户端GUI版式设计的视觉传达要素


  ①点:在版式设计中,任何一个独立存在的文字、图标、图片、按钮等都可起到点的作用。


  ②线:根据版式设计的需要,点的属性会转化成直线或者曲线的属性。


  ③面:当很多点密集在一起成片时,即成为面。


  ④留白:在版式设计中,留白并不等同于“空白”它是为了其它元素的存在而起透气、放松的协调作用,避免版面过满、过实。


  (2)移动学习客户端GUI版式


移动学习


  ①比例与适度。“随着知识爆炸时代的到来,学习者学会如何学习和学会找到有用的资源成为教育的首要目标。[11]有关心理学研究表明,“人的视线在一个既定的平面内分布的注意力不均衡,注意力集中依次分布在版面的左上、左下和右上部。”[12]如在网易云课堂APP界面中(如图1所示),将标题置于页面的正上方居中位置显得醒目大气;考虑到用户使用手机的习惯和方式,将登录方式的图标置于页面底部方便滑动一一这些有序的且符合学习者视觉、心理和生理感受的布局,使学习信息的主次关系一目了然,可减轻学习者的浏览压力,有助于提高学习效率。


  ②对称与平衡。对称与平衡可以看作是对设计内容主次、轻重的权衡。如在网易公开课APP界面中(如图2所示),对称不仅指绝对对称,也可指一定范围的相对对称;平衡则是符合大部分学习者视觉心理需求的一种舒适、稳定的设计呈现。


  ③节奏和韵律。重复的节奏给人以一种合乎秩序的、和谐统一的感受;而在这一重复节奏中所产生的韵律变化,能够使学习者产生不同的心理感受,打破学习中的沉闷感。因此,通过重复的节奏及由重复带来的韵律变化,可以给人带来美的享受。


  ④扁平化。移动学习客户端界面的扁平化设计强调去繁为简,注重核心信息的突出。如在AppMidm-iso界面中(如图3所示),设计者通过色彩和形态的节奏韵律变化,结合扁平化的设计风格,使界面既简洁美观,又富有变化,值得设计者学习和借鉴。


  2色彩设计


  色彩是视觉符号的灵魂,直接影响事物的表现效果。移动学习客户端GUI的色彩设计影响着学习者的第一印象,它的用色是沉稳协调还是醒目跳跃等还会直接影响学习者的学习兴趣。


  (1)移动学习客户端GUI色彩设计的视觉传达要素


  ①背景色:背景色作为主体,在界面中所占的比重较大,构成了界面的主要色调。在设定主题色时要根据学习内容进行合理的选择;当主题色确定之后,还要选择相搭配的各种辅助色,并注意主次、轻重分明,以起到渲染主题的作用。


  ②文本色:这里的文本主要指菜单文字、导航文字、说明性文字等用来表达信息内容的文字形式。文本色与背景色要拉开对比,才能在界面里更容易被识别。


  ③图标色:图标是GUI中的重要内容,可以具象地表现信息,容易激起学习者的关注。图标色的设计与背景色、文本色等元素既要相互呼应,又要醒目突出,以发挥均衡稳定的作用。


  (2)移动学习客户端GUI色彩设计路径


  色彩设计要遵循一定的配色原则,可以参考24色相色环。互补色的对比度最强,可以通过处理主色与次色的色块大小、降低色彩的饱和度、添加一组中间色等来缓和强烈的对比效果。对比色配色时,可以插入一些中性色来中和主色与次色的关系,以产生相对和谐的效果。邻近色色彩较为近似,冷暖色组明显,色调容易和谐,感情特性稳定平和。综合整个色环的色彩关系,可知渐变的色彩让人感觉很舒缓、很放松,同时也让人感觉丰富并避免冲突。


  色彩作为符号语言,具有象征和联想的功能,不同的颜色能够传递不同的情感和气息。因此在运用色彩的时候,不仅要充分考虑设计对象,还要根据学习内容来进行恰当的色彩规划。


  3图标设计


  “图标就是具有指代意义的图形符号,这是一种高度浓缩的图形,能够快速传达信息,且便于记忆。”13]格式塔心理学派指出,当大量的视觉信息元素进入人们的视野时,人们会把形状、大小、肌理、颜色、方向上近似的视觉元素归纳为一类,进而简化对视觉信息的识别。移动学习客户端GUI的图标设计是一个将信息图形化的过程,需体现情感传递和信息诉求的功能,因此既要増加美观的表现形式,又要保证信息的真实准确性。


  (1)移动学习客户端GUI图标设计的视觉传达要素


  ①程序图标:是移动学习应用程序在客户端主界面的图标,是在主屏幕展现应用的方式,是学习者对应用程序的第一印象。


  ②操作工具图标:所指示的内容包括移动学习的交互功能和步骤,如在线阅读、群聊、论坛、邮件发布、在线视频、在线音频、信息发布、评价等。


  ③导航图标:是客户端界面的方位标识,能指引学习者进入应用程序的不同区域。


  ④状态图标:显示移动学习程序中某些特定的状态,用于表达各种应用的提醒。


  (2)移动学习客户端GUI图标设计路径


12.png


  ①表意性。GUI图标设计应该以一种直观的方式向学习者传达信息,使学习者不需要任何文字释义,就能明确感受图标的具体含义,并很好地完成识别认知。


  ②艺术性。GUI图标设计应该具有美的表现形式,为信息的传达増添美感,并通过这种美感使信息在繁杂的信息中脱颖而出,达到吸引学习者关注的效果。如在360手机桌面主题设计大赛一等奖作品的界面截图中(如图4所示),该作品的图标设计就契合主题的“禅”意,以清新脱俗、略带立体感的艺术形式呈现,错落有致充满韵律,可使用户浮躁的心慢慢沉静下来。


  ③整体性。图标的设计除了代表的含义、功能,还要配合整个系统的规范性。在一套完整的图标设计系统中,颜色的选区、颜色的布局、样式的大小都必须达到规范和均衡,将图标的整体风格营造为一个自然和谐的界面环境。如在2012OPPO手机主题设计大赛获奖作品的界面截图中(如图5所示),该作品通过线描图形的方式来进行图标设计,配以规整的网格线背景,使界面呈现出整齐统一的系统化风格。


  4文字设计


  文字的主要功能是通过阅读来区分信息的重要程度,是强调信息要素和信息沟通的有效手段。移动学习客户端GUI的文字设计应当注重学习者在接受信息时的情感体验,使学习者远离由数据、文字等组成的单一枯燥的信息,而代之以一种愉快的心情去接受、理解信息。


  (1)移动学习客户端GUI文字设计的视觉传达要素


  ①主题文字:主要指移动学习客户端移动学习应用程序的菜单文字。


  ②内容文本文字:指移动学习程序中各个操作工具所涵盖的学习内容、说明性文字等,篇幅相对较多,是文字信息的主要呈现区域。


  ③特殊文字:显示/提醒/确认画面、播放/进度画面中还有一些特殊应用程序的文字。


  (2)移动学习客户端GUI文字设计路径


移动学习


  ①简洁性。由于移动学习客户端GUI文字设计的最终目的还是为了学习,因此,文字设计不宜太花哨,应以便于阅读为前提。


  ②统一性。移动学习客户端GUI文字设计中最多不能超过三种文字,太多类型的文字出现在同一个版面会显得杂乱无章。如在网易公开课App界面文字设计的界面截图中(如图6所示),通过变化文字的字号大小、粗细、长短,设置合适的字间距、行间距等,实现了文字层次明确、界面具有秩序感和统一性的效果。


  ③审美性。文字作为艺术符号,本身具有独特的艺术气质。通过编排、设计不同的文字形式,可以实现文字的艺术性。如在优课优信APP标题文字设计的界面截图中(如图7所示),通过将文字笔画局部图形化的方式,使文字与背景形态成呼应之势,从而产生了一种和谐的动态美感,充满了活力气息。


  随着科技的进步、信息传递方式的多样化,移动学习客户端GUI设计将不再是简单的陈述排列,而应该建立在传统的审美经验基础之上,力求不断创新,用艺术符号所具有的独特象征优势和情感表达力去设计界面的整体风格。



结论


  移动学习客户端GUI设计的价值在于促进学习,是功能化与实用性的结合。基于艺术符号学的移动学习客户端GUI设计不仅力求向学习者提供一个交互性强的操作环境,而且还从用户的情感、视觉审美等方面进行全盘考虑,力图将优质的学习资源推送给学习者。艺术符号的情感化、审美化与功能性、实用性从来就不是对立的,给理性的设计赋予情感的内涵表达和艺术审美的外延伸展,是设计的更高层面。从艺术符号学的视角来研究移动学习客户端GUI设计,对于学习认知和学习效果的影响深远,也为移动学习资源的建设提供了一种新的思路。


移动学习

  

移动学习


问鼎云学习,大企业信赖的人才培养与发展专业平台
友情链接:
400-100-7350
wdxuexi@wunding.com
深圳市南山区科技园紫光信息港C座8楼

问鼎云学习
移动客户端扫码下载

关注微信公众号
获取更多培训干货

粤ICP备07037912号 Copyright © 2012~2021 问鼎资讯 Inc. All rights reserved 工商网监 电子标识
获取课程清单
确认申请
获取培训方案
确认申请
免费体验在线学习平台
确认申请
预约在线学习平台演示
确认提交