多语言展示
当前在线:1574今日阅读:91今日分享:37

电商app中的商品列表UX框架要如何设计?

电商快消费的时代,面对琳琅满目的商品图与文案,用户怎样才能快速抓到重点?或者说,怎么样才能让信息出现在合适的位置?
视觉浏览模型
1

了解浏览信息这个动作的本质和特征,浏览的本质就是大脑通过眼睛去提取信息,是一个传达解码的过程,在这个过程中又存在一些特性,我们可以利用这些特性去进行一些更高效的信息传达。

2

受阅读习惯影响,人们阅读的起始端都是在左侧,结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知,视觉浏览习惯呈「F」型且是不受控的潜意识习惯;同时可以延伸出例如「E」、「Z」等浏览模型,我们可以根据这些视觉模型的特性,结合产品的战略层目标,将信息放置在合适的位置,已达到信息传达率的最大化。

单元结构
1

需要清晰产品的属性,电商平台的本质是物品的交易,因为线上的特殊性,产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候,单元布局的轮廓就出来了,就是「商品图+关键词文案」。

2

不同平台战略方向、发展阶段、团队规模等因素的不同,所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同,有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分,产生不同的单元结构以满足商业目的上的需要。

3

过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等,与文案搭配所呈现的是否适用当前消费场景及用户心智,是否可以提升用户的转化率,是否可以提升平台的下单率。

4

单元的架构是多样且复杂的,就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析,需要权衡各个关键点的重要性,把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。

点睛标签
1

细分一下,其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件,在结构中,图片、商品名称、价格是用户关注的重点,其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了,剩下来我们看看这些小部件该如何合理归置。

2

先从标签说起。整体框架出来了,用户所需要了解的商品信息就已经基本呈现了,这个时候用户心智上更多的主观意向,寻找合适的商品,而标签的出现,更像是一剂兴奋剂,强烈告诉用户:「这个品热度第一!」、「这个品是最新款!」等我们刺激用户的声音,增强用户查看的欲望。

3

活动标签,多为显示该商品的热度、促销主题、排名等一些大的状态性的信息,为的是在用户心理层面给这个商品带来更多的好感度,放置的位置可以结合具体场景去分析,可以考虑与商品图进行结合放置。

4

最后是按钮,在这里的按钮可以理解为浏览过程的一个闭环节点,也是一个操作的终结点,是最后的临门一脚。位置当然是在右侧最为合适,降低操作难度,同时也是整个单元的一个视觉终结点,浏览完流程之后决定是否点击跳转。

初学者建议
1

对于刚入门的UI设计师来说只要去图库网站找一些素材,借助工具进行修饰即可,其实这只能锻炼你的借鉴能力,当你的技法娴熟到一定程度,就可以尝试临摹。

2

推荐:优图网专业提供优质设计模板素材图库,包括页面设计,首焦设计,推广图,设计元素下载,减少设计师75%办公加班时间。只需双击智能对象,即可更换自己的内容上去。

3

通过临摹,一则用来强化技法层面的能力,二来也能提升初学者的创新能力。临摹的内容,可以有两方面选择:一种是系统自带的图标,另一种则是行业牛人的设计作品,捉摸他们的设计风格、思想和细节,都能加深对设计的认识。

推荐信息