雅虎组件库 - UCD大社区

搜索翻页(Search Pagination)_Yahoo_Pattern(翻译)

猪小凡 — 2010-08-16 09:02:34

原文地址: http://developer.yahoo.com/ypatterns/navigation/pagination/search.html

当搜索返回的结果太多,无法显示在一页上时,将信息拆分进一系列的页中.

用单行链接的方式来实现翻页控制,可以让用户浏览更多的结果,而不是将结果都显示在一页中.

解决什么问题?

用户需要查看按相关度排序但是又无法简单的放在一页当中的搜索结果

什么时候用?

显示搜索结果
搜索结果太多,无法合适的放到一页中

具体解决办法是什么?

将信息按相关度排序,并拆分到一系列的页中
为访问不同分页提供翻页控制

翻页控制

显示单行的链接作为导航控制
按照以下顺序显示链接”上一页”,单页链接,”下一页”
在”上一页”之后显示一个左箭头图标
在”下一页”之前显示一个右箭头图标
让箭头图标也是可点的
单页链接应该包含一组最多10页的链接.如果结果页少了,那么仅显示可用页面的单页链接
当所选页在1-6页之间时,单页链接应该总是从”1″页开始
在所选页在6页之后时(7页和之后的),单页链接应该从当前页减5后的页数开始.比如,当前页是7时,第一页应该是2(7-5=2),最后一页应该是11(仍然需要显示10页)

当前页是第一页时,不要显示”上一页”和箭头图标
当前页是最后一页时,不要显示”下一页”和箭头图标
单页链接中,当前页应该无链接
需要标注”结果页”

为什么使用这个组件?

箭头图标可以帮助区分链接,同时增大可点区域
因为以下的原因,显示”不可用链接”(Disabled controls)基本没有价值
- 这些链接基本出现在第一屏之外(blow the fold)
- 搜索结果的第一页占据了流量中的绝大部分.显示一个不可用的”上一页”基本没有任何价值
尽管”第一页”有价值,但是在”随机存储”的链接中显示较难.(个人认为是技术上很难实现.原文:it competes with the functionality presented in the random-access links)
“最后一页”也基本没有价值,因为搜索结果是按照相关性排序的.同时也是因为搜索结果的总数(因此,最后一页)可能无法知道

可访问性

支持用Tab键来定位每一个链接
支持用回车访问已定位的链接

下周北京出差,可能会减缓翻译的进度….

项目翻页(Item Pagination)_Yahoo_Pattern(翻译)

猪小凡 — 2010-08-15 14:26:22

原文地址: http://developer.yahoo.com/ypatterns/navigation/pagination/item.html

当数据太多(或者数据项列表太长)一页显示不下时,将数据项列表拆分进一系列的页中.
提供”上一页”和”下一页”的链接让人们可以访问被分页的数据,最好同时也提供”第一页”和”最后一页”的链接.

解决什么问题?

用户需要从一大组分好类的,但是无法简单的显示在一页的数据中查看一些数据项

什么时候用?

信息多到无法合适的放到一页中
通常感兴趣的内容可以在前几页就能看到
需要深度研究的信息,应该考虑放到一个可以滚动的区域内显示

具体解决办法是什么?

将数据项列表拆分进一系列的页中
提供”上一页”和”下一页”的链接来访问信息
同时提供跳转到”第一页”和”最后一页”的链接
同时提供用户正在访问的信息类型(type of object)

显示用户当前正访问的一组内容的信息.使用表单”[$ObjectName]s [DisplayedItemRange] of [TotalItems]“([内容名称] [当前显示的内容范围]/[全部内容] )
按照以下顺序显示链接: 第一页, 上一页, 下一页, 最后一页
使用箭头图标来增加链接的可点区域
当链接不可用时需要表现出不可用状态

为什么使用这个组件?

箭头图标可以帮助区分链接,同时增加点击区域
跟搜索结果翻页不一样,在翻页时,控制链接是一直可见的(即使不可用).这样可以防止当翻页时,不可用链接忽然被隐藏,干扰到用户

可访问性

正在访问的页面不要加上链接.比如,如果正在访问第3页,那么数字3应该没有链接

导航标签(navigation Tabs)_Yahoo_Pattern(翻译)

猪小凡 — 2010-08-11 08:54:57

原文地址: http://developer.yahoo.com/ypatterns/navigation/tabs/navtabs.html

