西贝的交互设计

交互设计—页签（1）

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

从互联网理解页签：这一类的内容太多了，页面总是不够承载；也许把相似的东西分成一类，用户可能更好理解。

很多场景都是我们遇到过，想到过的。那么页签的运用也许可以解决此类问题。

思考页签的定义：可以把内容进行分类     给相似的东西起名     解决页面放不下的问题         可以猜到包含的信息      可以作为标记方便查找

自己/他们总结的：

• 页签提供了一种在不同的页签项里显示相关信息的方式。
• 页签的优势在于同一个窗口表现更多的相关信息。
• Module Tabs(也称选项卡，后文中简称Tab，以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。（译注：本文中指的是狭义的 Tab ，指在界面的某一版块区域内所应用的 Tab 设计。实际上，绝大多数网站导航也是 Tab 的一种应用）。
• web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab 这种交互元素成为了一个越来越普遍的应用。
  Vista规范中203页开始。
• 标签功能类似于滚动条，以增加有效面积的窗口。所以尽量不要在页签内容区使用滚动条。页签标题内容不能灰掉。

理解的概念：

• 页签至少有2个区域组成：标题区+内容区
• 页签的标题文字要简洁，但是要能够表达内容区域的意思。
• 选中页签表示所在当前页签位置，高亮并突出。
• 选中页签与内容面板形成一个统一的区域（颜色保持一致）。
• 当前页签只能一个。
• 页签之间要有内容逻辑上的关联性，不能把不相关的东西用页签并列在一起。
• 页签间的内容之间不能存在对比或者递进的关系。
• 页签的显示状态分为未选中态、Mouseover态和选中态三种。
• 页签的操作方式分为鼠标Mouseover激活和点击激活两种。

总结的样式：

样式上传待续…

This entry was posted on 星期四, 一月 7th, 2010 at 06:23 and is filed under 交互设计. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.