基于注意和视知觉的移动端界面设计应用

[复制链接]
发表于 2019-6-26 16:05:40 | 显示全部楼层 |阅读模式
基于注意和视知觉的移动端界面设计应用
殷俊,王婉晴
江南大学数字媒体学院,无锡 214000)
摘要:目的针对移动端软件数量激增以及用户对软件设计要求不断提高的发展趋势,从注意和视知觉的角度出发,研究移动终端界面设计中提高用户粘性的方案。方法首先从注意和视知觉对用户心理和生理的影响,来剖析软件中提高用户注意和视知觉利用率的设计因素,然后从用户需求和移动终端设计特点出发,通过分析市面上的软件案例,对比其中对注意和视知觉设计的差异,最终提出在移动终端界面设计中,能提升用户注意和视知觉体验的设计模式,以及符合信息布局的交互设计具体创新细节。结论移动终端界面设计影响着软件的用户粘性,把握注意和视知觉在界面设计中的应用特性,在提升产品使用舒适性的同时满足不同用户的需求,为用户提供更好的使用体验。
关键词:界面设计;设计模式;注意;视知觉;移动终端;创新设计
随着移动智能设备的普及,移动端软件数量呈爆炸式增长,根据工信部数据显示,截止2017年6月底,中国本土第三方应用商店移动应用软件数量超过232万款,仅6月单月就新上架了12万款移动应用,到2020年,苹果商店移动应用数量预计将达到500万款。与应用整体数量激增形成鲜明对比的是应用单体生命周期的缩短。据艾媒咨询统计,上架后APP的生命周期平均只有10个月,单体APP被下载使用后,平均会在1个月内被85%的用户卸载,而能被用户使用超过5个月的应用程序仅有5%。综上所述,移动端应用软件生命周期短,大量的APP虽然仍在应用市场,但早已无人问津,考虑到应用软件的庞大数量和单体应用不菲的开发成本,这样的现状使得人力和物力资源被严重浪费。移动应用生命周期短的原因在于用户粘性低,在诸多影响用户粘性的因素中,应用开发过程中的界面设计是极其重要的,优秀的界面设计可以提高用户粘性。在以用户为中心的设计模式发展趋势下,注意和视知觉是不容忽略的因子,目前基于注意和视知觉的移动端界面设计应用研究相对较少,仍然有很多界面设计不符合注意和视知觉的特性。
1 注意和视知觉理论概念界定
1.1 注意
注意一般指大脑加工的选择性。正如William James对注意的定义:人人都知道注意是什么。注意是对心理资源的一种占用,是从同时呈现的多个物体或思维序列中选择其一的过程,其核心内容是意识的集中和专注。William James同时指出,注意可以被区分为主动和被动。当目标驱动对注意进行由上到下的控制加工时,注意是主动的;当注意受到外部刺激而被由下到上地控制时,注意是被动的[1]。在智能浪潮下移动终端的界面设计目的中,实现人机交互,这一本源目的已不是研究重点,如何抓住用户注意从而保持用户的粘性已然成为界面设计者思考的重点。用户在使用环境里并没有把全部的注意力投入到移动终端上。如何通过基于注意和视知觉理论的界面设计持续抓住用户的注意,是文中的研究重点。
1.2 视知觉
视知觉理论衍生自格式塔心理学理论,20世纪初心理学家、美学家阿恩海姆基于格式塔心理学提出了视知觉理论。视知觉理论重点强调艺术与审美主体视知觉的关系,把视知觉看作是艺术创造和艺术欣赏的最基本要素[2]。视知觉理论主要构成包括简化率、图底关系、运动律、光色律和美感知觉,其中任何一点都对界面设计具有深刻的指导意义,例如视知觉最基本规律之简化律认为,视知觉促使人把看到的一切都尽量组合成最简单的结构,集多样化的形式与丰富的内容于同一结构中,使视觉力获得一种秩序。同样在界面设计中,简洁美观是衡量设计优劣的标准之一。文中以注意和视知觉理论为依据进行分析,研究其在移动端界面中的应用。
2 用户界面
用户界面是人机交互过程中媒介的图形化表达,可以把机器侧信息转换为人类能够接受的表达形式[3—4],是用户和机器硬件之间双向施加影响和双向作用的软件区域,人机交互的各种信息交流以及控制活动均在此区域进行[5—6]。界面设计是指对人机交互方式、界面美观、操作逻辑的整体设计,出色的界面设计会给用户带来绝佳的视觉体验和互动操作感受。用户界面设计是计算机科学、认知心理学与设计学相结合的产物,也涉及语言学、人工智能和社会学等学科[5]。
3 基于注意和视知觉的移动端界面设计模式
3.1 精简界面,专注目标
注意力是有限的,当用户注意力转移到移动应用本身时,就无法顾及任务的细节,破坏用户对事情和任务进度的跟进[7]。由此得出,应用软件不应让用户过多注意到软件自身,而是应该藏于软件的背景中,精简界面,主要呈现任务相关的界面元素,让用户把注意力放在界面中的目标任务上。
3.2 视觉相似,引导任务
当用户的思维被界面中的任务、目标等完全占据时,有时会无视所处环境中那些平时能注意到并记住的其他物体和事件,这一现象被称为非注意盲视。用户除了自己关注的目标之外,注意不到图片特征的差异,这一现象被称为变化盲视[8]。当人们与软件、电子设备或在线服务进行交互时,注意不到屏幕上所展示的东西变化的现象时有出现。由此得出,界面的变化在特意显性化的同时,还应设计出和用户关注的主进程信息气味相同的界面元素,通过渐进步骤把用户的注意力引导至变化发生的地方。
3.3 辅助记录,集中注意
注意力的保持需要集中,用户在执行目标任务过程中产生了衍生元素,而这些衍生元素不应去分散用户的注意,目标任务周围的元素要做出标记来提醒用户任务的进程,而不是让用户去记住任务完成度。由此得出,无需用户自主完成以及完全无需关注的任务,都应该在交互系统中被自动区分标识和呈现,同时交互系统应该允许用户标记或者移动对象,以便分别标记各任务进程的完成度,让用户得以集中注意在主任务中。
3.4 普世设计,延长注意
用户在执行任务过程中更倾向于采用熟悉的操作路径,而不是探索新路径。例如用户常用的美团APP,用户在熟悉了界面中订餐功能的整体流程后,更希望订酒店也是同样流程,而不是不同的功能有不同的付款步骤。由此得出,对于界面设计中的框架性基础项,应多采用同质化的设计方式,采用普世审美设计、普世操作设计,减少用户用脑程度从而降低疲惫感,使注意力集中时间更长。
3.5 监测提醒,简化操作
用户每完成一个任务都伴随注意力的转移和释放,同时与这个目标相关的短期记忆可能会被清除,而这种短期记忆失效产生的操作困难,是完全可以预料,并且可以避免的。由此得出,对未完成的任务进行监测提醒是系统设计中必须考虑的,这样有利于减少用户的操作失误和操作量,让用户在更轻松的环境下完成操作任务。特殊情形下,扫尾工作甚至可以由后台自主收集处理,界面只需体现主要操作和展示后台收尾工作处理结果即可。
4 基于视知觉注意的移动端界面设计方法
4.1 经典设计
4.1.1 创造视觉焦点
在移动终端的设计中使用聚焦点原理可以使设计对象本身从整体画面中脱颖而出,降低用户学习成本,这样用户才能快速分清主次,即分清行为召唤的主要和次要部分,这就意味着,主要行为召唤必须能在瞬间唤起用户的注意,绝不模棱两可[9—10]。设计者可以通过突出目标的颜色、形状、大小、位置等视觉表现形式来创造聚焦点,获得用户的注意。如ofo共享单车手机软件界面,见图1。
width=232.5,height=192.75
图1 ofo共享单车手机软件界面
Fig.1 Mobile software interface of ofo shared bike
共享单车APP作为强调效率性的即时即用软件,需要以最直接的方式呈现给用户,区别于购物类APP界面设计中以内容为主导的方式,打车类APP界面设计则以功能为主导。例如“扫码用车”、“立即兑换”等功能项,用更强烈的颜色对比、更高的占屏比,直接引导用户。另外,加入动画设计也是创建聚焦点的常用方式,此类设计多用于游戏类APP的界面设计中。动画的加入不易过多,以每个页面存在一个动画点为宜。
4.1.2 强化重要信息
界面设计过程中,需要假设用户在使用过程中可能不够专注,信息的呈现可能被用户忽视,尤其需要注意的是那些只在特定情况下出现的自动隐藏形式的重要信息。在实际生活中,用户可能分神去看周围事物而错过这些信息。相反,对于不是特别需要用户感知的信息,设计者可以使用短暂闪现的显示方法,从视觉上来说,这样能让用户界面更加简洁,让用户的注意力集中在更有意义的信息上,如豆瓣手机软件界面,见图2。
width=163.5,height=291.75
图2 豆瓣手机软件界面
Fig.2 Mobile software interface of Douban
4.1.3 屏蔽冗余元素
用户观看移动终端的屏幕时,为了筛选有用和无用内容,需要通过选择性注意的能力,集中注意力于有用内容上。如爱奇艺APP播放器(见图3),用户点击屏幕设置完影片分辨率后再次点击屏幕,分辨率选项界面就会消失,就能把整个屏幕都用于观看影片。
width=220.5,height=124.5
图3 爱奇艺APP播放器
Fig.3 iQIYI APP player
界面屏幕上无用的信息越多,大脑选择耗费的认知成本就越大,就越容易疲倦。对此,设计者可以使用交互时刻的概念,即用户看到的屏幕内容、刚刚进行的操作、最终的目标等不同因素,决定了用户不同的需求。设计者应该考虑用户在什么时候需要什么主信息,使得用户越发地被应用软件所吸引。
4.2 创新设计
4.2.1 共享共赢,遵循用户注意曲线
用户在长时间使用一款软件时注意力往往会下降,使用欲望随之降低,用户可能会觉得食之无味,弃之可惜。如果一款软件经常让用户产生此种心理活动,那么会造成对它的使用频率降低甚至于卸载都是极有可能发生的。同样的,在使用某一软件过程的同时可能会对其他软件产生使用需求,这时该软件被关闭的概率也是极大的。鉴于以上现象,文中基于注意和视知觉理论中注意力随视知觉正弦性变动的特点,提出以退为进、共享共赢的界面设计方法,以更高效地利用注意和视知觉,保持用户粘性。
当某款APP对用户的吸引力逐渐降低或用户有其他APP使用需求时,设计者不妨采用动态悬浮的模式,暂时放弃对用户的注意力要求,使APP本身在当前移动端屏幕上处于次要被关注的状态,以退为进,共享屏幕,但不能完全处于后台运行。这么做让用户可以忽视枯燥内容,等待用户下次被感兴趣的内容吸引。
悬浮模式在界面设计中并不鲜见,例如布偶直播手机客户端,整个应用程序可以以只保留播放界面的方式悬浮于手机屏幕上,文中暂且将其归于静态悬浮模式,并针对当前悬浮模式设计的不足进行改进后提出动态悬浮模式,和微信视频聊天等APP类似。布偶直播客户端悬浮窗口见图4。
width=116.25,height=207
图4 布偶直播客户端悬浮窗口
Fig.4 Client suspended window of Buou live
目前这类悬浮模式的界面设计都固定了悬浮窗体的大小,对于屏幕较小的手机而言,无法获得好的视觉效果,甚至无法看清视频播放内容,因此笔者将悬浮界面设计为可边角拖拽改变大小的模式,动态悬浮界面见图5。
width=130.5,height=232.5
图5 动态悬浮界面
Fig.5 Dynamic suspended interface
4.2.2 智能服务,减少用户注意分散
人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术以及应用系统的一门新的技术科学,文中把AI和视知觉注意结合,提出AI服务模式界面设计。服务,顾名思义就是服务用户,文中将AI服务模式定义为自主服务模式。根据注意和视知觉理论,用户在视觉采集信息过程中,额外信息、操作越少,注意力往往越集中,持续时间越长,因此应用软件在用户正式使用之前,应该自主地去做更多原本需要用户去做的事,让用户在使用过程中更加的便捷。
以斗鱼直播手机客户端为例,界面中有弹幕开关、清晰度设置、屏锁开关等诸多需要用户设置的项目。一般而言用户的行为习惯是固定的,例如关于弹幕是否打开这个问题,界面设计中可以根据用户习惯自主设置,收集用户近3次使用APP时的弹幕打开情况,以最近一次占比50%,中间次占比30%,末次占比20%的比重计算出本次是否打开弹幕。斗鱼直播界面见图6。
同样的,例如一些APP中存在类似苹果手机悬浮Home键的悬浮体,不同用户喜欢放在不同位置,如果APP随时记录统计,记忆用户最常放置的位置,就可免去用户操作,让用户把注意和视知觉集中在内容本身。
width=227.25,height=127.5
图6 斗鱼直播界面
Fig.6 Douyu live interface
5 结语
文中针对移动端界面设计,以注意和视知觉理论为研究对象,以提高移动端应用用户粘性为目的,提出了基于注意和视知觉理论的设计模式、方法和创新设计。其中通过分析不同的视知觉呈现方式,总结出提高注意利用率的各种界面设计模式。通过分析经典设计案例,总结出其中的典型设计方法,并提出了共享共赢、智能服务的界面创新设计理念,同时给出了具体设计方案样例,以期达到提升用户体验,提高软件用户粘性的效果。在大数据和人工智能的年代,用户需求不断攀升,注意和视知觉的研究还需要结合认知媒介和人机交互表达方式发展,在移动设备方面做更深层次的研究。
参考文献:
[1] 曾军伟. 基于格式塔原理的交互界面信息结构设计[J]. 轻工科技, 2014, 30(6): 95—96. ZENG Jun-wei. Information Structure Design of Interactive Interface Based on Gestalt Principle[J]. Light Industry Science and Technology, 2014, 30(6): 95—96.
[2] 王苗辉. 基于视知觉的视觉信息界面设计研究[J]. 包装工程, 2011, 32(8): 49—51.
WANG Miao-hui. Study on Design of Visual Information Interface Based on Visual Cognition[J]. Packaging Engineering, 2011, 32(8): 49—51.
[3] 高玉娇, 覃京燕. 手机APP交互设计中动态色彩的视知觉研究[J]. 包装工程, 2016, 37(8): 134—137. GAO Yu-jiao, QIN Jing-yan. Visual Perception of Dynamic Color in Mobile APP Interactive Design[J]. Packaging Engineering, 2016, 37(8): 134—137.
[4] JOY G, PATRICK L, JOHN C. Key Influences on the User-centered Design Process[J]. Journal of Engineering Design, 2010, 21(2): 345—373.
[5] 钱晓波, 张凌浩. 面向空巢老人的家庭智能监控产品系统设计[J]. 机械设计, 2016, 33(12): 119—122. QIAN Xiao-bo, ZHANG Ling-hao. Intelligent Household Monitor Product System Design for Empty-nesters. Journal of Machine Design, 2016, 33(12): 119—122.
[6] MANZARI L, TRINIDAD C J. User-centered Design of a Web Site for Library and Information Science Students: Heuristic Evaluation and Usability Testing[J]. Information Technology &Libraries, 2006(25): 163—169.
[7] BRAISBY N, ANGUS G. Cognitive Psychology[M]. Oxford: Oxford University Press, 2012.
[8] 尹家鸣, 朱雨晴, 覃京燕. 基于心理学的人机交互界面设计的变异与常则[J]. 包装工程, 2014, 35(16): 26—29. YIN Jia-ming, ZHU Yu-qing, QIN Jing-yan. Based on the Psychology of Human-Computer Interaction Interface Design Variation and Standard[J]. Packaging Engineering, 2014, 35(16): 26—29.
[9] 孙辛欣, 靳文奎. 移动应用中的情感交互设计研究[J]. 包装工程, 2014, 35(12): 51—54. SUN Xin-xin, JIN Wen-kui. Emotional Interaction Design Research in Mobile Applications[J]. Packaging Engineering, 2014, 35(12): 51—54.
[10] 牛东方. 产品交互设计中的视觉形态认知研究[J]. 工程设计学报, 2013, 20(6): 459—462. NIU Dong-fang. Research on the Cognitive of the Visual Form for the Product Interaction Design[J]. Chinese Journal of Engineering Design, 2013, 20(6): 459—462.
Mobile Interface Design and Application Based on Attention and Visual Perception
YIN Jun, WANG Wan-qing
(School of Digital Media, Jiangnan University, Wuxi 214000)
ABSTRACT: The paper aims to deal with the rapid development of mobile terminal software and user's increasing demand for software design and to study the scheme for improving user's stickiness in interface design of mobile terminal from the point of view of attention and visual perception.Firstly, design factors of improving the user's attention and visual perception utilization in software were analyzed from influences of attention and visual perception on the user's psychology and physiology. Then software cases in the market were analyzed from the user's demand and mobile terminal design to compare the differences of attention and visual perception design. Finally, a mobile terminal interface design mode that could enhance the user's attention and visual perception experience as well as specific innovative details in line with the layout of the interactive design was proposed. The design of mobile terminal interface affects user's stickiness of software, grasps the application characteristics of attention and visual perception in the interface design, satisfies the needs of different users while improving the comfort of product usage, and provides users with a better user experience.
KEY WORDS:interface design; design pattern; attention; visual perception; mobile terminal; innovative design
中图分类号:TB472
文献标识码:A
文章编号:1001-3563(2019)10-0068-05
DOI:10.19554/j.cnki.1001-3563.2019.10.012
收稿日期:2018-12-13
作者简介:殷俊(1973—),男,博士,江南大学数字媒体学院教授,主要研究方向为动画艺术设计、交互艺术设计、数字媒体艺术设计。

快速回复 返回顶部 返回列表