·介绍
QQ空间相册的个性化利器，能对照片进行效果的优化、文字编辑等等。

从设计上使用了创新的手法，尽量减少用户的思考。其中，通过界面的特殊表现，让用户更容易学会使用。在使用的过程中，也避免了复杂的操作方式，降低使用门槛。

定位

了解用户需求
·用户期望照片编辑工具拥有“玩”照片的成分；
·大多数用户反映，最需要的功能是旋转、裁剪、添加照片的边框；
·能给照片添加文字、装饰品；
·对照片进行颜色或其他效果优化。
…

分析用户需求

除了可以对照片进行简单的角度旋转，尺寸裁剪、调整；同时可以给照片添加边框、文字、装饰品；还能够进一步对照片处理亮度、模糊等等…众多功能已经足以让照片编辑工具显得复杂，并且带来的是较高的使用学习成本。

作为相册的照片编辑工具需要易学、易用。甚至只需要一些简单的优化步骤已经足够满足需求。即使是熟练使用Photoshop优化照片的用户，选择照片编辑工具也只是想方便、快速实现一些简单的个性化效果。

设计

对照片编辑工具的要求，从基础的优化照片，到照片的特效处理，并尽可能多的个性化照片功能。但前提下需要让用户可以很容易找到基础的优化功能，界面需要直观且容易使用。当然，不是一个摆满所有功能的编辑器，并附带一份使用教程。

界面布局能让用户理解
界面设计传达给用户的亲身感受是最直接的。界面的功能太多、复杂，则会让用户在使用照片编辑工具时有很高的学习门槛。从界面布局入手，设计界面的布局结构。

简化并设计布局结构
设计照片编辑工具的界面，尝试将所有功能分布在三个不同的区域：
1.对照片的简单效果优化
2.可添加到照片上的个性化装饰
3.照片预览区

把所有的功能呈现在界面上，让用户逐步尝试每一个功能对照片的变动，然后再找到他所需要的功能；或者说在众多的功能下找到需要的某一个功能，也不是一件易事。若对于仅仅只是想把方向颠倒的照片旋转矫正、裁剪尺寸，会把一些多余的功能占据了照片预览区。

如何合理得地归类功能，调整一个合适的布局结构，让界面理解起来更加简单，却不会让更多个性化的功能淹没？

编辑照片，所见即所得、核心的内容则是照片预览区，其次是提供一个固定的编辑照片功能区：把所有功能集中在固定的区域，可以更容易找到。

功能区
依据大部分用户朴素的需求，把最常用的功能放置在最容易发现的位置。当需要更个性化照片的时候，同样可以很方便找到入口。

可扩展的功能区—添加装饰
考虑到“添加装饰”功能会有很多装饰品，需要一个固定并且明显的位置。照片编辑工具的核心是让用户可以在简单优化照片之余，还可以“玩”照片。所以这个区域的设计是让用户在需要的时候打开使用，通过技术上的特殊处理，同时也能让用户自行控制，切换为固定的可添加装饰的区域。

一个有序的学习过程
这样的界面设计让用户在第一次使用照片编辑工具时降低了门槛。界面布局的简化能让用户更容易理解，对照片的编辑、优化、等更多的操作，都能在固定的一个位置，更容易找得到。整个使用过程都是可预知的。

避免复杂操作
众多的功能，如何让用户每一个都能学会使用，也是一个棘手的问题。

例如：常见对照片的优化，都会使用复杂的“模式化对话框”（比如：调整亮度）。

模式化对话框“好处”
双重保险，调整到合适的效果后，再确定；不满意，取消。可避免大部分的误操作。

“坏处”
需要完成当前操作，当前的操作若不“确定”或“取消”，则无法进行其他操作，对话框被模式化，挡住了背后的其他操作。
操作越多步骤越多，每个操作都需要确定一次，显然不是每一个操作都需要，甚至会造成用户的困扰。

对于照片编辑工具，我们需要的是更简单，并且便捷的操作过程。尽量避免模式化对话框，成为设计上的禁忌；当然，并非一味想办法把模式化对话框都“cancel”。

在对功能进行归类的同时，把复杂并且容易出错的操作，是更需要“双重保险”的：比如照片裁剪功能。裁剪功能往往不是一步到位的操作，需要多次调整图片的裁剪区域并确认裁剪范围后，才会保存。若有不满意的情况，需要让用户从头再来或放弃。

“撤销”操作缓解了误操作
撤销上一步的操作，对发生误操作或操作后不满意的情况下，比起每次操作都需要“确定”，使用过程会更加方便。

比如锐化、对比度、亮度，这些操作都是显而易见，也是比较容易让人可以猜到的。而正当需要使用这些操作的大多数情况都是很直接的。如果对调整的效果不满意，将滑动块移回初始状态即可；由于设计上使用了下拉菜单这类型的轻量操作，在发生了误操作，撤销上一步的操作可以回到原先的效果。

比如：点击模糊功能>展开调整菜单>调整完成后>不小心点击了菜单外其他区域或转到其他功能时>菜单收起，照片效果变了。

那么此时可通过撤销操作来恢复调整前的效果：

…

最后

我们将会在体验这一块不断去思考、尝试，进一步提高易用性。至少，我们的思考能减少用户的思考，会是让产品更有利健康地成长。

体验一把：qzone相册中点击照片编辑器或查看照片时点击编辑打开照片编辑器。

本文于2009-6-5发表至webteam内部网站;2010-9-2发表至ISD网站（部分内容有改编，仅为作者观点）

什么是信息架构

信息架构的主要任务是为信息与用户认知之间搭建一座畅通的桥梁。是信息直观表达的载体。通俗点，信息架构就是研究信息的表达和传递。信息架构不仅仅是设计信息的组织结构。─摘自百度

为什么需要信息架构

打开Qzone，个性化的风格，很酷炫的效果已经是它陈年传播的口碑。web2.0，SNS这一系列的新潮名词融入了Qzone以后，现在看到的，似乎会让人迷惑…

“我感觉QQ空间好乱”─经常有网友这么说

“在自己的空间，可以看到有主页、日志… 个人中心，在个人中心下面，可以玩一些应用、游戏… 当我去看朋友的空间时，我想知道他在玩什么游戏，他用了什么应用，这个时候，我开始迷路…”─亲身体会

这或许就是信息架构不清晰，它会让用户越来越难以理解，而在使用Qzone的过程中，会觉得越来越难复杂。

是什么反应了信息架构混乱：

1.导航信息结构不清晰
Qzone导航上的“更多”，是展示主人的更多导航内容，但实际上是“主人使用的应用”。

2.个人中心信息界面复杂
个人中心、应用列表、信息中心之间的关系，已经让用户无法理解。个人中心到底该有什么？

这是目前最容易看到的问题。那么Qzone，它是怎样一个信息架构？尝试对Qzone进行一次分析，整理并建立一个清晰的信息架构，或许可以看出问题的所在。

建立信息架构

建立信息架构的难点，必须收集网站所有的内容，整理、分析，在之中遇到很多困难。Qzone平台的概念，每一个功能如何定义；架构引发导航的思考…

第一步.定义概念

想象Qzone是一个平台。任何建立在平台上的功能，尝试把它们进行划分。

QQ校友，它是一个关系链平台，校友是否应该接入Qzone，作为Qzone的一部分功能；而后续推出的QQ同事，也是另外一个关系链的平台。这里成为Qzone平台定义的难题。

假设在Qzone的个人中心，可以了解个人空间最近的新动态、QQ好友空间的动态；同时可以了解到我校友、同事们的动态，是一个很方便的事情。但是，如果把其他平台的动态都接入到Qzone，相当于Qzone平台下包含了校友、同事（平台），它们之间则不再是同级的关系。

Qzone应该只是一个个人平台、个人空间，其他平台可以有应用接入的方式，但不应作为Qzone本身的平台功能。

不久之前个人中心动态的“校友”，则是一个错误的接入了；它的形式，让用户觉得校友是Qzone的一部分，但实际上不是。

