交互设计的一些思考,交互设计中对于手势的一

在有限的界面尺寸里,给予用户无限操作可能。

Clear的出现引起了大家对手势操作的热忱, Google新专利采用连续手势也让我们看到了个性化手势的前景。确实,手势操作能够减少界面元素,提升效率;但其不可见性,抽象性,需记忆性等特点也决定了它的弊端。如何扬长避短,根据现有手势的特点在合适的情境中使用,同时根据文化约定、实物隐喻、表音、表意等发想创新手势,而非一味地追逐跟风,值得我们思考。本文结合了珊璞之前对客户端手势应用的分享以及网上的相关资料,从手势的空间感带来的心理感受,手势赋予的功能,引导方式,与动画的配合,创新几个角度进行了总结。许多是大家已知的想法,在这里仅做简单的梳理;而引导方式、与动画的配合等,希望大家能有更多的思考,因为通过动画、转场、拟物等方式,可以使注意力与流程更加流畅,同时贴合现实世界,从而有助于手势的抽象性、需记忆性的克服。阅读全文

股票中行情内容是最多的,其内容展现的难度系数相当大,所以它的交互设计也十分棘手。

一、空间感带来的心理感受

在一个界面中,仅通过点击方式无法承载股票行情的诸多功能点。要想界面简洁、突出重点就必须把相对次要的功能隐藏起来。在行情界面设计过程中遇到的主要问题是哪些东西该显示,哪些东西隐藏,隐藏后如何让用户发现,怎样的显示方式更容易被用户接受等等。

(一)Flick(滑动)-Drag(拖动)

参考一下股单iOS版中行情界面的手势覆盖情况:

(1)横向滑动

除了以上列举的手势,再加上被用户所认知的下拉刷新、上滑调出控制中心,在这个界面中竟然覆盖了十余种手势操作方式,算起来还是挺惊人的。

横向滑动在空间上给人的心理感受是一种前后关系。这种前后又可以理解为平面空间的前后 和立体空间的前后 。因此在心理感觉上,横向滑动带来平级的切换、返回首页(一般只有2个层级)、移动地图,切换导航等都是合理的。

在优化行情界面设计前,团队对用户在行情界面的使用场景进行了优先级排序,综合考虑了手势的认知成本以及手势操作的难易程度,最后确定了手势与功能的匹配方案。

(2)竖向滑动

但当我把既定的方案落实到具体的界面交互时,我开始陷入了深深的疑虑中,一个具有“哲学”性质的问题始终在困扰着我:显性的点击操作与隐性的手势操作分析。

竖向滑动在空间上给人的心理感受是一种上下关系。这种前后又可以理解为平面空间的上下和立体空间的上下 。因此在心理感觉上,竖向滑动带来页面上下间、前后间等感觉都是合理的。

举个例子:iOS与安卓的返回操作

(3)拖动

IOS:

拖动与滑动不同的地方在于其需要的力气更大,因此在空间上更强调立体空间的前后(或上下)。

显性——左上角返回按钮

(4)双指(收缩、拉开)

手势——左侧边缘滑动返回

双指(收缩、拉开)在空间上有

安卓:

a、从外到内(或从内到外)、拨开(或捏合)的感觉。

显性——左上角返回按钮,底部虚返回键

b、将堆叠在一起的物体(如纸张)弄散(或收起)的感觉。

手势——无

c、打开、关闭的感觉。

分析:

d、将压扁的物体撑开(或捏扁)的感觉。

共性,返回键是一个界面中最基本的操作,大概是为了降低用户产生误触的概率,iOS与安卓都把它安排在一个较为明显却不太容易操作的左上角位置。

因此在心理感觉上,双指(收缩、拉开)带来的放大缩小、打开关闭、新增删减、合并分离等感觉都是合理的。

差异,iOS和安卓除了左上角的返回按钮,还有其他具备各自系统特色的返回操作。iOS采用了左侧边缘滑动返回的手势操作;而安卓则是底部的显性返回按钮操作。结合《导航篇》的设计分析,安卓左侧边缘滑动唤出抽屉导航,与左侧边缘滑动返回的手势产生冲突,故此没有采用该种滑动返回的操作方式。

(5)按住并拖动

国内很多安卓手机厂商的返回按钮设置存在差异,有的设在左边,有的设在右边,返回按钮设在中间的比较少见。我好奇的是,国内某些手机厂商要抄袭苹果的设计,何不删减底部返回按钮,加装左侧滑动返回手势的操作?

按住并拖动给人的感觉是操作对象随手指而动,适合可以随意拖拽的对象。

(当然,安卓平台也有很多APP是支持左侧边缘滑动返回的。例如微信,左侧边缘滑动返回上一级,滑动切换底部tab栏。安卓版的微信也是十分任性,在一个二级界面里就有三个可以进行返回的操作,不知微信团队是没有考虑清楚还是故意而为之,呵呵哒!)

(6)Tap(轻点)

显性的点击操作与隐性手势优缺对比:

轻点没有明显的空间关系,但因为操作成本低,并且与日常生活中的某些操作相似,辅以拟物化设计或相关的动画,也可以达到简单贴心的效果。

