因为我通常教学生减少上课时间，所以我写了一些通缉书。我之前有朋友私信，希望不要用图片，我也知道图片体验不太好。现在盗版太大了无助。但想想它是为了给每个人提供更好的阅读体验，或者使用文本版本。如果您发现我未经授权重印了我的文章，请向我报告。本介绍介绍了垂直电子商务的主页设计。因此，让我们首先了解什么是垂直的电子商务类。

B2C垂直电子商务细分

淘宝的产品类别（SKU）数十亿，而天猫和京东也应该在数千万。大量商品类别，混合鱼商和锯齿状产品给消费者的购物带来了巨大的购买时间成本。消费者有时在这样的购物环境中比在大海捞针中找到合适的产品更容易，并且大量的假冒伪劣商品增加了购物的难度。与B2C综合商城相比，还有一种小而美观的电子商务形式，称为B2C垂直电子商务，它只专注于销售一个或多个相关类别的电子商务。识别电子商务是否是垂直的是一组能够找到共同属性的用户。例如，女性，文学青年等。垂直电子商务的价值在于它站在独立第三方的视角中，并从大量商品中选择消费者。该平台需要为这些产品提供信誉，因此这些产品的质量相对有保证。通过口口相传，我们可以逐步建立消费者之间的信任。

模式优点和缺点:垂直类电子商务的优势在于面向客户群具有一致的属性。有了这个大前提，很容易知道客户在哪里，他们喜欢什么，他们关心什么，以及有针对性的营销。而客户群的集中和特殊性将使其更具归属感。垂直电子商务的缺点是：单一产品类别，低用户购买率。如果用户想要购买您没有的其他商品，那么用户可以选择全面的B2C电子商务平台。因此，在垂直电子商务发展到一定程度后，业绩增长将遇到上限，因此它将开始扩大品类，走大而完整的道路。它也将受到来自大型B2C商场的竞争。从商品和价格的角度来看，淘宝，天猫和京东的综合B2C电子商务。有大量商品可以取代垂直电子商务。

常见的垂直电子商务应用

在B2C垂直内部，在某些应用中有更多的商业产品。例如，母婴电子商务的大型垂直分类，有很多小类，如服装，鞋子，奶粉。这些应用程序相当于垂直电子商务中的综合类（图1-1）。分类名称产妇宝贝贝贝网，蜜芽，儿王化妆品聚美优产品，乐蜂网品牌折扣唯品会，聚美友，楚楚街女性导购美女，蘑菇街头服装梦想义卖市场，优衣库，麦旺，现货跨界电子商业小红书，网易考拉，海运码头，海涛，亲爱的，美丽的，高飞，云猴全球购买新鲜日常好二手交易闲置鱼图1-1综合垂直电子商务

由于有许多类别，页面携带的信息密度相对较高。因此页面设计采用类似于集成B2C商城的设计（图1-2）。如果您对这篇文章感兴趣，页面设计可以参考我之前的文章《综合B2C电商首页设计》，这超出了本文的范围。

图1-2北and和居美友的垂直电子商务有一些垂直的细分。例如，各种鞋袜，奢侈品，食品，箱包，水果，钻石戒指和珠宝，葡萄酒，保健品，礼品和玩具，花店，家居，汽车用品，药店等。这些子类别逐渐消失随着时间的推移，比如出售鞋子的乐涛。有许多综合推荐类别和家居用品可以留下各种流行趋势。这些垂直细分的产品类别并不多，因此大多数页面设计都使用大型白色简约设计。本节重点介绍推荐一些垂直子类别的电子商务分析（图1-3）。分类名称手工艺品东家首义家居，生活，美好的东西，尖叫的设计，工匠综合导购最美的东西，好仓库，想去，毒药，野兽派，看美食享受，二十四季男装男装国家女装ICY，ZARA，H&M;女士内衣氧气1-3精细分类垂直电子商务

