H8.09.1edit mode visual distinction设计研究

编辑态与查看态需要有清晰可辨的视觉区分

别名: 编辑外观 · 阅读外观 · authoring chrome

概念解释

同一份内容有两套完整的表面:查看态像读物——正文、目录、评论只读;编辑态像工作台——光标、格式工具、可点的字段。两套必须扫一眼就能分开:工具栏在不在、正文有没有插入条、标题区写不写「正在编辑」。它谈的是这两种表面的视觉语言。增删改查里读和写不要叠成含糊状态,是记录操作层的问题;这里是整页(或整块)已经分成两种模式之后,外观还像不像同一种东西。模式指示要落在正在看的地方,是更一般的人因结论;内容产品要补上的是读写两套铬板怎么画。

机制

查看态的任务是理解;编辑态的任务是改。视觉系统用工具栏密度、光标、纸边距来判断自己在哪一种任务里。两套铬板若共用同一篇文章外观,只在角落换一个「编辑」二字,视线在正文时等于没有区分,人会在阅读时误触改字,或在写作时以为只是预览。区分还要在滚动后仍成立:工具栏吸顶、插入条跟着焦点走,而不是只在进入时闪一下横幅。颜色主题不够:色盲和投影场景会丢掉那一层。声音或屏幕阅读器用户需要名称和状态,而不仅是多出来的图标。

怎么研究

同一文档做成「铬板几乎相同」和「查看无工具栏、编辑有完整工具栏与插入条」。任务交替为朗读一段和改一个词。

自变量:工具栏是否仅编辑态出现、是否有持续的「正在编辑」标、焦点处是否有插入条。 因变量:阅读时的误改次数、编辑时把改动当成未提交预览的次数、事后「刚才能不能改」的判断。

指令不要说「请进入编辑」。用目标:「把截止日期改成周五」和「告诉我第三节在讲什么」。真实产品还要看窄屏上编辑工具栏是否把正文挤成看起来仍像阅读的窄条——过度铬板也会让态难认。

边界

单元格就地编辑只有单元格级铬板,整页仍是查看,不能要求整页变成 IDE。演示放映是第三种态,不要和编辑共用插入条。创建中的空白文档没有可看的成品,可以只有编辑态。高对比或深色主题下,两套铬板仍要靠结构和控件有无来区分,不能只靠浅色底。

怎么落地

  • 查看态不显示格式工具和插入条;进入编辑后工具栏出现,正文出现光标,标题区持续标明正在编辑。
  • 区分不依赖单一颜色。用控件有无和一条文字状态,滚动时不消失。
  • 退出编辑回到查看时,工具栏收起,光标消失,避免看起来仍可打字。
  • 验证:把两态截成静帧(不含指针),请未参与设计的人标哪张能改。标错或靠猜,视觉区分失败。再让人在查看态阅读时双手放上键盘,看有没有改动落盘。

延伸

  • 同组H8.09.2 从查看态进入编辑态的入口需要在有权限时才出现 · H8.09.3 编辑中意外退出需要保留草稿而非丢弃改动 · H8.09.4 多人同时查看时编辑态的切换不应互相干扰
  • 相邻H8.01 增删改查 · A10.02 模式错误 · H8.08 共享范围与权限设置
  • 站内检索edit mode · view mode · authoring chrome

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H8.09.1