九零设计 90%设计师不知道的电商设计技巧

写在前面

六年前，我深入电商设计圈；

6年后淡出电商设计圈；

仔细想想，在电商行业从自学到现在，越是基础的内容越容易被忽略。下面提到的知识点并不是匆忙整理出来的，而是在工作中从无知到了解的记录。

有一些基本点和重点，分几个时期给大家梳理一下。

也是对自己的总结，而且是零！

“本文使用的案例均来自银泰。com设计团队”

感谢Yintai.com所有同事对我的帮助，马里奥，泽尚有风，元宝的爱，娜娜的支持，银泰的好朋友“大丰收”，银泰网对蒸馒头的帮助。

好了，今天我先从一技三艺说起；

01基本技术

重新设计第一个屏幕

这里说的第一个屏幕设计是指平台类的特殊表头或者店铺类的第一个屏幕

第一屏是什么？

第一屏，第一视觉设计！

第一屏是不用拖动滚动条就可以直接看到的位置；

第一屏是信息传递的起点；

第一屏是电子商务和平面设计的区别之一；

第一屏，是否精彩，直接关系到用户多停留一秒；

问题来了:第一屏怎么设计？

以下是关于第一屏设计的五条规则；

1点突出

第一屏不仅是亮点表达，更是从点到整体的区块设计；

第一屏的设计时间往往占我们整体设计时间的40%左右。如果不能一眼抓住用户的眼球，在用户的视觉上放一个记忆点，会直接降低用户对活动和店铺的印象。；

展示亮点的方法有:

1、小说复制和活动策划

2、设计紧跟现有流行设计潮流

3.以讲故事的方式销售商品和设计场景

两点钟卖

在第一个屏幕上，吸引用户的第二点是活动的强度。

在早期电子商务活动的规划中，关注折扣和争取价格是第一位的。

第一屏的主要功能是将标题和折扣信息合理的放在一个固定的高度，让用户在打开专题或店铺时第一眼就能看到信息。

展示卖点的方式如下

1.直接折扣

2.福利津贴

3、主要产品特点

3点指南

仅仅第一屏的视觉往往是不够的。在电子商务的视野中，整个设计工作并不是在第一屏完成后就完成了。

在常规需求中，更重要的项目被列出，重要的活动被呈现在第一个屏幕的下方。如何利用首屏的优势吸引眼球，通过视觉引导用户参与并找到感兴趣的活动或商品，使首屏设计更加有用。

绩效指导的方法如下

1、元素有明确的向下导向

2.关键活动暴露在一个屏幕和两个屏幕之间

回顾第一个屏幕设计的基本要点

1看整体

一看到重要信息

3体现页面整体风格

4不仅第一屏

这一步非常重要

1.第一屏是对整个页面空的合理使用，对整个活动信息的直观呈现；

第一个屏幕，第一个目的是突出活动。

3屏，你不能抱着完成第一屏设计就完成所有设计的心态去思考；

4高安全性

第一屏高度的具体值不是一成不变的。第一屏高度的定义只是为主要信息画一个安全框，用来保证用户打开页面时首先看到的信息完整、直接。

第一屏的高度值是“减去”现有主流用户电脑设备分辨率下的浏览器环境大小。

为此，我专门在百度上搜索了一个广告公司AdDuplex的大数据统计，以及百度流量研究所的分辨率使用情况。下图

来自:广告公司AdDuplex大数据显示

http://diy.pconline.com.cn/886/8861940.html

1920x1080分辨率

第一个屏幕高度计算公式

1366x768分辨率

第一个屏幕高度计算公式

最后的结论是:

第一屏高度必须控制在450-760以内！

这一步非常重要

1第一屏，高度不死，可以根据不同的设计需求和活动灵活调整；

2第一屏，最基本的规律:重要信息必须在视觉安全的高度以内；

3第一屏，确保设计时主要信息一目了然；

5有效宽度

上面说的是第一屏的高度对主要信息的影响。先说第一个屏幕宽度超出设计宽度的范围。

下面是我一直在问的两个问题，关于第一屏之外的过度设计和整体主题内容区？

第一，高质感、复杂背景设计的c4d是否以牺牲用户打开速度为目的？

第二:设计师是否忽视了小屏幕用户在“自大屏幕模式”电脑中的浏览和购买体验？

如上图所示:

990-1100的宽度是主要的视觉元素和标题，因为这么宽的位置，描绘主体后还有很大的可用空间；

1100-1440的宽度用来支撑大气的元素，比如:放各种飞的产品或者球等。；

