创建页表单 · UI 设计稿

针对当前「添加记录 / 创建项目」:每个字段标签 + Outline 描边框 纵向堆叠,框感重、像后台表单。 下面 5 套方案对齐 Enil 现有灰底白卡语言,尽量少框、多层级与留白。可切换「添加记录 / 创建项目」预览。

现状:全 Outline 框 目标:少描边、仍可扫读 字段:标题 / 正文 / 标签 / 时间 / 子项目 / 图 / 背景 / 音乐

A · 现状还原

标签 + 全描边 Outline,每个字段一框。信息完整,但视觉噪音最大。

9:41●●●
‹
添加记录
📄
记录标题
请输入记录标题
记录内容
请输入记录内容
记录标签
选择记录标签›
子项目(可选)
未归组▾
创建时间
选择创建时间(可选)📅
图片
+ 添加图片
背景图
+ 选择背景
音乐
添加音乐(可选)♪
对照基线不推荐保留

B · 软卡片 / 无描边

白底软阴影块代替描边;小写标签降权。与时间线卡片语言最接近。

9:41●●●
‹
添加记录
📄
标题
给这条记录起个名字
内容
写点什么…
标签
旅行 + 添加
子项目
归属未归组 ›
时间
创建时间现在 · 可改 ›
媒体
+ 图片 / 背景 / 音乐
推荐默认 改动成本中 统一时间线视觉

C · 编辑式 / 底线

大标题 + 正文像笔记;次要字段收成设置行。框最少,偏 iOS 备忘录。

9:41●●●
‹
添加记录
完成
标题
开始书写内容,不必先想结构…
标签无 · 添加 ›
子项目未归组 ›
时间刚才 ›
音乐无 ›
+
背景
最轻框感 适合记录优先 项目页需略改字段权重

D · 分组卡片

主信息 / 归属 / 媒体 三组白卡,组内用细分割线。结构清晰,外框只剩组级。

9:41●●●
‹
添加记录
📄
正文
标题
请输入标题
内容
可选
归属与时间
标签
选择 ›
子项目
未归组 ›
创建时间
可选 ›
媒体
图片 · 背景 · 音乐
结构最稳 像设置页 字段多时友好

E · 写作台

上方快捷胶囊 + 中央大书写面 + 底栏媒体工具。主路径是写,附属字段收起。

9:41●●●
‹
添加记录
保存
标签 + 未归组 ▾ 时间 · 现在 模板
标题
在这里书写记录内容…
记录体验最佳 项目页需降级为 B/D 实现成本偏高

怎么选

方案 框感 扫读 落地成本 建议
A 现状 重 一般 — 淘汰
B 软卡片 轻 好 中(改 InputDecoration + 容器) 记录 / 项目统一默认
C 编辑式 最轻 标题优先 中高 记录页可进阶
D 分组卡 中(仅组) 结构最好 中 字段多时(记录)备选
E 写作台 轻 写作优先 高 仅记录页远期

推荐落地路径:先上 B(记录 + 项目) → 记录页可选升级 C 或 E 的标题区; 若觉得附属字段仍散,把标签/子项目/时间收成 D 的一组。 原则:去掉 per-field Outline,主文本用底线或无边框白卡,次要项用行列表。

文件:docs/create-form-ui-design.html · 浏览器打开即可切换预览 · 未改应用代码。