手持移动设备交互界面造型形式研究.doc

手持移动设备交互界面造型形式研究 　　摘 要：手持移动设备包括个人数字助理（PDA）和移动，而随着经济和科技的发展手持移动设备已经变得越来越普遍，关于手持移动设备界面造型形式的研究也有越来越重要的意义通过对大量案例的研究，以及对未来可穿戴式设备界面的发展趋势的展望，探讨了一些针对手持移动设备交互界面造型形式的设计方法 　　关键词：交互界面；界面造型；移动手持设备 　　随着科技的进步，越来越多人机交互界面进入了人们的生活；科技的飞速发展也产生了更多样的交互形式而手持移动设备作为人们生活中接触最紧密工具，其交互界面作为人和设备之间互相施加影响、进行信息交流、实现机器功能的区域，不管是对于设备本身的成功与否，还是用户使用其设备带来的体验，都是非常重要的 　　1.手持移动设备的界面 　　图1 手持移动设备的物理界面和交互界面 　　Fig1 handheld mobile device interface and the physical interface 　　手持移动设备的界面包括了设备本身的物理界面，以及显示界面 　　设备本身的造型和物理界面是手持移动设备在造型设计中不能忽视的因素不同于显示界面可以根据传达的具体内容而变化，设备的物理界面是不可变的，相对固定的造型会直接影响产品外观，决定产品的基本操作。

　　而手持移动设备的显示界面是用户进行信息交流和功能实现的主要区域，是手持移动设备功能实现的主要依托在进行手持移动设备的交互界面设计过程中，鉴于手持移动设备本身决定了其屏幕有限，并可能随着科技的发展继续缩小（例如可穿戴设备）；使用环境的复杂性；用户的多样性；实现功能的多样性等因素，对设计者提出了较高的要求而手持移动设备交互界面的造型形式对信息的呈现、功能的暗示、交互方式的引导都有着重要的作用，是手持移动设备交互界面设计中至关重要的环节 　　2.交互界面造型形式的特性 　　交互界面造型形式根据呈现信息的不同、实现功能的不同，根据实现功能的交互逻辑顺序的不同，根据对用户操作和达成功能的反馈，以及提升用户体验，有着不同的造型形式特性针对不同的信息需要用不同的界面造型，最有效地传达和告知用户通常移动设备的用户往往关注同时进行的多个任务，某一个移动引用程序可能并不是用户关注的焦点[1]如果移动设备需求用户太多的注意力，可能会影响用户更重要的任务所以这要求我们在设计交互界面时，需要把信息进行分类，在界面中清晰地呈现信息层级，让多任务进度可视化 　　2.1根据实现功能的交互逻辑，交互界面造型形式具有连续性 　　达成一个功能的多个界面具有紧密的逻辑关系，在用户进行着一系列的操作过程中，应该保持界面布局、颜色、风格上的一致，可以在个别按钮、选项上做细微变动以示提醒，而不能在界面风格上做大的调整，这会使得用户在操作过程中因为视觉上的巨大差异带来不适，甚至思维上的断点。

　　2.2对交互界面实现的功能设备做出的实时反馈，决定了交互界面造型形式的多感官性[2] 　　对于用户的每一个操作，设备都应该给出相应的反馈例如，当我们的收到短信时，它不仅要发出声音、震动、同时在显示界面上显示相应信息；这说明了手持移动设备鉴于其本身相较于传统电脑的便携特性、手持性等特点，需要更为多元的反馈方式来告知用户其实时状态，而这些方式已经不局限于显示界面上的视觉元素，还涉及到声音界面，和设备本身的传感功能 　　2.3为了提升产品的用户体验，交互界面造型形式具有情感性 　　为了给用户提供一个良好的用户体验，除了重视功能性和可用性，其他的因素也会造成巨大的影响比如美学所涉及的颜色、界面元素等可视化信息都是重要的考虑因素为了满足不同用户的个性化需求，情感化、人性化的预设是不容忽视的 　　3.移动设备交互界面造型的基本构成研究 　　移动设备的交互界面基本构成元素可以分为：按钮、滚动条、单选框、多选框等的一些基本控件以及一些基本视觉元素，是属于交互界面构成中“点”的元素；以及对基本组件通过合理组合和布局形成的控件组合以及一些线性的视觉元素，是属于交互界面构成中“线”的形式；最后还有整个交互界面的文本信息、图片信息的块面化呈现以及一些面的视觉元素，是属于交互界面构成中“面”的形式。

