论第五媒体触屏手机图形用户界面设计

论第五媒体触屏手机图形用户界面设计

随着手机交互技术的高速发展,人们正经历着摒弃传统按键手机,快速迈进全触屏智能手机(下文简称“触屏手机”)操作的新时代.掀开这一崭新历史开端的是美国苹果公司在2007年6月推出的革命性无键盘触控手机“iPhone”,此款手机开创性地将全新多点触控技术(Multi-Touch)应用到人机交互方式中,随后SAMSUNG、HTC等众多移动制造商相继推出自己的触屏手机,这股“触摸式”浪潮很快涌入人们的生活.

从视觉角度讲,触屏手机具有大尺寸、高分辨率的屏幕,以及简约时尚的外观设计优势的同时,更能满足处在移动媒体时代的个体因使用潮流数码产品所带来的社会认同感.从人机交互层面看,传统按键手机的交互模式往往是通过拇指发力行为实现对手机的操控,过于频繁的操作使用会出现拇指劳损的症状,而触屏手机是跟据电容屏或电阻屏的工作原理,在交互方式上只需触摸屏幕,并且各手指能替换操作,这样就避免了单一手指在手机使用过程中劳累的情况[4].更为重要的是在感官方面,由于触觉是人体感官中最为重要和敏感的功能,“触摸”会影响人们在社交时的态度和行为,所以触屏手机的操作过程比传统按键式手机更能使人产生沟通情感,并且其交互过程的简单化和快速适应化更易产生舒适感,继而带来交互的真实体验和实现人际交流的满足感,这些都给触屏手机的使用者带来生理和心理上的全新体验.

触屏手机界面设计的合理化要素及原则

图形用户界面(GraphicalUserInterface,GUI)的出现与应用为数字产品带来了革命性的交互体验,其内容主要包扩图标、导航、文字、色彩等视觉元素设计,以及与操作过程息息相关的版式布局设计两部分,它是用户与机器相互传递信息的媒介,即人机交互的视觉信息平台.优秀的图形界面设计在满足视觉美感需求的同时,更注重人机交互中的可用性操作,力图带来愉悦高效的操作体验,在触屏手机的使用过程中担任着重要角色.

1.视觉元素设计原则

触屏手机的操作平台中搭载了种类繁多的智能应用程序,其交互界面几乎全部由不同样式的图标构成.图标(Icon)是一种包含了特定语义且具有相应指示性的图形符号,在用户获取交互信息的过程中起着枢纽作用,好的图标设计要兼顾识别层面和语义层面的表达.

1)图标

识别层面主要涉及图标的形态、尺寸、材质等视觉要素.图标的设计必须充分考虑屏幕显示的特点,过大或过小的尺寸使用都会造成误触或操作困难,所以图标的尺寸设定和在屏幕内的排列数量、间隔空间都要合理有序,做到对每一个像素精打细算的使用.图标在细节上还应能避免因显示设备的抗锯齿技术而产生的被柔化效果,以及如何适度体现当前交互状态的变化.语义层面是指图标所要表达的含义能否正确的被用户所理解,是图标设计的核心[5].在设计过程中,设计师应根据事物在属性或功能上的相似性,合理运用直接指代或隐喻的设计手法把抽象的指令信息通过公众熟知的视觉形象表现出来,使图标具有明显的表意性,如图1,但视觉元素的运用要清晰易懂,不能超越使用者的自身阅历.

2)数码和字符字体

字体的恰当选择和字号的正确运用在图形界面设计中至关重要.是否具有高辨识度,是否适应于移动终端是选择字体时要首先考虑的问题.通常适合屏幕显示的字体多具有平直、精炼的结构特征.此外,字号、字距和行距还应设置为满足不同视力需求的用户自定义调节功能.

3)色彩

色彩和质感的合理化使用是保证界面能被清晰识别和体现设计感的直接方式.使用符合对比与调和关系的色彩来强化主体及丰富界面,但种类不宜过多,应兼具统一协调和层次丰富的视觉效果,以及遵循透视、光源等方面的设计规范.触屏手机界面中文字和色彩的使用都应充分考虑强光或弱光环境下的对比显示效果.iPhone手机配备的光线传感装置就能够灵敏地捕捉光线变化,自动调节屏幕的亮度,确保手机界面在通常环境下均达到最佳的显示效果.

