Archive for the ‘交互设计’ category

基于用户体验的手机产品交互设计原则

July 31st, 2010

一、用户体验信息收集

在讨论手机的交互设计方法之前,需要先对手机的用户使用习惯有一些基本的了解,需要对手机的用户体验信息做一些收集整理。收集用户体验信息首先需要确定两个问题:一是确定目标用户群体;二是确定信息收集的方法和途径。

在确定目标用户群体的时候,很显然的是,已有产品有过使用和交互经验,具备该产品或系统的交互体验的用户,相比较于那些没有体验的用户,可以为设计提供更多更有效的信息。因此在收集用户体验信息时,应该首先考虑所需设计的产品的用户或是有过类似产品使用经验的用户。在理想的情况下,当用户体验产品的交互时,设计师可以通过某种技术或是研究方法获得用户的全部感官印象,掌握他们的情感体验。然而这些主观的体验信息很难用实验室的方法收集或是客观的科学描述表达出来。因此我们只能寻求贴近实际的近距离接触用户体验的方法,就是深入访谈和现场观察。

我们需要调研的信息有:
1.硬件部分:
  • 手机的持机模式(右手操作、左手操作、双手操作);
  • 手机的操作模式(手指触控、笔触、按键、滚轮、长按);
  • 两种操作模式下的输入方式(全键盘、九键、触屏键盘、手写);
  • 信息反馈形式(屏幕信息输出、声音、振动、灯光)对用户的影响;
2.软件部分:
  • 用户对屏幕信息结构的认识(空间位置、信息排列顺序、信息的分类)
  • 用户对信息导航的使用(菜单、文件夹管理、搜寻特定文件)
  • 用户对信息传达的理解(图形信息、文字信息)
  • 用户对交互反馈的获知(每个操作是否有明确的反馈)
3.积极的用户体验:
  • 特殊交互模式带来的新奇感受——有趣
  • 简洁的操作步骤和有效的信息提醒方式——信任感
  • 软件运行速度,信息处理过程——操纵感和成就感
  • 允许误操作,有效引导——安全感
  • 交互过程中的完美感官体验(视觉、听觉)
  • 类似于电脑操作过程的交互(有电脑使用经验的用户)——熟悉感和成就感
  • 品牌元素在交互上的延续性——熟悉感和优越感
4.消极的用户体验:
  • 系统出错、没有提示信息——压力、紧张和茫然
  • 缺少误操作的补救机制——挫败感、压力
  • 交互步骤的繁复难记——挫败感
  • 提示信息的不明确(不符合用户模型)——茫然
  • 过程处理时间过长——焦虑

二、用户分类

1.依据用户的需求可将智能手机的用户分为两类:

1.1 过程为主的用户(processoriented end user)

过程为主的用户的典型例子是电玩族,他们追求的终级目标就是视觉听觉的冲击和享受,最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的,绝大多数设计师都有深厚的美术功底。

1.2 结果为主的用户(result oriented end user)

然而,与结果为主的用户设计相比,过程为主的用户的市场和受众都要小的多。结果为主的用户不在乎用什么样的方式完成任务,但是任务必须以最短的时间,以最简洁的方式,最精确的运算结果来完成。对于此类用户的交互设计人员来讲,更重要的是设计更合理的任务逻辑流程(logical task flow),以期最大幅度的符合人脑的思考方式和认知过程(cognitive process)。

2.依据用户的使用经验可将用户可以分类为:

2.1 新手用户

指刚刚开始接触和使用智能手机的用户,对智能手机的操作系统没有过使用经验,对计算机及应用程序的一般用法也没有太多的了解,但有一定的手机使用经验。

2.2 中级用户

使用智能手机有一定的时间,换过至少一个智能手机。对智能手机的部分操作相对熟悉,但经常使用的软件数量较少,并不完全熟悉智能手机系统的所有功能,对界面交互所必需的语法信息了解较少。

2.3 专家用户

