取代点击操作

在分析N9的滑动手势时,分析其如何取代iPhone的Home键,提出“取代点击”的论点。汇总之前几篇文章,强调这一设计趋势。触摸屏的点击是沿用鼠标点击的操作,其本身具有诸多不利的因素:

显示空间。控件会占用显示控件,44像素的正方形对于手机界面也是宝贵的显示空间。

不易操作。控件需要放置的特定的位置,由于屏幕过大和手持设备的姿势导致部分控件不容易点击到。

精确度。一是点击手势有精准性要求,触摸屏可点击区域由手指的指肚面积决定。二是用户点击的落点通常在目标区域中心的下方。

尺寸。如按键密集的输入法键盘,按键大,用户点击比较随意,速度快但导致精准度差。按钮太小,导致用户点击比较小心,点击速度较慢。

形状。圆形和菱形按钮不如方形按钮输入准确率高。

位置。在大拇指周围易于点击,但是右下角点击的准确度却不如左上角的按钮。

隐喻。点击与现实生活的隐喻很弱,按钮通过指示开关或者某项特定的操作,但是删除、下载、关闭、打开和切换等操作与点击没有直接的关系,这也是和鼠标操作比较单一有关系,触摸屏的操作方式更为丰富,自然用户界面(NUI)比图形界面(GUI)更为直接,与其说是隐喻,不如说直接表现物理世界,转向最自然的交流方式。

从更多的设计重可以看出,以滑动和拖拽等手势取代点击已经成为交互设计的一种趋势。以滑动手势举例,设计中使用滑动手势取代点击有诸多优点:

更方便。滑动操作与点击相比,易操作,甚至可以全屏操作。如愤怒的小鸟,在拉弹弓时,并不要求精确操作某个区域,这一点应用在很多游戏的交互设计中。又如Android3.0左右滑动切换标签。

扁平化界面。如ios5相机取景时,滑动界面可以查看之前的照片,界面切换不是通过点击跳转,而是平级的呈现方式。

节约显示空间。如iPhone豆瓣主界面下拉显示搜索框、Palm应用程序界面随着滑动轨迹显示常用功能、邮件列表向右滑动删除邮件和微博列表下拉刷新,可以减少控件占有显示空间,控件只在需要的时候出现,让用户的注意力放置在主体内容上。

减少误操作。当控件被取代之后,由于控件本身指示性弱和控件过小导致点击不精准导致误操作的问题出现的概率更小。

隐喻强。Palm的卡片删除多任务和邮件列表右滑删除邮件隐喻“移除”,而不是呆板地点击一个叉叉图标。

通过对比,滑动比点击有着很多优势,虽然个别操作需要学习成本或者暂时作为快捷操作,应用在设计中确实可以提升体验,特别对于翻页这种频繁的操作。除此之后,滑动作为本身还有很多特性可以利用。

从技术的角度来,是通过参数来识别手势。点击是获取手指触摸屏幕的坐标,滑动是获取坐标和时间,拖拽是长按加上滑动操作。连接各个时间点的坐标绘制出滑动曲线轨迹,这个曲线可以利用的参数有:

方向性。在Safari里可以任意方向滑动页面,iPhone主界面可以左右滑动,WP7的sina微博可以上下和左右滑动,百度手机输入法可以四个方向滑动选词。当只能单方向滑动,如左右,左右方向Y轴只要有位移都可以导致滑动;当可以两个方向滑动,滑动根据位移所在的区间识别滑动方向,WP7的应用程序有时会分辨不清滑动方向。

惯性。滑动轨迹具有惯性,当手指离开触摸屏时有速度,滑动效果不会立即结束,比如网页的快速滚屏效果。在Android系统主界面,缓慢左右滑动半屏,界面并不会切换,当快速短距离左右滑动时,界面会根据惯性切换,这和现实世界的物理运动规律相吻合的。

起点和终点。在特定的区域内开始滑动,操作不同,如百度手机输入法的滑动选词,滑动手势也可以像点击一样限定区域。N9由底部向上滑动在五分之一区域停留识别为切换多任务。

这些是滑动的基本元素,更为复杂的操作需要应用程序自定义,如swype输入法是利于曲线的折角识别选择的字母,浏览器可以定义滑动的快捷操作,顺着这个 思路可以预见将会有更多的滑动操作方式出现。

交互设计如何提高专业能力

