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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

翻页控制

• 显示单行的链接作为导航控制
• 按照以下顺序显示链接”上一页”,单页链接,”下一页”
• 在”上一页”之后显示一个左箭头图标
• 在”下一页”之前显示一个右箭头图标
• 让箭头图标也是可点的
• 单页链接应该包含一组最多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键来定位每一个链接
• 支持用回车访问已定位的链接

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

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

为什么使用这个组件?

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

可访问性

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

保持隐喻

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

为什么使用这个组件?

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

可访问性

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

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

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

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

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

保持隐喻

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

为什么使用这个组件?

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

可访问性

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

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

用户为了完成任务需要找到必须的内容和功能.左侧导航条在垂直的紧凑的空间内提供给用户快速访问已分类内容的入口.

解决什么问题?

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

什么时候用?

• 分类至少有4个
• 分类可能会超过10个
• 分类的标题可能会很长或者是系统生成
• 页面宽度没问题
• 推荐二级导航内容;比如,当在信息架构层面,所展示的分类是这个页面标题的子元素时
• 当展开/隐藏是有必要的
• 为了让二级或三级导航条有更好的可见性,可以用来替代标签或顶部导航条
• 分类是属于一个单独的产品

具体解决办法是什么?

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

可点父导航  VS  静态父导航(Semantic Parents)

可点父导航(左图)  VS  静态父导航(右图)

(译者注:忘了过去某个项目中跟同事还争了好久,现在看各有各的好处和用法,只要满足基本原则即可)

当把左侧导航条中的链接进行分类后,分类的名字可以是静态的(语义的)或者是动态的(可点的).静态父导航只是定义了下面的子分类.可点父导航不仅仅是定义了子分类,他们还链接到一个特殊的目标页.

• 永远不要在相同左侧导航中将可点父导航和静态父导航混合使用.

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

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

为什么使用这个组件?

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

可访问性

当使用”弹出式”或”滑动式”菜单时,粗心的做法会导致有鼠标的用户可以访问下级菜单(通过鼠标划过)或者点击链接,但是键盘用户只能做到后者.解决办法是让用户可以通过Enter或Return键来触发(通常会用在静态父导航中).

开放式问题?

• 对于长文字我们该如何解决?在左侧导航中我们是否应该避免文字换行?
• 为什么至少需要4个分类?对于只有3个或者更少的分类时对那些设计师有什么建议吗?
• 如果页面宽度成问题,是否有其他的可选建议?

PS:文章很长,要有心里准备…

原文地址: http://www.webdesignerdepot.com/2009/12/how-to-get-a-professional-look-with-color/

是什么能让一个设计看上去是协调的,有条理的,专业的?答案是”色彩”.

不是所有的项目都要用那种浅的”公司蓝”(corporate blue)才会看上去很专业.色彩规划(planning color)就是建立一个描述有哪些色彩可以用以及如何使用的框架.

色彩是最难办的设计元素.“好”的色彩是像个人口味和感觉一样难以把握的,而且还有诸如对比度,显示器校准等技术上的限制因素.

但是对于内容来说,色彩是至关重要的.如果你认为一个网站很重要,值得花时间来完善,那么用户通常也会认为它很重要,会花时间来读.选择好的色彩就是为了达到这种效果.

在本文中,我们会回顾一些用来给你的Web设计建立漂亮的调色板的技术.

如果想让网站看上去是没有条理(unplanned)的,最好的办法就是随机选择颜色.

即使当用户第一次浏览网站的首页时,色彩也会影响到他们对于内容的态度.这个网站会让人兴奋吗? 可信吗?大胆吗(daring)?乏味吗?有政治倾向?很正式的吗?

跟印刷制品一样,色彩会影响人们对所见到的信息的理解.

找到合适的色彩并不容易,但是整体过程还是有迹可循的.

好的设计策略会包含一个配色方案(比如为了传达信息和营造氛围,色彩的可选范围.)以及这个方案的具体安排.

让我们假设你需要设计一个专业的网站.(当然这个很有可能演变成一种喝酒游戏(drinking game):要吗是客户要求网站是”专业的”,”简洁的”或者”现代的”,要吗就是”我喜欢这个网站,扒下来.”)

配色方案取决于网站的特点.比如,银行和花店的网站看上去都会很专业.

但是人们可能不会喜欢在一个”公司蓝”或银灰色的网站买花.或者想象一下美国银行的网站变成紫色和黄绿色.

一个”专业”的设计会让用户觉得,这个网站是很严肃正规的展示它的主题,即便主题可能是很轻松的.无论哪种色相(hue)还是色值(value),“专业”都意味着是协调的,有条理的,经过深思熟虑的.

使用灰度

与色彩工作的最好方式就是从没有色彩开始.

