Design Thinking

设计思维

适用场景

在需要为前端设计明确方向与意图时使用。在定义目标、基调、领域、色彩世界与评审标准时与 design 配合使用;涵盖来自电影、建筑、营销、UX、汽车、工业设计的跨领域视角。

在每项设计任务中,均与 design 技能配合使用,且应在编码之前完成。

设计思维(编码之前)

• 目标:这个界面要解决什么问题?为谁而做?
• 基调:选定一个极端方向,并有意识地贯彻——例如极简到极致、极繁复、复古未来、有机自然、轻奢精致、童趣玩味、编辑杂志风、粗野主义、装饰艺术几何、柔和粉彩、工业实用风。
• 约束:框架、性能、可访问性。
• 差异化:一个让人过目不忘的亮点。

坚定地选择一个大胆的方向。意图胜于强度。

把冲击力留给标点(谨慎使用,以求效果)

冲击力手法——全幅媒体、戏剧化动效、超大字号、饱和重彩、视差——一旦成为默认便会失去力度。如果每一屏都是全屏视频,反而没有任何一屏能击中人心。挑选 1–2 个高光时刻(开场或高潮)去放大,其他部分则保持克制与内敛,让高光读起来像刻意的标点,而不是噪声。克制才是让稀有的全幅节拍真正发力的关键;通篇的强烈感读起来是平的。这就是做减法的奢侈——在充裕的留白中一个大胆的姿态,胜过满铺的极繁。规模、颜色(一种点缀色,而不是五种)、动效(一个标志性动作,而不是不断抖动)同样适用。

领域与色彩

• 领域:5 个以上来自该产品世界的概念、隐喻或术语(领域归属,而非功能罗列)。
• 色彩世界:5 个以上"属于"该世界的颜色——如果把这个产品还原为一个物理空间,你会在那里看到什么颜色。不要用"暖色"或"冷色"这类泛词;要说出该领域里具体的颜色。
• 签名:一个只能为该产品而存在的元素(视觉、结构或交互层面)。

评审标准

扪心自问:"我愿意把名字签在它上面吗?"设计负责人的评审不是"能不能用?",而是"这是否毫无疑问地经过深思熟虑、精心打磨?"。

不可妥协的工艺底线(任何一项失败即判定不通过):

• 绝不出现字体闪烁。 标题/展示文字在加载 webfont 过程中,绝不能闪现回退字体或发生重排。监听 document.fonts.ready 后再淡入。参见 design-system → 绝不出现字体闪烁。
• 首屏优先加载。 任何处于首屏视口内的内容(主标题文字、主视觉、品牌标识)都必须优先完整、正确地绘制完成,之后才加载折叠以下内容。参见 design-system → 加载顺序。

跨领域视角

定义方向时,选择契合该产品的学科,并从每个学科中应用 2–3 条原则。例如:dashboard → UX + 汽车;品牌 campaign → 电影 + 营销;应用 → UX + 工业设计。

电影

• 构图与取景:视口即画框;三分法、引导线、前/中/后景层次。聚焦之处即主层级。
• 节奏与韵律:揭示的顺序(如同剪辑)。一次精心编排的加载或滚动节拍,胜过散乱的动效。
• 色彩与情绪:调色即情绪;统一调色板就是"影调"。
• 焦点与景深:焦平面与景深 → 视觉层次与堆叠(模糊、透明度、缩放)。

建筑

• 尺度与比例:人体尺度、柱列/网格的韵律、元素与视口的比例。
• 导视系统:用户始终清楚自己在哪里、可以去哪里(定位、导航、面包屑)。
• 材质与光线:质感与阴影塑造纵深;光线方向暗示高度与重点。
• 负空间:刻意的留白;空间本身就是结构,而非剩余物。
• 过渡节点:进入与切换的瞬间(落地页 → 应用、模态打开)被当作刻意的"穿越"。

营销

• 一个核心主张:首屏只传达一个核心价值或要点;信息层级优先,功能罗列其次。
• 感性 vs 理性:决定首屏的第一拍走感性吸引,还是理性清晰;让布局与文案与之对齐。
• CTA 突出度:主操作不可错认;次操作存在但不与之争抢。
• 受众契合:基调用图与目标人群匹配;避免"通用用户"。
• 品牌一致性:在所有产物中保持同一种声音和视觉系统。

UX

• 目标与任务:围绕用户目标与关键任务设计;减少完成任务所需的步骤。
• 信息架构:清晰的分组与层级;降低认知负担。
• 反馈与状态:每个动作都有可见反馈;考虑加载、成功、错误状态。
• 可访问性:色彩对比、焦点顺序、语义化。(减少动效:面向公众/多用户项目应遵循 prefers-reduced-motion;个人项目可保留完整动效。)
• 渐进式呈现:先展示关键信息,细节按需展开(展开、模态、步骤)。

汽车(外观 / 内饰)

• 轮廓与性格:一个强烈的轮廓或"特征线";一眼即可识别。
• 面语言:曲面张力的连续性(如车身钣金);避免无意义的隆起。
• 比例:车身(内容)与车轮(外饰/导航)之间的平衡;稳定而不头重脚轻。
• 材质与饰件:硬/软、冷/暖、哑光/亮光作为层级;主材质一种语言,点缀另一种。
• 以驾驶者为中心:主要控件和信息位于"驾驶者"(用户)第一眼看到的位置;次要控件在可及范围内,但不与之争抢。
• 控件层级:一个主操作面;次操作成组且可识别。

工业设计

• 形式追随功能:形态与布局反映用途;不无端装饰。
• 材质诚实:材质(或视觉等价物:质感、重量)与功能相称。
• 可供性:形态暗示用途(可点击、可拖拽、可输入);即便无标签也清晰可辨。
• 触感:按钮和控件"按得动""抓得住"(hover/active 状态、纵深感)。
• 产品性格:一个清晰的性格(友好、严肃、玩味、高端);贯穿整个 UI 保持一致。
• 简化:删到不能再删;UI 减法的极致是"最好的部分就是没有多余部分"。

限制条件

• 仅在任务明确匹配其上游来源和本地项目上下文时使用本技能。
• 在应用变更前,请核实命令、生成代码、依赖、凭证以及外部服务的行为。
• 不要把示例当作环境专项测试、安全审查或对破坏性/高成本操作的授权替代。