垂直电子商务App的主页结构是垂直电子商务用户，购物的目的可能不是很明确，一般会根据购物，通过购物找到一些自己喜欢的商品来完成购买行为。因此，主页将提供各种类型的产品推荐。推荐表格通常有1，品牌中热门商品的类别或推荐。 2.特殊形式的某类产品的集中推荐，主要基于产品推荐。 3，如果有达人推荐的子频道，它会在首页上曝光，通过一些意见领袖的推荐，4，知识库，我的理解是一个主题的集合，比如哪些场合适合什么衣服，什么季节适合吃什么，如何选择合适的锅。当然，在这方面的知识中，对各种商品的建议并不缺乏。 5.由于有许多集成的电子商务平台模块，所以其他小通道列是暴露的，每个模块可能属于某个部门，有必要平衡各部门的利益。设计师设计的页面反映了各种协调意愿。虽然垂直电子商务的模块要少得多，但设计师可以更自由地考虑各种模块的设计。了解了垂直家庭电子商务主页的内容，我们开始研究垂直电子商务的具体模块组成。

第1单元：标题栏

每个应用程序都有一个标题栏，它成为应用程序的标准设计。标题栏上通常有三个重要元素：徽标图形或文本，搜索页面的入口以及购物车的图标。视觉设计1放置在品牌标识栏中的徽标文本将用于字体设计。垂直电子商务通常会非常注重品牌的曝光度，因此这里不会使用系统默认字体，但会使用徽标或徽标设计。 （图1-4）。

图1-4使用标题栏的徽标图形和其他带字体设计的徽标设计。 2搜索最垂直的电子商务，并希望浏览推荐的内容并购买推荐的活动。而不是直接搜索项目，完成购买。因此，垂直电子商务应用程序将有意识地削弱商品搜索。与B2C集成电子商务导航栏上引人注目的搜索栏，食品电子商务享受和兴趣购物指南生活页面（图1-5）不同，搜索图标直接放在右侧的导航栏。

图1-5食品电子商务享受和关注购物指南生活如果您的产品类别不是很多，那么用户很难通过关键字搜索找到东西。因此，一些应用程序只是组合搜索和产品分类页例如，进行搜索（图1-6）并单击“搜索”。输入的搜索页面是产品的类别页面。

第一页和图1-6的分类页面中没有很多垂直类别的电子产品，因此直接删除了搜索门户。在2016年，唯品会的应用程序甚至极大地删除了搜索功能，并希望用户可以在页面上停留更长时间。这种想法显然有点如意，因为有很多类别的唯品会，这种设计遭到了很多用户的反对。在最新版本的唯品会将悄然添加搜索功能。因此，留在搜索门户网站取决于您的类别是否足够丰富。

第2单元：由于垂直电子商务类别，分类模块并不多。子渠道也是有限的，因此它不需要与集成的电子商务相同，使用图标的形式作为模块快速输入，但直接设计为标签标签栏设计，放在标题下栏，方便用户快速浏览和切换。视觉设计1如果有更多类别，则底部选项卡栏选项卡选项卡使用时尚设计。如果应用程序具有较少的通道，例如制作应用程序（图1-7），您甚至可以直接在底部设计标签栏，这相当于整个底部标签栏。当然，底部标签栏对于“我的”模块很重要。入口位于顶部标题栏上。

图1-7创建第一页的底栏。视觉设计2滑动隐藏的标签栏一些垂直电子商务主页设计为单一形式，完全由横幅图像组成。用户向上滑动页面并自动隐藏标题栏，为用户提供更大的页面显示区域。例如，Life应用程序（图1-8），至于要向上滑动多少像素以开始隐藏标题栏，您需要为程序员定义高度。

图1-8生命滑动隐藏标签栏

梁仓的主页没有使用这种滑动隐藏标题栏设计（图1-9）。我想这是因为在好位置有太多底栏，购物车没有单独的位置。因此，为了强调购物车的全局显示，栏顶部的标签栏是固定的。当然，我认为这种想法可能没有意义，因为主页不太可能导致交易行为，更多的是排水的作用。我认为好位置底部的分享是一种非常无味的功能。其实质是推荐一些漂亮的产品。如果您将此频道降级到其他位置，请将此位置留在购物车中。我想设计师可以舒适地使用隐藏的标题栏设计。

图1-9固定标记列的位置

第3单元：横幅广告

