![电商设计技巧修炼与实战应用(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/24/30654024/b_30654024.jpg)
第1章 浅谈电商设计
1.1 电商设计与平面、网页设计的区别
电商设计作为一个新兴的设计门类,在现在的互联网社会中占据着非常重要的地位。但作为设计的一个门类,究其根源它是从平面设计发展而来的。而现在的平面设计包括了很多分支,例如,书籍设计、包装设计、网页设计、电商设计,甚至UI设计也离不开平面设计的基础理论。下面我们就来分别谈谈它们的区别。
1.1.1 平面设计
平面设计也称为视觉传达设计,是以“视觉”作为沟通和表现的方式,通过多种方式来创造和结合符号、图片、文字,借此做出用来传达想法或信息的视觉表现。平面设计主要包括VI企业形象设计、书籍装帧设计、平面广告设计、海报设计和包装设计等,如图1-1所示。就业趋向:报纸、杂志、图书等大众传播媒体和广告公司等相关行业。其中VI、广告、包装是平面设计最主要的几个分类,也是应用最为广泛的领域。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0016-0016.jpg?sign=1739286212-OLieUv55OCx33A3YPviJYzDKq7eKgJOT-0-a66c14c8efbde74901c778b5c8d4eec9)
图1-1
图1-2所示是书籍装帧设计的效果展示。其实,作为平面设计师需要懂得的知识和网页设计师不太一样,其中最主要的区别是要懂得印刷知识,包括纸张的种类和特性、油墨印刷的方式和特种印刷的种类等。因此,平面设计师在完成设计后往往需要去印刷厂与印刷人员当面沟通,尤其是选纸和小样校色的时候。由于印刷品出来后不可修改的特性,设计师必须反复检查设计稿和印刷小样。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0016-0017.jpg?sign=1739286212-FKe6NlEQ1pW9ACZw3OTmyVbnlXomiHdG-0-8007c863f7b7cc4fec031f88817cddf0)
图1-2
图1-3所示是包装设计的效果展示。在软件的使用上,平面设计师也与网页设计师和电商设计师不同,最常用的软件是Photoshop、Illustrator和Corel DRAW(一般来说,这两种矢量软件北方用Illustrator的居多,南方用Corel DRAW的居多。但是随着Adobe公司的发展,现在越来越多的设计师开始用Illustrator,主要还是因为Illustrator与Photoshop的兼容性和稳定性是Corel DRAW替代不了的),除此之外,还需要熟悉排版软件In Design,这个软件学起来非常简单,也很专业,如果是画册或图书的排版,它是再合适不过的了。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0017-0018.jpg?sign=1739286212-4fPLTstmkhRbhkc9B8UmvpUjjyxJw79H-0-fa93fb50218b45db2c0a16de9a91fc6b)
图1-3
平面设计已经发展了400多年(不只是做名片和宣传册),所有电商设计能用到的技术、理念、方法其实就是平面设计中的一小部分,所以,把电商设计当成平面设计的一个应用方向,就会有无限放大的可能。掌握好平面设计基础,会发现电商设计中每次用到的排版方式、字体、颜色和布局在茫茫平面设计史中都能找到源头。
1.1.2 网页设计
图1-4所示是网页设计的效果展示。网页设计的涉及范围非常广,包括Web设计、App设计、界面设计和交互设计等。最开始的互联网设计大多局限于企业官方网站的业务宣传和品牌宣传,随着大平台装修后台越来越开放和品牌商城、App之类自营平台的发展,互联网技术会更加融入电商。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0017-0019.jpg?sign=1739286212-hAtPLLJmNaB2HqcesVWxPAwCsODwnvzr-0-59789a48ca843409b7bfc995904421ef)
图1-4
网页设计是技术与艺术的紧密结合,具体表现在以下几个方面。
1.交互性与持续性
即时的交互性是Web成为热点的主要原因,是网页不同于传统媒体之处,也是网页设计时必须考虑的问题。
2.多维性
多维性主要体现在网页设计中对导航的设计上。由于超级链接的呈现,多维性源于超级链接,网页的组织结构更加丰富,浏览者可以在各种主题之间自由跳转,从而打破了以前人们接收信息的线性方式。
3.媒体的综合性
随着网络宽带的增加、芯片处置速度的提高及跨平台的多媒体文件格式的推广,目前网页中使用的多媒体视听元素主要有文字、图片、声音和视频等。
4.版式的灵活性
随着技术的发展,响应式的网页逐渐增多,这也为设计师的排版和交互设计提供了新的思路,如图1-5和图1-6所示。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0018-0020.jpg?sign=1739286212-xt7YQxgNDt67PYkbqK1jJWK9eAP41MSK-0-ca51ed21ee636f78934e556e188c8b08)
图1-5
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0018-0021.jpg?sign=1739286212-iUSACLMEkrrD5r6PYXTULKlFMSU8Cthn-0-9238bd365055e22c81cd9a5fb5f453cf)
图1-6
网页设计师不仅需要了解设计的相关知识,还需要了解前端类的知识。例如,页面布局、DIV、CSS和H5等,这些知识看似与设计没什么关系,但是了解它们对设计师的工作会有非常大的帮助。而页面的交互设计更需要设计师对前端知识有所了解。当然,如果你是一个纯粹的视觉设计师,可以不用掌握这些知识,但是必须了解。从软件上看,除了Photoshop、Illustrator,还需要掌握Dreamweaver和Flash的使用。
1.1.3 电商设计
电商设计是UI(User Interface)设计中的一个分支,它是传统平面设计和网页设计的结合体,是具有互联网属性的设计,是互联网时代的产物。它最大的特点就是“快”,这也是电商设计与平面设计最大的区别。例如,平面设计中完成地产公司的一个广告设计时间需要3~6个月,而电商的专题页面设计时间是7天,最长时间是14天,更新频率非常快,一些专题页面如图1-7和图1-8所示。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0019-0022.jpg?sign=1739286212-g4iaHqUqJVL5pmMDicb7Hna7K3MW8pyV-0-8c8f4e074d3a47f315cb781a4c9eba64)
图1-7
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0019-0023.jpg?sign=1739286212-QbIesSz85DToHIg3C9wJbLZ2hEjCwQFs-0-95241796641360ebb6497e16606e19fa)
图1-8
电商设计主要分为网站及详情页设计、活动专题页面设计和Banner设计。这样的结构也与平面设计和网页设计不同,因为电商设计的主要目的就是“卖产品”,而让客户更加清晰地看到商品细节和尽可能多地浏览网站商品,尽可能长时间地让客户停留观看才是电商设计的最终目的。电商设计的另一个特色就是“快、准、狠”,按传统的平面设计的思考过程肯定来不及,其商业目标单一明确,产品促销成为重点,兼顾品牌,表现需要更加直白和更强的冲击力。专题页面设计如图1-9所示,Banner设计如图1-10所示。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0019-0024.jpg?sign=1739286212-DNGNdJ9n9bCf02a5wpesZdtEN6Asjk46-0-f325e9b5559ed0c0c5f4780b9f352a4c)
图1-9
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0019-0025.jpg?sign=1739286212-YTZp4keHY3p03vC9l98oVJ70Gdk7YpOC-0-f59f085f690959a06ebacaf8590b9bf7)
图1-10
电商设计也应该随着互联网的发展而有新的突破,不能只停留于单一画面内的技术,可以放眼到整个网页、整个店铺、购物体验等的设计。从早期的Flash到响应式设计、动效设计,计算机的技术创新使设计更加生动有趣、富有创意,整个购物体验也会更加丰富友好。所以,电商设计如果跟上互联网技术的步伐,也会有无限的可能。响应式网页设计如图1-11所示。
![](https://epubservercos.yuewen.com/2C9630/16705100904013306/epubprivate/OEBPS/Images/figure-0019-0026.jpg?sign=1739286212-0sZdmK9DMhOwiULJ8rvczdcqo80jcgIp-0-12e576f2887547800ce0fac4d62ce04f)
图1-11