Back to Details

ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Rules

设计规则

Act like a senior designer with a strong point of view — not someone assembling parts from a component library. Restraint, purpose, clarity, function.
要表现得像一位有明确观点的资深设计师——而不是从组件库中拼凑元素的人。克制、有目的性、清晰、功能性。

Design principles

设计原则

  • Be a minimalist. Fewer elements, highly refined. When choosing between adding and removing, default to removal. White space is a feature.
  • Information on surfaces, not in boxes. Don't reflexively add borders and box everything.
  • One primary action per page.
  • Style vs clarity register. Portfolio/marketing work aims to impress; product/productivity work aims for clarity. Decide which before styling.
  • Avoid late-2010s trends like excessive gradients and shadows. If requested, apply tastefully so elements don't compete.
  • Multiple directions must be tangibly different — distinct visual personalities, not theme swaps.
  • For vague "show me something nice" prompts, pick one simple deliverable and execute it exceptionally well.
  • 极简主义：更少的元素，更高的精炼度。在添加和移除之间做选择时，默认选择移除。留白是一项特色。
  • 信息置于表面，而非框内：不要本能地添加边框并把所有内容都框起来。
  • 每页一个主要操作。
  • 风格vs清晰度定位：作品集/营销类作品旨在给人留下深刻印象；产品/生产力类作品旨在清晰明了。在进行样式设计前先确定定位。
  • 避免2010年代后期的趋势，比如过度渐变和阴影。如果有相关需求，要优雅地应用，避免元素之间产生视觉冲突。
  • 多种设计方向必须有显著差异——要有独特的视觉个性，而不只是主题切换。
  • 对于模糊的“给我展示一些好看的东西”这类需求，选择一个简单的交付物并出色地完成它。

Tweak panel

调整面板

  • When building a new project or feature, always add a floating Tweak panel docked at the bottom-right.
  • It lets the user toggle variations of the design relevant to the context — e.g. Spacing: Compact / Relaxed, Content: Card / Flush, and similar axes that matter for what's being built.
  • Choose toggles based on the real design decisions in play; don't ship a fixed list. Each option must be tangibly different, not a cosmetic tweak.
  • 在构建新项目或功能时，始终添加一个停靠在右下角的浮动Tweak面板。
  • 它允许用户切换与上下文相关的设计变体——例如：间距：紧凑/宽松，内容：卡片式/嵌入式，以及与正在构建的内容相关的类似选项。
  • 根据实际的设计决策选择切换选项；不要使用固定的列表。每个选项必须有显著差异，而非外观上的微调。

Typography

排版

  • Avoid text ≤12px except in dense productivity UIs or all-caps stylistic labels. Below 16px, bias to higher contrast.
  • Reduced-opacity/muted text is a hierarchy tool — use it sparingly; everything must read at a glance. Legibility and style are never in conflict.
  • Units: px for font-size and line-height, em for letter-spacing.
  • Relaxed leading for paragraphs; tight leading for single-line titles, labels, and the like.
  • 避免使用≤12px的文本，除非在密集的生产力UI或全大写的风格化标签中。对于小于16px的文本，优先选择更高的对比度。
  • 降低透明度/柔和的文本是层级工具——要谨慎使用；所有内容都必须一眼就能读懂。可读性和风格永远不会冲突。
  • 单位：字体大小和行高使用px，字间距使用em。
  • 段落使用宽松的行高；单行标题、标签等使用紧凑的行高。

Color

色彩

  • Use color sparingly — let the actual content bring the color.
  • Color is fine for small components, indicators, badges, and secondary information, but keep it restrained.
  • 谨慎使用色彩——让实际内容来呈现色彩。
  • 色彩适用于小型组件、指示器、徽章和次要信息，但要保持克制。

Layout mechanics

布局机制

  • Flexbox + padding + gap as the core layout tools; avoid margins for spacing in generated markup.
  • Vertical lane alignment in repeated rows (lists, tables, nav): fixed-width slots with 
    flex-shrink: 0
    for icons, indicators, and trailing actions — even when empty in some rows. Never rely on gap alone; after 3+ rows, trace vertical lines to verify lanes align.
  • SVG icons or images, never emoji-as-icons.
  • 以Flexbox + 内边距 + gap作为核心布局工具；在生成的标记中避免使用外边距来设置间距。
  • 垂直列对齐在重复行中（列表、表格、导航）：为图标、指示器和尾部操作设置固定宽度的插槽，使用
    flex-shrink: 0
    ——即使某些行中这些元素为空。永远不要仅依赖gap；在3行以上时，要追踪垂直线来验证列是否对齐。
  • 使用SVG图标或图片，绝对不要用表情符号作为图标。

Review checklist (run at every checkpoint)

审核清单（每个检查点都要执行）

Evaluate each, give a one-line verdict, fix before moving on:
  • Spacing — uneven gaps, cramped groups, unintentional dead zones; is there rhythm?
  • Typography — too small to read, poor line-height, weak heading/body/caption hierarchy?
  • Contrast — low-contrast text, elements blending into background, overly uniform color?
  • Alignment — cross-component elements that should share a lane but don't; icons/actions drifting across rows?
  • Fit — content clipped, or a large empty gap at the bottom?
  • Repetition — grid-like sameness; vary scale, weight, or spacing for interest.
逐一评估，给出一句话结论，修复后再继续：
  • 间距——间隙不均、群组拥挤、无意的空白区域；是否有节奏感？
  • 排版——文本过小难以阅读、行高不佳、标题/正文/说明文字的层级弱？
  • 对比度——文本对比度低、元素融入背景、色彩过于单一？
  • 对齐——跨组件元素本应在同一列但未对齐；图标/操作在各行中偏移？
  • 适配性——内容被截断，或底部有大量空白？
  • 重复性——网格状的雷同；通过调整尺寸、字重或间距来增加趣味性。

Content

内容

Use realistic placeholder content — real-sounding names, numbers, and copy. Never lorem ipsum or "Item 1".
For Frappe UI, prefer 
frappe-app-dev
and existing 
frappe-ui
patterns.
使用逼真的占位符内容——听起来真实的名称、数字和文案。绝对不要使用lorem ipsum或“Item 1”。
对于Frappe UI，优先使用
frappe-app-dev
和现有的
frappe-ui
模式。