UI交互设计用户体验--返璞归真,一切回归自然UI/交互设计规范

唯物APP-设计|交互|体验

2018-01-14  本文已影响116人  Reple

到了每周一个APP的全面体验并且总结出一个可供设计师和用户参考的报告的时候了;这次体验的APP是一个小而美的生活指南——唯物。

简单介绍一下这款产品,产品是优雅优智科技(北京)有限公司开发的,创始人是张梦涵,公司注册时间是2015年6月26号,注册资本是25.32万元。团队在2015年由厚泽资本完成天使轮融资,融资金额未透露。

图片截取自天眼查

好了...话说的有点多了,下面继续。

唯物APP是2016年七月初上线appstore,并且在5个月前完成了2.0版本的迭代,到目前拿到手里的样子,真的是小而美,请看下面的GIF。

设备型号:iPhoneX

系统版本:iOS11.2.1

软件名称:唯物

软件版本:2.3.4

界面内容总览

文字内容的排版

主页

个人收录

栏目

专题

好了,下面正文开始......

从主页开始说吧。用户每日首先进入APP的时候会出现一个日历,左上角关闭进入主界面,日历在左上角可再次打开查看;日历内容是一个今日话题,点击进入话题列表。

栏目目前有四个,分别是:家事管理、居住升级、生活养成和日常探索。点击栏目会进入一个个的专题,在每个专题会有文章、指南、生活贴和清单。收藏的专题会收录在收藏夹的“生活贴”,文章、指南、生活贴、清单同理。

轮播图里显示的内容略多,有生活研究所(专题)、商品展示(APP内可购买)、运维专题活动、专题收录。

原型简析如下

主页

我的

在专题列表里,必有的内容是至少一篇文章,有的专题会有指南、生活贴、养成清单。目前只有运营团队或者平台推荐的用户才可以成为贴主并发布生活贴,普通用户只能选择一个生活贴在下方进行跟帖。

养成清单比较有意思,它根据一个专题列举了一些事例,比如我添加了一个“冰箱保养的指南”

按照清单提示步骤完成后点选划掉,100%完成度后提示完成,点击重做再次循环。

界面中的icon的色值很统一,在sketch上用吸管工具吸取的色值均为6AB076和323631

icon和logo的色值保持了统一

界面文字和点缀色用色

唯物把绿色贯穿到整个界面设计中,貌似在向外传达一种健康的生活观念,低饱和度的颜色又显得低调、不做作。

一次跟帖活动官方的“唯物绿”

界面整体的设计风格是大圆角卡片配合大面积的投影,卡片之间部分留白,文字排版清晰易阅读,图标敦厚、可爱。

在sketch上用一倍图的尺寸(375*812)测量了一下界面中卡片的圆角,10pt是最为贴近的。界面中所有的卡片保持统一的圆角尺寸,也使整体设计风格保持统一。

10pt的圆角

令人疑惑的是收藏夹并没有采用10pt的圆角,而是用了5pt的圆角,或许是想制造一定的差异化便于查找?但是收藏夹这种圆角卡片上面内嵌一个圆角图片的设计略显拘束。

5pt圆角的收藏夹

动效设计的总结

等待

空状态

点赞

1.在阅读文章界面到达底部的时候,再次上滑直接滑出页面返回上页。

碎片化的互联网时代,用户在浏览文字信息时,为了避免正事(上班、开会、等公交)延误,要规避一定风险:1.篇幅过长但是有用的文章可以先收藏,以后有时间再看;2.文章短小且有用可以马上看;3.长篇累牍不会看;4.短篇糟粕可以一扫而过。

谈一谈唯物的文章界面,首先用户点击进入这个文章页面后,并不知道文章的长度,质量如何,文章写出来肯定是要人读的。在用户快速浏览以鉴别文章是否具有收藏、阅读的价值时不免快速下滑翻看页面。

尽管在用户浏览触底后仍有一段距离可供缓冲,但是距离很微妙,作者在使用时经常是下滑后直接滑出页面,本想返回顶部仔细阅读一下的心情也没有了。

