18/03/22

如何“设计”设计文档

让设计文档更清晰、更具结构性和说服力的八个技巧。

设计师通常通过各种文档——报告、简述、图例、指南——与同事和客户沟通设计成果。不仅仅是将所有的设计数据集中在一起,展示的方式和内容同样重要。

1 添加简介

举个例子,你已经为客户的应用做了专业的启发式评估,指出了几百个可用性问题。最后,你做了个的一百页的报告,包含各种截图和说明。这个工作大概能花去你一两周。

现在,想象有个人——和设计师完全不搭边的人——准备浏览你的报告。我敢肯定,这个人肯定是一脸懵逼。

花了两个周的时间来给客户的产品做设计文档,却被扔进“稍后阅读”文件夹。很明显,这不是你期望的结果。现在我们来告诉你一个秘诀,只需要给这篇庞大的文档加两页东西,你的听众不用看那么多也能很好地理解。

看到上面的图片了吗?第二页和第三页给出了关键的问题和需要修改的地方。剩下的部分与其说是必须阅读的信息,不如说是关键问题的支撑。就算没人去看剩下的截图和说明,你的目标也能顺利达成,因为设计的核心是去催动改变,而不是让人们去阅读所有的内容。

就算10页的报告,也有足够的理由添加简介。想想你的读者,他可能非常忙,只有五分钟的空余时间,只要他花费一点点时间阅读了简介,你的工作就没有白费。没有人愿意为了理解文档,而去阅读大段的文字和图片。在前几页放上简介,是个不错的办法。

这个方法来源于新闻学中的“倒三角法则”,即将报告内容逐级地展现出来。设计与新闻一样都是应用性、结果导向性的学科领域,所以倒三角法则对于设计文档同样是非常有用的。

想象一下这种场景:你正在设计一个包含各种各样的组建的系统,其中包括一个输入框。输入框的设计指南里包括一堆原型、说明、交互规则、要求和功能。

我们这些设计师习惯戴上“设计眼镜”,世界就像是由完美的像素和美妙的曲线构成。直接把图片、动效、字体和颜色扔进去的办法,其实不如先告诉读者,这是个什么东西,在什么时候使用它。我们需要有个先后顺序:先让你的读者明白这个玩意儿的概念,再给他们阐述细节。

如果你的文档是基于上一项团队活动,最好是先用简短的几句话介绍一下。比如,经过设计工作坊,你准备了一份顾客旅程图——以网格的形式组织来描述用户的使用步骤、行为、问题和机会。在下面这张图片里你可以看到“数据呈现流程”,但是并没有清晰说明这个流程是和什么有关的、从何而来的以及为什么我们需要知道它。

所以我们添加了背景信息。这将帮助听众理解你想要表达的,而不是去争论那些已经确定了的事。这个技巧非常适用于设计者给听众们呈现设计简述和发现性的工作报告。

还有一件事。最好通过屏幕来呈现设计报告。面对面地呈现材料,可以更好地传达,因为听众们更喜欢倾听讲述者的故事。当然,听众们是否会打瞌睡,取决于演讲者的演讲水平。

总结

  • 如果你不熟悉你的读者,最好把他们看作是超级大忙人,脑袋里被一大堆事情占据。
  • 超过10页的文档,一定要用简介。
  • 不管你要呈现的信息有多少,请准备一份一分钟就可以读完的简介。

2 用视觉化的方式展现数据

将设计方案交给一个致力于控制风险、预算和团队能力的管理者,用视觉化的信息替代数字和算式是非常重要的。如果你想要呈现一些差异性的东西,但却不能通过长度、频率、时间等元素来表达,就像下面这张人物角色图,它到底能给人留下多少印象呢?

一个人不得不阅读大段的文字去寻找一些数据的差异性,有没有更好的方式呢?

我加上了四个量度去表示这种人物角色类型的关键指标。你只需要十几秒就能知道Geralt是一个具有逻辑性的、内向顺从的、更喜欢玩手机的人。我们无法做到量化感觉和性情,但是可以呈现人物的倾向性。下面比较一下两种文档类型,你觉得哪一种更好?

人物角色文档并不是唯一一种你可以使用量表或者其他数据可视化元素的东西。下面是一张顾客旅程图,用以描述宾馆预订流程。每一步都定义了三个与用户的感觉相关的参数。你能很快辨别出哪一步的场景是最糟糕的么?

我个人通常会先标记出“低”和“高”,然后看它们集中在哪里。大概要花费几分钟。但是这种最简单的量表就可以带来巨大的改变。

每一个参数有六个等级:很差、差、中、正常、好、非常好。每一个等级用对应的黑条表示。比如,“很差”是“非常好”长度的六分之一。除此之外,还有很多方式可以呈现同样的效果,比如使用表情或者颜色。

正如你所看到的,可用性参数可以用来表示一些估算、性格特征来使文档更丰富,也在人物角色描述、用户测试报告、顾客旅程图等各种设计文档中被广泛使用。

柱形图、星星评价图、10量度、笑脸图是呈现差异性最简单有效的办法。由此,读者得到更多的信息,这些信息减轻了选择的难度,呈现了用户的情感或态度,以及证明了一些想法。

总结

  • 展示相关的、非数字性的信息,可以给你的听众和读者带来更多的线索和有价值的细节。
  • 使用“条”、“星”、“笑脸”来呈现差异化的数据。

3 确定文档的读者

为什么开发者们、客户讨厌设计指南和说明?为什么专业测试人员从来不看设计文件?因为不仅需要像Alan Cooper一样制作终端用户的人物角色,为客户和同事制作人物角色也是关键的一部分。最重要的是需要关注不同类型的读者:他们有的关心完美的像素,也有的更关心流程、任务、具体说明、结构、逻辑以及商业价值。


不论文档是为谁制作,我们都应该秉持平时在设计工作中的原则——同理心、用户为中心、可用性。这些原则决定了文档的结构、言语的复杂性以及细节的多少。下图比较中可以看到设计师和开发者对内容理解方式的不同。

如果你要做一版设计系统,你需要把不同的用户考虑在内并满足他们的需求。通常这意味着要用简单的、具体的文本以及扁平化的结构。

例如,一个案例研究页面在不同的读者看来是完全不同的。你想想,下面这个结构和内容更适合哪一种人看呢?

面对商业型读者,年轻的设计工作室通常这样呈现他们的设计工作:线框、原型。相反,对于商业型读者而言,增加销量、打败竞争对手、进入新市场等关键词更能吸引他们的注意力。如下图。

以读者为中心的方法带来的另一项好处,是可以帮助你的团队认识到设计及其原则的重要性。还记得文章开头那种图么?同样的工作却可能得到完全相反的结果。由此设计更好地向各个层级的人传达。

在文档后面加一些废话,可以提升人们对于设计的理解。

总结

  • 制作文档读者的人物角色。
  • 如果你的文档是向客户推销某种设计,那么需要确保他们可以同样向他们的老板清晰地展示这份文档。

4 破窗效应

你可能听说个这个名词,指产生一个小的错误可能会导致更多的错误:一栋房子如果破了一扇窗,很快就会被很多涂鸦、狗屎、垃圾、小偷占据。

虽然这个理论来自于犯罪学,也同样适用于设计。如果你在文档中容忍了模糊不清、前后矛盾的东西,就会产生更多的错误。下面这张图里是一些典型的例子。

会发生什么呢?你的想法可能会被误解甚至直接跳过。但是最严重的后果是浪费其他人的时间去做一些错误的事。可能最严重的事情是程序员略过那些模糊不清或者冗长的说明,直接根据所看到的图来开发,然后根据这些代码不断迭代,最后的产品会与团队与用户的期许相差甚远。

就算你在很早的阶段要和别人分享这个文档草稿,也应该是看起来清晰无误的。这样别人只能根据你所标注的来进行开发,至少团队成员也能理解功能的设计需求。

另一种“破窗效应”是指前后矛盾。如果你修改或者删除掉一些东西,必须确认在文档的其他地方也相应地修改或者删除。

否则,去开发一些已经修改或者删掉的功能,会浪费大量的精力,招致不满。

前后矛盾是视觉设计输出物(比如原型、风格、指南、线框图)中最严重的错误,但是在用户体验研究文档中也常常发生。

总结

  • 人们发现别人的错误的时候,潜意识会去更正自己类似的错误以防止别人注意到。
  • 更改了一处地方,要确认其他地方也更新了。
  • 清晰明确地标识出功能的更改处。

5 文字VS像素

优雅的字体常常会让我们忽略掉内容本身。设计师常常同一些更关注文字说明的人一起工作,更好的说明可以帮助设计师避免一些愚蠢的问题。

语言

你们的设计团队通常如何称呼不同的设计活动?设计模式,界面构件?你们团队统一了这些典型的称呼了吗?“图解”或者“图表”,“输入框”或者“输入区”?你们需要选择一种大家最常用的称呼作为标准,如果大家没有统一的意见,那就确定一种确定的称呼。

简洁

以你的读者能够读懂知道怎么去做为标准。避免“这是一个网页页面,这里需要……”、“在这个分类页,你可以看到标题栏、底栏、五个产品卡片……”这样的解释。如果一个单词或词组经常重复,那就为它设立一个单独的分类。

下面这张图中,我高亮标示了所有含糊的、重复的、不需要单独说明的文字。顺便说一句,右边这一栏虽然来源于左边栏的精简,还可以往里面添加更多有用的信息。

列表

如果有一些联系紧密,描述同一个元素、流程或者动作的文字,不如将它们综合成一项列表。列表这种排列整齐的方式,可以帮助更好地寻找有用的信息。

你可以感受一下,如果是大段大段的文字,就像左边这一栏,要在里面寻找有用的东西是件多么困难的事情;右边这一栏就更富有逻辑。我高亮标示了所有的关键词。

示意图

如果你的文字描述里面包含许多“如果”,你可以考虑下流程图。当然,设计师可以通过带箭头的原型展示这些东西,但是这样太花费时间。从下图可以看到,尽管文字描述在许多商业分析或者项目管理中被广泛运用,但它并不是最好的展示方式。

我建议使用包含各种条件和事件的逻辑示意图。从下图可以看出,示意图可以帮助确定更好的情境和潜在的错误。

总结

  • 统一的称呼很重要。
  • 文字说明的简洁与排版的简洁同样重要——去掉多余的文字,添加有用的信息。
  • 尽可能使用列表或者示意图来组织信息。

6 “错误!文件不存在”

创建一个文档是有原因的。你有时会遇到一些人,有的用着老掉牙的、只能包含1MB附件的邮件客户端;有的电脑上缺失了很多程序和字体;有的团队甚至没有一个共用的合作工具。

我想设计师可以使用各种基础工具,最好能够使用一些帮助设计的团队工具。如今最有用的工具要数云存储(Dropbox、Google Drive)和网页应用(Invision、Trello、Figma、Google Docs、Dropbox Paper、Confluence)这些网络工具了。

但是,储存在电脑上也有一些优点,比如,电脑上的文件让人觉得更文档更安全更稳定。电脑上一些独立的格式比如PDF可以很好地呈现设计,并且不会受到网络工具出错、关闭等的影响。

如果只能使用PDF一类的工具,最好要减小文件的大小:去掉复杂的图层、过多的效果、各种裁剪和未压缩的图片。

总结

  • 如果你不确定文档会交给谁看,那就将他们视作什么都不太懂的非技术人员。
  • 长远的项目,特别是很多设计人员组成的团队,一定要使用基于云储存的文档。
  • 呈现最终的工作,可以使用PDF一类独立的单机文件。

7 确定文档的设计风格

设计师推销他们的设计总喜欢标新立异,但这却并不一定是一个好策略。一份华丽丽的设计文档可能会吓跑那些怀揣着几百万美元、害怕风险的合作伙伴们。因为他们可能会认为你的方案太具颠覆性,或者根本没有理解他们的商业行为。对这些人,我建议你采用一个特定的展示技巧:观察用户或产品品牌的风格,将你的文档弄成和它们一样的风格。这样他们会觉得你是设身处地为他们着想。下面这个图以EPAM为例,我曾经在这工作过。

遵循你的客户的公司或者设计团队的风格,可以让文档看起来更自然。除非你是为了重新设计品牌形象。举个例子,我曾经为Adidas设计某种东西,我会采用下图这种风格来拍版我的文档。

如果你要为梅赛德斯奔驰设计什么,可以用下面这种。

我用线框图代替了图片。你可以放置与主题相关任何东西,但排版和颜色起着决定性的作用。通常不被允许使用品牌字体、LOGO,但是你可以使用类似的字体或颜色。

总结

  • 和保守的公司客户合作或者进行大项目时,将他们的风格融入设计文档中,可以让文档看起来更自然、更具说服力。
  • 不要直接复制客户的品牌,看起来类似就足够了。

8 有灵魂的文档

好的设计文档告诉我们怎么做,却没有带来启发和乐趣。缺少了启发和乐趣,完美的文档也会变得残缺。有许多方式可以让听众对一些东西感同身受,下面是一些我觉得非常棒的方式:

玩笑

你的团队会不会开怀大笑?有什么梗只有你们的项目团队能get到?可以在文档的某些地方埋藏彩蛋。当然,玩笑必须要适当。下面是我的设计文档中的一个例子。还没有完成的地方,只加个“线框图”标题占位,其他人看见估计会觉得特别无奈。

但是我加上一些有趣的东西在下面,大家看到就会忍俊不禁了。我的团队先是笑了,然后他们的注意力转移到这个东西上去了——当时Travolta meme刚出现,大家都乐于调侃。

主题的细节

有没有什么符号、吉祥物之类的东西与项目的一个主题有重大关联?为什么不将它应用到这个设计文档或者报告里去呢?下面我选择了一个中性的界面加了点有趣的东西,对项目或者产品没有什么影响。

下面这张图呢?你能猜出这个项目的主题是什么吗?

是同宠物、宠物旅馆有关的东西对吧?这就是一种简要的方法————在这个例子里我用了骨头形的条状图、“喵”声——可以让读者,特别是顾客觉得有趣又生动。

讲故事

同理心是设计师的核心技能,与设计师合作的其他专业人员相对缺乏同理心。所以设计师常常要帮助其他的专业人员对用户产生同理心。比较下面两种用户描述。

于我而言,左边部分难以理解。它只是关注正儿八经的参数,而不是某个真实的人的问题。右边部分更贴近真实的人的生活。你可以想象到这个真实的人,你可以把自己想象做这么一个人,从他的视角去观察和感受事物。

团队的图片

一个很有效果的技巧是将团队活动的图片——工作坊、用户测试、头脑风暴等——放到文档或报告中。这表明了设计方案是我们所有人共同努力、分析各方面的问题的结果。有时候人们也需要知道这个设计方案是怎么来的。

想象一下:今天你组织一个工作坊,给正在在颜色各异的便利贴上写字的团队成员们拍照,明天你在报告里展示这些照片。根绝我的经验而言,每次人们都非常骄傲他们为项目所做的贡献。照片并不是万能的,但是它有助于我们的文档被大家所接受。

总结

  • 通过讲故事的方法可以让读者能够对用户的行为以及动机感同身受。
  • 将设计团队人员在设计工作坊中或者做头脑风暴的照片放到设计文档中。

原文:Designing Better Design Documentation – Muzli -Design Inspiration
作者:Slava Shestopalov – Muzli -Design Inspiration

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :