Archived entries for

快速提升你的工作效率——PS中的文档管理(上)

PS中回溯历史记录的步骤是有限的,所有操作在经历超过一定步数的修改后都无法进行版本还原,以及进行针对原版本的修改。对于一个工程文件而言,版本不可逆是灾难性的。所以针对PS,我们应该保留素材的原始数据,尽量使用非破坏性编辑。

“非破坏性操作”是图像处理软件长久以来面临的问题,Adobe从最早的版本到最新的CS4,经过十几年发展,ps的用户们也遍历变迁。最早PS的使用者为了保留历史版本,不得不频繁“保存副本”。直到后来有了历史记录面板,有了快照,有了调整图层,有了智能对象,CS3版本中更向3dsMAX学习了属性堆栈。

来看看PS在“非破坏性操作”的4个方面上已具备的功能(截止到CS3版本):

  • 原始数据的留存:智能对象、历史快照。
  • 效果叠加:填充图层、调整图层、混合模式和图层样式
  • 操作区域:上文中提到的蒙版,剪切组
  • 属性堆栈:智能对象的滤镜库堆栈(PS3中新功能)。

四、使用填充图层和调整图层

图层面板下方的添加调整(填充)图层按钮

1 填充图层:

当需要为页面上某个版块添加浅灰色背景,在导航上使用长条型漂亮的渐变背景时,你是习惯如何操作,创建一个空白图层,在选区里直接填色?还是使用填充图层?

Ps中传统方式是在空白图层中创建选区或路径后执行填充命令,但自从允许使用填充图层在对象中填充纯色、渐变或纹理后,油漆桶变成了最鸡肋的工具之一。

相比较传统方式,填充图层具有更大的操作灵活性。单击图层面板中的图层缩略图,就可以随时更改颜色、修改渐变、更换纹理,且具有非常直观的预览效果。

填充图层中填充对象的形状范围实际上是一种内置蒙版,所以这种填充方式集合了蒙版的种种优势,比如可以使用黑白画笔来随意修改填充边缘、或使用矢量编辑工具来修改矢量形状蒙版。

图示案例:使用渐变填充图层、使用画笔/橡皮擦修改蒙版

在web设计中,所有需要使用填充色块的地方都尽可能使用矢量路径+填充图层来完成,这样生成的填充色块可以随时随地保持方便修改和无损形变。

图示案例:使用矢量工具+填充图层 创建常用元件。

2 调整图层

调整图像的色阶、色相、对比度、色彩平衡?把彩色图像变为灰度图像,色彩反相,调整照片的色温,这些都是最常用的操作。但你经常拿不定主意,对原始图像施加调整效果进行实验……

一个设计成浅蓝色的按钮,BOSS看了不喜欢,要求改成浅绿色。改完以后效果不好,BOSS又要求改成灰色……

如果你经常遭遇上述情况,请选用“调整图层”功能来进行你的调色实验吧。

PS中可以用来实现图像调整的方法:

使用调整图层要好于其它两种操作,调整图层不会更改原始图像中的像素,(会略微增加文件大小),也是一种内置的蒙版。可以随时更改。 在进行多项调整时,使用调整图层意味着新建多个图层,多个调整图层可以分别修改排序、混合样式和透明度

图示案例:使用调整图层改变元件配色

六、使用智能对象及滤镜堆栈

1  智能对象

PS从cs版本开始增加了智能对象(smart object)。智能对象可以保护原始像素内容,用户可以进行变换操作(包括缩放,旋转,变形等)而不会累次地降低图像质量。如一个400px宽的位图素材,使用变换操作压缩为200px宽,旋转45°。后来又想修改为300px框,旋转为原位。但上一次压缩操作已经对图像质量形成了不可逆的损害。如果在操作第一次变换前将该素材转为智能对象,无论它之后变换了多少次,都可以保证是基于400px宽的原始质量来进行更改操作。

智能对象的另一个好处是,可以通过编辑其中一个副本来实现对所有副本的同步改动。

一个使用了智能对象副本的psd源文件尺寸会小于标准的psd文件,这是因为智能对象图层的复制不会像标准图层复制那样生成真正的多倍像素内容,而只是充当了的角色。

这一点和“Ai的嵌入”有很像的特征。

图示案例:使用智能对象,编辑智能对象的原始文件,达到影响所有副本。

