第一篇 内功
1．1 长尾品牌的定义
1．1．1 长尾理论和长尾品牌
1．1．2 品牌的定义和原理
1．1．3 长尾品牌特征
1．2 传递品牌认知
1．2．1 品牌名称
1．2．2 品牌广告语
1．2．3 品牌视觉符号
第2 章 UED 用户体验设计
2．1 战略层和范围层
2．2 结构层
2．3 框架层
2．4 表现层
第3 章 视觉心理学
3．1 图像中的心理学
3．1．1 投射效应
3．1．2 位置效应
3．1．3 平衡
3．1．4 通感
3．1．5 信噪比
3．1．6 形式追随功能
3．1．7 锡克法则
3．1．8 右脑优势效应
3．1．9 最简原则
3．1．10 拟态
3．1．11 熟识效应
3．1．12 完型心理
3．1．13 帕累托原理
3．1．14 预期效应
3．1．15 认知线索
3．2 视觉符号
3．2．1 符号的世界
3．2．2 符号的工作原理
3．2．3 网店设计中的符号应用
3．3 消费心理
3．3．1 消费动机
3．3．2 消费行为模型
3．3．3 消费者洞察
第二篇 外功
第4 章 点击率
4．1 宝贝主图
4．1．1 主体优先是点击率的第一标准
4．1．2 视觉冲击力是点击率的必备条件
4．1．3 优选素材是点击率的基本要素
4．1．4 产品诉求是点击率的高效助推器
4．1．5 环境差异化是点击率的强力催化剂
4．1．6 近景呈现是点击率的优先手段
4．1．7 画蛇添足是点击率的噩梦
4．1．8 信息填充拖点击率的后腿
4．1．9 故弄玄虚令点击率躲猫猫
4．2 直通车主图
4．2．1 直通车主图的两种常见类型
4．2．2 事半功倍的高点击率直通车主图
4．2．3 主体优先是设计直通车主图的基本法则
4．2．4 场景营造是直通车主图的吸金大法
4．2．5 行为引导是直通车主图的高效之术
4．2．6 “ 第一”是直通车主图的永恒经典
4．2．7 创意是直通车主图的制胜法宝
4．2．8 促销是直通车主图的通用秘籍
4．2．9 细节是直通车主图的必杀技
4．2．10 文案是直通车主图的点睛之笔
4．2．11 数据是直通车主图的透视镜
4．3 钻展图片
4．3．1 因地制宜是钻展图片的基本思路
4．3．2 优秀钻展图片的四个要素
4．3．3 主题明确是钻展图片的第一要求
4．3．4 布局合理是钻展图片的必备功底
4．3．5 文案是钻展主图的神来之笔
4．3．6 促销是钻展主图的经典主题
4．3．7 创意是钻展主图的最大玩法
第5 章 详情页的策划和设计
5．1 产品调研
5．2 产品策划
5．3 USP 的设计
5．4 视觉的场景化设计
5．5 详情页的呈现方式
5．6 逻辑结构和框架
5．7 注重设计规范
第6 章 视觉营销力
6．1 了解视觉营销
6．1．1 什么是视觉营销
6．1．2 设计的作用
6．1．3 如何做设计
6．2 视觉营销的误区
6．2．1 转化率的漏水点
6．2．2 盲目功能化
6．2．3 页面失去平衡
6．2．4 风格定位缺失
6．3 视觉与营销的体验点
6．3．1 什么是营销体验点
6．3．2 什么是视觉体验点
6．3．3 营销与视觉体验点的结合
6．4 营销引领视觉布局
6．4．1 营销性视觉布局原理
6．4．2 营销性视觉布局模型案例
第三篇 轻功
第7 章 手机店铺的首页设计
7．1 手机店铺的特点
7．2 手机店铺框架展示
7．2．1 手机店铺端框架
7．2．2 手机店铺首页设计思路
7．3 手机店铺装修的六大原则与案例
7．3．1 六大原则
7．3．2 案例：服饰类目
7．3．3 案例：家居类目
7．3．4 案例：母婴类目
7．4 手机店铺首页设计
7．4．1 手机店铺首页大促结构设计
7．4．2 手机店铺首页动线设计
7．4．3 店招设计案例
7．4．4 焦点图轮播设计
7．4．5 优惠券设计
7．4．6 手机端大促MiniBanner 设计
7．4．7 商品分类展示
7．4．8 手机店铺首页日常设计
7．4．9 无线端首焦设计
第8 章 手机店铺的宝贝详情页设计
8．1 手机店铺的商品详情页与PC 端呈现的不同点
8．2 手机端商品详情页设计
8．2．1 手机端商品详情页设计规范
8．2．2 手机端商品详情页设计思路
8．2．3 手机端商品详情页设计案例
8．2．4 手机端商品详情页FBA 呈现发展
8．3 商品详情页案例分析
8．3．1 手机端产品页性别线分析及案例（男、女性产品）
8．3．2 手机端产品页价格线分析及案例（高客单价、低客单价）
第四篇 阵法
第9 章 设计沟通
9．1 通过问题制定目标
9．2 沟通的五个步骤
9．3 沟通的三个周期
9．4 设计简报Brief
第10 章 创意管理
10．1 如何形成创意
10．2 草图
10．3 情绪板
第11 章 流程管理
11．1 岗位和绩效
11．2 制定流程图
11．3 效率和标准化
11．3．1 规范和模版
11．3．2 文件管理
11．3．3 素材管理
11．3．4 数据管理
第12 章 设计师的自我修养
12．1 为什么要做设计师
12．2 好习惯和好心态
12．3 从设计师到CDO

