之前有做设计的朋友聊到想在负责项目的网站上做一些与众不同的有趣功能，但同时又犹豫值不值得花心思去设计这么一个看似微小的功能，因为实在也无法判定这个有趣功能带来的愉悦体验能给网站的用户带来多大价值。

很多设计师都希望自己的设计能够与众不同，能够更新鲜，更有趣味性，但往往与众不同对于用户而言又意味着一定的学习适应成本。如何在趣味性和易用性之间求得一个平衡，找到那个点，很多情况下就成了只可意会不可言传，很难把握的一件事。

昨天碰巧读到Fred Beecher写的《趣味性，易用性和使用场景——愉悦体验的三大支柱》（英文原文在此），觉得非常有意思。他试图用数据来表示趣味性与易用性之间的关系，尽管只是一次小型的调研，但得出的结论对有上述困惑的设计师而言，还是挺有价值。

两个为iphone设计的单位转换工具，如下图所示，四个iphone用户，每人四个相同的测试任务，三个问题。结果是有三个人更喜欢左边那个，理由是它更直观。只有一个人强调说当她搞明白了右边那个工具，就完全爱上了它，因为觉得很有趣。当然，她所说的有趣是有学习成本的。从任务完成的时间也显示左边工具平均耗费时间要大大低于右边那个。

在此基础上，Fred Beecher得出了三点假设：

1. 当用户任务目标明确，并且是不常见任务，很少会使用到目标产品时，易用能比趣味带来更多的愉悦体验。（或许把这类目标明确直接的任务称作闭合性任务）
2. 当用户有个大致目标，但不是很明确，同时又经常有此需求时，趣味能比单纯的易用带来更多的愉悦体验。虽然趣味性的系统往往需要用户学会使用才能感受其乐趣，但如果学会使用能够带来非常明显的好处时，用户也会愿意花时间去学习适应它。（或许可以把这类有大志目标方向，但更多需要探索发现的任务称作开放性任务）
3. 一个有趣的系统，其易学性与其产生趣味的交互层次成反比。他提到三种层次的交互，最简单的是单一的交互，比如一个按钮；然后第二层次是两个或两个以上单一交互形成的交互流； 最高层次则是系统性的交互，通常包含了相对复杂的使用该系统的语言，比如一个游戏的构成，手势，视觉语言等等。当趣味性依赖更高层次的交互，变成系统性的交互时，其易学性就大大降低了。

作者给出了存在于趣味性和可用性之间的一条曲线：交互越复杂，趣味越大，易学性、易用性越低，学习成本越大。（横坐标为产生趣味性的交互水平，交互层次；纵坐标为易学性，也可以理解为易用性）

就像上面提到的两种转化工具，左边那个的趣味性只存在于单一的交互效果中，比如轻轻触发旋转它左侧的导航滚轮，很直观就会用了。而右边这个工具的交互性更强，它更像一个真实的机械模型，有旋转的面板，旋转的时候会发出“呜呜声”，轮子之上又有“啼嗒”作响的按钮，等等，这些形成了相对复杂的交互流，学习适应成本也随之上升。再如iphone本身就是个更为复杂的交互系统，你为了感受它所带来的愉悦，需要去适应一种与以往任何手机不同的交互模式，这就和玩游戏一个道理。

那怎样才能让趣味性带来最大限度地愉悦体验呢？Fred Beecher同样给出了一个参考图表，综合了用户使用场景，使用频率来考察。虽然并非精确的标准化图表，但至少在某种程度上可以作为参考，也可以提醒自己，下次遇到相似的问题时，记得从用户使用场景，使用频率去综合思考，用户会更多倾向于单一交互所带来的有限趣味，还是系统性交互带来的更多趣味。

Smashing Magazine最近对50大流行网站做了一次关于排版设计样式的详细研究，虽然得出的只是一种统计结果，并不算真正严谨的科学研究，但对于网站设计者而言，也可以把它们当做一个参考的标准。英文原文详细报告在此，翻译过来一些主要结论如下：

1. Serif或者sans-serif字体都同时适用于正文和标题,比较而言，sans-serif字体在正文和标题中更常见.
2. Georgia, Arial和Helvetica常用于标题
3. Georgia, Arial, Verdana和Lucida Grande常用于正文
4. 最常见的标题字体大小在18和29pixels之间
5. 最常见的征文字体大小在12和14pixels之间
6. 标题和正文字体大小之比为1.96
7. 正文行高与正文字体大小之比为1.48
8. 行宽与行高之比为27.8
9. 段落间距与行高之比为0.754
10. 每行最佳字符数在55和75之间, 但每行75-85个字符更常见
11. 正文都是左对齐，很少使用图片替代（image replacement），链接不是加下划线就是加粗或者以颜色高亮

当然设计师都是希望自己的网站和别人的看上去有所不同，但遵循一些基本的业已成型的共识，可以让你的网站对你的用户更友好，减少其适应期。当然这里谈到的只是面对大众用户的公众网站，很多个人网站则完全可以不按常理出牌。

很好的一份PPT，记下。

http://resourcedock.com/

这个网站整个版面看起来是往右边倾斜的，看起来让人老觉得不舒服，不平衡的感觉总是挥之不去。然而实际上每一根线都是直的，每一个元素都是对齐的。至于元素之间如何的产生关系，而导致了这种视觉上的错觉，细想倒是挺有意思。

这是之前截的屏，现在浏览该网站首页会发现版面已经改平衡了，前后两个版本对比着看更能发现当初问题所在。