创新不是空降兵

产品要创新不是在设计过程中出现的，而是在需求阶段就已经做好准备。

 

了解用户如何操作，为什么这样操作，从而改变用户操作。

 

满足前两点，会做出有价值的产品，满足这三点，会做出有创新的产品。

 

 

 

Truth or happiness, never both.

Happy endings are just stories that haven't finished yet.

 

用户体验需要知道的事

1 留有余地。

 

2 界面最重要的是什么？内容，而不是操作。

 

3 操作直观从不以牺牲界面简洁为代价。

 

4 不确定用户下一步要做什么，什么都不要做（不要强迫他们空降到排序页面或者编辑页面）。

 

5 控制屏数很难？给导航瘦身，删减文章内容留下精华，去掉可有可无的图片。还不行？不要妄想在一个页面做太多的事。

 

6 迷失在各种方案里？要么不了解需求，要么不了解用户。

 

7 找不到合适的方案？要么不了解需求，要么不了解用户，要么妄想一劳永逸。

 

8 相濡以沫，不如相忘于江湖――新功能听起来很好？不知是否需要？一旦开始考虑是否需要，舍弃它吧。

 

9 万花丛中过，片叶不沾身――透析，触类旁通，精华采集得不露痕迹。

 

10 什么都略懂一点，生活就会多彩一点――多玩，多观察，多思考。

 

Lie to me

朋友推荐了部美剧，Lie to me，下了3集。刚打开就震撼到，发现竟然是Tim Roth！果然强大！！

 

Lie to me是关于如何通过面部表情和肢体语言来辨识谎言的故事，Tim Roth饰Dr. Cal Lightman，活体测谎机：

 

据统计，一般人每十分钟的对话里，就会说三次谎。

当陷入回忆时，人们会终止眼神交流，表明说的是真话。当说谎的时候会经常做更多的眼神交流。

 

笑的时候眼角起皱纹，表示是发自内心的喜悦。

 

越受欢迎的孩子，越会说谎。

 

面部表情两边不对称的时候，极有可能他们的表情是装出来的。
　　
摩挲自己的手，是一种自我安慰的表现。当你不相信你自己所说的话，这样使自己安心。

 

Tim Roth的档案――

姓名：Tim Roth
本名：Timothy Simon Smith
出生地：伦敦，英国
生日：1961年5月14日
身高：5英尺7英寸（约170cm）
头发颜色：黄色
眼睛颜色：绿色
父：Ernie（已故）记者
母: Anne 画家/教师
姐：Jill 记者
前女友: Lori Baker(?-1988) 英
妻子: Nikki Butler（1993.1-） 美 服装/珠宝设计师
子：Jack Earnest 1984 (与Lori Baker)
　　Timothy Hunter 1995.5.4(与Nikki Butler)
　　Micheal Cormac 1997.1.5(与Nikki Butler)
爱好：抽烟，喝酒，看书，shooting pool（一种类似台球的赌博活动，但Tim说他"只赌啤酒"）
现住地：美国加州帕萨迪纳市

 

Lie to me值得一看。

By the way，他真的老了。但那些面部纵横的表情沟壑映射的岁月时光，是绝佳演技的一个又一个里程。

奋战在祖国各个角落的办证战士

草根网上的办证一瞥。

很有意思的自我价值取向量表

很有意思的自我价值取向量表：

http://www.psytopic.com/mag/post/self-value-orientation-scale-psytopic-version.html

有人格分裂倾向的童鞋请务必多做N便，以多数测量结果为准～～

 

By the way，我是偏内在自我型，嘿嘿

 

 

爆雷人的夫妻俩

爆雷人的夫妻俩……

良好用户界面设计的12种技巧

良好用户界面设计的12技巧

原文：12 Useful Techniques For Good User Interface Design
翻译：October
校对：Yummy

1 突出重要改动

系统状态可视化是良好用户界面的关键要素之一。用户应当即时了解发生了什么，行为是否导致了预期结果。为了达到更高级的系统可视化，现在网络应用程序都采用AJAX。用户可以随时更新网页的一部分，而不用刷新整个网页。AJAX给网络应用程序带来的反应速度和互动性接近桌面程序级别。

Yammer 采用3种效果显示新信息：渐变、滑动、高亮。


AJAX的动态属性也意味着，点击提交按钮，页面虽然不会刷新，但的确有事情发生了。大多数网站还没有广泛采用AJAX，所以有些用户会困惑页面到底有无发生变化，还是自己没有正确点击按钮。为每个交互提供视觉反馈可以解决该问题。