　　8.2 手机端商品详情页设计
　　8.2.1 手机端商品详情页设计规范
　　无线端流量受限的特点，导致在使用图片过程中高质量的图片费流量，保流量的图片没质量，需要权衡取舍，使手机用户轻松浏览无负担。无线端详情页若同步PC 端的页面内容，第一个致命问题是文字太小，或文字太密，手机端用户受浏览屏幕的限制，不愿意耐心研读过密、过小的文字，容易造成用户跳失。
　　1．最佳的图片像素规范。
　　（ 1）宽度在 480~620像素之间；
　　（ 2）高度不大于 960 像素。
　　2．最佳的文字设计规范。
　　（ 1）当需要在图片上添加文字时，中文字体≥ 30 号字体；
　　（ 2）英文或数字≥ 20 号字体；
　　（ 3）文字太多时，建议使用纯文本编辑。
　　8.2.2 手机端商品详情页设计思路
　　手机端商品详情页设计仍用首页的设计思路图模式进行导出，任何设计
　　都需要先策划，有规划才能落地到执行上。
　　首先要考虑宝贝描述的两个根本点：1．客观的看待产品；2．找出产品描FAB，即产品卖点、产品优势及给予消费者的利益点。组织创意团队，所有的成员把自己当成非专业人士，把自己当作消费者，从消费者的角度出发，什么可以打动你去购买该产品、你在购买该产品时都在想什么、有什么样的顾虑等。所有的成员全部将这些问题罗列出来后，再去看竞争对手的产品描述，从中对比找出属于自己产品的FAB。依序考虑产品描述的六要素。
　　1．抓住3s 注意力。产品页面首屏，如何展示产品才能在第一时间，在3s 内打动消费者，打动消费者的前提是要先打动自己，如果自己都没有想去购买该产品的欲望，那么可以想像得到首页也没有办法在3s 内吸引消费者的目光。
　　2．前三屏放什么东西，如何才能让消费者在3s 内注意到你。通过创意会对自己解剖，以及对消费者、竞争对手的分析，找出用什么方式、什么样的创意在前三屏抓住消费者的目光，使其对产品产生兴趣，愿意继续或是再细看产品页。
　　3．FAB 利益排序法。FBA 是Feature AdvantageBenefit 的缩写：（1）Feature 指产品的卖点；（2）Advantag 指产品的优势；（3）Benefit 指消费者益处；（4）找出FAB 后，要通过调研，优化设定出是先呈现出消费者利益点还是先呈现产品卖点或是产品优势，哪个容易打动消费者，找出最佳利益排序。具体先展示FAB 的哪一个模块与不同产品、不同店铺的成长阶段，以及产品的生长周期有直接关系，需要根据过往数据和调研的实际情况而定。
　　4．模特展示图。模特展示图要少而精，模特展示图不能像PC 端一样重复更多的正侧面模特图，或是各种颜色分类的模特图。 PC 端会把页面做得很长，而手机端页面要做到精简、精选。
　　5．产品实拍展示图。产品要实拍细节图，并精选细节图。
　　6．品牌背书和公司介绍。对于高客单价的产品，需要用品牌或公司介绍来消除消费者对购买产品的疑虑，增强产品的可信度。8.2.3 手机端商品详情页设计案例
　　案例1 ：注意力经济
　　图8-3 是手机详情页的两个设计案例，设计缺陷是背景太过黑暗，文字过于烦琐，卖点不精简，无法抓住消费者眼球。并且文字字号太小，消费者在手机屏幕上几乎看不见这些字，需要达到看图片就能知道文字内容的效果，而不是靠研读文字才能知道产品卖点，看图说话是网络销售的原则。现在是注意力经济时代，产品页面需要在3s 获得关注，吸引消费者留下来继续浏览。
　　商品详情页必须以图片为主，精简文字为辅。手机浏览的连贯性不如PC 端，且消费者平均页面停留时间很短，所以商品详情页必须简单直接，在手机端商品详情页设计中的前三屏必须展示产品卖点和重要信息，不能有烦琐的其他关联信息。所有的产品重点信息不能超过第三屏，在前三屏一定要展示完毕，否则没有办法让消费者产生购买欲望，消费者容易直接跳失。
　　案例2 ：FBA——F 产品卖点提炼
　　手机端因注意力和篇幅有限，要严格的遵守FBA 营销法则。如图8-4所示，产品属性和卖点被清晰地陈列了出来，重点提炼产品优势、产品卖点，可以在第一屏把产品卖点和属性全部呈现出来，同时从排版内容上看，“5D减压调整型文胸”非常简洁，字体合适，信息提炼非常简单、明晰，无需研读文字，与图8-4 相比有明显的差异。
　　案例3 ：FBA——B 利益点提炼
　　图8-5 中提炼的FBA 的B 利益点，表现在模特的植入代入感、场景置身化上，一张正反面图片就将品牌的调性，以及消费者的情景带入，淋漓尽致地呈现了出来，背景素材提取于产品本身的蕾丝元素，恰到好处的与产品进行融入，一般在PC 端不会在第二屏上就呈现产品的FBA。
　　案例4 ：手机端产品页设计——GIF
　　如图8-6 所示，手机端不支持GIF 图片，在PC 端为了产品展示清楚直观，很多卖家习惯做一张GIF 图片360°展示产品，手机端使用GIF 因受手机流量和信号的限制，在终端实际打开的比较少，容易造成用户跳失。
　　图8-7 手机商品详情页设计随着手机淘宝APP 的升级日后会增加了支持视频和多媒体的方式，在商品详情页里，如果在没有互动的基础上只做视频的单一商品说明，那只会增加跳失率。因此在手机端使用视频，务必要加入与消费者的互动功能，比如明星推荐特供商品等，如果没有互动功能，那么建议减少使用视频描述，手机端的最大弊端是受运营商的信号和网络速度限制，因此可能会造成无法打开视频页面或使用过多流量的困扰，碎片化时间使用率降低，打不开页面会造成用户跳失。
　　8.2.4 手机端商品详情页FBA 呈现发展
　　手机详情页设计要遵循FAB营销法则，设计手机端详情页建议屏数不要超过4~6屏。如图8-8所示为设计逻辑结构，第一屏设计呈现产品卖点和优势，即FAB法则中的（FA）产品卖点和优势。第二屏设计呈现产品细节展示图。第三屏设计呈现产品属性信息+尺码说明等。更精简具体的产品信息尺码说明能够给予用户购买的信心。第四到六屏设计呈现为产品模特图片+实物图片。展示产品卖点和优势，重点提炼FAB 法则中的B，前面第一屏重点呈现的是FBA 中的F 和A，第四到六屏重点呈现的是B。
　　……

