梧桐设计语言v0.4.1

浮层与反馈Feedback

先决定用哪个。这张表防两个最常见的错误:什么都用模态框,和把需要阅读的信息放进会消失的提示里。


场景 用什么 为什么
删除、作废、批量操作 确认框(ConfirmDialog) 必须打断,且要说清后果
派单、填一小段信息 桌面:表单弹窗;移动:底部抽屉 移动端用居中弹窗,按钮在屏幕中央,单手够不到
看工单详情 侧滑面板 不打断列表上下文,能左右对照
操作成功了 轻提示(Toast),3 秒消失,带撤销 不需要阅读,只要知道成功了
操作失败了 页内错误块(ErrorBlock),不消失 失败原因需要阅读,提示会消失
网络断了、有待上传 常驻条吸顶,不消失 这是状态不是事件,静默失败会摧毁信任
生成应用(2–3 分钟) 进度面板(ProgressPanel) 长任务不能用转圈
更多操作、切换视图 下拉菜单

确认框:文案比样式重要

三条规则:① 标题是问句并带数量;② 正文说清什么没了、什么留着;③ 按钮写动词带数量,用 destructive 色。

删除这 3 条工单? 工单本身、现场照片和处理记录会被永久删除,无法恢复。其中 1 条已沉淀到经验库的处理经验会保留。 〔取消〕〔删除 3 条〕

反例——「提示 / 您确定要执行此操作吗?/ 取消 / 确定」:标题没信息、正文没后果、按钮没动词,破坏性操作还用了主色。这是企业系统里最常见的写法,也是最糟的一个。

错误文案三段式

什么失败了 → 为什么 → 怎么办。最后一段最常被漏掉,而它才是用户真正需要的。

派单失败 王强当天已有 4 个工单,超出单人上限(3 个)。请改派他人,或到排班设置调整上限。 〔改派他人〕〔重试〕

轻提示的位置,提前定死

桌面端批量操作条在底部居中,轻提示如果也放底部居中会互相遮挡。规则:桌面端轻提示走右下角,移动端走底部居中偏上(避开底部主按钮)。两边位置不同,但各自唯一。

写操作必须先预览、人确认才执行

AI 助理执行的任何写操作(派单、关单、改字段、建表)都先出预览,人点「确认并执行」才真的执行。改现有系统留在助理面板里做;从零造一个切全屏。