由于垂直类电子商务的信息密度较低，因此有足够的空间放置横幅。 Banner的常见比例是16: 9和1: 1.即750 * 422和750 * 750。一般的横幅设计基于750宽度的iphone6/7。至于较大尺寸的iphone6/7plus，仍然使用此图像，因为从节省带宽的角度来看，不需要如此大的尺寸。 2X横幅地图也足够3X。什么是2X，3X？有关这些移动设计知识，请阅读我编写的UI设计书《术与道-移动应用设计必修课》。那么图像的比例何时使用16: 9和何时使用1: 1？它仍然从内容的角度进行分析。视觉设计1 16: 9横幅图如果您的应用程序显示的横幅图本质上相似。图片只是一个参考功能，用户无法从大图片中看到更多的产品信息，需要更多的文字说明来辅助阅读，图片比例选择使用16: 9.例如，游览的产品图片是适用于16: 9.例如，如果你想制作一条欧洲航线，你只能把艾菲尔铁塔的照片放在巴黎。提供的信息量不足。您必须添加德国和法国深度10日游的文字说明。例如，创建（图1-10）显示了主页的主题，而不是特定的主页。因此使用16: 9横幅图像比例。

图1-10 16: 9主页横幅

视觉设计2 1: 1横幅地图如果您的应用程序显示的横幅地图本质上相似。图片具有重要的参考作用，用户可以通过观看精美图片来吸引点击而无需过多关注文字内容。图像比例选择使用4: 3.例如，最漂亮的Banner图基于单个产品（图1-11）。它不需要太多文本，用户可以看到它。简单地说有一张图片就够了，所以图片比例是4: 3。

图1-11最漂亮的1: 1横幅地图

第4单元：梳理内容建议

纵向电子商务，主页需要提出各种主题建议来指导各种商品。各种编辑选择，由人推荐，热门商品。对于用户而言，本质是推荐的产品。因此用户不关心您的内部内部分类。然后一些电子商务直接打破了综合B2C电子商务的豆腐块实践。相反，它使用卡片设计。各种建议都是卡片设计，这种设计的优点是它足够小，看起来不错。缺点是信息密度非常低，无法保存足够的信息。视觉设计1水平卡片想要使用水平大卡片进行设计。启动画面推荐的产品（图1-12）通过动画切换直接显示在第一页的第一张卡片上。通过这种强调，用户足够专注。这种水平卡的一个缺点是可以容纳的信息量不是太大，因此它仅适用于单一类型的内容卡。如果您尝试向卡中添加各种复杂模块内容。一旦卡太多，用户在水平滑动卡时往往会失去位置感。我在哪个模块，我只看模块，用户容易混淆，这是一个问题，鱼和熊掌不能兼得。

图1-12启动页面和主页卡设计视觉设计2垂直卡另一种大卡设计是垂直卡，最漂亮的家用卡是纵向滑动（图1-13）。与横向滑动相比，滑动的容易性略好于横向滑动，因为使用者更习惯于上下滑动。垂直滑动的信息滑动程度低于水平滑动的信息滑动程度，因为页面需要留出足够的区域来放置更多的前后卡以产生卡的上下立体感。这种三维设计可以给用户更好的位置感。由于设计的可用区域较小，因此通过仔细的标题设计，用户的点击会更加受到关注。

图1-13最漂亮的主页卡设计

第5单元：楼层横幅

我们之前曾说过，垂直精细分类的渠道分类可能不是那么多，因此不需要像B2C集成电子商务那样复杂的设计形式。它可以以横幅形式从上到下直接以单个主题的形式呈现。视觉设计1图片的比例是因为横幅设计的形式相对简单，采用了图片+文字的视觉风格。每层都是一个小模块，那么模块和模块如何通过视觉方式区分？ Life应用程序使用1 + N设计（图1-14）。在设计风格中，Life的上半部分有一个大横幅和一个半透明的黑色背景，下半部分有一个白色背景和一个白色的上三角形。这使用户清楚产品的下半部分属于主题的上半部分。

图1-14生活的楼层横幅

在Life的上半部分，Banner使用750 * 400PX的分辨率，与16: 9相比扣除22px。不使用16: 9的原因是因为上部有30px的空白区域较低的部分。不要让整个Banner浪费太多的区域，所以要采取400PX的高度。在下半部分，Banner使用176 * 176PX（1: 1）的小图像。通过这种方式，图像比例与先前分析的适用于16: 9的专题图一致，并且产品图适用于1: 1.这个尺寸比似乎使得该部分在之前清楚地清楚。当然，如果图片的下半部分必须使用小图片，否则看起来这个级别是混乱的。例如，男性主页的主页（图1-15），上图和下图的比例看起来非常接近。模块层次结构不是很好。