第二步.整理、分类内容

在整理清楚Qzone的定义，日志、相册等的定义，开始构架Qzone的信息结构。

Qzone的内容很多，我们尝试把结构简单化，将内容用一个层级结构去划分，这样也使得复杂的网站结构可以更简单清晰地变现出来。

日志、相册等作为Qzone平台的基本功能，它们是一直存在依赖于平台，同时也是平台不可缺少的功能。其次，把目前众多的应用作一次分类“基础应用、游戏应用”，是为了让平台后续接入更多应用的时候，区别对待。“基础应用”是更重要的功能；而“游戏应用”的自由度可以由用户去控制。

把应用划分为两类，但用户是否能够清楚理解？假设在导航上，用户会发现两个不同内容的应用列表。而我们把应用清楚划分是为了后续的扩展，那在构架上，“基础应用、游戏应用”应当是“应用”的下级。

应用是指用户之间交流、游戏互动的内容。好友管理、空间设置，不属于Qzone的应用，而是对空间设置操作类，因此单独把它们划分为“管理”类别下；其中也包括了装扮空间、自定义。

个人中心，是一个新消息的聚合。起初尝试在个人中心下划分一个层级，存放“消息”内容。

然而发现，Qzone本身是一个内容很复杂的平台，里面包括的所有内容都有可能会产生大量的“消息”提醒，单纯把“消息”都堆积到个人中心下，会使得个人中心变得庞大。重新尝试把个人中心下的“消息”再单独划分为一个内容。而个人中心，更应该是一个主人的首页，只聚合了最新的“消息”，而相应查看更多的“消息”内容，得去到“消息”的栏目。

…

把Qzone所有的内容总结、归纳、分类。一步一步梳理信息架构图…

最后.它应该是怎样一个信息架构

信息构架完成了第一步，大的框架已经有了结论。Qzone包括了“平台功能、应用、管理”，“消息”是平台各个地方产生的新消息汇总与通道；“社区”作为第三方的信息接入；“个人中心”是聚合各个地方的最新动态。

信息架构的意义

信息架构图不仅是给网站设计者、产品设计所理解的；同时也是一个用户可理解的结构图。图中反映了网站的结构，也是一个网站的导航。

如果它是这样一个信息架构，那么：

1.导航信息结构不清晰

“个人中心、平台功能、应用、管理”组成了Qzone平台主要的导航项。

目前导航里的“更多”，则是更多在第一屏摆不下的导航项，而不只是“应用”。

2. 个人中心信息界面复杂，个人中心到底该有什么？

“应用”不再是个人中心的一部分，个人中心只是有“应用”的快捷入口。个人中心聚合了更重要的“消息”，其次把各个地方需要展现的最新信息，或以精华、推荐的形式介入。个人中心更像是一个主人空间的首页。

每个网站都有它自己的信息架构，而一个清晰、简单的信息架构，可长期让网站健康地发展下去。

本文于2009-5-5发表至webteam内部网站（部分内容有改编，仅为作者观点）

自然语言处理是一门科学，而我不是科学家。

在浏览网页中，经常会遇到很多不寻常的表达方式，而终归清晰、明确的表达方式才是最大众化的。

对于“自然语言”的表达方式，一直都是在不断探索、总结、归纳，组织一个互联网的措辞库。

而目前渐渐有了简单的小结论：

…
用户互动行为：
1.交流行为（评论、回复）
1.1.针对文本输入框，有提交按钮的，提交按钮统一为“发表”
1.2.针对一篇日志、一张照片等，用户间的交流行为统一为“评论”
1.3.针对“评论”内容，用户间的交流行为统一为“回复”

2.操作行为
3.等等等等
…

期待了很久，终于上线啦！

再来一句呐喊：“终于上线laaaaaaaaaaaaaaaaaaaaaaaaaaaaar！”

不知道放什么图，来张全家福  … >v<

