最美壁纸交互设计分析

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

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

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

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


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

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

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

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

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

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

2、点击出现操作选项

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

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

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

4、广告

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

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

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

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

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

以上。

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,432评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,705评论 22 664
  • 01. 嘿,刚刚用手机买了下星期回学校的车票。此刻的你,怀揣着一种难以名状的心情,敲下了这些随性的文字。 你总是这...
    另一个陈易阅读 14,829评论 581 960
  • 写在最前面,由于久未锻炼,在2015年12月07日陈威组织爬山活动中开始了第一次爬山。我从未想过自己能够每天坚持爬...
    谢文武阅读 218评论 0 0