懒得设计

这次UCD书友会话题在北京讨论了留言和评论的门槛问题，先看两个设计的案例：
案例一： 在豆瓣小组的单个帖子页面，当出现翻页的时候，留言框会在最后一页，并且第一页底端没有留言框（比如这个例子）
案例二： 有些博客会在单篇文章正文结束的地方给一个“发表评论”的链接，点击跳过其他人的评论，定位在发表评论的输入框里。
先不评价两者设计的好坏，一是提高了留言成本，二是降低了。

假设有两个用户:
张三读完文章，顺便就想“赞”、“顶”、“沙发”一下。
李四读完文章，感概万千，有一肚子话想对作者说。

对张三来说，动机是顺便，留言可留可不留。如果成本稍微有点高，就放弃了。
对李四来说，表达欲会刺激去寻找入口。

从留言的数量来看，必然是门槛低的留言数量会增加，但质量却得不到保证，这个时候要看设计者的意图了，是图个热闹还是控制质量？可以在易用性的设计上，增减门槛来达到目的。

再泛化一下留言和评论的概念，可以认为用户的“评分”、“推荐”、“投票”等操作，都可以理解成是和“留言和评论”一样的用户对信息的反馈。
有一个小设计我认为非常好：5GSNS单篇文章在评论上面增加“踩一脚”的功能，很多人“赞”、“沙发”的动机会被“踩一脚”功能取代，成本低到极致，只需要点击一下。并且让那些真正想进行观点PK的人能用评论（留言）很好地进行沟通。

设计一个产品要明确站方的态度，然后再了解用户的动机和需求。有时适当的增加点门槛，不见得是坏事。当然，最好的办法是能找到平衡的手段，什么类型的用户都不得罪。

虽然说博客不等于CMS，但是我也不认为博客只是个人的展示。

博客应该具备内容展示的能力，前文说过，博客在信息展示上面因为按时间流的方式是不利于信息展示的。留言中很多博主有问过我具体的解决方案，这篇文章不说理论性的东西了，本文针对那些定义成“媒体”的博客，提出一些改良方案的设想。

问题主要针对这样的博客：50%以上的流量来自搜索引擎。

博客的导航
应该以内容导向为主，一个陌生的读者最关心的可能是这个博客是关于哪些领域的？而不是这个博客主人是干嘛的。比如水煮鱼这家伙的导航，
现在是：“首页 关于 存档 火星 案例  FF  论坛  加速  晨晨”，
我认为：“博客赚钱 wordpress主题 wordpress插件  空间及域名”（随便例举），
用内容来标识自己的博客效果会更好。几个词叫什么非常关键，应该以读者为中心来设计。如：“我的女儿”可能就比“晨晨”更好。“wordpress主题”比“案例”更好。

导航的个数
导航类别控制在7个以下，也就是说用少于7个词把这个博客关注的领域tag出来。

导航类别里的内容选择
因为博客首页显示的是最新文章，导航分类下就应该放过往的精华内容，这样的内容最好是不具备时效性，就是说在任何时候读都有价值的文章。而且应该是经过整理过的，定期要更新里面展示的内容。

内容的呈现方式
虽然博客都是以文章为单位，但文章可以post图片、视频、音频等，应该为不同的内容提供不同的展示方式。比如这个页面就是经过设计了的，比传统的标题+摘要的方式要好。
1 对于系列性质的文章，应该集中展示。
2 不是所有文章都要有摘要。

一个信息索引地图
1 主导航的类别不能穷尽博主的关注领域。
2 文章的展示方式有多种维度（时间、标签、类型等）
那么提供一个大而全的、经过组织的信息索引方式地图，展示在一个页面里面，会更加友好。

导航上还应该有“关于本站”
建议不要跟内容平行，可以放在导航的右上角，对“本站”感兴趣的人会找到它。

首页是什么？
做网站的人应该知道，一开始设计首页是愚昧的。
捋清楚上面结构性的问题，你的博客核心的价值是什么，首页应该传递给读者什么，可能就迎刃而解了。
所以你的首页可能：
1 就是你的最新文章列表（博客首页）
2 一个整理过的精华内容集合（CMS）
3 关于本站
4 地图
5 以上各个模块的缩略展示

