10组小程序界面设计分享

小程序界面设计到底该从哪里下手？这是被问过很多次的问题，答案藏在具体页面里。一套能用的界面，靠的是把首页、列表、详情、表单、个人中心这 5 类基础页面各自的职责理清楚，而不是堆视觉特效。下面按页面类型拆开讲，每组都给出可对照的执行细节。

首页：3 秒内让人知道你是干什么的

首页承担的是分流任务。用户打开后的头一屏，必须回答三个问题：这里卖什么、我能去哪、下一步点什么。做法上，主视觉区控制在屏幕高度的一半以内，顶部放品牌名与一句业务说明，中间用 2-4 个功能入口做宫格，底部留出活动位。

宫格图标统一尺寸，一般取 80×80 像素、圆角 12 像素，图标风格要么全线性要么全填充，别混搭。功能入口超过 8 个就收进「更多」，首页不是导航大全。

色彩上建议定 1 个主色加 1 个辅助色，主色用在按钮和关键信息，辅助色只做点缀。背景色用接近白的浅灰，比纯白更耐看，也能让卡片浮起来。

列表页与详情页：信息密度和点击欲望的平衡

列表页的核心是卡片。一张商品卡通常包含图片、标题、价格、辅助标签四块，图片按 1:1 或 4:3 裁切，标题限 2 行、超出省略，价格字号比标题大 2-4 个字号档位，位置固定在卡片左下。卡片间距按 8 或 12 的倍数给，视觉上才不散。

筛选栏放顶部，条件控制在 3 个以内，多了用户懒得点。加载方式用下拉刷新加分页加载，每页 10-20 条，一屏塞太多反而拖慢首屏渲染。

详情页的转化区怎么放

详情页从上到下依次是主图轮播、价格与标题、规格选择、图文详情、用户评价。购买按钮做成底部悬浮条，高度 48-56 像素，始终可点，滚动时固定在视口底部。规格选择用弹层，别跳新页面，跳走一次就丢一批人。

表单页与个人中心：把摩擦降到能忍的程度

表单页常见的毛病是字段太多。注册、下单、预约这类表单，能砍的字段一律砍，手机号加验证码两步足够登录，其余信息放到使用过程中逐步补。输入框高度不低于 44 像素，标签放在输入框上方而不是框内，避免输入后标签消失。

报错提示写在对应字段下方，用红字加一句具体原因，别只弹一个「输入有误」。提交按钮在字段全部填完前保持置灰，这个细节能挡住一批无效提交。关于表单之后的数据怎么接、接口怎么排期，可参考《做小程序》里对开发衔接的说明，界面设计得再顺，后端没对接上照样卡住。

个人中心的栏目取舍

个人中心通常放头像昵称、订单入口、地址管理、客服、设置五块。订单状态做成 4 个图标横排：待付款、待发货、待收货、已完成，每个图标下方配数字角标。设置里把「清除缓存」「关于我们」「用户协议」收进去，别占主屏位置。

交互细节与验收清单

界面设计的功夫多半落在交互反馈上。按钮点击要有按压态，加载超过 1 秒要显示骨架屏或加载动画，操作成功给轻提示，2 秒自动消失。页面跳转用右进右出，返回操作要能逐级退回首页。

字号体系按经验定 5 档：大标题 20、小标题 17、正文 15、辅助说明 13、角标 11，单位是像素。行高取字号的 1.4-1.5 倍，正文行距松一点，长文才读得下去。

验收时逐项核对下面这张表，逐条打勾比凭感觉更靠谱：

遇到过的情况是，一套界面在测试机上跑得顺，换到窄屏手机上按钮直接压住文字，返工改了一周。适配这步留 3-5 天专门过一遍不同尺寸，比上线后救火省事得多。

还有一点，10 组界面的风格要统一，别这页圆角那页直角、这里扁平那里拟物。设计稿交付时附一份组件规范，把颜色值、字号、间距、圆角写清楚，开发照着做，界面才不会走样。

总结

把 10 组小程序界面设计放在一起看，规律其实就一条：每个页面先想清楚用户来这里要完成什么动作，再决定放什么元素。首页做分流、列表做筛选、详情做转化、表单做减法、个人中心做收纳，配合统一的字号色彩体系和 44 像素的点击底线，界面自然就立住了。设计稿交付前把组件规范一并给到开发，能省掉后期大半的扯皮。