·在此要特别感谢 ivane 童鞋的强力技术支持，才可以让人仔打开百叶窗，看到外面的阳光~
·当然也为 pufen 童鞋一贯以来的技术尝试在宣告失败后，仍然奋勇支援，虽然最后没用上什么成品~
·king 同志的即时技术支援!
·而 indigo 同志为我创造的一个不会被河蟹的空间表示衷心感谢，感谢 (mt) Media Temple！
·感谢 W3C、感谢HTML5、感谢CSS、感谢wp(WordPress)、感谢php、感谢mysql、感谢jQuery、感谢Macromedia fireworks(自从你们失踪后我还一直支持)、感谢Editplus、感谢windows 7！
·当然，感谢星海名城物业管理中心、房东顾女士提供的一个宁静的工作环境！
·还有南山供电局的每月1000元电费单、上行速度超慢的6M中国电信ADSL！

最后，诚挚地感谢访问我网站的您，希望您会愿意订阅！

四年来一直想做一个个人网站，但一直没有找好方向，不知道该做些什么。

四年来我一直尝试在IT界不停寻找方向，也许，我已经找到了最后的方向，继续为互联网设计。

设计我的个人网站

引导页的出现源自90年代的企业网站。企业网站都很愿意在用户访问网址的时候，出现一个flash动画，而通过“SKIP”点击进入网站的首页。

“我们经常会在登录一个网站的时候被引导页挡住前进的脚步”—来自互联网多数用户的烦恼

显然很多个人主页直到现在还保留着引导页，也许，这只是一个个性化的标志，简称互联网上的“非主流”。

如果我的网站一定需要引导页的话，一定需要的话，一定需要的话！不好意思，有点哆嗦了。显然我也是那种“非主流”。你可以说我不在乎用户烦恼，当然我不认为是一个烦恼，起码不是所有人都觉得是烦恼；我只在乎是否因为没有“引导页”，而我会更产生烦恼！

所以，我很烦恼！我又期望我的首页不是引导页，但我也期望我的首页是一个引导页，但我又不想搜索引擎认为我的首页就是引导页…

我开始在想…从引导页到达网站首页，标志着网站是这样一个结构：

这样的网站结构，让我觉得确实是一个烦恼，引导页是一个很多余的页面。但我很希望有一个很简单的引导页，就是放我的logo，我的形象，因为我花了几个小时画出来的，起码让每一个访问的人都看清楚一点，爆开心~ >v<

“引导页对于网站相当于大门对于家，开门迎客这个道理全天下的主人都应该懂得，如果客人登门拜访主人去没有去开门迎接，相反的还需要客人自己开门才能进来，这无疑是对客人极其不礼貌的行为。”—来自互联网的说法

那么，如果我坚持要一个不礼貌的大门，或者理解成我在家的时候没穿上衣，只是穿一个内裤在游浮，来访的客人直接走进来，那是不是也不礼貌？

我熟读并推崇《don’t make me think》——“不要让我穿着内裤的时候看着你们的眼神，我得去想我该怎么办！”或许每个人对书籍作者原意的理解是不一样的。

从《Web信息架构》到从我桌子上离奇消失的《Web导航设计》，我也明白，我的房子只有一个客厅，也只有一扇门，客人门都是从这扇门进来的。

…

让我的网站只有一个首页，没有引导页，也许这才是信息类网站最直接的设计方式。而我想了另外一个方式，把引导页想个办法突现“这是一个发生在厕所的故事，我像往常一样坐在座便器上面拉屎，厕所的百叶窗是关着的，我为了让外面的阳光透一点进来，我拉开百叶窗，百叶窗？对哦！百叶窗！”

好了，这个结构相信是最简单朴素的信息类网站了：

而我悄悄地用百叶窗的方式，在网站蒙上了一个遮罩：

完成！

起码搜索引擎不会认为我在忽悠他！我的网站确实没有引导页！

官方提醒

以上内容纯属虚构与幻想，若有雷同纯属偶然。而且作者的思路绝非正确，请勿随意模仿。若有异议，请往下评论！谢谢您的你的支持！相信下一篇文章才是有价值的！哇哈哈哈~