Axure组件库.pdf

《Axure组件库.pdf》由会员分享，可在线阅读，更多相关《Axure组件库.pdf（28页珍藏版）》请在三一文库上搜索。

1、Axure 原型设计之 yahoo组件库 By 佳和讯拓软件设计组 2011年 4 月 16 日 顶部导航条 (Top Navigation Bar)_Yahoo_Pattern . 2 解决什么问题 ? . 2 什么时候用 ? . 2 具体解决办法是什么? . 3 为什么使用这个组件? . 4 左侧导航条 (Left Navigation Bar)_Yahoo_Pattern 5 解决什么问题 ? . 5 什么时候用 ? . 5 具体解决办法是什么? . 6 为什么使用这个组件? . 8 可访问性 . 8 开放式问题 ? . 8 进度条 (Progress Bar)_Yahoo_Patter

2、n 9 解决什么问题 ? . 9 什么时候用 ? . 9 具体解决办法是什么? . 10 为什么使用这个组件? . 11 答疑 . 11 导航标签 (navigation Tabs)_Yahoo_Pattern . 12 解决什么问题 ? . 12 什么时候用 ? . 12 具体解决办法是什么? . 13 为什么使用这个组件? . 13 可访问性 . 14 搜索翻页 (Search Pagination)_Yahoo_Pattern 15 解决什么问题 ? . 15 什么时候用 ? . 15 具体解决办法是什么? . 15 为什么使用这个组件? . 17 可访问性 . 18 项目翻页 (Ite

3、m Pagination)_Yahoo_Pattern . 19 解决什么问题 ? . 19 什么时候用 ? . 19 具体解决办法是什么? . 19 为什么使用这个组件? . 20 可访问性 . 20 模块标签 (Module Tabs)_Yahoo_Pattern 21 解决什么问题 ? . 21 什么时候用 ? . 21 具体解决办法是什么? . 22 为什么使用这个组件? . 22 可访问性 . 23 手风琴导航 (Accordion) . 24 解决什么问题 ? . 24 什么时候用 ? . 25 具体解决办法是什么? . 25 为什么使用这个组件? . 26 特殊情况 . 27 可

4、访问性 . 27 顶部导航条 (Top Navigation Bar)_Yahoo_Pattern 这个可能是最简单也最常用的组件了,所以内容也不多. 原文地址 : http:/ 用户为了完成任务需要找到必须的内容和功能.顶部导航条在水平的紧凑的 空间内提供给用户已分类内容的访问入口. 解决什么问题 ? 用户为了完成任务需要找到必要的内容和功能. 什么时候用 ? 2-12 个分类 分类的标题相对较短并且可预测 分类数量基本不会变 为一个 web 产品展示顶级导航时 配合标签来展示二级导航 如果页面宽度很重要,用它来替代 左侧导航条 通过控制导航条的状态来跟踪和展示用户当前位置很困难,成本很 大

5、时 ,用它来替代标签. 分类都属于一个产品时 具体解决办法是什么 ? 1.在一个水平的横条上显示一系列单行的链接,如果有网站头部 ,则放 到头部之下 . 2.可以通过与 ” 标签 ” 一起使用 ,在导航条中同时显示一级和二级导航 3.如果只使用顶部导航条,最好第一个链接是” 首页 (Home) ”.应该指向 网站的首页 但是如果顶部导航条是用在一组标签下,那么标签的第一个 应该是 ” 首页 ” 并且具有同样的功能 4.在导航条中用留白和” 管道符 ” “| ”(或者是垂直居中的” 点”,或者是简 单的视觉元素 )来分隔每一个分类 5.顶部导航条中链接的所有页面本身也一定要显示在顶部导航条 6.

6、当顶部导航条数量过多时,建议使用 ” 更多 ” 的链接 ,或者考虑使用 左 侧导航条 7.与标签一起使用来显示高层级的内容 8.跟左侧导航条 一起使用来显示二级或三级内容 关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最 常见的错误是将一系列没意义的内容归在一类. 1.尽可能降低分类之间的交集 2.让分类之间的界限尽可能的清晰(例如 ,很容易猜到想要的东西是否 在一个分类中 ) 3.避免过于宽泛或者过于特殊的分类名字. 为什么使用这个组件 ? 顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多 的有组织的内容 左侧导航条 (Left Navigation

7、 Bar)_Yahoo_Pattern 原文地址 :http:/ 用户为了完成任务需要找到必须的内容和功能.左侧导航条在垂直的紧凑的 空间内提供给用户快速访问已分类内容的入口. 解决什么问题 ? 用户为了完成任务需要找到必要的内容和功能. 什么时候用 ? 分类至少有4 个 分类可能会超过10 个 分类的标题可能会很长或者是系统生成 页面宽度没问题 推荐二级导航内容;比如,当在信息架构层面,所展示的分类是这个页 面标题的子元素时 当展开 /隐藏是有必要的 为了让二级或三级导航条有更好的可见性,可以用来替代标签或顶 部导航条 分类是属于一个单独的产品 具体解决办法是什么 ? 1.在页面标题下方以一

