Back to Details

frontend-ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend UI Designer Instructions

前端UI设计师指南

1. Visual Hierarchy & Composition

1. 视觉层次与构图

  • Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
  • F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
  • White Space: Use generous white space to reduce cognitive load and group related elements.
  • Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).
  • 优先级： 确保最重要的操作（CTAs）最为突出，通过尺寸、字重和颜色引导用户视线。
  • F模式与Z模式： 分别针对文本密集型和视觉密集型页面，设计符合用户自然扫描习惯的布局。
  • 留白： 充分使用留白降低认知负荷，同时对相关元素进行分组。
  • 分组： 利用邻近性和细微的边框/阴影对相关信息进行分组（接近法则）。

2. Color Theory & Application

2. 色彩理论与应用

  • The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
  • Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
  • Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
  • Dark Mode Support: Ensure all colors have a dark mode equivalent. Use lighter grays (e.g., Slate-800/900) instead of pure black for backgrounds to reduce eye strain.
  • Modern Palette Recommendation:
    • Primary: Indigo (#6366F1) or Slate (#0F172A)
    • Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
    • Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.
  • 60-30-10法则： 60%为主导中性色（背景/界面表层），30%为辅助色（边框/文本），10%为强调色（CTAs/链接）。
  • 对比度： 符合WCAG AA/AAA合规要求，使用高对比度比保证内容可读性。
  • 语义化颜色： 状态色使用统一规范（成功: #10B981，错误: #EF4444，警告: #F59E0B，提示: #3B82F6）。
  • 深色模式支持： 确保所有颜色都有对应的深色模式版本，使用更浅的灰色（如Slate-800/900）代替纯黑色作为背景，减少视觉疲劳。
  • 现代配色方案推荐：
    • 主色： 靛蓝(#6366F1)或Slate(#0F172A)
    • 表层色： 白色(#FFFFFF)或极浅灰(#F8FAFC)
    • 文本色： 标题使用Slate-900(#0F172A)，正文使用Slate-600(#475569)。

3. Typography

3. 排版

  • Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
  • Scale: Use a modular scale (e.g., Major Third).
    • H1: 2.25rem (36px), Bold
    • H2: 1.875rem (30px), Semi-bold
    • H3: 1.5rem (24px), Semi-bold
    • Body: 1rem (16px), Regular
    • Small: 0.875rem (14px), Medium
  • Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.
  • 字体搭配： 使用现代无衬线字体如'Inter'、'Geist'、'Roboto'或'SF Pro Display'，字体族数量控制在2种以内。
  • 字号梯度： 使用模块化字号比例（如大三度）：
    • H1: 2.25rem (36px)，粗体
    • H2: 1.875rem (30px)，半粗体
    • H3: 1.5rem (24px)，半粗体
    • 正文: 1rem (16px)，常规字重
    • 小字: 0.875rem (14px)，中等字重
  • 行高： 正文行高设为1.5-1.6保证可读性，标题使用更紧凑的行高（1.2-1.3）。

4. Layout & Spacing

4. 布局与间距

  • 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
  • Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
  • Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
  • Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.
  • 8pt网格系统： 所有间距使用4、8、16、24、32、48、64px的规格，打造有韵律感的专业视觉效果。
  • 容器化： 使用标准宽度（max-w-7xl、max-w-5xl）保证内容在宽屏设备上居中且易读。
  • 便当盒网格： 针对仪表盘或数据密集型视图可使用规整的网格布局，清晰结构化信息。
  • 响应式设计： 始终遵循移动端优先原则，使用灵活的flex/grid布局。

5. Modern UI Trends & Techniques (2025/2026)

5. 现代UI趋势与技巧（2025/2026）

  • Soft Shadows & Depth: Use 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    instead of harsh borders.
  • Glassmorphism: For overlays/navbars, use 
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);
    .
  • Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
  • Border Radius: Use 
    rounded-lg
    (8px) or 
    rounded-xl
    (12px) for a soft, modern aesthetic.
  • Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).
  • 柔和阴影与层次感： 使用
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    代替生硬的边框。
  • 玻璃拟态： 覆盖层/导航栏可使用
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);
    效果。
  • 细微渐变： 使用非常柔和的线性渐变（如Slate-50到白色）或网格渐变增加层次感，避免造成视觉干扰。
  • 圆角： 使用
    rounded-lg
    （8px）或
    rounded-xl
    （12px）打造柔和现代的美学风格。
  • 微交互： 添加有意义的动效（hover状态、按钮点击、加载骨架屏）提供反馈并提升使用愉悦感，动画时长控制在150-300ms以内。

6. Component Patterns & Polishing

6. 组件模式与打磨

  • Form Design:
    • Single Column: Preferred for readability and mobile-friendliness.
    • Labels: Always visible above inputs (avoid placeholders as labels).
    • Validation: Real-time inline validation with clear error messages.
    • Autofill: Support appropriate autocomplete attributes.
  • Empty States:
    • Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").
    • Educational: Use this space to teach users about the feature.
  • Skeleton Loading:
    • Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.
    • Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).
  • Navigation:
    • Thumb Zone: Place primary navigation/actions at the bottom on mobile.
    • Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".
  • 表单设计：
    • 单列布局： 优先使用，可读性更好且适配移动端。
    • 标签： 输入框上方的标签始终可见（避免用占位符代替标签）。
    • 校验： 实时行内校验，附带清晰的错误提示。
    • 自动填充： 支持合适的autocomplete属性。
  • 空状态：
    • 禁止空白： 提供有帮助的插图、说明文字和主操作按钮（例如："暂无项目。[创建项目]"）。
    • 教育属性： 利用这个空间向用户介绍功能用法。
  • 骨架屏加载：
    • 感知性能： 初始内容加载时使用闪烁的骨架屏代替通用加载动画。
    • 结构对齐： 模拟最终布局（图片、标题、文本行）减少布局偏移（CLS）。
  • 导航：
    • 拇指操作区： 移动端主导航/操作放在屏幕底部。
    • 手势支持： 支持常用手势，如"滑动返回"或"滑动关闭"。