2 智能滤镜和滤镜堆栈

智能滤镜是指针对智能对象应用的一些滤镜,在滤镜库里可以浏览滤镜菜单,预览并对统一对象使用多个滤镜。

滤镜堆栈和AI中的外观面板很相似,所有施用过的智能滤镜都显示在PS的图层面板。你可以再次关闭该滤镜,调整滤镜的透明度和叠加模式,调整多个滤镜的施用次序

除了上述优点,还可以再次对智能对象的原始文件进行修改,所以使用智能滤镜,在原始文件和滤镜使用的操作上都有极大的灵活性。同时也都是非破坏性编辑。

图示案例:使用智能滤镜和滤镜堆栈。

3 栅格化操作

智能对象,矢量对象,文字对象有一些共性:在被栅格化(像素化)之前,随时随地都具备可编辑性,这个特性让上述对象类型在任何时候都应该成为你的首选。但是有些滤镜和变形操作是其失效的。

所以要非常谨慎地操作栅格化命令,栅格化和图层合并一样是破坏性的,不可逆的。

如果必须要使用某些滤镜效果或变形,建议不妨为上述对象创建一个副本,隐藏保留原本,在副本上施行操作。

对于边缘修改,边缘羽化、擦除这类操作,可以使用蒙版技术来完成。这同样是非破坏性操作。

七、使用图层样式(layer style)

图层样式可以实现非常丰富的特效,包括投影,光泽,纹理,发光。

除了常用的发光、投影、浮雕外(在webUI设计中其实它们反而不常用),

  1. 图层样式可用于填充纯色、渐变和纹理。比较与填充图层,图层样式最显著的特点是便于移植。
  2. 描边可用于创建border。内发光可用于创建padding。外发光可用于创建margin和小圆角边框。
  3. 混合模式、透明度、填充透明度都是图层样式的一部分。他们可以被一起方便地移植
  4. 单纯使用样式可以创建多种玻璃质感、水晶效果、金属拉丝、塑胶质感的按钮样式。

图层样式的优点:

图层样式可以通过复制、粘贴操作来传递到其它图层中。可以通过多选,一次向多个图层粘贴某个样式。还可以通过快捷键来操作。Alt+拖拽,是移动某个图层样式,alt+crtl+拖拽是复制图层样式。(使用鼠标快捷时,透明度,填充透明度和混合模式这3个属性将无法像粘贴图层样式那样也传递过去。)

图层样式不会破坏原始图像质量,允许随时修改样式的配置参数。

更改原始图像时,应用其上的图层样式会立即自动变换以适应新图像。

图层样式支持无损缩放。(涉及像素纹理的除外)。另外当psd文件的图像大小(分辨率)发生改变时,图层样式可同步缩放。必须保证“图像大小”的设置对话框里,如图这个复选框被选中,同步缩放才能起作用。

图层样式可保存为预设配置,进入资源库,在多个pad文件之间复用,保证样式的继承和统一。

下面这些链接中可以提供大量的图层样式下载,双击.sal文件,可以直接加载样式在预设配置里。

42 Photoshop Layer Styles for Button Design – Free Download

131 Ultimate Web 2.0 Layer Styles

220 Amazing Free Photoshop Layer Styles

八、资源管理——定义预设配置

对于交互界面设计这种存在大量需要风格统一的工程文件和多人团队协作的项目而言,资源管理是必须的工作。

和程序写作一样,需要先统一接口、函数,PS里也有许多可以预先配置好的元素。

包括 渐变、纹理、色卡、图层样式、矢量形状、画笔、等高线、工具、图案等,更专业的还需要做统一的颜色配置。

PS提供在”菜单: 编辑 —> 预算管理器”里管理这些资源。可对资源进行分组,命名,添加,删除,存储,载入等操作。

每一种资源都有对应的控制面板,每一个面板右侧都有折叠小三角。点击后展开统一的管理菜单。

在项目开始前,

  • logo和标志性装饰图形 作为 矢量形状预设载入。
  • 主配色 作为 色板预设载入
  • 常用渐变 作为 渐变预设载入
  • 主按钮和背景条样式 作为 图层样式预设载入
  • 常用纹理 作为 图案填充纹理预设载入
  • 常用虚线 作为 画笔图案载入
  • ……