当网站的分类不会经常改变时,在网站的LOGO和页头下方,水平放置一组固定的单行标签,是一种提供高层级的导航的方法.标签导航应该与整个页面宽度一致,分类的标题应该是可预知并且尽可能短,同时通过高亮当前选中的标签来保持”文件夹的隐喻”.(标签的设计是来源于现实中一组文件夹的隐喻,更多信息可以参考”模块标签“中的介绍)

解决什么问题?

用户需要通过一个全站导航来定位内容和功能,同时需要清晰的示意用户的当前位置

什么时候用?

有3-10个分类标题时
分类标题要相对较短同时(标题内的内容)可预知
分类的数量不会经常变化
页面的整体宽度取决于内容.另一个可选方案是左侧导航条
所有分类属于一个网站
你需要展示网站的顶级导航
你需要示意在一组可选项中用户的当前选择
(当用户点击时)你需要改变整个页面而不只是页面内容中的某一个小节
你需要一种控制顶级导航的方式

具体解决办法是什么?

在网站的LOGO和页头下方水平放置一组标签栏
如果第一个标签是”首页”,那么应该指向网站的首页
整个标签区域都可点-而不仅仅是其中的文字
标签中的每一个页面都应该保证有标签导航条
当分类列表太长时,建议使用”更多”链接,或者考虑使用左侧导航条

保持隐喻

被选中的标签应该突起在其他所有标签之前.没有选中的标签在视觉上应该位于后面,以此来加固用户的概念:是通过选中标签到达这个页面
被选中标签及所到达的页面应该有视觉上的联系,可以通过设计暗示,:比如颜色,边框,括号等等.选择另一个标签后应该重绘整个页面,同时展示与新标签有关的新的信息.
永远不要用多行的标签,因为这样会导致选中的与未选中标签之间的困惑
当用户从一个标签跳转到另一个标签时,整个标签栏应该出现在相同的位置

为什么使用这个组件?

标签可以保证情境.在大量信息中,它们具有视觉化表现用户的当前位置的作用
标签是基于现实生活的隐喻.”一组文件夹中的最前面的”隐喻让选中状态更容易理解
标签提供了导航.它们具有导航网站的作用

可访问性

允许用户通过Tab键通过合理的顺序来在定位标签
已定位的标签可以通过回车键来访问
通过以下替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)
- 在已激活的链接上加入值为”active”的title属性
- 给链接加上不可见的ALT属性,值为”active(激活)”
- 给表示已选中的Yahoo!图片加入值为”active”的ALT属性

手风琴导航(Accordion)_Yahoo_Pattern(翻译)

猪小凡 — 2010-07-14 23:07:36

最近事情很多,工作,生活,感情,亲情…..每个人在每个方面或多或少都会收到过挫折和困难,但是请享受并面对,因为这样才是完整的生活……

从Yahoo Pattern中学到不少东西,看这块中文信息比较少,所以打算开始翻译一下.同时因为手风琴导航这个组件在新版的客户端中也开始使用,所以先写这个.

原文地址: http://developer.yahoo.com/ypatterns/navigation/accordion.html

手风琴导航(Accordion)

手风琴导航(或手风琴菜单)是用可折叠面板来展示一类组织后的信息方式,在一定的空间内,它提供了一种大量链接或其他可选内容的访问方式.

每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮)来显示某一个子选项.

解决什么问题?

当在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理解(消化,in digestible chunks)同时可以不用滚动页面,因为滚动页面会让用户从上下文情景中脱离,或者会让他们从页面中喜欢的位置离开.

什么时候用?

当选项的数量比较多,页面空间有限,并且可以对选项列表有逻辑的进行归类,分成更小的,内容数量基本一致的内容块.

译者注: 此处要注意,内容列表不是内容的标题栏(如截图中是4栏),而是里面的内容元素,比如新闻标题,作者,日期,图片,该要,文字链等.

具体解决办法是什么?

对于选项采用两级分类

顶级分类是显示类别或者分组
二级分类是放到每个组里的选项列表

手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不一样),同时使用一级分类的内容作为标签(label).分类标签一般是与面板宽度一样可点击的标题栏,或者是一类展开/收缩的图标.

手风琴导航默认可以有一个面板是展开的.

建议

将最重要内容的面板默认展开,一来可以显示重要的选项,二来可以起到一个示范作用,收缩列表的每一项都独立可以展开
将当前展开的面板高亮,这样用户可以识别面板展开和收缩时不一样的标题栏
要避免将一个手风琴导航嵌入到另一个手风琴导航中.如果你发现需要这样做,树状菜单或者其他的适合显示多级结构的元素可能更合适.

