易企办博客 / 业务实践

用动态样式和图标表达业务状态

用待办、项目和活动三个场景说明如何把颜色、文字和图标与业务状态关联。

Addison Pfannerstill·

让界面状态随数据变化。待办类型,电话、普通待办和邮件。项目进度,运行、推进和完成。近期日程,按活动类型显示。默认状态,为未知类型提供说明。

本文由国际版原文本地化,文末提供原文链接。涉及的能力以易企办中国版租户和权限为准。

同一个列表中可能同时有电话、邮件和其他待办。统一的排版可以保留信息顺序,动态样式和图标则能按数据区分类型和状态。用户无需逐行读完所有字段,就能定位需要处理的记录。

动态样式和动态图标各自做什么

动态样式依据条件改变元素的颜色、字体或边框。动态图标则根据记录类型或状态更换图形。可用数据字段、用户选择和相关表达式作为规则输入,让界面在值变化后反映当前情况。

把规则用在用户需要辨别的地方,例如待办类型、项目进度和活动性质。颜色之外要保留文字标签,使状态在黑白打印、高对比度界面和色觉差异下仍可识别。

配置规则并检查默认值

  1. 找出驱动界面变化的字段,例如活动类型或项目状态。
  2. 为每个值配置可辨识的颜色、图标和文字。补上未分类、字段为空和新值未配置时的默认显示。
  3. 在设计器中选择对应控件,设置动态外观或显示规则,并把每种外观与数据值关联。
  4. 预览多条记录并更改一个值,检查图标和样式是否跟随。再测试移动端换行、键盘焦点和低对比度的组合。

给待办标明类型

电话任务使用电话图标和黄色提示,普通待办使用时钟和绿色,邮件使用信封和蓝色。把类型文字留在图标旁,让用户区分“要打电话”和“要发邮件”。到期或逾期另用独立标签表达。

用图标区分待办类型。电话待办,电话图标,黄色提示。普通待办,时钟图标,绿色提示。邮件待办,信封图标,蓝色提示。
文字标签与颜色同时显示。

在项目列表表达状态

将项目的运行、推进和完成状态与不同样式关联。可以用绿色表示正常运行、蓝色表示推进中、灰色表示完成。先按项目管理口径定义三种状态的区别,再把文字、颜色和图形统一用于项目卡片及详情。

用样式区分项目阶段。正常运行,绿色和文字标签。推进中,蓝色和进度标记。已完成,灰色和完成标记。
项目列表与详情页用同一套规则。

公司门户中的活动安排

在近期日程区域添加图标控件,按活动类型设置动态外观。营销活动用红色和扩音器,内部培训用蓝色和书本,董事会会议用深色和会议图形。预览同一天的多类活动,确认标签和图标在窄屏也容易区分。

按活动类型更换图标。营销活动,红色和扩音器。内部培训,蓝色和书本。董事会会议,深色和会议图形。
在近期日程配置动态外观。

设计时先让参与者用原列表查找一次目标活动,再用带状态和图标的列表试一次。观察查找路径和误认情况,保留能帮助决策的规则。可跟随中文操作演示逐项配置规则。

按活动类型设置动态样式与动态图标

中文讲解与简体字幕,使用配置示意和虚构数据演练。

查看原始文章

返回易企办博客