有过相当长时间的智能手机使用历史,更换过几次智能手机,对手机的交互和电脑的操作都非常了解,经常主动寻找更简洁和快速的交互方式。

一般来说,中级用户和专家用户在长期使用某部分交互时遇到的问题更具有代表性,而新手用户提出的问题则更有利于设计人员认清用户与智能手机交互时的认知过程。

三、交互设计原则

对应用户体验信息的收集和用户分类,我们可以总结出来智能手机上交互设计的方法和要点。

1.硬件交互设计
  • 根据人机工程学原理设计按键大小等硬件交互要素;
  • 尽可能提供多种输入方式,包括键盘输入和手写输入,键盘包括数字键盘和全键盘。合理设计键盘使其符合用户的使用习惯;
  • 考虑环境对用户操作的影响。例如嘈杂的环境下提供震动的提示方式,黑暗又需要保持安静的环境下选择指示灯闪烁发光的方式提示用户。
  • 同样需要考虑环境因素对用户的影响,利用机械结构多样化设计实现单手操作模式和双手操作模式的切换,需要设计切换的便捷方式、屏幕方向的变化和键盘的转换等等硬件交互要素的变化。
  • 设计新奇的交互模式,将大大提升用户体验,例如sony的滚轮导航模式,和苹果的触点导航键(旋转和点击),都获得了巨大的商业成功。

2.信息交互设计

  • 信息项目的排布密度合理,字体排列、图标排列的方式具有可调性,设计合适的方式来突出重点信息;
  • 使用用户的语言来传达信息,而非技术的语言。有效地使用“隐喻”。例如windows里面的“记事本”就是一个很好的隐喻例子,因为它和人们熟悉的日常概念联系在一起,所以用户可以很容易的理解这是一个什么工具。好的隐喻可以起到快捷的说明作用;
  • 字体大小、颜色、图标设计等,都决定可读性的好与坏;
  • 需要保持一致性的不光有每个功能软件或是服务的图标外观,更包括开机动画、细节元素和无形框架的一致,都需要贴合用户行为习惯进行设计;
  • 尽量避免同一个元素包含太多的信息,例如,颜色的使用不要包含太多信息暗示,因为用户不一定会注意到或是理解某种颜色所包含的暗示。

3.软件交互设计

  • 导航功能。随时转移功能,很容易从一个功能跳到另外一个功能;
  • 允许工作中断。例如当用户编辑短信的时候,收到短信或电话,完成后回来仍能够找到刚才正写的短信息;
  • 方便退出。例如,提供两种退出方式,按一个键完全退出,或是一层一层的退出。
  • 让用户知道自己当前的位置,使其做出下一步行动的决定;
  • 提供快速反馈,减少不必要的潜在等待时间。在任务交予系统处理或计算的时候,会有一段潜在的用户等待时间,一般我们会通过合适的等待提示让用户知道现在正处于系统潜在工作状态,而不至于让用户频繁地重复操作,使系统更慢;或者合理通过多任务切换处理避免这样的等待间隔。通过这些方法可以让用户回避这种的无效时间,从而提高交互效率。
  • 良好的防错机制。误操作后,系统提供有针对性的清晰提示。即使发生错误操作,也能帮助用户保存好之前的操作记录,避免用户重新再来;
  • 提供了解用户操作行为的途径,可以更好的帮助改善系统的操作;
  • 通过缩短操作距离和增加目标尺寸来加速目标交互操作。

4.体验交互设计

  • 让用户控制交互过程。“下一步”、“完成”,面对不同层次提供多种选择,给不同层次的用户提供多种可能性;
  • 预设置的默认状态应该具有一定共通性和智能性,并对用户操作起到协助或提示的作用;此外,还应留给用户修改和设置默认状态的权限;
  • 图标、多媒体设计、细节设计和附加功能设计为体验增值,有效提升体验度;
  • 视觉设计,例如开关机动画、界面显示效果等;
  • 多方面考虑用户信息的私密性,提供有效的保护机制,例如指纹识别密码模式。

四、总结