最近从上海转到北京工作,接触到了更多的交互设计师,感觉到浓厚的行业气息。09届从事本行业的同学只有5人,10届粗略估计15人。导师告诉我,之后40多位工业设计硕士几乎都选择了交互设计方向。

有人说交互设计时代来临了,其实只是行业发展造就了更多的就业机会。但是现实没有那么光鲜,进入新行业之后设计师们面临着诸多问题,遇到发展瓶颈找不到解决途径。

1.没有方向,没有自己的职业规划。视觉设计师想转交互,交互又想转产品。

2.觉得不被重视,介绍自己时,不忘带上“苦逼”两字。辛苦做的设计方案,不被采纳,经常抱怨被产品经理指使着画图,交互设计师的共同语言肯定有这条。

3.没有学习计划,每天除了工作不知道该学些什么,翻翻网上的资料看着都觉得有道理,总觉得没有收收获,但又提不出问题。

4.自诩有很多想法,但显得比较粗浅,经不起推敲,也不知道如何实现,时间久了可能会打击到自信心。

看过各种分析,交互设计师需要具备什么样的能力 ,但个人始终专注于探索如何提高专业能力,一是兴趣所在,二是学习知识能得到成就感。写博客可以督促学习,动机非常单纯,没有关注过什么个人品牌和增加名气,博客也不能成为评价设计师的标准,作品才是评价设计师的唯一标准。学习和提高个人工作能力都是以做出优秀作品为目标。

设计师各个阶段需要学习不同难度的知识和做不同的事情,正如我将学习资料划为三个梯度,希望设计师能由浅到深的学习。一开始没有项目经验,缺乏基础知识,不宜硬啃高难度的资料。

基础篇

适合刚入行并开始接触项目的设计师学习 :

1.设计的美学知识。

2.交互设计的基本原则,如一致性、减少输入和减少操作步骤等等,这些原则容易理解,通过学习案例和阅读通俗易懂的书籍迅速地掌握。此阶段适合泛读《交互设计精髓》等书籍,不宜精读,没有项目经验的话,读完之后不知所云。

3.平台特性及其设计规范,通过阅读平台的设计规范对设计思维的形成非常有帮助,特别是Microsoft和Apple的文档。

4.做交互设计方案的方法,如绘制流程图、原型图和撰写交互设计规范文档,难度不大,只是需要多次的练习。但这种文档很少会对外分享,学生很难学习到这部分内容,这会影响到他们表达自己的设计想法。

进阶篇

适合有3个月以上项目经验的设计师学习:

1.特定控件设计,如标签栏、标签栏、列表界面和弹窗口等,汇总已有设计的优缺点和设计规律。

2.特定界面设计,界面中如何呈现特定的信息,如应用程序首页、个人资料或者数据流界面。

3.独立常用功能设计,如注册登录、刷新和功能引导,需要了解功能背后的技术知识和产品策略,需要绘制流程图,组织线性的操作流。你需要调研已有产品,并试图区分它们的优缺点。与技术人员沟通是学习技术的有效途径,你可以有意为难产品经理,让他们讲解各种产品策略,掌握更多的信息对于做出正确的设计决策和扩展眼界非常有帮助。

中阶篇

适合具有一个以上完整项目经验的设计师学习:

1.多项功能设计,一个界面融合单独的功能,需要应用到设计方法和架构的思路。设计方法是挖掘用户需求和推动设计优先级的情景故事法、卡片分类、人物角色、访谈和问卷等。这些方法的学习不是必须的,你可能工作两年从来没有使用过它们,但也设计出了不错的产品。这些方法可以作为了解性知识,当有需要时再深入学习,方法只能帮助设计师发现问题和避免问题,但不能对结果起到决定性作用。

2.方法和已有的设计风格研究,以总结为主,最好能应用到自己的设计当中去,千言万语不如动手实践。

3.竞品和优秀产品分析。这件事情看起来很普通,如果没有相关的设计知识和分析能力,只能生搬硬套大概念,无法综合多种因素分析,压根找不到切入点。

4.最新的系统和产品分析。之前的学习都知识的深向发展,但是这一条需要设计师具备较为广阔的知识面,不仅仅限于自己参与过的产品。如果每两周专注研究一个方向,你将比八成的人更熟悉。

