# VectorPaint 咖啡菜单：让品名、说明与价格容易横向比较

语言：zh-CN
原文：[VectorPaint 咖啡菜单：让品名、说明与价格容易横向比较](<https://allluckly.cn/guides/vectorpaint-cafe-menu/>)
中文：[中文 HTML](<https://allluckly.cn/guides/vectorpaint-cafe-menu/>)
English: [English HTML](<https://allluckly.cn/en/guides/vectorpaint-cafe-menu/>)
发布于: 2026-10-26T00:00:00+08:00
内容更新于: 2026-10-26T00:00:00+08:00
署名：Bison

用虚构咖啡单练习价格列、长品名、分类与更新检查，避免靠空格排版并保留可编辑文字。

菜单的重点是让人快速找到品名、理解选择并看清价格。本篇用六款虚构饮品制作一张静态咖啡单，练习分栏、行距和内容核对。示例名称与价格不用于真实售卖，也不意味着应用带有点单或价格计算功能。

## 先准备一份能逐行核对的清单

写下六款饮品的名称、杯型、简短说明和示例价格，主动安排一个较长名称与一种双规格饮品，用它们测试版式极限。分类暂定经典咖啡与无咖啡因两组。新建八百乘一千一百像素画布，预留标题、两组菜单和底部说明三个区域。先核对清单中单位与币种是否一致，不把有的价格写成含单位文字、有的只写数字。若用于真实门店，应先确认所有价格与适用条件，再把清单作为本轮排版的唯一核对依据。

## 为品名和价格建立独立的列

把品名放在左列，价格放在右列，分别使用可编辑文字对象。价格可以右对齐，使数字末端形成稳定边线，不用一长串空格把它推到右边。空格宽度会随字体变化，之后更换字体或输出时容易错位。先设置两侧边距，再从右边留出价格列宽度，剩余空间给品名。选中价格对象进行对齐时检查是否误选分类标题，避免一项操作让标题也移动到价格列。先建立一行样式，确认后再复制。

## 把说明和规格放到对应品名下方

说明文字比品名小一级，起点与品名保持一致。杯型和容量应靠近它们描述的价格，不要隔到下一款饮品旁边。双规格可以另占一行，也可以在价格列内纵向排列，但整张菜单采用同一规则。复制一行后先替换品名，再替换说明、规格与价格，逐项对照清单。说明为空的项目也要检查是否留下上一项旧文案。暂时隐藏价格列，观察左边文字能否独立讲清每款饮品，之后再恢复价格。

## 用间距表达分类而不是堆叠装饰

同一分类内的行距保持接近，分类之间留下更大的距离，让读者不用反复寻找细线也能看出分组。分类标题可以加重，但不要和主标题一样大。若使用分隔线，线长和颜色保持一致，并与文字留出足够间距。先移除所有装饰检视内容，如果此时仍然难读，说明列宽或行距需要调整。长说明造成一行增高时，把后续项目整体下移，不要只把那个项目的价格压到上方，让价格错配到另一款饮品。

## 处理长品名和额外说明

长品名在自然词组处换行，并检查第二行是否占用价格区域。可以把风味描述移入说明，保留用于识别的名称，不要把这一款单独缩成明显更小的字号。底部的温度、过敏原或价格条件如需表达，应使用经过确认的文字，并与正文之间留出边界。练习中只写明确的示例提示，避免用图标暗示未经确认的食品属性。把最复杂的一行复制到测试副本，用最长说明与最大位数价格再次验证列宽是否足够。

## 更新时只读内容再看版式

保存可编辑原稿和当前清单，导出预览后先逐行读出品名、杯型、价格，再检查对齐与颜色。内容错误可能完全不破坏版式，所以需要独立核对。若调整了一个价格，再检查同款不同杯型的关联价格，避免只改大杯而小杯仍是旧值。打印或放进门店屏幕前按实际观看距离检查最小文字，手机放大预览不能代表现场可读性。文件名记录版本与适用日期，以免把过期菜单重新发给排版或印制人员。

## 用一次价格变更演练检查维护成本

在菜单副本里只修改一款饮品的两个杯型价格，其他内容保持不变，然后让自己从原始清单重新定位这两项。检查价格对象是否能独立选中、是否需要绕过大量装饰才能操作。若同一价格同时出现在底部说明或套餐文字中，把这些位置也列入检查清单。重新导出后按修改前后逐行对照，确认没有意外改变其他品名与价格。保留旧版作为记录，但把它放到清楚标注的旧版本位置。这样的演练能提前发现版式虽然好看、日常更新却容易漏改的问题。

## 价格错位时检查文本对象和选择范围

如果只有一个价格偏移，先检查该文字对象的对齐方式和文本边界，再与上下两项比较，不要重新分布整张菜单。整体价格列不齐时，确认这些对象是否都采用同一对齐规则，并排除不可见空格。导出后出现换行，检查字体在目标环境是否可用，先保留文字原稿，再在交付副本中固定外观并重新打开。某款说明与下一项过近时，应增加该行高度或简化说明，不要把分类标题推到页面边缘去勉强塞下。

## 相关教程与资料

[VectorPaint 文字排版：做一张信息清楚的活动小卡](<https://allluckly.cn/guides/vectorpaint-text-layout/>)、[VectorPaint 对齐与分布：排好一组三个按钮图标](<https://allluckly.cn/guides/vectorpaint-align-distribute/>)。

资料核对于 2026 年 10 月 26 日。能力依据为 [VectorPaint 官方 App Store 说明](<https://apps.apple.com/cn/app/id1587272880>)和 [Apple 公开版本信息](<https://itunes.apple.com/lookup?id=1587272880&country=cn>)，当日中国区公开版本为 1.0.7，最低要求 iOS / iPadOS 17。本文提供可自行复核的创作步骤，没有声称已逐步完成真机操作；示例尺寸、颜色、数字和内容均为练习设定。界面名称与可用入口请按安装版本核对，保存原稿后再在独立副本中试验。