花一些前期准备时间,将设计风格进行商讨统一,然后新建组别存储。并将不同类别的预设分别存储为预设文件:如色块文件:***_pro.aco , 渐变文件:***_pro.grd。分发给协作设计师使用。除了能大幅度提高工作效率,还能保证文档工作的专业和规范。

且无论项目持续了多长时间,或者经历时间漫长的频繁改版,或者更换过几个设计师,都能保证基础风格的协调和统一。

八. 多人协作项目的ps文档版本控制

Adobe的从CS版本开始,在套装中提供了Version cue 和 Bridge.

Version cue:  用户PSD文档的版本控制,多人在线协作管理

Bridge:图片管理/浏览工具。支持Adobe的所有工程文件预览(得保存为pdf兼容格式)。拥有支持 tag , 图片尺寸,类型 等多种维度的强大过滤器,用于管理本地数量庞大的素材库很好。

这两个小工具软件很容易被忽略,(我觉得是它们2.0之前的版本都做得太差了,Bridge曾经导致我频频死机。但是从cs3版本后,这两个小工具都在性能上做了很大优化,变得非常好用)

关于结合使用Version cue 和 Bridge,创建一个属于设计师的SVN系统,对工程文件进行版本控制,这有一篇写得很好很详细的教程。在阿里集团中,淘宝的UED团队还是最靠谱的。
Version cue+bridge(cs3)优化版本控制【alex ren】

快速提升你的工作效率——PS中的文档管理(下)

这是一个重要但是容易被忽视的领域,很多设计师没有文档管理和文档规范意识。认为只有代码工作者才需要什么编码规范和版本控制系统,photoshop作为一个应用软件,讨论这个有什么意义呢?

  • 作为工程文件,一个复杂页面的psd源文件里有200~300个图层是很正常的事情。
  • 作为最直面客户和BOSS的开发环节,以及存在对视觉表现的个体认同差异,你可能会遭遇最多的需求变动、修改建议,需求反复……。
  • 作为开发协作中的一员,你的源文件会被其他设计师或开发者使用或修改。
  • 作为开发文档中的一部分,你的源文件会面临移交、继承和重用。
  • 图层命名无法辨识,几百个图层没有分组、元件难以修改、被调用的原始素材被处理地面目全非,修改版本无法回溯、设计样式无法复用,同组的psd文件风格或布局无法统一……如果你正在修改这样一份psd源文件,会不会抓狂?

作为一个UI设计师,建立文档管理和文档规范意识,不仅能便于团队协助和工程文件的移交,更重要的是能快速显著地提升自己的工作效率。

作为工程管理的一部分,PS的文档管理也具有以下特征:

  • 编码规范:命名规范。
  • 架构设计:组织结构合理。
  • 版本管理:不对原始素材形成不可逆的破坏,可进行版本追溯。
  • 协作机制:元素和样式便于复用和调用。
  • 资源管理:通过定义预设配置库或资源库来提高效率。

下文中,我将和大家一一分享具体的工作方法。

一.图层的分组和管理

PS提供了三种方式来组织图层(layers)之间的关系:图层组、链接组、剪切组

在进行用户界面设计的过程中,应该根据布局区块来组织图层分组。对图层进行分组是一种基本的信息组织方法,将大量的、分散的、杂乱的信息经过组织、整序、优化、存贮,形成一个便于有效利用系统的过程。

1 使用图层分组管理的主要优势:

便于组织和检索:

将图层编入同一图层组组,进行图层组命名,并形成树状结构,可以方便创作者快速查找图层在图层面板序列中的所在。

如何快速选择图层:

选中移动工具,在属性面板中 取消自动选择前面的勾选,在下拉菜单中选中图层。在使用移动工具的时候,按住ctrl键,可以直接选中 当前可视的图层。

学习善用右键

用上面的方法快速选中图层后,点击右键,可以看见右键菜单中显示了 表示基于图层组的的树状列表,通过这个右键菜单可以快速切换到所需的图层。但前提是要有良好的图层组织结构和图层命名。

便于挪动修改布局:

图层组可以作为一个整体进行移动和缩放,将位于同一布局区块的图层编入一组,可以快速改变某一区块的位置和比例,方便地实行布局的调整。

便于整体管理:

图层组可以作为一个整体进行 删除、显示/隐藏、修改透明度和混合模式模式。图层形成编组,令创作者可以快速地显/隐一批图层进行效果预览。对一组图层进行整体操作。还可以创建基于组的蒙版,整体控制某一图层组的显示区域

