电商设计技巧修炼与实战应用（超值版）
人民邮电出版社
北京
图书在版编目（CIP）数据
电商设计技巧修炼与实战应用：超值版/吴海龙，王冬编著.--北京：人民邮电出版社，2020.5
ISBN 978-7-115-50549-1
Ⅰ.①电… Ⅱ.①吴…②王… Ⅲ.①电子商务—网页制作工具 Ⅳ.①F713.36②TP393.092
中国版本图书馆CIP数据核字（2019）第031255号
◆编著 吴海龙 王冬
责任编辑 张丹阳
责任印制 马振武
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
大厂聚鑫印刷有限责任公司印刷
◆开本：787×1092 1/16
印张：13 彩插：2
字数：358千字 2020年5月第1版
印数：1-2500册 2020年5月河北第1次印刷
定价：39.00元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广登字20170147号
本书围绕电商设计原则、技巧及实例进行了详细的讲解，全书共7章，第1章对电商设计的定义及电商设计未来的发展趋势进行了阐述；第2章介绍了电商设计的基础知识，对点线面的知识、视觉引导与排版设计、色彩搭配等方面进行了详细的讲解；第3章对电商设计中的实用技巧进行了详细的讲解，对整合项目需求、丰富页面内容、重视首屏视觉等方面进行了阐述；第4～7章讲解了各类专题页面的设计方法，教会读者用简单的方法制作出精彩的实例效果。本书对电商设计的技巧与案例应用进行了系统性的归纳与介绍，逻辑清楚，浅显易懂。
随书提供操作实例的素材文件及效果源文件，旨在为电商设计师、电商设计初学者提供实用的设计指导，使之能全面学习，少走弯路。同时，本书也可作为相关培训机构的参考资料。
Preface
2012年我懵懂地进入了电商设计行业，到现在已经超过5年。依稀还记得当时自己一人要负责公司旗下4家淘宝店铺的装修设计，整天忙得晕头转向。每天的状态就是脚不离地，不是在去上班的路上，就是在加班中。就这样，我开始了自己的第一份职业——淘宝店铺设计师。坚持了一年后，因为公司内的设计岗位很少，我感觉对自己的职业发展有所限制，考虑之后便决定离开这家对我很好的公司，之后便一直在电商平台做视觉设计师。
2016年年底，一个很偶然的机会，人民邮电出版社的编辑找到我，问我愿不愿意写一本关于电商设计类的教程。当时我考虑了许久，迟迟不敢回复。自己虽然有定期总结的习惯，但是从未写过书，也不自信。后来有幸与本书的另一位作者王冬（站酷ID：蒸个馒头；银泰网视觉主管）一起编写，就接受了这个对我来说蛮大的挑战。
起初，我对于写书并没有系统性的认识和研究，在写作过程中才发现之前零散的总结并不算是总结，充其量只能说是一种灵感的记录罢了。就拿目录来说，也是与编辑反复沟通后敲定的，之后才开始写具体内容。
在编写本书之前，大多数从平面设计转到电商设计的朋友，对于平面和电商这两者之间在设计表现层面的区别存在诸多疑惑。所以，我们就以四大块内容展开讲解，从电商设计的发展到设计观点，再结合大量的实战案例来阐述电商设计中所需要的各种设计思维、设计方法和技巧。通过日常实战中积累的经验和对于电商这个以活动带动销售、以营销加深品牌曝光度的设计类别的理解，总结出了一些实用且高效的方法。
总之，我觉得电商设计可以说是平面设计和网页设计的一个分支，它既继承了平面设计的设计理论，又与平面设计有不同之处。无论是设计意图、展示方式还是设计方法都有所不同。
最后，希望能在我们老去的时候，拿起这本书时都有一份沉甸甸的回忆。
吴海龙
Resources and Support
本书由数艺社出品，“数艺社”社区平台（www.shuyishe.com）为您提供后续服务。
配套资源
实例文件
素材文件
资源获取请扫码
“数艺社”社区平台，为艺术设计从业者提供专业的教育产品。
与我们联系
我们的联系邮箱是 szys@ptpress.com.cn。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名及ISBN，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学课程，或者参与技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到“数艺社”社区平台在线投稿（直接访问 www.shuyishe.com 即可）。如果学校、培训机构或企业想批量购买本书或数艺社出版的其他图书，也可以发邮件联系我们。
如果您在网上发现针对数艺社出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
关于数艺社
人民邮电出版社有限公司旗下品牌“数艺社”，专注于专业艺术设计类图书出版，为艺术设计从业者提供专业的图书、U书、课程等教育产品。出版领域涉及平面、三维、影视、摄影与后期等数字艺术门类，字体设计、品牌设计、色彩设计等设计理论与应用门类，UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类，环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺社”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。
Recommend
这是一本从分析需求、整理灵感到实际案例展示的图书。本书为从事电商设计的新人提供了真实且可复用的工作技巧。
站酷网主编纪晓亮
海龙一直是优设网的专栏作者，这本书是他从事电商设计多年的经验合集，包括大量不同风格的设计方法和实战案例，非常适合新人阅读学习。
优设网主编程远
海龙是许多年前我刚接触电商时就认识的一位设计师，当时他就已经在个人网站上收集和分享了国内外许多优秀的设计类文章，我也或多或少地从一些文章里得到了营养，以至于在第一次见面之前误以为海龙是比我大很多的长者。多年以后的他已经成长为一位资深的电商行业设计理论研究者和践行者。
这本书的许多内容视角独特，很有启发性，想“充电”的读者赶紧入手吧。
前凡客V+、民生电商设计总监，“视享集”创始人王文辉
我跟海龙是朋友，当得知海龙有出书的想法时，我看到的是他对于设计的热爱及投入的程度依然不减，也看到了他在设计领域取得的成绩。这是一本有良心、有温度的书，无论对于刚刚踏入设计领域的小白还是从事设计工作许久的设计师，都是一本非常重要的参考书。
实际上，读过本书的人都能够从书中有所收获。
酒仙网视觉设计部总监句春亮
我与海龙第一次见面是2011年原研哉的北京展览，回忆起来已有9年光景。他在这一路的自学中形成了一套对于视觉设计的认识。现在总结成文，与热爱设计、从事设计的你一同分享他的理论支撑和实际项目创意与执行的思考过程，这是一本值得入手的图书。
三人形思企划设计总监胡思
海龙是国内为数不多的极具责任感的设计交流者和分享者。他总能从一些不一样的角度切入、剖析、解决设计上的疑难杂症。授人以鱼不如授人以渔，非常开心能看到他把自己的经验编著成书，与更多的设计者分享。好书，不容错过。
山岩文化传媒创始人，站酷推荐设计师山岩
王冬是我在银泰时的同事，他是我工作10年来遇到的极少数在设计上真正有想法的人。他不仅在设计上有着非常深厚的功力，在公司内的人缘也非常好。前阵子他对我说准备出一本电商设计方面的书，我并没有在意；但当他把书的内容整理好发给我后，我才发现这本书的内容非常细致，条理清晰，简单易懂，图文解说的方式让人更易读懂，特别适合正在从事电商设计和准备从事设计的读者阅读。如果你负责的是电商运营或电商产品，也推荐你读一读，我相信读完之后大家都会有不一样的收获，对设计会有新的理解。
原银泰网设计总监，“我的医药网”UI设计总监石媛媛
“电商设计”这个词语既让我感觉有点陌生，又让我充满回忆！为什么感觉到陌生呢？最近我在公司招聘的过程中发现两个特点：求职的人员大多是“90后”；有些比较浮躁。在面试的过程中，我不知道他们做电商设计最后是为了能做什么。能做到品牌？能做到上游供应链？其实我觉得他们还需要沉淀下来做到向上和向下的延展。所以，让我感觉真的很陌生，害怕他们做不到、做不好。而为什么又让我充满回忆？因为我算是一个电商的“老兵”了，这么多年的经历给我留下了很多的回忆。不管是自己管理品牌还是运营渠道，电商设计都需要融入两个维度，那就是品牌和产品。只有你理解这个，才能更好地呵护和服务于“他”。电商设计不光是色彩和布局的变化，还需要做用户和产品的连接，懂得用最佳的视觉表现把产品和品牌表达出来。这样的一本书希望对新一代电商设计师、拼搏在一线的年轻设计师有所帮助。回到我想对你们说的：不要浮躁，坚持释放自己喜欢的东西！加油！
电商老兵刘宁 je RRy.Lee
电商设计作为一个新兴的设计门类，在现在的互联网社会中占据着非常重要的地位。但作为设计的一个门类，究其根源它是从平面设计发展而来的。而现在的平面设计包括了很多分支，例如，书籍设计、包装设计、网页设计、电商设计，甚至UI设计也离不开平面设计的基础理论。下面我们就来分别谈谈它们的区别。
平面设计也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，通过多种方式来创造和结合符号、图片、文字，借此做出用来传达想法或信息的视觉表现。平面设计主要包括VI企业形象设计、书籍装帧设计、平面广告设计、海报设计和包装设计等，如图1-1所示。就业趋向：报纸、杂志、图书等大众传播媒体和广告公司等相关行业。其中VI、广告、包装是平面设计最主要的几个分类，也是应用最为广泛的领域。
图1-2所示是书籍装帧设计的效果展示。其实，作为平面设计师需要懂得的知识和网页设计师不太一样，其中最主要的区别是要懂得印刷知识，包括纸张的种类和特性、油墨印刷的方式和特种印刷的种类等。因此，平面设计师在完成设计后往往需要去印刷厂与印刷人员当面沟通，尤其是选纸和小样校色的时候。由于印刷品出来后不可修改的特性，设计师必须反复检查设计稿和印刷小样。
图1-3所示是包装设计的效果展示。在软件的使用上，平面设计师也与网页设计师和电商设计师不同，最常用的软件是Photoshop、Illustrator和Corel DRAW（一般来说，这两种矢量软件北方用Illustrator的居多，南方用Corel DRAW的居多。但是随着Adobe公司的发展，现在越来越多的设计师开始用Illustrator，主要还是因为Illustrator与Photoshop的兼容性和稳定性是Corel DRAW替代不了的），除此之外，还需要熟悉排版软件In Design，这个软件学起来非常简单，也很专业，如果是画册或图书的排版，它是再合适不过的了。
平面设计已经发展了400多年（不只是做名片和宣传册），所有电商设计能用到的技术、理念、方法其实就是平面设计中的一小部分，所以，把电商设计当成平面设计的一个应用方向，就会有无限放大的可能。掌握好平面设计基础，会发现电商设计中每次用到的排版方式、字体、颜色和布局在茫茫平面设计史中都能找到源头。
图1-4所示是网页设计的效果展示。网页设计的涉及范围非常广，包括Web设计、App设计、界面设计和交互设计等。最开始的互联网设计大多局限于企业官方网站的业务宣传和品牌宣传，随着大平台装修后台越来越开放和品牌商城、App之类自营平台的发展，互联网技术会更加融入电商。
网页设计是技术与艺术的紧密结合，具体表现在以下几个方面。
1.交互性与持续性
即时的交互性是Web成为热点的主要原因，是网页不同于传统媒体之处，也是网页设计时必须考虑的问题。
2.多维性
多维性主要体现在网页设计中对导航的设计上。由于超级链接的呈现，多维性源于超级链接，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。
3.媒体的综合性
随着网络宽带的增加、芯片处置速度的提高及跨平台的多媒体文件格式的推广，目前网页中使用的多媒体视听元素主要有文字、图片、声音和视频等。
4.版式的灵活性
随着技术的发展，响应式的网页逐渐增多，这也为设计师的排版和交互设计提供了新的思路，如图1-5和图1-6所示。
网页设计师不仅需要了解设计的相关知识，还需要了解前端类的知识。例如，页面布局、DIV、CSS和H5等，这些知识看似与设计没什么关系，但是了解它们对设计师的工作会有非常大的帮助。而页面的交互设计更需要设计师对前端知识有所了解。当然，如果你是一个纯粹的视觉设计师，可以不用掌握这些知识，但是必须了解。从软件上看，除了Photoshop、Illustrator，还需要掌握Dreamweaver和Flash的使用。
电商设计是UI（User Interface）设计中的一个分支，它是传统平面设计和网页设计的结合体，是具有互联网属性的设计，是互联网时代的产物。它最大的特点就是“快”，这也是电商设计与平面设计最大的区别。例如，平面设计中完成地产公司的一个广告设计时间需要3～6个月，而电商的专题页面设计时间是7天，最长时间是14天，更新频率非常快，一些专题页面如图1-7和图1-8所示。
电商设计主要分为网站及详情页设计、活动专题页面设计和Banner设计。这样的结构也与平面设计和网页设计不同，因为电商设计的主要目的就是“卖产品”，而让客户更加清晰地看到商品细节和尽可能多地浏览网站商品，尽可能长时间地让客户停留观看才是电商设计的最终目的。电商设计的另一个特色就是“快、准、狠”，按传统的平面设计的思考过程肯定来不及，其商业目标单一明确，产品促销成为重点，兼顾品牌，表现需要更加直白和更强的冲击力。专题页面设计如图1-9所示，Banner设计如图1-10所示。
电商设计也应该随着互联网的发展而有新的突破，不能只停留于单一画面内的技术，可以放眼到整个网页、整个店铺、购物体验等的设计。从早期的Flash到响应式设计、动效设计，计算机的技术创新使设计更加生动有趣、富有创意，整个购物体验也会更加丰富友好。所以，电商设计如果跟上互联网技术的步伐，也会有无限的可能。响应式网页设计如图1-11所示。
如果设计师认为他的设计很完美，那并不是因为没有什么可添加的了，而是没有什么可减少了。
——Antoine de Saint-Exupery
单页化的设计，顾名思义可简单地将其比喻为一页纸的设计。单页化的页面存在于平面设计和网页设计中，平面设计中的单页设计，是指在纸的正反面上设计，主要用于折页、宣传单的场合中。专题中的单页设计，更像是平面设计中单页的翻版，只不过它可以加入跳转、视差滚动、H5动态效果设计等。相对于整体网站页面来说，单页化的页面设计在结构上比较简单、链接深度最多不超过两层。它的用途主要有专题活动页、店铺首页形象、产品介绍页。
1.纸媒单页与网页单页的区别
提起单页设计，不得不说其在线下纸媒中的样子，像折页、卡片、宣传单等的设计，都是充分利用了材质的可感知性让设计有了触觉，通过另类的工艺处理有效地发挥设计创意。而网页媒体中的单页设计更多的是用于发挥促销的直接性，提升平台的整体形象，通过利用新技术，如视差滚动、动效设计等，让网页的单页设计的可表现形式更为多样化。纸媒中的单页设计是利用仅有的单张纸的正反面去进行设计的表现，网页中的单页设计是利用大小的屏幕空间去进行需求的表现。如图1-12所示，左图为网页单页，右图为海报单页。
2.单页化设计的优势
网页单页设计的好处有很多，一是能快速地让访客直观地看到要传达的内容，无须频繁跳转页面进行浏览；二是没有庞杂的导航菜单和子菜单，所有内容都可在一页上呈现。制作成本少，效率高，比较适用于信息量中等的页面设计。
3.单页设计的四大趋势
»大图加大字
随着现在扁平设计趋势的蔓延，电商设计也更趋向于平面版式中的风格。大图加上大字的设计形式，已然成了一种扁平化极简的表达——让传达的产品和文案更直接，第一时间让图片去说话，让文字去发声，如图1-13所示。
»固定尺寸内的视差滚动
在单页的设计中，页面的呈现形式并非传统式的垂直或者水平滚动浏览，它可以利用视差滚动、H5+CSS技术，充分把页面内容更灵活地展示出来，让用户通过与鼠标交互的过程，慢慢地消化单页中信息。
»充满创意的布局
在网页的单页化设计中，形式可以多种多样，因单页化设计更偏向于平面媒体中的海报、单折页等的视觉表现，所以，在专题的单页中，版式的尝试可以灵活多变，如图1-14所示。
»单页的多样性与平台的整体性
虽然说单页的设计在形式上可以不拘一格，但是单页的专题是寄存在整体平台、店铺和网站中的，所以，在设计时要站在平台调性的大背景中去进行单页的设计，如图1-15所示。
提示
这里提到的单页化设计并不是新的设计趋势，只不过笔者在设计整理中更倾向于把如专题页、活动页、店铺首页这一类设计统称为单页化的页面设计。它的设计感还是存在于对基本的点线面和色彩的理解中的，它更像是平面中的海报设计或者宣传单页的设计形式，都是为主题和需求而服务，也更像是一种设计的“快消品”。
扁平化设计是相对于拟物化设计（Skeuomorphic Design）而提出的。拟物化的用户界面设计看起来就像是真实的物体，如图1-16所示，在用户界面中能反映出真实世界中音频压缩器的外观和功能。在初期，这样的设计可以让人们更快地接受和明白设计的用途。
拟物化设计起始于20世纪80年代，其初衷是帮助用户从真实世界向计算机界面平滑过渡。直到最近，作为拟物化设计忠实的拥护者，苹果公司把这种设计理念运用在了公司所有用户界面和界面设计指南中。从i OS 7开始全部换成扁平化设计，尽管当时有很多人批评。苹果公司的拟物化设计与扁平化设计的对比如图1-17所示。
其实笔者认为扁平化设计是设计发展的必然规律，就如几千年来文字的发展。最初人们用图画文字（象形字）来记录，这是一种最原始的造字方法，把想要表达的物体的外形特征描绘出来，慢慢地演化到繁体，再到现在的简体。现在的扁平化设计也正在遵循这样一个从繁到简的发展规律，从写实拟物到抽象扁平。
1.扁平化设计的三大特点
»做减法
同样是镜头的设计，在扁平化中去除了渐变、阴影、质感等修饰手法，仅用简单的形体来表达，显得干净利落。做减法这一步应该是最容易的，如图1-18所示。
因为扁平化设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观地了解每个元素的作用及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕尺寸的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净、整齐，使用起来格外简单。
»精致的颜色
扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调，例如，其他设计最多只包含两三种主要颜色，但是扁平化设计平均会使用6～8种。而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理（最受欢迎的颜色是纯色和二次色），另外还有一些颜色也比较受欢迎，如复古色（浅橙、紫色、绿色、蓝色等），如图1-19～图1-21所示。
»极简的排版
由于扁平化设计使用的是特别简单的元素，排版就成了很重要的一环，排版的好坏直接影响视觉效果，甚至可能间接影响用户体验。
字体是排版中很重要的一部分，它和其他元素相辅相成。想想看，一款花体字在扁平化的界面中是非常突兀的。图1-22～图1-24所示是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大，分支众多，其中有些字体会在特殊的情景下产生意想不到的效果，但注意，过犹不及，不要使用那些极为生僻的字体，不能因为字体的新奇而影响了信息的传达。
2.扁平化设计的未来
作为一名普通的设计师，可能不能去预测乃至引导设计的趋势和方向，但可以从设计的发展史中找到一些答案。建筑设计和平面设计作为设计的分支，都经历过类似从拟物化设计到扁平化设计的发展，也许可以为我们提供一些参考。
用版式设计来举例，版式设计的发展大概分为5个阶段。
第1阶段：基本没有排版的概念，只需要字排列整齐、方便阅读即可。
第2阶段：这时候已经有图文绕排的概念，也有了装饰的尝试。
第3阶段：华丽装饰达到极致，无论是文字还是配图都非常精致，甚至一个句号都装饰得相当华丽。
第4阶段：网格法排版出现，人们察觉到内容才是根本，设计或排版是为内容服务的，所有的装饰性元素统统被去掉，图案变得扁平，跟Metro的想法一样，用内容装饰内容是这个时期的一大特点。
第5阶段：人们对千篇一律的简洁设计感到乏味，版式设计向着多元的方向发展，既有简洁、以内容为中心的版式设计，也有华丽装饰、渲染气氛的版式设计出现。版式设计完全取决于需求方的需求。
从版式设计的发展史来看，现在的扁平风格大概属于第4个阶段，而网页设计或UI设计将会像版式设计一样，向多元的方向发展，也就是第5个阶段。市场上既会有简洁、扁平化的风格，又会有拟物、精致的风格，以及更多意想不到的风格出现。每一种风格都会有自己的市场，每个人都能在市场上找到符合自己审美和习惯的风格，这种多元化的萌芽已经开始出现，例如，锤子手机，如图1-25所示。
联网领域的加速效应如今正在颠覆着传统的互联网 PC 端电商，正如此前 PC 端电商领域对线下传统贸易的颠覆一样，如今的移动互联网正在以前所未有的速度改变着人们的购物和生活体验。2018 年“双 11”的购物狂欢中，主要电商除了在“双 11”上架商品和商户开发力度上不断加大之外，还在无线端进行了充分的资源匹配和市场预热。
无线领域的购物狂欢，已然在多次“双 11”中得到了印证。2018年的天猫双11的最终成交额锁定在2135亿元，首次突破2000亿大关，相比2017年增长约27%。相比于2009年的5200万元成交额，增长超过4100倍。
“双 11”购物狂欢节在移动端交易占比 93.6%，如图 1-26 所示。
可见，移动端购物和支付体验的蔓延，成了如今电商化转型和开拓新网购入口的主流趋势。
为什么移动端的购物这几年发展这么迅速，甚至比传统的电商 PC 端购物颠覆线下的商品交易的速度还快？ 2015 年主要的两个平台天猫和京东在“双 11”期间移动端的购物比例都在 50%以上，而2018年则增加到90%以上，这说明越是在购物的集中爆发期，用户在购物渠道的选择上更青睐移动端的渠道，如图 1-27所示。
之所以会出现这种现象，有以下几个原因。
原因 1：移动端更便于支付。
原因 2：各大电商的有意引导。
原因 3：线下的可接入网络 Wi-Fi，以及便捷的上网区域的增多。
对于电商设计师来说又有哪些需要了解的呢？
其实移动端产品最难的地方是要在小屏幕上展示出所有的业务。虽然现在的大屏幕手机比比皆是，但是还是与 Web 端有着很大的不同，屏幕限制，加上移动端的客户碎片化阅读的习惯和高流失率，特别是电商类
App 更难展示出来，所以，才会有像列表式的 icon 展示方式。但是电商的标准配置的首页都会将Banner 保留下来，因为它是运营推广最重要的手段之一，而电商 App 是要展示内容最多的，也是最难做的一类 App。既要保证业务首页展示的完整性，还要保证用户体验，所以，在进行每一个页面设计时都要讲究一些技巧和思考维度。
1.首屏页面需要展示的内容
»Banner
因为电商促销活动是拉动消费的最大动力，而Banner 是很好展示活动页面的地方，几个 Banner就能牢牢抓住用户追求便宜的心理，如图 1-28 所示。
»1～2排的icon分类
这与Web端的分类类目列表作用一样，起到了让用户知道你卖哪些东西和提供哪些服务的作用。当然像淘宝和京东这类的就是一个大业务，而小电商网站的icon往往是一个分类，如图1-29所示。
»流量品
有了流量品才有了盈利品一说，大量流量进入App，才会产生盈利。之后往下的页面都是超出一个屏幕的，用来对每个细分类别中最好的商品进行展示，用大量的品类和优惠价格吸引用户进入并进行消费，如图1-30所示。
设计思路：
①从上往下通过Banner活动拉动流量（产品拉新活跃用户，让用户进来），展示全部服务类别（用户知道产品有哪些商品和服务）。
②秒杀用流量品带动购买量（让用户知道该商品和服务在我这里很便宜）。
③首屏后的页面展示各大类别（方便用户进入沉浸式浏览方式）。
2.底部导航栏的展示
底部导航一般分为4～5栏。电商最基本的底部导航栏设置是首页、分类、购物车、我的页面，如图1-31所示。底部导航这样安排的用意如下。
»首页
首页的作用是告诉用户我们是卖什么的，用户可以在我这里得到什么，然后通过第2～6屏幕的浏览，让用户彻底明白这里能买到什么，顺便让用户进入心智模型里，彻底进行逛街浏览的行为。
»分类页
用户已经知道是卖什么的了，他就要找自己最需要的东西了。分类页面起到搜索的作用，但这里的搜索与首页顶部的搜索框不一样。因为分类的搜索带有比价心理和一定的不确定性，但是却是让用户导流进入到商品页面最好且更直接的方式。
»购物车
作为电商现在最基本的Tab类目，当用户把想要买的东西都加入购物车的时候，符合用户在逛超市时想要付钱的心理。购物车不仅起到提示用户想要购买的心理，也不断提醒用户要付钱的过程。
»我的页面
“我的页面”起到个人后台的作用，管理自己购物后的一系列状态，所以，整个Tab底部导航从左到右的安排就是用户购买过程的一个心理写照。
3.设计上的差异
如图1-32所示，当前的设计手法在各个平台、各种形态上都有融合的趋势，在Web端的设计也越来越客户端化，因此，在设计手法上的差异会越来越小。
然而，基于PC、Pad、i Phone的设备特性有较大的差异，PC的指点操作与Pad、i Phone的触摸操作有很大的不同，触摸优先的设计原则对移动端的设计有较大的帮助。用户的设备的性能和网络特征千差万别，在设计时需要思考各个用户使用的环境，例如，现在Android和i OS两大主流操作系统。多设备用户在使用产品时，怎样进行设备间的切换，如何衔接不同设备的操作而不被丢弃都是设计师需要考虑的问题。
从PC端到移动端的Web设计，响应式设计是提得最多的方法。响应式的设计在一淘网、淘宝搜索等许多产品上都有实践，对用户体验起到了积极的作用。然而，我们看到的响应式做得好的网站往往是结构相对简单的博客类、新闻类网站，这些网站页面结构简单，响应规则容易定制，前端实现也不复杂。而对于复杂的网页的响应式设计，则会遇到不少挑战。
最后，移动互联网的时代已经来临，移动用户的体量也会逐渐超越PC端，在进行产品设计时，思考移动平台是必然的，如何能进行更好的全平台设计，还有待业内人士更多地探讨。记得几年前，笔者非常信奉移动端的产品应该是PC端的补充，现在看来完全不靠谱，像微信这样的产品，PC端的设计纯粹是移动端的补充，更多产品则根本没有PC端的产品。因此，如何能进行全平台的设计，也需要根据各自的产品特征、用户特征、情景特征来决定，最大限度地发挥产品的核心价值给目标用户，这就成功了。
