项目背景
营销越来越多，信息需要更清楚。
弹屏、首页卡和会场承担着不同任务，但商品、权益与装饰常挤在同一张画面里。小屏幕上，文字容易看不清，用户也不容易分清哪里该看、哪里该点。
这次梳理营销设计风格：统一图文关系，控制色彩和材质的视觉密度，把注意力留给商品和核心信息，并让规则延续到不同的营销场景。
图形与文字，统一表达
不再各讲各的。让商品造型、标题和权益组成一个清楚的展示体。
天猫超市｜营销视觉升级
从一套视觉规则，
到一致的表达。
把好商品和好权益说清楚，也让每一场营销都能被认出。
设计目标
图文一起表达，信息轻一点。
给信息减负
减少装饰和重复表达，拉开主次、留出空间，让用户更快抓住重点。
让风格有据可循
把布局、配色、质感与动态沉淀成规则，保持不同营销场景的一致性。
升级演绎
让规则，成为看得见的表达。
风格规范
营销设计
风格指南。
以象为体，以文表意。
01布局｜先看懂，再行动。
先分清内容和入口，再安排商品与文字。留出足够的呼吸空间，把注意力还给真正重要的信息。
- 版心边距
- 24px
- 画面留白
- >15%
- 图文同屏时，文字面积
- <50%
留白，让重点更清楚。
画面保留 15% 以上的完整留白。商品与文字不挤在一起，核心权益才容易被看见。
背景安静，主体清晰。
背景与文字、商品拉开对比，原规范对比度要求大于 3。颜色可以鲜明，阅读不能费力。
文字有边界，构图有变化。
图文同屏时，文字面积控制在 50% 以内；纯文字主视觉不超过 75%。单品、组合、特写和大字报，都保持清楚的阅读顺序。
图与字，一起说清卖点。
图文分开时，商品辅助信息表达；图文结合时，优先保证文字识别。
01 / 布局
页面应用
02色彩｜有氛围，也有秩序。
用明亮、温和的颜色区分主题。主色带出活动气氛，辅助色和对比色拉开主次，背景与底纹只做衬托。
渐变，服务于材质。
同色渐变以 20%–30% 的明度差塑造体积；浅色不明显时，再用邻近色过渡。始终保留材质的识别度。
背景，先建立活动心智。
用活动色区分主题，背景图回到商品材质。控制明度与饱和度变化，不抢走主角的注意力。
底纹，有气氛而不喧闹。
节日图案、权益数字、品牌字样各有用途。底纹与背景保持同色，明度相差 10%–20%。
配色，从 5 : 3 : 2 开始。
主色约 50%–60%，辅助色约 30%，对比色约 10%–20%。颜色越多，主次越要清楚。
532
拉开明暗，保持颜色的联系。
背景托住主体，辅助色靠近主色，对比色突出重点。色相与明度共同建立画面层级。
增加颜色，不增加混乱。
从辅助色或对比色中增加色彩，仍让主色保持至少一半的面积。
02 / 色彩
页面应用
03质感｜认得出商品，感受得到季节。
日常营销保留商品熟悉的材质；季节营销再调整轻重。春夏清透，秋冬温润，不靠堆细节制造质感。
商品的质感，季节的感受。
03 / 质感
页面应用
04字体｜先读得清，再表达情绪。
基础字体负责标题、正文和价格，主题字体负责活动的性格。小屏幕上避免过粗、过细，让每句话都不费力。
04 / 字体
页面应用
05外形｜简化，但不失去特点。
用几何轮廓搭出形状，保留商品特征，再用小倒角让它更亲近。图形与文字彼此配合，而不是各说各话。
05 / 外形
页面应用
动态规范
动起来，是为了更好地被看懂。
运动方向一致，符合物体的运动逻辑。节奏干脆，文字停留足够久，让动效帮助信息传递，而不是打断阅读。