关于页面设计中内容覆盖与切换的设计

熟悉页面原型设计的朋友应该都知道“层”的概念,即在内容之上覆盖其他容;“层”具有太多广泛的意义,可以片面的理解为图层或者内容层;页面也是可以分很多层的,有弹出层,有隐藏显示层等等。时间轴给屏幕增加了新的维度,也使得不同“层”的切换成为了可能;网页的时间轴并不如电影播放那样呈线性,而是根据用户操作有选择的变换,于是产生了“状态”。片面的理解交互的本质,可以把所有的内容架构于一个页面,通过“无刷新”技术实现所有的屏幕切换。

页面当中最常见的两种形式是覆盖与切换:覆盖就是在某个状态下,出现新内容覆盖原始内容的情况;切换就是在某个状态下,新内容替换原始内容的情况。“从属内容使用覆盖,平行内容使用切换”是页面设计的最基本原则。新内容依赖原始内容存在,即产生了从属关系;新内容不依赖原始内容而孤立存在,即可视为平行关系。

使用内容覆盖的注意事项:

1、新内容不应该占用过大的屏幕面积

2、切忌将重要内容覆盖,比如Logo或者主导航条

3、一定要提供新内容的撤销方法

使用内容切换的注意事项:

1、切换内容之间应该占用同等面积,避免破坏页面整体结构

2、使用Tab选项卡等形式明确当前内容状态

3、在新内容中谨慎使用滚动和分页

说到覆盖和切换,最常见的就是弹出层和TAB标签的控制了。

在设计TAB标签选项卡的时候,究竟是用鼠标单击还是鼠标滑过来控制标签的切换?

没有任何先兆的情况下,逼迫用户关注内容变化是非常不明智的或者说效果是很差的。以用户为中心的页面设计必须是以操作触发为前提的,即鼠标或键盘的事件触发,在各种客户端脚本中都提供了丰富的用户事件,完成对内容覆盖和内容切换的控制。

“鼠标点击”这个操作是用户最经常使用的,在用户的头脑当中点击就是一种确定,会引发整个视觉系统的刷新,已经成为下意识行为。在TAB选项卡切换的设计中,很多设计师会使用鼠标滑过事件触发内容切换;然而鼠标滑过这个操作在用户头脑中属于“轻量级操作”,无法形成足够刺激视觉系统刷新;如果用户不小心触发了内容切换,而有没有足够的提示,用户可能根本感觉不到切换了内容,造成迷惑。

弹出层的默认屏幕定位问题

对于内容切换,要求不改变整体页面结构,因此只要在原始内容占用的屏幕上进行替换就可以了,这时完全可以把内容切换理解为一种特殊的内容覆盖。新内容出现在何处,是一个非常重要的问题。通过总结,可以得到如下几种结论,它们的特点和使用注意事项如下。

附着于原始内容:当新旧内容关联度比较高时,应当让新内容附着于原始内容,这是最常见的屏幕定位方式。

–通常用于表单项目

–展示某一内容元素的外延时

–下属列表、菜单

–展示图片或内容放大细节

附着于鼠标:当新内容需要特别提醒,且无须进一步操作时,应当让新内容附着于鼠标。鼠标的定位应当便于用户立即在横向和纵向寻找不同的选项,同时应具有避免用户“连击”误操作的措施。

–内容的必要提示(类似alt效果)

–载入“确定/取消”对话框

–需要鼠标右键触发的内容

附着于屏幕:当新内容具有通用性,相对独立,则可以伴随屏幕的滚动一直固定在某处。尽量不要占据屏幕中心设置那些伴随滚屏内容,这只能让用户反感。

–常用工具条

–提示消息

LightBox效果:当新内容是用户必须的步骤,不可以跳过时,则可以完全从视觉上屏蔽其他的内容,形成“灯箱效果”。LightBox效果是所谓“Web2.0”经常使用和值得炫耀的,然而如果滥用,则会经常打断用户的操作,造成访问干扰。

–询问结果、必填内容

–大型图片和需要特殊展示的内容

可任意摆放:因为内容覆盖极可能遮挡了那些用户需要再次查看的内容,因此在允许的条件下给所有的新内容以拖放定位的权利。当然,关闭新内容也是一个必须设置的环节。

交互设计是一门独立的学科,“层”并非Web的标准应用,因此需要谨慎的对待;覆盖与切换是两种典型的屏幕复用的方式,同时切换可以理解为比较特殊的一种内容覆盖;交互设计是引导用户顺畅的点击,而非给用户造成障碍和麻烦。



无觅相关文章插件,快速提升流量

评论已关闭!