bangboyspass:iphone交互分析及引发的的思考

来源:百度文库 编辑:偶看新闻 时间:2024/04/29 05:57:20

概述

Iphone手机在交互设计思路上面做了非常大的创新,打破了其他系统固有地交互方式,以令人赏心悦目的交互手法带给用户非常棒的体验感。此款手机深受消费者的欢迎,市场销售额也很惊人。
Iphone手机在交互设计思路上充分模拟了正常人操作物体的固有习惯和思维方式,用户操作日常中的物体时一般都是采用推,拉,滚,扭,按压,拨动等基本动作,这些操作方式已经深深地印在用户的脑海中。因此用户一旦在其他系统中见到熟悉的操作方法后就很容易理解和学习,即使隔了很长一段时间也不会忘记,而且还不会轻易出错。我们在设计软件时也要充分考虑用户正常的操作方式和思维习惯,尽可能使得软件的操作方式与用户的心理模型保持一致。
在接下来的篇幅中我将从各个纬度针对此手机进行详细的交互分析,也欢迎大家提出自己的见解。

 

界面布局

此手机布局没有采用常见的九从宫(3*3)布局方式,而是把界面划分成上下两大区域;界面上区域显示一些较常用的功能图标(共十二个,采用大图标加文字的组合方式),在界面下区域显示重要的四个功能。这两个区域之间有明显地距离间隔,便于用户快速识别出下方重要的功能图标。据科学分析得知用户对图形的识别能力要远大于文字,因此如果图标设计的很优秀的话,用户可以降低视线搜索的时间,用户的操作效率会得到相应提高。我们下一个超声产品也会有液晶屏,可以考虑采用大图标加文字的组合方式。苹果操作系统采用的大图标尺寸为128*128px;微软操作系统工具栏上面的图标尺寸为12*12px,桌面图标尺寸为32*32px,新版的vista系统也仿照苹果的做法增大了图标的尺寸。

 

 

当选中某一个图标后进行点击,则系统以全屏的显示方式打开此对应的功能界面。由于手机屏幕空间较小,所以一般窗体都是以全屏的方式打开(以便于在窗体中放置更多的信息)。
在有些界面上系统充分利用了透明图层叠加的设计方案,用透明图层的好处就在于用户可以看到图层下面的内容,同时还可以看到当前图层的信息,如下图所示。

 

 

屏幕显示方式

用户可以从横着或者竖着的角度查看手机,Iphone手机会自动调整角度以满足用户此需求。此交互方式非常友好,体现了以人为本的思想。

 

 

信息输入与查看

当用户进行文体编辑时,由于屏幕上面默认字体比较小,Iphone采用在旁边显示一个放大的字体效果,如同在上面使用了一个放大镜的效果,极大地提高了用户识别文字的能力,尤其是对于老年人或者视力比较差的用户益处更大。此放大镜是一个半透明效果。
从操作频率上分析可以得知用户会经常使用空格键,因此在软菜单中此空格键尺寸特别大,用户很容易快速的发现并进行点击操作。界面上字母和空格键的颜色是一致的,其他按键设计成不同的颜色,这样做的目的也是为了便于用户快速的进行相关信息浏览。


当用户输入新的字母时,系统采用一种新的防错机制:由于男同胞手指较粗,所以很容易误按击其他字母键Iphone采用在被选中字母上面弹出一个放大的字母(视觉效果很醒目),这样用户就很容易知道当前被选中的字母,一旦选错也很容易进行重新选择;而其他手机当出现误选时则必须使用删除键进行清除操作,当然也影响了用户的使用效率。


 

当用户输入字母的前几个单词时,系统会自动在输入词语下方出现符合相关要求的单词,以协助用户进行输入,不仅提高了输入的效率同时也降低了出错的可能性。

 

 

进行号码拨打操作时,用户可以通过点击系统提供的软键盘,每当用户选中一个数字时,此文字的背景色被高亮显示(纯蓝色效果,反馈性极强);界面中的[Call]按钮也以一种很醒目的绿色来增强用户的快速识别能力。上面显示号码的区域比较大且输入的数字非常醒目(iphone在反馈性上面做得非常出色)。


 

当输入接收人时,一旦输入前几个字母,系统自动在下方的区域中自动显示出符合此条件的收信人列表,可以可以直接在列表中选择符合条件的记录,不仅减少了用户输入的时间,同时也提高了操作效率。

 

界面参数调节

进行闹钟参数调节时,系统采用转轮的方式,用户可以滚动此转轮进行参数快速调节,此操作方式很特别,主要是模拟用户在日常生活中拧动物体的操作方式。用户一旦熟悉此操作方式后就很难忘记,体验感很棒。

 

 

进行二选一选项时操作时,系统采用推拉的操作方式,往前推动则向前运动,向后拉则向后运动。此操作方式主要也是模拟用户在日常生活中拖拉物体的操作方式,完全吻合用户正常的思维模型。

 

 

