Tag Archive for MBA wiki

从品牌网站看交互设计

【转载请标明出处,多谢】

最近在研究品牌如何演绎,当然,看的时候没有忘记本行,分析了一下他们的交互设计~~

路易威登LV
1

上图采用胶片展示多组信息——大片展示品牌渲染。
利用胶片或者类似相册的展示方式,能够展示更多的信息,视觉焦点放到上部,用动态或者滚动的选择方式让用户继续浏览下去。
比较适合主题醒目,品牌放大的页面。

2

上图采用多图展示细节方式——展示品牌的细节品质优势。
品牌注重物品的质量和细节的设计。用多个单图表现同一个物品的不同细节,甚至可以做到放大每一个纽扣或皮质纹路。所谓好东西不怕看细节,用小图给用户造成一种高质的心理。

3

上图是点击某个细节后展示整个物品——强调细节和整体的关联。
细节和整体的关联,质量和款式表现,在看细节的同时,可以对比整体的款式,相互融合。有的时候我们在做设计的时候,往往追求“酷、炫”的效果,其实在表现实质需求的本质时,也不乏新颖的表现。

LV的网站的设计场景和出发心理:

整体品牌形象(告诉你,我是什么) 》 选中你关心的类 》 看看细节品质  》  不仅质量好,整体款式更好 》 引导购买

再收集一个例子(yoka):

5

演绎搭配,不能单单的推给用户搭配好的物品,而是引导用户如何才能搭配出合适自己的装扮。也就是说简单的搭配列表也许满足不了用户的需求。
上图按照:你的现状是什么(调查) 》 看看其他人是这样的(达人秀) 》 你该怎么搭配(咨询引导搭配方式) 》 找到你的特点,开始搭配吧(上图右侧)

想到什么:

西贝学习到设计一个网站,不仅仅按照品牌推广的逻辑,单纯的采用交互技巧来满足用户的需求。其实,关注用户购物的流程方式,循序渐进的利用现实场景 模式进行引导也许会更好。一个简单的物品列表设计也许可以演绎出比较丰富的用户需求。不要单纯的从形式来表现需求,而应该深入的分析需求,按照用户的真实 场景,更加合理的表现形式。

Gucci
6

7

上图是物品的列表——用不同造型的同类物品展示品牌趋势。
品牌引导流行趋势。
很多时候大家都会这样说“今年流行什么?流苏?条纹? ”。
说明物品的品牌特点推广和物品的展示有一定的关联性。
上图很聪明的把造型相似的物品放到一起,体现造型的优势。但是本页面有个统一的特点,都是有金属配饰和细跟表现。顺理成章的表现了趋势和品牌的统一。

试想:造型不同或者类型不同的鞋子,放到一起,都是简单的物品,给一个统一的列表,有翻页。

如下图,这样就看不出品牌特点和造型优点。

8

通过以上的例子想到什么?
》 交互不仅仅考虑页面的排版。
》 交互设计要深入了解需求的本身。
》 交互设计可以把简单的东西变的更加让人接收,TA不仅仅传递了信息,还演绎了需求的内涵。
》 一个小小的改善,那怕只是列表的简单分区。只要处理恰当就可以得到意想不到的收获。
》 设计永远离不开思考用户场景。
》 交互可以考虑的更多,如何平衡产品价值和界面表现也有很多技巧可以使用。

来源:http://www.xibeidesign.cn/?p=447

交互设计实用指南系列(8)—深广度平衡

相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。

图1

从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题:深广度平衡

1. 什么是深广度?

其实“深广度”本身并不是一个单一的概念。在网站的信息架构中,有一种组织结构叫做树形结构:网站首页视为链接层级中第一级,与其有从属关系的页面 视为链接层级中的第二级,一般称其为二级页面。通过二级页面又可以继续得到第三级页面,依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结 构,我们称它为树形结构

