主流电商产品视觉组成

1、主流电商应用的流程和页面类型

电商是一个非常常见、热门的APP类型，是我们UI生涯中都会遇到的题材

了解这个类型的设计，就要从基础的认识出发，了解他们包含哪些页面、组件的类型，再动手设计

主流的电商应用中，购买的流程比较一致，即使在其他其他类型的APP购物模块也非常接近

电商APP的购物流程

登录—查找商品—加入购物车—结算页面—前往付款——结果提示——订单设置

登录页

完成账号注册和登录的页面

查找商品

查找商品是电商应用中最重要的流程，包含大量展示页面类型

首页：将平台中最想展示给用户看，最希望客户能接受的运营推荐的内容，编辑在首页中。

同时，重要的是我希望用一种特别强硬的方式让用户感受到我正在做的一些促销和直播等等，

电商分类页

电商专题页

电商详情页

电商详情页包含：商品的介绍，商品介绍又包含：大图、价格、基本介绍信息、购买的选项、详细介绍、评价、

电商的动态页：能看到别人的一些购物体验

3、加入购物车

将商品置入购物车中方便统一结算

不同的店铺，不同的店铺采用不同的卡片；每个商品对应的有图片、文字说明、价格、优惠、相关的文案介绍，每个购物车页面都是由头部+中间卡片列表+为你推荐+结算的价格和结算的按钮的bar。

4、结算、付款、结果、订单页

通过对购物车商品进行结算完成整个购物流程

在这个流程下，相同的页面从样式、逻辑、布局都非常的接近，即页面中应用的组件也趋同，方便我们快速的掌握

在对所有界面理解的基础上，我们搭建一个APP界面，

首先了解它包含哪些界面，

每个界面中包含哪些信息

每个东西对应的是那种页面的类型

然后想起市面上这样的页面是如何设计的

第二部分  电商常见的业务组件类型

了解有哪些常见的业务组件类型，掌握这些组件的设计，就可以帮助我们快速搭建整个产品的样式

广告组件，就是各种banner图，不同的banner 图里面的应用不同，如轮播点、轮播横线、花生球，有横版竖版等等

快速入口

快速入口的设计，有很多可以左右滑动，5*2的，有两个页面，

一般是图标+文字，

有的采取普通图标设计，有的采取商品露出的设计，还有轻质化的图标设计、以及图标的设计等等

瓷片区

首页中出现瓷片区，与快速入口不一样的点在于它基本上会将瓷片内展示的每一个内容进行一个比较直观的露出，

一个组件中包含了若干个子模块，然后通过一定的拆分形式将子模块安置出来。

电商动态

电商动态就是一个动态卡片，动态卡片可以是篇详细的横向卡片，也有双列式的卡片，卡片的设计多种多样，但重点是：

每个设计一般来讲包含：发布人是谁，发布的内容、发布的图片、点赞和评论信息

在电商中最重要的东西通常都是图片，通过图片引导用户进入

在电商动态组件中最重要的是图片的展示

商品的卡片区

动态卡片一般是不放价格的，商品的卡片区价格一般是必须放的，为了帮助用户的一个决策，会把多少人付款以及评论或者评分放进来。

商品介绍

在这个页面中，大部分的是头部也就是商品图片，还有价格、优惠、文字说明、分享、评论、点赞等等

选择规格

一般包含什么，图片、属性和属性值、或者说规格、规格参数

购物（订单）列表

组件的理解，不仅在于快速帮助我们搭建页面，同时还可以帮助我们拓展思路应用不同的设计