在电商行业浸淫多年后，我发现越是基础的内容越容易被忽略。今天，我将把过去6年的基本知识和要点整理给大家。
1. 基本技术
这里的首屏设计是指平台类专题头图或店铺类首屏
第一个屏幕是什么?
第一个屏幕，首先看视觉设计
第一个屏幕是您无需拖动滚动条即可直接看到的位置。
第一个屏幕是消息的起点
第一个屏幕是电子商务和平面设计的区别之一。
第一屏，是否精彩直接关系到用户的停留时间。
如何设计第一屏?
我整理了5条关于首屏设计的规则。
让它看起来不错
第一屏不仅是直截了当的高亮表达，更是从点到整体的块状设计;
第一个屏幕的设计时间通常占我们整体设计时间的40%左右。如果不能第一眼抓住用户的眼球，给用户一个视觉记忆点，就会直接降低用户对活动、对店铺的印象。
一些展示亮点的方法有:
1. 创意文案及活动策划
2. 设计跟上当前的时尚设计趋势
3. 以故事为基础设计销售场景
指出卖点:指出折扣
第一屏，第二点吸引用户:就是活动的强度。在早年的电商活动策划中，重折扣、拼价格仍是第一。
第一屏的主要功能是将标题和折扣信息放在合理的固定高度，让用户在打开主题或商店时，第一眼就能看到这些信息。
展示你的卖点的一些方法是:
1. 直接折扣
2. 福利待遇
3. 关注产品功能
提示点:提示下来，只有第一屏视觉往往是不够的，在电子商务视觉没有完成后第一屏的整体设计工作就完成了。
在常规需求中，第一屏往往是比较重要的单品列表和重要活动呈现在下面，利用第一屏(第一眼)的优势来吸引眼球，并通过视觉，引导用户参与发现感兴趣的活动或商品，这样的第一屏设计会更有用。
表示指导的方法有:
1. 元素有明显的向下方向
2. 关键活动从屏幕1公开到屏幕2
回顾第一屏设计的基本要点
看到所有
重要信息一目了然
页面整体风格体现
不仅仅是第一个屏幕
简短的总结
第一个屏幕合理地利用了整个页面空间，直观地展示了整个活动信息。
第一个屏幕，第一个目的是突出显示事件。
第一屏不能认为第一屏设计的完成就已经完成了所有设计的心态。
高安全级别:第一个屏幕适合多大
第一屏高度的具体数值并不是不可变的，第一屏的高度定义只是为了给主要信息画一个安全框，用来保证用户在打开页面时第一眼看到的信息是完整、直接的。
第一个屏幕的高度值等于从当前主流用户的计算机设备分辨率中“减去”浏览器环境大小。
为此，我特意查阅了广告公司AdDuplex的大数据统计，以及百度流量研究院的分辨率使用情况。下图(两种分辨率仍是主流)
广告公司AdDuplex大数据显示(目前最主流的PC屏幕分辨率仍然是1366×768，而目前仍有近34%的设备在Win10系统下保持这一分辨率，只有27%以上的PC在全高清或更高)
1920 * 1080分辨率:
1366 * 768分辨率:
最后的结论是:
首先屏幕高度必须控制在450-760之间!
简介:
1. 第一屏高度不死角，可根据不同的设计需要和活动目的灵活调整。
2. 第一屏，最基本的规则是:重要信息必须在视觉安全高度之内。
3. 第一个屏幕的设计是为了确保主要信息一目了然。
在安全区的两侧:
以上就是第一屏高度对主要信息的影响，下面我们来谈谈第一屏宽度对于室外房间的设计宽度的发挥。
如上图所示，使用990-1100的宽度作为主要视觉元素和标题，对于如此宽的位置，在描绘主体之后仍然有大量的留白空间可以使用。
宽度1100-1440要做一些辅助，用来烘托气氛的元素，比如:现在流行放各种飞行球等等。
1440 - 1920之间的宽度为可选元素，用于从主视觉延伸，或用于细节表达;对于这部分的表现，属于最后一个有待提高的地方，中心还在主要视觉区域的刻画上。
以上是对电商视觉中主题或店铺第一屏设计的特点和大小依据的总结，但如果是做整体的主题视觉，那只是整个页面视觉中的一小部分，更多的是基于整体的完成度和视觉的连贯性。
在分享了基本的技术之后，让我们分享一些在电子商务视觉中经常遇到的细节:
两个。基本技能
明确需求时间
经过面对面和业务沟通，了解一般需求和看到框架后，您应该对您的工作量有一个概念。在电子商务行业，往往需要在3天内完成一项大中型活动，所以在规定的时间内，如何准确地找到需求点，集中精力做好，其实是真正锻炼人的事情。
常见的技巧:
1. 当需要活动时，坐下来交流。如果前期需求方给你一个框架图，那么在与需求方沟通之前，你可以准备一些适合案例或风格的参考图片，满足需求方的需求。
2. 在初步确认没有问题后，根据需求的大小和当时大脑的状态，将自己的时间调整到相应的模式。例如:当你第一眼看到需要的时候，灵感泉涌，然后你抓住这种感觉，在一天左右的时间里迅速完成初稿和大致的作文。然后你可以休息一下，想想下一步要做什么。
简短的总结
它的重要性在于允许你在特定的时间内提高。当然，您对需求的理解越准确。你花的时间越少。
清晰的时间不是为了困住你，而是为了让你能更有效地解决问题，这既是一种需要，也是一种集中注意力的意思。
长图纸应该折断
电子商务需求小于3000px，大于10000+的高度，是很常见的事情，对于一般或中等配置的电脑来说，卡死或无法保存或打开1分钟的现象是常见的问题之一。
对于平台型大型活动页面的设计需求，分工合作是必不可少的方式。
常见的技巧:
1. 文件分区是一件好事，但是文件中层组的分区也很重要。通过删除多余的层，或者合并或整理一些层，您不仅可以快速找到合适的层，还可以减小文件的大小。
2. 文件中不同的入口设计也不同。比如活动入口和单品推荐的设计一定要有区别，前者是要根据整体风格来表达，多以色彩结合文字和文案的形式;后者是在销售商品的基础上，明确地告诉用户价格和名称。
简短的总结
拆分文件并不意味着每个文件中的设计元素和样式相互分离，而是一种提高效率和分工的工作技术。如果把需求分配给不同的设计师去设计，那么在早期的内部风格设计中，元素设计一定要有规范，有模板，一定要有共同的元素，最后让分开的文件，放在一起也是一个整体。
模拟在线效应
为了让需求方在后期更好地想象设计稿上线后的效果，包括其在浏览器、界面、不同设备上的预览效果，在我们完成设计后，有必要将设计稿植入到整体环境中进行详细调整。
例如，如果你正在做一个关于特定主题的弹出式广告，如果你是单独做的，那就没问题。但它可能与整体主题愿景有所不同。这时就要把设计稿植入到整体中去，统一起来。
常见的技巧:
1. 将主页设计放入全屏截图(浏览器环境和平台网站环境)进行整体预览。
2. 将弹出式元素放入完整的设计草稿中进行预览。
简短的总结
对上线效果的模拟是为了让需求方更清晰地预见上线后的真实效果，也能更好地查看整体设计。