4)视觉元素设计的一般性原则

第五媒体下触屏手机信息量大,视觉元素多;同时触屏操作对交互视觉元素间的距离也提出了更高的要求,在手机有限屏幕尺寸下,必须根据人的视觉生理特征,对视觉元素的形状、大小、笔划宽度和色彩进行合理设计,提高其可视性.关于数码、字符和图标的形状设计,应使与其它元素相区别的特征得以加强,而使容易混淆的部分得以减弱,使它们具有便于认读的特征,如文字,不论中英文,不同的字体认读准确性差别就很大.另外,要合理使用视觉元素的特殊效果,如加线、反底都能达到元素轮廓清晰可见、认读精准的效果.关于数码、字符和图标的大小设计,应根据正常人的视力和视距及手机一般使用环境共同决定.在正常的视觉条件下,它们的高度应按最佳视角设计,实验表明人眼的最佳视角约为10到30.数码和字符多为狭长形,其高宽比一般为3/2~5/3,而图标多采用方形[6].另外,数码和字符笔划宽度对其认读的准确性也有很大的影响.一般用笔画宽同字符(或数码)的高度的比值来界定字体的粗细,粗体字的这一比值为1/5或1/6,常见字体为1/8~1/10.正常情况下,粗体字比细体字更容易辨认.就提高可视性而言,背景和视觉元素的对比有很好的效果,如黑白对比就较为常见.

2.版式布局设计原则

版式布局设计是关于如何在有限的显示空间内有效地组织信息以提升交互效率的问题,要根据视觉认知规律将复杂的内容进行有序排列,清晰有效、地呈现信息层次结构,从而带给用户流畅的视觉感受,是整个图形界面设计的核心.与传统按键手机相比,触屏手机具有超大显示屏幕和交互手势多样性的特点,设计师必须通过清晰明确的版式布局设计来改善由上述特点所带来的误触指令、操作反馈不准确或单手操作难度增加等问题.用户对于触屏手机的操作要求是快速及时的信息查找与处理,传统按键手机采用的树状信息布局结构会增加使用者的记忆负担和操作难度,所以在保证关键信息完整的前提下,触屏手机的版式布局设计应以信息的明确传达和操作的简单易用为主要原则,以扁平化界面布局方式为主导.底层信息的直接上移和平铺式显示能缩短信息访问路径的长度,减少使用者对中间层级的繁琐操作,从而提高交互效率,这是扁平化界面设计的优势[7].需注意的是,扁平化的设计方式会削弱信息间的原本层级关系,在版式布局上应根据用户的需求程度和兴趣重点做安排,让最契合用户期待的信息优先显示.iPhone手机的前端性交互体验能从其版式布局中直接体现.效用型应用程序(UtilityApplications)在iPhone手机的操作平台中颇为常用,此类应用程序对用户的输入要求很低,快速查看信息是主要目的,所以在版式布局上多以平面列表的方式显现,如图2,以及使用简单和标准的视觉元素.在界面的信息内容选择上,只选取最必要信息,并将其展现在同一层级内,不做深入的信息层次划分,保证用户对信息的快速获取或者执行某一具体任务.触屏手机界面中所显示的相应功能图标数目繁多,在主屏界面的版式布局设计上,iPhone将其划分为两大区域,上端区域放置各类应用程序图标,下端区域用不同材质的底图衬托显示4个最常用功能图标作为快捷导航,且上下两块区域间以翻页提示符号作为分隔,如图3,这样的布局形式实为将下端区域作为最方便的单手操作区,实现了与传统按键手机交互模式的延用对接.#p#分页标题#e#

结论

移动数字浪潮的到来使个体的信息空间得到延伸,同时也颠覆了传统传播活动中各环节间的相互关系.全触屏智能手机的操作方式在满足公众交流信息的同时,也在不断完善人机交互过程中的感知和认知模式,其中图形界面设计就起着关键性的桥梁作用.图形界面设计必须将隐性的逻辑数据信息和层级架构通过显性的视觉方式清晰呈现,将用户的实际操作行为和切身感受纳入设计核心,在拥有良好视觉效果的同时,达到流畅化的人机交互体验目的,这是最佳图形界面设计原则的宗旨.(本文图略)

本文作者:张旭芳 郭会娟 汪海波 单位:安徽工业大学机械工程学院