手把手教你设计电商着陆页：保姆级教程分享！

着陆页也称：落地页、引导页，英文名：Landing Page。在互联网营销中，引导页就是当潜在用户点击广告或者利用搜索引擎搜索后跳转显示给用户的网页。一般这个页面会显示和所点击广告或搜索结果链接相关的扩展内容，而且这个页面应该是针对某个关键字（或短语）做过搜索引擎优化的。它的作用就是利用landing page页面上的内容吸引特定用户来达到自己特定目标。

着陆页也叫落地页，英文是 Landing Page，是一种独立的页面，主要用于数字营销中吸引用户点击后用来承接用户的页面。通俗来讲就是当你点开了某网站页面时，首先看到的页面就是着陆页，可以在这个页面里搜寻到很多想要的资讯，例如：产品介绍、关于我们、联系我们等等内容。因此对于网页设计来说，着陆页是必不可少且十分重要的，今天就给大家带来电商类着陆页设计保姆级教程，不要错过哦~

背景

打开即时设计，创建宽度为 1440 的画板，高度不限依据设计内容而定，填充 F2F7F0。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/?source=csdn&plan=bttjc410

顶部导航栏

绘制 56*56 的图标 icon，再创建产品信息。·导航文本，选择「HarmonyOS Sans SC、中等、字号 20，填充 2C8C00 。·再绘制矩形搜索框和更多选项 icon 。

配图

使用「 Unsplash 」插件，选择一张水果图片。·再使用「智能抠图」或者「映造抠图」消除背景。·绘制 520*520 的圆形，取消填充，添加大小为 3 的居中描边。填充线性渐变，颜色 2C8C00 到2C8C00、不透明度 0% 。·给水果添加阴影和细节元素。

unpslash插件指路即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=detail&type=plugin&id=62b061af06b8b593a8056ddd&source=csdn&plan=bttjc410

标题

·在水果和圆形的图层中间添加标题文本。·标题文本，选择「Inter、ExtraBold、字号 188，填充 2C8C00 。

次级信息

·绘制 50*50 的圆形，填充 091729，再绘制相关的 icon。·标题文本，选择「HarmonyOS Sans SC、常规、字号 20，填充 091729 。·次级文本，选择「HarmonyOS Sans SC、细体、字号 14，填充 091729 。

商品信息

·水果文本，选择「MiSans、Light、字号 75，填充 091729 。·数字文本，选择「HarmonyOS Sans SC、特粗、字号 50，填充 091729 。·绘制 196*64 的矩形，填充 091729，作为按钮。

更多内容

·绘制 1240*220 的矩形，填充 091729。·绘制 150*150 的圆形，填充 2C8C00 。再填充水果图片作为配图。·水果文本，选择「HarmonyOS Sans SC、粗体、字号 18，填充白色 。·简介文本，选择「HarmonyOS Sans SC、细体、字号 14，填充白色、不透明度 80% 。

成品

这是教程源文件链接，大家有哪里不了解的可以去文件中查看

电商类着陆页源文件教程即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/f/A_a5Ij?source=csdn&plan=bttjc410