电商参考图

逐图分析文档 · doc

30 张文博/博物馆电商首页、活动页、优惠券会员区和商品楼层参考图的逐图分析，沉淀首屏、券区、楼层和商品卡设计方法。

首页首屏 / 轮播参考 · image

模块类型：轮播首屏 / 单品主推。；画面结构：Logo 置顶左侧，向日葵胸针居中偏左放大，右侧竖排大标题“向阳而生”，左侧竖排辅助文案，底部小 CTA。；可复用方法：适合珠宝、胸针、金属文创、小礼品；可用“浅色布面 + 斜向自然光 + 单品大特写 + 竖排主题字”。；不建议照搬：不要把轮播圆点和“点击购买”按钮当作正式

首页首屏 / 轮播参考 · image

模块类型：轮播首屏 / 国风礼品单品。；画面结构：顶部居中 Logo，标题置于上方，团扇/挂饰居中，左右下角用花朵与浅色景深补氛围。；可复用方法：适合镜子、香囊、团扇、挂饰；可做“淡蓝留白 + 花影景深 + 居中商品 + 轻诗意标题”。；不建议照搬：浅色系容易显空，必须有花、云、柔光或产品细节补足层次。

首页首屏 / 轮播参考 · image

模块类型：轮播首屏 / 毛绒挂件单品。；画面结构：棕色暖底，蓝色书本毛绒挂件大面积居中偏左，右侧竖排卖点“金榜题名”，左侧 Logo 与短文案。；可复用方法：适合考试季、文具、挂件、毛绒卡包；用暖背景让蓝色主体跳出来，旁边加竖排标签说明功能。；不建议照搬：毛绒类必须保持真实质感和形态，不能为了排版把产品拉大变形。

首页首屏 / 轮播参考 · image

模块类型：轮播首屏 / 礼盒开箱场景。；画面结构：手部打开蓝色礼盒，商品在画面中下部形成真实开箱视角；白色标题横排叠在背景景深上。；可复用方法：适合礼盒、套装、文具礼品；可用“手部开箱 + 包装盒大面积 + 标题悬浮在景深区”。；不建议照搬：标题压在复杂背景上时要加轻描边/阴影或半透明遮罩，避免移动端难读。

首页首屏 / 轮播参考 · image

模块类型：轮播首屏 / 系列周边主视觉。；画面结构：建筑冰箱贴居中大幅展示，挂件垂落形成横向陈列；上方 Logo 与大标题“镇馆之宝”，下方副标题。；可复用方法：适合建筑冰箱贴、馆藏系列套装；用单个复杂产品做中心，减少背景干扰。；不建议照搬：建筑类产品若线条多，背景必须克制；不要额外堆太多纹样。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 珠宝饰品单品。；画面结构：项链从上方垂挂，主体居中，右侧竖排大书法标题，左侧竖排短文案，底部优惠券悬浮。；可复用方法：珠宝类可用深色展陈背景、上方悬挂、右侧书法标题，营造馆藏高级感。；不建议照搬：暗背景下底部小字容易糊；优惠浮层属于平台元素，不纳入正式设计。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 新品首发。；画面结构：大型首饰/饰品盒居中，右侧巨大书法字“闹蛾金钗”，底部优惠券和新品首发圆章。；可复用方法：适合“新品首发 + 高工艺产品”；用大产品 + 大书法标题 + 小圆章强化新品感。；不建议照搬：光效和金粉要服务商品，不要盖过产品细节。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 活动利益点 + 产品场景。；画面结构：顶部 Logo 和活动标题，中部文创产品置于沙地/展台场景，底部入会悬浮控件。；可复用方法：适合礼品节、会员礼、暖心赠礼；用暗背景 + 暖光 + 沙地/台面连接文物主题。；不建议照搬：文字和产品之间有距离，正式设计可加强主题与产品功能的对应关系。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 新品重磅首发。；画面结构：深蓝星空背景，金色光带从上到下引导视线，产品在右下大幅展示，标题偏左。；可复用方法：适合灯具、音响、香薰机等功能型文创；用“功能发光点 + 主题粒子轨迹”强化产品卖点。；不建议照搬：金粉不能只当装饰，应围绕产品核心功能产生动线。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 新品专区入口。；画面结构：大月亮背景，灯塔产品居中，顶部大字“新品首发 礼承心意”，底部新品专区按钮。；可复用方法：适合夜灯、香薰灯、氛围灯；产品功能必须在画面中被真实表现出来。；不建议照搬：IP 小角色可点缀，但不要抢产品；标题字形需要克制，避免儿童化过重。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 毛绒挂件单品。；画面结构：左侧大书法字“翼马当先”，产品居中大特写，右上绳带入画，右侧优惠浮卡和底部价格截屏残留。；可复用方法：敦煌毛绒/挂件可用暖底、斜向绳带、书法字和金元宝小道具突出吉祥感。；不建议照搬：价格角标和优惠悬浮框属于平台层；正式首屏应另行设计活动利益点。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 小件摆件/夜灯类单品。；画面结构：顶部居中文字，产品大幅居中偏下，右侧优惠券悬浮，底部价格残留。；可复用方法：适合萌趣文创、透明材质摆件；可用留白背景和大标题保证商品可见。；不建议照搬：标题字形偏可爱，若做高端文博活动页需降低卡通感。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 周年纪念主题。；画面结构：苏博建筑插画占画面左下到中部，右上竖排标题“苏博 20周年纪念”，水面和飞鸟增强空间。；可复用方法：苏博/园林类 IP 可优先用建筑轮廓、水面、竹叶、飞鸟构成轻盈首屏。；不建议照搬：如果用于强转化活动，需要补足主推商品和利益点，否则过于品牌宣传。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 单品氛围。；画面结构：极简渐变背景，包装盒左下，茶杯/荷花杯右下，右侧竖排标题“荷风入盏”。；可复用方法：适合杯具、茶具、香薰等清雅产品；背景要用色彩氛围和主题名支撑。；不建议照搬：画面信息少，若电商活动需要明确价格/利益点，应增加可读文字区。

