UI设计

【每日一练6】清单/记事类应用交互设计总结

作者:口袋使者 2016-10-26 我要评论

抛开前期的流程设计和框架,最后用户能比较直观感受到的不外乎三点,一是应用的层次,二是信息的展现,三是功能的可见性。层次其实也可以理解为导航,用户是怎么...

这几天分析了几款记事类型的app,初衷是想学习一些交互模式,所以在分析的时候没有明确地表明孰优孰劣,更多地是去思考这些模式背后的原因,虽然有可能只是设计师拍脑袋做出来的。今天稍微做一些总结。

抛开前期的流程设计和框架,最后用户能比较直观感受到的不外乎三点,一是应用的层次,二是信息的展现,三是功能的可见性。层次其实也可以理解为导航,用户是怎么在应用的所有内容之间切换的。信息展示,是用列表,用卡片,什么需要展现,什么可以暂时隐藏。功能方面跟信息展示是一个意思,只是一个是内容,一个是操作。这三个是我自己为了方便描述分出来的,可能不是很严谨。
下面就从这三个方面来讲记事类应用的设计。

1、层级

清单类或者记事类,本身的作用就是帮助用户整理信息,所以不可避免的会有多个层级,根据产品的定位不同,可以有便签类、清单类、记事类等。像清单类的,可以有文件夹--清单--任务--子任务,记事的像onenote,有笔记本--分区--页面三个层级。google keep的层级比较扁平,主要是通过添加便签和颜色进行区分。还有的是通过时间来管理,因为任务往往会对应一个时间。

这类应用的特点就是,(1)单个信息量小,信息总量大,不大的话还需要应用来协助管理吗,(2)内容个性化,难以自动归类,一千个用户有一千种形式的记录。
信息量方面,不少应用都做得不错,也各有特点,一会简单介绍一下。个性化方面,一个是自定义列表或清单,一个是添加标签,颜色,还有就是利用好搜索功能。
下面来看例子。


从左到右分别是:滴答清单、奇妙清单、Any.do


三个比较典型的导航的例子,第一个是侧边栏,使用比较普遍,当然,也就显得比较普通了,好处是进入应用后直接看到任务,缺点就是如果需要在清单之间频繁切换,体验可能不是很好,特别是手势方面没有其他优化的时候。第二个可以算是列表式或者内容式导航,名称不重要,能说明白就行。好处坏处和第一个相反,不能直接看到任务,但是简单的点点点比侧边栏切换好一点,而且在奇妙清单中,从任务返回列表,可以通过在屏幕任意地方右滑,方便得多。第三个比较特别,也是挺有意思的一个设计,算是侧边栏的变形,但是不能在左边缘拉出,只能通过左上角点击,效率算不上好,但是切换的动效,还有形式确实让我眼前一亮,所以列出来做参考。

除了这三个,还有onenote典型的多级导航,打开之后默认在笔记本的页面,然后你需要依次点击分区,页面,再到记事的内容。印象笔记也是,不过少了一层分区。这样的设计,对于那些内容比较多的用户来说很受用,不过,可能更适合于pc端。

2、信息展示

记事类另一个很重要的特点就是现实隐喻,即使现在电子化很方便,各种记录交流都可以在电脑和手机上完成,但纸质的记录还是挺多的,某些情况下,纸质的记录和查看比电子方便得多。所以在设计应用的时候,怎么从现实中得到灵感,又怎么体现现实中不具备的优点,都是需要考虑的,信息展示就是其中很重要的一块。


左上:锤子便签 左下:Any.do 右上:滴答清单 右下:奇妙清单

上面截图是四种不同类型的展示形式,其实怎么展示,还需要考虑整个应用的风格是否合适。

展示的形式也会影响到手势的操作,比如上面截图中的四种形式,对应的手势是不同的。锤子便签的,偏写实,往右一拉会出现一个删除的小纸条;any.do没有勾选框,是直接手指向右滑动,然后任务就会被划掉并移到下面;滴答清单和奇妙清单都有勾选框,但是奇妙清单的小卡片形式,用户可能会更明确这个是可以拖动移除的。

还有一个,信息的类型有时比较多样,可能会有音频、图像、文件,一般的处理方式都是只在记事的详情中显示出来,在列表的时候是显示一个相应的icon,表示包含了图片等。印象笔记则是例外,在笔记列表中,会在对应的记事的右边显示图像的缩略图。

3、功能

记事类的应用,因为层级关系多,信息类型多,所以相应的功能的设计也需要好好考虑。这里我们不讨论功能该不该做,只讨论应该怎么做。思路也比较简单,一是减少其他功能的展现,让用户专注于文字,将干扰减少。二是尽可能将功能都展现出来,提醒用户可以进行操作。比如下面这个例子。


左:奇妙清单 右:滴答清单


一种是直接在内容中提示用户,提示所在的区域同时也是功能的触发区,而且也是添加之后的显示区域,这样一来就直观很多。另外一种则是将功能都放到菜单里面,打开之后才能看到,虽然不直观,但是界面更加简洁,某种程度上来说,干扰更小一点。
不知道这两款软件设计的时候是怎么考虑的,但我觉得有一个很重要的因素是数据,用户中,使用图片的人数,频率到底有多少,语音呢,文件呢,如果比例较少,是否值得为了这一部分人牺牲其他用户的体验。另一个问题是,如果藏在菜单中,用户会不会有一种思维惯性,觉得这款应用没有这个功能,等到真正需要的时候,不是去菜单里面找,而是直接使用另外一款明确表示有这个功能的。这个我暂时没找到答案,如果有想法的请告诉我一声,谢谢。

另外补充一点,google keep,滴答,印象笔记,onenote都是将大部分功能隐藏的,当然,形式各不相同。但都不像奇妙清单这样直接展现出来的。

功能还可以用手势来触发,滴答的手势就挺有意思。滴答清单针对一个任务可以有四种手势,左右两个方向,长滑和短滑,对应的可以触发四种不同的操作,这对我有不少的启发,新版的还加了一个在完成时间上长按再滑动,可以设置完成进度。不过我去官网翻了一下评论,好像用户不怎么喜欢。

这一篇虽然说是总结,但其实还远远不够,只是将我最近分析的一些东西做了归纳,比如导航可以是怎么样的,功能可以是怎么设计的,手势和动效也是很重要的部分,这里没怎么详细讲,一来是我自己不熟悉,二来是展示的方法比较麻烦。
还有一个体会就是,脱离用户角色,产品定位来讲交互设计其实是很虚的,实际使用中情况往往复杂得多。

以上。

每日一练系列文章学习参考:

【每日一练1】电话功能交互设计

【每日一练2】google keep 交互设计分析

【每日一练3】交互流程图

【每日一练4】滴答清单交互设计分析

【每日一练5】奇妙清单与滴答清单交互设计对比

【每日一练6】清单/记事类应用交互设计总结


阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都