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

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

初学者建议

对于刚入门的UI设计师来说只要去图库网站找一些素材，借助工具进行修饰即可，其实这只能锻炼你的借鉴能力，当你的技法娴熟到一定程度，就可以尝试临摹。
对于没有思路的初学者，像优图网提供优质设计模板素材图库，包括页面设计,首焦设计,推广图,设计元素下载，减少设计师75%办公加班时间。只需双击智能对象，即可更换自己的内容上去。
通过临摹，一则用来强化技法层面的能力，二来也能提升初学者的创新能力。
临摹的内容，可以有两方面选择：一种是系统自带的图标，另一种则是行业牛人的设计作品，捉摸他们的设计风格、思想和细节，都能加深对设计的认识。

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

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

单元结构
1
需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
2
不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
3
过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
4
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。

点睛标签
1
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
2
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是最新款！」等我们刺激用户的声音，增强用户查看的欲望。

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

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

电商app中的商品列表UX框架要如何设计？相关推荐

Kotlin实战案例：实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表）
n实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果) 随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Ko ...
电商系统中的商品模型的分析与设计—续
在<电商系统中的商品模型的分析与设计>中,对电商系统商品模型有一个粗浅的描述,后来有博友对货品和商品的区别以及属性有一些疑问.我也对此做一些研究,再次简单的对商品模型做一个介绍. 从SPU ...
电商系统中的商品模型的分析与设计
前言在电商系统中,商品模型至关重要,是整个电商的核心,下面通过一个简单的分析,设计一个基础的商品模型. 商品模型的演化在以前,那时CMS很流行,最常见的模型是栏目-文章模型.于是做电商的时候,自然 ...
前端学习（1989）vue之电商管理系统电商系统之渲染商品列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1988）vue之电商管理系统电商系统之获取商品列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
高薪程序员面试题精讲系列152之电商专题(中)-SPU是怎么回事？SPU如何设计？SKU又是什么呢？SN你知道吗？
一. 面试题及剖析 1. 今日面试题你做过电商项目吗? SKU怎么设计? SPU如何设计实现? 2. 题目剖析在前两篇文章中,壹哥给大家介绍了电商相关的一些背景知识,以及购物车的业务实现.如果你还 ...
vue3,电商项目中的商品详情-图片预览组件
目的:完成商品图片预览功能和切换分享一个vueuse的插件useMouseInElement useMouseInElement的官方文档 // 监听DOM元素 target 绑定的DOM元素中鼠标 ...
电商系统中的商品的SKU和SPU是什么？
SPU = Standard Product Unit (标准化产品单元) SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产品的特性. SPU属性:不会影响到 ...
电商APP商品详情页设计套路（分层PSD模板）！透析UI／UE必须懂的营销设计思维！
电商APP重点在于商品详情页,打造一个优秀的商品详情页,完全能够提高转化率! UI设计.交互体验.文案撰写.产品的商业模式来聊一聊电商app商品详情页是怎么"套路" 设计app商品 ...

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

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

电商app中的商品列表UX框架要如何设计？相关推荐

最新文章

热门文章