通过不定期下载多种同类应用程序,查阅资料,已经研究过输入法、LBS、个性推荐、语音输入和阅读类等产品,虽然从来没有参与过这些项目,但从中可以加深对设计的理解,做好知识积累。

5.掌控技术。设计师需要对技术有掌控能力,就像工业设计师掌握各种材料的特性才能游刃有余,这也是尝试弥补自身不足。web端交互设计师要求会写html和 css,一是便于设计,二是锻炼逻辑思维能力,而手机交互设计师对技术普遍缺乏了解。早期交互设计师是从程序员中分离出来的职位,用来弥补程序设计的不足。所以我更喜欢听技术讲座。

纯粹的技术路线比较难,如果你对社交、搜索和电子商务等领域有深入的理解,这可以增加个人在职场的不可替代性。

高阶篇

个人还在探索,还是以能做出好产品为目标,主要方向是:

1.产品架构,web端已有架构的理念,手机端也会面临这个问题。

2.设计趋势研究,比如操作方式,做预测是最难的。

3.产品发展趋势,如未来LBS产品在手机端如何设计 ,如何为用户的生活带来便利,这需要设计师具备预见能力和判断力。

……

注意事项

学习中需要注意以下几点:

1.学习宜由浅入深,知识需深入浅出,早期可以挑一 些简单的产品研究,如阅读类产品,先形成适合自己的学习方法。题目不宜太难,有位学弟想研究手机支付,资料很少,无从下手,会打击到自信心。

2.工作太忙,也要抽空学习,这影响到长期发展。挑选工作时,尽量加入学习型团队。每家公司都会对你许诺发展空间,甚至是期权,你完全可以忽略。

3.给自己找个好老师,如果你的运气足够好的话。

4.少扯淡,这种忽悠外行人的伎俩对你没有好处,纯粹是浪费时间。

5.理论不是必须的,不要看到别人写博客有心理压力,貌似自己不这么做无法体现自己的专业能力。如果你能动手设计出优秀的产品,理论完全可以忽略,实践甚于理论。

6.不要迷信相信理论和从这博客中看到的,保持独立思考。设计团队中最可贵的人才是经常提出自己不同见解的,合理地质疑设计方案。

7.不要瞎编造和固执,当你试图以某种理论设计产品或者说服他人时,确保自己能举三个以上的案例。

Siri的语音交互革命

iPhone 4S融入了语音功能,这将是手机的革命性的交互操作。或许你使用过Android的语音命令、Bing的语言搜索和Dragon Dictation的语音输入,但是这些和Siri还有很大差距:

  • 语音命令只能理解系统特定的词汇。
  • 语音搜索与手动输入是并列搜索方式,识别词汇再搜索。
  • 语音输入也是将语音声波转换为文本。

而Siri不但包含以上技术,看似还要理解用户说话的意思,将人类语言翻译成系统可以理解的语言,之后再执行命令。之所以像是理解用户,个人认为原因在于:

  • 视频弱化了特定的语音命令,比之前的语音操作看起来更像是人与人之间的沟通,启动操作符合用户语言习惯。
  • 有人性化的语音反馈,而不是呆板的视觉反馈,手机就是一位声音甜美的私人助理。
  • 覆盖了手机常用功能,不限于某个特定的应用程序中使用。
  • 做的更为彻底,很少有手动点击行为,这会影响语音交互的流畅度。

从资料和视频中看看Siri可以做哪些事情及其存在的问题:

1.结合蓝牙4.0或者耳机唤醒手机。语音搜索和语音输入等技术都要用户手动点击按钮触发语音功能,这事本身就不够酷。但是不借助设备还存在困难,语音功能实时开启探测声波会耗费电量。

2.语音功能面临噪音和识别来源的问题,在视频中Siri都是在个人独处,比较安静的环境下使用,适用的场景比较单一。或许以后会加上定向麦克风和声纹判定声波来源,排除外界干扰。

3.包含语音搜索,可以直接搜索天气、股票、联系人和地址,这类搜索结果单一,不需要从众多结果中选择。

4.包含语音命令,语音查询联系人、启动某个应用程序和设置闹钟等,但还限于手机中常用的功能。命令必须是特定的语句格式,比如打电话是“call+ 人名”,播放音乐是“play+歌名”,短信是“tell+人名+内容”。

