• 前两天认识了一个朋友说他有色弱,比如蓝色他会说成绿色,尤其是那些介于蓝和绿之间的过渡色尤其难以辨别;为此他很懊恼。后来我告诉他:所有人都有色弱,因为所谓的色盲或色弱患者能分辨的颜色同正常人一样多,但他们使用和正常人不同的光谱,因此在测试时会出现有的人看5秒可以看出来,有的人不是看不出来,他可能需要看20秒或者以上时间,仅此而已。(其实介乎与蓝和绿之间还有一种青色,是太阳光谱里非常短的一个波段,正常人很难察觉,误认为蓝色或绿色,我的这个朋友其实是对颜色更加敏感才对)听了这些他才有点释怀。

    我们每个人眼中的世界都不近相同,反应到我们的大脑对所看到的画面产生的认知也不同。在工业设计领域,有为弱势人群设计的产品,而在互联网世界,这个领域还很少有人关注,相信以后会有更多的设计师参与进来。 

    以下是我收集的一些在互联网上色盲人群遇到的共同问题,以及使用到的模式和小提示,可以用于的网站设计一般性指导原则。

    尽量避免以下几种组合,高级和中级级别的人需要在所有的地方避免,而较低级别的组合可以适当考虑,因为仅有0.016%的人群会辨别不清……

  • 1、有想法就要马上做,然后坚信自己的选择,并按照事先设想的路线行进,一步步去验证。

    2、不要轻易的为产品添加一个新的功能,除非这个功能很迫切,或者是大部分人需要的。

    3、不擅长做的事情可以考虑让更专业的人帮助你一起来实现,不要什么都自己做。

    4、对于产品的核心功能一定要亲力亲为,就算再不擅长,也要自己实现第一步把关。

    5、设计一款产品的时候,想明白核心功能,迅速上线,接受用户检验,有关辅助的功能可以稍后优化或者添加。

    6、有选择的接受信息,什么都看不如什么都不看。好记性不如烂笔头。

    7、看穿了也别戳穿,关注你所关注的,鄙视就不用了。

    8、坚持独立思考,尊重并接受真正有见解的思想洞见,方法。培养直觉。

    9、手不要歇,多做才能获得真知,不然自己会变成,或者和那些夸夸奇谈的人无异。

    10、专业源于知识、眼界,实操经验及综合的评估能力。而不是title和职级。时刻把自己当做一个创业者来思考要做的事情。给自己加点压力。

    11、重要的事并不代表正确的事,重要是别人认为的,正确是自己认为的(别人认为的重要性也能验证正确性)。

    12、设计无我,爱设计本身,不要企图用它来证明自己。好设计自己会说话。

     

  • 用户在进行一个操作的时候,通常需要兼顾一些上下文语境才能完成,这时在操作的同时给予相应的提示是能够帮助他们完成的。但是,如果设计师处理不好的话,就会出现赋予一个交互控件太多的承载而造成迷惑,因此,保持轻量级的应用是很必要的。

    这个案例是我在做手机绑定的项目中遇到的。现在淘宝有手机登录的方式,但这种服务远远不够。大卖家通常有好几个客服,他需要同时有很多人来管理他的账户。于是就有了主号和子号。为了控制卖家频繁的更换主号码,需要限定更改的时间段是5天。而且在非绑定时间内提示用户当前是不能更换号码的。

    先看看我最初的设计:

    系统判定当前用户是否在5天内有过更换操作,如果有,用鼠标hover“更换号码”出现提示,移开后消失,并且显示他上次绑定的时间作为提示。如果没有则不显示。

    但是后来发现这样设计是不合理的。原因是:频繁”更换号码“这个操作并不是普遍存在的。即使是5天内绑定的用户,也不一定会进行此操作。如果他鼠标不小心移上去的话,这个提示会让他困惑。

    改进后的方案2是:鼠标点击”更换号码“才出现提示。这样就区分了真正想要换号的用户......

  • 兔斯基一直是我最喜欢漫画人物之一,这只小贱兔给我的感觉就是贼贼的+无辜的+欠扁的结合体,虽然有时看起来很困顿,内心却是很敏锐、强大、积极。最近看了MOMO的新书《我兔斯基你》,本是想再看看它又有哪些欠表情,没想到书里面有很多精彩的比喻和体悟,小兔兔也演义的也不错,越发喜欢它及欣赏momo的敏感。摘录了一些体会深刻的话,聊以自慰。

    痛苦是用来独自承受的,快乐才是用来分享的。
    景色(scenery)——处在高处,就举目远眺;跌落地处,也静心欣赏
    孤独(loneliness)——每个人独自来到世界上。每个人又独自离开这世界孤独其实是最理所应当的事情,任何生物本质上永远是孤独的。
    支撑(support)——保持独立,不依赖任何事物;因为,当所有支柱都离开时,你会摔倒地上
    无聊(bored)——没有无聊的人生,只有无聊的人
    道路(path)——如果和别人走的路不一样,那么所见到的和所得到的...也可能和别人不一样
    缘分(destiny)——如果我们没可能在一起,那么就说明我们没有缘分;如果没有缘分,那么不能在一起也没什么可惜的
    寻人(wanted)——缘分需要耐心,也需要运气
    机遇(chance)——机遇走的时候,往往比它来的时候更快;机遇并非从未光顾,而是你从未尝试去抓住
    人生产值(productivity)——如何判断人生有意义,在乎每天在创造财富还是垃圾
    异常正常(normal species)——当特别变得平凡,那么平凡就是特别
    短路(stuck)——思考没有捷径
    空间(room)——要得越多,空间越少
    务实(rational)——想象和现实总是不相符的,与其幻想未来不如把握现在
    堵塞的区别(blockage)——身体不通畅使人发病,思维不通畅使人发飙
    闯荡(adventure)——不必害怕去新的城市闯荡;即使失败,也旅游了一次
    资本(capital)——如果有大把的资本,不要挥霍;保证有更大的机遇到来时,你还有资本留住它

  • 最近在用Zoho在线工具帮助我管理工作上大大小小事务,发现非常好用。我们知道,在项目开发过程中需要保证每个项目成员对项目文档,时间进度,需求变更等有明确而及时的了解,尤其当项目成员越多需要付出的沟通成本也就越大,期间出现的偏差可能性也就越高。因此保持有效的沟通和协作显得尤为重要。

    利用Zoho Projects可以我能够轻松的将自己规划好的项目及时间安排共享给每个项目成员,同时利用他的多款协作工具(如:文档中心,wiki,聊天等)随时进行有效的沟通,而且她非常容易上手,学习成本极低。跟大家分享一下我常用到的部分和使用方法。

    一.使用任务及里程碑来安排项目,利用甘特图来跟踪设计进度。

    创建好一个项目后,在“设置”-->"任务模板“-->”新建任务列表模板“下创建”任务列表“。就生成一个新任务;”新建任务模板“用于创建该任务下的子任务。(通常我都是把项目分割成几个部分,然后再将每个部分拆分成子任务基本就能落实到具体页面。)创建好的”任务&里程碑“会自动生成甘特图,很方便。

    二.加入项目成员后,利用在线wiki,聊天工具进行实时沟通。

    加入成员分两种角色:项目成员和客户成员。(一般我会把PD,PM等权限较高的角色设为项目成员,把其它人设为客户成员)。 利用在线wiki可以将prd文档,设计mockup等通过附件上传。同时可以创建自己的主页,在里面自定义编辑想要的工具和文档(zoho提供很多自带及第三方组件)...

  • 这本书给我的最大帮助是能够真正享受“整理” ,快乐“传达”,下面分享我的一些心得。

    一、整理的理念

    1.关键在于整理对方的思维。
    2.设计的创造力体现在将解决方法化成有形之物。
    3.设计工作并非创造自己的作品,而是解决对方的问题。
    4.随时保持穷究问题本质的态度是整理术的最大前提。
    5.“舍弃”是为了决定什么是真正重要的事物,它不是目的,是手段。

    二、信息整理的步骤
    1.掌握状况:反复和对象(客户)沟通掌握微妙差异,找清问题点和关键点。
    方法:a、排列所有信息—>b、将信息可视化—>c、信息分类
    2.导入观点:以各种角度检视信息,找出问题本质。
    方法:a、舍弃无关信息(微小的,模糊的、重复的)—>b、理清因果关系
    3.设定目标:根据问题本质设定目标,导出解决办法。
    方法:a、雕琢正面的本质使之更具优势
    b、反向思考负面的本质扭转成正面...

     

  • 本书的精华提炼为:视觉化的思考是解决问题非常有效的方法,任何事情都可以通过视觉化的思考来体现。

    视觉化思考导向绳:4个步骤(看、观察、想像、展示),3个视觉工具(肉眼、内心的眼睛、手眼合作),六六法则(谁/什么、有多少、在哪里、在什么时候、怎么样、为什么)。


    一、4个步骤(看、观察、想像、展示)

    二、3个视觉工具

    不同步骤运用这3个视觉工具的方法:

    “看”的原则: 1.收集到能找到的所有东西。2.将它们逐个展开。3.建立基本坐标系。4.练习视觉分类

    “观察”的步骤:1.谁/什么。2.有多少。3.在哪里。4.在什么时候。5.怎么样。6.为什么

    “想象”的方法(SQVID):Simple-简单(精细)、Quality-定性(精细)、Vision-愿景(执行)、Individual-个别(比较)、Delta-变化(现状)

    “展示”的步骤:1.选择合适的框架。2.依照选定的框架来画图。3.介绍和解释所画的图...

     

  • Axure分享 - [一些总结]

    2009-07-30

    给公司的PD做的一个小培训,其实axure不光是交互设计师的设计利器,PD在前期的产品创意阶段也可以用它实现构思方案,使用axure能够更好的在方案立项前期细化产品的功能,无疑也是节省交互设计师的时间。 Axure功能培训

    View more presentations from Qin Rong.

    针对cola的几点疑问,补充说明一下: 秘籍一:超快速移动画面 当设计的网页页面过大时,为了选取不同位 置的物件,需要经常使用垂直或水平的伸缩条,这会影响操作效率。请试试这招:将鼠标focus在Wireframe,按住键盘的空白键,这么一来就会切换成Hand tool,此时鼠标的箭头将切换成小手状,您可以用來抓着画面任意滑动,而且不会打乱任何物件的位置,轻松愉快。 秘籍二: 穿透物件(widgit选取下层物体) 用鼠标左键稍慢速度按一下物件,当你放开鼠标左键时,可以穿透上层物件,选取到位于下层的物件 。操作效果如下图。

    我把源文件和Demo也放上来,有时间在写写富交互的应用总结。
  • 五.Tab的真实应用(续接上文)

    现在为止,我们从细节上探讨了Tab这种交互元素,是时候来看看真实案例了,在这一章节,我们分析一些Tab元素的应用,希望可以带给大家灵感。

    Haveamint.com

    这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。

    Mint module tabs screen shot.


    Yahoo!

    雅虎在头版位置使用Tab设计,对信息内容的显示进行了压缩和模块化。

    Yahoo! module tabs screen shot.


    iGoogle

    Igoogle在模块中大量使用了Tab,不占用大量的屏幕空间,又令信息饱满。

    iGoogle module tabs screen shot.


    Blue Acorn

    蓝橡果网站 利用Tab来显示网站的热门文章: 电子商务和Magento(一个电商软件平台),内容区上还放置着引导用户浏览更多文章列表的按钮。

    Blue Acorn module tabs screen shot.


    MailChimp

    在这个案例中,你可以看到利用图标强化标签文字描述的应用。

    MailChimp module tabs screen shot.


    WebNotes

    WebNotes 网站的Tab元素,标签位于内容区下方,令人耳目一新。内容区切换时有淡入淡出的动画。

    WebNotes module tabs screen shot.


    WorldCat.org

    WordCat.org 在搜索框中使用了Tab标签,让用户可以针对特定搜索需求缩小搜索范围。(比如书籍、DVD、或者文章)


    WorldCat dot org module tabs screen shot.


    Martha Stewart

    Martha Stewart 在网站的“推荐内容”上应用用了Tab设计,可以自动播放和带有过渡动画。


    Martha Stewart module tabs screen shot.


    Krista’s Creations

    Krista’s Creations 利用字母表作为标签来控制图片的分类显示。


    Krista's creation module tabs screen shot.


    Clearspring

    Clearspring 拥有响应速度极快的Tab,这是一个非常好的古典样式的Tab设计案例。

    Clearspring module tabs screen shot.


    Homewood

    在网站Homewood中,它们也利用icon来辅助了标签上文字的表述。

    Homewood module tabs screen shot.


    Apple - iWork

    苹果网站里,垂直方向排列的Tab标签设计,非常漂亮。

    Apply iwork module tabs screen shot.


    ExpressionEngine

    网站 ExpressionEngine 把标签控制区放在Tab窗体的底部,在快速载入内容区和快速响应内容区切换方面,它也是一个典型案例。

    ExpressionEngine  module tabs screen shot.


    Viget Inspire

    Viget Inspire 在“热门文章”版块使用了Tab,有淡入淡出的切换动画,内容区高度可根据内容长度自适应。

    Viget Inspire module tabs screen shot.


    Komodo Media

    Komodo Media 的标签里,icon放在文字上方。

    Komodo Media module tabs screen shot.


    atebits

    atebits presents 用Tab来展示产品介绍,它有效地在这么小的空间里展现了如此丰富的内容。

    atebits module tabs screen shot.


    Tumblon

    Tumblon 把标签放置在内容区下方,能快速响应切换,但不好的是,标签的选中状态和未选中状态不是那么容易区分。

    Tumblon module tabs screen shot.


    kevadamson.com

    在 Kev Adamson的网站中,右边栏里有好几个Tab,网站使用了不同的ICON配图,帮助用户理解不同Tab的功能。

    kev adamson dot com module tabs screen shot.


    六。 Tab的创建教程(前端方面的)

    有很多教程能告诉你在页面上如何建立和实现一个Tab,下面,你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。


    Building Tabbed Content 《如何创建Tab》

    通过阅读这篇初级教程,你可以了解如何通过使用JS框架原型创建一个简单的Tab元素,

    Building Tabbed Content Demo screen shot.


    Create A Tabbed Interface Using jQuery 《使用jQuery来创建Tab》

    Dan Harper 提供给读者关于如何使用jQuery库(译注:著名的js库)来构建Tab。

    Create A Tabbed Interface Using jQuery demo screen shot.


    Accessible Image-Tab Rollovers 《图片标签导航的快速切换》

    学习如何实现用图片来制作标签导航区,并实现快速切换

    Accessible Image-Tab Rollovers demos screen shot.


    Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery来实现一个可平滑切换的Tab》

    Create a Slick Tabbed Content Area using CSS & jQuery screen shot.


    七 。脚本资源


    如果你真正查找能直接在你网站上应用的Tab脚本代码,这有一些免费的解决方案。


    DOMTab

    DomTab 是一个很受欢迎的脚本,能很容易创建一个Tab元素,把普通的链接列表改造为Tab元素。

    DOMTab screen shot.


    JavaScript Tabifier

    这段由BarelyFitz 设计的即插即用 的 JavaScript代码,能够帮助你在个人网站上更快速实现Tab元素。

    JavaScript Tabifier screen shot.


    TabView

    TabView 是yahoo用户界面库(YUI)里的一个元件,你可以利用这个元件来减化代码量和图片的使用。

    TabView screen shot.


    Coda-Slider

    Coda-Slider 是Coda 设计的Tab实现脚本,可以实现内容区切换的转场动画效果,还可以设置将Tab标签处理为靠左对齐或靠右对齐。

    Coda-Slider screen shot.


    idTabs

    idTabs 是 jQuery 的一个简化插件,其强大的设置功能可以简化原来控件中复杂的参数组合。

    idTabs screen shot.


    Tabtastic

    idTabs是一个JavaScript库,也包含创建Tab工具,这有深入浅出的使用教程Step by Step pane

    Tabtastic screen shot.


    Ajax Tabs Content

    动态和远程数据,你可以使用AJAX这种动态驱动的方法,来异步更新内容区里的信息。

    Ajax Tabs Content


    Carousel - Module Tabs

    这段Tab脚本简单但有高度自定义的空间,支持动画与自动播放。

    Carousel - Module Tabs


  • Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。(译注:本文中指的是狭义的 Tab ,指在界面的某一版块区域内所应用的 Tab 设计。实际上,绝大多数网站导航也是 Tab 的一种应用)。

    web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中,人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页,这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

    本文将讨论基于web页面或其它web应用中如何设计Tab,同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

     

    分析Tab元素的构成

    为了统一叫法以便于进行讨论,我们先花时间来认识一下Tab元素的每个构成部分。

    • 标签:用户控制切换内容区的操作区域。

    • 标签和内容区在视觉上看起来应该是一个整体。

    • 标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。

    • 标签有选中和未选中两种状态,每次只能有一个标签是选中状态,在页面刚载入时,默认第一个标签是选中状态。

    • 内容区:Tab元素中重叠的区块。用于显示信息内容。

    • 内容区和标签一一对应,

    • 当前显示的内容区对应选中状态的标签,当前隐藏的内容区对应未选中状态的标签

    • 用户应当能很轻易地通过控制标签来切换对应的内容区

    • 默认被选中的内容区应该在页面载入后立即显示

    ....