8、列的方式显示一系列链接,并且左对齐 . 2.对于更高级别的导航可以结合标签组和/或顶部导航条 3.左侧导航条给于当前位置特殊的视觉标识.通过对颜色 ,字体或者其 他方式来表示 ” 选中状态 ”. 4.左侧导航条内的所有页面本身也该显示在导航条内,同时必须正确 的标识当前位置 5.左侧导航条中文字标签周围的元素都应该是可点的,而不只是文字 本身 6.一个左侧导航条最多有两层导航 7.当需要展示两层导航并且有很多的一级分类和二级分类时,应考虑 使用可折叠的左侧导航条(或者 手风琴导航 ) 可点父导航 VS 静态父导航 (Semantic Parents) 可点父导航 (左图 ) VS 静态父导航

9、(右图 ) (译者注 :忘了过去某个项目中跟同事还争了好久,现在看各有各的好处和用法, 只要满足基本原则即可) 当把左侧导航条中的链接进行分类后,分类的名字可以是静态的(语义的 )或者 是动态的 (可点的 ).静态父导航只是定义了下面的子分类.可点父导航不仅仅是 定义了子分类 ,他们还链接到一个特殊的目标页. 永远不要在相同左侧导航中将可点父导航和静态父导航混合使用. 关注内容的划分范围(符合用户的心智模型)比关注页面的展示更重要.因为最 常见的错误是将一系列没意义的内容归在一类. 1.尽可能降低分类之间的交集 2.让分类之间的界限尽可能的清晰(例如 ,很容易猜到想要的东西是否 在一个分类中

10、) 3.避免过于宽泛或者过于特殊的分类名字. 为什么使用这个组件 ? 顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多 的有组织的内容 可访问性 当使用 ” 弹出式 ” 或” 滑动式 ” 菜单时 ,粗心的做法会导致有鼠标的用户可以访问 下级菜单 (通过鼠标划过 )或者点击链接 ,但是键盘用户只能做到后者.解决办法 是让用户可以通过Enter 或 Return 键来触发 (通常会用在静态父导航中). 开放式问题 ? 对于长文字我们该如何解决?在左侧导航中我们是否应该避免文字 换行 ? 为什么至少需要4 个分类 ?对于只有 3 个或者更少的分类时对那些 设计师有什么建议吗? 如

11、果页面宽度成问题,是否有其他的可选建议? 进度条 (Progress Bar)_Yahoo_Pattern 这篇放到草稿里好久了 最近在忙着来杭州,杭州之后的安顿,今天终于可以 完成了 原文地址 :http:/ 进度条 (或进度表 )可以帮助用户对过程的长度和步骤有个预期,并且知道自己 当前在哪个步骤.也被称作 ” 进度指示器 (Progress Indicator)”, ”多步骤进度条 (Multi- step Progress Bar)”, ”向导 (Wizard Steps)”, ”进度表 (Progress Train)”, ”剩余 步骤 (Steps Left)” 解决什么问题 ?

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

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

