天下美工出我辈，

一入电商岁月催。

自11年入行电商，一晃《十年》过去了。

从青涩小伙到油腻大叔，唏嘘之余感概不已。

作为资深美工，接下来的几篇文章，我将陆续分享期间设计心得。

一方面，算是总结过往的电商经验，继往以开来；

一方面，也算是分享给后浪的美工，未雨而绸缪。

不打保票，写作计划暂定如下——

• 电商美工（一）活动页设计

• 电商美工（二）海报图设计

• 电商美工（三）详情页设计

• 电商美工（四）直通车神图

  …

这里分享的是第一篇，也就是各类专题页设计。

考虑到行文比较长，此处罗列文章大纲——

前言（如是）

Part 1：首页

PC/MB-综合/垂直-冰糖葫芦（点线面）-Trends

Part 2：专题页

品牌/热点-局部（整体）-构图（动线）-Tips

Part 3：承接页

节日大促-设置/应用-留老/拉新-文案（特色）

Part 4：活动页

日常活动-信息（视觉）-模块（评估）-流程/细节

附录（文献）

 Part 1：首页 

品牌/店铺之首页面&初印象。

1.1：PC/MB/Web

在做首页设计之前，需要统筹不同端口。

大体而言，主要包括——

• PC：即传统意义上的电脑端；

• MB：Moblie，手机端也叫无线端；

• Web：网页端，适配平板类；

• UI：各类app，适配各类新设备；

  …

不同端口既要统一风格，又要有所侧重。

相对来说，可以分为——

• 电脑端：以导航为主，兼具搜索功能；

• 手机端：以浏览为主，偏向兴趣推荐；

• 网页端：引入HTML 5技术的兼容性；

• 设备端：以推送为主，目前尚未成熟；

  …

1.2：综合类/垂直类

譬如淘宝、京东、拼多多等平台。

综合类电商平台的首页结构——

• 用户使用搜索栏快速找到心仪的商品（快速定位目标）。

• 通过Banner活动激活流量（产品拉新客户，活跃老用户）。

• 展示全部服务类别（让用户知道产品有哪些商品和服务）。

• 秒杀用流量品带动购买量（让用户知道在我这里很便宜）。

• 首屏后的页面展示各大类别（方便用户进入沉浸式浏览方式）。

  …

www.uisdc.com/e-commerce-homepage-design

比如唯品会、洋码头、小红书等app.

垂直类电商App的首页解构——

• 品类或者品牌中热门单品的推荐。

• 以专题形式的某一类商品的集中推荐，以商品推荐为主。

• 如果有达人推荐的子频道，会在首页有露出，通过一些意见领袖的推荐，

• 知识库，某一类或几类专题的合集，免不了各种种草。

• 其他一些各种小频道栏目的露出。

  …

www.uisdc.com/e-commerce-homepage-design-2

1.3：冰糖葫芦（点线面）

整体页面设计的“冰糖葫芦原则”（如图）强调的是从点到面、从局部到整体的一种视觉联系。

• 原则一：单页的点，这里指切入点，切入点就是整体页面中的视觉焦点。

• 原则二：单页的线，用来连接和引导，专题单页中的线用于引出故事的情节。

• 原则三：单页的面，用于整体风格的设计，这里指的是整个页面的完成与成熟度。

1.4：10-Tips

如下是我在工作的过程中，整理的10个专题页设计的小技巧。

大家结合着自己的内容去灵活运用，切不可生搬硬套哈——

• 头图有个“突破点”，下面设计才好接。

• 承上启下很重要，页面有头也有尾。

• 背景颜色要整体，慎用色块“切豆腐”。

• 由点到面整体感，切记东拼和西凑。

• 一眼看完3屏多，不做留白就得晕。

• 整体想来整体做，全局规划全局看。

• 专题页面怎么做，注重形式就能破。

• 整体设计故事化，页面才能吸引人。

• 视差分屏好助手，单页滚动新潮流。

• H5动效新趋势，人机交互有看头。

http://www.woshipm.com/ucd/691750.html

 Part 2：专题页 

各类专题页面，各种热点事件。

2.1：品牌/热点

以”品牌“为核心的专题页——

• 品牌建立：初创时期

• 品牌发展：里程碑事件

• 品牌荣誉：各种奖项