在设计属于一个网站的不同页面时,使用图层组可以快速创建统一的设计模版,保留共有的区域的图层编组。

2 图层分组和链接组

图层分组具有结构特效,链接组更多用于表示关系。

为图层建立链接组,可以锁定几个图层之间的相对位置。对它们其中任何一个执行移动缩放、拖拽复制和删除操作时,都会对整体生效。

链接组更容易创建和解除关系,位于同一链接组中的图层可以分别位于不同的图层组,实际上形成了另一种结构维度。

3 尽量不要合并图层。

图层合并操作是不可逆的,(本文中指的所有不可逆的操作都不包括在历史记录面板的有限步数的回溯)。可以通过执行ctrl+alt+E 来合并图层,这个命令在被选中的图层上方创建了一个经过合并操作的副本,生成了一个新的合并图层。你可以对这个独立图层随便进行修改和调用,而丝毫不影响原始图层。

二、图层命名规范

一份没有图层命名和分组的源文件是最受前端开发人员诟病的,建立良好文档规范,养成对图层命名的习惯,除了利于源文件的移交、继承和重用,提供效率,也体现了对协作成员的尊重。同时,图层命名是使用图层右键菜单的良好前提。

建议主要使用英文命名,便于在不同系统平台之间的移交。

如何命名,可以参考前端的命名规范,针对界面布局、鼠标事件、不同的交互状态有许多约定俗称的叫法和缩写,例如:

页头:header   内容:content/container   页面主体:main

页尾:footer   导航:nav   侧栏:sidebar   栏目:column

整体布局:wrapper   左右中:缩写为 L R C   水平/垂直:缩写为H/V

导航:nav   子菜单:submenu   摘要: summary   按钮:btn   滚动:scroll

鼠标悬停:hover      点击:click      已浏览:visited。

等等……

三、使用蒙版

1 使用蒙版的好处:

蒙版通过叠加一个蒙版图层来控制原始图像的显示。最大的好处是:可以自由实现对原始图像图层的擦除、剪裁、抠图、边缘虚化等这些极普遍的操作,但原始图像内容不会受到破坏。

2 图层蒙版和矢量蒙版:

蒙版分为图层蒙版(我觉得像素蒙版这个叫法更好一点)和矢量蒙版

两者用法相同,一个是位图,一个是矢量。图层蒙版支持透明度,矢量蒙版支持路径。

图层蒙版通过工具栏上和图层面板底部的创建蒙版按钮来创建。原理跟存储选区的“alpha通道”原理类似。通过灰度来记录蒙版的区域及透明度。白色代表显示全透明,黑色代表不透明,50%的灰色代表50%的透明度。支持滤镜、柔化和改变透明度等操作。由于是像素对象,执行变换操作时,蒙版边缘会出现质损

矢量蒙版需要先创建一个矢量对象,然后按住crtl键的同时,点击图层面板底部的创建蒙版按钮来完成创建。可以通过路径选择和钢笔等工具对矢量蒙版进行编辑修改。由于是矢量对象,变化操作时蒙版对象的边缘始终是平滑的。但不支持透明度、柔化边缘和大部分滤镜

3 剪切组的优势和弱点:

剪切组也是蒙版的一种形式,同样具有不破坏原始图像的特征,它既可以具有像素蒙版特性也可以具有矢量蒙版特性(这取决于剪切组最底部的图层)。

剪切组的优势是可方便应用于多个图层,使用上具有直观的组织性,但坏处,对象图层必须在次序上紧挨着,而且在调整图层次序的操作时,容易导致误操作

载于《程序员》杂志09年第7期。

最近病得七荤八素,也没更新,过两天画好玩的。

分量不足——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

译者:西乔 来源:Smashing Magazine 作者:Jacob Gube

Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

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

web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中,人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页,这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

本文将讨论基于web页面或其它web应用中如何设计Tab,同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

分析Tab元素的构成

为了统一叫法以便于进行讨论,我们先花时间来认识一下Tab元素的每个构成部分。

