UI设计

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

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

今天做的是滴答清单的分析,思路还是差不多,先走一遍所有页面和所有的功能流程,可惜有一些功能要会员,也就没有包括进来。然后就整理流程,归纳功能模块,最后...

今天做的是滴答清单的分析,思路还是差不多,先走一遍所有页面和所有的功能流程,可惜有一些功能要会员,也就没有包括进来。然后就整理流程,归纳功能模块,最后在axure上把交互稿大致画出来,画的时候就会考虑,如果是我会怎么做,现在这样设计的原因是什么。下面开始吧。
首先放出我整理的流程图。

画流程图的时候,有两个点比较纠结,一是流程要细化到什么程度,比如设置时间,不能说开始-设置时间-完成,也可能说开始-选择日期-是否更改日期-是否取消设置-选择时间-是否更改时间-是否保存----。二是流程的广度,一些流程中,会包括很多可选的操作,比如新建任务的时候,可以选择是否添加提醒,是否移动到别的清单等,这些需不需要包括进来。
纠结的时候,最需要的就是明确流程图的用途,如果你只是自己整理为了画交互稿方便的,那就你自己能懂就好,如果是为了分享讨论的,是线上的还是线下的,有没有其他辅助的材料等,都是判断的标准。

第一点我还是想说说浮动按钮的问题,从点击效率上来说,目前是直接点击下方的输入框,然后弹出键盘开始输入,点击左边可以设置任务的时间,点击右边可以转到语音模式,然后按住说话。


如果采用浮动按钮,点击之后进入编辑窗口,同样可以执行以上的操作。但是浮动按钮除了在视觉上比较突出,其他方面并没有什么太大的好处。比如提示文字,现在输入框可以提示用户一些相关的信息,比起浮动图标的icon来说明确得多。

常常说一图抵千字,就是说一张好的图片可以将复杂的内容简明地表示出来,但往往准确性不高,一张图片可以有很多的解读,要不怎么会有看图写作文这种东西呢,虽然结合特定的环境背景,图片可以明确其意义,但我们并不能保证每个用户的感觉都是一样的。

所以这里我觉得文字线索来得更有用,加上这里的操作不多,三个,时间设置,文字输入,语音输入,直接放置在底部栏不会显得太复杂。这也是和google keep的区别,keep的功能较多。

第二个讲讲时间设置方面。
时间可以在任务创建之间就先设置好,也可以等任务创建完成再增加。两种情况下又分别有几种不同的触发方式或者设置类型,好在最后都会到达一个相似的时间设置界面。与时间设置相关联的还有一个提醒功能,一般默认是“准时”,也就是你设置好任务的时间后,到了那个时间点会提醒你,可以自己修改为提前5分钟,1小时,1天等。最后还有一个循环提醒功能,可以设置比如每周一提醒我上班之类的任务。

整体的感觉就是,时间设置方面非常灵活,允许用户深度定制,我的第一反应是这样会不会太过复杂了,不过仔细分析下来,其实每个地方的时间设置都有特定的语境,每个流程也足够简洁。新建,编辑,查看,不同的模式下时间设置入口都是唯一的。这里确实做得不错,学习了。

这里提一点弹窗方面的,我发现滴答里面有几处地方是两重弹窗的,就比如时间,点击icon弹出设置界面,然后点击自定义则又弹出另外一个,而且还是直接叠着的。记得material design中讲到最好不要多重弹出,会增加z轴上的复杂度。不过这里确实不好做,首先第一层弹窗是没问题的,但是第二层,新打开一个页面,或者直接替换掉第一层的弹窗都不是很合适,如果在第一层就直接打开新页面,也显得不是很有必要。好在,滴答在弹窗出现的时候压暗了其他区域,不是刻意去关注的话不容易看到。

最后讲一讲手势操作。
滴答清单中的手势操作很丰富,对一个任务,可以有左短拉,左长拉,右短拉,右长拉,最新版还增加了针对时间显示区域,长按之后可以左右滑动设置进度,一开始有相应的引导,相应的反馈也有。其中右滑的两个操作是“完成”“优先级”,左滑的两个操作是“设置时间”“移动”。
对于新用户来说,要一次性记住四个手势对应的功能,以及把握好滑动的距离,这样才能利用好手势操作,不然每次使用都要摸索一下,还不如直接点击,因为这四个功能,三个是可以通过点击两次就打开的,“完成”功能则只需要点击一次,所以除非用户能掌握好手势操作,不然意义不是很大。

然后再看分析一下四个操作的排列,左边是什么,右边是什么,哪一个是长拉,哪一个是短拉,好像和操作本身没有什么必然的联系。除了右滑完成,这个是比较常用的,用户也应该可以很容易的上手。但是右滑同时有可能触发优先级设置的操作,是针对还没完成的任务而言的,两者就不太一致了。左滑的也是一样,两者并没有可以联系的地方,或者说,直接联系的地方。这样一来,用户学习的成本就更高了。

手势在这里只是一种触发操作的替代方式,可以提高资深用户的操作效率,普通用户大可以直接点击执行操作,只是如果可以优化一下,让用户更容易学会就更好了。

以上。
欢迎评论交流。

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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