将设计中的色彩移除之后可以暴露出问题的根本原因,而这些问题在开始考虑哪种黄绿色的色度(深浅)更好看之前就该去解决.如果设计在黑白效果下就感觉不好,那就需要做一些改变了.

每个页面是否都有清晰的目标?设计是否能引导读者读完全部的内容?内容是引人入胜的,鼓舞人心的还是客观的传递信息?标题清晰吗?文字链是否与其他文字有对比?色彩可以加强这些效果,但是布局,样式和组织中的问题都无法单纯的通过色彩就能够解决.

如果要重新设计,请先去掉颜色.这个简单的去色行为真实的展示出网站的立足点.(事实上,重新设计应该开始于重新评估你的目标和内容,不过这是另外一个故事了.)

有时,去掉色彩本身就是一种解决方案.

我曾经跟一个网站设计公司一起工作,重新设计他们的网站.对于这个项目,他们是很挑剔的,希望能更好.但是如果你认为为你自己设计很难,试着与小组一起解决.在项目结束前,下班后我们之中的三个人一边喝着酒一边看着第九稿设计.

我突然的把photoshop的图层都合并,然后点击”去色”把紫铜色和蓝色的设计稿变成黑白色.让每个人都惊讶是,它起作用了.

那周结束之前,我们用红色强化后完成了一个”暖”灰色的设计.当先前的客户开始赞赏这个新的设计并且接到更多其他的客户电话时,我们知道我们成功了.

用Photoshop的斜视滤镜来测试你的配色方案.

1. 用网站至少三个页面做截图.在Photoshop中打开
2. 每个截图都复制一下背景图层
3. 给新的图层做一下10px左右的高斯模糊
4. 使用图像->修改->色调分离.使用8到12之间,或者使用滤镜->像素化->马赛克.使用15到30像素

这样可以看到真正的主色调.整个配色方案,用的越多的颜色,那个颜色在用户的印象中越重.

曾经网站的布局和组织过去都没有色彩,现在是时候来选一个调色板了.但是选哪个?用多少?

调整你的色相

色彩具有三个属性:色相,饱和度,色值(有时会叫做明度)(译者注: 想深入了解的话可以读这个:关于颜色的基本理论)

饱和度是颜色有多浓:霓虹灯效果的颜色就是饱和度很高,而蜡笔的颜色就是饱和度低一些.

色值表示了颜色有多亮(比如,与黑色或者白色有多接近)

色相决定了色彩属于彩虹的哪个部分,比如红色或者绿色;这个就是人们容易出错的地方.

不协调的色相可以很容易的K掉一个配色方案.一个设计可以用一种色相的上百种不同深浅的颜色,从蜡笔到霓虹灯,看上去仍然是有条理的.但是如果色相使用错误的方式混合在一起,整个配色方案就会混乱了.

避免不协调色相的一种办法就是使用第三色来分隔.黑色,灰色或者白色的缓冲区是最安全的,因为灰色系是中性色彩:你可以把黑色,白色,灰色与彩虹中任何部分混合在一起并且很协调.

第二种方案是不同的色相使用不同的比例.如果配色方案中有紫色和棕色,那么设计中可以包含很多深棕色,并且加入一些明亮的紫色来点缀.

另一个可选方案是更改色值.纯蓝色和亮青色是很一般的组合,但是深蓝色(海蓝色)和靛青色(天蓝色)可以通过足够的对比来彼此衬托.红色和紫色差异够大,但不会冲突,同时又足够接近而不像是刻意为之.浅红色(粉色)和深紫色可以提供对比.

遗憾的是,避免错误的颜色组合与选择好的颜色无法划等号.如果你满意了,但是你的用户感觉不舒服,那就不是一个成功的配色方案.

发现优秀的配色方案

优秀的配色是从哪来的?有上百种颜色和上千种组合,怎么选择?

小的静态网站的设计师应该从内容取色.一般是通过相片.

我最近做的一个由8个页面组成的网站,顶部被一个精心制作的金属架贯穿,与之相对比的是深蓝色的天空.使用Photoshop的吸管工具,定成5*5的尺寸,我选取了天空的最深和最浅的部分,并应用到边栏,链接,标题,页脚,同时调整了色度.

当客户问我们是如何把网站设计的这么好,并且这么快,我们回应说”这才是我们该做的”.但是实际上颜色就在那,我只是找到它.(译者注: 很有陆游的”文章本天成,妙手偶得之”的风采啊…)

对于吸引目标用户的颜色,他们平时穿的衣服是一个优秀的指示器.看看你的用户穿的什么,你会知道什么颜色能让他们觉得舒服.如果你的网站是关于,描述体育联盟的,想想他们比赛时穿的衣服,这要比他们平时工作时的好.

