不知道各位小伙伴有没有用过「最美有物」这款App,反正北海用过之后便觉得爱不释手,对于一个资深视觉控的未来设计师来说,她长得确实太好看了。不过呢,本着处女座细节控的特质,我还是要好好分析一下这款「最美有物」的交互、视觉 细节 。其实呢,本来北海是打算写一篇产品分析报告的,奈何北海能力尚浅,若落上一份「体验报告」的名字,所输出的一些内容也配不上这报告的名字,索性就说是使用后的一些想法罢了。文中如若有纰漏,还请各位前辈多多指教...

一 . 先了解一下「最美有物」吧
最美有物是是一个全球原创设计品的发现平台,在这里你可以发现来自纽约、巴黎、米兰、伦敦等地的优秀设计师的作品。自2016年上线以来,就斩获「豌豆荚设计奖」「魅族魅斯卡奖」「小米商店金米奖」「应用宝优秀新应用」等奖项,可以说是非常优秀的产品。能够斩获这么多奖项要得益于优秀的交互体验和...颜值!
二 . 产品定位
需求分析:人们对美而小众的产品的需求与日俱增,「不从众」的审美标准逐渐深入人心
目标用户:设计师群体、时尚达人、白领
产品定义:为时尚达人提供一个发现全球好设计(不从众的好设计)和优秀设计师的平台
产品目标:传递美学理念,设计师和用户间的互利平台
三 . 产品结构

Button bar 规划合理。有物中,「最美人物种草合集」不明白种草是什么意思,会让用户产生疑惑。
四 . 界面、交互分析

* 首页采用卡片重叠的设计模式,用光和影来划分空间,在平面中增加了应用的空间感,同时给人以在上下翻动杂志的体验。
*在翻动过程中,至多可以看到三个内容标题,极大的减少了其他文字的干扰,用户视觉中点落在中间文章标题。对于内容类App来说,抓住用户的注意力就意味着转化。

* 打开画报后,有UI占位符,好处在于给予心理预期,让用户对即将出现的内容有预判。

* 画报中,向下滑动「后退和设计师」两个button消失,向上滑动出现。打造沉浸式的阅读体验,符合MD的设计规范。

* 画报一栏的页面逻辑自上而下为内容、我来推荐、分享、设计师&作品、评价。用户阅读完文章后,如果文章写得很走心,那么操作逻辑应该是分享出去,在内容和分享之间加入「我要推荐」不符合操作逻辑。所以 建议 更改页面逻辑。
* 整栏页面中,评论的入口有两个,设计师主页有两个,分享的入口也要两个。可见最美有物团队希望我们能够最大化的了解设计师及设计师的产品并分享出去,时刻都在提醒我们进行这些操作。建议 将分享的menu替换右上的设计师头像,和商品详情页保持一致性。

* 点击FAB弹出可购买物品列表

* 评论列表无法直接回复评论。点击后跳转才可回复,增加了用户操作步骤,产生了一定的负担。

* 1 有物App bar上有10个标签,触控面积过小,容易造成误操作。
* 2 交互形式很棒,左滑可查看全部产品。但该部分手势操作与切换标签手势操作重复,易造成误操作。且该部分内容还没有找到存在逻辑。建议去除。
* 3 时间线,每天提供十个优秀设计。

* 1 喜欢与不喜欢,趣味性设计。通过高矮表现支持率高低,喜欢用暖色。让交互变得更有趣味性,令人愉快。
* 2 Today中喜欢的产品,会在这里选中。团队应该是想表达,你是这些设计的决策者,就像皇上翻牌一样。但这样的设计是没必要的,首先喜欢的产品会在我喜欢的中展示,并且在信息爆炸时代,就算点了喜欢,看到这些数字,也不一定记得我喜欢的是哪个,还要返回去重新看。因此,建议去掉。

* 1 时间线衔接

* 商品内容页,布局较为合理,时刻传达设计师信息。分享和收藏设置在右上角button,评论可直接回复。

* 点击品牌官网后,弹出价格和购买网店。将这两个内容层级藏这么深,也说明「最美有物」主要产品目标在于传递设计而非商品买卖。

* 推荐提供标签分类,便于快速找到与自己匹配的设计师。关注button颜色醒目,对比强,利于转化关注。
* 独立设计师总也按照不同类别分类,利于快速查找。


* 录入信息这里做的也是很以用户为中心。并没有采用传统的具体年月的设计,而是采取年龄段和星座的设计,这也是考虑了,年轻群体关注星座的特质。很赞!

* 单词中的一些字母没有统一,字重不同。

* 特殊状态下的一些反馈,图标设计和icon保持风格一直,趣味性强。
* 我的心愿单中的特殊反馈和网络错误的反馈一致,就不符合了。建议重新设计。
* 此外,「最美有物」的默认头像是和图标「小鹿」是一样的额,这样的设计既保证了一致性,也传达了品牌理念。
以上就是我在使用「最美有物」中发现的一些很棒的设计小细节,当然也包含了一些不足之处。总的来说,「最美有物」这款App是一款设计优良的App,整体感受很赞,黑色的背景色,有设计感的字体,精选的图片都让这款App设计感十足。但北海对于画报的排版,一些设计细节等问题上还是持进一步优化的态度。希望最美团队可以进一步优化设计,让「最美有物」变得更美。
网友评论