14、 ).如果有必要 ,需要为不同的用例设计不同的进度条. 要确保进度条的视觉设计不会被误认为是可点击的导航条 为什么使用这个组件 ? 进度条可以让用户预估整个流程的长度,对于全部流程有个预览,并时刻告诉 他们在整个流程中已经完成多少了. 答疑 “ 进度条 ” 也可以用来表示” 动态显示系统更新进度的动画条”(就像 YUI2 中的 进度条 组件 ) 这个组件可以解决相关联的多步栏或者作为逐步显示用户控制过程的指示器 (译者注 : 这句我真翻译不好,欢迎高手来指教This pattern deals with an articulated, multi-step bar or indicator s

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

16、时需要清晰的示意用户的 当前位置 什么时候用 ? 有 3-10 个分类标题时 分类标题要相对较短同时(标题内的内容 )可预知 分类的数量不会经常变化 页面的整体宽度取决于内容.另一个可选方案是左侧导航条 所有分类属于一个网站 你需要展示网站的顶级导航 你需要示意在一组可选项中用户的当前选择 (当用户点击时 )你需要改变整个页面而不只是页面内容中的某一个 小节 你需要一种控制顶级导航的方式 具体解决办法是什么 ? 在网站的 LOGO 和页头下方水平放置一组标签栏 如果第一个标签是” 首页”,那么应该指向网站的首页 整个标签区域都可点-而不仅仅是其中的文字 标签中的每一个页面都应该保证有标签导航条

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

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

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

20、右箭头图标 让箭头图标也是可点的 单页链接应该包含一组最多10 页的链接 .如果结果页少了,那么仅显 示可用页面的单页链接 当所选页在1-6 页之间时 ,单页链接应该总是从”1页开始 在所选页在6 页之后时 (7 页和之后的 ),单页链接应该从当前页减5 后的页数开始 .比如 ,当前页是 7 时,第一页应该是2(7-5=2),最后一页应该是 11(仍然需要显示10 页) 当前页是第一页时,不要显示 ” 上一页 ” 和箭头图标 当前页是最后一页时,不要显示 ” 下一页 ” 和箭头图标 单页链接中 ,当前页应该无链接 需要标注 ” 结果页 ” 为什么使用这个组件 ? 箭头图标可以帮助区分链接,同时

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

22、因为搜索结果的总数(因此 ,最后一页 )可能无法知道 可访问性 支持用 Tab 键来定位每一个链接 支持用回车访问已定位的链接 项目翻页 (Item Pagination)_Yahoo_Pattern 原文地址 : http:/ 当数据太多 (或者数据项列表太长)一页显示不下时,将数据项列表拆分进一系 列的页中 . 提供 ” 上一页 ” 和” 下一页 ” 的链接让人们可以访问被分页的数据,最好同时也提 供” 第一页 ” 和” 最后一页 ” 的链接 . 解决什么问题 ? 用户需要从一大组分好类的,但是无法简单的显示在一页的数据中查看一些 数据项 什么时候用 ? 信息多到无法合适的放到一页中 通常

23、感兴趣的内容可以在前几页就能看到 需要深度研究的信息,应该考虑放到一个可以滚动的区域内显示 具体解决办法是什么 ? 将数据项列表拆分进一系列的页中 提供 ” 上一页 ” 和” 下一页 ” 的链接来访问信息 同时提供跳转到” 第一页 ” 和” 最后一页 ” 的链接 同时提供用户正在访问的信息类型(type of object) 显示用户当前正访问的一组内容的信息.使用表单 ”$ObjectNames DisplayedItemRange of TotalItems“(内容名称 当前显示的内容范 围/ 全部内容 ) 按照以下顺序显示链接: 第一页 , 上一页 , 下一页 , 最后一页 使用箭头图标

24、来增加链接的可点区域 当链接不可用时需要表现出不可用状态 为什么使用这个组件 ? 箭头图标可以帮助区分链接,同时增大可点区域 跟搜索结果翻页不一样,在翻页时 ,控制链接是一直可见的(即使不可 用).这样可以防止当翻页时,不可用链接忽然被隐藏,干扰到用户 可访问性 正在访问的页面不要加上链接.比如 ,如果正在访问第3 页,那么数字 3 应该没有链接 模块标签 (Module Tabs)_Yahoo_Pattern 如果页面中可用的空间很有限同时不希望页面刷新,则可以直接在内容上方 放一行标签形式的链接,通过这种方式访问内容. 当前激活的面板需要有视觉标识,并且分类标题应该短,同时要小于10 个.

25、如果 在使用情境中 ,内容不需要彼此之间同时查看,则可以使用模块标签(Module tabs).标签是现实生活中文件夹的隐喻. 解决什么问题 ? 用户需要在页面不刷新的情况下浏览一个或者更多叠放的内容面板 什么时候用 ? 有多个内容面板,但是空间只够一次展示一个 在使用情景中 ,不同面板中的内容不需要同时查看 你需要一种不用跳转到另外一个页面就可以在内容之间切换的方 法.如果要在一个网站中导航到不同的页面,则应该使用 导航标签 . 有 2-10 个分类标题 分类标题要相对较短并且(标题内的内容 )可预知 确认默认显示哪个面板是很重要的 具体解决办法是什么 ? 直接在叠放的内容面板上方放一行链接

26、,用户可以控制 对于一块内容 ,永远不要出现多行标签.(译者注 : 记得 windows 里面 的选项卡吗 .) 使用管道浮 ”| ”或相似的图片来分隔每一个链接 至少选中一个标签并且展示下面的内容 通过高亮背景及留白来表明选中的标签.Yahoo 在选中的标签的底 部增加了一个 ” 暗示 ”(译者注 : 猜测是指的 ” 标签的高亮背景色与内容面板 的背景色一致 ”) 内容应该跟它关联的标签有视觉联系和视觉界限(通常被 ” 框” 起来 ) 一次只有一个内容区域可见 保持隐喻 因为用户会从一个标签点到另外一个,所以标签应该出现在相同的 位置 选择新标签时尽量不要刷新整个页面 选择标签不回影响到页面

27、上的其他地方 选择标签不会跳转到一个不同的页面或者执行了一项操作(超出了 ” 切换可见内容 ” 的范围 ) 为什么使用这个组件 ? 标签保证了情境.在大量信息中 ,它视觉化表现了用户的当前位置 标签是基于现实生活的隐喻. ” 一组文件夹中的最前面的” 隐喻让选 中状态更容易理解 标签提供了导航.它给交替浏览内容提供了导航方法 可访问性 允许用户通过Tab键通过合理的顺序来在定位标签 已定位的标签可以通过回车键来访问 通过以下替代手段中的一种来标识选中的标签(和面板 )(除了视觉 标识 ) 在已激活的链接上加入值为”active”的 title 属性 给链接加上不可见的ALT 属性,值为”act

28、ive( 激活 ) ” 给表示已选中的Yahoo!图片加入值为 ”active”的 ALT 属性 手风琴导航 (Accordion) 手风琴导航 (或手风琴菜单 )是用可折叠面板来展示一类组织后的信息方式,在 一定的空间内 ,它提供了一种大量链接或其他可选内容的访问方式. 每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠 标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮 )来显示某一个子 选项 . 解决什么问题 ? 当在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的 话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理 解(消化 ,i

29、n digestible chunks) 同时可以不用滚动页面,因为滚动页面会让用户从 上下文情景中脱离,或者会让他们从页面中喜欢的位置离开. 什么时候用 ? 当选项的数量比较多,页面空间有限 ,并且可以对选项列表有逻辑的进行归类, 分成更小的 ,内容数量基本一致的内容块. 译者注 : 此处要注意 ,选项列表不是内容的标题栏(如截图中是4 栏),而是里面 的内容元素 ,比如新闻标题 ,作者 ,日期 ,图片 ,该要 ,文字链等 . 具体解决办法是什么 ? 对于选项采用两级分类 顶级分类是显示类别或者分组 二级分类是放到每个组里的选项列表 手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不