如果你幸运的得到目标用户的照片,一并看看.你需要得到这群人的中间色(average).但是如果照片无法利用,那么去购物吧.

商业界的服装设计师对于每种心情和生活方式都有优秀的色彩感.当然不用跟第五大道上的高级时装一样.通过google搜索“camping stores,” “baby clothes,” “ski and swimwear”和“casual living”会找到很多很好的色彩组合.

人们会根据他们的品味穿衣服.如果你使用他们喜欢的颜色,在你的网站上他们会觉得更舒服.

使用纹理

通过微小的改变色相,饱和度和色值来制作纹理.

单色纹理(比如,只有一种色相的纹理)和图案毫无冲突的给大部分网站提供了微妙的维度.

简单而特别的纹理背景很容易建立:

• 给内墙(interior wall)照个像或者其他一些光秃秃的但是感觉粗糙的东西.
• 用photoshop中打开
• 复制背景层然后重命名为”texture 1″
• 用配色方案中的颜色将背景填充
• 把图层”texture 1″的属性改为”柔光”并把透明度调为30%
• 在你的网站上试试.如果看上去不对,继续调整透明度.

图层的名字是经过考虑的.你可能在尝试多张的照片.但是要避免给图层命名成类似”wall texture”或者”paper texture”.你要更关注在你网站中的效果,而不是从何而来.

建立优秀的配色方案

好的配色方案有一定的特性.把它当成是一个框架或者建立一个指南来保证设计的一致性.配色方案应该:

• 列出2到5个可以一起使用的色相
• 描述在设计中色相可以改变多少
• 每种色相深浅的依据
• 与黑色和白色对比时可以很好的工作

下面是个例子

设计师通过选择感觉很好的暖色调开始的.没有什么逻辑性的,只是一个模糊的目标”秋天”,还有她的感觉.

在Photoshop中,两个图层运用了不同深浅的黑色和白色(进行叠加).每个图层的叠加模式都是”柔光”.对于最右侧的颜色纯黑有些过于暗了,所以图层的透明度也进行了调整.

为了统一色彩,建立一个新的用纯红填充的图层.叠加模式是”着色”,透明度是大概40%(注意:图层的顺序很重要.如果着色层在黑白图层的下面,颜色就会变了)

它提供给设计师15种颜色可以选择.她选择了具有一定范围和色相的4种.这些颜色与白色是对比的.

变化是很重要的,所以设计师继续尝试.当这些颜色与黑色对比时看起来如何?如果我们把颜色稍微加深会怎么样?

如果一起改变会怎么样?在”tint”层使用图像->修改->色相/饱和度来创建一个”不秋天”的感觉,但是颜色仍然很协调.也许这组颜色可以用于复活节.

最终的结果是一套配色方案:一套使用不同的色相,搭配效果很好的色度范围.下载示例文件

使用框架

明天的图片,相片,图标跟今天的配色方案可以很好的搭配吗?网站在6天后会需要什么图片?六个星期后?或者六个月呢?但是内容是你配色方案的一部分.

你应该通过让图片参考配色方案或者让配色方案参考图片的方式来解决这个问题.

贯彻你的配色方案,甚至照片,这是获得所有页面都保持一致的很好的办法.

最简单的解决办法是找到符合你配色方案的图片.请记住一个配色方案会留有一些余地:让图片的主色调来符合,这样会起到很好的效果.很多相片存储站点允许你通过颜色来搜索(通过原色的色相:比如红,绿,蓝).

如果一个图片没法匹配你的配色方案,那么要做一些着色调整

1. 在Photoshop中打开图片
2. 建立一个新的图层,把叠加样式选为”着色”
3. 使用配色方案中的一种颜色来填充,最好是跟图片最接近的
4. 把颜色图层的透明度调整为50%
5. 继续调整透明度直到你在图片的原色和网站色系之间找到一个优秀的平衡点.
6. 这种技术可以使用在照片,图片和图标上-任何以像素为基础的东西(如果你自己没有图片,请确认你有权修改它.你可以改进它在你网站中显示的效果,但是你仍然是对其他人艺术成果的不尊重)

看起来专业

没有一组颜色本身是看起来”专业”的.甚至你宁愿按照一些步骤来获得更协调,有序的感觉.

无论网站是关于什么的,用户都会直到它让它自己很认真.

贴士

