小程序设计规范指南｜UI 设计规范（24年11月）

小程序设计规范指南｜UI 设计规范（24年11月）

引用

腾讯

1.

https://codesign.qq.com/hc/article/design-system-mini-program/

小程序作为一种轻量级应用，在移动端场景中广泛应用。一个精心设计的界面不仅能提升用户体验，还能提高用户的使用效率和满意度。本文将详细介绍小程序的UI设计规范，包括视觉设计、布局设计、交互设计等方面，帮助开发者和设计师打造高效、美观且一致的小程序用户界面。

小程序视觉设计规范

颜色

• 主色：使用品牌的主色调，确保与品牌形象一致。主色通常用于导航栏、按钮和重要信息的突出显示。
• 辅助色：辅助色用于次要按钮、背景和其他次要元素，确保视觉层次分明。
• 中性色：使用中性色（如黑、白、灰）来平衡主色和辅助色。中性色通常用于文本、背景和分隔线等。

字体

• 字体选择：使用系统默认字体（如微信小程序的默认字体为 PingFang SC），保证跨平台的一致性和可读性。
• 字号和行高：
• 标题：18-24 px
• 正文：14-16 px
• 辅助文本：12 px
• 行高：通常为字号的 1.5 倍，确保文本的可读性和舒适性。
• 文本对齐：保持文本对齐一致，可以使用左对齐来提高可读性。

图标

• 尺寸和间距：图标尺寸通常为 24 px、32 px 或 48 px，具体依据使用场景而定。图标与文本之间应保持合理的间距（通常为 8 px）。
• 风格一致性：保持图标风格一致，尽量使用线性图标或填充图标，避免混用不同风格的图标。

间距和留白

• 内边距和外边距：保持统一的内边距和外边距（通常为 8 px、12 px 或 16 px），确保界面元素之间的间距一致。
• 留白：适当使用留白，提升界面的清晰度和美观度。

小程序布局设计规范

响应式布局

• 自适应屏幕：确保设计能适应不同屏幕尺寸，使用相对单位（如百分比）和弹性布局（如 Flexbox）来实现响应式设计。
• 栅格系统：使用 12 列或 24 列栅格系统，确保布局的一致性和灵活性。

导航

• 顶部导航栏：顶部导航栏通常包含返回按钮、标题和操作按钮（如“分享”或“更多”）。
• 底部导航栏：底部导航栏用于切换主要页面，通常包含 3-5 个导航项，图标和文本应清晰易懂。

按钮和交互元素

• 按钮样式：使用一致的按钮样式，如圆角矩形按钮，主按钮和次要按钮应有明显的视觉区分。
• 点击区域：按钮和交互元素的点击区域应足够大（至少 44 px x 44 px），以提高点击的准确性和舒适性。

小程序交互设计规范

动效和过渡

• 动效使用：使用动效提升用户体验，但避免过度使用。常见的动效包括加载动画、页面切换动画和按钮点击反馈。
• 过渡效果：过渡效果应简洁流畅，通常为 200-300 ms，确保用户不会感到等待时间过长。

用户反馈

• 加载状态：在数据加载过程中，使用加载动画或占位符提示用户等待。
• 操作反馈：用户操作后，应及时给予反馈，如按钮点击后的颜色变化或弹出提示框。

小程序色彩设计规范

色彩对比

• 对比度：确保文本与背景之间的对比度足够高，通常建议对比度至少为 4.5:1，以提高可读性。
• 色盲模式：考虑色盲用户的需求，避免仅通过颜色区分重要信息，可以使用图标或文本辅助。

语义化标签

• 标签使用：使用语义化的 HTML 标签（如 <header>、<nav>、<main> 等），提高页面结构的清晰度和可访问性。
• ARIA 属性：使用 ARIA 属性（如 aria-label、aria-hidden 等），增强对屏幕阅读器的支持。

小程序其他设计规范

图片优化

• 格式选择：使用适当的图片格式（如 PNG、JPEG、SVG），根据使用场景选择合适的格式。
• 压缩图片：使用工具压缩图片，减少文件大小，提升加载速度。

代码优化

• 精简代码：移除不必要的代码和注释，减少文件大小。
• 异步加载：使用异步加载技术（如 lazy loading），延迟加载非关键资源，提升页面初始加载速度。

通过遵循以上小程序 UI 设计规范，你可以打造出高效、美观且一致的小程序用户界面。您也可以使用腾讯 CoDesign 来上传设计规范，通过 Sketch 组件库，即可自动生成规范文档。Styles 跟 Symbols 属性与样式完整展示，历史版本回溯，更有检测使用数据 + 实时提醒功能。组件库多人维护合并，设计规范搭建更高效，全面提升设计研发协作效率。