本文主要针对了导航的架构给了建议，对于单篇文章的页面，单个tag、单个类别等页面，方法一样，换位思考，假设你就是一个第一次来你网站的访客读者，他们需要什么，信息呈现能否更加友好一些？这些问题很多博客都有相关的一些办法解决，比如单篇文章下的“相关文章”模块，“侧栏呈现的内容是否能简化”等问题，就不一一细说了，有兴趣的关注这个话题：博客和网站。

话题的起源来自老冒和白鸦讨论关于ucdchina的设计问题。
以下是我的看法：

留言内容性质分成：灌水、跟作者的交流、观点的PK

从留言的产品架构上来说，如果没有改结构的话，时间流的排序方式不利于观点的PK，道理跟我说“博客架构的媒体局限”中的观点一致。有人用插件改过这种方式，但其中仍然有弊端，本文不说。

就是说，留言的结构不是以读者为中心设计的，因为不是以内容维度来组织的。加上博客留言不方便跟踪提醒。所以造成的结果就是读者发泄一下，或者是给作者留言会居多。

所造成的现状就是：观点的PK占的比例比较小，也就是白鸦和老冒指的有价值的评论。要维持有观点价值的评论，博主需要对评论内容进行管理。

小容在豆瓣上接着这个话题说：
“我现在就在九点用推荐的框框来记录这个瞬间的想法。如果不写下，过了24小时，我就会把它淡忘，我们的交流失去了机会。点点滴滴的书面化都有助于人们在稍后继续反馈。
以用户为中心的设计也需要考虑用户的心理感受，短留言并不意味着没有价值的简单点评，它是交流的起点，是让用户在接受原作者信息之后立即反馈，并记录这种反馈的工具。
我觉得白鸦把UCDChina中的短留言功能给关闭了，强制用户去写长文章交流，实在也是本位主义的做法：）交流也是分层次的，那么为何限制用户以短留言的形式写下瞬间的感受！ ”

我回复：
“并非去掉短留言，只是不在ucdchina上。没有“强制”不能留言。ucdchina聚合更侧重文章而非评论。”

小容：
“让用户把留言真接留在UCDChina.com上也未尝不可，Digg.com的内容页比起UCDChina.com来更是简化，而http://www.disqus.com/更是直接把评论作为基本内容单元。所以，我不觉得评论一定要依附在原文的下方。”

留言目的是交流和沟通，如果说ucdchina需要的是观点的PK，对文章进行聚合相对留言评论来说是最靠谱的。如果这个理由还不够，再看下面：
1 ucdchina有google group邮件组、书友会，这些都是对沟通和交流的补充。
2 评论的管理成本很高，没有必要背负这样的负担。

凑热闹说UCD大社区的定位
老冒说：
“鸦的大社区设想我看是个不错的宏观设想，往往很多好的东西，理想是美好的，实现的道路是曲折的。鸦对UCDChina的大社区思路的阐述条条在理，但看完 后问自己什么是“大社区”？ 基本上和没有看是类似的。 :)  这印证了不少UE/UX的文章和咨询师们，道理完全正确，句句有哲理，然而能如何解决实际问题呢？ 仁者见仁智者见智，– 也就是傻瓜仍是傻瓜，白痴仍是白痴的意思。 ”

很多朋友也向我们反映不明白大社区是怎么回事。似乎这是一个烂设计。我得承认这是一个还不完美的设计，但目前有些困难，前文我提到了博客作为媒体的局限，ucd大社区是想通过话题的组织维度来弥补这个局限。这个组织架构我认为是靠谱的，在展示的方式上，确实还在探索。

好的产品在一期把定位搞准，其他都是可以容忍的细节。

老冒问：如何解决实际问题？
大家都是业余兴趣做这个东西。当然需要把时间投入到最需要改进的地方。两件事：
1 技术和后台的优化。
大社区很多一期的功能点至今都没有实现，而且后台的优化相比前台更急迫。

2 先有架构才有呈现。
如果说来大社区都是获取信息的，内容上怎么组织架构，能让每个想找到信息的人快速找到。这个问题比页面上的呈现更加重要。目前大社区才收录了不到1200篇文章，内容的架构上，跟当初设想的偏差不大，但需要做些细化和调整。

这里说的局限性，并不是怀疑个人发布信息是否具备媒体特性。而是对现在多数以媒体为定位的博客，在架构的处理方式上，提出一些想法。

说博客架构之前，看一下几点：
文章性质
撇开个人日记，单指具备社会化属性、媒体属性的博客文章。
分成时效性和非时效性。
一篇技术文章、一则笑话的文章，在任何时候读起来，可读性基本不会下降。
一篇时事观点的评论，可读性会随着时间衰减。

文章组织的维度
分类、标签、作者

博客入口
1 从搜索引擎搜索信息、或者通过外部链接，进入单篇文章。
2 敲入域名直接进入博客首页。

时间流
博客基本都是以时间顺序排列的，最新的在最上面。

那么，看一下大部分的博客首页。
千鸟跟我说过，我的博客域名不应该用uitony.com，而应该用blog.uitony.com或者uitony.com/blog，当时我并没有在意，最近思考博客的架构，恍然大悟。为了使用方便，可以将uitony.com指向后者，但把博客当成一级域名，会对以后在结构的扩展性上造成很大的问题。

因为，时间流的展示方式不适合成为一级目录，这个域名下面所有最小单位以后不一定都是文章，哪怕都是文章，一级目录也应该是一个结构层。
这个问题可能需要写过100篇以上的文章的blogger更容易体会到，时间流的展示方式，根本没有办法展示结构性的东西。用侧栏来展示的话，一不够充分，二跟时间流的方式格格不入。

博客作为媒体，时间流的方式是最大的障碍。从读者的角度上来看，他们关注的是文章写的是什么，什么时候写的对他们来说不重要。现在的分类和标签，都没有、也很难解决这个问题。就算按时间顺序，顺着排还是倒着排，不同的文章性质，这个问题也不一样。

说上面这些都太抽象了，拿水煮鱼举例，这家伙写了800多篇文章，博客每天4000+PV，60%的人通过搜索引擎过来，看完一篇文章之后，一部分跑到首页，大致浏览下没有找到更多有效的信息，就跑了。为什么？因为博客的首页不适合解释给这部分人看，这个首页完全没有告诉那部分人，这个博客里面有什么货、是关于什么的。跟看一个只有20篇文章的博客效果一样。

我的结论是，基于文章内容的重构，将是以后很多以媒体为定位的博客要做的事。

千鸟最近写了一篇《互联网设计操作参考》，私下跟他简单聊过一些意见和看法，文中提到：
《用户体验的要素》所提的战略、范围、结构、框架、表现五层对理解帮助很大，但不适合走操作流程。
这本书在流程的概念上意义很重要，但运用到实际的团队流程中，往往很难执行和分工。

所以千鸟提出这样一个结构：
蓝图——产品经理——网站目标、用户需求、功能规格、内容说明
文档——产品设计师——信息架构、交互设计、界面设计、导航设计、信息设计、视觉设计
原型——产品工程师——原型制作、客户端编程

同事在跟我聊这个话题的时候，他说：流程往往是被逼无奈的选择，并且在流程精细的情况下，抛开速度和效率不说，信息在流程中传递的时候往往容易失真。
相信在大公司待过的都会有这个体会，产品周期长，效率低，很多简单的问题其实一个人可以解决的却因为部门、流程的标准问题，不得不交给别人来做。

而对于一些1-5人的产品小团队来说，往往是看UCD流程的细腻程度而望洋兴叹。以至于千鸟在文章结尾说“最好的Producer，有人可以带领大家做的更好，没人自己也能抗下来。”
所谓爷爷都是从孙子走过来的，所有的大公司都是从小作坊模式起来的，不乏一个人从产品构思到原型设计、到后台代码全部包办的情况。虽然这些牛人当初根本不知道UCD的概念，但他们往往是最牛的实战者，他们理解UCD流程也最透彻。
所以建议很多初入行的设计者别拿你刚刚听来、读来的一些概念和流程，跑leader那去吹胡子瞪眼要优化流程，如果没有找到现状所存在的问题和漏洞，也许你的leader更明白团队需要什么样的流程。

白鸦提出取消“用户体验设计部”，其目的就在于避免流程跨越部门，导致不必要的争斗。如果非要给产品团队分块，分成两块：

一：负责产品做什么
二：负责产品怎么做
一负责需要什么样的东西，二负责这东西长成什么样子。