体验是一个比较虚的概念,很难量化很难评估,所以也导致很多小的无线产品开发团队干脆放弃了对产品用户体验的把握,甚至不需要设置一个专门的呃交互设计师职位来改善产品的交互体验,这对于成长型的公司是可以容忍的,但是对于要想做出精品,长期处于市场不败之地的公司就显得不够严谨了。手机互联网是未来的发展趋势,手机产品也对交互设计提出了更多的要求,简单探析了一下从用户体验出发来进行手机产品交互设计的方法原则,之后还是需要一个比较成型的交互体验评估体系的。

转载请注明:http://elya.cc/product/595.html

分享家:Addthis中国

解读iPhone平台的一些优秀设计思路

July 31st, 2010

  本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备设计时参考。

1、移动互联网设备和传统手机的区别

  在传统手机时代,标准的通话键、挂机键、菜单键是手机的标配,用户被教育成了用键盘来操作数据,于是我们就养成了使用键盘的习惯,经典的案例就是诺基亚主导的时代。

  在移动互联网时代,特别是触屏的大规模应用,手机的功能已经发生了转变,对互联网内容的浏览、下载、消费等等成为主要应用场景,触摸屏成为行业趋势,直接对内容进行操作,在屏幕范围内的点击成为主要的操作。绝大部分操作通过直接和内容交互完成,不要让用户通过中间设备间接进行控制。

  因此,就可以理解为什么苹果会这么激进,只保留了一个home键,而将其他功能性的操作全部做在了屏幕里面。

  在底部的几个按键的处理上(返回、菜单、home、搜索),Android的做法似乎介于传统手机和iPhone两者之间,既保留了传统手机的一些特性,但也在学习iPhone的触屏做法。从苹果遵循极简的设计思路来看,iPhone做得更彻底、更加极致一些。

 

2、高度直觉化的界面

  苹果采用了隐喻等方式来暗示用户这里的操作,目的就是降低用户的学习门槛,使用户第一眼就知道怎么去用iPhone,典型的案例就是锁屏界面的解锁操作,以及缩放照片的操作。

  iPhone采用了全触屏的操作方式,绝大部分操作都通过直接触摸完成,仅提供一个home键的实际按键,这种做法配合multi-touch技术,无论是完成一个任务还是体验游戏,操作都最大程度简化了用户的操作路径。

  为此,iPhone还提供了各种丰富的手势,基于此,开发者可以创造丰富的操作体验。比如:tweetie 2

 

3、在需要时给我导航,且告诉我将去向何处

  在iPhone平台上,如果应用程序有信息层级关系(比如邮箱>收件箱>邮件),利用title进行导航,导航栏左侧始终是返回按钮,右侧如果有必要,可以放针对内容的操作控件,中间有标题。

  对这里的导航按钮来说,始终只有返回上一级的功能,且明确指明上一级的title是什么。

  那么,另外一个问题是 如果这里的信息层级太深怎么办?是否需要给出返回首页等按钮或者更长的面包屑路径,这里需要考虑的是怎样减少程序的信息层级而不是一味地去将这里的导航复杂化。

  iPhone提倡直接对界面元素进行操作,返回上一级也是如此,无需通过其他物理按键来切换页面,你所需要做的事情就是直接在屏幕上点击。


Navigation Bar

 

  4、稳定的界面结构——tab bar,toolbar的位置

  iPhone典型应用的界面结构很稳定,导航栏和页签栏的位置不会因为应用不同而发生变化,用户能形成比较一致的体验。

  Android平台在规范性方面不如iPhone,比如:

  a)  Andorid对标题的处理方式比较奇怪,有的程序有标题栏,有的地方没有,不符合一致性原则;另外,还存在大小两种尺寸的标题栏。

  b)  tab bar的位置。有的应用放在顶部,有的放在底部,体验不一致。

  另外,对手持设备来说,关注焦点是从上而下的,tab bar的关注点没有内容那么高,其实只是在需要的时候可以方便地进行切换就足够了,放置于顶部对于手持设备来说操作很不便。

 

