Axure原型设计之yahoo组件库[免费]

1、Axure原型设计之yahoo组件库By 佳和讯拓软件设计组2011年4月16日顶部导航条(Top Navigation Bar)_Yahoo_Pattern3解决什么问题?3什么时候用?3具体解决办法是什么?4为什么使用这个组件?5左侧导航条(Left Navigation Bar)_Yahoo_Pattern6解决什么问题?6什么时候用?6具体解决办法是什么?7为什么使用这个组件?9可访问性9开放式问题?9进度条(Progress Bar)_Yahoo_Pattern10解决什么问题?10什么时候用?10具体解决办法是什么?11为什么使用这个组件?12答疑12导航标签(navigation

2、 Tabs)_Yahoo_Pattern13解决什么问题?13什么时候用?13具体解决办法是什么?14为什么使用这个组件?14可访问性15搜索翻页(Search Pagination)_Yahoo_Pattern16解决什么问题?16什么时候用?16具体解决办法是什么?16为什么使用这个组件?18可访问性19项目翻页(Item Pagination)_Yahoo_Pattern20解决什么问题?20什么时候用?20具体解决办法是什么?20为什么使用这个组件?21可访问性21模块标签(Module Tabs)_Yahoo_Pattern22解决什么问题?22什么时候用?22具体解决办法是什么?2

3、3为什么使用这个组件?23可访问性24手风琴导航(Accordion)25解决什么问题?25什么时候用?26具体解决办法是什么?26为什么使用这个组件?27特殊情况28可访问性28顶部导航条(Top Navigation Bar)_Yahoo_Pattern这个可能是最简单也最常用的组件了,所以内容也不多.原文地址: 用户为了完成任务需要找到必须的内容和功能.顶部导航条在水平的紧凑的空间内提供给用户已分类内容的访问入口.解决什么问题?用户为了完成任务需要找到必要的内容和功能.什么时候用?· 2-12个分类· 分类的标题相对较短并且可预测· 分类数量基本不

4、会变· 为一个web产品展示顶级导航时· 配合标签来展示二级导航· 如果页面宽度很重要,用它来替代左侧导航条· 通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很大时,用它来替代标签.· 分类都属于一个产品时具体解决办法是什么?1. 在一个水平的横条上显示一系列单行的链接,如果有网站头部,则放到头部之下.2. 可以通过与”标签”一起使用,在导航条中同时显示一级和二级导航3. 如果只使用顶部导航条,最好第一个链接是”首页(Home)”.应该指向网站的首页· 但是如果顶部导航条是用在一组标签下,那么标签的第一个应该是”首页”并且具

5、有同样的功能4. 在导航条中用留白和”管道符” “|”(或者是垂直居中的”点”,或者是简单的视觉元素)来分隔每一个分类5. 顶部导航条中链接的所有页面本身也一定要显示在顶部导航条6. 当顶部导航条数量过多时,建议使用”更多.”的链接,或者考虑使用左侧导航条7. 与标签一起使用来显示高层级的内容8. 跟左侧导航条一起使用来显示二级或三级内容关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最常见的错误是将一系列没意义的内容归在一类.1. 尽可能降低分类之间的交集2. 让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)3. 避免过于宽泛或者过于特殊的分类名

6、字.为什么使用这个组件?顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容左侧导航条(Left Navigation Bar)_Yahoo_Pattern原文地址:用户为了完成任务需要找到必须的内容和功能.左侧导航条在垂直的紧凑的空间内提供给用户快速访问已分类内容的入口.解决什么问题?用户为了完成任务需要找到必要的内容和功能.什么时候用?· 分类至少有4个· 分类可能会超过10个· 分类的标题可能会很长或者是系统生成· 页面宽度没问题· 推荐二级导航内容;比如,当在信息架构层面,所展示的分类是这个页面标题的子元素

7、时· 当展开/隐藏是有必要的· 为了让二级或三级导航条有更好的可见性,可以用来替代标签或顶部导航条· 分类是属于一个单独的产品具体解决办法是什么?1. 在页面标题下方以一列的方式显示一系列链接,并且左对齐.2. 对于更高级别的导航可以结合标签组和/或顶部导航条3. 左侧导航条给于当前位置特殊的视觉标识.通过对颜色,字体或者其他方式来表示”选中状态”.4. 左侧导航条内的所有页面本身也该显示在导航条内,同时必须正确的标识当前位置5. 左侧导航条中文字标签周围的元素都应该是可点的,而不只是文字本身6. 一个左侧导航条最多有两层导航7. 当需要展示两层导航并且有很多的一