30、一样),同时 使用一级分类的内容作为标签(label).分类标签一般是与面板宽度一样可点击 的标题栏 ,或者是一类展开/收缩的图标 . 手风琴导航默认可以有一个面板是展开的. 建议 将最重要内容的面板默认展开,一来可以显示重要的选项,二来可以 起到一个示范作用,收缩列表的每一项都独立可以展开 将当前展开的面板高亮,这样用户可以识别面板展开和收缩时不一 样的标题栏 要避免将一个手风琴导航嵌入到另一个手风琴导航中.如果你发现 需要这样做 ,树状菜单或者其他的适合显示多级结构的元素可能更合适. 译者注 : 最近的版本中有一个组件就是手风琴导航,而当时并没有意识到,只 是几个面板可以收缩和展开,并且至

31、少会有一个面板展开.当时设计的标题栏 上的 icon 是个上 /下箭头来表示展开/收缩状态 ,但是后来发现逻辑无论如何调 整都会存在歧义,后来发现这个组件,义无反顾的将icon 换成加号 /减号 ,结果没 有任何问题了 . 可选项 手风琴导航可以配置成始终有一个面板是展开的,或者是其他更灵 活的 (所有的面板都可以关闭,多个面板可以同时打开).一些设计师认为最 好的方式是只允许一个面板打开,但是其他人都不认可. 手风琴导航可以配置成只有一次只有一个面板会打开,但是很多例 子都允许同时打开多个. 除非是有表单元素或者其他的不可变的设计元素要求手风琴导航 总体上要保持一致的尺寸,否则手风琴导航元素

32、应该可以根据展开面板的 不同内容来改变尺寸 通常 ,手风琴导航是通过单击来展开面板的,但是如果用户的使用情 景是 ” 开心的 /有趣的 /试试这个 ”,那么鼠标经过来展开面板也是可以接受 的. 为什么使用这个组件 ? 使用这个组件最主要的原因就是在有限的空间内展示大量的选项. 特殊情况 大部分手风琴导航都是垂直放置的,不过也可以水平使用. 可访问性 对于键盘用户来说,就像树状菜单和标签一样,手风琴导航通常会打断使用.可 以给手风琴导航标签之间的标志和切换面板的+/-号图标加上键盘导航. 当 javascript 被禁用时 ,手风琴导航需要做兼容,可以考虑把所有面板都展开. 如果什么都不显示的话对于屏幕阅读器来说可能会导致内容丢失.可以考虑 将高度设置成0 来解决 . 8.23 更新 : 根据 啸月天狼 指出的错误上/下箭头改为 +/-号