5、一次做一件事情,避免一个按键承载太多的功能

  Android的菜单键是一个全局按键,使用频率比较高,根据不同的场景功能又各不相同,用户较难形成一致的体验,系统级的菜单和上下文菜单也容易让用户混淆。

  苹果的做法是将菜单里的功能进行分解,重要操作用户可直接操作(如通讯录的添加联系人,iPhone是直接放出来,Android是将其放到菜单里面),其他操作或集中在设置或通过滑动等交互方式进行扩展。(tweetie 2是将针对当前联系人的更多操作通过滑动的操作展示出来)

 

6、增强用户体验

  iPhone在增强用户体验上有很多点值得学习。比如core animation提供了大量优雅的动画可以直接使用,以实现华丽的动画效果。

 

为什么用动画?

  在整个界面转换的过程中,苹果会添加一些动画元素,作用有三:

  a)  缓解用户等待的焦躁情绪,如:经典的程序登录界面动画。
  b)  暗示用户当前界面的来源。如:有信息层级关系的左右切换动画。

  c)  增强用户体验

 

用什么动画?

  界面常用的几种动画:

  a)  有信息层级关系的采用左右切换动画。
  b)  针对当前视图内容的操作常用的采用model view的从下往上升起的动画。如:写邮件,action sheet。

 

拟物化设计

  除此之外,还有声音元素、透明设计等其他手段以提升用户的使用体验。
(本文出自Tencent CDC Blog,转载时请注明出处)

分享家:Addthis中国

从Web到WAP移植的设计原则

July 31st, 2010

从Web端直接移植为WAP2.0形式,突出的矛盾是信息架构不适应小屏幕设备,垂直页面的冗长和WAP2.0表现形式的限制。

提升小屏幕浏览的体验,在设计中应包含以下几个核心任务:

  • 控制信息的维度
  • 信息布局,更好利用首屏的有限资源
  • 采用合理的导航、有明确的方位感知
  • 尽可能减少浏览时的按键做功
  • 界面可视化

 

控制信息维度

WAP网页可支持的页面信息维度较小。《移动设备交互设计》中介绍1维、1.5维、2维的信息呈现方式[1]。将其归纳为1维垂直平铺和1.5维的页面折叠,2维的缩略索引等相结合来处理页面降维。

例如:手机腾讯网新闻正文页,除去导航部分,主要垂直平铺了新闻正文内容、分享转载、相关新闻推荐、相关搜索、网友热评、热点新闻、精彩推荐等内容模块。减少页面长度,就需要折叠模块信息。除新闻正文内容以外的外延阅读模块只摘选展现3或5条,用户需要通过“查看更多”或点击模块标题进行详细的扩展阅读。

再如:手机QQ空间的好友动态的日志设计,仅展示各条日志展示3行正文内容,其余内容折叠起来。引导用户进入深一维度浏览。

 

信息布局

首屏的首页对于全站的战略意义重大。它是用户总览全站的内容最重要途径,同时可以建立直观印象,树立品牌形象。《Don’t make me think》非常强调网站的首页尤其是页面头部要清晰地呈现出这个网站是干什么的,用户可以做什么。同时首屏的资源在小屏幕设备上尤为稀缺,所以往往是全站交互设计的重中之重。

小屏幕设备的首页有它特殊规则。QVGA的竖屏模式下,以13号字体显示,一屏仅有13左右。横屏模式下就展示更少了。所以在可选择的前提下(例如Nokia E71横屏机型,无法竖屏阅读)用户很少会喜欢用横屏模式阅读长页面。首屏默认最上方会是全站的logo和全站的导航。

  • 手机新浪网首页截屏

手机新浪网首页头部导航的设计是采用背景图实现的。UCWeb浏览器不支持背景图片展示,直接导致左右结构的导航变形,视觉效果损失。

  • 手机搜狐网首页截屏

手机搜狐网的logo实现方式是前景图,所以在浏览器(不禁止图片浏览的情况下)中能够展示logo,但是首页头部的机型适配问题依然较为严峻。