7. Accessibility & Inclusivity (A11y)

7. 无障碍与包容性（A11y）

  • Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., 
    ring-2 ring-offset-2
    ).
  • Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
  • Screen Readers: Use semantic HTML (
    <button>
    , 
    <nav>
    , 
    <main>
    ) and ARIA labels where visual context isn't enough.
  • Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.
  • 键盘导航： 确保所有可交互元素都可聚焦，且有可见的聚焦状态（例如
    ring-2 ring-offset-2
    ）。
  • 触摸目标： 移动端触摸目标最小尺寸为44x44px（或48x48px）。
  • 屏幕阅读器支持： 使用语义化HTML（
    <button>
    、
    <nav>
    、
    <main>
    ），视觉上下文不足的地方补充ARIA标签。
  • 神经多样性适配： 尽可能提供清晰无干扰的模式，避免自动播放的媒体内容。

8. Best Practices & UX

8. 最佳实践与UX

  • Affordance: Buttons should look clickable. Links should be clearly identifiable.
  • Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
  • Consistency: Use a design system or component library to ensure buttons, inputs, and cards look identical across the app.
  • Ethical Design: Avoid dark patterns. Be transparent about data usage and provide easy opt-outs.
  • 可感知性： 按钮看起来要具备可点击的特征，链接要清晰可识别。
  • 反馈： 所有用户操作都要提供即时的视觉反馈（加载状态、成功提示、错误信息）。
  • 一致性： 使用设计系统或组件库，保证按钮、输入框、卡片在整个应用中样式统一。
  • 道德设计： 避免黑暗设计模式（误导用户的设计套路），数据使用透明，提供便捷的退出选项。

Available Resources

可用资源