成都小程序UI设计规范：尺寸、组件与交互要点

成都小程序UI设计规范，是保证界面统一、体验流畅的基础。设计规范覆盖尺寸适配、字体、色彩、组件、交互、布局六个维度，配合规范的设计流程，才能产出高质量的小程序界面。本文把小程序UI设计的核心要点讲清楚，帮助成都设计团队和开发者建立一套可落地、可复用的设计规范。

一、设计尺寸与适配

尺寸和适配是设计稿的第一步，错了全盘皆错。

1.1 设计基准

小程序设计稿通常以iPhone 6/7/8的375×667pt为基准宽度，这是最通用的设计基准。设计稿按375宽度出图，配合rpx（750rpx=屏宽）单位，可以适配绝大多数手机。设计基准统一，团队协作才顺畅，开发还原才准确。

1.2 单位规范

小程序使用rpx作为响应式单位：750rpx等于屏幕宽度，设计稿中的1px在iPhone 6下约等于2rpx。设计规范中要明确：字体、间距、图标用rpx标注，图片按设计稿尺寸导出。单位规范统一，多机型适配才不出错。

1.3 适配原则

适配核心是"关键内容安全区可见"：顶部避开胶囊按钮区域，底部避开Home指示条，重要按钮和文字在安全区内。适配时优先保证核心功能的可用性，次要装饰可以缩放或裁切。适配原则写进规范，开发时逐一对照检查。

二、字体规范

字体是信息传达的基础，规范要清晰。

2.1 字号体系

建立阶梯字号体系：大标题28-32px、标题24px、正文16-17px、辅助文字14px、说明文字12px。字号体系分层明确，用户扫一眼就能分清主次。字号过小影响可读性，过大浪费空间，按层级取用最稳妥。

2.2 字体选择

小程序字体建议用系统默认字体栈：中文用PingFang SC、微软雅黑，数字用DIN等，避免自定义字体带来的加载成本和兼容问题。数字金额用等宽或tabular数字，对齐更美观。字体选择以稳定兼容为优先。

2.3 行高字重

正文行高建议1.5-1.6倍字号，标题行高1.2-1.3倍；字重层级：标题用Medium或Semibold，正文用Regular，强调内容用Medium。行高和字重配合字号形成清晰的视觉层级，长文阅读不累，重点信息突出。

三、色彩体系

色彩是品牌识别和视觉引导的核心。

3.1 主色确定

主色对应品牌色，用于按钮、链接、选中态等关键交互元素，占界面色彩的主体。主色选择要兼顾品牌识别和功能表现：饱和度适中、对比度达标、明暗场景都可用。主色确定后，全端统一使用，形成品牌记忆。

3.2 辅助色

辅助色用于标签、背景、装饰等次级元素，与主色协调不抢戏。辅助色一般2-3个，配合中性色（黑、白、灰）构建完整色彩体系。辅助色应用要克制，色彩过多会让界面杂乱，影响信息传达。

3.3 状态色

状态色传达操作结果：成功用绿色、警告用橙色、错误用红色、禁用用灰色。状态色语义要明确统一，用户看到颜色就懂含义。状态色的对比度要保证可辨识，尤其错误和警告色在深浅背景下都要清晰。

四、组件规范

组件是界面的积木，规范组件提升效率和一致性。

4.1 基础组件

基础组件包括按钮、输入框、选择器、开关、弹窗等，每个组件都要定义尺寸、状态（默认、按下、禁用）、文案规范。按钮分主按钮、次按钮、文字按钮，输入框定义高度和边框样式。基础组件统一，全端样式一致。

4.2 导航组件

导航组件包括顶部导航、底部Tab、面包屑、返回等。顶部导航承载页面标题和关键操作，底部Tab一般3-5个核心入口。导航的层级和数量要克制，用户在任何页面都知道自己在哪、能去哪。

4.3 业务组件

业务组件按业务沉淀：商品卡片、订单状态、会员卡、优惠券、列表项等。业务组件在基础组件上封装，统一数据结构和展示规则。业务组件沉淀后，新页面开发直接复用，效率和质量双提升。

五、交互规范

交互是体验的灵魂，规范交互让产品好用。

5.1 操作反馈

每一次操作都要有反馈：点击有按压态，提交有loading，成功有提示，失败有说明。反馈要即时、明确、不打断：轻操作轻提示，重操作（支付、删除）要二次确认。反馈缺失会让用户困惑，反馈过度会打扰操作。

5.2 加载体验

加载要有设计：首屏加载用骨架屏，局部加载用进度指示，长任务显示进度和结果。加载时长超过3秒要给用户预期（"正在处理，约1分钟"）。加载体验决定用户耐心，卡顿和空白是最伤体验的。

5.3 流程设计

核心流程（下单、支付、预约、退款）要短、要顺：步骤尽量少，信息尽量少，默认值尽量多。流程中的每一步都要清晰，错误时给出明确修正指引。流程设计要站在用户角度走一遍，把用户可能卡住的点提前化解。

六、布局规范

布局决定信息呈现的秩序。

6.1 间距规范

建立间距体系：页面边距16-24px，模块间距16-32px，元素间距8-16px，用8px为基础单位（8、16、24、32）保证节奏统一。间距规范让界面呼吸感一致，避免忽紧忽松。间距是设计质量的细节，规范了才专业。

6.2 信息层级

信息层级用"位置+大小+色彩+字重"四要素区分：重要信息放视觉中心、更大、更醒目；次要信息弱化。一个页面的核心动作要突出（一个主按钮），信息层级清晰，用户一眼抓住重点，操作效率高。

6.3 留白原则

留白不是浪费，是让界面透气、让重点突出。卡片、分组、区块之间保留充足留白，内容不拥挤；重要内容周围留白更多，视觉更聚焦。留白过少界面压抑，留白过多信息稀疏，把握平衡是关键。

七、设计流程建议

规范落地靠流程，流程清晰出活快。

7.1 需求梳理

设计前先梳理需求：功能目标、目标用户、核心场景、竞品参考。需求梳理让设计有依据，避免凭感觉设计。把功能清单和优先级列清楚，设计资源投入到核心功能上，效率和效果都更好。

7.2 原型设计

先出低保真原型，确认信息架构和页面流程，再进入视觉设计。原型阶段验证逻辑（用户能不能完成任务），视觉阶段打磨体验（界面好不好看）。原型先行能避免返工，视觉设计更聚焦。

7.3 视觉设计

原型确认后做视觉设计：按规范用色、用字、用组件，输出高保真设计稿。视觉稿要标注清楚（尺寸、颜色、状态），方便开发还原。视觉完成后走查：对照规范逐项检查，规范一致、细节到位，设计稿才合格。