HYPEBEAST 是一家在线时尚流行资讯平台,主要用户为时尚从业者,潮流爱好者,Sneakerhead 等,群体偏向于年轻人(12-28 岁)。

对于一个新闻应用,用户的使用场景是碎片化的,如通勤路上,起床/睡觉前等,所以应用最需要满足:让用快速浏览感兴趣的新闻

当前应用 iOS 端存在的问题:

  1. 逻辑混乱;
  2. 内容展示低效。

逻辑混乱

HYPEBEAST 的内容层级结构:

用户在首次打开应用时被引导选择自己感兴趣的话题,但选择结束进入首页后默认显示的子 tab 是「Latest」而不是「Your Feed」。用户输入自己感兴趣的内容却不立即展示输出结果,与用户预期不相符。

页面顶部的类目切换看起来是一个 Scroll Bar,但却不支持左右滑动操作,只能点击切换,然而在 Drops 页面顶部,一样的样式却可以左右滑动切换,破坏了用户操作的「一致性」。

用户在切换 tab 时,核心诉求是:还有没有感兴趣的内容继续满足我,从产品逻辑上看,切换 tab 应该是区别于首页的场景,而不是作为首页场景的细分。Tab Bar 的第二个 tab 作为类别不合适,它是内容的归档与分类,与首页的内容是同一形态的,但这样设计会导致用户在首页看过的内容,还能在「分类」下看到,既没满足用户刷刷刷的需求,还可能让用户觉得是 bug。

内容展示低效

在首页「Latest」分类下,由于默认大图模式展示内容,导致第一屏只能看到两条内容,信息密度非常低,不仅如此,轮播展示内容模块更新不及时,有时候连续几天打开应用看到的都是同一条内容,时效性作为新闻的重要特性,用户在这里却感受不到。

「Drops」让用户可以查看最近发售/已发售的单品, 但存在两个问题:

  1. 展示信息密度低;
  2. 筛选操作只支持「品牌」和「单品类型」,筛选精确度不够。

重设计

首页

前面分析过,底部不同的 tab 其场景不同,分类不是首页的补充,而是为了更好地索引用户到自己感兴趣的地方,逻辑上分类下的内容与首页展示的内容是一样的,所以不需要新增一个 tab 来专门展示。重设计时将首页的导航与分类合并,默认分类为「推荐」,Scroll Bar 上展示更多的分类,同时可以点击分类右侧菜单栏进入编辑和设置,这样设计的好处:

  1. 推荐既可以满足系统给用户推送自己感兴趣的分类,也可以让编辑发布重大新闻时内容能迅速被用户看到;
  2. 展示更多的分类可以在不打断交互流的情况下让用户阅读更多感兴趣分类下的内容;
  3. 菜单栏既可以让用户可以快速进入未展示的分类,又可以设置自己感兴趣的分类及其排序

内容展示上,小图 + 标题的形式信息展示密度高,能让用户一眼看到更多的新闻,这对于一个资讯应用来说很重要,用户可以透过更多的内容来判断是否有自己感兴趣的内容。除此之外,增加了 Web 端的「Hypes」,用户可由此来判断内容的热度。

之前需要在「更多」下才能设置自己感兴趣的分类,现在可以直接通过首页导航栏对其进行设置。重设计后的分类页面可拓展性更强,当新增分类的时候就能直接放到「分类推荐」下,对于新增标签,还能通过文字(如 New,新增)等来告知用户,增加其被发现的概率。

Drops

Drops 页面主要的改动是视图的展示,也是通过小图+文字的方式在相同屏幕尺寸下展示更多的内容,同时优化了字体及日期的展示。

重设计 Drops 页面时,本来想展示鞋子的内侧图,因为这样鞋头往右,右侧又正好是文字内容,按照人们的视觉习惯,会自然而然地把两者联系起来。但后面发现在球鞋的官方展示图中,外侧面图的展示优先于内侧面图,大部分鞋子的外侧面都会是设计的重心,上脚时别人能很容易看到,所以以外侧图作为展示会更好。

为了让用户更快地找到发售的单品,Drops 页面有一个 Refine 按钮,点击后可以筛选单品的品牌和种类,但每个品牌每个月都会发售很多款单品,单纯地依靠这两个维度是不够的,于是增加了时间这个筛选维度,用户即使不知道具体的发售日期,仍然可以通过年份/月份来快速地找到单品的发售信息。

本次重设计主要涉及的是自己日常使用时遇到的问题,没有对以往的风格做更多的更改,更多的关注于内容,包含其展示及入口。