珙县小程序UI设计规范：尺寸、组件、交互，一套规范走天下

小程序UI设计规范有三大块：设计尺寸、组件使用、交互准则。设计稿统一用375px宽度、组件按官方规范调用、交互遵循平台习惯，一套规范走天下。珙县设计团队把这三块规范吃透，出图又快又规范，开发和测试都省心。下面把规范要点整理清楚。

一、设计尺寸规范

1. 设计稿尺寸

小程序设计稿统一用375px宽度（iPhone X逻辑宽度）：设计稿以375px为基准，向上适配。长度单位用rpx（小程序响应式单位）：750rpx=屏宽。设计时按375px出图，标注用rpx。统一基准，开发和设计沟通零障碍。

2. 字体规范

字体规范：正文字号建议14到16px，标题字号18到22px，大标题24px以上。行高1.4到1.6倍。字体层级清晰：标题、正文、辅助信息一目了然。字号层级是信息架构的视觉表达，层级乱了用户就读不懂。

3. 间距与安全区

间距规范：页面边距建议16px到24px，模块间距12到20px。安全区：顶部状态栏、底部tab栏、刘海区域要避开。按钮、卡片等可点击元素建议高度44px以上（触达舒适区）。间距和尺寸统一，页面才整齐。

二、组件使用规范

1. 基础组件

小程序提供基础组件：按钮、输入框、导航栏、tab栏、列表、弹窗。设计时优先使用官方组件：样式统一、兼容性好、开发成本低。官方组件不能满足时，再自定义组件。基础组件是界面的积木，规范使用保证一致性。

2. 颜色与图标

颜色规范：主色一个、辅色一到两个、功能色（成功、警告、错误）固定。颜色系统要定义清楚：主色用在按钮、链接、高亮。图标规范：风格统一（线性或填充）、尺寸统一、语义清晰。颜色和图标是品牌的视觉语言，规范才能一致。

3. 组件库沉淀

团队要沉淀组件库：通用组件做成可复用组件，统一设计统一开发。组件库的好处：新页面复用老组件，效率翻倍；全站风格统一，体验一致。组件库持续迭代：新组件补充、旧组件优化。组件库是设计团队的资产。

三、交互设计规范

1. 手势习惯

交互要遵循微信生态习惯：下拉刷新、左右滑动、上拉加载、长按识别。用户在小程序里的操作习惯与微信一致，学习成本低。手势设计要符合直觉：返回、关闭、确认的位置统一。交互违背习惯，用户就迷路。

2. 反馈设计

交互反馈要即时：点击有反馈（按钮态变化）、操作有结果（成功/失败提示）、加载有状态（loading）。反馈缺失，用户不知道操作成没成功。反馈设计要点：即时、清晰、不打断。好的反馈体验，用户才敢放心操作。

3. 页面层级

页面层级要清晰：主页面、子页面、弹窗层级分明。导航路径要短：用户三步内到达目标功能。层级混乱，用户找不到功能。页面层级设计：tab切换在主层级、详情页下钻、弹窗处理轻操作。

四、设计规范落地要点

1. 规范文档

规范要文档化：设计规范写成文档（尺寸、字体、颜色、组件、交互），团队共同遵守。文档是团队的语言：新成员快速上手，跨团队沟通有依据。规范文档要版本管理：更新有记录、变更要通知。规范文档是设计质量的底线保障。

2. 设计评审

设计稿要评审：出图前按规范自查、评审时对照规范检查。评审要点：尺寸是否正确、组件是否规范、交互是否合理。评审发现问题在开发前改，成本最低。设计评审是规范落地的把关环节，不能省。

3. 规范迭代

规范要持续迭代：根据用户反馈、产品变化、平台更新优化规范。规范不是死板教条：特殊场景可以突破，但要记录原因。规范的目的是效率和质量，不是为了限制创意。规范迭代让设计体系越来越完善。

五、常见设计问题

1. 尺寸混乱

常见问题一：尺寸混乱。有的页面用px、有的用rpx，适配错乱。对策：统一用rpx标注、统一基准宽度。尺寸混乱是最常见的问题，规范定好就解决大半。

2. 组件自造

常见问题二：组件自造。不用官方组件，自己造轮子，兼容性差、开发成本高。对策：优先官方组件，自定义要评审。组件自造浪费开发资源，也破坏一致性。

3. 交互随意

常见问题三：交互随意。操作方式忽左忽右，用户迷路。对策：遵循微信习惯、统一交互模式。交互随意是大忌，规范交互是体验的基本保障。

小程序UI设计规范，尺寸、组件、交互三块抓牢。珙县设计团队按规范出图、按规范评审、持续迭代规范，设计效率和质量同步提升，小程序的用户体验自然更好。