GrabOne 重设计for Android

GrabOne是打折信息展示和订购平台,你可以在上面买打折的水果,也可以预定一次便宜的南岛游,而这一切活动、体验亦或是服务(在这里我会统称为“产品”)等都被划分隶属于几个不同的几个分类:餐饮、活动、保健美容、住宿、汽修。

性能问题:很明显jQuery Mobile封装的web app。每次进入或返回一个页面都要Loading一阵,不知道是不是每次请求数据是必须的行为,不然界面会白屏还是咋地?不过这比westpac one直接无脑封装要高大上了太多。

这次的重设依然分为导航系统和部分主要界面。

我没有尝试着去设计看似发挥空间很大的启动页(Splash Screen),因为理智告诉我这是个再也不能更加愚蠢的玩意。我为什么要知道你正在加载数据?这样能显得你很仁慈吗?我只想看到内容,哪怕是缓存的过时内容或者永恒不变的UI框架,而不是占据了一整个5英寸屏幕的丑陋Logo。不过我知道这些也只能是气话,因为我的老师都曾经告诉过我:“启动页是必要的,原因嘛,是因为绝大多数应用都有!”

左:原app启动页      右:原app首屏

页面顶部一共有六个icon对应六个不同的类别,与桌面网站呼应。此处的滑动设计可以很好地利用屏幕的物理特性,避免了空间的浪费。我采用了图片的设计,意图显示每个分类下最新的产品图片,由此我扩增了每个块的面积。请原谅我使用了无关的图片,因为搜集相关素材占据了我重设的大部分时间,这和我的初衷大相径庭。另外我也颇想试试Sketch的自动图片采集插件。

左:原app首屏      中:重设app首屏    右:重设app编辑精选(our picks)界面

与其用极不形象的icon,不如直接用文字更直观些。在导航栏中我使用文字替代纯粹的icon。同时我取消了编辑精选的banner设计,直截了当地显示两个产品合集,这也保持了和桌面网站的布局&内容的一致性。精选内往往有不定数目、且往往大于十五个的内容,由此我没有选择使用slider,而是打开新的页面。同时有别于一般i的卡片形式,精选产品拥有更大的图片显示面积。

左:重设app下拉刷新      右:重设app首屏下滑

符合潮流的下拉刷新,以及更改了当前app的best of the week的ribbon设计,以避免整行装饰性元素带来的视觉阻隔。可以看到我取消了当前应用中的每个产品项右侧的箭头,这是在安卓设计大纲中被明确禁止的设计。在下滑过程中,导航栏会自动收起,以提供更充裕的显示空间。

左:原app城市选择页      中:原app served site选择页    右:原app 国家选择页

当我第一次看到首屏导航栏的返回图标的时候,其实我是,是拒绝的,我跟自己讲,我拒绝,因为,其实我,根本没见过这样的app。带着好奇我点了点了一下,瞬时三观颠倒了。当然,没那么夸张。从上边的三张图可以看到,这个返回的过程是很漫长的,一共可以退三步,城市选择 > 大类选择 > 国家选择。这个逻辑是看似合理,实则诡异的。为什么这么说呢?首先我们必须认清楚这样设计的好处:避免了每次进入应用后愚蠢的重复设置、筛选信息,其次,这也说明了在不同的国家提供的大类是不同的(事实如此)。

左:重设app导航抽屉      右:重设app菜单

回过头来看grabeone,时效性和产品差异性决定了用户不可能产生高频的过滤地点和产品的行为,因此我摈弃了trade me中的置底filter menu或类似的设计。在我的重设中,我选择了整合大类到navigation drawer中,而保留了原app的排版。同时可以看到未登录状态下没有意义的my coupons等都被收纳于其中,而导航栏内的菜单可以提供设置、关于和登陆的入口。

对比原app和重设app的操作逻辑

而之所以说当前应用的这套流程奇怪,是因为实在太过繁琐,双向的选择也注定了在执行某项操作时会有额外的中间步骤,比如若要另选一个served site,就必须要先前往城市选择界面。而重设可以帮助把served site和country的逻辑关系理清,把城市和国家都归结于location中,而served site安置于drawer中,当在change location中更改国家时原本就展开的drawer内容进行刷新,并可以让用户看到这个刷新的过程,从而实现任务的并行分离。

英文版本

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

推荐阅读更多精彩内容