7.pic
如果是一个关于美食的应用,用漂亮诱人的食物来吸引用户就成了这款应用视觉上所关注的事情。而作为交互设计师所做的,是让这样的视觉吸引力不被用户操作打断,在这里也就是不让美食离开视线。

Yummly这款应用的特点和优点在于:

1、欢迎页用视差滚动的呈现方式,文字与美食间有关联和连续性。(引导用户视线流,对应用作简介,为后台加载提供时间)
1.pic
2、home页面布局为瀑布浏览方式,上部常驻选项和搜索。(这种浏览为主的应用采用常规的标签导航是不可取的,因为其并不需要经常的页面功能间跳转,更多选项标签很好的隐藏了不常使用的功能)
7.pic
3、更多选项按钮点击打开,采用自上而下纸片展开形式,美食图片推压至底部(纸质隐喻所代表的实体隐喻,用实体的表面和边缘的质感打造出视觉线索,让用户感受到真实。熟悉的触感让用户可以快速的理解、认知。然而,实体(物质)的种类丰富,感受亦各不相同,在设计中我们可以灵活的运用物质,在符合物理规律的基础上,打造出不同的使用体验。)[1]
2.pic
4、搜索按钮点击后,与更多选项按钮一起向下移动,原位置出现搜索输入框,美食图片灰色遮罩。(输入框和按钮给用户的感觉在层级上是上升一层,不会打断用户的浏览状态)
3.pic
5、登录页面自上而下滑入,取消为从原状态滑出。(登录页的临时浮层状态的作用与上面作用一致。而且先浏览再登录的方式也很友好)
5.pic
6、美食详情页,原材料、营养、指南三个选项选择后,自下而上推起。保留美食图片。(页内的标签减少跳转,方便浏览)
8.pic
7、点击yum之后,以toast显示收藏成功,右侧弹性提示已收藏于右边栏。(同样是隐喻方式,用弹起告知收藏成功的物品的去向,也告知用户下一步应该从哪里找到所喜爱的美食图谱。这一点,在我们所常见的应用的收藏夹功能很值得学习。)
6.pic

总结:

所谓营造一个应用的气氛,仅仅靠视觉风格的统一是不够的,交互上我们也可以做更多的功夫,其中包含尽量少的闪屏,相对简单的操作区,更有意义的动效,yummly算是在应用气氛营造上一个很好的例子,值得参考。

 

参考:

[1]Material Design-Introduction. http://www.ui.cn/project.php?id=18839

我将很期待与您交流!
我的微信:infoier
我的QQ: 401764289
我的微博:http://weibo.com/u/2978183373