单选按钮还是复选框 — UI 是有正确答案的问题

提交按钮背后是保存

想象一下服务介绍页面下方常见的咨询申请栏。填上姓名，写下咨询内容，选择咨询类型，按下提交按钮。这种填写数值后一次性发送的表格叫表单。就是做问卷时用的 Google 表单的那个表单。

讲座要求看这个表单时先想到一件事：按下提交，这些值就会被保存到某个地方。运营方要在管理后台，也就是只有运营者能进入的画面里读到客户留下的咨询，所以值必须留存在某处。那个某处就是数据库，一个把值按表格形状堆放起来的地方。

用 Excel 来想就简单了。把列名设为姓名、咨询内容、类型，每来一条咨询就填一行。提交按钮是保存这个动作，不是被保存的值，所以不会成为一列。

这时同一列里必须放同一形态的值。如果有的行类型栏里是一个值，有的行又各自写着好几个，之后要筛选或搜索时就麻烦了。所以每一栏放什么形态的值，要先理清楚。

每一栏的值形态是确定的

姓名就是文字。由文字构成的值，在数据库里叫字符串，英文是 string。用第 01 篇讲过的数据类型，即每一栏要放的值的形态来说，它对应存放短文字的 varchar。

咨询内容可能会很长。这种值另外叫长文本，text。两者都是文字，只是按长度分开命名。

咨询类型分两种情况。如果只让选一个，只需保存选中的那一个值，所以是一个字符串。如果允许选多个，值的形态本身就成了列表。想象有十个选项、选了其中三个，就一目了然。

把多个值按顺序装在一起的组合叫数组或列表。用方括号开头，选中的值用逗号隔开，再用方括号结尾。如果是多选栏，即使只选了一个，也是列表里装着一个值的形态。也可以把它们拼成一段文字来保存，但值的基本性质是列表。

姓名     咨询内容                  类型
───────  ────────────────────────  ──────────
金敏秀   希望下个月进行导入咨询    ["A", "C"]
李书妍   想了解报价                ["B"]

李书妍只选了一个，但仍以列表里的一个值保存

只选一个用单选按钮，选多个用复选框

值的形态一旦确定，画面上要做的事也就确定了。跟着用户点选选项的流程走一遍。

在只能选一个的栏里，选中 A 的状态下按 B，A 的选择必须被取消。这样运作的画面元素就是单选按钮。一组圆形标记中只有一个亮着。

在可以选多个的栏里，选中 A 的状态下再按 B，A 也必须保持选中。这样运作的就是复选框。每个方格各自打上勾。

两者外观相似，动作却不同，而这个差别直接来自保存的值的形态。在只保存一个值的栏上用复选框，或在保存列表的栏上用单选按钮，画面和保存就对不上了。这就是讲座说这两者是答案再明确不过的问题的原因。

UI 是有正确答案的问题 — 表单像数独一样解

一说到 UI 设计，人们常以为那是艺术感觉的领域，选项无穷无尽。讲座建议不是专业 UI 设计师的人换一种心态：UI 是有正确答案的问题，而答案取决于你用什么视角去看这个问题。

讲座把画面大致分为两类：表单，以及不是表单的。它说，有表单的画面大多是像数独一样就能解开的问题。把提交的值被保存的流程也考虑进去，就出现了必须遵守的约定范围，在这个范围内该选哪种 UI，已经是一局定好的游戏。

当然，从单选按钮和复选框派生出来的 UI 形态也很多。讲座的说明是，这些形态知道得越多，判断氛围编程，也就是用自然语言让 AI 做出画面和代码的方式所产出结果的眼光就越清晰。

今天就能做的事是这样的：如果手上有 AI 做好的表单画面，就逐个指着输入栏，问这个值以什么形态保存。如果要让 AI 新做一个，就像下面这样先写明要保存的值的形态，再让画面元素去配合它。

下一篇看不是表单的地方，比如案例卡片列表上方的筛选，是否也有正确答案。

请把这个咨询申请表单的每个输入栏，提交后的值以什么形态保存，整理成表格。
列为：输入栏 / 保存的值的形态（短文字·长文本·一个值·列表）/ 目前使用的画面元素。
如果有只保存一个值却用了复选框的栏，或保存列表却用了单选按钮的栏，请指出来。

请做一个咨询申请表单。提交的值的形态这样定：
- name：姓名，短字符串
- message：咨询内容，长文本
- types：咨询类型，A·B·C 可多选，字符串列表（例：["A", "C"]）
types 做成复选框，选了多个时之前的选择要保留。