　　如果说2003年中国电子商务还是商业海洋中的一片涟漪，而十年后的今天，它已掀起惊涛骇浪，摧枯拉朽地颠覆着整个商业世界，包括渠道、产品、消费习惯，甚至是商业逻辑。基于大数据、长尾效应和转化的即时性，电商展现了无与伦比的优势。而在这个爆炸式增长的同时出现了巨大的人才缺口，尤其是网店设计师，几乎每个电商企业都面临着这个岗位的人才压力。十年的发展也让这个新兴的职业从摸石辟路中生长出了自己独特的理论和方法。
　　淘宝大学的负责人在策划本书的时候提了两个要求：首先，这本书作为网店设计师的教材，要能适应从入门到资深的不同发展阶段的商家。其次，这本书要有一定的前瞻性和理论升华，能适应5年内的变化。这两个看似简单的要求其实满载着巨大的压力和挑战。我们集中了淘宝大学视觉营销方向最优秀的几名讲师，经过三个月的奋战终于付梓。
　　这本书既是一本工具书，也是一本思想书。它既适合于专业从事网店设计的设计师，也适合于电商的负责人，运营人员和企业家。该书分为四个大的篇幅，分别讲述网店设计师要具备或了解的四个方面的知识。
　　第一篇，内功。主要针对设计师的内在修养和根本理论知识来设计。从品牌开始讲起，涉及到UED、设计心理学等专业知识。这些是设计师的底蕴，正如武功中的内功。这个部分也比较适合企业负责人自己，通过该章节能了解到一些设计的基本原理和理论基础。
　　第二篇，外功。网店设计师每天工作的具体内容的方法和技巧。首页的布局，详情页的逻辑和广告图的点击率都在这篇里进行展开。这篇里会有对首页框架结构图等非常实用的工具的介绍。该部分适合从入门到资深的网店设计师阅读。尤其是新设计师，建议从这篇开始读起。
　　第三篇，轻功。移动互联网和手机端电子商务的蓬勃发展，给网店设计师带来了新的挑战，这一篇将专题介绍手机店铺的设计问题，并给出了很多实用性的经验。
　　第四篇，阵法。这部分是一个崭新的篇章。很多网店的设计部门已经发展为十几人甚至数十人的团队。怎么管理这个团队？如何与设计师沟通？如何设定KPI？如何制定设计部的流程等都将在这个篇章中讲述。这篇特别适合电商负责人阅读。
　　这本书中的大量案例都来自于商家实践，在编辑本书的过程中，很多商家和淘宝UED部门的同事给予了笔者大量地指导和帮助。读者会在书中看到这些商家办公的场景，拍摄的方案，他们设计部的组织架构等鲜活的内容。
　　最后，愿所有读到此书的人能够有所收获，愿此书能够帮助设计师成长，帮助卖家取得更好的业绩，帮助转型电商的企业获得成功。
　　田野
　　2014年5月8日