5.语音播报短信文本,语音输入短信和邮件,但系统可能会进行二次确认,将输入内容再次读一遍,适合盲人使用。这种语音输入和语聊一样,需要用户点击按钮触发系统开始探测声波。

6.系统在答复用户时,使用人性化语句交流,而不是简单的完成命令或者特定的词组。

设想下所有的手机操作都可以使用语音完成,大大减少文本输入和功能之间的频繁切换,更多的应用程序会支持语音交互。随着产品迭代,语音真有可能把手机变为智能机器人,不仅仅是执行命令,陪用户聊天等更为复杂的机器翻译也可能融入到手机中,Siri才只是个开始。

文本设计的注意事项

应用程序中出现的文字统称为文本,根据作用的不同可以分为标题、控件标签、补充说明、错误信息和运营文本等。文字信息是最基础的交互元素,如早期的命令行界面,用户依靠阅读和写字符与计算机交互,大量的字符需要用户记忆,图形界面增加了直观的图形交互,降低了学习成本,但文字本身传递意义最为准确,复杂的信息还是以文字描述为主,所以在界面设计中依旧重要,易于理解的文本可以提供用户的操作效率。

简洁

简洁就是使用最少的文字传达最准确的信息,不重复、不啰嗦,能用三个字表达清楚就不用五个字,比如标题文字“通讯录”比“我的通讯录”简洁,手机是比较私人化的产品,一般不存在多人共用的情景。

比如标题“搜索界面”和“类别界面”,“界面”不是当前界面本身的标题,虽然歧义较小,但是手机界面显示空间有限,应该尽量精简文字。

文字内容太多,虽然说明非常详细,但用户并一定有耐心去仔细阅读,用户希望得到想要的结果,而不是大段的文字解释。在手机界面中不会出现如此多的文字弹出框,但是有必要让用户在最短的时间内获取信息。

参照win7和ios等优秀的操作系统,采用“倒金字塔”结构,比如优先显示最基本的显示,再显示更多的细节,如果弹窗口无法显示完全,可以增加链接让用户查看更为详细的使用帮助。之所以如此设计的缘由是:用户在专心阅读时,是按照正常从左到右和从上到下的顺序阅读。但是在使用应用程序时,特别是手机应用程序,用户的注意力并不一定完全在界面上,对于文字用户可以一扫而过,可能并没用真正理解文字的意义。当用户不耐烦时,可能跳过文本去直接操作控件。假设用户扫视界面,用户一般会按照以下的顺序阅读界面文本:

  1. 中间的交互控件
  2. 提交按钮
  3. 其他地方的交互控件
  4. 主标题说明
  5. 补充解释
  6. 窗口标题
  7. 正文区域的其他静态文本
  8. 脚注

由于控件最为醒目,有理由相信用户阅读手机弹出框界面文本的顺序为:

  1. 控件
  2. 弹出框正文
  3. 弹出框标题

手机弹出框通常没有复杂的解释说明,在设计时应该注意:

一句简短的陈诉语可以不使用标题。

一句疑问语必须完整,比如“删除所有网址?”缺少主语,完整表述为“您确定删除所有网址吗?”。

标题不应该比正文长。

避免过长的正文,尽量控制在1-2行,在弹出框中使用滚动条的体验并不好。

 一致性

相近的意思使用同样的词汇表述,比如“返回”、“返回上一级”和“后退”,表达的意思和操作效果一致,应该统一成一个词汇。

如果系统或者其他应用程序都使用“返回”两字,应该遵循用户使用习惯,降低学习成本。

 标点符号

标点也是语句中不可缺少的部分,使用标点符号是需要注意:

  • 简短的陈述句不使用句号
  • 问句使用问号。
  • 感叹号任务完成和需要吸引用户注意时使用,比如:恭喜您,注册成功!
  • 省略号可以表示需要或者隐藏额外信息、文本被截断或者任务正在进行。比如:下载中…
  • 引号可以避免文本被混淆,如:网址“新浪”删除成功。

语气

用户阅读文本相当于程序与用户沟通,应该保持礼貌的语气,确保文本清晰、自然和间接,文本不要过于正式,设计文本时可以设想正在与用户面对面的沟通。比如“此文件受到保护,未经特别许可不能删除”比“无法删除新建文本文档:访问被拒绝”要好,传达操作无法执行的原因,同时不会让用户感到被责备。

文本可以稍微口语化,如“按照步骤注册”比“遵循以下步骤注册”更好。

