当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 网页交互设计中的模块标签

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 网页交互设计中的模块标签


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 88 ::
收藏到网摘: n/a

简介

这是一篇对于网页中交互设计运用的文章。

本文以翻译为主,由于俺英语水平有限,有些专业名词也不甚明了,所以有些东西都是俺凭着对此效果的理解,加入了自己的思想,如果有什么不对的地方望评点,先谢谢。

如果用户想要浏览一个或多个堆叠窗格的内容而不需要刷新页面应该怎么实现呢?

例如下面的例子:

111.gif

首先我们应该考虑我们什么时候会使用模块标签呢?

  1. 当有多个窗格的内容,而每次只能显示一个窗格。
  2. 不同的窗格的内容不需要互相参照。
  3. 你可以通过改变窗格来切换网页内容。
  4. 为了浏览一个网站的不同网页,而使用导航标签代替。
  5. 当有2-10种标题时。
  6. 如果这一类标题是相对较短的和可预测性的。
  7. 如果重点要显示当前正在看的窗口内容。

 
然后我们通过上面的图片展示来思考这些问题:

  1. 目前一排单行的链接可以直接在多个堆积窗格内容的上面他们将会被控制,也就是指切换的标题对它相对应的内容进行控制。
  2. 从来没有堆叠多个列的标签来控制一块的内容。
  3. 不同的链接用竖线字符“ | ”或通过一个相同的图形来分隔,这样有利于区分,是读者明确当前的位置和下一步的操作。
  4. 始终只能显示一个标签的内容,使显示内容的标签突出显示,区别于周围。选中标签和没被选中的标签要区别处理,比如上面Yahoo !的那个选中的标签就在底部增加了一个小指针“指针”,并且颜色上也与没选中的区分开来。
  5. 每一个标签和其下面的内容应该是有联系的或在显示上的区域相当。
  6. 每一次只能查看一个内容区域。

我们一定要特别明确以下几点:

  • 当用户点击一个标签到另一个标签时,标签应该出现在同一地点。
  • 只要有可能,不刷新整个页面就可选择一个新的标签。
  • 选择一个标签,不会影响其他部分的网页。
  • 选择一个标签不会浏览到不同的网页或执行一项行动(超出开关可见的内容)。

好啦,你一定已经期待很久了吧,我们考虑了这么多,那么现在让我们谈些实际的东西吧:wink:,让我们一起看看模块标签到底有什么值得我们运用的。

在模块标签规定的范围内,它给看到的用户显示了一个整体区域的信息(整体区域就是在内容上相近,例如最新文章和热文推荐这种形式的就可以组成一个模块标签。)这样就使文章的内容性更具联系性,交织成网络状。并且思考也说过“ 始终只能显示一个标签的内容,使显示内容的标签突出显示,区别于周围。选中标签和没被选中的标签要区别处理”,从效果上本身就很突出,所以比较容易吸引看到人的眼球,从人机交互上来说,这能够提示看到的人他当前所处的标签和提示他还有什么标签可以点击查看。

模块标签无论横向和竖向,它也可以主观上引导读者的阅读顺序(当然你也可以不按照顺序点击,呵呵)。

还有运用模块标签可以更合理的利用页面资源,对于优化页面很有帮助。