ENJOY作为一款美食应用,以精致高端从众多同类应用中区分出来,而它也获得了2015年的豌豆荚设计奖,今天就它的页面交互来进行一下分析。
启动页面
启动页面并不是像普通app(通过引导页展现产品的功能)而是通过一系列富有视觉冲击力的动画,以食物、食器为元素,展现出饮食的仪式感,很有艺术气息。
主页元素
主页没有采用常见的tab bar的形式,而是筛选功能和navigition bar安排在同一个黑色的背景上。整个页面可以一直向下滚动,有更好的浏览体验。
1.导航栏
导航栏将搜索、位置、个人、发现、筛选功能很好的进行了排布。
第一层安排了一些基本入口,搜索、位置、个人。地理位置字号很小,但不影响可读性。
第二层将新品、附近、夜生活(可根据不同时段进行更改)组合在一起,这三个都代表发现,但代表不同分类。将热门分类安置在最右端,代表另一种信息,与前三种不同。
搜索功能
搜索功能安排在页面的左上角,以一个放大镜的形式进行展现。
1.点击效果
点击放大镜按钮,触发(按照时间顺序排列)
- 放大镜按钮透明度发生变化
- 主页左移,搜索页面左移,v(主页)< v(搜索)
- 搜索框删除按钮显示
- 输入键盘弹出
两个页面移动速度不一样,保证了视觉上的连贯性。在移动过程中辅以其他元素的动画效果,增加了页面的活泼程度。
页面左滑进入,点击取消,页面右滑退出。使用手势右滑,也可回到主界面。
『思考』
没有使用后退<,是为了使页面左右更加平衡。
点击搜索向左滑动而不是向右滑动,是因为在退出页面过程中,右滑在用户心中已经形成思维定式。
2.搜索页面内容
页面内容:
- 搜索框提示“请输入商品名、商家、分类、商圈”,简明的告诉用户可以在搜索框中搜索什么。
- 搜索页面中推荐了9个(3x3)热门搜索,词条内容包括商品名、商家、分类、商圈,与搜索框内置提示文字类型相符。
- 当搜索过一些词条后,页面增添搜索历史元素。搜索历史包括最多包含5条内容,按照搜索先后顺序进行排列,在搜索历史最后有清除搜索记录按钮。
页面交互:
- 在搜索框中输入相应文字,点击键盘上搜索按钮进行搜索。如果输入错误,点击差号进行删除。点击取消则退回主界面。
- 点击热门搜索中关键字或搜索历史关键字,关键字会显示在跳转页中的搜索栏中。点击差号,可以跳转到上一页,且关键字消失,替换成“请输入商品名...”。页面直接右滑,关键字则不消失。
- 在页面跳转过程中有加载小动画。
主页信息流
1.内容排布
主页信息流中主要分为活动banner与单品推荐两种。
Banner
- Banner数量不定量(在观察过程中发现有1张、3张),呈纵向平铺。
- Banner种类有整点抢礼券、同种单品集等形式。
单品推荐
- 单品推荐分两种形式,一种是水平的滚动条,另一种是单品大图的瀑布流。
- 水平滚动条中显示食物小图、单品名称、价钱与喜欢按钮。
- 瀑布流中显示食物大图、食物分类、餐厅地点、餐厅评价(惬意用餐环境带来独到体验)、价钱(原价和现价)与喜欢按钮。
『思考』
使用不同形式的单品推荐(横向滚动、纵向滚动)可以让页面交互形式更佳多样化。
Banner采用纵向平铺可以尽可能的展现所有信息,且当banner数量较少(1-2张)的时候就不存在占用过多页面空间现象。但当数量过多(超过3张),则会将页面中下面的元素排挤出首屏,影响阅读。
2.动效
滚动
当页面处于滚动状态时,购物车平移出主界面,但保留一些边框。当页面恢复静止,购物车图标又回到界面左下角。
『作用』尽量减少对页面主体内容的干扰,但又可以及时在主界面中快速查看自己的购物车内容。
刷新页面
下拉刷新动画分为两个步骤,一个是页面加载动画,另一个是购物车移出界面动画。页面加载过程中,动画跟随用户下拉动作产生变化,当页面到达下拉位置,用户释放后,动画保持形状不变,形状内部发生变化,告知用户正在刷新。刷新完成,动画上移消失。
**