首页 > 网站 > WEB开发 > 正文

交互模式应用(1):Inplace Replacement

2024-04-27 14:39:53
字体:
来源:转载
供稿:网友

  Inplace Replacement是一种普遍的交互模式,常用来表现大量数据的有限空间中为user展现更多信息。Sunny同学以前曾经在Design Pattern的PResentation中提起过,也叫”Details on demand”, 而在开发眼里,即是“Row Expander”。这里称为Inplace Replacement,意指广义范围的具体内容呈现模式,并不拘泥于表单内容扩展的交互,甚至包括“Retractable Menu”。 不管叫什么,我们来探讨一下如何应用这种交互模式。

  使用前提

  针对目前所给内容,用户需要更详细信息,但是由于空间限制和过多元素排列的困难,我们会将一些额外详细信息隐藏,从而既保持界面简洁类目明晰,又能够展示细节而不破坏主体层次。

  软件经常展示给用户一些图形化的表单或页面,由于空间限制,并为了方便绝大多数用户浏览关键数据, 每个item所显示的通常只包括每个条目的几个关键属性。然而,用户可能需要更多比最初显示对象属性的信息,此时我们会添加额外的细节,方便他们按需查看。

  交互方法

  有交互动作才show detail。

  由于是按需给予,只有在用户对相应item作出交互动作时才显示额外内容。我无法想象如何在包含了所有详细属性的数据森林中去定位某个具体条目,这样对信息架构者的工作量或者用户的搜索能力而言,都是极大的挑战。Give them what they want才是解决问题的关键,因此我们需要根据用户的输入(点击、划动或者鼠标停留)来触发展示额外内容。

  表现形式

  •Details on demand

  当选中一个条目时,创建一定的控件用来展示额外信息。

  •Overview by Detail

  显示对所有对象的预览信息并且对于所选对象进行详细展示。

  •Retractable Menu

  当导航栏或者信息组织面板太占屏幕空间时,创建一个并行的很容易反复点击的菜单,不用时可以隐藏。

  注意事项

  •这种交互模式在视觉设计中要做显著的视觉暗示,比如在结构树之前加上展开节点,选中对象要加以提示选中状态。

  •确保这种附带额外信息的视觉控件逐渐形成用户心智模型,用户在初次看到后就能领悟交互方法。

  •确保视觉效果在开关两种状态有明显区别,带进一步信息的条目和正常状态的条目应该区别开来,方便定位。

  一个反例,Wifi-Photo里选中的图片没有具体视觉区分。

  •只显示单层额外细节,避免细节嵌套细节。

  Inplace replacement只适合单层额外细节,并不适合用在额外信息中包含清单或表格内容。那样会形成过多的信息层次,不利于进一步查看。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表