不过,隐性手势中可通过反馈的方式弥补列举的不足,如果手势的反馈可以让人愉悦,那么这点操作负荷根本不值一提。

二、手势赋予的功能

页面中具体是使用显性的点击还是隐性的手势还需要根据实际界面尺寸、功能优先级、属性以及产品的定位、目标人群来确定。

(一)从功能上看,目前横向滑动赋予的功能有:平级切换、返回首页,拉出附属功能,开关,滑块,删除。

在有限的界面尺寸里,给予用户无限操作可能。这是我们在设计中秉承的宗旨。

图片 1

在股单安卓版的行情界面设计中,我们根据安卓的系统特性和用户的系统认知、操作习惯对个股行情页面进行了重新设计。

(二)从功能上看,目前竖向滑动赋予的功能有:下拉刷新,底部加载更多、全屏、上下篇切换、返回上一级,拉出附属功能。

在这些手势中具有突破性的是采用了右侧边缘滑动进行K线周期和技术指标的设置。这种操作手势在常见的APP中使用的频率较低,所以用户的学习成本和认知成本相对较高。我有点想不通的是,为啥手机边缘的顶部下滑、底部上滑、左侧右滑这些手势都快被各种APP玩坏了,右侧左滑这个手势却很少被设计利用起来?

图片 2

在股票行情的界面中,我们做过许多K线周期和技术指标设置的入口设计方案。如采用Material Design独具特色的悬浮小球球,像其他竞品一样把设置项直接放在界面上……这些方案我们都不太满意。我们不希望过于强调这个设置入口从而导致用户查看分时、K线数据时的注意力受到干扰。

(三)拖动是更大力度的滑动,常见的是拉出附属功能或其它隐藏内容。

最终我们选择了右侧边缘左滑的设置方案。然而在进行可用性测试时,许多用户都不能发现这一个手势操作,这让我们感觉有点蛋疼。在产品上线时,我们无奈地在这个地方加了个引导提示。关于这一点,其实我是拒绝的,需要引导操作的设计不是好设计。

(四)双指收缩、拉开常见的功能是:图片、字体放大,亮度调节,打开关闭,新增删减等。

为了更好地培养用户这个使用习惯,股单安卓版中其它设置、编辑功能也采用了这一手势。在接下来的新功能中我也会尽可能地把这个手势利用上去,希望各位看官在体验过后能积极提供反馈意见。

(五)按住并拖动一般用于自定义(改变顺序,加入,拉出等)。

对于设计中隐形的手势操作,用户操作时可能需要些学习成本、认知成本,为了给予用户优质的体验,并在操作中能不断的发现一些小惊喜,我们把这些成本、风险一并承担了。

轻点的功能非常之多,不详述。

废话就啰嗦这么多了,若是有小伙伴想体验这些手势设计在产品中的应用,那就赶紧去下载股单折腾一番吧!

三、引导方式

目前常用的引导方式有:

(一)露出某一部分,提示前后、上下有隐藏的内容或操作,如QQ浏览器。

图片 3

(二)到达界限值时给出文字、动画提示等,如clear,拉到底部时提示往下拖动清除,拉到顶部时提示返回上一级。

(三)在首次开启应用,用户帮助中进行说明,许多应用都采取这种方式。

(四)进入具有手势操作的界面时给出气泡、动画、图片等提示 ,如腾讯爱看。

(五)通过拟物的方式提示可以通过手势进行操作。如拉绳状、开关状、滑块状、掀起页角状等。

(六)提供反馈

由于手势的不可见性和误操作性,除了在操作前进行引导外,在操作后也应提供一定的反馈。反馈方式可以采取声音、抖动等。而对于误操作二次确认也有一定的必要,特别是较重要或隐晦的手势,例如删除等,要让用户可以及时撤销操作。

四、动画配合

除了引导之外,在手势操作的转场之间运用合适的动画,可以给用户更加明确的心理感受,这种和手势配合的顺势而动能够使手势更易理解。比如左滑返回首页这一操作可以用翻页动画营造出立体的空间感,加深用户的记忆,从而更容易地记住这一手势。拉出附属功能可以用拟物或动画强调上下层的空间,比如拉时露出前一页内容。拉到页面顶端可以用弹性效果,强调已到达顶部。 比如双指收缩拉开可以用扩散、分离、折叠等动画表示内容的增删。

图片 4

五、创新手势

(一)根据文化约定

手势本身或操作过程的设计符合特定文化里约定俗成的用法,形象的、有意义性的手势更加容易记忆和学习。比如珊璞提出的用打叉的手势表示删除。

(二)根据实物隐喻

手势本身的形状或操作过程是从具体实物中简化出来的,其内涵具有实物的隐喻意义。比如划圈将某部分内容选中。

(三)表音

将命令或品牌的中文或英文的首字母符号作为该命令的手势。如用 c(copy)表示复制; Google通过g(google)尾部延伸圈中内容进行搜索,通过w(wiki)尾部延伸圈中内容查看在维基百科中的解释。

本文由明仕msyz手机版发布于宠物-蜂鸟摄影论坛,转载请注明出处:交互设计的一些思考,交互设计中对于手势的一

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。