手机腾讯网WAP2.0改版,首页首屏的设计

分析:手机腾讯网WAP2.0首页的首屏在不同浏览器上的适配效果得到了较好的控制。导航做了减法,由WAP 1.0阶段的3行精简到2行,只留出重要的产品入口,其他频道入口分散到首屏以下以及新闻中心。对手机腾讯网首页的信息布局做了一次改良。

采用合理的导航

桌面上常见的导航方式主要有页面头部的多行全局导航链接、面包屑、菜单、工具栏等。凡具备告诉用户在哪里,方便用户去往其他地方的标识都算导航。它一般都易于识别,处于页面显赫位置;形式和位置也相对固定,持久;相近作用的导航在页面中具有排他性,即功能相近的导航应根据页面需要做判断和取舍,详见下文“书城”案例。

在WAP页面中,视域相当狭窄,信息维度很小。承载同样多的信息,WAP的页面长度会比Web页面显著增加。很多WAP产品页面头部和页面底部采用导航复现的设计。比如手机新浪网的设计将多行导航链接布置在页头和页尾。开心001以及人人WAP2.0的设计是在页头和页尾复现页卡式导航。

手机腾讯网WAP2.0的导航设计,首要解决的问题是如何让用户快速了解网页的全局内容及功能。在手机腾讯网内每个频道首页的头部位置有用于总览的多行导航链接,让用户对频道内容有基本认知。频道首页的尾部则采用“返回顶部”引导用户回到头部利用多行导航链接进入其他模块。而各频道二级页面在页头和页尾则复用面包屑导航。

手机腾讯网书城WAP2.0改版前的导航问题

书城-分类-子类别页面的导航页卡和面包屑并用,功能有重合之嫌。面包屑中的前面两项,在顶部的页卡式导航里都可以链入。

修改后,分类tab置灰,表示为当前选中项,提示方位。原面包屑位置改为栏目标题,就简单清晰很多。

 

减少浏览时的按键做功

浏览页面要尽可能地减少用户滚屏操作。垂直的长页面越往下,信息曝光率越小,操作难度越大。因此,要将信息的重要性分级,并以流的思维审视每个页面首要的操作任务;将重要操作或信息放置在靠近顶部的位置。另外,要充分考虑页面中图形元素对于焦点跳转频度的影响(在后面的交互细节章节中详细介绍)。

以手机腾讯网WAP2.0 下载频道为例。如下面交互设计稿所示:软件介绍页头部改版后,新增了下载包链接。这满足了一些需求:用户在进入软件介绍页之前,就已经确定需要下载该软件,并且机型适配也已明确。此时,用户就不需要跨越两屏的距离才能点到下载包了。

界面可视化

可视化是WAP2.0较WAP1.0的一个重要改进。WAP1.0页面不能控制文字的样式及颜色,仅可见链接和非链接的区别;支持少量的图片;以及简单的排版样式。浏览WAP1.0页面,用户需要花更多的注意力通过纯文字内容来分辨其功能,判断自己该怎么操作。而加入了视觉化的控件、功能分区,能帮助用户更好地理解功能,引导用户的注意力。以下重点分析下手机QQ空间 WAP2.0新改版设计:

另外,设计中还要注意利用WAP2.0的图形化界面表现;同时考量所使用的图形元素对用户是不是有意义。

频道的色彩管理也是全站整合的重要设计要素。很多子频道都希望自己的频道色有特殊化处理,比如游戏、音乐频道能使用更加年轻活泼的色调,而财经、军事频道则希望能使用突出其内涵的色彩。但这会对手机腾讯网全站浏览的体验带来品牌形象混乱,视觉冲击过大等问题。因此进过多方权衡后,实现了全站基本统一的蓝色基调。

 

参考资料:

[1] 《移动设备交互设计》,作者Matt Jones,Gary Marsden(2008.2)

(本文出自Tencent WSD Blog,转载时请注明出处)

分享家:Addthis中国