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

心得技巧
50个充满活力的色彩在网页设计中运用实例
WEBJX收集的适合设计师参考的100个设计类网站
网页设计中常遇到的10个小问题
用户体验:购物网站的购物流程简化设计
用户体验设计实例:豆瓣UI设计改进
24个对表单对象进行个性化定制的技术
视觉设计:创意布局需要非常注意易用性问题
用户体验设计研究:中文网页文本框设计
设计经验分享:设计美好的瞬间
网页设计理论:漂亮而不空洞的极简网站设计
用户体验:网站注册中的密码保护设计细节
有感GOOGLE的登陆设计让人感到崩溃
设计师需要的IDEO以人为中心的设计工具包
用户体验研究:携程酒店订房中的日期选择
网上零售平台的站内搜索的自动提示功能
B2C网站搜索结果是列表视图还是栅格视图?
网站可用性设计:让页面等待不再漫长
设计参考:巴西设计师的图标设计作品
B2C网站设计体验:购物车中的胡萝卜
电子商务网站注册表单的可用性贴士

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


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

简介

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

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

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

例如下面的例子:

111.gif

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

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

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

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

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

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

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

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

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

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