实用设计工作流

价目表制作:设计清楚易读的服务价格卡

象牙色背景上的平行炭黑横条与琥珀色方块,形似简洁的价格卡。

服务价目表需要说明顾客能获得什么、需要多久,以及哪些价格条件适用。再精美的字体,也弥补不了遗漏的“起”字,或看起来可以单独预约的加购项目。

我们用虚构 Cedar Salon 需求在 Ciyo 中探索价格卡。本指南采用准确的源表、受控修改和独立的印刷及手机检查,并把可编辑源文字与扁平化图像分开。

快速回答:先批准服务表

在源表中写明服务名称、时长、币种、固定价或起价,以及适用条件。给服务分组、对齐价格,把限定词放在对应价格旁边。然后按目标印刷尺寸与手机宽度检查保存的设计。

保留能单独改价、无需重新生成全部文字的源文件。如果 Ciyo 输出是扁平图片,就在排版编辑器中完成事实文字。

1. 把店主的服务清单变成获批事实

以下四项 Cedar Salon 服务均为虚构,用来展示较难处理的字段:起价,以及附带预约条件的加购项目。真实商家应在设计前确认币种、服务范围及其他价格条件。

不要让模型编造热门套餐、推荐折扣或补填缺失时长。这些问题应与服务负责人确认。

Cedar Salon 示例服务表
服务时长价格条件
招牌剪发45 分钟$45示例固定价
染发咨询20 分钟$20示例固定价
吹发造型30 分钟$35 起起价
护发加购10 分钟$12须已预约一项服务
Ciyo 完整视口,显示虚构 Cedar Salon 价格卡输入需求。
2026年10月21日,在已登录的独立 dev.ciyo.ai 项目中输入原始需求。完整原生视口,页面缩放为 100%;关键要求也在可复制需求中列出。

2. 先设计信息层级,再做装饰

每项服务用一行,先显示名称,附近标明时长,价格放在固定位置。将加购项单独分组,让顾客理解主要预约与可选附加项的区别。

示例主要采用暖象牙色和炭黑色,辅以少量绿色。绿色可以区分加购组,但不能只靠颜色来说明预约规则。

Ciyo 完整视口,显示实际观察到的 Cedar Salon 价格卡输出与运行状态。
助手工作流停止后,直接使用 GPT Image 2.5 Flare 生成了这张 1024 × 1536 的扁平化价格卡概念。所链接的 HTML 源文件保持服务事实可编辑。
服务价格卡需求
根据这张获批表为[商家]设计服务价格卡:[服务、时长、价格与条件]。将主要预约与加购项目分组。在起价旁明确保留“起”,并清楚显示预约条件。使用[品牌配色]。比较竖版印刷布局与手机预览。保留所有事实,并说明哪个源文件可编辑。

3. 在 Ciyo 中探索,再检查实际文字编辑方式

我们把表格输入独立设计助手项目,但该工作流在交付卡片前停止。随后直接使用 Image Generator 中的 GPT Image 2.5 Flare,生成这里的 1024 × 1536 概念图。它以扁平图像形式呈现示例服务的信息层级。

所链接的 Cedar Salon HTML 示例依据获批表格单独组装。服务名称、时长、价格与条件都是可编辑文字,因此可检查外部修改步骤。生成图片与可编辑源文件承担不同任务。

4. 做一次受控修改,再读一遍每一行

实用测试是把虚构的招牌剪发从 $45 改成 $48,同时保持 45 分钟不变。注明这是审阅练习;店主批准真实修改前,原表仍是基准。

修改后重新检查染发咨询 $20、吹发造型 $35 起、护发加购 $12,并确认加购仍要求已预约服务。范围很小的请求也可能改变邻近生成文字,因此不要只检查改过的数字。

外部 HTML 审阅练习:招牌剪发改为 $48,45 分钟时长及其他获批示例字段保持不变。保存的原始模板仍以 $45 起始。
外部 HTML 审阅练习:招牌剪发改为 $48,45 分钟时长及其他获批示例字段保持不变。保存的原始模板仍以 $45 起始。

5. 分别检查印刷版与手机版

印刷版应按目标实际尺寸打开导出文件,确认最小的条件文字仍可读。向印刷厂询问接受的文件和安全边距。手机使用时,按典型屏幕宽度完整查看,不放大。

如果手机版文字过小,就简化布局或另做移动端构图。把整张印刷页直接缩小,并不一定适合手机。两版事实必须一致。

两种用途的检查
使用位置最可能出现的问题实用修正
柜台印刷卡限定词过小或边缘文字被截断增大字号,或移入安全区域。
手机图片狭窄视图内信息过多将服务行纵向排列,减少装饰。
两者共同不同版本价格不一致对照获批源表统一核实。

6. 保留版本化源文件,并明确更新负责人

把批准日期、可编辑源文件和顾客版导出放在一起。改价时先更新源表,再用获批文案制作分发版本。在商家实际分享的位置删除或替换旧版。

独立服务者可能只需一张简洁卡片;多门店商家应先明确各地价格和条件的负责人,再考虑自动化。本指南演示价格卡设计,不是预约系统同步。

常见问题

可以把限定条件藏在脚注中吗?

把“起”等限定词放在相关价格附近。较长条件可在旁边补充,但布局不能把未批准的起价暗示成固定价。

一页能放多少项服务?

以目标用途的可读性为上限。清单很长时应分组或分页,不要把全部文字缩到难以阅读。

生成图片仍可编辑吗?

图内文字可能已经扁平化。要可靠地反复更新,应保留源表并使用排版中的可编辑文字。

应该添加预约链接吗?

只使用商家批准且已核实的预约地址。装饰二维码或编造的网址不会建立预约渠道。

准备五项已确认服务

从真实的服务名称、时长、价格和条件开始。比较两种布局,选择顾客能迅速理解的一版。