译者注: 最近的版本中有一个组件就是手风琴导航,而当时并没有意识到,只是几个面板可以收缩和展开,并且至少会有一个面板展开.当时设计的标题栏上的icon是个上/下箭头来表示展开/收缩状态,但是后来发现逻辑无论如何调整都会存在歧义,后来发现这个组件,义无反顾的将icon换成加号/减号,结果没有任何问题了….

可选项

手风琴导航可以配置成始终有一个面板是展开的,或者是其他更灵活的(所有的面板都可以关闭,多个面板可以同时打开).一些设计师认为最好的方式是只允许一个面板打开,但是其他人都不认可.
手风琴导航可以配置成只有一次只有一个面板会打开,但是很多例子都允许同时打开多个.
除非是有表单元素或者其他的不可变的设计元素要求手风琴导航总体上要保持一致的尺寸,否则手风琴导航元素应该可以根据展开面板的不同内容来改变尺寸
通常,手风琴导航是通过单击来展开面板的,但是如果用户的使用情景是”开心的/有趣的/试试这个”,那么鼠标经过来展开面板也是可以接受的.

为什么使用这个组件?

使用这个组件最主要的原因就是在有限的空间内展示大量的选项.

特殊情况

大部分手风琴导航都是垂直放置的,不过也可以水平使用.

可访问性

对于键盘用户来说,就像树状菜单和标签一样,手风琴导航通常会打断使用.可以给手风琴导航标签之间的标志和切换面板的上/下箭头加上键盘导航.

当javascript被禁用时,手风琴导航需要做兼容,可以考虑把所有面板都展开.

如果什么都不显示的话对于屏幕阅读器来说可能会导致内容丢失.可以考虑将高度设置成0来解决.

顶部导航条(Top Navigation Bar)_Yahoo_Pattern(翻译)

猪小凡 — 2010-07-19 16:23:03

这个可能是最简单也最常用的组件了,所以内容也不多…….

原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

解决什么问题?

用户为了完成任务需要找到必要的内容和功能.

什么时候用?

2-12个分类的时候
分类的标题相对较短并且可预测的时候
分类数量基本不会变的时候
为一个web产品展示顶级导航时
配合标签来展示二级导航
如果页面宽度很重要,用它来替代左侧导航条
通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签.
分类都属于一个产品时

具体解决办法是什么?

在一个水平的横条上显示一系列单行的链接,如果有网站头部,则放到头部之下.
可以通过与”标签”一起使用,在导航条中同时显示一级和二级导航
如果只使用顶部导航条,最好第一个链接是”首页(Home)”.应该指向网站的首页
- 但是如果顶部导航条是用在一组标签下,那么标签的第一个应该是”首页”并且具有同样的功能
在导航条中用留白和”管道符” “|”(或者是垂直居中的”点”,或者是简单的视觉元素)来分隔每一个分类
顶部导航条中链接的所有页面本身也一定要显示在顶部导航条
当顶部导航条数量过多时,建议使用”更多..”的链接,或者考虑使用左侧导航条
与标签一起使用来显示高级别的内容
跟左侧导航条一起使用来显示二级或三级内容

关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最常见的错误是将一系列没意义的内容归在一类.

尽可能降低分类之间的交集
让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)
避免过于宽泛或者过于特殊的分类名字.

为什么使用这个组件?

顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容

进度条(Progress Bar)_Yahoo_Pattern(翻译)

猪小凡 — 2010-08-03 19:13:50

这篇放到草稿里好久了… 最近在忙着来杭州,杭州之后的安顿,今天终于可以完成了…

原文地址:http://developer.yahoo.com/ypatterns/navigation/bar/progress.html

进度条(或进度表)可以帮助用户对过程的长度和步骤有个预期,并且知道自己当前在哪个步骤.也被称作”进度指示器(Progress Indicator)”,”多步骤进度条(Multi-step Progress Bar)”,”向导(Wizard Steps)”,”进度表(Progress Train)”,”剩余步骤(Steps Left)”

解决什么问题?

用户需要意识到他们正在进行一个多页面(multi-screen)的流程(比如付款或注册)

什么时候用?

