页面线框图教程(之六):用交互实现屏幕复用
屏幕是万维网的创作介质,引入一个时下很流行的概念,屏幕也是所有“数字多媒体”的展示介质,这是与传统的纸面印刷最大的区别;屏幕带来了用户交互、时间与空间差异,这也是毕sheng发明活字印刷术时始料未及的;创建网页的本质是内容信息架构的呈现过程,如果玩转内容形式主义是雪中送炭,那么用交互实现屏幕复用就是锦上添花。当网站策划人员、产品经理也不得不暂时替代交互设计师的工作(这是大量存在的),就必须要掌握最基本的屏幕复用原则。
稀奇古怪“层”的概念
很多架构师包括某些网页设计的教材,都提出了“层”的概念,即在内容之上覆盖其他内容;在Html语言中的确存在 时间轴给屏幕增加了新的维度,也使得不同“层”的切换成为了可能;网页的时间轴并不如电影播放那样呈线性,而是根据用户操作有选择的变换,于是产生了“状态”。片面的理解交互的本质,可以把所有的内容架构于一个页面,通过“无刷新”技术实现所有的屏幕切换。 “层”这个概念在“无刷新”与“Flash” 中被广泛称呼,以至于提到“交互”必想到“弹出一个层”;内容覆盖是屏幕复用的重要形式之一,但这不代表设计者可以滥用“非标准”技术,加大浏览器的负担可能带来灾难性的后果。 在抛弃了“层”的概念之后,言归正传。屏幕复用最常见的两种形式是覆盖与切换:覆盖就是在某个“状态”下,出现新内容覆盖原始内容的情况;切换就是在某个“状态下”,新内容替换原始内容的情况。 “从属内容使用覆盖,平行内容使用切换”是屏幕服用的最基本原则。新内容依赖原始内容存在,即产生了从属关系;新内容不依赖原始内容而孤立存在,即可视为平行关系。依据内容关系使用屏幕切换方式并不是绝对的,通常完整的页面设计方案中,根据内容逻辑结构就已经确定了那些可以复用的内容。 没有任何先兆的情况下,逼迫用户关注内容变化是非常不明智的,比如某些门户网站的“背投广告”、“漂浮广告”。以用户为中心的屏幕复用必须是以操作触发为前提的,即鼠标或键盘的事件触发,在各种客户端脚本中都提供了丰富了“用户事件”,完成对“内容覆盖”和“内容切换”的控制。在本文中不再对各种内容状态进行一一的描述,但是要对设计人员有如下的提示: “点击”这个操作是用户最经常使用的,在用户的头脑当中点击就是一种确定,会引发整个视觉系统的刷新,已经成为下意识行为。 在选项卡切换这样的屏幕复用设计中,很多设计师会使用“鼠标滑过”这个用户事件触发内容切换;然而“鼠标滑过”这个操作在用户头脑中属于“轻量级操作”,无法形成足够刺激视觉系统刷新;如果用户不小心触发了内容切换,而有没有足够的提示,用户可能根本“感觉”不到切换了内容,造成迷惑。 对于“内容切换”,要求不改变整体页面结构,因此只要在原始内容占用的屏幕上进行“替换”就可以了,这时完全可以把“内容切换”理解为一种特殊的“内容覆盖”。 新内容出现在何处,是一个非常重要的问题。通过总结,可以得到如下几种结论,它们的特点和使用注意事项如下。 交互设计是一门独立的学科,通过本章管中窥豹的论述,让线框图设计人员更深入了解屏幕复用的基本理论。“层”并非Web的标准应用,因此需要谨慎的对待;覆盖与切换是两种典型的屏幕复用的方式,同时“切换”可以理解为比较特殊的一种“内容覆盖”;交互设计是引导用户顺畅的点击,而非给用户造成障碍和麻烦。 内容逻辑架构给页面以骨骼,内容分块填充给页面以血肉,栅格视觉给页面以肌肤,屏幕复用给页面以动作。从信息架构到页面线框图,设计人员经历了一个从量变到质变的分析判断过程;网站从一个核心概念完成了可以付诸实现的原型。请关注HoZiN.CoM线框图教程的完结篇《页面线框图教程(之七):不需要存在的原型》覆盖与切换
在一定丛属关系上建立的“内容覆盖”
在平行关系上建立的“内容切换”
不要吝惜用户的点击
在Tab选项卡中应依赖“点击”进行切换新内容的屏幕定位
附着于原始内容是最常见的屏幕定位方式
本章小结
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:大仙Hozin 来源: 网站策划师
- 标签: 复用 线框图
- 发布时间:2011-09-04 23:15:16
- [65] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则