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

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

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

1、层级

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

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


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

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

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

2、信息展示

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

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

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

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

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


3、功能

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

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

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

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

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

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

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容