8、级分类和二级分类时,应考虑使用可折叠的左侧导航条(或者手风琴导航)可点父导航  VS  静态父导航(Semantic Parents)可点父导航(左图)  VS  静态父导航(右图)(译者注:忘了过去某个项目中跟同事还争了好久,现在看各有各的好处和用法,只要满足基本原则即可)当把左侧导航条中的链接进行分类后,分类的名字可以是静态的(语义的)或者是动态的(可点的).静态父导航只是定义了下面的子分类.可点父导航不仅仅是定义了子分类,他们还链接到一个特殊的目标页.· 永远不要在相同左侧导航中将可点父导航和静态父导航混合使用.关注内容的划分范

9、围(符合用户的心智模型)比关注页面的展示更重要.因为最常见的错误是将一系列没意义的内容归在一类.1. 尽可能降低分类之间的交集2. 让分类之间的界限尽可能的清晰(例如,很容易猜到想要的东西是否在一个分类中)3. 避免过于宽泛或者过于特殊的分类名字.为什么使用这个组件?顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容可访问性当使用”弹出式”或”滑动式”菜单时,粗心的做法会导致有鼠标的用户可以访问下级菜单(通过鼠标划过)或者点击链接,但是键盘用户只能做到后者.解决办法是让用户可以通过Enter或Return键来触发(通常会用在静态父导航中).开放式问题?·

10、; 对于长文字我们该如何解决?在左侧导航中我们是否应该避免文字换行?· 为什么至少需要4个分类?对于只有3个或者更少的分类时对那些设计师有什么建议吗?· 如果页面宽度成问题,是否有其他的可选建议?进度条(Progress Bar)_Yahoo_Pattern这篇放到草稿里好久了 最近在忙着来杭州,杭州之后的安顿,今天终于可以完成了原文地址:进度条(或进度表)可以帮助用户对过程的长度和步骤有个预期,并且知道自己当前在哪个步骤.也被称作”进度指示器(Progress Indicator)”,”多步骤进度条(Multi-step Progress Bar)”,”向导(Wizard

11、 Steps)”,”进度表(Progress Train)”,”剩余步骤(Steps Left)”解决什么问题?用户需要意识到他们正在进行一个多页面(multi-screen)的流程(比如付款或注册)什么时候用?在向导中应该使用;在那些预先设计好的,用户可能只需完成一次或顶多在个别情况下需要完成的多步骤流程中需要使用.在常规的任务中就不要用了,因为那种笨重的,一步一步的手把手式(handholding)的方式最终会变得讨人厌具体解决办法是什么?由一个持续的,显示一系列步骤 ,高亮当前的步骤,并可以显示目前的完成度或百分比的导航条,来作为进度条(或进度表).· 当用户决定开始流程时进度

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

13、导航条为什么使用这个组件?进度条可以让用户预估整个流程的长度,对于全部流程有个预览,并时刻告诉他们在整个流程中已经完成多少了.答疑“进度条”也可以用来表示”动态显示系统更新进度的动画条”(就像YUI2中的进度条组件)这个组件可以解决相关联的多步栏或者作为逐步显示用户控制过程的指示器(译者注: 这句我真翻译不好,欢迎高手来指教This pattern deals with an articulated, multi-step bar or indicator showing stepwise user-controlled progress.)导航标签(navigation Tabs)_Yaho

14、o_Pattern原文地址: 当网站的分类不会经常改变时,在网站的LOGO和页头下方,水平放置一组固定的单行标签,是一种提供高层级的导航的方法.标签导航应该与整个页面宽度一致,分类的标题应该是可预知并且尽可能短,同时通过高亮当前选中的标签来保持”文件夹的隐喻”.(标签的设计是来源于现实中一组文件夹的隐喻,更多信息可以参考”模块标签“中的介绍)解决什么问题?用户需要通过一个全站导航来定位内容和功能,同时需要清晰的示意用户的当前位置什么时候用?· 有3-10个分类标题时· 分类标题要相对较短同时(标题内的内容)可预知· 分类的数量不会经常变化· 页

