电商app界面制作「优秀电商页面设计」

互联网 2023-07-19 20:01:48

今天给大家普及一下电商app界面制作「优秀电商页面设计」相关知识,最近很多在问电商app界面制作「优秀电商页面设计」,希望能帮助到您。

移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一,是要展示内容最多、最难做的一类App。

电商APP首页设计结构

电子商务网站的首页是网站的形象页面,一个网站能否吸引浏览者留在该站中漫游,全凭首页设计效果的好坏。所以,首页设计对于任何网站都是至关重要的。

首页从根本上说,就是全站内容的目录,也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区:

l页头:包括网站名称、搜索组件、焦点广告、导航等版块。

页头首先要体现网站主题。用企业名称、标语、徽号或图像概括地反映企业形象、经营理念和服务定位。搜索、导航提供了对关键页面的浏览链接,通过图标和文字表明产品其他页面载有的主要信息;用户能够在最短时间、最便捷的操作迅速地到达他们所需信息的其他页面中。

l页中:包括公告、最新活动、个性化产品推荐、友情链接等版块。

在首页上公告信息,到达率非常高。同时,产品中在进行的各种活动信息,也是吸引用户停留并购买的重要手段。随着互联网产品设逐步创新,数字化,原来千人一面的首页分类产品列表由简单罗列,变成了根据用户喜好和行为习惯进行个性化的商品推荐,产品变得更了解用户也更能触发用户购买行业发生了。

l页尾:包括版权、联络方式、计数器等版块。

版权的常见做法是在首页底部标示简短的声明,再用链接附带一个有详细使用条款的说明页面,既避免首页的杂乱又把重要内容说清楚了。页面底部的联系方式,方便用户与产品相关人员取得联系,让产品所属企业获得用户反馈。

页尾的内容在web端界面设计中是不可缺少的区域,但在移动端首页基本都被移到了”设置”中进行展示,这是由于移动端界面空间实在太少,而且移动端多以手式向上不断滑动查看新内容,造成页尾信息如果放在页面尾端查看十分不方便。

首页设计组件介绍

一、搜索栏

大多数用户发生购买行为有明确的目的性。我知道我想要买什么,所以我需要快速的搜到商品。因此App把最显眼的位置留给搜索栏。

一个完整的搜索组件设计应该由三个阶段组成:

1.找到搜索框

2.录入关键词

3.搜索结果展示

搜索框的设计需要注意:

电商App的搜索框通常放在界面的最上面,明显、惹眼,用户可以直接进入信息录入阶段。

电商App的首页搜索框,即使用户需要查找的内容属于不同类别,在设计上也最好给用户最简单的全站内容搜索组件。

搜索框的设计风格应该和整体产品风格保持一致

信息录入的设计需要注意:

提供多种信息录入方式,最常见的文字录入当然还是主流,除此之外最好可以提供语音、图片录入搜索等方式。

除了多样录入方式,还应配套提供信息录入提醒设计,如:用户历史搜索记录、搜索关键词热榜、录入关键词时联想响应

搜索结果的设计需要注意:

搜索结果设计重点在于展示不同类型和级别的内容。例如在淘宝搜索账单,结果包括账单相关信息,店铺和资讯等,不同独立应用加图标展示。不同内容类别以tab切换的形式展示。

搜索结果过多,可以加检索组件帮助用户在搜索结果中进行二次查找,减少花时间翻页或滑动查询。另外搜索结果为零的时的空页面,给用户设计合适的说明界面。

二、导航

电商App中,必不可少的两个导航:

l产品主导航

l商品分类导航

产品主导航

电商App中的主导航设计为用户提供了跳转相对独立的信息内容的路径。例如:

淘宝的主导航项:淘首页、逛逛、消息、购物车、我的淘宝

京东的主导航项:首页、分类、发现、购物车、我的

发现、消息、购物车、我的这些内容之间没有很强的关联,但又是用户在电商平台购物过程中必不可少要查看的信息。

京东、淘宝主导航

同时,从“商品买卖”的业务角度来看,有几个重要的业务信息,无论做任何电商产品,都应该让用户可以快速、方便的查找到是毋庸置疑的。它们是:

1.用户的购物车---购物车模块

2.用户在产品的中的个人信息---我的模块

3.用户买卖过程中的交流信息---消息模块

这些重要的业务信息,多数都放在了电商App的主导航中,即使没有放在主导航,也一定能够在首页的副导航中看到。

商品分类导航

不同类型的电商平台,商品分类导航有一些区别。

如下图中淘宝、京东平台,这两个平台是成熟的综合电商平台,在平台中不但有各类第三方商品销售,而且平台也有自营的品牌和独立应用在平台内销售,如淘宝的天猫商城、饿了么、天猫超市;京东的京东超市、就东到家等。

因此,商品分类导航中的商品分类覆盖十分广泛,尤其商品分类导航的C位往往加入了平台自营的品牌和应用。

垂直类的电商App,商品分类导航中的内容覆盖面窄很多,以商品类型分类引导用户查找商品的特点更明显示。

例如下图中唯品会的商品分类导航,因为唯品会的产品定位在折扣女士用品,所以导航中的分类都集中在服装、鞋帽、箱包等商品类别。