1440-1920的宽度是可选元素，用来从主视野延伸或者表达细节；对于这部分的表现，属于最后一个需要完善的地方，中心还在主视觉区的刻画中；

这一步非常重要:

1.页面安全区域不合理，会严重影响用户的打开速度；

2有些背景设计没用；

其中，上面提到的是对电商视觉中专题或店铺首页的首屏设计的特点和尺寸依据的总结，并没有深入到如何做首屏设计的理论。

至于第一屏设计的方法和理论，其实如果只看第一屏，就可以理解为某个类别和活动的横幅设计，可以参考横幅图的一些设计方法。

比如詹Ku沈达山彦和詹Ku沈达骨哥总结的一些理论，可以快速运用。

《不沉的骨头》

横幅设计三部曲

http://www.zcool.com.cn/article/ZMzgxNzUy.html

解锁5种商品摆放姿势

http://www.zcool.com.cn/article/ZNDIzMzM2.html

《山石》

摇滚ps演讲厅-第25颗炸弹

http://www.zcool.com.cn/article/ZNDg2MTY4.html

摇滚ps方法技能讲堂-第十六颗炸弹

http://www.zcool.com.cn/article/ZMTQyNDky.html

但如果你做的是整体主题视觉，那只是整个页面视觉的一小部分，主要是基于整体完成和视觉连贯。

在分享了一个基本技术之后，让我们分享一些我们在做电子商务愿景时经常遇到的细节

02基本技能

1“工具”很重要

这里的工具不是指你用的软件。我觉得软件的熟练度和技巧是每个设计师都应该掌握的硬实力。

这里说的工具是软实力，指的是开始使用Ps之前需求的沟通——理解——和时机；

明确需求时间

经过面对面和操作上的沟通，了解了总体需求，看到框架后，应该对自己的工作量有所了解。在电子商务行业，三天内完成一项中型或大型活动是一种普遍的需求。所以，如何准确找到需求点，在规定时间内专心做好，其实是很训练的。

常用技能有:

1有活动需求的时候，做沟通。如果前期需求方给你一个框架图，那么你可以在和需求方沟通之前准备一些适合这个案例或者风格的参考图片，和需求方见面；

2在初步确认没有问题后，根据需求的大小，根据你当时大脑的状态，把你的时间调整到相应的模式；比如你第一次看到这种需求，灵感涌现，那么你就可以把握这种感觉，在一天左右的时间内快速完成初稿和总论。然后你可以适当休息一下，想想下一步该怎么做。

这一步非常重要

它的重要性是让你在特定的时间内有所提高。当然，越是准确的了解需求，花的时间就越少。

明确的时间不是用来困住你，而是让你更高效的解决问题。这个问题既是需求，也是集中考虑。

2长图要破

电商需求少至3000px以上，多至10000+的高度是常见的。对于普通或中型电脑来说，卡死或无法保存，或者需要1分钟才能打开是常见问题之一。

如果考虑分工协作的修改，分工协作是满足一个平台型大型活动页面设计要求不可或缺的方式。

常用技能有:

1有利于文件划分，但文件中图层组的划分也很重要。移除冗余图层或合并/栅格一些图层后，不仅可以快速找到相应的图层，还可以减小文件大小。文件小的话打开速度会更快，相应的效率也会提高，不用担心等着打开文件。

2文件中不同的入口设计是不同的。比如:活动入口和单品推荐的设计肯定不一样。前者要根据整体风格来表现，一般以色彩结合文字和文案的形式出现；后者主要是卖货，可以明确告诉用户价格和名称。

这一步非常重要

拆分文档并不意味着每个文档中的设计元素和样式是相互分离的，而是一种提高效率和协作的工作技能。如果把需求分配给不同的设计师去设计，那么在早期的内部风格设计中，元素设计一定要有规范和模板，一定要有共享元素。最后，单独的文档将合并为一个整体。

3模拟在线效果

为了让需求方更好的想象设计稿后期上线的效果，包括其在浏览器、界面、不同设备上的假设，我们有必要在完成设计后，将设计稿植入到整体环境中进行细节调整。

比如你做的是一个专题的弹出窗口，如果你一个人做，也没问题。但你可能与整体主题视野不同。这时候就要把设计稿植入整体，统一起来。

常用技能有:

1.将首页设计稿放入一个完整的截图，附带进行整体预览；

2在完整的设计稿中放入一个弹出元素进行预览；

这一步非常重要

线上模拟的效果是让需求方更清晰的想象上线后的真实效果，同时可以更好的查看整个设计；