Backpack对任务列表的所有新条目采用高亮效果，持续一会，再消失。

动画可以很好的产生视觉反馈。人眼会很容易注意到移动，尤其当页面其他部分处于静止状态。比如，购物篮增加新物品，高亮动画会引起用户关注增加的物品，用户了解操作已生效。可以用JavaScript实现动画效果。要注意过犹不及，过度使用动画会引起界面冲突，因为播放动画会导致用户操作速度变慢。

2 允许使用键盘快捷方式

现代网络应用程序的高级特性不断逼近桌面软件，开发者努力为用户提供反应更快、互动性更强的用户界面。一种方法就是集成键盘快捷方式或者导航。这小小的技术会显著改善用户工作流程，用户能更容易完成任务，正如某些经典应用软件一样。

实际上，很多网络应用已经采用了快捷键（比如Google Spreadsheets, MobileMe等），甚至一些普通网站的基本导航也允许用户使用快捷键，比如Ffffound和Boston.com。Ffffound允许用户使用快捷键v进行略缩图浏览和列表浏览切换，h键回到页首，k键回到上一张图片，j键转到下一张图片。Boston.com也采用k和j键达到同样功能。

值得指出的是，快捷键应当直观明了，无须额外说明。比如，下一步、上一步的快捷键在键盘上相隔太远则没有意义，两个快捷键在键盘上应当靠在一起。因为如果错误跳到不想访问的页面，用户可以快速返回，而无需在键盘上寻找上一页的快捷键。“J/K”组合是一种方法。

最好使用大多数网站通用的快捷键，但目前尚未发现通用快捷键。

确保有快捷键可供使用，通过快捷键可以更加有效完成任务。

3 允许用户在帐号页进行升级

若提供多级别服务，确保移除任何会干扰客户升级的界面混乱之处。多数用户倾向于首先尝试基本服务，了解内容和运作。一旦确定符合期望值，他们会考虑升级到高级服务。设计师应保证升级过程尽可能简单明了。

CrazyEgg 将升级操作（Change Plan）放在主导航中。

实际上，许多网络应用将升级选项放在账户页面上，便于用户访问。这种设计的好处在于用户能马上看到所有服务级别、支持功能。

Bigcartel’s 的升级选项包括在该应用中。

注意：不要仅列出可选择的服务级别，还应说明当前使用服务级别和级别特征。

应当明确告诉用户升级后会得到什么好处。（参考Pricing Tables: Examples and Best Practices一文。）

4 宣传服务特色

即使有详细市场营销页面，列出所有特色和帮助信息，用户还是会完全忽视。他们很可能不熟悉产品的所有特色，只能从产品内的一点提示获得帮助。

宣传服务特色。一般可利用边栏（Sidebar）进行宣传，不会影响主要功能的使用。若用户所选服务级别使用接近饱和，告诉他们，并提供迅速升级选项。

Freckle时间跟踪程序会在服务级别达到容纳人数限制时给予提醒，并提供升级链接。

Wufoo在表格创建页面底部高亮显示表单图册库的CSS主题功能，确保客户获得应用程序的最大价值。

5 使用颜色区别列表项目

一些应用程序会聚合不同类型内容。比如，项目管理工具在首页显示所有最近信息、任务和文档。如果这些项目在列表中一起出现，会很难辨识。因此许多应用工具采用颜色帮助用户从视觉上区分不同类型项目。一个简单办法是在有色框内防止文本标签，列表容易扫读。

不要用不同颜色标示同类任务，也不要用相似颜色标示完全不同的任务。颜色不应随机显示，但应暗示表示不同颜色标签的含义。

Lighthouse问题跟踪工具每项右侧采用颜色标签，用户可快速浏览列表。

Goplan面板采用类似颜色标签标示不同项目，比如任务、备忘、文档，用户可快速找到所需内容。

6. 选项个性化

许多应用工具为个人或企业提供个性工作空间。个性化可以让用户感觉更自在。比如提供选项允许用户自定义工具界面外观和风格，让用户选择颜色基调、链接颜色，背景等。即使定制内容很少，用户也能创建自己的网页。

Campaign Monitor允许用户为自己的帐号选择色彩基调，上传商业LOGO，帮助企业将品牌色彩注入正在使用的网络应用工具。

个性化无疑是绑定客户最简单、最有效的方式。但要注意，个性化选择不应当牺牲应用工具的核心功能。无论用户如何定制，系统应当始终能够执行功能以满足用户期望。

