口碑-人气眼背后的故事

用户头像
杭州/产品设计师/9年前/431浏览
口碑-人气眼背后的故事
用户头像
李煜佳

口碑人气眼背后的设计故事

[引子]

       民以食为天,每日三餐吃什么?这个哲学般的问题,都困扰着我们。口碑从每位食客的角度出发,在不同的时间、不同的地点,提供给他们一些建议和帮助。这就是人眼气,它是帮助用户发现身边人气最旺商家的眼睛,当然人气眼也远不止于此。

 

[产品定位]

一、人气眼的价值

       对用户:人气眼将实时人气用直观的方式展现给用户,帮助用户决策。

       对商家:店铺用支付宝收款越多,则人气值越高。多维度展现商家实时的最新动态,为真正的好店带去更多的流量和生意。

二、人气值是什么

       人⽓值是基于支付宝实时交易数据,客观反映店铺的顾客流量情况。不同时刻,每家店的人气值都会发⽣变化。人气值区别于过往店铺星级、评论等信息纬度,成为一种新的参考纬度。把这种具有“此刻”的状态转化为直观的数字,提供给用户做决策参考。

 

[产品设计]

一、人气眼入口

       人气眼入口作为一个展示区,目的是吸引用户点击进入人气眼主页。经过测试发现用户并不会第一时间在此决策,并且用户对菜品图和菜品名的关注度很高。

故卡片上以突出菜品为核心,引起用户关注,并激发用户的点击欲。

大小屏适配效果

       同一家店铺采用信息轮播的方式,既可以为店铺展示更多的信息,又打破纯图片展示的单调,传递周边商家人气旺的热闹气氛。

 

二、人气眼主页

人气眼主页


       人气眼主页的布局上采用大中小卡片的组合形式,区别于过往列表式或中规中矩的卡片式布局,以营造一种人气眼热闹“街市”的景象。卡片大小的差异,让眼动浏览更有顺序,而每个卡片的信息由于商家本身的内容差异,加上美食秀、弹幕等元素使得各家店铺个性更加鲜活。以营造一种让用户置身于逛一条热闹的人气眼街,街上的每家店内容又很丰富多彩。

       每个卡片都有正反两面,通过一定的规则进行翻转展示,多维度展示商家的核心信息。如口碑推荐菜、热评精选、用户评价、优惠信息等。即使用户不进入商家详情页,也能在此页面了解商家的概况。另一外面把优质商家内容第一时间呈现给用户,可激发用户的消费欲望。


大卡片样式


       大卡片:正面采用视频秀的方式,把商家最吸引人的精美图片最大化表现,成为这家店的表演舞台。把用户的眼睛聚焦到这里,当商家的这场“Show”演出完毕时,则进入信息卡,信息卡展示商家的核心信息。并采用弹幕的形式,以解看完“Show”之后的意犹未尽,并能看到用户的客观评论或吐槽,进一步拉近商家与用户的距离。


中小卡片样式


       中小卡片:有人会疑惑卡片大小会不会对商家造成不公平。由于人气眼是实时动态更新,对于商家一切都是暂时性的,谁也不能预知下一秒刷新之后该商家的展示位置,这也正是人气眼的过人之处。

       相对大卡片而言,中小卡片的展位虽小,但内容上并不逊色。调研发现,商家的基础信息中,用户非常关心评分与距离,而推荐菜、热评精选、用户评价、优惠信息等也是影响用户决策的重要信息。再通过翻转的过渡动效连接正反面信息,同时也可起到吸引用户的作用,用户并不会在卡片翻转中停留过多时间,故推荐的信息都是该商家的最有价值的信息。

 

       人气眼是一个全新的产品,也是一种新的尝试,所以它远不止于此。交互设计上也预留出空间,其拓展性也承载着人气眼的未来,让我们期待更多精彩。


口碑设计中心-飞千

 


2
Report
|
3
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in