• 核心骨干：董事会成员

• 团队文化：合作理念

• 组织愿景：公司价值观

  …

其它各式各样的专题页——

• 风格：日常用品类目。

• 型号：手机数码类目。

• 物流：大件品类如家具、建材。

• 定制：名贵品类如珠宝、钻戒。

• 承诺：跨境电商平台。

• 中奖：大促活动店铺。

  …

2.2：要素/框架

2.2.1：要素（局部）

• 头图：

  Banner的作用是：宣传／展示／广而告之／准确传达信息。

• 文案：

  文案可以最直观表达活动的定位和运营策略的信息。

• 背景：

  主要体现在色彩／形式／纹理等差异化。

• 产品或模特：

  主要体现在品牌效应／产品品质／功能差异等给人的感官感受。

• 点缀物：

  有点缀物VS没有点缀物／点缀物合适VS点缀物不合适。

• 楼层：

  形式新颖VS形式常规／形式贴合主题VS不贴合主题。

2.2.2：框架（整体）

上述是从局部（要素）来拆解专题页不同的模块，

下面我们将从型／色／意／技四个方面来探讨专题页整体设计。

• 型：主要是指整体的形式／风格等方面要与众不同。

• 色：主要是指色彩上的差异化，从视觉到心理的不同感受。

• 意：主要是指品牌特性／理念意义／定位方向等，与众不同。

• 技：主要是指技术创新／跨界合作／手法创新等让人感到新颖、好奇。

2.3：构图（动线）

好的构图能够让你页面更出彩，也能让你做设计更事半功倍。

而如果你想要展示各节点的内容，那何不干脆做成个性化的流程图？

2.3.1：简单切割~

用一个形状或者素材切分整个页面，画面瞬时变得有趣生动起来，内容区域也能得到有效划分。

2.3.2：对称切割~

前提是内容处于对立关系的情况下，比如说：对战，男女，冷热等等，页面一分为二，视觉更具张力。

2.3.3：组合切割~

这种构图方式适合那种每个区块中的内容属于平级关系的专题，例如示例中的几个功能点和分类。

2.3.4：多重切割~

不规则的构图方式，避免了画面生硬，不易产生审美疲劳，呈现出来的视觉效果也很独特。

2.3.6：放射/透视~

通过整体放射状加透视构图，使画面呈现立体与空间感，视觉焦点明确，画面冲击力强，富有动感。

2.3.8：视线流程图~

千言万语不如一张流程图，运用这种构图方式能够将步骤，关系，各个节点以及整体流向展示清楚。

www.woshipm.com/operate/41393.html

2.4：X-Trends

随着新技术（AR/VR）的涌现，以及新平台（抖音/快手）的兴起，

设计行业也呈现出了多样化的风格表现，趋势包括但不止于——

• 直播（视频）

• 动态（动画）

• 三维（3D）

• 合成（特效）

• 手工（DIY）

• 手绘（涂鸦）

• 摄影

• 故事

• 创意

• 其它

  …

www.uisdc.com/special-subject-page-design-skills

 Part 3：承接页 

从设置到应用，承接整个页面。

3.1：节日大促

电商人无疑是造节高手。

既有结合传统节日的各类大促，譬如——

• 情人节

• 妇女节

• 劳动节

• 国庆节

• 圣诞节

• 元旦节

  …

也有借势电商崛起苦心经营，

渐渐达成共识的节日，比如——

• 6.18 年中大促

• 8.18 发烧节

• 9.9 划算节

• 11.11 全民狂欢节

• 12.12 年终盛典

• 年货节（过年前）

  …

3.2：设置/应用

承接页面设置详情参考——

关于店铺装修承接页装修操作！

www.zcool.com.cn/article/ZNzU0MzMy

活动页面应用具体参考——

淘宝双11活动承接页怎么设计？

www.niuxuan.cn/redian/74236.html

3.3：留老/拉新

3.3.1：多变优惠活动（不明觉厉）的主要三种表现形式为 ：

 1、社交优惠活动

（指人们从产品中通过与他人的互动而获取的人际奖励。） 

 2、猎物优惠活动

（指人们从产品中获得的具体资源或信息。） 

 3、自我优惠活动

（指人们从产品中体验到的操控感、成就感和终结感。） 