在向导中应该使用;在那些预先设计好的,用户可能只需完成一次或顶多在个别情况下需要完成的多步骤流程中需要使用.在常规的任务中就不要用了,因为那种笨重的,一步一步的手把手式(handholding)的方式最终会变得讨人厌

具体解决办法是什么?

由一个持续的,显示一系列步骤 ,高亮当前的步骤,并可以显示目前的完成度或百分比的导航条,来作为进度条(或进度表).

当用户决定开始流程时进度条就该显示
进度条上的最后一步应该反映出会进行必要操作的最后一页(比如:完成注册,提交订单).在进度条上不要使用冷冰冰的”确认”或者”收据页(receipt page)”
将流程按照用户的心智模型分解成步骤.很显然,每个步骤指的是操作而不是单独的页面,所以没有必要非要将步骤与页面1:1的对应上.比如:”登录”会涉及到一个登录页和注册页.
步骤名字要短,并且是排比结构的.”以行动导向”(Action-oriented)的动词比较好,但是只有在每一个步骤都能很恰当的通过这种方式描述的时候再用.
确保进度条对每一个用例都是精确和可信的.用户不该跳过步骤或忽然碰到进度条没显示出来的步骤.确保只有在必要的情况下才包含”登录”(的步骤).如果有必要,需要为不同的用例设计不同的进度条.
要确保进度条的视觉设计不会被误认为是可点击的导航条

为什么使用这个组件?

进度条可以让用户预估整个流程的长度,对于全部流程有个预览,并时刻告诉他们在整个流程中已经完成多少了.

答疑

“进度条”也可以用来表示”动态显示系统更新进度的动画条”(就像YUI2中的进度条组件)

这个组件可以解决相关联的多步栏或者作为逐步显示用户控制过程的指示器(译者注: 这句我真翻译不好,欢迎高手来指教…This pattern deals with an articulated, multi-step bar or indicator showing stepwise user-controlled progress.)

模块标签(Module Tabs)_Yahoo_Pattern(翻译)

猪小凡 — 2010-08-09 11:04:01

原文地址:http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html

如果页面中可用的空间很有限同时不希望页面刷新,则可以直接在内容上方放一行标签形式的链接,通过这种方式访问内容.

当前激活的面板需要有视觉标识,并且分类标题应该短,同时要小于10个.如果在使用情境中,内容不需要彼此之间同时查看,则可以使用模块标签(Module tabs).标签是现实生活中文件夹的隐喻.

解决什么问题?

用户需要在页面不刷新的情况下浏览一个或者更多叠放的内容面板

什么时候用?

有多个内容面板,但是空间只够一次展示一个
在使用情景中,不同面板中的内容不需要同时查看
你需要一种不用跳转到另外一个页面就可以在内容之间切换的方法.如果要在一个网站中导航到不同的页面,则应该导航标签.
有2-10个分类标题
分类标题要相对较短并且(标题内的内容)可预知
确认默认显示哪个面板是很重要的

具体解决办法是什么?

直接在叠放的内容面板上方放一行链接,用户可以控制
对于一块内容,永远不要出现多行标签.(译者注: 记得windows里面的选项卡吗….)
使用管道浮”|”或相似的图片来分隔每一个链接
至少选中一个标签并且暂时下面的内容
通过高亮背景及留白来表明选中的标签.Yahoo在选中的标签的底部增加了一个”暗示”(译者注: 猜测是指的”标签的高亮背景色与内容面板的背景色一致”)
内容应该跟它关联的标签有视觉联系和视觉界限(通常被”框”起来)
一次只有一个内容区域可见

保持隐喻

因为用户会从一个标签点到另外一个,所以标签应该出现在相同的位置
选择新标签时尽量不要刷新整个页面
选择标签不回影响到页面上的其他地方
选择标签不会跳转到一个不同的页面或者执行了一项操作(超出了”切换可见内容”的范围)

为什么使用这个组件?

标签展示了内容.在大量信息中,它视觉化表现了用户的当前位置
标签是基于现实生活的隐喻.”一组文件夹中的最前面的”隐喻让选中状态更容易理解
标签提供了导航.它给交替浏览内容提供了导航方法

可访问性

允许用户通过Tab键通过合理的顺序来在定位标签
已定位的标签可以通过回车键来访问
通过那些替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)
在已激活的链接上加入值为”active”的title属性
给链接加上不可见的ALT属性,值为”active(激活)”
Yahoo!的页面中会给已激活的标签加入值为”active”的ALT属性,用来表示已激活