15、面的整体宽度取决于内容.另一个可选方案是左侧导航条· 所有分类属于一个网站· 你需要展示网站的顶级导航· 你需要示意在一组可选项中用户的当前选择· (当用户点击时)你需要改变整个页面而不只是页面内容中的某一个小节· 你需要一种控制顶级导航的方式具体解决办法是什么?· 在网站的LOGO和页头下方水平放置一组标签栏· 如果第一个标签是”首页”,那么应该指向网站的首页· 整个标签区域都可点-而不仅仅是其中的文字· 标签中的每一个页面都应该保证有标签导航条· 当分类列表太长时,建议使用”更多”链接,或者

16、考虑使用左侧导航条保持隐喻· 被选中的标签应该突起在其他所有标签之前.没有选中的标签在视觉上应该位于后面,以此来加固用户的概念:是通过选中标签到达这个页面· 被选中标签及所到达的页面应该有视觉上的联系,可以通过设计暗示,:比如颜色,边框,括号等等.选择另一个标签后应该重绘整个页面,同时展示与新标签有关的新的信息.· 永远不要用多行的标签,因为这样会导致选中的与未选中标签之间的困惑· 当用户从一个标签跳转到另一个标签时,整个标签栏应该出现在相同的位置为什么使用这个组件?· 标签可以保证情境.在大量信息中,它们具有视觉化表现用户的当前位置的作用&#

17、183; 标签是基于现实生活的隐喻.”一组文件夹中的最前面的”隐喻让选中状态更容易理解· 标签提供了导航.它们具有导航网站的作用可访问性· 允许用户通过Tab键通过合理的顺序来在定位标签· 已定位的标签可以通过回车键来访问· 通过以下替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)· 在已激活的链接上加入值为”active”的title属性· 给链接加上不可见的ALT属性,值为”active(激活)”· 给表示已选中的Yahoo!图片加入值为”active”的ALT属性搜索翻页(Search Pagination)

18、_Yahoo_Pattern原文地址: 当搜索返回的结果太多,无法显示在一页上时,将信息拆分进一系列的页中.用单行链接的方式来实现翻页控制,可以让用户浏览更多的结果,而不是将结果都显示在一页中.解决什么问题?用户需要查看按相关度排序但是又无法简单的放在一页当中的搜索结果什么时候用?· 显示搜索结果· 搜索结果太多,无法合适的放到一页中具体解决办法是什么?· 将信息按相关度排序,并拆分到一系列的页中· 为访问不同分页提供翻页控制翻页控制· 显示单行的链接作为导航控制· 按照以下顺序显示链接”上一页”,单页链接,”下一页”

19、83; 在”上一页”之后显示一个左箭头图标· 在”下一页”之前显示一个右箭头图标· 让箭头图标也是可点的· 单页链接应该包含一组最多10页的链接.如果结果页少了,那么仅显示可用页面的单页链接· 当所选页在1-6页之间时,单页链接应该总是从”1页开始· 在所选页在6页之后时(7页和之后的),单页链接应该从当前页减5后的页数开始.比如,当前页是7时,第一页应该是2(7-5=2),最后一页应该是11(仍然需要显示10页)· 当前页是第一页时,不要显示”上一页”和箭头图标· 当前页是最后一页时,不要显示”下一页”和箭头图标·

20、; 单页链接中,当前页应该无链接· 需要标注”结果页”为什么使用这个组件?· 箭头图标可以帮助区分链接,同时增大可点区域· 因为以下的原因,显示”不可用链接”(Disabled controls)基本没有价值· 这些链接基本出现在第一屏之外(blow the fold)· 搜索结果的第一页占据了流量中的绝大部分.显示一个不可用的”上一页”基本没有任何价值· 尽管”第一页”有价值,但是在”随机存储”的链接中显示较难.(个人认为是技术上很难实现.原文:it competes with the functionality presented

21、 in the random-access links)· “最后一页”也基本没有价值,因为搜索结果是按照相关性排序的.同时也是因为搜索结果的总数(因此,最后一页)可能无法知道可访问性· 支持用Tab键来定位每一个链接· 支持用回车访问已定位的链接项目翻页(Item Pagination)_Yahoo_Pattern原文地址: 当数据太多(或者数据项列表太长)一页显示不下时,将数据项列表拆分进一系列的页中.提供”上一页”和”下一页”的链接让人们可以访问被分页的数据,最好同时也提供”第一页”和”最后一页”的链接.解决什么问题?用户需要从一大组分好类的,但是