这样分工的好处在于，节约流程但大权又不至于被一方独揽，双方可以相互牵制并改进产品。
对于产品怎么做，对于很多公司来说相对不是问题，因为现在UCD流程和理念中，这一块讲的很多。但在产品做什么的问题上，很大的比重上是依赖个人经验，一方面有些方法的验证成本高，比如用户研究、数据分析。另一方面，大部分人更加关注怎么做，结果如何。

相信不久，对于怎么做产品决策的方法和研究，会慢慢进入大家的视线。

之前有写过一篇浏览器的tab设计，这回说说网站的tab设计。
一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化，选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。

如果你想用tab的方式构架你的网站，搞明白下面几个问题，或许对你怎么设计会有帮助。

用tab解决什么问题？
在设计tab之前，先要搞清楚为什么用tab，每个tab下的信息到底是什么，信息之间的关系是：
信息结构一共有多少层？
tab跟大标题之间的关系（大标题的作用大多是给用户定位）
并列关系
过滤关系
是否互为同类项？
包含与被包含？
……
如上图，tab1和tab2下面的信息互相之间的关系？每个tab下信息和大标题之间的关系？只有搞清楚关系和需求，才有办法进行下一步设计。

tab结构
看下面几张图，相信应该能够感受到结构的区别了。

上图都是选中tab4的效果，但结构方式却不一样。虽然这个例子很简单，但我们在实际操作的时候，往往会比这复杂很多，比如：
tab下面需要嵌套tab，如digg的设计。
或者tab和面包屑的结合方式，（如原来junchen介绍过的）等等，
很多问题往往因为多层的信息结构，在tab的运用上面，需要灵活变通。
（在研究结构的时候，需要完全抛开交互和视觉样式来分析）

tab的交互方式
选中的tab是否可以再操作？如果是，如何告诉用户？
点击tab的时候，刷新不刷新页面？

tab的视觉样式
tab长得什么样子，会很直接地影响用户对导航的认知，举三个比较常见的例子：

当然，视觉样式肯定很难穷举出来，有需求的参考一下这里。

几点提示
1 tab的个数，最好遵循 7±2原则。尤其是非主导航区域。
2 在没有把需求和结构搞明白之前，切勿拘泥于tab的样式设计。
3 在多级tab的情况下，如何精简结构是一门学问，需要多从产品形态和用户需求方面考虑，不一定需要一味的追求结构的清晰和统一，造成不必要的冗余。

本文最主要的是提供设计思路，抛砖引玉，有兴趣大家一起关注和分享这个话题。

从深圳User Friendly 2008回来，下午18：50的飞机回京，原本10点能到，但我到北京机场已经1：40了。

原因是飞机受伤了……
从深圳宝安机场起飞，离地之后发现故障，于是改道飞往广州白云机场，并且在白云机场停了3小时。
不知道现在飞机像这样的事故率有多高，虽然我是第一次亲身经历，但之前有过耳闻，据说挺常见的。
这几天开会天天聊产品、谈体验，那就顺道说说这倒霉的3小时吧。

海南航空公司，航班号：HU7702

18：50 深圳宝安机场
我感觉从飞机起飞开始，机组人员就知道有故障，因为空姐姐没有像以往那样跑来端茶递水，但并没有给乘客任何解释，这是合理的，飞机还没有着陆之前，不需要告诉乘客，以免造成恐慌，还需要找空姐姐来慰安。

19：30 广州白云机场
不愉快和让我不解的是飞机停在广州白云机场之后，机长通过播音告诉乘客飞机故障，需要检查，于是在座位上等了30分钟，我不知道其他乘客怎样，我是空腹登机，饿得眼都绿了，空姐姐不停地给我报以微笑，腼腆的我没好意思跟她说“姐姐，我饿。”让我纳闷的是，所有乘客跟我一般腼腆。
后来得知，其实食物飞机上大大地有，为什么在飞机停下来疗伤的时候，没有人出来解释一下，帮忙稳定下情绪呢？
舱内的人开始焦虑不安：
有第二天7点转机飞欧洲的，有第二天公司开会的，有的人赶紧打电话让接的车先回去……乘客的状况可想而知。

20：00 白云机场候机大厅
最后机长告诉大家需要去大厅等候一下，乘客都很配合，有人估计饿得不行了，去索要了一份餐。然而自打下了飞机，海南航空公司的人就没有露过面，也没有给任何解释，把近200来号人扔给了白云机场，然后他们电话遥控机场人员处理问题。
看场面给我的感觉是，机场和航空公司对待这种问题司空见惯。
关键让我很不爽的是，从始至终没有人主动出来说话，所有乘客跟苍蝇一样，空姐姐和空哥哥们一个劲地微笑，不管你乘客怎么骂。微笑是一种好的态度，只是好体验的开始而不是全部。

在候机大厅等了2个来小时，总结如下：
乘客都坐下的时候，大家其实想知道：最晚几点能飞北京，能否转别的航班，能否退票，管不管饭\住宿，有没有赔偿，在这几个小时里我们能干什么，最好不要干什么……
其实不在于能不能满足这些要求，但这是正常人类都会想问的，你就公告一下，给大家一个底，况且大部分你们都可以做到。不知道是航空公司还是机场人员不够专业。
领食物（水、八宝粥、饼干）的时候，我的登机牌落飞机上了，问怎么办？
空姐姐：先生，您稍等，一会打电话帮你问一下。如果换飞机的话让海航的人给送过来。
我：能不能先给我一份吃了。
空姐姐：抱歉，食物需要凭登记卡领取。
……
我就无语了，我成来机场骗饼干吃的了。后面还有个大爷糖尿病，根本吃不了这些玩意。空姐姐说：那我跟XX申请一下，看有没有其他配给。

10:30 飞机修好、再次登机
倒霉的航空公司没有给乘客任何说法，只是抱歉。就好象这一切是这么安排的，我们就好像一群广州登机的乘客一般，当然大家都很庆幸只等了3小时，没有耽误事。

1：40 北京机场
走下飞机我也不知道刚刚究竟发生了什么，我还幻想会退点打车钱，本来10点到我还打算坐地铁回，但这个点只能打车了。为了省钱，都没敢打车回家睡觉。

空姐姐倒霉的微笑让我很崩溃，你稍来点情绪，她就笑着抱歉。我本以为像机场处理这种对乘客的引导、情绪的处理会很到位。但实际情况并非如此。

结语：道歉有用的话要警察做什么？

++++++++++User Friendly 2008感受分割线+++++++++

1 见了一些仰慕已久的人、传说很久的人、神交很久的人
2 会下的小聚会要比大会有意思
3 南方夜生活很精彩，连觉都舍不得睡

相关网站

国外：Flickr、 Picasa、 Facebook、 photoshop.com、 zooomr.com、 Windows Live、 Slide、
Photobucket、 SmugMug

国内：Yupoo、 校内、 豆瓣、 QQ空间、 巴巴变、 163、 图缘、 好看簿、 Fotolog、 百度空间相册、
新浪相册

（PS：找一些网站除了google一下之外，我还喜欢这样一下）

图片基本信息
图片
标题
描述
时间
地点
tag
扩展信息（EXIF）
……

功能和需求
增：上传
删
改：修改、编辑
查(索引）：tag\分类
评论
权限
排序
外链
上一张/下一张
地图
note（圈人）
图片处理
分享（发给好友）
size（尺寸）
email、手机彩信上传
……

以上三点是通过大家的讨论、总结出由相册网站穷举出来的一些信息，然后再从这些信息开始考虑具体的设计。
从目前对相册市场来说，有三种网站是比较具备代表性的：
一 垂直图片社区。
典型代表是flickr，国内的yupoo、巴巴变等。

二 垂直工具型。
代表是picasa。

三 社区辅助服务型。
代表是facebook、windows live。国内的校内、豆瓣、百度等。

不同的定位造成不同的信息组织架构
对比piacasa的“相册”和flickr的“sets”就知道作为工具和社区的定位区别了。
而社区型的图片服务，很显然，在很多方面是以上两种设计的综合。

图片上传的交互
在讨论中比较了三种上传的交互方式：
Facebook、flickr（校内）、picasa(豆瓣)
（个人认为flickr的交互体验相对最好，因为允许多选）

关于大家还提到email、手机彩信上传、picasa 的跟客户端同步。

一个关于排序的小问题
单个相册的排序在缺省状态下，是应该新传的图片在前面，还是旧的在前面？
可能大部分想到的应该是新的在前面，但看看facebook的设计，然后再看看windows目录的缺省状态？
这是个很有意思的问题。

图片浏览的交互
1 缩略图的预加载效果（flickr的幻灯）
2 size的放大和缩小（picasa）
3 “上一张/下一张”按钮从图片中间分割 （没有右键保存）
4 flash？

update:图片预加载的交互看这里

PS1:这次ucd书友会在詹膑老师的奇遇花园，有幻灯，讨论质量好了很多，但如果下次来书友会的人事先准备下话题，相信气氛会更好。
PS2:内容关注千鸟的整理，这个超级图片用户（flickr传了1W+张图片）在这次书友会上给我扫了很多盲。
PS3:北京书友会的书都放在奇遇花园的书架上，目前一共有72本，北京的朋友有空可以过去坐坐。

下载点击这里

分享给那些需要开发iphone平台的网站设计师们。

国内互联网的UI设计师貌似都是一个师傅教出来的，你要是不会做个水晶图标、给底色拉个渐变，你都不好意思说自己是做UI的。可能很多设计师都有自己的苦衷，造成这个职业变成了一种恶性循环：
1 apple是靠设计取胜的，我们的网站要像apple的UI一样漂亮。
2 网站做得太简洁，老板或者客户会觉得没有创新，做成这样还需要UI设计师吗？
3 整个行业都认为UI设计就是做图的，只是“美工”的洋名。
4 从国内的各大门户到腾讯、淘宝、百度这样的大牛，都在水晶、渐变，然后就有人说，中国的网民喜欢酷的，炫的网站设计。

这也难怪，中国人民都在一个世界里做同一个梦，更何况区区地网站的视觉设计。

虽然现在IE还是主导了整个浏览器的天下，但IE靠的并非是产品设计上的优势，而是依靠windows的力量，因为绝大多数的初级网民认为IE的产品体验不妨碍他们浏览网页。从产品体验上来看，其他浏览器的tab的设计体验，是让很多IE用户倒戈的直接原因。

浏览器tab的历史
在10年以前，互联网萌芽的时候，所有的网站设计的原型都是来自于软件，IE也刚刚奠定它在浏览器世界的霸主地位，但在当时，浏览器的tab设计就已经有了原型。记得当初我见过有一款浏览器的tab是在浏览器的下方，类似excel下方的sheet。在当时，也获得了不少用户的喜爱。
但自从amazon将tab的设计从软件工程引进到网站设计之后，用户体验的tab时代到来了。

从浏览器的使用体验来说，IE的窗口切换是在系统的任务栏，跟其他任务窗口和操作系统的信息混合显示在一起，虽然本质上也是tab，但是从信息容量到操作体验，相比现在浏览器的tab在操作成本上都要高出很多，尤其是在多窗口切换的时候。这也是为什么很多经常访问网站的中级用户慢慢地抛弃IE的主要原因。

浏览器的tab和地址栏
从目前的各大浏览器的设计来看，tab多数都放在地址栏的下面，唯独opera例外。
从信息架构上来看，浏览器的tab本应该在地址栏的上方，因为网站地址是属于单个tab下的一些信息。但是，为什么其他浏览器的tab放在地址栏的下方呢？
用户在使用的过程中会因此受到打击吗？答案是不会，相反，我认为tab应该放在地址栏下面，用户对tab的操作频率和需求要高于地址栏（包含前进、后退、刷新）。
让用户易用比逻辑架构清晰更加重要。

新开tab窗口的弹出位置
抛开设置不说，在有tab的浏览器中，在当前窗口中新开tab的交互方式有两种：
1 在当前窗口的旁（右）边（以傲游为代表）
好处是可以让同一个网站、或者说相关联的网站在同一个区域显示。

2 在整个tab的最右边（以firefox为代表）
好处是让用户清楚自己的访问的顺序，在窗口多的时候能按照心智模型去寻找目标tab。

几大浏览器中tab的细节体验
1 傲游的双击关闭tab是个很棒的设计，使用其他浏览器（我现在常用的firefox），我经常不小心在切换tab的时候点到了关闭按钮。
2 opera在未选中的tab上悬停时候，显示网页的缩略图如下：