　　3.1在交互界面中“点”的构成元素及作用 　　点是一切造型的基础，是具有细小特征的视觉单位，在交互设计中，点不仅存在大小和形状的差异，还存在方向的差异、方向的差异，点还具有听觉因素的节奏和韵律感点”的构成元素包括了界面中每个单个的视觉元素受界面所要传达的具体信息、界面风格、界面交互形式等具体因素的影响，点的形式是多变的，点的形状、大小、方向、位置、疏密等组合方式也是灵活的 　　以Beats Music、Moves、Tumblr为例，三个APP在视觉元素上都选用了圆形作为基本视觉符号圆形是很特别的图形，让人舒服的形状，特别是在充满各种方框的屏幕里，增加一些圆润的点缀，立刻就充满了活泼的气息，让人徒增好感但三个软件在界面在对圆形的运用和具体呈现上是不同的Beats Music作为一款线上音乐播放软件，把界面上的文字信息融入在圆形中，而圆形的颜色、大小、分布的呈现上都比较自由，颜色也很动感，把选择喜欢的标签设计成了圆形，这样就比普通列表、常规矩形的标签感觉要更有趣味性，非常符合软件本身的定位，及传达个用户的感觉Moves是一款健康记录应用，能够监测用户走路或者跑步的步数、时间和距离，后台运行耗电量低，每天每周还能生成一个统计表，用气泡球的形式展现你的运动数据。

界面上大小不等的圆就是作为显示重要数据呈现的形式，通过圆的大小和颜色，直观的告诉用户走了多少步，消耗了多少卡路里等，帮助用户快速找到关注的信息，其中面积最大的圆形传递的就是最重要的一级信息Tumblr是全球最大的轻博客，在端的界面上，表单的视觉基本元素使用圆形，并且使用了不同的颜色进行区分由此可见整合“点”元素在交互界面的呈现形式，不仅能够统一界面风格，营造不同的视觉效果，在信息的呈现上也给我们提供了新的思维方式；而这些改变能够给用户带来更为细腻的用户体验 　　由于手持移动交互设备的特殊性，在复杂多变的使用环境中，交互界面也会随之产生一些变化，伴随着不同的视觉效果和声音效果，因此在此把非连续性的声音元素也归类为点的元素点的声音界面加强了交互界面的多感官互动，为信息的传达提供了多样的途径和方式；同时声音本身的音色、音调、音量……等也是提高交互界面人性化的有效途径[3] 　　同时随着穿戴式设备的普及，点的元素因其本身小而美的特性，将越来越多的在可穿戴式设备上得到运用不管是影藏功能，简化界面，还是人性化的提示，点元素都是重要的可参考的呈现方式 　　3.2交互界面中“线”的构成元素及作用 　　点的重复延伸形成了线，线在交互界面造型中有两方面的作用，一是具有引导用户视觉的导向功能，二是用于分割页面空间布局，使得界面承载的信息规整化、条理化，使得用户能够清晰、明确地看到信息。

