当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 交互设计:页签的操作方式

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

心得技巧 中的 交互设计:页签的操作方式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 48 ::
收藏到网摘: n/a

从日常理解页签:人们看书的时候,对于长篇的小说内容很难一目了然,不能直白的知道里面都包含哪些信息;也许对每个段落篇章进行分类,会更加形象;在读小学的时候,老师总让我们把那么长的一篇文章进行分段,然后起名,用一句话概括段落思想。

从互联网理解页签:这一类的内容太多了,页面总是不够承载;也许把相似的东西分成一类,用户可能更好理解。很多场景都是我们遇到过,想到过的。那么页签的运用也许可以解决此类问题。

思考页签的定义:可以把内容进行分类 给相似的东西起名 解决页面放不下的问题可以猜到包含的信息 可以作为标记方便查找自己/他们总结的:页签提供了一种在不同的页签项里显示相关信息的方式。页签的优势在于同一个窗口表现更多的相关信息。 Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

(译注:本文中指的是狭义的 Tab ,指在界面的某一版块区域内所应用的 Tab 设计。实际上,绝大多数网站导航也是 Tab 的一种应用)。

 web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab 这种交互元素成为了一个越来越普遍的应用。 Vista规范中203页开始。标签功能类似于滚动条,以增加有效面积的窗口。所以尽量不要在页签内容区使用滚动条。页签标题内容不能灰掉。

理解的概念:页签至少有2个区域组成:标题区+内容区页签的标题文字要简洁,但是要能够表达内容区域的意思。选中页签表示所在当前页签位置,高亮并突出。选中页签与内容面板形成一个统一的区域(颜色保持一致)。

当前页签只能一个。页签之间要有内容逻辑上的关联性,不能把不相关的东西用页签并列在一起。页签间的内容之间不能存在对比或者递进的关系。页签的显示状态分为未选中态、Mouseover态和选中态三种。页签的操作方式分为鼠标Mouseover激活和点击激活两种。总结的样式:样式上传待续…