2016-12-5 资深UI设计者
在有限的界面尺寸里,给予用户无限操作可能
股票中行情内容是最多的,其内容展现的难度系数相当大,所以它的交互设计也十分棘手。
在一个界面中,仅通过点击方式无法承载股票行情的诸多功能点。要想界面简洁、突出重点就必须把相对次要的功能隐藏起来。在行情界面设计过程中遇到的主要问题是哪些东西该显示,哪些东西隐藏,隐藏后如何让用户发现,怎样的显示方式更容易被用户接受等等。
参考一下股单iOS版中行情界面的手势覆盖情况:
除了以上列举的手势,再加上被用户所认知的下拉刷新、上滑调出控制中心,在这个界面中竟然覆盖了十余种手势操作方式,算起来还是挺惊人的。
在优化行情界面设计前,团队对用户在行情界面的使用场景进行了优先级排序,综合考虑了手势的认知成本以及手势操作的难易程度,最后确定了手势与功能的匹配方案。
但当我把既定的方案落实到具体的界面交互时,我开始陷入了深深的疑虑中,一个具有“哲学”性质的问题始终在困扰着我:显性的点击操作与隐性的手势操作分析。
举个例子:iOS与安卓的返回操作
iOS:
显性——左上角返回按钮
手势——左侧边缘滑动返回
安卓:
显性——左上角返回按钮,底部虚返回键
手势——无
分析:
1.共性,返回键是一个界面中最基本的操作,大概是为了降低用户产生误触的概率,iOS与安卓都把它安排在一个较为明显却不太容易操作的左上角位置。
2.差异,iOS和安卓除了左上角的返回按钮,还有其他具备各自系统特色的返回操作。iOS采用了左侧边缘滑动返回的手势操作;而安卓则是底部的显性返回按钮操作。结合《导航篇》的设计分析,安卓左侧边缘滑动唤出抽屉导航,与左侧边缘滑动返回的手势产生冲突,故此没有采用该种滑动返回的操作方式。
国内很多安卓手机厂商的返回按钮设置存在差异,有的设在左边,有的设在右边,返回按钮设在中间的比较少见。我好奇的是,国内某些手机厂商要抄袭苹果的设计,何不删减底部返回按钮,加装左侧滑动返回手势的操作?
(当然,安卓平台也有很多APP是支持左侧边缘滑动返回的。例如微信,左侧边缘滑动返回上一级,滑动切换底部tab栏。安卓版的微信也是十分任性,在一个二级界面里就有三个可以进行返回的操作,不知微信团队是没有考虑清楚还是故意而为之,呵呵哒!)
显性的点击操作与隐性手势优缺对比:
显性点击
优点:1.所见即所得 2.学习成本、认知成本较低 3.可控感强
缺点:1.页面功能容易臃肿 2.交互方式单一 3.缺乏趣味性
隐性手势
优点:1.页面简洁 2.交互方式丰富 3.可创造性强
缺点:1.学习成本、认知成本较高 2.不可控感 3.容易误操作
不过,隐性手势中可通过反馈的方式弥补列举的不足,如果手势的反馈可以让人愉悦,那么这点操作负荷根本不值一提。
页面中具体是使用显性的点击还是隐性的手势还需要根据实际界面尺寸、功能优先级、属性以及产品的定位、目标人群来确定。
在有限的界面尺寸里,给予用户无限操作可能。这是我们在设计中秉承的宗旨。
在股单安卓版的行情界面设计中,我们根据安卓的系统特性和用户的系统认知、操作习惯对个股行情页面进行了重新设计。
在这些手势中具有突破性的是采用了右侧边缘滑动进行K线周期和技术指标的设置。这种操作手势在常见的APP中使用的频率较低,所以用户的学习成本和认知成本相对较高。我有点想不通的是,为啥手机边缘的顶部下滑、底部上滑、左侧右滑这些手势都快被各种APP玩坏了,右侧左滑这个手势却很少被设计利用起来?
在股票行情的界面中,我们做过许多K线周期和技术指标设置的入口设计方案。如采用Material Design独具特色的悬浮小球球,像其他竞品一样把设置项直接放在界面上……这些方案我们都不太满意。我们不希望过于强调这个设置入口从而导致用户查看分时、K线数据时的注意力受到干扰。
最终我们选择了右侧边缘左滑的设置方案。然而在进行可用性测试时,许多用户都不能发现这一个手势操作,这让我们感觉有点蛋疼。在产品上线时,我们无奈地在这个地方加了个引导提示。关于这一点,其实我是拒绝的,需要引导操作的设计不是好设计。
为了更好地培养用户这个使用习惯,股单安卓版中其它设置、编辑功能也采用了这一手势。在接下来的新功能中我也会尽可能地把这个手势利用上去,希望各位看官在体验过后能积极提供反馈意见。
对于设计中隐形的手势操作,用户操作时可能需要些学习成本、认知成本,为了给予用户优质的体验,并在操作中能不断的发现一些小惊喜,我们把这些成本、风险一并承担了。
废话就啰嗦这么多了,若是有小伙伴想体验这些手势设计在产品中的应用,那就赶紧去下载股单折腾一番吧!
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务