An illustration of the anatomy of module tabs - see the following description to learn about the anatomy.

  • 标签:用户控制切换内容区的操作区域。
  • 标签和内容区在视觉上看起来应该是一个整体。
  • 标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。
  • 标签有选中和未选中两种状态,每次只能有一个标签是选中状态,在页面刚载入时,默认第一个标签是选中状态。
  • 内容区:Tab元素中重叠的区块。用于显示信息内容。
  • 内容区和标签一一对应,
  • 当前显示的内容区对应选中状态的标签,当前隐藏的内容区对应未选中状态的标签。
  • 用户应当能很轻易地通过控制标签来切换对应的内容区。
  • 默认被选中的内容区应该在页面载入后立即显示。

一 。什么情况下应用Tab设计

当交互设计师希望节省页面空间;紧凑布局;且需要组合的几种信息之间具有关联性时,可以选择Tab应用。

信息之间具有某种关联特征

构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以出现在同一个tab元素中的几种信息自己应该具有关联特征,这样用户才能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合:“ 最新更新 | 最热文章 | 评论最多 ” 。

下图是网站Webdesigner Depot的侧边栏上的Tab元素:“全部文章 | 最受欢迎 | 最新更新”

Webdesigner depot module tabs.

信息之间不应该存在对比或并行的关系

Tab元素中,同一时刻,只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比,或者这几种信息同时显示会更便于用户阅读时,就不应该使用Tab。否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。

下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。如果在页面上同时显示这4个内容区上的信息,可用性和友好度会更高。

BGPatterns misuse of module tabs.

另一个反面案例:网站 Best Web Gallery 在它侧边栏上所放置的Tab,标签分别是 ”特别推荐“(包含了一些网站所有者认为值得注意的链接)和 “最新评论”。 这两组信息之间并没有逻辑联系,用户会很疑惑为什么这两者要放在一起呢。所以这个Tab中的两组信息最好分开放置。

Best Web Gallery not using related content for module tabs.

每个内容区应该有一个简短明确的标题。

Tab元素的标签区宽度是有限的,所以标签区的文字应该简洁扼要,具有代表性,长度控制在1~3个英文单词。用精炼的方式展示信息,除了保持设计样式不变形外,还可以让用户更快速地处理文字信息,用以预测隐藏区域上所包含的内容。

Tab应该用于展现精炼的内容。

Tab本意用于展现标准化和易于理解的信息。基于此,Tab应该只用于显示信息摘要和内容要点,例如列表,数据图表,或1~2段简短的文字这种形式。

二 。Tab的可用性原则及优化方法

这一章节 我们将讨论一些关于Tab的可用性设计原则,以及如何使这种交互元素变得更友好和有效。

选中的标签应该高亮显示。

选中状态的标签应该设计得显眼,让用户容易区分当前显示的内容区是对应哪个标签。通用做法是 为未选中状态使用统一的背景色,为出于选中状态的标签上使用高亮的背景色。

保持标签只在一行内显示

Tab的标签通常是水平方向排列的(当然如果你愿意,也可以设计成垂直方向排列的),标签如果分布在多行上会导致用户在使用中产生疑惑。

这是由于在水平方向上多行分布标签,隐含一种等级关系,可能让用户误以为第二行是第一行的子级。

标签需要分布在多行上时,也就意味着标签的数量过多或者标签上文字太长。而这些都是需要被精简的。

Single row counter example - having two rows implies that tab controls have a hierarcial relationship.

内容区之间的切换 应该没有延迟。

使用Tab来控制内容切换的特性之一是快速和互动。为此,应该在html代码里提前内嵌所有内容区的代码,并通过CSS/Javascript来隐藏未被选中内容区,而不是等用户切换到某个标签后再去远程请载入信息。

避免在标签切换的时候去载入页面,使用AJAX从远程读数据来生成动态菜单也是一个办法,但这对使用语音阅读器的用户(译注:Screen-Reader:为视力障碍的用户准备,可以语音读出页面上的信息。)是不友好的,因为语音阅读器不支持DOM模型。

(译注:有4种方法载入隐藏区的内容代码:

  • html 一次性载入:这种方法原始且安全,但是存在数据太多或太复杂导致页面解析缓慢,从而导致整个页面打开速度变慢,这是不可忍受的。
  • frame: 将隐藏区的代码作为一个frame载入,frame的好处是可以新建进程,和页面中的图片同时下载。不同的浏览器可以运行一定数量的进程并行,比如IE可以同时允许4个。这样对整体页面的打开速度影响小。另外,frame可以进入浏览器缓存,在多个页面共用同一个Tab元素时,frame是一个好选择。
  • iframe:iframe和frame类似,继承了frame的优点,此外它还可以作为一个容器随意嵌入页面。google adsense使用了iframe来实现了局部代码的载入。。
  • Ajax:响应用户操作或响应某个触发条件,由JS在后台向服务器发出请求,载入隐藏区的代码。我认为除了交互和需要响应动态生成的内容外,没必要ajax技术。)

