上一期分享了三种基本的交互模型,双面板选择、画布工具条、向导(wizard),本期讨论的交互模型并不局限在一个页面上的信息结构,它们分别是:响应式出现和嵌入式连接。
1.响应式出现
一个页面要显示很多内容,但是其中一部分内容不太重要,我们希望用户界面变得简单,但又不得不把内容放到界面当中,在这样的情况下,可以把重要的内容显示出来,并把其他内容隐藏,用户可以通过一个简单的操作访问隐藏内容,这样的页面不仅在一个页面上具备了信息结构,同时具有了垂直的层次结构,不是一股脑的丢给用户,而是在用户需要时显示。
[用法]
1)将主要和次要内容分开,默认显示主要内容,把次要内容放到事先隐藏的区域里;
2)在默认显示的界面上放置醒目的按钮或连接,让用户能够找到那些隐藏的内容。 例如“更多”,或是使用向右或向下的箭头作为连接或按钮标签的一个部分。
3)打开隐藏区域后,设置另一个按钮或某种方式能够让用户关闭它。隐藏区域的内容应该是用户大部分时间都不会需要它的,因此要进入和退出这个额外区域的操作醒目就可以了。
[形式]
1) 页面内展开:在主要界面上提供按钮或连接,用户点击以后,在页面内展开一个区域,显示进一步内容,这种形式能够即时的反馈用户的操作,同时容易给用户带来自然过度的体验,这种形式适合用在对主要内容的扩充,更详细的、更近一步的内容,当用户没有看到这些内容并不会影响使用,而打开这些内容,用户可以看到更多、或是得到更丰富的功能。
例如:
在QQ聊天窗口中当用户点击“聊天记录”时,页面展开一个区域,用户可以看到更多聊天的记录。
在QQ空间的个人中心中,页面将好友更新的日志标题列出来,当用户点击“展开”按钮时可以看到文章开头部分的段落,同时按钮转换为“收起”,用户可以选择把内容再次隐藏起来。
2)弹出层
用户点击按钮后,在页面上浮出一个层来显示进一步的内容,与页面内展开的形式不同的是,弹出层更适用于区域内的内容较为重要的时候使用,比如弹出层内包含一些操作、或重要提示。弹出层一般包含以下部分:标题栏 (与内容区分隔较明显,有标题和关闭操作);内容区(弹出层的主要内容区);操作区( 弹出层的主要操作区,确定/保存等按钮)。弹出层有两种类型,模式化的和非模式化的,对于模式化的窗口,弹出层可以移动,弹出层以外的页面为锁定状态,不可操作;对于非模式化窗口,该层仍然可以移动,弹出层以外的页面可操作,操作时弹出层可以消失也可以一直出现,根据具体情况而定。
举例:
在秀世界的应用中,用户点击“我的储物箱”弹出一个展示我已经购买的物品的层,这是一个模式化的例子,弹出这个层以后,原来界面处于灰度显示状态,其他按钮不能点击。
在绘图工具当中,对于一些扩充的工具面板也采用了弹出层的模式,这是一个非模式化的例子,当弹出层出现时,原来的页面工具仍然可以使用。
2. 嵌入式连接
嵌入式连接已经是web上广泛应用的模式,当用户沿着某种线性路径进行浏览,如一段文本、一个操作流程,而在用户浏览的过程当中,我们希望在用户主要注意力之外提供一些额外的内容,它可能是一个故事的附加信息,或是一个对某个概念的解释、或是帮助文本。这样的形式可以让希望快速完成任务的人快速前进,而对于希望了解更多的人看到额外的信息,满足用户的好奇心和对未知内容的探索。
[用法]
2)这些入口可能是带下划线的连接、大的标题、按钮、菜单项、图标及一些可以点击的图形区域。对于不容易理解的图标或是连接,可以添加简短的描述进行提示。
3)提供返回的途径,在用户阅读这些分支的内容以后能够回到他们的主要任务上。
[举例]
1)在网页新闻当中,对一段文字当中提到热门词汇加上链接,当用户对这个词汇感兴趣的时候看 到能够看到与这个词汇相关的新闻: