【转】如何写一份交互说明文档

转载请注明来处,关注我,请点击:http://weibo.com/heidixie

 

离开交互圈已经有段时间了。但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上需要交互设计师编写界面交互设计文档,请问界面交互设计文档是什么文档?怎么编写呢

这让我想起来2009年自己在项目里也大力推行过交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险。今天整理电脑,翻出以前的PPT,分享之。

这将涉及到几个问题:

 一. 什么是交互说明文档(DRD)?

所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。

在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期,交互设计师有可能还会产出用户需求分析文档(与PD产出的市场需求文档不一样的是,URD更多侧重于对目标用户的需求分析)。

DRD则很少有人专门撰写。如果需要对交互设计进行说明,聪明的交互设计师往往会直接标注在线框图里,或者在项目中不断和前端工程师和开发工程师口口相传,反复验收,不断迭代修改来确保所有的交互设计意图最终得以呈现。

二. 为什么要写?

DRD非项目必需环节,一般情况下也不会为交互设计师专门留出相应的时间预估。没有这份文档,项目也会继续,但是可能项目会为此承担不必要的沟通成本和时间成本。严重的话,项目的质量也会受到影响。所以写与不写,交互设计师需要做把握,时间被统一包含在“线框图”环节内——如果你要写,请在评估时预留1-2天的时间。

那么,结合我过去的经历,谈一下此文档的必要性。

下图是一个产品开发项目基本的流程。

 

敏捷开发意味着很多不同角色的流程需要并行操作。如果等到产品经理的FRD已经全部敲定,交互设计师再开始去画线框图,固然会减少沟通成本和返工风险,但是同时意味着交互设计师的很多想法不被采纳。如果产品经理再强一些,他甚至会在FRD里连原始的DEMO也一并绘制出来了,功能性的需求和界面交互的需求有时无法区分太清楚——比如他会在FRD里直接要求每页条目40条,超过40条即分页。而交互设计师可能会认为像蘑菇街那样不断装载出足够长的页面会更亲和……所以,我们希望是和产品经理同时开始工作,在术业有专攻的时候相互补充。

同样,开发工程师也希望及早介入需求,在FRD并未确认的时候就了解需求,进而将商业需求和功能需求转化为开发工程师看得明白的开发需求清单(这个清单,大部分叫做UC,即USE CASE),当这份清单由工程师需求分析师——在过去,这个角色被叫简称为RA,但是目前已经取消此专门的职位,而是由开发工程师代表担纲此环节工作,为了便于描述,在此文里,我仍然将做这件事情的人称为RA——交付给具体的执行工程师后,执行工程师基本上可以当作一条条的checklist开始高效工作,而不必再思考商业逻辑和需求。同样,测试工程师也需要编写具体的文档去指导很多测试人员在开发后高效测试,这也是基于UC和FRD去撰写的。

所以,开发需求分析是个很重要的环节。那RA是如何来完成需求分析工作的呢?

  • 前期介入,对PD进行开发需求评估支持;

  • 参与每次的FRD评审会;

  • 详细审阅FRD文档并不断与PD确认。

对于做这件事情的人来说,足够详尽的FRD是非常重要的。所以一份FRD虽然是PD产出,但是很多实施细节则是由开发工程师不断沟通评估并确认下来的。而设计需求的传递,却存在很多问题。除了线框图,没有“详尽的说明性的文档”告诉他们。比如: 

一方面,交互设计师对产品经理说:这块由我们来考虑,你的文档不必包含设计上的说明,这随时会调整的。

另一方面,线框图的评审有时会让RA参与,有时却没有叫他们。即使叫上了他们,他们也会发现交互设计的需求变化要比FRD变化快。另外,他们会认为UC不必写太多关于交互设计的需求。

在某个大型项目结束后,作为交互设计师,我进行了一些调研,听听这相关人员是怎么表述问题的:

开发部门的需求分析师:

  • 每次变动都很痛苦,设计变了之后,我就要跟着改UC,改截图,有时候UED改了还忘了通知我们,导致UC有问题……

  • 页面交互的需求容易漏掉,因为UC里面不可能写太多交互方面的东西。

  • 希望UED能够在提交HTML DEMO给RA时,能同时给出一份页面元素描述文档,需要介绍html demo中的文案、链接以及相关的图片尺寸或显示字符个数。现在RA在这方面花费的时间比较多,经常要和UED去确认这些内容。

产品经理:

  • 前期RA和PD沟通过程中,有很多交互点点不能够明确,比如“默认显示多少属性值”,“标题显示多少字符”等。在以往的需求和项目中,对待这些问题我们都是想到一点补一点的到FRD文档或者邮件中去。既增加了沟通成本又会存在遗漏细节的风险。PD为了可控性的需求,往往会“越俎代庖”,直接在FRD注明这种需求(对于交互设计师来讲,却又导致没有发挥余地)

走访了一些交互设计师后,他们也存在如何清晰无遗漏将交互设计需求传递下去的困惑:

交互认为很平常的设计需求,如果不表达出来,还是容易被前端和开发忽略掉。我经历的一个项目,前端从头到尾更换了三个人,每次我都要重复去讲解下设计需求,讲得口干舌燥。而且做好后,还需要去验收。

  • DRD做为参考手册,一定程度上避免不吻合的问题发生。

  • 即使有问题发生,也可以作为界面验收时的Checklist。将“我对A说,我对B说,A对B说”,转变为“A和B共同参考同一份文档”,减少沟通成本及信息不对称。

  • 全程影响用户体验(一直到测试,都需要参照设计文档)。 

可是以下问题都可以通过一份DRD来解决吗?

 


三. 写什么不写什么? 

要明确文档的定位,从写什么与不写什么开始,划清DRD以及FRD的边界。

1. 不写视觉规范规格标注

这些说明与功能实现没有太大关系,主要是为前端做HTML的时候参考的。一般视觉设计师会在PSD里标注清楚。如图:

2. 不写功能实现逻辑。

 

如下图所示,作为DRD,你有必要传达清楚Browse by category区域的设计:链接的可点击性,链接的指向,字符与条目的数量限制等,但是具体二级类目排列是按产品数目排还是按字母排,还是人工运营,是FRD要解决的任务。


那么文档写什么呢?

 

举例子说明下:

1. 字符限制

 

提高空间利用率,有时网页上的动态文字需要从数据库里提取部分然后截断处理。比如下图中的标题和描述。你的DRD需要传达清楚:1,是否要做限制?2,如果做限制的话,多少字出现截断?截断后是显示为省略号还是不显示?这个汉语设计相对简单,如果英文单词的话,因为是按字符,每个字符的宽度不一致,需要预估,另外还需要注明是整词截断还是词间截断。

2. 链接具体化

 

很多网站都有对搜索结果的筛选设计(refine search),比如aliexpress搜索结果页左侧。这块区域的交互事件是非常复杂的。

  • 类目和属性的不同如何处理

  • 属性以及每条属性显示的属性值的条目是否有显示上的限制?

  • 选中后,被选中的属性值是停留在原地,方便用户记忆,还是放到统一的位置,方便用户统一查看?其他未被选中的属性值是否消失?  

  

要确保这些你设想中的复杂的交互逻辑能够被理解被呈现,除了一页页的线框图,你有必要再三让前端工程师和开发工程师了解并达成认知一致。所以你需要将页面上的关键链接事件标识清楚。它们有的指向无需刷新页面的交互,有的指向你安排的并非PD安排的某个中间页面(page flow是交互设计师的职责)

 

3. 交互细节说明

 

相信我,我很不愿意写这些东西。我喜欢在会议室向各位涉众演示我的线框图,我会研究用axure制作各种动态效果,达到它足够逼真呈现各种联动——比如当你选择了下拉菜单中的某项时,页面上其他区域也发生相应的变化。可是,Axure不是全能的。即使能够表达出来,线框图交付出去,也不能确保其他人都能够一一进行点击尝试。所以只能在会议室反复讲解,在事后再三检查并敦促修改。  

但是当我尝试用下图对这块小小且复杂的区域进行详细说明后,事情变得简单多了。所以我用节省的时间去写了这份PPT. 

 

又如,你可以在这里说明任何你想要的效果。你的受众也只需要用10分钟时间阅读完毕,标注出与他工作相关的重点,存档并在遇到问题,找不到你人时随时参考。

  

5. 表单的校验

 
 

这也是一项不怎么有创意的事情,但是你若不事先想清楚,在项目过程中有点麻烦。写文档看似枯燥乏味,反过来想也是让你自己再好好思量审核设计本身的关键步骤。我曾经自以为完善的交互设计方案就是在写DRD的时候发现存在重大的纰漏,然后及时优化的。

6. 浏览器的兼容性要求

你们的产品兼容所有浏览器简直是梦想,但是有时出于效率的要求,我们必须战略性放弃某些浏览器,比如IE6.:D 。 这个决定谁来做?是前端工程师还是产品经理?还是你——交互设计师?我认为决定权在交互设计师这里,但是他必须和产品经理达成一致,并与前端确认。你要求兼容的浏览器越多,标准越高,前端的工作量就会越大,测试的工作量甚至也会翻倍。

 

 

四. 什么时间交付呢?

Heidi的建议:尽可能与你的线框图同时交付,如果你先交付出线框图,在撰写DRD的时候,极大可能会发现问题或产生优化的想法。但是往往写DRD至少需要1-2天的时间,你不可能让所有下游等着你的工作。所以:

  • 你可以交付出线框图供视觉先开始。视觉设计往往会先做风格定位设计,这和交互细节关系不大。

  • 先交付出已经确定的线框图给前端,然后在1-2天DRD后,若有改动,与前端当面一一确认并一起交付。

 

五. 如何写DRD?

 

1. 选择最有效率的工具。

我的经验是这个工具最好能够提供清晰的目录导航结构,而且易标注。word确实是个写文档的好工具,不管你信不信,反正我是信了。

2. 建立固定的目录结构

 

下图仅供参考。

 

 

具体里面的细节,就不一一罗嗦了。 

六. 重要的原则

准备写DRD的朋友,请认识清楚此文档真正要解决的问题是什么?如果是解决沟通偏差、需求遗漏、沟通成本高的问题,你在项目里没有出现过这种问题,各合作方也反馈良好,那么这个文档就无需写。如果是解决对设计需求进行存档,便于后续人员改版时查看的问题,则又是另外一回事(经验证明,过去的DRD确实能够在改版时起到一定的帮助,在我离开原项目很久后,新的设计师还找我要过相应项目的文档,了解过去的设计逻辑)。

  • 不是为了写文档而写文档(而是为了解决问题)

  • 适合于项目、合作方(大项目有大文档,小需求有灵巧的解决方案)

  • 工具不是问题(易传播,易标注,成目录即可)

  • 模版不是问题,大家看明白就可

  • 完美的文档无法取代面对面的沟通(评审会和讨论不会因为文档而减少)

  • 需要在实践中不断改进

七. 谁来写?

我建议由交互设计师发起,但是由前端工程师进行修订,再传递给开发工程师。

有很多需求,交互设计师只要求实现即可,但是他可能并不在乎是前端实现还是后端实现。前端工程师对DRD进行把关和修订,能够将设计语言转化为工程师能够看懂的语言,且能够划定与开发的实现边界。

八. 与其他产出物的关系

项目中交付物对应不同的使用角色,如下图所示:

但是有个问题是,虽然DRD的目标受众有开发和测试,但是让开发工程师同时参考那么多文档是不现实的,所以仍然是开发工程师的接口人,也就是事实上的RA需求分析作为需求整合传递的角色,将商业需求和设计需求,传达给具体的执行开发工程师与测试工程师:

 

 

【总结】

对于坚持撰写DRD的我来说,DRD的好处自己当然是明白的。但是并非所有人都喜欢写文档,都喜欢看文档

解决问题有多种方案,DRD只是其中一个。不过,当你因为设计需求传递过程中发生了问题,或者你的需求被理解偏差,或者你的需求被遗漏,或者你接手的项目改版,因为要梳理过去的设计逻辑焦头烂额时,你可以试试用DRD。如果使用过程中还是存在问题,那么就想想是否还存在别的解决方案吧~

瓶魔悖论与不完全信息

这事一篇转来的文章,以前看到的,不过依然,我用我的理解来转,你用你的智力来读。

The Bottle Imp 是一则有意思的短篇小说。某日,小说里的主人公遇上了一个怪老头。怪老头拿出一个瓶子,说你可以买走这个瓶子,瓶子里的妖怪就能满足你的各种愿望;但同时,持有这个瓶子会让你死后入地狱永受炼狱之苦,唯一的解法就是把这个瓶子以一个更低的价格卖给别人。如果你是小说里的主人公,你会不会买下这个瓶子呢?你会以什么价格买下这个瓶子呢?

以什么价格买入这个瓶子,这个问题貌似并不容易回答。你当然不愿意花太多的钱,在你的愿望被满足之前你至少还得给自己留一点钱花;但你也不能花太少的钱,否则你会承担着卖不出去的风险。但是,在做出一些理性的分析后,我们得出了一个惊人的结论:任何人都不应该以任何价格购买这个瓶子。

和很多博弈问题一样,这一系列的分析首先从最简单的情形开始。首先,你是绝对不能只出 1 分钱就买下这个瓶子的,因为这样的话这个瓶子就永远也卖不出去了——没有比 1 分钱更低的金额了。那么,用 2 分钱买瓶子呢?这样理论上貌似是可行的,但仔细一推敲你会发现还是有问题——这样你只能以 1 分钱卖掉这个瓶子,但没有人会愿意用 1 分钱去买瓶子(否则他就卖不掉了)。因此,用 2 分钱买下瓶子后,你同样找不到下一个买家。和上面的推理一样,用 3 分钱买这个瓶子也不是什么好主意,因为没有人愿意以 1 分钱或 2 分钱购入瓶子,因此你的瓶子不可能卖得掉。依此类推,你不应该以任何价钱去购买这个瓶子,因为每个人都知道,他无法以任何价格卖掉这个瓶子。

这个推理有意思就有意思在,它的结论和我们的生活直觉是相反的——花几万块或者更保险的,几百万块钱,去买这个瓶子,怎么想也不会是一个如此杯具的结果。但上述严格的推理为什么会得到一个看似荒谬的结果呢?这个推理有一个很强的前提条件,这也是很多趣味博弈问题的基础——假设每个人都是最聪明的,他们所做的决策都是最优的;并且每个人都知道,每个人都是最聪明的,都将选择自己的最优策略;并且每个人都知道,每个人都知道每个人是最聪明的;并且……这样无限循环下去。但现实生活中,这个假设明显不成立。或许每个人都绝顶聪明,但这一点并不是所有人都知道;即使所有人都知道,也不是每个人都知道所有人都知道。这就是所谓的不完全信息,它会对整个游戏的结果造成根本性的影响。

听一个朋友说,他在某堂经济学课上玩了一个非常有趣的游戏,那堂课的教授通过这个游戏完美地诠释了不完全信息。教授叫每个人在小纸条上写一个不超过 100 的正整数,然后交给助教。由助教当场统计所有同学所写的数的平均值,并约定所写的数最接近平均值的 2/3 的同学将在期末考试中获得额外的加分。例如,若所有同学所写的数平均值为 44 ,则写下 29 的全体同学都将在期末得到加分。如果是你,你打算写多少?
我们来看看,如果前面那个“人人都是聪明人”等一系列假设成立,最后的结果是什么。首先,你有理由猜测,大家所写的数随机分布在 1 到 100 之间,平均值大约在 50 上下。这样的话,你写下 50 的 2/3 ,即 33 ,应该是最合理的。且慢!不只是你,其他人当然也都想到了这一点,他们都会发现写下 33 是更好的选择。这样,你写下 22 便成为了一个更好的选择。不过,别人也会和你一样想到这一步,进而所有人都会考虑写下 22 的 2/3 也即 15 ……这样推下去,最后的结果是,所有人都会发现写下数字 1 是最好的结果。而事实上,这个结果也确实是最好的——在这种情况下所有人都将获胜,每个人都能得到期末加分。

能上这课的人固然不笨,并且大家或许也都清楚这一点。更有意思的是,后来的调查发现,当时的课堂上有很大一部分人以前就知道这个游戏,并以智力题的形式见过上面的分析。但真正敢写“1”的人几乎没有,因为信息是不透明的,你不知道别人能够想到多远,也不知道有没有写 100 的大傻子,也不知道有没有内鬼,等等。

在 The Bottle Imp 的例子中,情况也相同——谁也不知道,有没有傻子来打破上面那个卖不出去的推理链条。更有趣的是,小说 The Bottle Imp 的情节本身还考虑到了另外一些非常机智的转折。可能会出现一些对许愿瓶上了瘾、根本不在乎入地狱的人,他或许不相信有地狱,或许已经犯过不可饶恕的滔天大罪,觉得自己反正都得下地狱。还有这么一种可能:有人发现即使你用 1 分钱买下了这个瓶子,这也不是完全无解——你可以把瓶子卖掉其它国家去。由于汇率的原因,在其它国家里你或许能找到比 1 分钱更低的价格。这样卖瓶子是否合法并不重要,只要有人相信他是合法的就够了。他的存在,或者有人相信有这样的人的存在,或者有人相信有人相信有这样的人存在,都足以打破上面的那个推理链条。

谷歌浏览器的固定标签功能

微博为什么会火?对于我来说,随时随地可以唠唠叨叨的把一些事记录上去,就是最大的一个亮点。

事实证明,每当我有写博客的冲动的时候,都未必会写,当会写的时候,往往忘记了要写什么

谷歌浏览器发展迅速,今天无意中发现,那些Google web store上的坑爹类应用程序(就是其实点开还是要打开网页使用的那种)完全不需要去装他那个,直接在你打开的标签上右键,选择“固定标签页”,然后这东西就缩小成一个应用程序特有的只有一个图标标签的样式,如下图

从左到右,gmail calendar reader 然后是Doit.im 腾讯微博,新浪微博,前3个是https://chrome.google.com/webstore下载的所谓应用程序,后3个,是直接右键点固定标签出来的,每次打开浏览器,都会在同样位置。

盖座漂亮的“楼”–浅谈网页设计中的构图[Taobao UED]

网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们的什么样的形状。同样,网页设计中的构图也足以影响到整个网站给人的感受,虽然比喻并不十分恰当,但就网页其构图而言,些许的改变和简单的创新也许就能起到事半功倍的效果,让网站给人的视觉感受耳目一新。

如何将网页这座楼盖的漂亮?以下就例举一些在网页设计上能起到事半功倍的构图技巧。个人拙见,希望能够抛砖引玉。

【一】坚实的地基-几何图形的力量。

几何图形在页面中往往能起到大梁的作用,也是网页内容最为常用的承载面板。这些图形合理的搭配和有效的穿插,能使页面除了信息传达外,更具层次感和观赏性。

此网站圆角矩形巧妙的结合信息模块穿插在一起,除了营造了网站的主体富有节奏的形状之外,更加强了页面的层次感,不会显得页面枯燥和单调。

圆形和椭圆形的结合搭载了轮播广告和重要信息,使得整个页面既有亮点又不失简洁。

同样是圆角矩形的穿插结合, 色彩填充的图形交集既能展示重要信息又勾勒出整个网站的风格形态。

竖着的大圆角矩形和线条勾勒出整个完整的画面,各种信息镶嵌于各个形状只中,既不显得乱又使其相得益彰。

更多类似的例子:

【二】钢筋上的铆钉—破格而出的素材

素材应用的好,往往能起到画龙点睛的作用,而素材起点缀页面和表达主题之外,还能作为构图中的一种主要元素存在,这些素材通常破格而出作为连接页面的纽带,使页面结构更加的稳固,故称其为“铆钉”。

素材看似随机的摆放,其实是有意的将素材摆放于左上和右下两个对角点,视觉上俗称的暗线,左下角信息内容的图片和右上角的登录窗口组成了另外一条对角暗线,两者并组成了X结构,而四个素材起到到了固定和压轴的作用,稳固而又美观。

飞跃的人越于页面之上,护目镜挂于导航栏之上。这两个素材的使用使整个页面既贴切于主题又生动,而在构图上人连接穿插了1、2两个板块,而护目镜所在的2板块链接了3、4板块,视觉上的感官延续让页面脉络清晰不脱节,切富有节奏感。

页面非常简单,除了图形构筑的基础形,就是几朵起到“铆钉”作用的花儿,花朵破框而出,使得素材有机的融于框内又搭于整个页面之上,让人有种花是由圆洞内长到页面之上的错觉,简单而富有层次。

这个页面的素材和主体框架的结合很巧妙,破框而出的喷溅牛奶和静态的巧克力、杯子的动静结合于页面头部,使得整个页面主次清晰而又连贯。

更多类似的例子:

【三】打造斜塔之美—斜的视觉张力

比萨斜塔之斜是地质沙化下沉还是设计师故意为之,至今还是有人在争论,抛开争议,斜塔的美似乎让许多人都想来到它身边一睹这位倾斜美人之容,凑巧的是,在浩瀚的宇宙中最美丽的星球,也就是地球,也斜着身子对着太阳转着。话题扯的比较远,斜线,或者说是斜着的物体,似乎天生有一种张力。在网页设计中亦是如此,而在这里所表现的为视觉的张力,是种视觉心里上的延伸力而非物理上的。当页面过于平均,画面平平毫无亮点时,打破平均打破通体的平均尤为重要,打破平均的方式有很多,而斜线似乎是网页设计中惯用的一招,屡试不爽。

斜线的张力让整个页面富有动感和延伸性,即可为页面起到修饰的作用,又能做为信息的承载模块,两者有机的融合并不让人觉得倾斜的标题不好识别或者有碍阅读,反之更能让整个页面富有形式感和表现力。

斜线的运用加上素材和圆形的穿插结合,让整个页面具有动感,同时视线又随着斜线的走向带入至素材和标题之上,具有张力的同时又让这些线起到一个很好到视觉导向作用。

以斜线为暗线排版而成的信息组件和右边斜线切割而成的图片形成形态上的互补,又形成节奏上虚实和疏密的对比,使得整个画面既有斜线带来的张力和动感之外,又不乏整体的稳固和均衡。

更多类似的例子:

以上简单的介绍了网页设计中的一个步骤:构图,罗列了一些比较常用而又有效果的方法,除此之外,应该还有很多,希望大家补充,但我相信无论构图也好,色彩搭配也好,亦或是节奏旋律等等。它们总是围绕着一个共同点去进行,那就是使页面在信息顺利传达的前提下变的美观而生动,有了这一大准则,我想设计页面的时候需要的不是一大堆技法和技巧,而是一颗永不停止探索美和创造美的心。

在 Axure RP 中 使用 Master 模块,来处理网站通用

  此文不是Axure RP的介绍,只针对master的功能应用为通用模块来解决一个小问题,适合初学者

  我们在用Axure RP的时候,很容易碰到一个问题,比如网页的头部,设计好后,以后的页面通常都需要这个头部设计,包括链接,一些效果,这时候会出现一个问题,就是如果我对头部进行修改,那么我所有的页面都要修改,这无疑增加很多工作量还很可能会遗漏,这时候,我们需要Master来解决.

  首先,我们要打开模块面板

打开后,在软件的左下功能栏内,会出现一个模块栏

建立一个模块后,这个模块可以和普通页面一样的编辑,想加入这个模块,只需要拖动模块名字,到相应的页,即可

基本上,这就是页头,页尾的和其他通用模块的最佳解决方式(事实上这个功能就是干这个用的,哈哈)

完工,写的简陋点,凑合看.

如何在word中插入visio绘图并自动更新

  我们经常做Word文档的时候需要用到visio的绘图内容,通常会直接选中visio内容然后copy到word文档中,但这样有个问题,copy过来的东西以后只能在word中编辑,这就会导致内容不同步,因为很可能我们的visio不是最终稿,如何实现同步更新呢,下面有简单的办法(其实微软提供了,只是没注意到)

  就一步:你有了一个visio文件,这时候需要在word中引用,那么请点击插入->对象


在弹出的对话框中选择由文件创建,并且选中"链接到文件(k)" 复选框

  这时,在你光标位置,visio 文件就显示出来了,你可以调整大小位置,以后,有两种情况,一种是你visio编辑完了,打开word文件时,会提示是否更新,如下图

点是,就自动更新了

另外一种,是你word文件开着呢,visio开着呢,你编辑完visio文件,word这边,更新下链接就ok了,如下图

挺简单方便的吧

——–完工——–

CSS的图标显示技术

也就是利用CSS Sprites 图片整合技术,将网站所需的icon都放到一张图里面

优点:减小图片下载体积,减少对服务器的请求,从而提高了页面的加载速度

但怎么用才简单方便,就个人经验而言,一般是这样做的:
1,建一个名为icon_map的图,大小为宽高320px,因为一般icon为16×16大小,这样横竖可以放20个,完全够用了。并在ps中用辅助线划分好,直接往里填图标即可
2,格式采用gif,支持透明,因为icon一般可用像素图完成,且适用范围可覆盖所有浏览器,包括IE6的透明
3,书写css样式:

.icon { display:-moz-inline-box; -moz-box-align:center; }
.icon { display:inline-block; width:16px; height:16px; background-image: url(../images/icon_map.gif); vertical-align:middle; }
.icon_1_01 { background-position: 0 0; }
.icon_1_02 { background-position: -16px 0; }
.icon_1_03 { background-position: -32px 0; }
.icon_1_04 { background-position: -48px 0; }
.icon_1_05 { background-position: -64px 0; }
.icon_1_06 { background-position: -80px 0; }
.icon_1_07 { background-position: -96px 0; }
.icon_1_08 { background-position: -112px 0; }
.icon_1_09 { background-position: -128px 0; }
.icon_1_10 { background-position: -144px 0; }
.icon_1_11 { background-position: -160px 0; }
.icon_1_12 { background-position: -176px 0; }
.icon_1_13 { background-position: -192px 0; }
.icon_1_14 { background-position: -208px 0; }
.icon_1_15 { background-position: -224px 0; }
.icon_1_16 { background-position: -240px 0; }
.icon_1_17 { background-position: -256px 0; }
.icon_1_18 { background-position: -272px 0; }
.icon_1_19 { background-position: -288px 0; }
.icon_1_20 { background-position: -304px 0; }

.icon_2_01 { background-position: 0 -16px; }
.icon_2_02 { background-position: -16px -16px; }
.icon_2_03 { background-position: -32px -16px; }
.icon_2_04 { background-position: -48px -16px; }
.icon_2_05 { background-position: -64px -16px; }
.icon_2_06 { background-position: -80px -16px; }
.icon_2_07 { background-position: -96px -16px; }
.icon_2_08 { background-position: -112px -16px; }
.icon_2_09 { background-position: -128px -16px; }
.icon_2_10 { background-position: -144px -16px; }
.icon_2_11 { background-position: -160px -16px; }
.icon_2_12 { background-position: -176px -16px; }
.icon_2_13 { background-position: -192px -16px; }
.icon_2_14 { background-position: -208px -16px; }
.icon_2_15 { background-position: -224px -16px; }
.icon_2_16 { background-position: -240px -16px; }
.icon_2_17 { background-position: -256px -16px; }
.icon_2_18 { background-position: -272px -16px; }
.icon_2_19 { background-position: -288px -16px; }
.icon_2_20 { background-position: -304px -16px; }

这里只写了前2排,后面依次类推,用到时再补充
a,inline-block是方便直接与文字同行,并用-moz-兼容FF2
b,用数字表示横纵的位置,这样要用icon_map中的第几个,可以方便调用:
如要用第1排第5个图标,则css调用为:

<span class=”icon icon_1_05″></span>

第2排第20个则为

<span class=”icon icon_2_20″></span>

当然你还可以用具体的名字,而不用几排几个,毕竟是魔鬼数字,不好辨认
其实不仅仅是图标,其他图片都可以做相应的整合,修改下大小和位置即可

高效工作的信息搜集及管理术

 

图1:信息搜集及整理术循环图

写在前面

几个月前,团队邀我做次内部的分享,主题是如何有效搜索信息。这是因为平时工作中,我经常会分享一些专业学习文档,而这些文档的出现往往很及时,回应一些我们自己项目的困惑,所以大家会好奇我如何及时找得到那么专业且对口的参考资料。

这些资料有些来自网络搜索,有些却是来自我的“个人资料库”,它分门别类,容易检索,所以很轻易就能够翻出来示人。所以后来,这次分享便从“搜索术”,扩大为如何获取、整理各种信息的技能。

这原来我认为是常识的东西,却在简单分享后得到好评。受到鼓励之余,我也明白了并不是所有人都明白有效的信息搜集及整理有多么重要,也并不是所有人,都掌握了行之有效的方法和技巧。故整理成文,做抛砖引玉之用。

一.信息搜集及整理循环图

如上图1所示,我认为“信息搜集及整理术”会包含三个关键阶段:

  • 搜索:“找信息”——用各种搜索渠道快速找到所需的精准信息。
  • 集成:“存信息”——简单来说,就是把你找到的信息,定制成为个人资料库,按照自定义的主题,分类存储在自己很方便访问的地方。
  • 整理:“理信息”——信息单纯集成而不加整理,时间长了就会杂乱不堪,所以才会出现很多人自己的硬盘资料库已经塞满了,每当需要什么资料的时候,还是需要去搜索。定期对所集成的信息进行整理(归类,去重,留精,加可供搜索的标签等等),能够显著提升信息搜索效率。

最初你需要一定的动力去尝试开始做这件事情,而一旦兴趣产生,再加以坚持, 这就已经成为习惯,和你密不可分了。

二.高效搜索术

2.1 建立你的主题关键词

建立自己关注的核心关键词是重要的一步。

如今我们遇到的信息量已经高速爆发,信息的种类和来源多种多样,信息的更新速度日渐加快。喜欢刷微博的同学都清楚,一旦进了微博,你就进入了无数信息和主题词的世界,通过一个消息到另一个消息,看来看去时间就消耗进去了。

如果我们不设立一些主题,很容易陷入信息的汪洋中,而另一个极端则是两耳不闻窗外事,担心信息负载太大而刻意回避信息,导致自己和时代脱节。如果作为一个交互设计师,能够不关注最新的交互界的最新态势吗?

主题关键词有几个好处:

  1. 建立方向提醒:时刻明白对自己真正有价值的是什么,主动保持该类信息的更新;而那些无关紧要的,则可以少看或者不看。
  • 主动获取信息:使用各种订阅、集成工具更有目标,用这些词订阅,让信息主动找你。
  • 减少无聊时间:无所事事比忙碌更让人疲惫,若找不到想干的事,最起码可以搜索下你的主题词,找点好玩的文章或动态。

虽然靠大脑就可以形成自己的关键词,但工具可以帮助你加深记忆,比如用mindmanager等脑图工具做图,贴于自己的书桌或办公桌前:

图2:Heidi的主题关键词

主题词建好之后,并不是一成不变,需要定期结合自己的工作评估及更新。比如我近一年对商务智能(Business intelligence)很感兴趣,也会定期查阅相关的资讯,但是去年此刻,我对此几乎不了解。

2.2 用好你的搜索引擎!

主题关键词让我们知道自己时刻应该关注什么,而接下来我们就要更高效去找这些信息!

搜索引擎是非常重要的信息获取入口,至于我用的技巧真算不上高级,欢迎搜索达人们和我交流下省力更有效的搜索手段。

2.2.1 找准关键词,事半功倍!

很早之前,我偶然看到两张图片。我很喜欢这两个图片,所以我希望看到更多类似的图片。

图3:用何种关键图去检索这两类图片呢?

可是,首先这种图叫什么图呢?

先在脑子里头脑风暴下应该用的关键词,叫什么呢?插图?图表?手绘图?插画?这些关键词搜索出来的结果真让人沮丧。但是,根据搜索结果的提示,一步步更换关键词直至找到靠谱的结果。而最终,当我找到这个词后,就找到宝藏了——

要找图3中左侧类型的图,请尝试用“可视化思考”,或用google搜索“visual thinking”,要找更多图3中右侧类型的图,请尝试用“信息图”,或“infographic”。

图4:可视化思考的检索结果

图5:信息图的检索结果

所以,在搜索中,要不断地更换更贴切的关键词,而不是一直打擦边球。如何找到贴切的关键词呢?从你觉得可行的第一个关键词开始,不要轻言放弃,根据每次搜索结果出来的线索跟踪,不断更换关键词,直至拿到结果。

2.2.2 更换语言,别有洞天

有时更换为英语能够让你获取更精准的结果。所以这也是为什么,我的主题词要中英双语版。既然很多中文的结果是从英文翻译过来的,直接查看源文章显而易见信息遗漏较少。

图6:用英文搜索“可视化思考”得到的结果

以此类推,每多一种语言就打开一扇新的了解世界的窗口。就拿家庭收纳来讲,用中文“收纳”去搜索文章,几乎只是一些零碎的图片和社区网站为了招徕用户拼凑而成的收纳技巧。而用日语“収納”去搜索,看日本的某些网站,我们能够看到很多关于收纳术的经验、文档和教程。有些教程的丰富性不亚于出版的书籍,更好过于我们国内那些拼凑出来的家居整理学了。如http://www.iris-interior.com/mainichi/网站提供的本多先生每日收纳教程:

图7:用日语収納检索到的专业网站

关于收纳学的网站,大家有兴趣可以用日语“収納”搜搜试试,不可以找我要。

2.2.3.更换搜索方式,殊途同归

若网页搜索不能获得所要结果,可以变换搜索类型,比如搜索图片,再通过图片链接到有价值的网站。

我常用的则是文件搜索,与普通网页相比,这些文档通常意味着更好的更系统化的组织,从而让你的信息获取更加有效。

如何用搜索引擎搜索文档呢?

  • 如果你使用google,在检索词前加入inurl:pdf。
  • 如果你使用百度,在检索词前加上filetype:all,如要特定PDF格式则输入:filetype:PDF

如用百度搜商务智能的相关文档:

图8:用百度搜索文档

2.2.4.别忘记了专业网站

专业网站让你免除在大量的垃圾信息里找所需资料的苦恼,他们的信息往往更加聚焦。我经常用到的专业性搜索网站有:

  • slideshare.net——PPT分享网站,很多国外制作优良,内容丰富专业的PPT。我经常在这里搜索关于可视化思考的文档资料。但是很遗憾的是,目前你就需要翻墙才能够看到这个网站了。
  • MBA智库——专注于经管领域的资料库。你可以在这里搜到很多经管领域的各种术语解释,文档等。
  • 维基百科——如果在墙外或者会翻墙的话。很多被国内是敏感词的,在这里能够看到非常翔实的前因后果各种脉络。当然,若非敏感词的话,百度百科也是不错的资源。

 

2.2.5.向书籍里找搜索提示!

