发布时间：2023-2-22 分类： 行业资讯
如何更好，更清晰地呈现设计文档？这篇文章供你解读。
设计师经常使用各种文件——报告，摘要，地图，指南——将工作结果传达给团队成员和客户。但设计文档不仅仅是收集和存储简单设计过程的内容。如何呈现文档与文档本身的内容同样重要。
1.添加摘要
例如，您对客户的产品进行了深入的启发式评估，并指出了数百个可用性问题。然后你有一个100页的报告和描述。完成这项工作可能需要一到两周的时间。
现在想象一个人第一次浏览你的报告，特别是如果这个人不是设计师。可以确定该人从上面的图片中理解的内容应该与下面的图片类似。
您花了两周时间帮助客户记录产品中的问题，但您的报告一直位于他稍后阅读的文件夹中“阅读后”。从未打开过。显然，这不是你想要的，不是吗？现在，让我们在此报告中添加两张幻灯片，阅读起来更方便，更能掌握关键点。
看看我们的两张新幻灯片，它们定义了报告中涉及的关键问题和待办事项。剩下的幻灯片补充了两张幻灯片。即使没有人会详细阅读你的后续内容，你的写作目的也基本相同。由于此报告的性质已发生变化，因此目标不再是让人们阅读整个幻灯片。
对于超过10页的文档，您必须具有开头摘要的摘要。想象一下，你的收件人非常忙，只有五分钟，如果他的只读摘要也能掌握你报告的核心，那么你的稿件无疑是一个胜利。没有人愿意将文件中的分离文本和图像拼凑在一起以获得关键内容，因此将摘要放在标题页或标题栏上的效果最佳。
这来自新闻业领域的“倒金字塔规则”，把最重要的新闻事实放在首位。新闻和设计是功利主义和结果导向的，这就是倒金字塔规则对于设计文件非常有用的原因。
所以，想象一下：你在一个包含许多不同组件的设计系统中工作，包括无数的文本框，每个文本框都有一堆模型，辅助内容，交互规则，规范和功能。
我们的设计师习惯于以“设计”的视角看世界，并希望通过像素级完美呈现一切，而不是以突然的方式呈现的图像，动画，字体或颜色。每个元素的外观必须清晰。表达其含义和用途。在设计文档的表达中，我喜欢让阅读文档的人一步一步地进入报表主题，先掌握核心，然后了解更多相关细节。
如果您的文档基于团队以前的工作，那么最好先简要解释一下。例如，在研讨会之后，您准备了一份客户行为路径图——描述了用户在框架中的行为步骤，活动，问题和机会。在下图中，您可以看到“数据呈现过程”，但不清楚过程是什么以及从何而来，为什么您需要知道此过程。
这次我们需要添加一些背景信息。它将帮助阅读报告的人快速掌握您的前期工作，而不是争论已经讨论过的内容。
另一件事是这些内容的呈现最好以幻灯片演示的形式呈现。面对面的演示更能够展示“总结”的重要性和沟通，因为观众往往更倾向于遵循演讲者的叙述背景。当然，说话者的表情不能太沉闷，否则每个人都会很快入睡。
[概要]
如果您不熟悉文档的读者，请将其视为有价值且非常忙碌的人;
超过10页的设计文档，从摘要开始;
无论信息多么重要，一个好的总结不应超过一分钟。
2.显示关键数据
此方法有助于显示可测量的信息，而无需二次计算。特别是在向负责运营，风险预算和团队能力的人员发送设计解决方案时，当您需要显示差异时，数据是一个很好的帮助。
如上图所示，读者需要阅读大量文本才能找到差异，是否有更简单的解决方案？我们来看看下面的图片。
我添加了四个图表来表示此类用户的关键参数。 Geralt只需几秒钟就能成为一个内向且符合逻辑，符合移动设备的追随者。我们无法衡量用户的气质和感觉，但我们可以表现出倾向和强度。现在看看这两个表达式。
用户文档不是可以使用图表或其他数据可视化元素的唯一文档类型。以下是描述酒店预订流程的客户行为路线图。在每个步骤中，定义用户感知的三个参数。你能快点找出它不合适的地方吗？
首先，我们需要看到所有的“低度”。和“密钥”标签，然后看看它们集中在哪里。大约需要一分钟左右。但最简单的条形图可以改变这一点。
每个参数有六个级别：正常，低，中，正常，高和非常高。它们中的每一个由相应长度的条带表示，例如，“普通”比“非常高”短六倍。当然，这不是显示信息的唯一方式，表情符号或颜色编码也可以达到效果。
如您所见，可用性参数是一个很好的工具，可用于丰富您的文档。它广泛用于用户肖像描述，用户测试报告和用户行为路径，以及许多其他设计文档。
条形图，星级，10点量表和笑脸是最直接可识别的方式，表明非数字可以被量化。阅读报告者可以通过这些获得更多信息，减少选择难度，并直观地展示情感或态度。
[概要]
显示相关的非数字信息，为报告读者提供额外的线索和有价值的详细信息;
善于使用条形图，星星和微笑来显示相关数据。
3，希望读者思考
Alan Cooper（注释：“VB的父亲”是交互设计之父“，不仅为最终用户，而且是向客户展示设计并向团队成员提供信息的关键人物。文档阅读器的重点是最多的重要的：完美的像素，任务流，规范，结构框架或商业价值。
文档阅读器是否具有与设计者相同的工作原理——同理心，用户中心主义和可用性原则非常重要。这与文档的结构处理，语言解释的复杂性以及内容细化的级别有关。下面是设计人员和开发人员使用的词汇和内容比较的一个小例子。
如果您正在设计系统空间，您应该考虑多个相关角色的工作并满足他们的需求。在通常意义上，这意味着您希望尽可能使用简单的语言，从一般到特殊。
例如，您定位的受众是不同的，并且演示文稿中显示的研究内容可能会有很大差异。
上图是一个设计演示，由一个试图吸引目标客户的年轻设计工作室展示，但他们专注于通过边界地图，原型和模型图来展示设计活动和交付的数量。此信息对目标客户没有多大价值。相反，谈论销售增长，如何击败竞争对手以及进入新市场是有效的。
以受众为中心的方法的另一个好处是激励您的团队宣传您的设计和想法。一旦设计得到支持，您不仅可以为直接部门创造利益，还可以从更高级别寻求支持。
这个技巧的目的是降低设计理解的成本。
[概要]
确定设计文档的受众是谁，并为其创建有针对性的可视化;
如果您的设计文档旨在向客户销售设计，请确保他们可以将文档呈现给他们自己的老板并清楚地表达他们的销售想法。
4，“破碎的窗户”效果
你应该听说过这个理论，就是说一个小错误，如果不及时纠正，会导致更多的不良后果......—如果一个窗户被破坏而没有及时修复，那么窗户很快就会被打破，这也会导致狗的注意事项，大量的垃圾甚至小偷进入房间。
虽然这种理论起源于犯罪学，但它同样适用于设计领域。如果您容忍设计文档中的歧义，则更多的不一致或不准确，可能导致的错误越多。以下是我在其他设计师文档中看到的一些典型示例。
那么这种破窗效应究竟带来了什么呢？首先，您的想法可能会被误解甚至被忽视。但这仍然不是最可怕的，最可怕的后果是整个设计没有正确实施，浪费整个团队的努力，或者开发人员用眼睛而不是大脑实现了错误的设计，然后是代码经过多次测试。 ，回归，重新设计，重新开发，并不断循环。最终，整个团队和用户开始讨厌这个产品。
因此，即使在草稿或非常早期阶段，同样重要的是要注意文档的清晰度和组织，并使用适当的标签来补充描述并设置有意义的占位符，以便每个人都能清楚地理解设计并逐步实施直到它最终完成。或者至少核心团队成员应该了解新功能的逻辑。
“破窗户”该效果的另一个方面是信息的不一致性。如果您更改，添加或删除文档中的某些内容，请确保它在文档的相关部分中更新，并且不会与其他内容冲突。
否则，整个团队很可能没有任何线索和毫无意义的内容，只是想知道哪个版本是最新版本。
信息不一致主要体现在视觉设计（原型，风格指南，指导方针，线框设计），并极有可能，它会出现在用户体验研究的文件，如用户的流动路径。
[概要]
每个人都不想犯错误，因为它代表了很多不确定性。隐藏错误的后果往往导致更多无法挽回的情况;
如果您修改了设计文档中的某些内容，请确保更新与其关联的部分;
使用有意义的占位符和标签来显示事物的变化和改进的位置。
5，文字和像素
面对可爱的字体，我们可能会忽略文本本身的内容。设计师经常与不熟悉设计的人合作，因此解释这些技术可以帮助设计师避免“愚蠢”的问题。
习惯名称
您的团队成员对设计中遇到的各种名词有什么约定？ （关于用户活动，设计模式，界面组件等）它们用于说“图标”或“和图形”“图形”。 ;文字框”还是“文字字段”？一旦你弄清楚这一点，你就可以记住并让自己习惯使用它们，以避免因名称不一致而引起的误解。如果您之前没有达成类似的协议，请带头并要求每个人都遵循您的姓名并养成习惯。
避免冗余文本
从您希望读者了解或做的事情开始。避免使用“你在网页上……”或者< ;;在此示例页面中，您可以看到页眉，页脚和五个产品卡…”这种解释性语言。如果多次重复单词或短语，请尝试将其移至层次结构的更高级别并对其进行分类。
下面，我用粉红色突出显示所有含糊不清，重复且不必要的单词。此外，不仅可以清除右列中的内容，还可以为内容升级添加更多有用的信息。
多列条目
如果文档中的许多项目内容彼此相关并描述了各个元素，进程或操作，请尝试将它们显示在列表中。该列表更容易导航并在一秒钟内找到所需的信息，因为列表中所有项目的起点都在同一垂直线上。
如您所见，操作顺序或项目关系在左侧以纯文本形式描述，而右侧列则突出显示它们之间的逻辑。我用粉红色标记了两个关键字。
多用途框图实现过程
如果您有一堆以 if&rdquo开头的界面规则;那你肯定在考虑这个过程。通常，设计师使用原型或流程图来展示这些东西。在下面的示例中，您可以看到文本描述不能很好地表达逻辑和流程，即使它们被需求经理，业务分析师或项目经理广泛使用。
我建议设计人员尽可能使用逻辑图来演示流程问题。在下面的流程图中，可以轻松地按照流程逐步完成操作并实时检查错误。
[概要]
注意并总结团队成员的专业习语;
不仅可以保持文档清洁，还可以专注于处理冗余文本;
尝试以列表和框图的形式组织信息。
6.打开文件时出错
每个文件的含义都应该被阅读和理解，否则就没有必要。您可能会感到震惊的是，仍然有许多公司使用“史前”邮件客户端将附件的大小限制为小于1兆字节;还有各种各样的计算机缺乏这一点。或者这样的程序和字体;团队中间可能会遇到团队成员没有协作办公室软件帐户的情况。
我建议设计人员尽量使用基本工具或构建友好的设计环境。目前最强大的工具是云存储（Dropbox，Google Drive）和Web应用程序（Invision，Trello，Figma，Google Docs，Dropbox Paper，Confluence），因为它们是与硬件无关的工具。
但实际上，旧工具也有其优点，比如旧的文档工具通常提供离线模式，同时也为用户提供了稳定和安心。 PDF等常见的独立格式适用于存档旧的设计文档，与在线资源相关的新工具可能会遇到文档过期或Web服务关闭等问题。
如果没有其他选择，那么准备一个PDF或类似的东西，确保它是轻量级和兼容的——没有复杂的级别，令人眼花缭乱的效果，没有裁剪和未压缩的位图。
[概要]
如果您不确定您的读者是谁，那么长期以来将它们视为非技术性和低性能设备;
对于长期项目，尤其是设计系统和分布式团队，创建云共享存档;
使用单独的文件作为存档来完成工作。
7，演示技巧— —变色龙
提升创造力的设计师总是想要脱颖而出，但往往会适得其反。即使是一个好的演示文稿也可以吓跑数十亿美元的企业客户。他们可能会认为你已经做出了革命性的改变，或者你没有意识到业务的本质。面对这种情况，我建议你在演示中做一个“变色龙”。
所谓的变色龙指的是客户的产品和品牌，并以类似的风格设计您的文档样式。这项技术可以帮助你打破僵局并相互沟通“ldquo;我们是一个团队”以下是我根据公司EPAM的产品特点做的演示。
遵循您所服务的公司的产品风格将使您的文件看起来更自然和亲密。 （当然，有必要排除你正在重新设计或重塑这种情况）。例如，如果我为Adidas设计产品，我会考虑以下幻灯片样式。
如果您正在为梅赛德斯设计产品，您还需要添加一点梅赛德斯风格的元素。
通常不允许使用品牌字体或徽标，但您可以通过颜色和排版为客户创建整体印象。
[概要]
回应保守的企业客户或大型项目，在展示中融入他们的风格，使他们看起来更自然和亲密;
不要复制客户的品牌，设计符合认知印象。
8，文件的灵魂
一份好的文件，但内容清晰但没有灵感，这可能是本文件中最悲伤的部分。
有趣
什么能让你和你的团队前进和后退？只有项目参与者才能获得的微笑是什么？然后挑出这些有趣的东西，把它们放在正确的地方做鸡蛋。以下示例来自我的一个设计文档。我无法想象我当时会把这么无聊的东西放进去。 “线图”，在那里，人们会看到他们会感到失望。
但是，当我添加一些有趣且有用的东西时，整个框图的效果是不同的。首先，我的同事笑了。其次，它们作为有意义和有目的的内容存在。 （当时，Travolta meme刚刚出现，每个人都认为非常有趣。）
与细节沟通主题
是否有符号，吉祥物或与项目主题有强烈积极联系的东西？如果是这样，请将其添加到演示文稿中。下面是我选择的一个相当中立的页面，没有指定项目或产品的特征。
下面的幻灯片是什么？你能猜出这个项目的主题是什么吗？
有一些与宠物有关的事情，那么这可能是关于宠物美容沙龙或宠物酒店的项目，对吧？这只是一个简单的例子，但小骨头和“喵”;这些细节可以表现出很多同理心的东西，以及设计师和读者之间的联系，尤其是从顾客的角度出发。
人性化描述
移情是设计师需要的一项重要技能。这就是为什么设计师经常需要帮助他们的团队成员形成同理心并思考用户的想法。比较下面的两个用户肖像描述。
对我来说，左边部分非常沉闷，难以形成比喻图像。它只关注参数，而不是一个人。用户肖像的正确描述应该是人性化的，更贴近生活。你甚至可以想象这个人的样子和穿什么样的衣服。
团队合影
一个更有影响力的技巧是使用团队活动照片——报告或演示过程中的研讨会，用户测试，头脑风暴会议等。这表明团队中的每个人都做出了贡献，并且经过仔细思考和多讨论后提出的解决方案是一个结论。此外，人们通常想知道这个结论和设计是如何产生的。
经验表明，每当我拍摄研讨会的照片并用彩色粘滞便笺制作时，他们会在第二天感到高兴，因为他们会为他们对项目的贡献感到自豪。照片不是魔杖，但它们确实使您的文档更具吸引力。
[概要]
在描述项目的过程中，使用一些有趣的，与主题相关的细节来使文档更具可读性;
将团队成员并排或将照片集成到文档中会使文档更具吸引力。
作者：Slava Shestopalov
译者：马克斯小姐
原文链接：https://medium.muz.li/design-docs-6bb34589f7a9
本文是大家的产品经理翻译团队@Max Miss翻译发布，未经本代购源码网站许可，禁止转载。
该地图来自unsplash，基于CC0协议
