小程序怎么排才不乱？15个布局名词看图懂
文章目录
前两期小程序的文章发完后，有好多朋友说：做小程序还是觉得很乱，页面上的信息不知道该怎么摆。
想让AI帮忙改，能说的也只有“好看点”“清爽点”“极简一点”。但标题该放多大、图片占多少位置、按钮摆在哪里，这些具体的要求，又不知道怎么表达。
这篇继续用Punk咖啡馆点单小程序举例。菜单里有美式18元、拿铁24元、摩卡28元；拿铁选大杯加4元，两杯合计56元。我们沿着菜单、规格、购物袋、确认订单这四个页面，讲清15个布局与视觉名词，每个词都给一张对应的示意图。
图中的字号、间距和尺寸，是这套咖啡馆示例的设计选择。 做自己的小程序时，还要结合内容、屏幕和微信里的实际效果调整。
01. 信息架构 IA：功能分别放在哪里
IA是 Information Architecture，信息架构。它决定内容怎么归类、页面之间怎样组织，以及用户到哪里找一个功能。咖啡馆可以把“点单、订单、我的”作为三个平级入口；杯型和冷热则放在饮品规格页里。
菜单里选咖啡，规格页里选大杯，购物袋里改数量，订单页里查看已提交的记录。这样每个入口都有明确用途，用户也能预判点进去会看到什么。
容易排乱的地方，是把“大杯、冰、付款”也做成底部主导航。它们属于点单过程中的选择和操作，应当跟着对应页面出现。
02. 用户流程 User Flow：用户怎样完成一次点单
User Flow就是用户流程，描述用户从进入到完成任务的路径。信息架构说明功能的位置，用户流程继续说明先点什么、选择以后到哪里，以及中途怎么返回。
在这个例子里，路径是“菜单选拿铁 → 选大杯和冰 → 加入购物袋 → 核对两杯56元 → 确认订单”。如果选错规格，应当能回去修改；购物袋没有商品时，也要给“去选咖啡”的入口。
画流程时先把选择、返回和结果接起来。只画五张漂亮页面，却没有安排它们之间的关系，前端就很难做出完整的点单体验。
03. 线框图 Wireframe：先决定什么放在哪里
Wireframe叫线框图，用方块、文字占位和简单边界表达页面结构。它先说明门店、商品、价格和操作的位置，图片、品牌色与阴影可以后面再加。
咖啡菜单的线框可以分成顶部门店区、中间商品列表、底部购物袋栏。先看这三个区域有没有挡住彼此，再检查商品行是否放得下名称、价格和“选规格”。
一开始就把活动海报、复杂背景全部做完，后面改结构时会牵动很多细节。线框阶段把位置定清楚，后续的视觉修改才有稳定的基础。
04. 首屏 First Screen：打开首页，先让用户看到什么
First Screen就是首屏，指页面打开后，在当前设备上无需滚动就能看到的区域。它随屏幕高度、顶部导航和底部操作栏变化，没有一个所有手机通用的固定高度。
咖啡馆首页可以有不同侧重。左边用大图展示店铺氛围、品牌或当期活动，下面放门店信息；右边用较小的横幅，把饮品图片与价格一起放进首屏。两边底部都有“菜单”入口，都能直接进入点单页。
首页放一张大图，本身是合理的设计选择。 如果首页承担品牌展示，大图能让氛围和主题集中呈现；如果希望用户在首页比较饮品，则需要给商品信息留位置。商品展示得多，也不代表这个首页就一定更好。
安排首屏时，先确定希望用户了解什么、下一步做什么，再检查菜单等关键入口是否容易找到、横幅中的文字是否清楚。图中两种布局适合不同的展示目标，不能仅凭图片大小判定合理与否。
05. 视觉层级 Visual Hierarchy：哪些内容更容易先被注意到
Visual Hierarchy叫视觉层级，通过位置、字号、字重、颜色与留白，让页面上的信息和操作分出主次。下面两边都是同一张拿铁规格页，内容与功能相同，重点看它们怎样强调。
左边把名称、介绍和价格写得差不多，底部“收藏、分享、加入购物袋”又都是同样醒目的绿色按钮。扫一眼时，三个操作都在争抢注意力，名称和价格却不突出。
右边把“拿铁”和28元价格加大、加粗，介绍降低强调程度；杯型和冷热分组显示，选中的大杯和冰有标记。收藏、分享改成小图标，加入购物袋保留宽大的绿色主按钮。
对照两边，可以直接看出哪个按钮更容易被发现，哪条信息更像标题。视觉层级调整的是强调程度，次要介绍仍要读得清楚；“大杯加4元”影响价格，也应贴近选项，不能藏在很浅、很小的备注里。
06. 栅格 Grid：用一组列把内容排齐
Grid叫栅格，由列、列间距和页面边距组成，用来安排内容宽度。这里的“设计栅格”是一套排版规则，代码可以用Flex等方式实现，具体使用CSS Grid前要核对目标小程序环境的支持情况。
以375px宽的商品推荐区为例：左右各留16px，可用宽度是343px；两列之间留12px，每列就是165.5px。商品图片、名称和价格落在各自的列里，页面边缘也就稳定了。
咖啡菜单可以用单列商品行，推荐区可以用两列。列数要跟内容一起判断，长名称、复杂规格和多个操作挤进窄列，会让页面很难扫读。
07. 对齐 Alignment：同类内容从同一位置开始
Alignment就是对齐。在咖啡菜单里，商品名称、介绍和价格共享左边的起点，“选规格”按钮落在右边统一的位置，用户往下扫时就能快速比较。
对齐也包含垂直方向的安排。一行里有咖啡图片、两行名称和按钮时，要明确按钮是跟整行居中，还是跟价格靠近；同类商品行使用同一规则。
例如星巴克真实页面里，左侧是分类，右侧是商品；规格页里的杯型选项也按组排列。下面红框标出的区域，可以用来对照商品区域和选项是否排齐。
08. 留白 Whitespace：用距离表示哪些是一组
Whitespace叫留白，指内容之间主动保留的空间，不要求这块区域必须是白色。拿铁名称和介绍靠近，整条拿铁商品与下一条摩卡之间隔得更开，用户就能看出它们属于不同组。
本例可以让名称与介绍间隔4px、同一商品内部不同区域间隔8px、商品行之间间隔16px。这样距离也有层次，页面不用给每个小部件都加粗边框。
全部间距一样大，会让同一条商品显得零散；全部一样小，又会把不同商品粘在一起。先区分组内与组间，再决定具体数值。
09. 响应式布局 Responsive Layout：屏幕变了，排版怎样跟着变
Responsive Layout叫响应式布局，指界面根据可用空间调整宽度、排列和换行。手机从375px变成430px时，商品信息区可以分到更多宽度，文字不用跟着无限放大。
本例让商品行占满内容区，图片和按钮保持合适的尺寸，中间名称区域伸缩。长名称可以换行，按钮需要保留自己的空间，不能被商品名挤到屏幕外。
如果只把每个px都换成rpx，仍然可能遇到名称溢出或按钮遮挡。检查时要同时放入长名称、多行介绍和不同金额，看看布局是否容得下内容变化。
10. 安全区域 Safe Area：给系统边缘和胶囊留空间
Safe Area叫安全区域，用于避开刘海、屏幕圆角、底部手势等可能影响内容显示与操作的区域。微信右上角的胶囊菜单还要另外避让：它是平台控件，不能把胶囊的位置直接当成整页安全区域的边界。
使用默认导航栏时，先检查正文与底部操作栏。需要自定义顶部导航时，再根据实际设备和胶囊的位置安排门店、搜索及返回入口，胶囊位置可以通过wx.getMenuButtonBoundingClientRect()获取。
固定购物袋栏底下要留安全区空间，正文末尾也要能滚到操作栏上方。顶部与底部都不能直接照一张截图写死高度，最终要在微信里检查。
11. 设计变量 Design Token：同一种样式有同一个名字
Design Token常译为设计变量或设计令牌，给可复用的颜色、字号、间距等值命名。例如color.brand表示品牌色，space.page表示页面边距，radius.panel表示面板圆角。
在这套咖啡馆里，页面边距统一为16px，面板圆角统一为12px，主操作使用同一个品牌绿。菜单、规格、购物袋都引用相同定义，后面调整品牌色时能一起变化。
这些名字由项目自己约定，不是微信规定的字段。设计变量可以保存在规范或代码中；采用哪种代码实现，要跟项目写法和运行环境一起确认。
12. 语义色 Semantic Color：颜色为什么出现在这里
Semantic Color叫语义色，用颜色配合文字、图标或形状表达状态。绿色可以表示已经选中，红色可以提示操作失败，灰色可以表达当前不可用；每种用途都要保持一致。
拿铁规格页里，“大杯”除了浅绿底，还可以有绿色边框或选中标记。某种规格售罄时，保留名称并写“售罄”，不要只把它变浅，让用户猜为什么不能点。
同一个绿色不能自动说明所有状态。品牌按钮本来也是绿色，是否选中、是否成功，仍然需要对应文字和标记一起说明；重要信息也要保证足够的文字对比。
13. 字阶 Type Scale：名称、介绍和备注各用多大字
Type Scale叫字阶，是一组有层次的文字规格，通常一起规定字号、字重和行高。以拿铁规格页为例，标题可以用20px，规格名称用16px，介绍用14px，次要备注用12px。
价格可以通过字重或位置强调，不一定再加一档字号。大杯加价、售罄原因等影响选择的信息，应保持清楚可读，不能因为被归为“说明”就缩成很小的字。
这些数值只是本例的起点。中文、英文、不同字体与系统文字缩放都会影响结果，最后要放进实际页面看，不能只看设计稿里的字号数字。
14. 行高 Line Height：两行介绍之间留多少距离
Line Height就是行高，规定每一行文字所占的行框高度。同样是16px的文字，行高16px会更紧，行高24px会给多行内容留下更多空间；line-height: 1.5表示行高按当前字号的1.5倍计算。
如果拿铁介绍写成两行，16px字号配24px行高，两行的行框总高是48px。文字上下还可能有容器内边距，所以完整面板高度不能只看这48px。
行高太紧会让多行文字难读，行高太松会把一条说明拆散。标题和正文可以采用不同规则，但同一类说明尽量保持一致。
15. Padding / Margin：盒子里面与外面的距离
Padding是内边距，Margin是外边距。饮品面板里的文字离面板边框16px，这是padding；这个面板与下一个模块相隔16px，这是margin。两个值即使一样，作用的位置也不同。
还有一个常见词 Gap，间隙，可以用来设置布局中相邻部件之间的距离。图中同一面板内相邻商品卡片之间的间隔，可以由容器的gap控制，实际使用前要确认小程序的渲染方案和环境支持。
如果面板宽度设为343px，又另外加左右padding和边框，要注意盒模型怎样计算最终宽度。支持并使用box-sizing: border-box时，声明宽度包含内边距和边框；默认内容盒计算则会把它们加在声明宽度之外。
一个容易踩的坑：底栏固定了，最后一条商品被挡住
点单页面常把总价和“去结算”固定在屏幕底部。固定定位会让底栏脱离普通文档布局，后面的内容不会自动为它空出位置；结果可能是屏幕看着整齐，滚到底却看不全最后一条商品。
这里要同时处理两件事：底栏内部避开系统手势区域，滚动内容末尾预留底栏实际占用的高度。预留值应包含底栏和相关安全区占用，避免同一段空间被漏算或重复计算。
这也接上了之前HTML预览与小程序效果不一致的问题。即使网页截图里没遮挡，也要打开对应的小程序项目，在微信开发者工具中编译，滚到最底下，再用手机预览确认最后一条商品和结算按钮都能正常操作。
按这个顺序把咖啡馆页面排出来
先把前面15个词放回同一条制作流程。页面顺序、内容位置确定以后，再调颜色和字号；完成视觉稿以后，还要用实际内容检查。
-
定入口和点单路径。 明确菜单、规格、购物袋与确认页各负责什么，安排返回修改的位置。
-
画线框，确认首屏。 把门店、商品区、操作栏放好，看看打开页面能否尽快开始点单。
-
定边距与对齐。 先确定页面左右留白，再把商品名称、价格和按钮排到统一位置。
-
定字阶、颜色与变量。 名称、说明、状态各有规则，多个页面引用同一套定义。
-
检查宽度与内容变化。 放入长商品名、多行介绍，并查看375px和430px等不同宽度。
-
在小程序里确认。 编译后检查首屏、页面最底部和主要操作，再用手机预览核对安全区域。
下一次需要让AI修改布局，就能把位置说清楚：商品名与价格左对齐、面板内边距16px、大杯加价说明贴近选项、固定底栏不要挡住最后一条商品。每个要求都有对应区域，改完也能直接看图确认。
系列文章：
关于作者
Punk｜中科大管理学硕士｜AI提示词、AI小白教程｜Punk系列Skills作者｜3个月赚了8位数｜Learn in Public｜FDE文章浏览量240w｜@AdrianPunk115