一个小提示,没有关键词灵感的时候,还可以从书的目录去获取关键词提示。 除了目录,专业书籍里面隐含很宝贵的可供挖掘的信息。

下面就是一个利用书籍提供的信息不断发掘,进而找到真正所需的信息的案例:

最近我读《Excel图表之道》这本书,在P152页提到的图表类型选择指南的原作者是Andrew Abela。这个人名就是一个很宝贵的关键词!这个关键词可能代表着:数据,数据分析,商务智能,沟通演示等等主题。

所以搜索此人,看到此人的博客是:http://extremepresentation.typepad.com/。这个博客是专业博客,主题是复杂信息的沟通及演示。

而这个博客为一本书做广告,这本书正是出于Andrew Abela, 《Advanced Presentations by Design: Creating Communications that Dirves Action》,此书的中文版在大陆有售,中文翻译为《说服力演说是怎样炼成的—如何设计当场成交的PPT》。

进而又通过博客这本书的网站:http://www.extremepresentation.com/。这个网站有一些相当不错的信息,推荐对于演示有兴趣的同学们看看。比如以下两个图表也来自该网站:

图9:extremepresentation.com的配图

当然,被《Excel图表之道》作者刘万祥老师引用的图表类型选择指南的图英文原版也在这个网站中有大图可以下载。另外,我们的信息挖掘还没有结束哦!注意,他还提供了另外一个在线的工具:www.chartchooser.com,此网站可供数据分析师们根据自己的需求选择不同的图表展现,该网站出自juiceanalytics(http://www.juiceanalytics.com/)。而进入Juiceanalytics网站的白皮书栏目,我找到了《设计人人都爱的信息仪表盘指南》(A Guide to Creating Dashboards People Love to Use) ,这本白皮书恰好能够解答我对于近期工作的一些迷惑。

如果特意去找,反而不容易有所收获,而如果知道自己的主题关键词,你的信息嗅觉就会非常灵敏,在某个契机下,抓住线索不放,往往不经意中探得捷径。

三.便捷的集成

集成是信息的集中归档。搜索引擎固然方便,可是若一些常用的东西,未必每次都需要搜索。而是可以在自己的电脑上建立个人资料库。不管是否有网络,都能够随时查阅。

我会习惯将搜索到有价值的文档、网页、图片存储在自己的电脑里,可是,我们也会发现,这些资料一旦存到硬盘里,却石沉大海。下次若需要,却还是求助于搜索引擎。而另一方面,电脑文件夹却又日渐庞大,要经常删除文档以腾挪出空间。这种方法还有一个弊端,那就是多台电脑使用时,就要借助移动硬盘或U盘,从而一份东西,居然要三处备份。

后来有了Dropbox等应用,能够比较方便多机共享文件,但是容量毕竟有限,却时而遭受屏蔽。后来自然也有国内的一个好的服务,比如360云盘,可以有多达5G的空间,实现云端、多电脑客户端共享文件。大家若有需求,也不妨一试。

这些网盘、云盘之类的服务,解决了多个客户端同步存储的需求。但是我日常工作中,还时少不了以下几个小应用,来作为集成手段的有效补充。他们的特点是:

  1. 调用方便——不用像使用网盘那样需要先存储下来再上传,随时能够调取使用,不用中断当前工作。比如在一件任务进程中,遇到一篇不错的文档,想归档以后阅读。只需要点击一下就可以集成到自己的主题分类里,比如预设好的“待读”文件夹,而继续执行当前任务。
  • 高效检索——能够对所集成的文档加标签,关键词,甚至能够全文检索。
  • 云端、客户端同步

3.1 Evernote便捷集成

作为使用了evernote多年的用户,我对它抱有感恩之情。它已经与我的生活、工作密不可分。如同它的广告所言,它成为我的一部分大脑。不但能够帮助记住很多东西,也能够帮我随时记录很多东西

Evernote提供剪辑工具可以添加到chrome浏览器的应用,从而阅读网页时可以随时调用归档待读资料。

图10:evernote的便捷集成工具

evernote可以添加到outlook插件,帮你在阅读邮件时收藏重要邮件:

那有人会问了,这只是集成一些文档而已,如果是PPT或PDF电子书籍怎么办呢?其实evernote完全可以帮你归档重要的文档呢。

图11:evernote集成文档

因为文档体积往往会比较大,作为evernote的免费用户也许会吃不消。若无意升级,你也可以建立一个“待读”文件夹,将需要后续阅读的文档归类到此文件夹下,也就形成了一项待办任务了,同时你在本地的电脑文件夹里也存储一份。Evernote里的文档则可以阅读一份删除一份,只将有用的信息摘录出来。

Evernote的搜索功能也比较强大,能够进行PDF的全文检索。

图12:evernote的全文检索

Evernote的云端同步功能就更方便了。电脑上剪辑的文档,同步后,手机客户端、ipad客户端都可以即刻

访问到,连U盘的功能也取代掉了。所以要强烈推荐未用的人尝试一下的。

3.2 用花瓣网集成图片

图13:用花瓣网集成图片

用花瓣网(huaban.com)做图片集成,是个人无意发现的技巧,也在此提及一下。

原来我的电脑里必有一个文件夹,叫做图片集,专门放置来自于网络的各种图片,分门别类,有摄影欣

赏,服饰搭配,设计素材,宠物,可视化思考,简笔画,LOGO设计……存在电脑上,也自然会遇到同样的问题,检索困难,体积庞大,同步不易……

有了花瓣网后,也将花瓣网的采集工具加到Chrome浏览器应用里,可以随时采集网页上的各种图片。这些采集工作和Evernote剪辑工具一样,随时调用,不会中断你当前的工作流。

而在花瓣网里,创建自己的画板,以主题命名。就图片而言,个人比较关心的也就是那么几类:

摄影、宠物、室内装修、简笔画、设计、用户体验、商务智能……这有些是关乎工作,有些则是个人生活。

如此,每次采集都可以将图片放到自己的分类里。你可以不常去花瓣网,但是自己的资料库却一天天丰满了。当你哪天想到要找这些主题的参考,打开自己的花瓣网,里面已经采集了那么多素材可供使用,因为平时也不过是点下鼠标,所以真有点坐享其成的感觉。

四.养成定期整理的好习惯!

能够高效获取信息,又能够将信息方便集成,但是若没有定期的整理,难免这些信息时间长了又会趋于杂乱。所以,就如我们要定期打扫收拾家务一样,这是必不可少的重要一步。“整理”一词包含了“检查并调整归类”,“删除不需要的文档”,“添加可便搜索的标签或关键词”等。

平时,电脑文件夹或者Evernote笔记本里,我都会设置一个“临时文件夹”,以便存放一些暂时无法归类的文档或资料,而定期就要着重看一下这些临时文件夹,将里面的文档妥善安置到对应的分类里,以免临时文件夹名不副实,成了一个大杂烩。

4.1 不要让你的evernote爆炸掉

既然evernote相当于你的另一个大脑,不经整理的evernote就是混沌的大脑。

建立了你的主题关键词后,evernote的笔记本也可以建立相应的名称,以便于你归类不同的资料、文档、图片等。Evernote会自动按照笔记本的数字及字母顺序排序,所以在数字前加字母ABC就帮助我形成了两级的排序。同时,字母ABC又可区分3个大的种类。

图14:我的evernote笔记本分类方法

这个文件夹体系,可以让我任意拓展其中一个分类,而不会影响其他。

 

再重申一点:TEM笔记本很重要!

正如本章开篇所言,不管分类再如何完善,都不可避免有时匆忙之中,找不到一个合适的分类而乱存放信息。所以,满足足够的拓展性,建议你设置一个叫Tem(Temporary的简写)的笔记本。这个Tem笔记本 一可以让你迅速存储,二可以形成待办事项——没事可做的时候,最起码你能整理这个文件夹,让里面的文档该读的读该删的删,该归类的就放到对应的笔记本中。

4.2 勤检查你的电脑文件夹

即使有那么多集成整理工具,我们的工作大部分都要依赖自己的电脑笔记本了。所以若电脑文件夹缺乏条理,也会很影响我们的工作效率。

不太善于整理家务的我,却喜欢定期整理自己的电脑。这个习惯大概是从5年前开始吧,当时带领一个小团队,要协调多方的工作,我们很多人的工作都需要放到共享盘里的文件夹里交换维护。所以要建立一套标准化的文件夹体系很重要。当时花了一番精力去做文件夹的规范并监督执行,取得了不错的结果。

图15:复杂的内容协作文件夹体系

当然,这是一个内容管理类的协作很复杂的文件夹了。我们日常的文件夹远比这个简单。

我的电脑的文件夹体系:

图16:Heidi的文件夹体系

文件夹的设立原则:

  1. 每级目录尽量控制在7个文件夹左右,尤其是根目录不宜太多。
  2. 假想中的任何文件都能够找到归属。比如家庭成员突然发过来一些合影照,你应该放到那里。TEM文件夹的作用在于临时,你自然可以将这些文档堆到TEM文件夹里,但是TEM其实相当于临时收容所,不等于固定的住所。我习惯是在E盘增加Personal的文件夹,将私人的文档,文章,图片在这个文件夹里建立相应的分类。
  3. 每个文件夹下都预留一个临时文件夹,以防当新接收到的文件因为不知道如何归类而导致根目录无限扩张。
  4. 序号能够让排序查找更为轻松。为何要在文件夹前加上序号呢?其实就是在浏览文件夹的时候,能够出现优先级的顺序。

拿study文件夹为例:

图17:文件夹序号命名法

4.4 我所理解的桌面

再简单谈一下我所理解的电脑里的“桌面”。我认为“桌面”是一种快捷方式。他的作用在于:

  1. 快捷方式:放我们常用的文档和软件快捷方式,便于你直接找到它们。
  2. 一级的临时文件夹。桌面也是临时文档的收容所。比如别人发过来的文档,你暂时没时间读,也不知道如何归类。如果你接收了放到D盘或者E盘任何一个文件夹里的TEM,都有可能导致你开完会后就忘记了——直到别人提起。所以这种情况下,往往很多人会存放到桌面。我认为这也是很正确的决定。最起码你开机的时候可能会看到它。

但是我们的“桌面”却被滥用了。它被放满了根本不需要的各类快捷方式,被堆满了。就像你家里的茶几,你放了红酒开瓶器——虽然你一个月也不用一次,但是它天天在桌面上。你老婆放了一本同学录,虽然她只是2个月前用过。某日亲戚给你送了一双小孩子的鞋,你临时放到茶几上,后来一直没有整理。时间长了,你真正所需的快捷方式和有价值的临时存放就没有任何意义。

我建议的桌面应该是这样的:

1.背景设置为让你身心愉悦的照片,比如你和家人的合影。

2.存放不超过10个常用工具的快捷方式。

3.建立TEM文件夹——不然你的桌面可能也会不出一个月就膨胀了。

其实,电脑的任务栏也是非常重要的快捷方式领地,而且不需要回到桌面随调随用——我最常用的软件一

般会放到这里,比如截图、取色、mindmanager等等。

结语

信息的搜集再多,信息的整理再有条理,若不学以致用,也顶多是建立了一个丰富的个人知识库罢了。

所以最重要的是真正用好这些信息,结合自己的工作、生活,勤思考,多实践,消化这些信息为自己所用,然后沉淀出自己的知识来。

除了在工作中学以致用外,写专业博客也是很好的转化信息的手段,“教胜于学”,写博客为示人,求指点,求交流,必然会照顾行文章法逻辑,用体系串联起所读,所做,所感,所思,所得。为照顾逻辑严密,也少不得多加思考,多加质疑,所以每次完成一篇专业博客,也如同自己好好上了一课,也消化了多种信息到自己的知识体系内,这种转化,比单纯集成起来定期阅读有效多了。