另外,在设计上不像主导航设计需要控制导航项数量,商品分类导航中的分类项数量往往大于5个,因此使用双排、可左右滑动的拖拽导航几乎成为最常见的商品分类导航样式。

三、活动

电商产品中的活动类型很多,最常见的有16种:

1. 打折

2. 秒杀

3. 免单

4. 满减

5. 满送

6. 满返

7. 买送/捆绑

8. 搭售

9. 包邮

10. 好评晒图

11. 试用

12. 抽奖

13. 积分/会员

14. 团购

15. 预售

16. 众筹

在电商App首页,见到最多的是前两种活动:打折、秒杀。而且,首页的活动往往都带有极强的时效性表示,例如在规定的时间才可以享受更加优惠的商品价格。

因此,活动在首页上的设计要向用户传达三个要素,即用户最关心的:

什么时间有活动

有什么活动商品

活动的价格有多优惠。

如下图的“京东秒杀”的设计就非常完整的呈现了这3个要素。当然,并不是所有的活动表达都一定要遵循这一规律,淘抢购的设计就打破了3要素传达的规则,隐去了商品促销价格。

京东秒杀与淘抢购

四、商品推荐

个性化的商品推荐现在在电商App设计中己经十分成熟,推存商业最先被用户接触到的地方就是首页。

用户在电商App或有意、或无意浏览的商品,都会被产品记录下来。再由商品推荐模块根据你最近的浏览记录,推荐一些相关的商品、分享或者店铺。由于每个人关注的商品都不一样。所以产品对于每个人呈现的界面内容也都是不一样的。

例如下图,淘宝通过性别判断,如果产品发现你是男性用户,默认推荐“男神范”;如果判断你是女性用户,则默认推荐“爱逛街”。

淘宝内容推荐

不仅仅如此,用来展示电商平台每个细分商品品类推荐商品的区域,也都引入了个性化商品推荐的设计。

在使用全品类商品展示 优惠价格来打动用户进行消费的同时,现在的电商App往往会再融合情感因素、参考用户的特点、喜好展示各品类中最可能吸引用户的商品,促使用户在产品中“逛街、购物”。

例如京东精选中集合了全品类的商品推荐,以用户行为进行时实的个性化推荐。

案例:主流电商App首页分析

一、淘宝

首页内容:

1.搜索,淘宝把搜索二级页面关键词直接展示在一级搜索位置下方,相当于关键词搜索功能层级上升;

2.banner;

3.8个平台型导航,主要是从淘宝诞生,已经可以独立运营的产品;

4.活动广告位,占据banner大小的位置,平台活动快捷入口;

5.淘宝头条,根据分类滚动推荐产品的文章;

6.二级购物功能区,展示各个频道,如天天特卖,每日好店。

7.商品列表,安卓和苹果展示不一样。安卓每个版块半屏往下铺开。苹果是上方做了分类导航,下方列表。

二、京东

首页内容:

1.搜索;

2.8个banner;

3.活动广告位;

4.平台型功能区,有部分是独立的应用如京东生鲜,还有部分是京东的商品类别频道;

5.京东快报;

6.二级购物频道,放了些主推的购物板块;

7.活动板块,铺开了活动的每个类别;

8.频道推荐,把频道纳入到10个标签里,每个频道都有超过5个二级标签。

三、苏宁易购

首页内容:

1.搜索;

2.8个banner;

3.活动广告位;

4.平台型功能区,这一块主要是频道和分类,分类有16个。

5.苏宁头条;

6.二级购物频道;

7.活动板块,展开了活动的每个类别;

8.频道推荐,展示很多二级频道,分的特别细。

四、小米有品

首页内容:

1.搜索;

2.活动板块,动画展示活动的交互很新颖;

3.平台型功能区, 5个功能频道,销售榜单作为一个推荐功能很实用;

4.banner,共5张;

5.活动板块推荐,分了各活动分类的专场;

6.特色频道推荐,含榜单(把榜单部分商品展示出来)、限时购、年货节热卖、小米众筹、有货集市、品味生活,和功能区呼应,以商品展示为主;

7.类别频道推荐,每个展示一屏,以商品展示为主。

五、网易严选(自营平台)

首页内容:

1.搜索和导航;

2.Banner;严选没有功能区,直接开始推荐商品或者频道。

3.推荐标签的商品,焦点位给了个性化推荐,非常重视更精准得来个性化推荐;

4.VIP会员的服务特权,网易重点突出了这一块;

5.二级功能频道,只放了三个频道;

6.猜你喜欢。

六、网易考拉(垂直综合平台)

首页内容:

1.搜索;

2.banner;

3.品类场馆,像商场的楼层一样,逻辑清晰;

4.活动板块;

5.特色频道推荐,标签下面细分了很多相关的功能频道;

6.用户专享;

7.精选活动,以每个板块商品列表来展示;

8.个性化推荐,以三个角度列表展示。第一个角度是个性化商品,第二个角度度是商品推荐清单类文章;第三个角度是品质商品推荐。

七、拼多多(综合平台)

首页内容:

1.Banner;

2.功能区,所有的平台频道和分类功能都在这里面了,有16个,偏重社交分享,如拼团;

3.活动板块推荐;

4.商品列表展示,分商品和店铺两个角度推荐商品,穿插了一排品牌馆推荐。