电商主页设计（电商网站的页面设计）

本文目录

• 电商网站的页面设计
• 电商首页怎么做
• 如何设计电子商务网站设计
• 电商首页怎么设计
• 电商APP首页设计，终于有人讲明白了！

电商网站的页面设计

想象你在一个电商网站中浏览，然而点击的页面却跳出「网页出现错误」或「404找不到该网页」，你是否会有一种被耍的感觉，进而对该电商网站产生不信任感呢?

为了避免以上情形发生，建议可以根据检查清单，一步一步检查版面、兼容性、功能性、内容等，尽可能创造一个对使用者友善的电商网站，不但使其产生黏着度，更为你创造无穷价值!快来看看小编为你整理的8个电商网站健检清单：

版面Layout

或许有人认为版面呈现出来的就只是视觉效果罢了，挑一个看起来顺眼的版型就好。然而版面的选择并不只关乎视觉效果，更重要的是使用者是否能很直觉、简单地找到他所想要的信息，操作上是否便利。因此在版面中，你一定不能忘记以下重点

首页要清楚地显示Logo

当然，Logo的设计也不能马虎，其图像若是专业且吸引人的话可以为电商平台带来附加价值

打动人心的标语

若有吸引人的口号或标语可以增进使用者继续向下阅读并了解细节的倾向

明显的产品或服务介绍与促销讯息让使用者一进入电商网站便能了解你所贩售的商品或服务，并且能快速掌握促销讯息，增加购买机会

行动呼吁(calltoaction)的设置

行动呼吁可以将使用者更直觉地导入销售页面，无疑是增加销量一大利器

增加搜索栏位

找不要想要找的信息是恼人的，因此增加搜索栏位可以使使用者更快速地找到所需的信息

优化图像位

注意图像的显示位置并且检查在其他行动装置中阅读的情形

兼容性Compatibility

拜科技日新月异所赐，现今已不再只有传统桌机可以浏览电商网站，除了手机、平板外，甚至智慧电视都是浏览网站的媒介，然而在众多媒介中，又以手机80%的比例最高，其次是平板的47%。此外，在浏览器方面也有相当多选择，因此在软硬件的兼容性方面是电商网站不容忽视的小细节。

以上就是电商网站页面设计的技巧。

电商首页怎么做

电商首页的品牌设计，而对品牌的设计，应该体现在首页的各块关键位置上首页的品牌设计应该作为一个品牌宣传要素进行规划，基本可以采取“Z”形品牌宣传布局，自上而下地向用户传递出品牌的形象、品牌的优秀口碑、品牌的特色服务、品牌的服务保障与安全等信息。

品牌的影响在大多数情况下是隐性的、长期的持续作用，首页对品牌形象的设计，追求的不是短期的运营转化效益，而是关注用户对品牌长期的满意度与信任度、忠诚度。

如何设计电子商务网站设计

在制作栏目的时候要仔细考虑，合理安排。首先要紧扣主题，将主题按一定的方法分类并将他们做为网站的主栏目。其次要设计网站指南栏目，这样做是为了照顾老顾客，同时也可以帮助初来网站的顾客可以很快的找到他们想要的内容，让主页更有人性化和有吸引力。第三，设计可以双向交流的栏目，如论坛，留言本，邮件列表等，可以让浏览都留下他们的意见，建议和信息。第四，设计常见问题回答栏目，就某方面的常见的，有代表性的问题做答复，方便浏览者。在划分栏目时就注意以下几点：（1）尽可能删除与主题无关的栏目；（2）尽可能将网站最有价值的内容列在栏目上；（3）尽可能方便访问者的浏览和查询；（4）突出直接的电子商务主题。答：建立网站目录结构应遵循以下方法和建议：（1）不要将所有的文件都放在根目录下，将所有的文件放在根目录下，这样做会使文件管理混乱，上传速度慢。（2）按栏目内容建立子目录。子目录的建立，首先按主菜单栏目建立。（3）次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，可以合并放在一个统一的目录下。（4）所有程序一般都放在特定目录。便于维护管理，所有需要下载的内容也最好放在一个子目录下。（5）在每一个主目录下都建立独立的images目录。为每一个栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。建立目录结构应注意：目录的层次不要太深，不要使用中文目录，不要使用过长的目录，尽量使用目的明确的目录等。12，简述建立网站的链接结构的基本方式。答：一般的，建立网站的链接结构有两种基本方式：这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。敬请期待.基本功能（1）企业产品和服务项目展示。这是一个非常重要的基本功能。

（2）商品和服务订购。它包括交易磋商、在线预订商品、网上购物或取得网上服务的业务功能。

（3）网上支付，即通过银行电子支付系统实现支付功能。

（4）网络客户服务。将部分或全部传统客户服务功能迁移到网上进行，同时根据网络特点开发新的服务功能。

（5）发布商业信息。它包括新闻的动态更新、新闻的检索，热点问题追踪，行业信息、提供信息、需求信息的发布等。

（6）客户信息管理。这是反映网站主体能否以客户为中心、能否充分地利用客户信息挖掘市场潜力的有重要利用价值的功能。

（7）客户实时互动。通过聊天室、企业社区、电子邮件等工具，与客户实时地交流信息。

（8）销售业务信息管理。用于使企业能够及时地接收、处理、传递与利用相关的销售业务信息资料，并使这些信息有序和有效地流动起来。

分类（1）信息服务型。信息服务型网站的设计目的在于提供各种产品信息或信息获得方式。

（2）广告型。广告型网站所有技术和信息内容全部针对广告收入。此时，消费者的注意力就成为衡量网站优劣的关键标准，广告商可以对一个网站进行评估，并为其广告定价。

（3）交易型。交易型网站的基本功能在于提供网上交易的功能，如网上商城、交易平台网站等。

（4）管理型。管理型网站是企业、公司和行政教育等机构，将传统业务迁移到网络的应用界面，如公司、机构的办公系统。

（5）综合型。综合型网站是把上述类型网站的功能综合集成。

电商首页怎么设计

电商首页怎么设计才能吸睛？看看上面这款电商首页的设计中是如何搭配的。我们先来看，这里用到的是白纸背景，我们可以把图片拖入里面，调整图片的尺寸，然后调整大小，调整到合适的距离，并且保持一个贯穿整个图片视觉的线性效果。再来看下，一步步推动我们视觉中心，使其成为一个贯穿整个页面的网格线。这里面可以有很多其他的设计元素。比如电商详情页的图片，主图和辅图的结合。这里面的图片有大有小，主图和辅图之间的结合，文案的大小和位置，以及图片下方的文字内容。还有一个图就是我们要做的功能，那就是对角呼应，也就是你看到的一个图片，左对我不知。

电商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.商品列表展示，分商品和店铺两个角度推荐商品，穿插了一排品牌馆推荐。