在标签上使用简短和有逻辑的文字。

标签应该设计得尽可能窄,以便在一行内容纳尽可能多的标签。

在标签区使用简单的描述或内容关键字,可以帮助用户在扫描页面时快速找到他们想要的内容。所以使用概括准确符合逻辑的文字来描述内容区是非常重要的,选用这些文字应该经过深思熟虑。

下面这个在网站CBS.com上的案例,是一个难用的Tab。标签上没有任何说明性文字,用户无法预测未显示的内容区里到底有什么。

C B S dot com do not use descriptive tab control text making it hard to anticipate what content is.

而在 Navigant Consulting 的网站上,使用数字来暗示数据是有序的。但仍然没有表达出内容区里包含什么。这种设计容易产生歧义导致用户产生不必要的困惑。

Navigant Consulting uses numbers for tab control text.

不要在内容区内使用滚动条

在Tab的内容区里使用滚动条会增加用户负担:用户在要查找信息在哪个内容区里时,不仅需要切换标签,还需要加上移动滚动条的操作。

内容区里容纳的信息太多或设计Tab时设定的高度不够,会导致滚动条出现。所以需要考虑精简内容、增加高度值,或把选中状态的内容区处理为的高度自适应。

三。考虑Tab的易用性

更复杂的交互行为的出现,在不刷新页面的状态下异步更新内容,以及如何满足用户使用不同访问方式,包括那些很难确定的非典型状况下的访问需求,这些状况令易用性成为当前最热门的话题。本章节中,我们将讨论一些在设计Tab元素时你应该知道的易用性原则。

“选择”和“未选中”状态的标签 应该使用对比鲜明的颜色

为了让视力上有障碍的用户能分清哪些标签是已选中的,哪些是未选中的,应该使用高对比的背景色来做出区分。

Yahoo! News 网站中的反面案例:选中和未选中状态的标签 只有非常小的视觉上的差异,他们对视力好的用户没问题,但是会给视力不佳的用户带来麻烦。

Yahoo! News colors make it hard for low-vision users.

此外,请务必保证标签的文字颜色(前景色)和标签背景色 有充分的对比。即使是未选中的标签,用户也应该能轻松阅读上面的文字。为了让未选择的标签看起来不显眼,而把它们都直接变灰 是不妥当的。

确保 隐藏内容区里的信息 在语音阅读器中是可读的

基于可访问性,Tab应该使用技术将未选中状态的内容区隐藏起来,但是不能在DOM Tree中删除他们。比如不能使用 display:none; 或者 visibility:none这样的css参数去定义容器。这类参数导致语音阅读器无法读取被隐藏的内容区中的信息。

(译注:中国设计师可能不太重视语音阅读器的可访问性,但是在国外,有专门的法令条款规定,机构网站不得歧视有障碍的用户,包括视力缺陷,行动障碍、癫痫患者等,所以外国的产品或前端工程师会很重视这一点,不然会遭到投诉甚至起诉。这种差异去看看中国人是如何设计盲道的就明白了。)

详情请见Roger Johansson’s 的文章 《利用css隐藏内容:问题和对策》”Hiding with CSS: Problems and solutions“.

(译注:Roger Johansson’s的文章中指出:许多CSS和JS教程建议使用display:none; visibility:none 来隐藏元素,但大多数状况下这是一个会降低可访问性的选择,。

display:none的真正含义是表示这一元素并不存在,不需要显示打印或被阅读。大多数语音阅读器会忽略任何使用display:none来隐藏链接,文字,导航和标题等。作者建议使用的技术是使用绝对定位坐标,例如 .structural { position:absolute; left:-9999px; } 。

另一个需要注意的问题是,当你决定使用JS去显示一个元素时,也应该用JS技术去隐藏它。因为考虑到客户端是否支持js以及安全等级,如果客户端的js没起作用,可能交互或动态菜单没效果,但起码内容是可访问的。但如果你使用css去隐藏一个元素,但使用js技术去显示它,在某些状况下,这个元素会变得一直无法访问。)

使用语义化的HTML结构来构造 Tab的标签。

使用无序或有序列表(译注:<ul> <li>这类标签)来构造标签的html代码,可以改善可访问性。因为使用语音阅读器的用户可以基于此来识别出这是一组Tab标签。如果标签上使用了图片来代替文字,别忘了添加ALT 或 title属性来 描述图片的含义。

允许键盘操作。

键盘导航是为一些有行动障碍或不能使用常规输入设备(如鼠标)的用户准备的。这种用户会使用替换形式(比如键盘或语音)来控制导航菜单,确保他们能将控制焦点在标签间切换,并激活他们想要的部分。

一个简单测试键盘导航的简单方法是:使用键盘上的Tab键,看你是否能将控制焦点 集中在每个标签上?使用回车键,当前的控制区域是否能被激活,使未选中状态有效地切换为选中状态。

提高对用户客户端的兼容性。

当客户端无法支持某些技术,比如当浏览器关闭了JavaScript功能时,或者 当用户没有安装Flash插件时,Tab内容区上的信息必须保证最基本的可访问性,交互元素确保能被替换为最基本的html文本。

四。 提升之道。

在提供了一些基本的可用性建议和原则后,我们还可以讨论一些方法来进一步提高Tab元素的可用性。

在标签上使用icon来形象化地描述内容区说包含的信息。

在标签上配合使用形象的icon,可以增强对内容区信息的描述。

例如在网站 DrawIt 中,图标用于形象地补充说明所对应的内容区的功能。

DrawIt uses icons in tab control text.

在标签上使用icon,必须保证它们是形象的,切题的。使用不相关的icon会适得其反。

避免在标签上直接用icon来代替文字。

不同的人对一个图像有不同的解读,最安全的方法是使用加上文本来描述内容区信息。

在内容区切换的时候使用过渡动画。

在内容区切换的时候使用过渡转场动画是一个不错的选择,可以为用户提供积极的视觉反馈——内容区正在变化!

大家可以去网站 Coda ,从左到右点击Tab标签,欣赏切换时的效果。

Coda uses animation to switch panes.

当用户在Tab的标签区进行操作时,有明确的悬停响应。

默认情况下,当用户将鼠标移到超链接或标签区域上时,鼠标指针的样式会发生改变,让用户知道标签区域是可点击的。

除此之外,还可以利用背景色变化来响应用户的鼠标操作。对于那些不熟悉Tab标签操作的网站新用户而言,这是很有用的。

下图中Vyniknite.sk 网站的案例里:当用户鼠标划过未选中状态的标签,背景色会变成鲜明的红色。

Vyniknite dot s k uses red highlights for hovers.

五。Tab的真实应用

现在为止,我们从细节上探讨了Tab这种交互元素,是时候来看看真实案例了,在这一章节,我们分析一些Tab元素的应用,希望可以带给大家灵感。

Haveamint.com

这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。

Mint module tabs screen shot.

Yahoo!

雅虎在头版位置使用Tab设计,对信息内容的显示进行了压缩和模块化。

Yahoo! module tabs screen shot.

iGoogle

Igoogle在模块中大量使用了Tab,不占用大量的屏幕空间,又令信息饱满。

iGoogle module tabs screen shot.

Blue Acorn

蓝橡果网站 利用Tab来显示网站的热门文章: 电子商务和Magento(一个电商软件平台),内容区上还放置着引导用户浏览更多文章列表的按钮。

Blue Acorn module tabs screen shot.

MailChimp

在这个案例中,你可以看到利用图标强化标签文字描述的应用。

MailChimp module tabs screen shot.

WebNotes

WebNotes 网站的Tab元素,标签位于内容区下方,令人耳目一新。内容区切换时有淡入淡出的动画。

WebNotes module tabs screen shot.

WorldCat.org

WordCat.org 在搜索框中使用了Tab标签,让用户可以针对特定搜索需求缩小搜索范围。(比如书籍、DVD、或者文章)

WorldCat dot org module tabs screen shot.

Martha Stewart

Martha Stewart 在网站的“推荐内容”上应用用了Tab设计,可以自动播放和带有过渡动画。

Martha Stewart module tabs screen shot.

Krista’s Creations

Krista’s Creations 利用字母表作为标签来控制图片的分类显示。

Krista's creation module tabs screen shot.

Clearspring

Clearspring 拥有响应速度极快的Tab,这是一个非常好的古典样式的Tab设计案例。

Clearspring module tabs screen shot.

Homewood

在网站Homewood中,它们也利用icon来辅助了标签上文字的表述。

Homewood module tabs screen shot.

Apple – iWork

苹果网站里,垂直方向排列的Tab标签设计,非常漂亮。

Apply iwork module tabs screen shot.

ExpressionEngine

网站 ExpressionEngine 把标签控制区放在Tab窗体的底部,在快速载入内容区和快速响应内容区切换方面,它也是一个典型案例。

ExpressionEngine  module tabs screen shot.

Viget Inspire

Viget Inspire 在“热门文章”版块使用了Tab,有淡入淡出的切换动画,内容区高度可根据内容长度自适应。

Viget Inspire module tabs screen shot.

Komodo Media

Komodo Media 的标签里,icon放在文字上方。

Komodo Media module tabs screen shot.

atebits

atebits presents 用Tab来展示产品介绍,它有效地在这么小的空间里展现了如此丰富的内容。

atebits module tabs screen shot.

Tumblon

Tumblon 把标签放置在内容区下方,能快速响应切换,但不好的是,标签的选中状态和未选中状态不是那么容易区分。

Tumblon module tabs screen shot.

kevadamson.com

在 Kev Adamson的网站中,右边栏里有好几个Tab,网站使用了不同的ICON配图,帮助用户理解不同Tab的功能。

kev adamson dot com module tabs screen shot.

六。 Tab的创建教程(前端方面的)

有很多教程能告诉你在页面上如何建立和实现一个Tab,下面,你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。

Building Tabbed Content 《如何创建Tab》

通过阅读这篇初级教程,你可以了解如何通过使用 JS 框架Prototype创建一个简单的Tab元素,

Building Tabbed Content Demo screen shot.

Create A Tabbed Interface Using jQuery 《使用jQuery来创建Tab》

Dan Harper 提供给读者关于如何使用jQuery库(译注:著名的js库)来构建Tab。

Create A Tabbed Interface Using jQuery demo screen shot.

Accessible Image-Tab Rollovers 《图片标签导航的快速切换》

学习如何实现用图片来制作标签导航区,并实现快速切换

Accessible Image-Tab Rollovers demos screen shot.

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery来实现一个可平滑切换的Tab》

Create a Slick Tabbed Content Area using CSS & jQuery screen shot.

七 。脚本资源

如果你真正查找能直接在你网站上应用的Tab脚本代码,这有一些免费的解决方案。

DOMTab

DomTab 是一个很受欢迎的脚本,能很容易创建一个Tab元素,把普通的链接列表改造为Tab元素。

DOMTab screen shot.

JavaScript Tabifier

这段由BarelyFitz 设计的即插即用 的 JavaScript代码,能够帮助你在个人网站上更快速实现Tab元素。

JavaScript Tabifier screen shot.

TabView

TabView 是yahoo用户界面库(YUI)里的一个元件,你可以利用这个元件来减化代码量和图片的使用。

TabView screen shot.

Coda-Slider

Coda-Slider 是Coda 设计的Tab实现脚本,可以实现内容区切换的转场动画效果,还可以设置将Tab标签处理为靠左对齐或靠右对齐。

Coda-Slider screen shot.

idTabs

idTabs 是 jQuery 的一个简化插件,其强大的设置功能可以简化原来控件中复杂的参数组合。

idTabs screen shot.

Tabtastic

idTabs是一个JavaScript库,也包含创建Tab工具,这有深入浅出的使用教程Step by Step pane

Tabtastic screen shot.

Ajax Tabs Content

动态和远程数据,你可以使用AJAX这种动态驱动的方法,来异步更新内容区里的信息。

Ajax Tabs Content

Carousel – Module Tabs

这段Tab脚本简单但有高度自定义的空间,支持动画与自动播放。

Carousel - Module Tabs

关于原作者

Jacob Gube 是一个JS和PHP工程师、WEB设计师、作家,Six Revision的创始人及总编。Six Revision是一个在线共享专业的开发与设计资源及教程的平台。这是他的Twitter:follow him on Twitter



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.