www.25xt.com/article/57074.html

3.3.2：针对老用户的优惠活动 ——

• 双赢模式奖励

• 阶梯模式奖励

• 拼团模式奖励

• 砍价模式奖励

• 成就感（荣誉）模式奖励

3.3.3：打动新用户的优惠活动——

• 首单立减模式奖励 

• （双赢）优惠模式奖励 

• 限时限量 

  …

3.3.4：以及提高活动转化率（新老用户）常用的方式——

• 增加活动入口（引导）

• 提高老用户邀请人数

• 提高新用户参与人数 

  …

3.4：文案（特色）

不同商品（服务）的文案有不同的风格与调性。

这里以网络搜集的文案为例——

• 促销型：

  全店5折起／全场买三免一／周年钜惠等

• 口号型：

  争做行业领跑者／上天猫就购了／好物低价上京东等

• 通告型：

  热烈庆祝X成立X周年／欢迎XX领导莅临我司／恭喜X荣获X称号

• 自嗨型：

  bigger than bigger／again and again／more and more

• 共情型：

  趁年轻，住好点／我的青春我做主／巴黎欧莱雅，你值得拥有

• 恶搞型：

  老板跑路了/小姨子发飙了／美工甩手不干了等

 Part 4：活动页 

活动从未间断，一浪接着一浪。

4.1：日常活动

如下图以淘宝（天猫）为例，感受一下日常活动的密度。

难怪圈外人不忘打趣：电商汪天天都在过节！

纵向——

在时间维度上，除了活动当天也需要做好~

》预热：前期预热（提前1~3天）

》返场：过后返场（避免销量剧跌）

横向——

在空间维度上，除了承接页也需要设计好~

》互链：内部互链（子品牌）

》联动：联合互动（其它品牌/店铺）

4.2：信息（视觉）

如何在最短时间内hold住用户脚步与注意力，

我们不妨一起看一下活动页信息展示法则——

一、重要信息突出展现

二、任务操作流程顺畅

三、及时响应用户操作

四、正确使用视觉语言传达界面信息：

• 按钮的形式能被正确感知，醒目，突出，跳出画面。

• 页面的视觉层级：高光>渐变>投影>纯色>描边。

• 内容层和背景层层次分明，避免喧宾夺主。

• 图标具有交互动作不可作为装饰元素单独存在。

www.jianshu.com/p/a6f6e6c80355

4.3：模块（评估）

其实无论哪种活动页，当我们对其进行拆解分析后会发现，页面中要展示的信息主要包含以下几种：

• 活动标题

• 活动入口

• 活动奖品/商品展示

• 活动参与条件

• 活动规则

• 有效时间

• 获奖信息

• 说明

  …

如何合理布局，将以上所有信息以最优方式展现在页面中，是活动页设计的关键。

• 充分利用首屏，展示核心信息；

• 主标题与副标题阐明活动价值；

• 参与入口——活动页的眼睛；

• 醒目而方便的参与入口是提升活动转化率的关键。

• 关注后续——活动效果的评估；

• 利用反馈信息，做好复盘工作；

  …

4.4：流程/细节

好的专题页设计，整体效果和谐，内容传达清晰，视觉元素有延续和继承，页面衔接不生硬、有趣味。

有时工期紧迫、条件所限，我们不能做到事无巨细，因而尤其需要注意避免一些容易出差错的细节。

一、头图要有延展性，要注意宽屏分辨率下的显示特点。

二、专题交互细节，为按钮翻页等交互元素设计各种状态，会有更好的体验效果。

三、专题自身的视觉设计的延展和统一，包括专题附属的弹层，对话框等的细节设计。

四、专题图层众多，题设计完毕后交付前端的同事时，应该对图层进行分组，做到规范交付。

五、专题设计稿提交时，尽量可能采用不同的图片，数目参差的正文，来替代设计稿中的模拟内容。

六、字体的问题。在不频繁更改文案的情况下尽量使用图片来制作标题栏的文字效果，达到应有的视觉效果。

七、前端的规范与限制，比如需要复杂的圆角和半透明页面效果，还包括专题上线后的跟踪与反馈。

八、良好的沟通：设计师可以提出更好的风格意见，视觉创意，从而更好地满足对方的需求。

…

www.uisdc.com/p440

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。