小程序要兼容从全面屏到小屏旧机型等多种设备，界面设计既不能脱离平台组件体系自由发挥，又要在不同屏幕上保持一致观感。掌握适配参数、导航避让、安全区域与组件状态等规范，可以减少开发返工与走查问题。本篇从设计落地与走查核对的角度，梳理小程序 UI 设计规范的要点。
小程序设计稿通常以 750rpx 为基准宽度，与 750 像素画布对应。开发使用 rpx 单位时，框架按设备实际宽度自动换算：无论屏幕宽窄，750rpx 都对应整屏宽度。这种响应式机制让一套设计稿可以适配多机型，而不必为每种屏幕单独出图。
标注尺寸时应使用 rpx 而非写死像素，字号同样可按 rpx 标注，但正文不宜过小，避免小屏机上阅读吃力。稻城县的商家在选型或定制开发时，可向开发团队确认界面是否采用 rpx 体系，防止出现固定宽度在小屏溢出、大屏留白的问题。
顶部导航栏由系统原生渲染，一般不建议自行替换自定义导航栏，否则容易在刘海、挖孔机型上出现错位。导航左侧为返回控件，右上角为胶囊按钮，二者位置在各机型上相对固定。设计时应在这两个区域下方预留间距，不要把标题、操作按钮放到胶囊按钮正下方。
若确需定制顶部样式，应参照系统导航高度与安全间距单独处理，并在多机型上验证，不能简单铺满顶部区域。
全面屏机型上下两端都有系统占用区域，底部是手势导航条，顶部是刘海或前置摄像头开孔，界面排布要为这些区域留出避让空间。固定在底部的操作按钮需与屏幕下缘保持安全间距；长列表滚动到末尾时，最后一条内容也要补内边距，防止被手势导航条遮挡。
视频、直播与大屏展示类页面才需要考虑横屏布局。常规小程序以竖屏为默认形态，个别页面确需横屏时，应在该页面单独开启横屏开关，并按横屏宽度重新排布控件位置，不能把竖屏界面直接横向拉伸填满。
平台内置了按钮、输入框、弹层、标签栏、列表与表单等基础控件。直接调用内置控件，交互手感与系统界面保持一致，老用户不用重新适应；控件本身会跟随深色模式与系统字号自动调整，开发侧也省去了自行兼容的工作量。
自定义组件虽然视觉灵活，但要自行处理选中态、未读角标、安全区域与横竖屏切换等细节。除非有明确的品牌视觉定制需求，核心交互组件建议沿用官方样式，把自定义精力放在品牌配色与视觉素材上。
界面文字沿用设备自带字体，不必单独打包字体资源。字号按层级划分：正文落在 28rpx 到 32rpx 之间，次要说明文字取 24rpx 到 26rpx，页面主标题可超过 40rpx。灰度层级控制在三档以内，标题用接近黑色的深灰，正文用常规深灰，注释用中灰，整屏避免清一色纯黑带来的视觉压迫。
配色围绕品牌主色展开，主色只用于主按钮与关键动作，次级操作按钮以描边或浅底色呈现，一屏之内主色数量控制在三种以内。表示成功、警示、出错的颜色沿用大众熟悉的通用配色，避免用户额外辨认含义。
用户点下任何控件都应看到对应响应：按钮按下时有视觉变化，表单提交后进入加载状态，数据请求期间以骨架屏或动画占位，防止用户以为无响应而反复点击。结果反馈分轻重两级，成功用简短提示带过，失败则点明问题出在哪一步，不要只回一句笼统的失败。
页面没有数据时的状态常被设计遗漏。搜索无结果、购物车尚未加入商品、订单列表为空等场景，应搭配插画与下一步操作提示，不要留下空白页面。处理得当的空状态能够引导用户继续操作，减少直接退出。
设计交付时应标注尺寸、间距、字号与色值，并说明各交互状态（默认、按压、禁用、加载）。开发完成后，在至少三种不同尺寸手机上走查，重点核对刘海屏、小屏机与低端安卓机型的表现。规范不是束缚创意，而是把常见适配问题交给框架处理，遵循原生体验一致的路线，界面在各机型上才会稳定可靠。
18140041855（柏先生）