当进行多选操作时,用户直接用手指点击相应的选项(被选中项背景色以高亮底色显示),系统自动在被选中的选项后面打勾。Iphone系统中没有下拉选择框控件,主要也是基于用手指难以操作此控件的缘故。


 

按机器外面的按键进行音量调节时,界面上面出现了一个很醒目的音量图标,同时在图标下方出现相应的进度圆点,用户可以很清晰的得知当前调整的效果。其他手机一般都是通过声音大小的反馈方式,缺少此视觉反馈方式。


 

在界面中进行明暗度调节时,系统支持直接用手指横向拨动滑块,系统立刻在界面上显示相应的亮度调整效果。

 

 

当进行短信发送操作时,屏幕下方会出现一个动态的进度条,实时反馈出当前发送的状态(同时在进度条下方下方可以看到字母软菜单)。在界面上方有一个[Cancel]按钮,用户可以取消当前的操作。

 

当进行图像尺寸调整时,只需用两个手指“捏住”图片的两个角,向外拉则表示放大图片,向内拽则表示缩小图片。此操作方式很特别,在网页界面中也支持此交互方式。一般软件进行放大或缩小操作时,都是通过点击相关的放大或缩小按钮,显然操作效率远没有iphone高。

 

 

当选择好相应的图片并开始设为墙纸时,系统自动出现一个无模态的进度栏(此进度栏区域在视觉上非常醒目),当操作完成时,则出现一个打勾的图标以告知用户当前的结果信息。Iphone中的[Cancel]按钮都是放置在其他按钮的左边,这一点恰恰与微软操作系统的做法相反。目前业界还没有对此得出一个确切的结论。

 

 

当点击界面中的[View My Minutes]选项时,当前页面亮度降低同时在界面叠加出现一个动画图标和一行等待文字。当任务完成时,界面上出现多行的信息文字告诉用户当前操作的结果。此交互方式也有一些不足:在程序运行过程中用户不能执行取消操作,等待信息不够友好使得用户无法得知要等待的具体时间,同时也不清楚目前已经完成的进度情况。

 

列表操作

进行列表删除操作时,列表记录旁边默认没有删除按钮。当用户选中某条记录并用手指进行横向滑动时,此时会在相应的列表记录旁边出现一个醒目的红色删除按钮(系统中所有的删除按钮都是红色效果),点击此按钮系统则自动删除此信息,且系统没有弹出确认对话框(如果用户想取消当前的操作,目前还不清楚此系统是怎么进行处理的)。一般系统进行删除时,都会弹出相应的确认对话框。在我们目前的2108新产品中我设计的新方案中就可以支持删除过程中无对话框干扰且可以进行删除撤销操作。

 

 

进行相关图标功能操作时,系统采用手指选中此图标然后直接拖动到下方的功能图标处(当选中此图标时此图标尺寸会变大且图标呈半透明效果),在拖动过程中用户可以实时看到拖动的状态,且原来图标效果变暗,当完成操作时图标恢复为原状。

 

 

进行图标排序操作时也是采取拖动的交互方式,用手指选中图标移动指定位置即可,此操作效率非常高。采用拖动排序的可视性效果很强,用户可以实时看到操作后的结果。


查看留言时,只需点击对应列表记录前面的播放图标,系统则会自动播放相应的留言信息。在列表下方以一个进度条的方式显示当前播放的进展情况(在进度条两端伴有相应的时间信息)。进度条下方的[Call Back]和[Delete]按钮比较醒目,[Delete]按钮采用很醒目的红色(在色彩学原理中红色是代表警戒色含义)。当选中此条留言记录后单击下面的[Delete]按钮时,系统自动删除此条记录且没有弹出任何确认对话框。

 

 

当列表记录较多不能在一屏进行显示时,常见windows做法就是出现一个纵向的滑块同时在滑槽两端出现相应的向上和向下箭头(鼠标的中键被赋予滚动滑块的功能)。而iphone的做法就比较特别,仅仅在记录旁边出现一个常常的滑块,并没有相应的上下箭头,因为用手指点击上下箭头进行操作的难度太大且效率也很低。

 

 

当界面中的记录很多时系统采用字母的方式进行排序。中文由于是笔画结构,目前有一些软件尝试用拼音的方式进行排序,不过结果还是不尽如人意,目前业界还没有形成一个固定的对中文进行排序的方式。字母排序方式仅适合于英文系统。

 

 

 

日期控件

Iphone日历控件中支持点击左右箭头进行日期翻页,当前选中日期被高亮显示。在界面下方显示选中日期对应的事件信息,非当月的天数以灰色的效果显示。此界面不支持对年份进行快速调整。
界面左上角有一个[Today]按钮以便于用户快速选择当前日期查看相关事件信息,系统支持点击界面上面的左右箭头进行月份切换操作,同时系统支持用手指在屏幕中向下滑动来选择上一个月份的日期。

 

 

在List标签页面中显示当月所有的事件,以日为单位进行不同区域划分(同时在每日对应的区域中显示当天所有的事件),用户可以用手指快速上下拨动屏幕以查看不同日期下的信息。

 

 

屏幕切换与响应

当界面信息过多需要翻页时,系统采用手指向下滑动的交互方式,一般手机都是采用点击翻页图标的交互方式,由于图标一般尺寸较小,用户需要把视线从屏幕信息中转移到图标上面以进行翻页操作,这种交互方式会打断用户正常的阅读流程。而Iphone手机采用直接用手指在屏幕上滑动的方式就可以避免此问题,用户可以专心的阅读屏幕信息。

 

 

当选择菜单选项进入下一级目录时,系统采用横向切换的方式,用户直接点击向右的箭头,则系统动态地从右向左显示对应的下一级内容,点击左上角的按钮则可以返回上一层。苹果操作系统也是采取同样的交互方式。普通系统进入下一层目录时一般都是采用打开新窗体的交互方式,从视觉上体现不出“进入”的概念,而Iphone的这种交互方式就能体现出这种概念。

 

 

当需要查看屏幕其它区域信息时, iphone则支持直接用手指向上或向下快速拨动即可,系统会自动根据手指拨动的方向显示对应的信息。一般系统都是采用拖动滚动条滑块的交互方式,由于滑块体积较小所以比较难选中并进行相关的拖动操作,而Iphone手机直接用手指在屏幕上滑动的方式就比较容易且操作效率也较高。当然用手指翻页也存在一定的缺陷,因为手指较大,很难进行精细化的调整;而且手指在滑动过程中会挡住一部分屏幕信息,这样会对用户的阅读视线造成一定的干扰。

 

 

系统也支持左右拨动屏幕,实际上就是替代了常见系统中的横向滚动条的效用。系统以动态的视觉效果形象地表达了界面信息从右向左切换的过程。

 

 

Iphone支持上网功能,当在浏览器的地址栏中输入相应的网址信息后,系统自动在地址栏中显示相应的进度条提示信息,非常直观和醒目。一般系统都是采用在界面的状态栏显示相应的打开状况,由于状态栏在界面下方使得用户不太容易发现此文本信息。iphone系统也支持点击后面的删除图标清空当前输入的网址信息。

 

 

由于手机屏幕空间较小,默认打开的网页信息文字较小,如果用户想详细查看某区域的内容,则可以用手指双击此区域文字,则此区域内容会放大显示,再次双击则还原成初始状态。

 

当点击界面中的新增网页按钮时,系统也以一个动态的效果(从小变大的方式)打开新的网页窗体。

 

当选择某项加入回车站时,系统很形象地播放一小段绚丽的动画效果以表示打开回收站图标然后进行删除的交互过程。一般系统都是冷冰冰的以一个静态删除图标来表达此概念,其友好性远不如Iphone这种操作方式。


 

当点击界面上的新增图标时,系统以一个动态的效果从界面下方弹出一个浮动图层。图层中的[Cancel]按钮色彩效果其他两按钮不同,且在布局上也保持一定的间距。这样做的目的是为了突出表明此按钮与其它两功能按钮的差异性。

 

 

当打开或者关闭窗体时,系统着重突出了空间的概念,以一个很强的视觉效果来表达窗体打开或关闭的概念。

 

 

选中某按钮进行点击时,系统采用一个动态的旋转的方式打开新的窗体,给人以很强的空间感。    

   

 

当点击下一页图标时,系统以一个动态的折叠效果关闭上一页,真实模拟了用户在日常生活中用手指翻书的操作场景。

 

 

当用户点击编辑闹钟中的[Cancel]按钮时,系统以一个动态的从上向下滑动的方式关闭当前窗体,同时自动打开另一个窗体。

 

 

系统也支持以3维的方式同时在界面中显示多个窗体,每个窗体以一定的角度显示在屏幕中。用户可以用手指快速的拨动相应的窗体,系统支持用户反复的进行选择。当选择好某一个窗体后点击即可以全屏的方式打开当前的对话框。

 

 

 

引发的思考

目前我们的产品在设计方面很大程度上深受WINDOWS影响,没有完全遵循用户的心理模型,导致部分控件反馈不够清晰,交互方式也不够友好。还有很多操作需要非常复杂的操作坊法,无形之中给用户带来很大的压力。我们需要努力打破这些条条框框的约束,Iphone这些创新的交互设计思路确实值得我们学习和借鉴。

 

我们需要在以下方面进行改进:

如何更方便的协助用户查看细微部位的详细信息?
如何提高各种交互的反馈性?
如何提供用户的操作效率,如:增大可点击的区域,尝试新的交互方式来替代目前的标准控件?
如何让用户使用机器时有一个比较愉悦的心情?

如何尽可能降低用户出错的机率?

如何更好的掌握用户真实业务使用的场景?

如何更好的把握用户正确的心理模型?

........