根据用户是新手或者高级用户提供不同层次的定制服务，是折中网站核心功能和用户界面的有效方法。应当允许用户将帐号恢复到默认状态或上次设置。

Twitter 允许用户定制个人信息页面的背景及颜色，用户可以制作独特站点。

7. 帮助信息吸引注意力

每个网络应用工具都不一样，都有自己的工作方式。如果某个特定元素的功能不够直观，可以提供简短信息，帮助人们使用。如果用户不确定该做什么，帮助信息应引人注目。一种方式是使用颜色引起注意——比如在边栏（sidebar）放一个黄色即时贴形式的帮助信息。

Goplan把帮助信息放在像即时贴一样的亮黄色色块中。颜色明亮，确保用户会注意到。

如果希望既能满足普通用户需求，又不会过占用过多空间，也可以在需要解释的设计元素旁放置醒目的视觉图形（比如小图标）。比如就像Wishlistr.com一样，引导用户注意搜索引擎的新特性，更新特性或者有用特性是合理的。

Wishlistr使用灯泡引起用户关注系统现有搜索功能。

8. 慎重设计反馈消息

用颜色区分不同的提示消息。通常用绿色提醒用户操作成功，用黄色警示或提醒用户出错。也可以用黄色标示警示信息，用红色标示报错信息。

Mailchimp有效使用颜色表示报错信息。

为每种提示消息配以独特图标，无须用户阅读，即可直接传达含义。比如

勾号可表示操作成功。三角形里的感叹号代表警示。用户会立刻知道到消息传达的含义并引起注意。

GetSignOff提示消息右上角有关闭按钮，用户能关闭消息。

如果提示信息会在页面上停留一段时间，应当提供关闭消息的方法。

9. 使用tab导航

许多网络应用工具的主导航菜单采用tab形式。Tab不仅美观，在可用性方面大有益处。

Freckle在时间输入菜单子导航中使用tab导航。

Basecamp应用工具的主导航是标准tab菜单。

若将菜单做成tab形式，几乎每个人都能理解它是什么，如何运作，因为视觉隐喻强烈、明确。当前页或部分也易于浏览。用户知道菜单在哪里，如何操作它们。


10. 加深模态窗口下的背景

有些应用工具中，你希望只显示一小部分信息或者快速输入框，而不用占用整页。有些开发者把这种消息放在模态窗口中。模态窗口指从当前页面跳出的小窗口，用户需要与之互动，从而继续。

使用 Squarespace网站生成工具编辑时，背景变暗，焦点转移至编辑窗口。

为了更加突出模态窗口，可以加深窗口下面的内容。背景颜色较深，可以屏蔽内容噪音，模态窗口成为关注中心。这类似于窗口周围使用阴影效果，但在引导注意力上更强大。背景颜色较深，同时暗示了窗口下面的内容不可操作，用户应和当前窗口发生互动。

11. 光箱（lightboxes）和幻灯(Slideshows)

一些应用工具包括用户会浏览的大量图片。对用户或者服务器而言，逐页展示每张图片不是最有效的方式。访问者需要前后页切换，而服务器要承担本可避免的额外访问负载。

SmugMug使用光箱放大图片。

此时可使用光箱和幻灯。无须载入新页面，光箱和幻灯即可显示图片。例如，光箱方式以模态窗口在当前页面上方放大图片，背景加深，用户将注意力集中到图片。噪音干扰降低，提升视觉体验。

12.注册表单简短

注册表单是我们与潜在客户之间的最大障碍之一。表单越长，用户成为网站会员或收费用户付出的努力越多。要减少障碍，必须加快注册进程。去除选填项，只留下注册所需核心要素。选填项可以在用户成为会员后再补充。

创建Evernote帐号很容易，只有少量的内容需要填写。

结论

Steve Jobs说过：“设计不仅是视觉和感知，更是如何运作。”（Design is not just what it looks like and feels like. Design is how it works）实际上，如何执行功能，并便于用户使用决定了网络应用工具的可用性和整体效益。

Ugly Betty面临被砍危机

最近迷恋上Ugly Betty，非常不错的一部美剧，可惜近日ABC公布从3月26日开始《丑女贝蒂》将停播，估计会在6月回归。



虽然面临被砍危机，但对于努力且上进的小孩（固执得紧），大家总是不吝啬掌声和喜欢的心情的。

Betty加油！