小程序运行在各种尺寸的手机屏幕上，从全面屏到小屏旧机型都要兼容。与原生 App 相比，小程序的 UI 设计受平台组件体系约束，不能完全自由发挥。理解小程序 UI 设计规范，既能让界面在不同手机上保持一致体验，也能降低开发返工成本。本文从尺寸单位、导航结构、安全区域、组件一致性四个维度梳理设计要点。
小程序设计稿通常以 750rpx 为基准宽度，对应设计稿 750 像素。开发时使用 rpx 作为单位，框架会根据设备实际宽度自动换算：在 375 像素宽的手机上，750rpx 等于屏幕宽度；在 414 像素宽的手机上，同样 750rpx 仍然等于屏幕宽度。这种机制让设计稿一次输出，多机型自动适配。
设计师在出图时应基于 750 宽度画布，标注尺寸使用 rpx，而不是写死像素值。字体大小同样可用 rpx，但正文文字建议不要过小，避免小屏设备上阅读困难。成都的本地商家在选择模板或定制开发时，应提醒开发团队使用 rpx 体系，而不是写死 px。
小程序顶部导航栏由系统原生渲染，不建议自定义导航栏替代，否则会出现刘海屏、挖孔屏适配问题。导航栏左侧默认有返回按钮，右上角有胶囊按钮（关闭与更多），这两个元素的位置在不同机型上相对固定，设计时要预留安全间距，不要把重要内容放在胶囊按钮下方。
页面层级上，小程序建议保持不超过五层的页面栈深度。用户从首页进入列表、详情、结算、支付，已经占满五层，过深的层级会让返回路径变长，用户容易迷路。设计信息架构时，应尽量用弹层、抽屉替代新页面，缩短层级。
全面屏手机底部有系统手势条，顶部有刘海或挖孔，设计时必须预留安全区域。底部固定按钮不能紧贴屏幕底边，要留出底部安全距离，否则手势条会遮挡按钮内容。页面滚动到底部时，最后一项也要留出底部 padding，避免被手势条压住。
横屏适配主要针对视频、直播、大屏展示类页面。竖屏小程序默认按竖屏设计，若某个页面需要横屏，应在该页面单独配置横屏模式，并重新设计横屏下的布局，不能直接拉伸竖屏界面。
小程序提供一整套官方组件，包括按钮、输入框、弹窗、 tab 栏、列表、表单等。优先使用官方组件的好处是：交互行为与微信原生体验一致，用户无需学习；组件自动适配深色模式与系统字号；减少开发工作量。
自定义组件虽然灵活，但要付出适配成本。例如自己画一个 tab 栏，就要处理选中态、未读角标、安全区域、横竖屏切换等细节，官方组件已经封装好这些细节。除非品牌有强烈视觉定制需求，否则核心交互组件建议直接使用官方样式。
小程序默认使用系统字体，无需额外引入字体文件。正文字号建议 28rpx 至 32rpx，辅助说明文字 24rpx 至 26rpx，大标题可到 40rpx 以上。字色层级建议不超过三级：主标题接近黑色，正文深灰，辅助说明中灰，避免全页面都用纯黑造成视觉疲劳。
色彩上应与品牌主色统一，强调色用于主要按钮与关键操作，次要按钮使用描边或浅灰底。整屏颜色不宜超过三种主色。状态色（成功、警告、错误）应使用行业通用色值，减少用户理解成本。
每个点击操作都应有明确反馈。按钮点击时应有按压态变化，表单提交时应有 loading 提示，网络请求期间应有骨架屏或加载动画，避免用户以为卡死而重复点击。操作成功后用轻提示反馈，操作失败要说明原因而不是笼统提示「失败」。
空状态设计也容易被忽略。搜索无结果、购物车为空、订单列表为空时，应给出引导下一步操作的插画与文案，而不是一片空白。好的空状态能把流失转化为继续使用的动力。
设计稿交付时应同时标注尺寸、间距、字号、色值，关键交互说明状态变化（默认、按压、禁用、加载）。开发完成后，应在至少三种不同尺寸手机上走查，重点检查刘海屏、小屏机、安卓低端机上的表现。
UI 设计规范不是束缚创意，而是把常见适配问题交给框架处理。遵循官方规范、保持与微信原生体验一致，是小程序 UI 最稳妥的设计路线。
18140041855（柏先生）