图1-15满义邦楼层横幅设计2视觉风格同一界面反复排列显示横幅，因此设计风格应统一。 Life使用图标+标题+列顶部和底部布局（图1-16）。这种设计的优点是每个模块都非常清晰，用户可以清楚地对各种子信道进行分类。所以设计风格不是随意选择，只需看看视觉审美风格。相反，它需要有效地支持产品运营的需求。

图1-16生活家庭楼层横幅和类别页面

第6单元：底部导航栏

底部导航一般分为4到5个模块。以图标+文字设计的形式显示，电子商务最常见的底部导航栏设置是主页，类别，购物车，社区，我的。由于电子商务的垂直类别，商品分类有限。很多时候，用户甚至不知道他们可以搜索哪些关键字并找到他们想要的产品。因此，垂直电子商务必须设计商品分类页面，这是用户商品的重要检索形式。它还可以让用户知道您的平台上可以购买哪些商品。氧气具有二级产品分类，因此它使用类似于B2C集成平台的类别设计。小图像+文本形式（图1-17）非常紧凑。这种设计的好处是，您可以在足够小的区域内看到尽可能多的信息。

图1-17氧气分类页

如果产品分类只有一个级别，则可以使用大图+文本设计表单。大图像的设计信息密度低，占用更多页面区域。例如，如果你想去（图1-18），屏幕上只显示四个类别中的一个，但好看的图片总是引人注目。

图1-18分类页面

购物车中的一些垂直电子商务应用程序是购物指南的本质，类似于中介。通过收集品牌的广告或购物指南的佣金来生存。当用户通过某个主题并看到需要购买产品时，他可以跳转到天猫或其他B2C电子商务来完成购买（图1-19），因此没有购买付款的模块，没有购物车。

图1-19生活购买商品跳跃天猫

社区社区的核心是回答“什么是值得购买”的问题，或者它可能是各种主题推荐的渠道集合。社区分为三个部分：内容曝光项目，最多人协助决策，购买。这属于内容电子商务。我将在单独的章节中详细介绍。我的模块类似于B2C集成应用程序设计。这是个人背景角色，在购买产品后管理一系列州。例如，检查商品物流状态，退货商品，商品评估等。

垂直子类别App推荐

市场上的垂直子类别中有很多应用程序，我选择了一些我非常喜欢的建议。毕竟，我受到一个人的限制。如果你感觉很好，你可以留言告诉我。我的微信是booui2017，请写一下来自UI中国。建议1：东家首义（手工艺品）东家是一个工匠聚集的地方，出售各种工匠制作的各种艺术品（图1-20）。电子商务已经发展多年，已经有一些东西了。工匠，工艺，消费升级，工艺，这些词语变得越来越热，但工匠和他们的作品，一直存在，下线或其他在线平台，或家庭或兼职，他们总是活着。东方的出现给了他们一个选择。东方不仅是电子商务产品，也是对传统工艺的尊重。

图1-20 Dongjia Shouyi Starter页面和主页

建议2：销售原创设计家居品牌的平台（图1-21）。我不知道有多少人喜欢我，去宜家买东西，只选择一些小工具，大家具是不会选择宜家的。由于宜家的一些大型家具，材料主要是刨花板和MDF，很长一段时间后很容易变形。实际上，价格不是太高。一些大型装饰城镇的家具感觉太普通，缺乏设计。创作中有很多设计家具，适合年轻消费者。

图1-21用作启动页面和主页

建议3：Life的应用主要是帮助您选择家中的各种物品（图1-22）。适用于追求生活品质，喜欢用户群中的各种精美小物件。里面的各种主题内容质量高，值得一读。主页横幅设计上的图标设计非常精致。对应于该部分中列的图标，部分描述非常清楚。

图1-22生活启动页面和主页

建议4：好东西（家庭）这是一个推荐时尚，创意和优质生活用品的应用程序（图1-23）。

图1-23好东西启动页面和主页

建议5：良好的地位（全面）生活审美共享社区（图1-24），数百名意见领袖分享各种生活美学。 “梁仓”杂志报道了最有趣，最有品味的人物和事物，梁仓商店出售来自世界各地的最美丽的生活方式产品和礼品。

图1-24亮仓启动页面和主页

建议6：最美丽（集成）为时尚达人提供了一个发现良好的全球设计和优秀设计师的平台（图1-25）。当你第一次看到最漂亮的麋鹿图标时，你知道这是一个非常面向设计的应用程序。它满足了人们对美丽和小众产品的需求，使“不在人群中”的审美标准逐渐渗透到人们的心中。这是一个我认为在垂直电子商务中具有非常高质量的应用程序。