首页首屏 / 轮播参考 · image

模块类型：首屏 / 春日上新活动。；画面结构：顶部 Logo，中央大标题“春日新启 换新登场”，下方多款产品置于石台与水岸场景，樱花和飞鸟环绕。；可复用方法：适合春季上新、换新活动；多品类组合可用自然场景和统一展台整合。；不建议照搬：场景偏插画/渲染感，正式商品必须用真实产品图或确认的透明 PNG，不能乱改产品比例和纹

优惠券 / 会员区参考 · image

模块类型：优惠券/活动入口区。；画面结构：红色外框，内部四宫格活动入口，上方大入口、下方分区入口，底部单独批采横条。；可复用方法：活动页首屏下方可用“分区入口矩阵 + 批采横条”承接，适合考试季、端午、新品、婚礼物等多专区。；不建议照搬：留白偏大时会显空，正式设计要根据后台入口数量压缩高度。

优惠券 / 会员区参考 · image

模块类型：优惠券/会员福利区。；画面结构：上部延续深色文物背景和 5 元优惠浮卡，下部红金大券区，含关注、满减、会员券、分享券和会员积分兑换。；可复用方法：适合大促福利汇总；面额大、按钮清楚，多个权益可按 2×2 卡片承载。；不建议照搬：信息密度高，正式设计必须根据活动真实规则精简，避免移动端读不清。

优惠券 / 会员区参考 · image

模块类型：会员专区 / 权益汇总。；画面结构：白米色背景，顶部 VIP 标题，中间券/充值权益，底部四个活动入口卡片。；可复用方法：适合首屏下方福利区；可以用大卡承载会员核心权益，用四宫格承载品类入口。；不建议照搬：入口太多时会变成信息墙；活动页应根据真实权益压缩为 3–5 个核心入口。

优惠券 / 会员区参考 · image

模块类型：会员福利 / 优惠券区。；画面结构：壁画背景上叠四个券卡，底部会员专享 5 折起横幅，左下产品图点缀。；可复用方法：优惠券区可以强主题化：用壁画底纹 + 金边券卡 + 大金额数字。；不建议照搬：券面过多时需要拉开层级，避免所有按钮都同等抢眼。

优惠券 / 会员区参考 · image

模块类型：会员/优惠券区。；画面结构：白底标题“加入会员·解锁专属礼遇”，两段福利卡：优惠券、购物金，内部大金额数字和按钮。；可复用方法：苏博类清雅活动可用浅色券卡和大金额数字，不需要强红金也能表达转化。；不建议照搬：金额数字很大但按钮较小，正式页面需保证“领取/兑换”触点清晰。

商品楼层 / 商品卡参考 · image