　　引导用户视觉导向的“线”元素通常是隐藏在界面中的，太过显眼会吸引用户过多的注意力，分散了用户对主要任务的注意而分割界面空间布局的线就类似于平面设计中的网格系统，这样的网格系统会决定界面的主要板块和大致分布，与传达信息的重要性和功能实现的易操作性，以及用户的视觉习惯也有一定联系 　　“线”除了直线的规整切割和分布，还有一些曲线分布和分割的例子，不多见，但以曲线来表达数据和呈现数据变化是非常多见的，比如在效率类APP中，就常常用线条来表达数据波动，直观、高效地呈现信息 　　3.3交互界面中“面”的构成元素及作用 　　面是由无数点和线组合而成的面占据空间多，相对于点和线来说，视觉冲击力强面是界面布局中最终的呈现状态，面的合理运用使界面空间分配更趋明晰，视觉节奏和韵律、氛围在其中贯穿 　　以时下采用较多的卡片式信息呈现方式为例，卡片式的信息呈现不仅广泛在移动端设备使用，甚至在Web端也被广泛使用Google的移动端产品已经全面的卡片化了，同时越来越多的网站采用了卡片化的方式呈现信息luvocracy的卡片化设计突出了信息本身，用大图和标题文字吸引用户，强化了无尽浏览的体验；Google Now的卡片则更加的定制化、个性化，有的卡片是用来做用户教育的，有的卡片是用来告知天气的，有的卡片是呈现联系人列表的，有点卡片是显示待办事项的，不同的卡片都遵循在一个统一宽度和样式的卡片内，进行发挥和设计；既保证了卡片和卡片之间的独立性，又保证了服务和服务的统一。

Shazam则用一种趣味的卡片样式，呈现专辑和歌曲 　　同时我们不难发现Windows8的系统也是采用了卡片式的方法，实时显示每个分栏的动态卡片化的设计最大限度的展示了图文，同时带来了单纯的浏览体验，同时为整合信息、展示信息提供了一个非常好的解决途径，通过卡片呈现，同时满足了展示文字和图片的需求针对于移动端和网站都采用卡片化的信息呈现，会使得用户在不同终端上延续对统一产品的使用体验；同时针对这一现象可以看出卡片式的信息呈现方式，是同一产品跨平台、跨设备呈现时可以考虑的方式 　　背景作为“面”中重要的因素对整个界面的影响也是非常大的，过于丰富的背景会扰乱用户的视觉中心，过于单调的背景会让用户有种过于乏味的视觉感官用通栏的图片作为背景，或者是作为整个APP的背景，或者是作为内容区块的背景，既提升了视觉表现力度，又丰富了APP情感化元素一些信息或操作，以浮动的形式呈现在图片上而这种设计方法，对字体和排版设计要求更高，难度也更多，但容易渲染出氛围大视野背景图风格也可以分为两种，一种像Secret、The Whole Pantry这样的，内容区块中采用大视野的背景图片，好处是可以利用图片做区块分割，难度是图片拼接后不一定好看，所以可能还需要配合描边、留白等手段优化拼接。

另外一种就是像Vsco、Flink、Mindie、Soundwave这样的，全屏背景图甚至打通状态栏，前景做内容排版、导航、操作；这样的背景图使得界面造型更加简单明了，图片本身带来氛围更加浓烈 　　4.实际案例――fresh time界面设计 　　图2 fresh time的交互界面设计 　　Fig2 fresh time interactive interface design 　　根据以上对移动手持界面造型形式的研究，在fresh time的界面设计上采用了圆形的元素贯穿始终首先在界面上的每一个元素都采用了圆形的元素，不管是每个单位元素的圆形外观还是里面的水果都是以圆形为雏形的，并且和软件日程计划的闹钟功能做了很好的结合，不管是水果还是闹钟都是圆的，使得界面元素统一、界面图形风格一致在界面图标的排布上使用了直线的形式，很规整地排布在界面上，给人的直观感受是清晰、明了的在颜色的使用上，把红色的主题色通过点、面的形式，呈现了提醒、按钮、设置等功能由此可见交互界面的造型形式的点、线、面元素存在于每一个界面，每一个界面上的细节都会影响界面信息的传达、人机交互的过程 　　随着科技的发展，便携穿戴式设备将越来越多地进入人们的生活，手持移动设备交互界面造型形式也会迎来越来越多的。

作者单位：西华大学） 　　参考文献： 　　[1] 胡可，智能交互界面创新设计[J].包装工程，2009?06 　　[2] J Gong，P Tarasewich-Proceedings of DSI 2004 Annual Meeting，2004-Citeseer 　　[3] 赵震，王英，宋伟等?关于工业设计中的声音设计研究[J].包装工程，2009，01。