用途:当作品质量取决于艺术指导、层级、克制、图像与动效,而非组件数量时使用该技能。目标是交付显得刻意、高级、当下的界面,默认追求奖项级构图:一个大创意、强图像、稀疏文案、严谨间距、少量令人记住的动效。
主要能力与工作模型:构建前先写三件事——视觉论点(一句话描述情绪、材质与能量)、内容计划(hero、support、detail、final CTA)、交互论点(2-3 个改变页面感觉的动效想法)。每个区块只承担一个任务、一个主导视觉想法、一个主要结论或行动。
默认做法:从构图而非组件开始;优先全出血 hero 或全画布视觉锚点;让品牌或产品名成为最响亮的文字;文案短到可秒扫;先用留白、对齐、尺度、裁切与对比,再加装饰;系统限制为最多两种字体、默认一个强调色;默认无卡片布局,改用区块、栏、分隔线、列表与媒体块;把首屏当作海报而非文档。
落地页默认顺序:Hero(品牌或产品、承诺、CTA、一个主导视觉)、Support(一个具体功能、优惠或证明点)、Detail(氛围、工作流、产品深度或故事)、Final CTA(转化、开始、访问或联系)。Hero 规则:仅一个构图;全出血图像或主导视觉平面;品牌页 hero 必须边到边、无继承页面边距、无框容器或共享最大宽度,只约束内部文字/行动列;品牌第一、标题第二、正文第三、CTA 第四;默认不用 hero 卡片、数据条、logo 云、药丸堆或浮动仪表盘;桌面标题约 2-3 行,移动端一眼可读;文字列窄并锚定图像平静区域;图上文字保持强对比与清晰点击目标。视口预算:若首屏含粘性/固定页头,页头计入 hero,页头加 hero 内容须在常见桌面与移动尺寸的初始视口内;使用 100vh/100svh hero 时减去常驻 UI 高度(calc(100svh - header-height))或让页头叠加而非正常流堆叠。
应用界面:默认 Linear 式克制——平静的表面层级、强排版与间距、少颜色、密集但可读的信息、最少装饰;仅当卡片本身是交互时才用卡片。围绕主工作区、导航、次级上下文或检查器、一个清晰强调色组织。避免仪表盘卡片马赛克、每个区域粗边框、常规产品 UI 背后的装饰渐变、多个竞争强调色、无助于扫读的装饰图标。若面板去掉卡片处理仍不丢含义,就移除卡片。
图像:图像必须承担叙事。品牌、场馆、编辑页与生活方式产品至少用一张强而真实的图像;优先实景摄影而非抽象渐变或假 3D 物体;选择或裁切有稳定色调区供文字放置的图像;不用带内嵌标牌、logo 或排版杂乱与 UI 冲突的图像;不生成带内置 UI 框、分屏、卡片或面板的图像;需要多个时刻就用多张图而非一张拼贴;首屏需要真实视觉锚点,装饰纹理不够。
文案:用产品语言而非设计评论;让标题承载含义;辅助文案通常一句短句;删减区块间重复;不把提示词语言或设计评论放进 UI;每个区块一个职责:解释、证明、深化或转化;若删掉 30% 文案能改善页面,就继续删。产品 UI 的实用文案:仪表盘、应用界面、管理工具或操作工作区默认用实用文案而非营销文案;优先定位、状态与行动,而非承诺、情绪或品牌口吻;从工作表面本身开始(KPI、图表、筛选、表格、状态或任务上下文),除非用户明确要求,否则不引入 hero 区块;区块标题应说明该区域是什么或用户能做什么,如“Selected KPIs”“Plan status”“Search metrics”“Top segments”“Last sync”;避免励志 hero 句、隐喻、活动式语言与高管摘要横幅;辅助文字一句话说明范围、行为、新鲜度或决策价值;若某句能出现在首页 hero 或广告中,就改写为产品 UI 语气;若某区块无助于操作、监控或决策,就移除。试金石:操作者只扫标题、标签与数字,能否立即理解页面。
动效:用动效创造存在感与层级,而非噪音。视觉主导作品至少交付 2-3 个有意图的动效:hero 一个入场序列、一个滚动联动/粘性/深度效果、一个悬停/揭示/布局过渡以强化可供性。可用时优先 Framer Motion,用于区块揭示、共享布局过渡、滚动联动透明度/位移/缩放、粘性叙事、推进叙事而非填充空间的轮播、菜单抽屉与模态存在感效果。动效规则:快速录制中可察觉、移动端流畅、快速克制、全页一致、纯装饰则移除。
硬性规则:默认无卡片;默认无 hero 卡片;简报要求全出血时不用盒装或居中列 hero;每区块不超过一个主导想法;区块不应需要许多微小 UI 装置来解释自己;品牌页标题不应压过品牌;无填充文案;除非文字位于平静统一一侧,否则不用分屏 hero;无明确理由不超过两种字体;除非产品已有强系统,否则不超过一个强调色。
应拒绝的失败:首印象是通用 SaaS 卡片网格;漂亮图像但品牌存在感弱;强标题但无清晰行动;文字背后图像杂乱;区块重复同一情绪陈述;无叙事目的的轮播;应用 UI 由堆叠卡片而非布局构成。
试金石:首屏品牌或产品是否明确无误?是否有一个强视觉锚点?只扫标题能否理解页面?每个区块是否只有一个任务?卡片是否真的必要?动效是否改善层级或氛围?移除所有装饰阴影后设计是否仍显高级?
限制:资料未提供具体安装命令、依赖版本、平台支持范围、收费方式或效果数据,暂未提供。