模块类型：商品楼层 / 单品热销卡。；画面结构：红色促销边框，上方“热销爆款”，中间横向商品场景图，下方商品名、到手价与购买按钮。；可复用方法：适合单个爆款重点推荐；商品图可以是实拍场景，底部价格区清晰分层。；不建议照搬：价格和 CTA 不宜过小；正式长页中同类卡片需统一边框与按钮样式。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 爆款推荐重点单品。；画面结构：红色背景，左侧竖向小产品索引，右侧大商品模特架/项链，底部价格与抢购按钮。；可复用方法：适合珠宝/饰品楼层首卡；可用“一主图 + 左侧小索引 + TOP 排名”。；不建议照搬：商品小索引不能过多，否则抢主视觉；价格需与商品名称保持稳定对齐。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 多商品宫格。；画面结构：红色背景上 2×3 商品卡，每张卡有商品图、名称、活动价和按钮。；可复用方法：适合商品较多的通用楼层；统一卡片边框和按钮能快速扩展。；不建议照搬：图片来源风格差异较大时，要用统一卡片/背景压住，否则楼层杂乱。

商品楼层 / 商品卡参考 · image

模块类型：商品楼层 / 多品类热销榜。；画面结构：顶部标题“镇店臻品”，三栏分类标签，下面 3×3 商品网格，每张图下方商品名、价格、按钮。；可复用方法：适合商品 SKU 多的活动页；分类 tab + 3 列网格能提高商品浏览效率。；不建议照搬：移动端三列商品图可能偏小；如商品需要质感展示，优先双列或重点产品大卡。

商品楼层 / 商品卡参考 · image

模块类型：商品楼层 / 新品单品重点卡。；画面结构：上方英文标题 NEW ARRIVAL，下方大场景图，左侧竖向商品缩略图列表，主产品居中，底部价格与购买按钮。；可复用方法：适合新品上新、单品系列；用“主图大卡 + 左侧缩略图导航”呈现多款变体。；不建议照搬：侧边缩略图在窄屏上可能太小；需确认后台是否能承载点击切换，静

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 爆款推荐两联大卡。；画面结构：顶部壁画人物做楼层氛围，下方两张横向商品大卡，上图品茗杯，下图五路财神屏。；可复用方法：适合重点产品较少的楼层；一屏放 2 个横向大卡，商品质感更清晰。；不建议照搬：横向实拍如果色温差异大，要统一暗角/边框/文字色，否则割裂。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 纵向重点产品列表。；画面结构：三张大横幅卡片纵向排列，每张一个商品，右侧/中部放商品名、价格、按钮。；可复用方法：适合茶器、礼盒、套装等需要大图展示的商品楼层。；不建议照搬：连续横卡容易显长，需在楼层间加标题或节奏变化。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 多品类双列商品卡。；画面结构：2×3 双列商品网格，商品图上方为主视觉，下方黑色价格条和黄色按钮/箭头。；可复用方法：适合综合商品楼层；双列卡片在移动端比三列更利于看清商品。；不建议照搬：黑色底条较重，如品牌气质偏雅致可改为深棕或半透明底条。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 主题故事 + 商品推荐。；画面结构：顶部 tab，黑色主图区域展示“春秋吴王夫差剑”，左侧故事介绍，右侧文物图；下方三张商品卡。；可复用方法：适合文物主题楼层：上半区讲文物/故事，下半区挂关联商品。；不建议照搬：故事文字不能太长，移动端需控制在可读范围；商品卡要与主题强相关。

商品楼层 / 商品卡参考 · image

模块类型：楼层 / 人物主题故事 + 商品推荐。；画面结构：顶部 tab，主体区域左侧人物/主题说明，右侧人物画像，底部三张商品卡。；可复用方法：人物/文人主题可用“知识卡 + 商品卡”组合，不必只做促销。；不建议照搬：背景书法和人物图要有授权/真实来源，不能随意编造。

批量预览 Contact Sheet · image

国博_contact 批量参考图 contact sheet，用于快速总览该组电商视觉参考。

批量预览 Contact Sheet · image

国图_contact 批量参考图 contact sheet，用于快速总览该组电商视觉参考。

批量预览 Contact Sheet · image

大英_contact 批量参考图 contact sheet，用于快速总览该组电商视觉参考。

批量预览 Contact Sheet · image

敦煌_contact 批量参考图 contact sheet，用于快速总览该组电商视觉参考。

批量预览 Contact Sheet · image

苏博西博_contact 批量参考图 contact sheet，用于快速总览该组电商视觉参考。