[B·G – 19] Using – Fancy

Fancy 从事社交电商已有多年,App 版本也在 8.0 时迎来新设计。虽然我见过 8.0 之前的版本,但是并不熟悉。所以本文依然从视觉上浅谈一下 Fancy 的各处我注意到的地方。

国区商店地址: https://apps.apple.com/cn/app/fancy/id407324335

Google Play: https://play.google.com/store/apps/details?id=com.thefancy.app

8.3 – iOS 13 (Public Beta 6) – iPhone XR – 6.1″

如果你忘记了 Fancy 之前的页面是怎样的,你可以到 Mobbin Design 的这个页面回顾一下。可以看出 Fancy 之前的设计风格就在走简约明了的路线,但是细节上却有些乏力,比如一些嵌入的 web 页面与 App 相比显得过于拥挤。 在 8.0 之后的版本里,它的首页变成了这样——

页面从原本高度占超过半个屏幕的卡片载体,过渡到了现在的类似相簿(没错就是 Google Album)的网格排版,单屏空间的利用率几乎提升了 4 倍。Fancy 虽然 icon 上使用的是蓝色,但是这个页面顶部「FANCY」品牌字样和下方所有文字都是深色(#1C1E21),包括价格标签也是。价格不用对比色区分开,立场不同的人所声明的需求也是不同的,这里不做讨论。从我个人角度讲,我更倾向于现在较为统一的样式。

字体上也有所优化, 标题选取了类似 Futura 的 x-height 和升部对比大的 Grotesk 字型,我试着用 What the font 查了一下是什么字体最终无果。与比较接近的 FF Infra SemiBold 相比后者没有小写 t 头部的倾斜特点;与另一款以可识别度为 feature 的Transport New Medium 相比,后者小写 a 的收尾又多了一些多余的路径。从这种相似性可以看出,字体的改变对图文的阅读体验提升还是不小的。

最明显的改动莫过于追随 iOS13 的顶部 Tab 切换样式。这个 Design Source 刚一出来就被 Eli 喷的组件用于替代之前所有的 Segmented Control,Fancy 这里显然放大了不少。据自己使用过的 App 来说,Fancy 应该是首批利用新原生样式的 App,效果挺不错。阴影方面只看截图的话实在有些难以分清是像 iOS13 一样处于控件内部还是阴影不受约束,整体漂浮在上方。

底下四个图标也加上了 Lable 文字。一般一个页面的功能较为集中时,加上 Lable 对新用户更直观。但当这一帧是一个复杂的集合体时,便会考虑是否在需要 Label 。Tab Bars 不是单一因素就能决定的,但我觉得过度地去扶助用户反而会消磨好奇心、显得死板。

至于「没关注任何人时 Feed 里的内容是什么」诸如这种话题此次不在写作范围内。

Explore 页面顶部是我最比较讨厌是带有缩放效果的横划切换,因为大多数人做不好缩放本来想要传达的层次效果(当然我也是),所以我一直把这种特效当做雷区。这个样式应该是继承了之前的,并减小了缩放参数。下方是常见的横划操作区域,没什么说的。

点进下方的 Collections 后,是一个 items 集合页。大多 Collections 由官方的一个叫做 Collections 的账号创建。如图:

官方使用了 App 图标作为头像,但它太像之前老版本可交互的图标了。首先你不知道这个看起来可以交互的按钮是干嘛的,其次点了之后你才发现是个人详情页,很容易让人一头雾水。这个瑕疵和布局不是重点,重点在于右上角飞机图标(分享)的右边那个。点进去后会到一个新的独立查看页面:

我一直想做一次这种偏「专注向」的交互,可惜没有实战机会。这种像是 Ins 上 Story 交互东西现在也不稀奇了。要稍微追溯一下的话,很多东西可以追溯到 Sony 的 Xross Media Bar 上,但 XMB 的黄金分割点显然都没用得上。Fancy 这里既可以左右滑动也可以上下滑动查看更多信息。作为 Collections 的另一种查看方式的评价我这里不想说,作为范例来说还是可以激发一些思路的。

无视各种高溢价商品,点进去商品页面:

商品图片依然保持着正方形比例,下方没有做过多的商品介绍,一般信息都会通过这个图片显示。初看这个界面有种 Instagram 的感觉,只不过底下加了一个大大的购买按钮。起先我以为是中文的原因导致「添加至购物车」字号有点大,结果之前的版本(英文)就这么大了,而且同样是这种莫名其妙的绿色。我量了一下在 1x 下按钮高度是 45pt,字号竟然有 20pt!

Fancy 通知的查看时间规则是一旦关注了这个人就可以看到他之前的动态。动态类型比较少,展现形式基本靠一种就可以解决了。没有分割线,加分。如果你关注的是一些高质量用户,通常他们上传的图片也很适合社区氛围,这个页面的美观程度有比其他 App 有很大提高。没有对比就没有伤害,来看看知乎和微博的消息页吧——

造成这种结果大家都知道这其实和UI设计无关,理解万岁。

最后要提及的是 Fancy 设置中提醒一项,它的邮件和推送通知解决方式对于我来说相当惬意。我已经把它加入到图片库当做备用灵感了。

惯例做个总结的话,Fancy 的界面会给人一种刚开始舒适而止于商品的详情页面的感觉,如果整体对比 8.0 前后的版本会发现大部分页面其实并未做太大的变化。这次的改版对于我这种正好处于两种都使用过的的新用户来说,我暂持正面评价。

那么为什么没有核心购买流程的体验说明呢?买不起,告辞。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close