• 当你认为你有一个好的配色方案时,至少试一个星期.对色彩的评价需要感觉,而这个感觉需要一段时间来积累.给自己一点时间来充分的吸收这个配色的特点.
• 当你认为你有一个好的配色方案时,别让它变得枯燥无味了.你用户的感觉跟你一样,要保持变化.4个月之后来回顾一下这些颜色并做个笔记.然后问一下:它们还适用吗?如果不,应该改什么?哪些因素会影响你的修改?
• 少用鲜艳的颜色.一小块鲜艳的颜色会吸引用户,但是如果用户到处都能看见,他们会漫无目的的乱看…
• 一些人认为配色方案的色相范围应该小,留一些余地可以让你的设计更有深度.
• 避免使用纯的原色比如红色,绿色,蓝色和黄色.给它们赋予真正的个性:红,但是有些紫.蓝色,但是有点绿.加一些橙色让黄色更”暖”
• 确保你的色彩在”褪色”后依然起作用.如果你选择红色,请记得亮红代表女性,暗红色看上去像铁锈或者鲜血.黄色会像褪色的阳光一样变成深棕.深蓝色是神秘的,浅蓝色是宁静的-如果你增加饱和度,或许是水蓝色.(译者注:觉得这块应该是对于印刷品等可能褪色的产品来说的)
• Mac用户,请配置你的显示器.打开”系统偏好设置”点击”万能辅助”.把你的显示改成”灰度纹理”.当你想沉浸在黑色电影时这样也有用.
• 无论你想让你的网站感觉有多生动,使用中性的背景.黑色,白色和灰色几乎可以跟任何的色相搭配.
• 如果你想要小的字体(比如14点或者更小)来匹配大色块,让文字的颜色比正常情况下更深一些.这样可以弥补字符内部的反光.
• 使用少量色相的更多色度
• “看上去很美”是一种直觉.但是直觉是你的自我感觉,用户的挑剔和老板(提供项目资金的人)的权力之间的战争
• 使用柔和的背景让内容更突出

Ben Gremillion授权给WDD.他是一个独立Web设计师,他认为项目截止日期的不确定性与最终确定功能列表的数量成反比.

你是如何创建成功的配色方案的?对于你来说哪些起作用哪些没有?

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

用户为了完成任务需要找到必须的内容和功能.顶部导航条在水平的紧凑的空间内提供给用户已分类内容的访问入口.

解决什么问题?

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

什么时候用?

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

具体解决办法是什么?

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

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

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

为什么使用这个组件?

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

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

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

手风琴导航(Accordion)

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

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

解决什么问题?

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

什么时候用?

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

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

具体解决办法是什么?

对于选项采用两级分类

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

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

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

建议

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

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

可选项

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

为什么使用这个组件?

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

特殊情况

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

可访问性

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

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

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

8.23更新: 根据啸月天狼指出的错误  上/下箭头 改为 +/-号

基本都是只列提纲,详细的内容书中讲的不错,推荐购买

产品经理的日常工作

战略性工作.这类工作跨越产品的整个生命周期

• 为产品建立长期的战略布局
• 发现新的产品机会
• 为产品的演变,增强和改进提供建议

阶段性工作.有明确的起始时间

• 参与新产品开发
• 参与年度商业计划的确定
• 利用公司内部,外部资源开展营销活动
• 预测竞争对手的行动并制订对应方案
• 更新产品并进行相应的用户教育
• 降低成本
• 重新规划产品线

日常性工作.这类工作是按日执行

• 收集分析竞争情报
• 协调开发,运营,客服,销售等资源以保证产品正常运作
• 执行商业计划

理想状态下,战略性工作占产品经理的15%~25%;阶段性工作占20%~30%;日常性工作占40%~55%.

更深入的思考

以下是我的想法

• 一般每天的正常工作时间是8~10个小时.按什么什么学的统计(记不清了,出处是笑来的把时间当作朋友)每天注意力很集中的工作状态一般是维护在6个小时左右.
• 正常的时间去分布这三类工作方式,大概是: 1.5~2.5个小时;阶段性工作是2小时~3小时;日常性工作是4~5个小时;
• 收集情报,阅读资讯,协调资源,这些都不是需要集中注意力,进入”工作流”状态的事情,所以最好是在下午进行,这个时候基本上同事的精力和思维也都是比较充分的时候.何况有些人下午会困,做些人人之间的沟通再好不过.
• 上午的精力一般都比较饱满,这时做些原型设计,文档撰写,流程图绘制的工作再好不过.
• 所以理论上: 每日上午的2~3个小时用来作日常性工作中的”执行商业计划”和阶段性工作中的”参与新产品开发”.下午进行协调工作,竞争情报收集分析工作,晚些的时候浏览资讯
• 可能对晚些时候浏览资讯有些意见,很多人喜欢早上看资讯,不过有个问题,毕竟资讯网站也都是编辑在更新,更新频率和数量,行业资讯的响应速度都没有那么高的即时性要求,而且一般每天发生什么事情之后,会有不少人更新博客围脖讨论等等,这时可以更完整,更全面的看整个事情,所以建议资讯时间向后放,何况现在由于twitter和围脖,信息更碎片化,相信有事没事中间看两眼的习惯多少人都会有,整体的阅读时间就确实可以向后放.