22、无法简单的显示在一页的数据中查看一些数据项什么时候用?· 信息多到无法合适的放到一页中· 通常感兴趣的内容可以在前几页就能看到· 需要深度研究的信息,应该考虑放到一个可以滚动的区域内显示具体解决办法是什么?· 将数据项列表拆分进一系列的页中· 提供”上一页”和”下一页”的链接来访问信息· 同时提供跳转到”第一页”和”最后一页”的链接· 同时提供用户正在访问的信息类型(type of object)· 显示用户当前正访问的一组内容的信息.使用表单”$ObjectNames DisplayedItemRange of

23、TotalItems“(内容名称 当前显示的内容范围/全部内容 )· 按照以下顺序显示链接: 第一页, 上一页, 下一页, 最后一页· 使用箭头图标来增加链接的可点区域· 当链接不可用时需要表现出不可用状态为什么使用这个组件?· 箭头图标可以帮助区分链接,同时增大可点区域· 跟搜索结果翻页不一样,在翻页时,控制链接是一直可见的(即使不可用).这样可以防止当翻页时,不可用链接忽然被隐藏,干扰到用户可访问性· 正在访问的页面不要加上链接.比如,如果正在访问第3页,那么数字3应该没有链接模块标签(Module Tabs)_Yahoo_Pat

24、tern如果页面中可用的空间很有限同时不希望页面刷新,则可以直接在内容上方放一行标签形式的链接,通过这种方式访问内容.当前激活的面板需要有视觉标识,并且分类标题应该短,同时要小于10个.如果在使用情境中,内容不需要彼此之间同时查看,则可以使用模块标签(Module tabs).标签是现实生活中文件夹的隐喻.解决什么问题?用户需要在页面不刷新的情况下浏览一个或者更多叠放的内容面板什么时候用?· 有多个内容面板,但是空间只够一次展示一个· 在使用情景中,不同面板中的内容不需要同时查看· 你需要一种不用跳转到另外一个页面就可以在内容之间切换的方法.如果要在一个网站中导航

25、到不同的页面,则应该使用导航标签.· 有2-10个分类标题· 分类标题要相对较短并且(标题内的内容)可预知· 确认默认显示哪个面板是很重要的具体解决办法是什么?· 直接在叠放的内容面板上方放一行链接,用户可以控制· 对于一块内容,永远不要出现多行标签.(译者注: 记得windows里面的选项卡吗.)· 使用管道浮”|”或相似的图片来分隔每一个链接· 至少选中一个标签并且展示下面的内容· 通过高亮背景及留白来表明选中的标签.Yahoo在选中的标签的底部增加了一个”暗示”(译者注: 猜测是指的”标签的高亮背景色与内容面

26、板的背景色一致”)· 内容应该跟它关联的标签有视觉联系和视觉界限(通常被”框”起来)· 一次只有一个内容区域可见保持隐喻· 因为用户会从一个标签点到另外一个,所以标签应该出现在相同的位置· 选择新标签时尽量不要刷新整个页面· 选择标签不回影响到页面上的其他地方· 选择标签不会跳转到一个不同的页面或者执行了一项操作(超出了”切换可见内容”的范围)为什么使用这个组件?· 标签保证了情境.在大量信息中,它视觉化表现了用户的当前位置· 标签是基于现实生活的隐喻.”一组文件夹中的最前面的”隐喻让选中状态更容易理解·

27、 标签提供了导航.它给交替浏览内容提供了导航方法可访问性· 允许用户通过Tab键通过合理的顺序来在定位标签· 已定位的标签可以通过回车键来访问· 通过以下替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)· 在已激活的链接上加入值为”active”的title属性· 给链接加上不可见的ALT属性,值为”active(激活)”· 给表示已选中的Yahoo!图片加入值为”active”的ALT属性手风琴导航(Accordion)手风琴导航(或手风琴菜单)是用可折叠面板来展示一类组织后的信息方式,在一定的空间内,它提供了一种大量链接

28、或其他可选内容的访问方式.每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮)来显示某一个子选项.解决什么问题?当在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理解(消化,in digestible chunks)同时可以不用滚动页面,因为滚动页面会让用户从上下文情景中脱离,或者会让他们从页面中喜欢的位置离开.什么时候用?当选项的数量比较多,页面空间有限,并且可以对选项列表有逻辑的进行归类,分成更小的,内容数量基本一致的内容块.译者注: 此处要注意,选项列表不是内容的标题栏(如截图中是4栏),而是里面的内容元素,比如新闻标题,作者,日期,图片,该要,文字链等.具体解决办法是什么?对于选项采用两级分类· 顶级分类是显示类别或者分组· 二级分类是放到每个组里的选项列表手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不一样),同时使用一级分类的内容作