在整个树形结构中,链接的层数被称为网页链接的【深度】(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的【广度】(breadth)

我们可以通过下面这张图来理解深度和广度的概念:

图2

2. 为什么深广度需要保持平衡?

我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”(它们之间没有层级结构;链接没有模式可循;且没有某种导航方案将他们分离开)(注1)在这里每一条房产信息都可以看成一个内容链接,整个橱窗就像一张错综复杂的大网,让人头晕目眩。

而右侧的店铺采用的是“结构化浏览模型”(只有一组链接,作为获取网站信息的途径;导航区域与布局中其他内容有视觉上的分隔;要到达另一区域的某个页面,必须沿着树向上导航,再沿着另一个分支向下)(注2)店家将信息进行了规整,在房产信息上增加了一个分类,并且对不同类型的信息使用了不同的颜色,高效的将租房信息和售房信息区分开来。

一个网站的链接深度和广度最好有一个合适的均衡关系,深度过大的网站不利于用户快速获取信息,广度过大的网站则容易让用户在无数并列的超链接面前不知所措。

图3

图3的上图说明了又窄又深的层级系统,用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言(相对而言),用户必须从6个类别中选择, 才能找到6个条目。就像图3的下图所示,用户会面临主菜单上太多选项,而当他们选了一个选项,却没看到什么内容时,就会产生不良的观感。(注3)

我们再来看一张用户对于不同层级结构所需反应时间的图表(注4),图4:

图4

总共512项内容,组成了三种不同的分级方案,X轴是分级,Y轴是反应时间(秒)。可以很清晰看出,在过深和过广的分级方案上,用户所需要的反应时间都比较长。因此我们在组织网站信息的时候,需要仔细平衡深度和广度之间的关系。

3. 如何保持深广度平衡?

我们在处理网站结构时,常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。

图5

这是某电脑公司的官方网站,他们的导航本身就是一个站点地图。他们将14项内容分级组成了一个两层的结构树,每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说,使用主题或科目的方案,将信息组成一个两层的结构树,就是一种深广度平衡的方式。

再来看个案例,图6是某软件官方网站的一个下载区块,这个区块里密密麻麻罗列了N个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户,体验是非常糟糕的。

图6

对于那些信息量很大很杂的网站来说,单纯的使用某一种按类分组的方案已经不太适用了。一般来 说,广度比深度的效果更好。在深结构的各级别间选择,比起在广导航的各选项间扫视,要付出更多精力。眼睛比起鼠标点击(和页面载入)要快得多。虽然用户在 深结构更容易迷失方向,甚至可能迷路,但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户,让他难以选择。用户会点击看起来适合他们需要 的第一个选项,或者干脆放弃,下图清晰的阐述了用户放弃率和深广度之间的关系:

图7

淘宝首页类目地图大概有300个类目,使用了三层结构将他们清晰得展示出来,每层类目都是4~12个之间,是一个深广度保持平衡的典型案例,图8:

图8

小结

对于不同类型,不同信息量的网站,在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。

注1:摘录《Web导航设计》第1章 第一节 导航的需要(P6)

注2:摘录《Web导航设计》第1章 第一节 导航的需要(P9)

注3:摘录《Web信息架构》第5章 第四节 组织结构(P70)

注4:摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》


参考文献:

《Web导航设计》

《Web信息架构》

来源:交互设计实用指南系列(8)—深广度平衡

不一样的交互组件(下)

四、翻页的创新 【替代法】

传统的翻页方式是“上一页+页码+下一页”,大家最熟悉的设计。

Bing图片搜索

Google reader

看图购

而近年兴起的这种“无尽滚动翻页”的翻页方式,即滚动条拖动到最底部后开始加载后面的内容,而不再有“上一页+页码+下一页”这样的链接。

相对而言twitter、Iphone app store这样的“递进式翻页”则没那么激进,保留了一个翻页按钮,是介于传统翻页与无尽滚动翻页的一种折中方式。

上图是Google book search一个巧妙的翻页设计,鼠标悬停在文档底部一个局部区域(高度约50px)时,出现一个半透明的层,点击这个层开始翻页。这个巨大的辅助翻页按钮,大大提升了翻页的便利性,且对界面影响很小。

这里讲到的翻页组件创新,是用新的翻页方式替代传统翻页组件。从信息的结构来看,传统翻页是将信息分段,而“无尽滚动翻页”属于信息滚动。这两种方式对应现实生活中的原型是:书籍和电影胶片,书籍把信息拆分到每页里去翻动,电影胶片的信息则一帧帧的滚动而过。

从信息流动速度和翻页便利性来看,“信息滚动”远远大于“信息分段”。这两种翻页方式应该如何选择?我想这应该取决于用户对后面内容的需求强度,像 google搜索结果页这种越往后信息质量越低的场景,用户对翻页需求并不那么强烈。Google reader这样不是按信息质量排序的场景,提供高速的翻页方式是个相对必要的做法。需要注意的是,滚动翻页不利于内容准确定位和信息回溯。

信息流动速度对信息接受者心态有很大影响,流动速度越快信息吸收量相对越小,所以阅读pdf文档比阅读纸质书籍心情急躁,忍不住去翻页,是在“扫描”而不是“阅读”(个人主观感受,如有雷同纯属必然)

由此也延伸出一点,交互设计师的工作职责除了架构信息,还应该控制信息的流动速度和供给量。

总结

最后,以一张图片总结交互组件创新的四种方式,一家之言希望对大家有所启发。

不一样的交互组件(上)

不一样的交互组件(中)

来源:http://ued.taobao.com/blog

不一样的交互组件(中)

二、组合搜索框的创新 【组合法】

常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成的,合适的控件组合可以带来更好的效果。

1、【输入框+下拉菜单】组合

新浪微博的搜索框,将下拉选项融合到输入框提示里,选择搜索范围的操作更加便利。

Google reader这样的带输入操作的下拉菜单,让下拉菜单更加易用。(这种控件组合在word、photoshop等软件里很常见,如字体选择控件)

2、【按钮+下拉菜单】组合

豆瓣Flickr的搜索按钮后面加了一个下拉箭头,按钮与下拉选择操作合二为一 (flickr这个设计与它网站主导航条体验一致,豆瓣用这种设计在其整站看来则略显突兀)

三、文件上传组件的创新 【瘦身法】

标准的文件上传组件是由“输入框(伪)+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为它主要承担显示文件路径的作用,于是Firefox下点击这个输入框是开始文件选择操作,chrome更是把伪输入框改造成了按钮,还原控件最原始的作用。

使用标准文件上传组件经常会出现两个提交按钮,以上图为例,最经常的误操作就是:选完文件后,直接点击“保存头像设置”,于是杯具了。

Gmail附件上传的设计对文件上传组件做了两次瘦身手术。

过去的gmail附件上传步骤是:1、点击“添加附件”(点击后出现一个不带提交按钮的上传组件),2、选择文件(选完后自动开始上传)。去掉了那个提交按钮。

现在的gmail附件上传步骤是:1、点击“添加附件”(点击后自动开始上传,且有上传进度条)。去掉了输入框和提交按钮,只剩下一个浏览按钮,上传只需要一次点击操作。

不一样的交互组件(上)

不一样的交互组件(中)

来源:http://ued.taobao.com/blog

不一样的交互组件(上)

交互设计是一个创造性的工作,利用创新的方式漂亮地解决产品问题,是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习,更是 一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计,一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件 创新的四种常见方式,与大家共勉。

一、滚动条的创新【重构法】


我们先来回想一下阅读PDF文档的两种滚动方式:1、手型工具拖动 2、滚动条。

要翻看后面的信息,用手型工具向上拖动,用滚动条则是向下拖动,两种操作方式的原理是什么呢?

把文档分成可视区域A和整体区域B。滚动条滑块对应的是文档的可视区域A。因此滚动条拖动的是可视区域A,而手型工具拖动的是整体区域B,两种操作方式拖动的主体不一样,所以方向恰好相反。

滚动条可以理解为文档在垂直方向上的缩略图,滑块可以表示可视区域当前位置,可视区域占整体区域的比例。随着文档整体区域不断增高,可视区域所占的 比例越小,因此滑块高度不断变小。统计过IE、FF、Office等常用软件,一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时,滚动条的拖动 体验就相当的差。

Google wave对滚动条做了大胆的创新。

1、  上下按钮与滑块连在一起(好处:从滑块到上下按钮的鼠标运动距离变短;问题:点击上下按钮,滑块无法跟随运动)

2、  滚动条的滑块高度固定不变(好处:解决了滑块极小的问题;问题:无法表示可视区域的比例)

这两处修改优化了传统滚动条的问题,却引发滚动条基本属性(“位置”与“比例”)问题。为解决引发的新问题,google wave的滚动条引入了两个新元素:

1、  半透明灰色块 (点击上下按钮,滑块无法跟随运动,则半透明灰色块运动——解决位置问题)

2、  终止条 (wave内容不断增多,终止条位置不断向下,用来表示内容整体高度——解决比例问题。可惜这个终止条视觉效果让人以为是可拖动的,容易引起疑惑。)

Google Wave花了这么大心思创新滚动条,也面临着滚动条复杂化后引发的用户习惯问题。个人认为这个滚动条创新是因产品需要而做的,wave一个页面可能同时存 在4个滚动条,当4个传统滚动条同时出现在一个页面上效果可想而知。Wave滚动条无论视觉还是交互上都是很“轻”的设计,与产品整体上还算贴切。

====================================================

苹果对滚动条的改进则简单有效:加锚点。

mac官网: 加锚点横向滚动条,点击锚点,滑块滚动到相应位置

iphone音乐专辑列表:加锚点的滚动条,轻触字母,列表滚动到相应位置

加锚点的方式让滚动条增加了导航和准确定位功能,变得更加易用。

不一样的交互组件(中)

不一样的交互组件(下)

http://ued.taobao.com/blog/2010/02/05/interactive-controls-innovation1/

交互设计实用指南系列(8)—深广度平衡

相信大家对街边林林总总的房产中介并不陌生,那么我们先看看下面这张图片。

图1

从右侧这家店的橱窗里,我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类,并且在视觉上做了一些划分,让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题:深广度平衡

1. 什么是深广度?

其实“深广度”本身并不是一个单一的概念。在网站的信息架构中,有一种组织结构叫做树形结构:网站首页视为链接层级中第一级,与其有从属关系的页面 视为链接层级中的第二级,一般称其为二级页面。通过二级页面又可以继续得到第三级页面,依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结 构,我们称它为树形结构

在整个树形结构中,链接的层数被称为网页链接的【深度】(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的【广度】(breadth)

我们可以通过下面这张图来理解深度和广度的概念:

图2

2. 为什么深广度需要保持平衡?

我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”(它们之间没有层级结构;链接没有模式可循;且没有某种导航方案将他们分离开)(注1)在这里每一条房产信息都可以看成一个内容链接,整个橱窗就像一张错综复杂的大网,让人头晕目眩。

而右侧的店铺采用的是“结构化浏览模型”(只有一组链接,作为获取网站信息的途径;导航区域与布局中其他内容有视觉上的分隔;要到达另一区域的某个页面,必须沿着树向上导航,再沿着另一个分支向下)(注2)店家将信息进行了规整,在房产信息上增加了一个分类,并且对不同类型的信息使用了不同的颜色,高效的将租房信息和售房信息区分开来。

一个网站的链接深度和广度最好有一个合适的均衡关系,深度过大的网站不利于用户快速获取信息,广度过大的网站则容易让用户在无数并列的超链接面前不知所措。

图3

图3的上图说明了又窄又深的层级系统,用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言(相对而言),用户必须从6个类别中选择, 才能找到6个条目。就像图3的下图所示,用户会面临主菜单上太多选项,而当他们选了一个选项,却没看到什么内容时,就会产生不良的观感。(注3)

我们再来看一张用户对于不同层级结构所需反应时间的图表(注4),图4:

图4

总共512项内容,组成了三种不同的分级方案,X轴是分级,Y轴是反应时间(秒)。可以很清晰看出,在过深和过广的分级方案上,用户所需要的反应时间都比较长。因此我们在组织网站信息的时候,需要仔细平衡深度和广度之间的关系。

3. 如何保持深广度平衡?

我们在处理网站结构时,常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。

图5

这是某电脑公司的官方网站,他们的导航本身就是一个站点地图。他们将14项内容分级组成了一个两层的结构树,每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说,使用主题或科目的方案,将信息组成一个两层的结构树,就是一种深广度平衡的方式。

再来看个案例,图6是某软件官方网站的一个下载区块,这个区块里密密麻麻罗列了N个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户,体验是非常糟糕的。

图6

对于那些信息量很大很杂的网站来说,单纯的使用某一种按类分组的方案已经不太适用了。一般来 说,广度比深度的效果更好。在深结构的各级别间选择,比起在广导航的各选项间扫视,要付出更多精力。眼睛比起鼠标点击(和页面载入)要快得多。虽然用户在 深结构更容易迷失方向,甚至可能迷路,但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户,让他难以选择。用户会点击看起来适合他们需要 的第一个选项,或者干脆放弃,下图清晰的阐述了用户放弃率和深广度之间的关系:

图7

淘宝首页类目地图大概有300个类目,使用了三层结构将他们清晰得展示出来,每层类目都是4~12个之间,是一个深广度保持平衡的典型案例,图8:

图8

小结

对于不同类型,不同信息量的网站,在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。

注1:摘录《Web导航设计》第1章 第一节 导航的需要(P6)

注2:摘录《Web导航设计》第1章 第一节 导航的需要(P9)

注3:摘录《Web信息架构》第5章 第四节 组织结构(P70)

注4:摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》


参考文献:

《Web导航设计》

《Web信息架构》

来源:http://ued.taobao.com/blog/2010/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/

交互设计中的视觉结构

网站的交互设计分2种:流程交互和界面交互(即”单页面交互”或“小交互”),而界面交互又包含2类:“视觉结构”和“动态模块”。之前提及过交互设计中的页签,下面看看视觉结构。

何谓动态模块?简单的说就是“AJAX”,它有几种视觉呈现方式:弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)

何谓视觉结构?
界面信息按逻辑关系、包含关系和先后顺序,进行排列、组织后形成的模块,即为视觉结构。

这个界面结构可以很大,也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的:

视觉结构

再如Blog的视觉结构

视觉结构

这些大的界面视觉结构都是由一个个小的模块结构组成(如下图):

视觉结构

视觉结构

视觉结构的对比

视觉结构

视觉结构

以上是2款网页游戏中关于“农田升级”时的不同表现方式,哪一种视觉结构更易让用户接收信息并操作?

导致视觉结构混乱的因素有哪些

1. 最常见的情况是公司无交互设计师,产品信息未经过梳理就传达给UI设计师了,最后产出了一个可用性比较差的产品。
我们常常看到:PM把设计诉求提供给UI,UI也按部就班的完全执行,可出来的东西就是感觉有问题,但也说不出到底为什么,于是一版接一版不停的改,最后……这个沉重的负担压得UI直不起腰来,这不公平。
此时UI设计师或产品经理要大胆的站出来:“我们需要交互设计师来帮我们梳理信息!”
当然,交互设计师也要积极主动回应一下。

2.还有一种情况:由于视觉设计本身是一种比较主观的创作性工作,那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲,加入许多不必要的线条和修饰……诸如此类,很多产品上线后的可用性可想而知。
这种情况下,交互设计师(或产品经理)的个人魅力和沟通能力尤为重要,既不能打击UI设计师的积极性,又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥,这是一种艺术。

视觉结构对于信息架构的作用:
因为视觉结构中承载着信息,所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。

攻守平衡的关隘:
视觉结构,上可攻信息架构,下可守界面设计。一个交互设计师对信息的理解有多深?看看他原型中的视觉结构就知道了。

问题和后果
信息架构出了问题(譬如一级导航里缺内容,流程走不通等等),则会导致产品根本不能用
视觉结构不清晰时,我们接收信息的速度就会变慢,导致产品不易用

换句话说,信息架构如果考虑不明白,视觉结构做得再好也白搭,而UI设计最终是充当尸体彩绘和替罪羊的角色。
当我们对众多“尸彩产品”愤怒的时候,是否也该反思一下,到底是什么原因造成的?

来源:http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html

交互设计—页签(1)

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

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

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

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

自己/他们总结的:

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

理解的概念:

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

总结的样式:

A 页签tab_ 普通 常见 横向

B 页签tab_ 多类别 多内容

样式上传待续…

来源:http://www.xibeidesign.cn/?p=506