UI设计

最美壁纸交互设计分析

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

在使用最美壁纸的时候,发现其很多交互方式值得思考,有一定的启发性,在这里分享一下我的一些思考。另外,由于最美壁纸功能相对简单,所以我在分析的时候,试着...

在使用最美壁纸的时候,发现其很多交互方式值得思考,有一定的启发性,在这里分享一下我的一些思考。另外,由于最美壁纸功能相对简单,所以我在分析的时候,试着先把所有的功能都列出来,然后再尝试自己设计,虽然实际意义不大,但也是一种新的尝试,下面的介绍会按照这种思路来。

最美壁纸主要有三个层级,图片、图片列表、分类列表。
其中,图片本身会包含日期和文字,但可以在下载和分享的时候去除,另外还包含有图片和文字的作者。操作方面,可以下载,分享,预览,点赞,设为壁纸,设为锁屏(需要安装最美锁屏),当然,还有导航,可以切换到图片列表或者分类列表。
然后是图片列表的,需要展示多个列表,比如每日最美,热门投稿,摄影首发等,每个图片除了要显示文字和日期外,还要显示现在的点赞数。操作上,可以对图片进行点赞,然后是投稿的功能,最后同样需要有导航,切换到图片和分类。
分类的话相对比较简单,展示各个类型,然后就是导航功能了。
此外还有一个全局的设置,包括设置每日自动更换、是否接受更新消息,评价,关于等功能。

对着上面这些基本的内容和功能,大家可以尝试着自己设计一下。举个例子,首先图片列表和大图可以是两种不同的视图,可以在屏幕上加一个按钮切换。然后分类列表作为一个导航,可以使用较普遍的抽屉式,打开之后可以切换图片类型。然后功能方面,大图的功能,将一些重要的列出来,其他就用溢出菜单或者“更多”的工具栏隐藏起来。

接着我们来看最美壁纸到底是怎么设计的。


左:设置菜单 中:查看图片 右:操作选项


应用打开之后是默认进入每日美图,即上图的中间截图,然后手指下滑,设置菜单出现,就像我们在系统中下拉状态栏一样,接着点击图片,图片下降,其他内容和操作出现。一开始接触感觉这种交互方式非常有趣,很方便也很简洁。但其实还是有不少地方值得考虑。

1、手指下滑拉出设置菜单

屏幕上再也没有那个小齿轮了,取而代之的是一个很常用的手势,而且,下拉手势的触发点是整个屏幕,在任何地方轻轻下滑,设置菜单就出现了。这里我的问题就是,设置菜单的使用频率有多大,值得使用这样的方法吗?这个手势本身有没有问题?

设置菜单的使用频率应该不高,而且在最美壁纸的设置菜单中,内容也是像关于,评价,是否开启自动更换等使用次数很低的功能。以这样一个极方便的手势去打开一个几乎不怎么使用的功能,感觉不是很必要。然后是下拉手势的问题,一个比较常见的用法是刷新,用户会不会经常误用?同时,在状态栏下拉是用于打开系统快捷设置,最美壁纸中图片是全屏显示的,没有状态栏,所以一般没什么问题。但是如果有消息,状态栏出现,用户想去查看消息的时候,会不会也很容易误触?

而且从使用场景来说,用户在查看图片时,在图片上下滑,他们更期待,或者是他们的心理预期是针对图片做出一些操作。然而结果是一个不相关的设置菜单。

2、点击出现操作选项

这个是我觉得比较好的方式。屏幕上没有工具栏了,也没有溢出菜单了,点击一下图片,也就是选中它,然后就进到一个编辑模式或者操作模式的环境,很合理。而且操作按钮都是透明的,尽量减少对图片的遮挡,但如果从图片的角度出发,为什么不干脆让图片保持全屏,就是在之前的基础上,没有下降的动效,而是点击之后从上下出现该出现的东西,这样过渡也更平滑一下。


左:预览模式 中:上滑操作 右:退出确认
3、设置壁纸

这个功能有两个入口,一个是在查看图片的时候,直接上滑,如上面截图的第二张所示。一个是在选中图片之后,选择预览操作,在预览窗口设为壁纸。第一个手势我还是持保留意见,首先在大部分用户的认知里,上滑并没有和确认,选中,之类的积极性的行为联系在一起,而且当我们手指上滑的时候,下方有一部分会被手指挡住,不够明显,还有一个就是没有相应的撤回机制,因为这个行为的发生比较容易,存在较大的误触机会,增加一个snackbar可能会好一点。与此相对的,在第二个入口里,因为设为壁纸足够明显了,而且是经过了两层的操作才进入这个界面,所以基本没有误触的可能,也就不必有撤回功能。

4、广告

最美壁纸在你点击返回按钮准备退出时,会出现广告,我觉得这个时机是很好的。不会干扰用户的操作,因为你既然要退出了,那相应的操作也应该完成了。而且同时会吸引用户的注意力,让用户在退出之前犹豫了一下,说不定用户突然又想再看看,就取消退出了。


左:列表页下拉 中:列表页上滑 右:分类页面
5、切换方式

从图片列表到分类列表的切换,除了可以点击左上角的icon外,还可以直接左右滑动。不是平时的只能在左边缘滑动,而是像切换标签一样。比如上面截图的第二张和第三张。在第二张里左右滑动切换不同标签,滑到左边是可以无缝滑动到分类页面,然后再滑动回来。这种导航方式给了我不小的启发,导航其实也可以像页面一样,或者说,其实就是一种内容式导航。另外,左上角的icon是一直不动的,通过点击icon也可以在分类和列表直接切换,而且由于位置不变,就可以很方便的切换,这同样是一种很有启发性的设计,之前我见过的多数导航都是切换的时候需要点击不同的地方,相比之下就显得麻烦多了。

另外就是最美的广告插入确实很巧妙。比如上面截图中的第一张和第二张,通过下拉时标签的下移,腾出一些空间为自己做宣传,截图里面是“评价最美”,不同的时候会出现不同的链接,比如“最美官方微信”“最美全家福”等等。还有就是左下角最美有物的宣传。因为长得很像按钮,所以会忍不住去点击它。但是并不会像很多别的软件一样,点一下就直接下载,在这里,点击之后是弹出一小片最美有物的介绍,如果你已经下载了,会有“打开看看”的操作,如果没有下载,就会有“试一试看看”的操作。

总体来说最美壁纸的体验是不错的,很多细节都做得很好,另外,交互方式也给了我很多的启发,像手势的运用,工具菜单,导航切换,广告融入等。



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

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

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

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

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

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

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

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

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

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