{ "id": "flat-design", "type": "styles", "status": "published", "name": { "zh": "扁平化设计", "en": "Flat Design" }, "aliases": [ "扁平化", "扁平风格", "扁平化设计", "没有阴影那种平面设计", "色块图标风格", "扁平UI", "Flat UI", "Flat Design" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "拒绝一切拟真修饰的视觉语言：纯色块、几何形状、无渐变无投影无纹理，靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物，而是承认自己 是一块发光的平面，用清晰与直接换取效率与一致性。", "en": "A visual language that strips out all simulation: solid color blocks, simple geometry, no gradients, shadows or textures. Hierarchy comes from color, shape and typography alone. The opposite of skeuomorphism — the interface admits it is a glowing plane and trades decoration for clarity." }, "use_when": [ { "zh": "系统级产品需要跨平台一致与极低成本维护", "en": "System products that need cross-platform consistency at low cost" }, { "zh": "图标 信息图 后台界面，要求一眼识别 快速扫读", "en": "Icons, infographics and dashboards that must scan instantly" }, { "zh": "移动端小屏幕，装饰会挤占内容空间", "en": "Small mobile screens where decoration crowds out content" } ], "avoid_when": [ { "zh": "层级复杂且用户需要空间线索区分可点与不可点", "en": "Complex hierarchies where users need depth cues to see what is clickable" }, { "zh": "品牌需要温度 情绪与精致感", "en": "Brands that need warmth, emotion or crafted refinement" }, { "zh": "大面积灰底上加细线按钮，可点性暗示不足（ Flat 2.0 随之出现）", "en": "Grey on grey with hairline buttons — weak affordance triggered Flat 2.0" } ], "tags": [ "flat", "solid-color", "geometry", "clarity", "metro" ], "variants": [ { "id": "metro", "name": { "zh": "Metro 磁贴", "en": "Metro Tiles" }, "note": { "zh": "微软 Metro，大色块磁贴与矩形至上", "en": "Microsoft Metro — big color tiles, rectangles all the way" } }, { "id": "flat-ui", "name": { "zh": "Flat UI 撞色", "en": "Flat UI Colors" }, "note": { "zh": "高饱和撞色 加浅底 圆角与细描边", "en": "Saturated clash colors on pale surfaces with 1px borders" } }, { "id": "flat2", "name": { "zh": "扁平 2.0", "en": "Flat 2.0" }, "note": { "zh": "补回轻微阴影与层次，Material 前奏", "en": "Shadows return subtly — the prelude to Material" } } ], "applicable_components": [ "button", "card", "input", "navbar", "badge" ], "related": [ { "id": "minimalism", "relation": "similar_to" }, { "id": "skeuomorphism", "relation": "similar_to" }, { "id": "swiss-style", "relation": "similar_to" }, { "id": "button", "relation": "affects" }, { "id": "card", "relation": "affects" } ], "demo": { "component": "flat-design", "modes": [ "default", "dark", "variants" ] }, "playground": { "task": { "zh": "开始使用创建具名工作区并选择 plan，结果显示对应名称与方案；功能、价格、博客、登录各到达具体内容或演示身份说明。", "en": "Get started creates a named workspace with a chosen plan and shows the matching result. Features, Pricing, Blog and Log in reach relevant content or a demo identity explanation." }, "checks": [ { "zh": "逐一操作 Flatly 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use Flatly’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 Flatly 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the Flatly task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "Nielsen Norman Group — Flat Design", "url": "https://www.nngroup.com/articles/flat-design/" }, { "name": "Apple HIG — Visual Design", "url": "https://developer.apple.com/design/human-interface-guidelines/visual-design" } ], "implementation": { "css": [ "solid-color", "border: 0", "box-shadow: none", "transition: background-color" ], "notes": { "zh": "纪律比技巧重要：只允许纯色填充与 1px 描边，box-shadow 一律 none，渐变与 纹理一律不出现；层级交给色块面积与明度差。可交互元素用高饱和强调色或 描边保证可点性；hover 只改 background-color，150ms 内完成。深浅色模式 各维护一套色板而非简单反色。", "en": "Discipline over technique: solid fills and 1px borders only, box-shadow always none, gradients and textures banned. Hierarchy lives in color area and luminance steps. Keep interactive elements on saturated accents or clear outlines; hover changes background-color only, within 150ms. Maintain separate light and dark palettes instead of inverting." } }, "prompts": { "basic": { "zh": "用扁平化设计（Flat Design）风格设计界面：纯色块、无渐变无投影无纹理， 层级靠颜色与排版建立，交互元素用高饱和强调色标识。", "en": "\"Design an interface in Flat Design style: solid color blocks with no gradients, shadows or textures; hierarchy from color and typography; interactive elements marked by saturated accents.\"" }, "design": { "zh": "扁平化设计规范：背景纯白或纯灰，内容用 5～6 个高饱和色块（参考 Flat UI Colors：#3498DB #E74C3C #2ECC71 等）；无边框无投影，圆角 0～4px；文字 反白或近黑，字号层级清晰；按钮 hover 仅加深背景色 8%；深色模式单独 调整色板明度，不做简单反色。", "en": "\"Flat design spec: white or light grey background with 5–6 saturated tiles (Flat UI Colors: #3498DB, #E74C3C, #2ECC71...); no borders, no shadows, 0–4px radii; inverted or near-black text with clear type scale; hover darkens the fill by 8% only; dark mode uses its own palette, not a simple inversion.\"" }, "implementation": { "zh": "用当前风格完成 Flatly 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Flatly 的蓝色首屏、黄色操作与黄/白/青三张功能卡；仍是左侧 2/5 文案、右侧 3/5 几何面板、下方三卡，不另建六色卡片实验。沿用 renderer 的圆/三角/方形及其局部投影，不用全局无渐变/无阴影规则抹掉现有图形层次。工作区按现有表单与结果列表延续。\n\n复用当前 preview.tokens：背景 #1FA2FF；前景 #FFFFFF；强调 #FFD54F / #333333；卡面 rgba(255,255,255,.16)；边框 rgba(255,255,255,.35)；圆角 8px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 none。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n开始使用创建具名工作区并选择 plan，结果显示对应名称与方案；功能、价格、博客、登录各到达具体内容或演示身份说明。\n\n静态封面、详情演示与 /style-scenes/flat-design/（英文 /en/style-scenes/flat-design/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "Build a complete Flatly page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Flatly’s blue hero, yellow actions and yellow/white/teal feature cards: 2/5 copy, 3/5 geometry and three cards below, not a new six-color card experiment. Preserve the renderer’s circle/triangle/rectangle and local shadows rather than flattening existing art with global no-gradient/no-shadow bans. Continue with the existing workspace form and result list.\n\nReuse current preview.tokens: background #1FA2FF; foreground #FFFFFF; accent #FFD54F / #333333; card rgba(255,255,255,.16); border rgba(255,255,255,.35); radius 8px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nGet started creates a named workspace with a chosen plan and shows the matching result. Features, Pricing, Blog and Log in reach relevant content or a demo identity explanation.\n\nShare one renderer between static covers, the detail experience and /style-scenes/flat-design/ (English /en/style-scenes/flat-design/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion." }, "agent": { "zh": "用当前风格完成 Flatly 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Flatly 的蓝色首屏、黄色操作与黄/白/青三张功能卡；仍是左侧 2/5 文案、右侧 3/5 几何面板、下方三卡，不另建六色卡片实验。沿用 renderer 的圆/三角/方形及其局部投影，不用全局无渐变/无阴影规则抹掉现有图形层次。工作区按现有表单与结果列表延续。\n\n复用当前 preview.tokens：背景 #1FA2FF；前景 #FFFFFF；强调 #FFD54F / #333333；卡面 rgba(255,255,255,.16)；边框 rgba(255,255,255,.35)；圆角 8px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 none。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n完整页面操作：\n开始使用创建具名工作区并选择 plan，结果显示对应名称与方案；功能、价格、博客、登录各到达具体内容或演示身份说明。\n\n静态封面、详情演示与 /style-scenes/flat-design/（英文 /en/style-scenes/flat-design/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "Build a complete Flatly page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Flatly’s blue hero, yellow actions and yellow/white/teal feature cards: 2/5 copy, 3/5 geometry and three cards below, not a new six-color card experiment. Preserve the renderer’s circle/triangle/rectangle and local shadows rather than flattening existing art with global no-gradient/no-shadow bans. Continue with the existing workspace form and result list.\n\nReuse current preview.tokens: background #1FA2FF; foreground #FFFFFF; accent #FFD54F / #333333; card rgba(255,255,255,.16); border rgba(255,255,255,.35); radius 8px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nFull-page operations:\nGet started creates a named workspace with a chosen plan and shows the matching result. Features, Pricing, Blog and Log in reach relevant content or a demo identity explanation.\n\nShare one renderer between static covers, the detail experience and /style-scenes/flat-design/ (English /en/style-scenes/flat-design/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results." } }, "style_spec": { "typography": { "zh": "几何无衬线，中等字重", "en": "Geometric sans at medium weights" }, "color": { "zh": "纯色平涂：蓝 #1FA2FF × 黄 #FFD54F", "en": "Flat fills: blue #1FA2FF, yellow #FFD54F" }, "border": { "zh": "无描边，色块分区", "en": "No outlines — blocks define areas" }, "shadow": { "zh": "完全无阴影", "en": "Completely shadowless" }, "spacing": { "zh": "小圆角 6px，均匀网格", "en": "Small 6px radius, even grid" }, "motion": { "zh": "100–150ms 颜色与透明度的线性过渡，无位移", "en": "Linear 100–150ms colour and opacity transitions, no movement" }, "states": { "zh": "hover 用更亮的平涂色；focus 用 2px 深色可见实线外框；active 换用更深色块；disabled 降到 50% 不透明；error 用红色平涂且不加阴影", "en": "Hover uses a brighter flat fill; focus shows a visible 2px dark solid frame; active uses a deeper fill; disabled drops to 50% opacity; error uses a red flat fill with no shadow" } }, "preview": { "order": 11, "keywords": { "en": "SOLID & SIMPLE", "zh": "平涂 · 直接 · 去装饰" }, "url": "https://flatly.io", "scene": "generic", "brand": "Flatly", "nav": [ { "zh": "功能", "en": "Features" }, { "zh": "价格", "en": "Pricing" }, { "zh": "博客", "en": "Blog" } ], "navExt": [ { "zh": "登录", "en": "Log in" } ], "heroTitle": { "zh": "Simple & Solid", "en": "Simple & Solid" }, "heroSub": { "zh": "去掉装饰，信息直达。", "en": "Strip away decoration. Get to the point." }, "cta": { "zh": "开始使用", "en": "Get started" }, "heroCaption": { "zh": "没有渐变 · 没有阴影 · 只有信息", "en": "No gradients · No shadows · Just information" }, "features": [ { "t": { "zh": "色块即层级", "en": "Hierarchy through color" }, "s": { "zh": "大色块分区", "en": "Large blocks define sections" } }, { "t": { "zh": "图标即语言", "en": "Icons as language" }, "s": { "zh": "几何小图标", "en": "Small geometric icons" } }, { "t": { "zh": "直角与留白", "en": "Clean edges and space" }, "s": { "zh": "克制的圆角", "en": "Restrained corner radii" } } ], "panel": "shapes", "tokens": { "bg": "#1FA2FF", "fg": "#FFFFFF", "sub": "rgba(255,255,255,.75)", "accent": "#FFD54F", "accentFg": "#333333", "card": "rgba(255,255,255,.16)", "cardBorder": "rgba(255,255,255,.35)", "radius": "8px", "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif", "heroSize": "24px", "triCards": [ "#FFD54F", "#FFFFFF", "#36CFC9" ] } } }