这样设计的猜想:

iOS系统左滑手势可以返回上页,那么可以猜测是开发人员在编程时运用了第三方的代码,产生的不知名bug导致在这个页面无法调用左滑手势来返回上页;否则没有理由不调用左滑手势。

底部再次下滑返回上页代替了左滑手势;尽管在页面底部有“关闭”按钮,但是为了提高阅读体验,在有下滑趋势(手指向下滑动屏幕)时,“关闭”是不显示的。如果滑倒底部,想用“关闭”来返回就要“上滑”一下,这时侯会显示“关闭”。

左边按钮是“关闭”

同样,知乎也是为了提高阅读体验,当用户有下滑趋势或下滑后停止时,底部的Tabbar是隐藏的。

下图知乎的阅读界面的返回是通过作者左滑屏幕的操作。

完美的左滑返回

2.搜索内容不直观,横向分类不便查找,不能保证所有人为搜索内容被直观呈现。

我们从搜索框尝试搜索“墨镜”

动态演示

静态图片

这里在搜索界面为搜索结果进行了分类:研究所、生活贴、文章、清单、用户。

在搜索之前,用户不会知道自己搜索的内容分类,除非是想特定去搜索指定的类别。但是在目前运营内容过少的2.0版本内,不可能在每个分类里都会出现许多模糊搜索的结果来填充界面。

所以在当前内容较少的版本,没有必要将搜索结果进行详细的划分,可以在一个页面将所有内容展示出来,不必去横屏一个一个查找搜索结果;虽然这个过程中会缺少探索的乐趣,但是也会减少搜索不到内容的失落感。

3.生活贴内容逻辑安排不佳。

点击生活帖里面的一个跟帖,出现的并不是一个完整的图片展示,展示的只是这个帖子下的图片和文字的缩略列表,再次点击才会进入详细图片。直白的讲,缩略的图片在这里用了两次,而用户为了查看完整图片也要点击两次。

界面交互

首页生活贴缩略

缩略列表

详细图片和文字

首页生活贴和缩略列表展示的信息是相同的,只是首页生活贴是横向滑动刷新后台数据,缩略列表是竖向刷新;并且,在进入缩略列表后的体验并不是进入之前自己所点选进入的图片,想要达到目标就要继续点击才会进入详细的图片文字信息。

解决方案可以是将第二步砍掉或者将第二步和第三步合并,整合功能的同时也减少了预期的步骤。

目前正在着手于唯物APP的redesign, 这里先画个大饼,后期(2周左右)会根据这一期找到的痛点进行改进并对APP的部分功能重新设计。

痛点在Part3提到的3点之外,还有一些需要改进的地方,我会根据这些地方进行redesign.

1.是否真的需要轮播图?

首页顶部的轮播图

顶部轮播图确实可以节省页面空间但是只有1%的用户真的去滑动,

2.是否应该让生活贴占据90%以上的页面?

这个问题可以扩展成:我真的需要知道其他人的生活方式吗?我有没有必要去关心他人的生活?

APP页面从中部下滑就全部是生活贴了,照片基本是普通用户的跟帖,在现今版本对照片把控很高的时候,可以基本保证内容的质量,但不排除是运营人员手动筛选的高质量图片作为展示。

主页面中部以下全部是生活贴

3.是否要将专题内容进行详尽分类?

生活灵感类文章不免有很多内容交叉的部分,太过详细的划分显得多余,用户在使用时也会过多思考,同时也加高了运营的门槛。

好了,这期的唯物APP体验报告就写到这里吧,下期预告——堆糖

本文是作者Reple的原创内容,如果转载要署名我的公众号eVoice和二维码哦,如果你对本文有其他的见解欢迎下方留言,可以的话希望能够帮我转发一下,每增加一个粉丝都是对我的一个鼓励~

转载注明出处哦~momo

上一篇下一篇

猜你喜欢

热点阅读