使用鼓励式的语气,表达程序可以让用户做什么,而不是允许用户做什么。比如,使用“您可以删除文件”,而不是“程序允许您删除该文件”。

引导用户

不要让用户感到不安和挫折感,特别是出现错误时,比如“错误”和“警告”。


使用用户可以理解的字词,给用户执行操作提供有效的建议,告诉用户的不只是刚才的操作结果,还应该告诉用户“下一步”该如果做,减少用户的思考时间。

 

对话框、暂时性通知和状态栏通知

这三者适应于不同的情形,从细节上区分其使用方式,供设计师参考。

对话框

对话框用于显示重要信息或者主交互流之外的功能。windows的对话框可以分为模态和非模态,区分在于是否会当前操作流程,用户可以无视非模态对话框继续操作,手机界面由于显示空间有限,无法忽视界面中的对话框进行执行操作,所以非模态对话框比较少见。

对话框可以显示确认、错误和警示消息,也称为公告对话框,使用形式有:

  • 模态对话框虽然会影响用户交互流,但是其视觉形式是浮在原界面之上,用户可以理解对话框与原界面之间的关系,完成对话框的操作之后可以继续原有操作,比如登录对话框。
  • ios的对话框推荐使用两个按钮,因为使用单个按钮时,用户没有选择的余地,当使用三个按钮时,用户会难以选择。
  • 用户有时并不会仔细阅读对话框上的文字,因此在按钮上以右边高亮的按钮作为默认选项,避免用户无意中执行危险的命令。
  • 对话框中的文字尽量简明扼要,这也适用于手机界面中所有的文本设计。
  • ios5之前使用对话框过于频繁,本应该采用暂时性通知和消息通知,却也采用模态对话框的形式,导致用户使用的操作流变的不流畅甚至厌烦,会弱化真实有用的信息。
  • 对话框最好不要显示不必要的操作或者级联对话框,导致这种交互操作多是界面本身的结构问题。

暂时性通知

暂时性通知(toast)也可以显示确认、取消和警示信息,与对话框相比,包含的信息一般对对话框少,因为显示的时间一般只有1-2秒,也不需要用户采用任何的操作,不会打断用户的操作流程,所以使用对话框可以避免影响用户当前操作或者注意力,其适用的情形有:

  • 用户的操作成功,很快进入下一步操作,用户正处在交互流中,比如成功新建联系人。
  • 信息的重要性比较低,不足以使用对话框通知用户
  • 危险性操作执行成功,并且之前已经得到用户的对话框确认,比如邮件删除成功。
  • 之前操作的反馈结果,当前正在执行新操作时,不免使用对话框打断操作流程。比如短信由于信号不佳发送失败,对话框提醒用户,当前正在写新的短信,当网络通畅告知用户之前的短信发送已经成功。
  • 用户正在浸入式体验时,对话框会严重破坏用户体验,用户注意力集中在界面很容易察觉到界面变化时,采用通知更为妥当。
  • 引导用户操作功能,比如用户第一次使用应用程序,告知用户点击某按钮会有何种效果。

 状态栏通知

通知显示在状态栏,用于显示推送通知到手机,比如收到短信和邮件。消息通知并不打断用户操作,显示的时间比暂时性通知要长,比如WP7的短信通知显示10秒钟。如果用户立即处理,也会采用另外的方式提醒用户,比如WP7在“瓦片”通知显示未查看短信数量。也会已图标的显示常驻消息通知栏。消息通知适用的情形有:

  • 电话、短信和短信等手机基础功能的信息。
  • 系统的状态信息,比如手机SD卡被拔出。
  • 后台正在运行程序的信息,比如Android的微博未读评论和好友申请。
  • 应用程序中执行任务的角度,比如Android的任务下载进度。
  • 后台没有运行,通过系统推送的的应用程序信息。

消息通知最大的优点是可以全局通知,只有显示状态栏都可以有显示,如果用户需要处理,点击消息之后可以进入程序。也可以暂时忽视,专注于当前的交互操作,可以空闲之后再处理。消息通知信息的内容可以稍多些,比如包括程序图标、信息数量和消息的部分内容。

但是过多的消息通知也会让信息变得拥堵,任何应用程序获得系统许可或者自行调用消息通知,个别应用程序为了获取用户关注,重复视觉和声音提醒,极其损害用户体验。