ENJOY-交互浅析

ENJOY作为一款美食应用,以精致高端从众多同类应用中区分出来,而它也获得了2015年的豌豆荚设计奖,今天就它的页面交互来进行一下分析。

启动页面

启动页面并不是像普通app(通过引导页展现产品的功能)而是通过一系列富有视觉冲击力的动画,以食物、食器为元素,展现出饮食的仪式感,很有艺术气息。

启动页

主页元素

主页

主页没有采用常见的tab bar的形式,而是筛选功能和navigition bar安排在同一个黑色的背景上。整个页面可以一直向下滚动,有更好的浏览体验。

1.导航栏

导航栏将搜索、位置、个人、发现、筛选功能很好的进行了排布。
第一层安排了一些基本入口,搜索、位置、个人。地理位置字号很小,但不影响可读性。
第二层将新品、附近、夜生活(可根据不同时段进行更改)组合在一起,这三个都代表发现,但代表不同分类。将热门分类安置在最右端,代表另一种信息,与前三种不同。

Navigation bar

搜索功能

搜索功能安排在页面的左上角,以一个放大镜的形式进行展现。

搜索功能
1.点击效果

点击放大镜按钮,触发(按照时间顺序排列)

  • 放大镜按钮透明度发生变化
  • 主页左移,搜索页面左移,v(主页)< v(搜索)
  • 搜索框删除按钮显示
  • 输入键盘弹出
搜索按钮

两个页面移动速度不一样,保证了视觉上的连贯性。在移动过程中辅以其他元素的动画效果,增加了页面的活泼程度。

页面左滑进入,点击取消,页面右滑退出。使用手势右滑,也可回到主界面。

『思考』
没有使用后退<,是为了使页面左右更加平衡。
点击搜索向左滑动而不是向右滑动,是因为在退出页面过程中,右滑在用户心中已经形成思维定式。

2.搜索页面内容
搜索页面

页面内容:

  • 搜索框提示“请输入商品名、商家、分类、商圈”,简明的告诉用户可以在搜索框中搜索什么。
  • 搜索页面中推荐了9个(3x3)热门搜索,词条内容包括商品名、商家、分类、商圈,与搜索框内置提示文字类型相符。
  • 当搜索过一些词条后,页面增添搜索历史元素。搜索历史包括最多包含5条内容,按照搜索先后顺序进行排列,在搜索历史最后有清除搜索记录按钮。

页面交互:

  • 在搜索框中输入相应文字,点击键盘上搜索按钮进行搜索。如果输入错误,点击差号进行删除。点击取消则退回主界面。
  • 点击热门搜索中关键字或搜索历史关键字,关键字会显示在跳转页中的搜索栏中。点击差号,可以跳转到上一页,且关键字消失,替换成“请输入商品名...”。页面直接右滑,关键字则不消失。
  • 在页面跳转过程中有加载小动画。
搜索跳转

主页信息流

1.内容排布

主页信息流中主要分为活动banner与单品推荐两种。
Banner

  • Banner数量不定量(在观察过程中发现有1张、3张),呈纵向平铺。
  • Banner种类有整点抢礼券、同种单品集等形式。

单品推荐

  • 单品推荐分两种形式,一种是水平的滚动条,另一种是单品大图的瀑布流。
  • 水平滚动条中显示食物小图、单品名称、价钱与喜欢按钮。
  • 瀑布流中显示食物大图、食物分类、餐厅地点、餐厅评价(惬意用餐环境带来独到体验)、价钱(原价和现价)与喜欢按钮。

『思考』
使用不同形式的单品推荐(横向滚动、纵向滚动)可以让页面交互形式更佳多样化。
Banner采用纵向平铺可以尽可能的展现所有信息,且当banner数量较少(1-2张)的时候就不存在占用过多页面空间现象。但当数量过多(超过3张),则会将页面中下面的元素排挤出首屏,影响阅读。

长滚动
2.动效

滚动
当页面处于滚动状态时,购物车平移出主界面,但保留一些边框。当页面恢复静止,购物车图标又回到界面左下角。
『作用』尽量减少对页面主体内容的干扰,但又可以及时在主界面中快速查看自己的购物车内容。

滚动

刷新页面

下拉刷新动画分为两个步骤,一个是页面加载动画,另一个是购物车移出界面动画。页面加载过程中,动画跟随用户下拉动作产生变化,当页面到达下拉位置,用户释放后,动画保持形状不变,形状内部发生变化,告知用户正在刷新。刷新完成,动画上移消失。

刷新

**

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,700评论 22 664
  • 人生如酒,有人沉醉,有人昏聩,有人猛饮,有人浅斟。 人生如一本书,厚重、长短、精彩亦或平庸,由自己去书写。 人生如...
    美安设计阅读 893评论 0 0
  • 越狱这部美剧一直以来都是美剧迷们津津乐道的一部神剧,剧中迈克,茶包哥,塞拉等角色完美的演绎了人性的种种。总之,越狱...
    honorifica阅读 617评论 0 0