简单直接

在 Web 界面中,处理大量的信息时,我们经常会需要从一个界面跳转至另一个界面,或者采用遮罩层的方式去处理后续的任务,但是在一些有明确上下文的情境中,界面的跳转或视觉上极大的变化会引起用户的视觉盲视,打断用户的心流,通俗的讲就是会让用户产生“我是谁,我在哪,我在干什么”的迷惑。“用户心流会因刷新页面而被打断,为避免每个操作都刷新一次页面的情况,可以返璞归真,采用根据用户自然操作流程建模的方式——Bill Scott”

实时可见

如果某个信息非常重要,就应该把它放在界面中,并实时可见

视觉规范示例

实时可见示例1

对于B端业务内的列表类数据,用户有时需要清楚知道数据的数量,如不同队 列中的人数,可以直接在选项卡中直接显示当前队列的数量,而不需要滚动到 列表的 底部才能进 行查看

视觉规范示例

实时可见示例2

以填写账号为例,当用户输入内容时,系统会自动出现与输入内容相匹配的之前登录过的账号信息,直接可取

悬停即现

通过鼠标悬浮的手段展现更多的信息,这些信息可以是当前内容的补充或者需要执行的操作等

视觉规范示例

悬停即现示例1

将鼠标悬浮在目标层上面,会出现一个悬浮框,用以展示更多的信息,同 时可以提供操作按钮

视觉规范示例

悬停即现示例2

在列表中,如果阅读性高于操作性,或者某个操作不是那么的重要,可以 悬停在此对象上时展示操作项

合理覆盖

根据上下文的需要,采取正确的覆盖方式,特别需要注意 Modal 的滥用

视觉规范示例
视觉规范示例

级联递进

利用级联递进工具逐步显示上下文工具

视觉规范示例

级联递进示例

级联递进的一个变体是Mutton:Meau(菜单)+Button(按钮)=Mutton,如果 需要在一个菜单中提供多项操作,而又需要将其中一项作为默认操作时,就 可以使用Mutton

上次更新: 11/5/2020, 3:04:38 PM