# 电商首页 / 大促活动页模块规范（首屏、优惠券/会员区、楼层） - 记录时间：2026-06-23 23:15 CST - 来源：飞书沟通与《电商视觉参考.zip》首屏/优惠券/会员/楼层参考图分析 - 逐图回源分析：`电商视觉参考逐图分析_20260625.md`；原图目录：`source/电商视觉参考_20260625/images/` - 适用范围：电商店铺首页、活动首页、大促活动页、主题活动页。这里的“首页”和“活动页”制作逻辑一致。 - 主要参考主体：大英博物馆、敦煌美术研究所、中国国家博物馆、国家图书馆、苏州博物馆、西安博物院等店铺截图。 - 未来重点执行主体：国博、良渚。良渚项目开工前必须读取良渚素材库中的良渚色、纹样、文物、产品与字体资产。 ## 一、总结构：活动页不是单张海报，而是模块化长页 以后用户说“做电商首页 / 活动页 / 大促页面 / 良渚某主题活动”，默认按以下模块拆解： 1. 首屏 / 大屏 / 轮播 Banner 2. 优惠券区或会员专区（也可以融合为一个福利模块） 3. 商品楼层区（可按文物、风格、品类、主推产品重复多个楼层） 整页必须先确定首屏视觉系统，再向下延展优惠券/会员区和楼层。上下模块的色系、底纹、字体、背卡、装饰纹样和光影必须统一，不能每个模块像不同页面拼起来。 ## 二、标准尺寸 ### 1. 首屏 固定标准尺寸：**1440 × 1920 px**。 参考包中 15 张首屏平均高宽比约 1.325，按 1440px 宽换算平均高度约 1909px，因此统一定为 1920px，方便不同活动之间复用，也方便轮播图统一高度。 所有同一活动中的轮播首屏必须同宽同高，避免后台无法填充。 ### 2. 后续模块 后续所有模块宽度统一 **1440px**；高度按内容自适应。 - 优惠券 / 会员区：相对短，排版要紧凑，不要四周留太多空，也不要上下拉得太长。 - 楼层模块：根据商品数量和结构控制高度；常见结构是重点产品一屏 + 双列商品一到两屏，再进入下一个楼层。 ## 三、首屏设计规范 首屏是整页定调模块，必须先做它。首屏要解决：哪个店/哪个IP、什么活动、主要利益点或时间、主推产品是什么。 ### 1. 信息结构 首屏通常包含： - 顶部或上方区域的店铺 / 博物馆 / 品牌 Logo - 活动主题大标题 - 小标题、利益点、活动时间 - 中下部的主推产品特写或产品组合 - 背景中的文物/产品元素、纹样、光影、质感装饰 ### 2. Logo、标题和文字占比 - Logo 通常在顶部居中、顶部偏左，或与标题组结合；文化感强的主题也可以竖排标题旁放 Logo/印章。 - 大标题、小标题、主要利益点、活动时间通常放在顶部或上方 1/3 区域。 - 文字整体占幅不要超过页面高度约 1/3。以 1440×1920 为例，文字组主要控制在上方约 500–640px 内。 - 字体可以做艺术字、书法字、篆刻感、现代中式或品牌化处理，但必须清楚可读，不能为了形式牺牲识别。 - 字色、字形、光影必须与产品和背景融合。 ### 3. 产品处理 - 产品要大，符合无线端浏览习惯，不要堆太多小产品。 - 单品特写通常占页面中下部，产品高度可占约 45%–60%，宽度可占约 55%–80%。 - 做活动组合时可以放多款产品，但仍需明确主视觉中心。 - 产品不能像贴纸一样硬贴在背景上，要有阴影、接触关系、光效或场景承托。 - 产品功能要反映在视觉里：灯具要有光影，香薰/杯具要有氛围，挂件/项链可用悬挂关系，文创产品要突出质感。 ### 4. 背景和装饰 背景不能空、不能硬渐变、不能上下割裂。必须从文物、产品、纹样、包装、器型或品牌色中提取元素，形成统一底层视觉系统。 可用方式： - 自然渐变、柔光、暗角、局部高光 - 文物纹样、产品细节、器型剪影、低透明度图案 - 建筑轮廓、水纹、荷叶、飞鸟、星点、金粉、沙地、纸张/书卷肌理等与主题相关的元素 - 用细碎点缀丰富画面，但不能抢产品 首屏最忌：大留白、生硬排版、只有一个纯色背景加产品、标题和产品各自独立没有融合。 ### 5. 平台悬浮元素不纳入设计 参考截图中的以下内容属于平台系统或截图残留，不能设计进首屏： - 天猫 0 元入会、5 元无门槛点击入会等悬浮框 - 轮播圆点、页面控件、系统入口、悬浮优惠标签 - 截图边框、手机/浏览器 UI 只参考真正的视觉设计：Logo、标题、产品、背景、光影、色系、装饰元素、整体排版。 ## 四、参考风格拆解 ### 1. 苏博方向：素雅、低饱和、园林建筑感、轻盈留白 - 色系：浅青绿、水蓝、淡粉、米白、低饱和灰绿。 - 元素：苏博建筑轮廓、水面、竹叶、飞鸟、荷花、柔雾、淡彩渐变。 - 文字：可竖排，可右上/居中；偏细雅、现代中式、书写感或文艺感。 - 气质：清、雅、静、轻，不能做成强金红促销风。 ### 2. 大英方向：精致光影、碎片元素丰富、商业活动感强 - 背景有星点、金色光粒、沙地纹理、微小高光、旋涡或空间感。 - 产品和功能对应：灯具有光效，埃及主题有沙金/黑金/神秘光影，礼品活动可用暖光与金色粒子。 - 文案可以居中也可以偏左，Logo+标题+利益点结构清楚。 - 重点学习其“产品、文案、光影和细碎点缀统一”的精致感。 ### 3. 敦煌方向：暖色、壁画感、书法感、大产品特写 - 色系：橙黄、金色、暖米、赤红、土黄。 - 字体适合竖排、书法字、印章感、圆形小标签。 - 背景可用壁画色块、云纹、飞天线条、金粉、低透明纹样。 - 产品必须大，挂件/毛绒/织唛/金属环细节要清楚。 ### 4. 国博方向：器物感、陈列感、稳重高级、产品设计感强 - 产品可以悬挂式构图，文字放侧边或顶部。 - 背景可更简洁，但不能空，要有器物线条、文物元素或高级光影。 - 重点是把商品做成有设计感的展品，而不是普通白底商品图。 ### 5. 良渚方向：必须读取素材库后再定调 良渚是未来高频项目。开工前必须先读取公共素材库中的： - 良渚色与品牌色资料 - 神人兽面纹、八角星纹、动物纹等纹样 - 良渚文物、IP形象、透明产品 PNG、现有字体与 Logo - 良渚产品图、主推产品、活动主题与用户提供文案 良渚首屏必须避免生硬排版：不要纯色硬渐变 + 产品硬贴 + 标题硬放。要从良渚色、纹样、器物、玉琮/玉鸟/良渚王等元素中形成统一的背景、光影和标题系统。 ## 五、优惠券 / 会员专区规范 优惠券或会员专区是首屏之后的转化模块，可以独立也可以融合。 ### 内容 - 两到三个面额/门槛优惠券 - 满减、立减、折扣、赠品、会员入会礼、会员权益 - 活动利益点，例如限时、满赠、加购、会员专享等 ### 排版 - 优惠券最多一行一个或一行两个；如果有三个利益点，优先一排三个。 - 不要做得特别小，消费者要一眼看懂。 - 不要上下留白过多，模块应相对紧凑，因为消费者停留时长和翻页成本很宝贵。 - 可以用底纹、底部图卡、福利卡片、票券、按钮样式承接首屏。 - 点击热区由后台后期添加，设计时只负责视觉和信息层级。 ## 六、商品楼层规范 楼层是可重复模块。每个楼层通常包含楼层名称、重点产品和双列商品区。 ### 1. 楼层可替换内容 每次活动主要替换： 1. 楼层名称/分类文案 2. 主推产品和商品图 3. 商品名称、价格、卖点或利益点 底纹、色系、标题样式、商品背卡、装饰纹样必须继承首屏和优惠券区的统一风格。 ### 2. 常见结构 - 楼层标题：可写文物、故事、品类或主题名。 - 重点产品：一行一个，大卡，通常占一屏。 - 普通产品：一行两个，可延展一屏到两屏。 - 后续楼层重复同一系统，只替换内容。 ### 3. 商品图规则 - 商品图底层一般来源于店铺现成的 **800×800 正方形主图**，但页面内商品卡 **只要求保持正方形**，不固定做成 800×800。 - 正方形商品图的边长要按 1440px 页面宽度、商品卡内边距和“一行一个 / 一行两个”等排版重新计算；一行两个时尤其不能直接使用 800px，否则会超过页面总宽。 - 设计商品卡时必须尊重正方形商品图，不要设计非常规比例格子导致图片变形或需要重做商品图；可直接把店铺正方形主图缩放适配。 - 商品名称、价格、卖点可放在商品图下方，也可用有色背景条覆盖在正方形图底部，缩短整体视觉高度。 - 不能把商品主图拉伸、裁残、变形，不能为了排版好看增加大量重做工作量。 ### 4. 不确定时必须确认 如果缺少以下信息，不要自行编造，应向用户确认： - 每个楼层的楼层名称 - 楼层分类逻辑：按文物、风格、品类还是主推产品 - 每个楼层主推品和商品排序 - 商品名称、价格、卖点、优惠规则 - 优惠券门槛、会员权益、活动时间 ## 七、默认执行工作流 以后接到“做电商首页/活动页/大促页”任务时，默认流程： 1. 收集并确认资料：活动主题、主体/IP、Logo、活动时间、利益点、优惠券/会员规则、楼层数量、楼层分类、产品图、价格和素材。 2. 先做首屏：确定 1440×1920 的主视觉、色系、字体、背景纹样、光影与产品表现。 3. 首屏确认后，延展优惠券/会员区：宽 1440，高度按内容紧凑排布。 4. 再做楼层：每个楼层沿用首屏系统，正方形商品图为基础，一行一个重点产品 + 一行两个商品卡。 5. 若缺文案、利益点、价格、楼层名或产品排序，必须先问，不要补造。 6. 输出单张图片时，也要按模块从上到下统一风格；即使导出为单张，内部仍按首屏、福利区、楼层拆分设计。 ## 八、给设计师的关键提醒 - 首屏决定整页风格，不能先做楼层再补首屏。 - 首页和活动页逻辑相同，不要把它理解成普通详情页。 - 画面要有设计感：背景、标题、产品、纹样、光影要互相融合。 - 不要出现大面积空白、硬渐变、产品硬贴、文字硬放。 - 不要把参考截图中的平台悬浮框当成设计元素。 - 商品楼层必须尊重正方形主图：只要保持正方形即可，尺寸按版面缩放计算，不固定 800×800。 - 良渚项目尤其要先读素材库，按良渚色、良渚纹样和文物气质重新组织视觉。