图1-25最漂亮的起始页面和主页

建议7：我想去（集成）是一个购物共享平台，突出“好设计，手工制作”（图1-26）。专为时尚达人设计的尖端设计理念和产品。您要转到的主导航栏图标与应用程序图标的设计语言紧密结合。使用小钩子这个图形元素贯穿图标的设计。其中，TA中的横幅图表示它可以显示动画，非常生动有趣。这张照片是我的学生为我录制的。你也可以告诉我如何录制一张好照片。

图1-26想要转到TA说出子信道页面

建议8：野兽派（综合）野兽派是一个与时尚相关的综合家庭相关销售平台（图1-27）。野兽派原本是购买鲜花的应用程序。她卖的不是花，而是美丽的生活理念。随着您越来越大，该类别扩展到各种家居，美容，香水，配件和食品。这里更有吸引力的是野兽派的家庭互动设计。使用整个插图作为首页上各种子模块商店的入口。这种设计是独一无二的，一见钟情，非常吸引人。

图1-27野兽派的起始页和主页

建议9：男士服装（男士服装）这是一个解决男士服装问题的应用程序（图1-28）。男性和女性的消费行为与女性的消费行为大不相同。女性喜欢购买服装（包括在线和离线），并愿意花很多时间去购物。购买结果是随机和情绪化的。男人们买东西来处理快速修复，购买具有强烈目的的衣服，追求效率和结果导向。所以我不想在购物和采摘上花太多时间。我相信很多男人，像我一样，对服装的要求通常不高，但有时会有某些场合或追求生活质量。我希望有一件体面或有品位的礼服。所以我真的需要一个像这样的平台。我应该穿什么？这个设计师应该是一个平面，非常喜欢使用各种海报元素，从开始页面到各种横幅的前面，熟练地使用各种点线元素穿插。

图1-28男子状态启动页面和主页

建议10：氧气（女性内衣）氧气是女性内衣的推荐平台（图1-29）。在精品杂志的方式中，我们每天向用户推荐买家在发现世界商店后发现的内衣。虽然竹子是男人，但选择女士内衣时你会感觉不一样。但我听说女人选择舒适的内衣并不容易。内衣体验专家提供了许多关于氧气的图形经验报告。这些经验者是从氧气用户中脱颖而出的人。 “氧气希望这些人成为意见领袖，他们会引导用户消费。 。

图1-29氧气启动页面和主页

建议11：享受（美食）一个知道如何吃，选择和拥有风格的食品电子商务平台（图1-30）。这与公众评论不同，ENJOY选择的一些餐厅，其中一些有米其林星级餐厅，其中一些是精心装饰的，其中一些是基于配料或菜肴; ……与时尚商店类似，“ENJOY-Selected Limited Foods”的核心竞争力是有效筛选餐厅和菜肴的能力。它不会制作流行的自助餐，也很少涉及连锁品牌。所以这里不是吸引人们的价格，更多的是那些精致餐厅的推荐。

图1-30 ENJOY启动页面和主页

建议12：Hanada Otaru（鲜花）这是一种花卉选择应用，是送花的首选（图1-31）。在不同的场合发送不同的人，你应该发送不同的鲜花，这些非常特别。该应用程序解决了这个问题。但遗憾的是，送花对日常使用的需求很低，淘宝和京东也有完美的送花服务，所以这个平台应该很难做到。我推荐这个应用程序的原因是我认为设计师应该喜欢花这个主题，应用程序的标志设计也非常好。

图1-31华天小玉创业页面和主页

垂直电子商务品牌植入

通过对上述App的分析，发现一些具有设计感的应用非常喜欢使用黑白色调。并拥有自己独特的设计语言。现在打开各种设计网站，寻找app界面设计参考。您会发现，如果您删除图标并只看界面设计，许多应用程序的界面设计都非常小。应用程序设计倾向于趋于同质化。那么这对界面设计师来说是一个挑战，也是一个机遇。经过几年的移动创业趋势，已经存在大量的应用程序设计。现在，设计人员不会面临如何从0设计应用程序的问题，而是面对各种修订设计的需求。如何设计与竞争产品具有差异化设计的界面是UI设计者日益迫切的需求。