猪窝_产品设计

product design for me; 2010年: 细节/数据挖掘

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

原文地址: 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键来定位每一个链接
  • 支持用回车访问已定位的链接

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

Posted by: 猪小凡 on 2010年08月15日 @ 11:35 下午
类归于： 方法论

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

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

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

为什么使用这个组件?

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

可访问性

  • 正在访问的页面不要加上链接.比如,如果正在访问第3页,那么数字3应该没有链接
Posted by: 猪小凡 on 2010年08月13日 @ 9:36 下午
类归于： 方法论

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

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

保持隐喻

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

为什么使用这个组件?

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

可访问性

  • 允许用户通过Tab键通过合理的顺序来在定位标签
  • 已定位的标签可以通过回车键来访问
  • 通过以下替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)
    • 在已激活的链接上加入值为”active”的title属性
    • 给链接加上不可见的ALT属性,值为”active(激活)”
    • 给表示已选中的Yahoo!图片加入值为”active”的ALT属性
Posted by: 猪小凡 on 2010年08月11日 @ 12:16 上午
类归于： 方法论

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

8.11: 更新了某些翻译不准确的内容

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

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

保持隐喻

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

为什么使用这个组件?

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

可访问性

  • 允许用户通过Tab键通过合理的顺序来在定位标签
  • 已定位的标签可以通过回车键来访问
  • 通过以下替代手段中的一种来标识选中的标签(和面板)(除了视觉标识)
    • 在已激活的链接上加入值为”active”的title属性
    • 给链接加上不可见的ALT属性,值为”active(激活)”
    • 给表示已选中的Yahoo!图片加入值为”active”的ALT属性
Posted by: 猪小凡 on 2010年08月7日 @ 9:37 下午
类归于： 方法论

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

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

原文地址: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.)

Posted by: 猪小凡 on 2010年08月2日 @ 11:05 下午
类归于： 方法论
早前文章 »