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内容进行刷新，并可以让用户看到这个刷新的过程，从而实现任务的并行分离。

英文版本