其他其他

设计规范(specs)在作品集的重要性

2020-05-268 MIN READ原载于微信公众号 ↗

设计规范(specs)是解决问题的指导方针,用于实现设计。想象一个建筑师为施工队提供建筑蓝图。许多设计师认为很多设计作品例如眼镜是没有头脑的僵尸作品。他们甚至可能会雇佣一个更初级的设计师来为他们做这件事,这样他们就可以继续进行“真正的”设计工作。

然而,花时间和精力来制定好的规格是项目成功的基础。

1 为什么好的视觉规范很重要?

正确传达设计意图

如果没有正确地传达你的设计,那么构建的内容可能与您的预期有很大的不同。一个伟大的设计,如果沟通不畅,也很容易就会变成一个笨拙而令人沮丧的用户体验。

帮助发现设计中的漏洞

仔细检查你的设计将帮助你发现错误和边缘情况,否则你就会遗漏你设计中的错误。

为每个人节省时间

有了好的规范,开发团队就会有更少的未知数、更少的bug和更少的问题,因为您的规范将回答您的问题。

总的来说,优秀的规格意味着设计可以更快地实现,并达到更高的质量。这对团队、业务以及最终用户都有好处!

2创建规范就是设计

创建更好的规范的一个好方法是像处理其他设计任务一样处理它。当我们设计时,我们需要研究我们的用户。

我们发现他们的目标,他们的痛点和他们的工作流程。我们制定规格的方法应该没有什么不同-我们正在为用户创造一个产品,所以应该设计最适合他们需求的产品。

“一个开发者同理心地图-因为开发者是人的工具!”

与开发人员交谈——了解他们的流程是什么样子的,他们使用什么框架,什么可以让他们的生活更轻松,什么可以让他们疯狂。

当你开始理解你的团队的思维模式和工作流程,你就可以开始将你的规格与他们保持一致。

3从一个风格指南开始

风格指南:文件的颜色,文本风格和其他基本元素在您的设计中的体现。这不仅有助于确保设计的一致性,而且有助于加速开发和未来的规范工作

现在,不必写出每个元素的样式,你可以在样式指南中引用它们。

组件库

随着设计的进展,可以扩展样式指南,以包含更复杂的UI组件。

这里可以包括按钮、表单元素和模式。您发现自己在设计中多次重用的任何东西都应该在这里定义并在外部引用。现在,不必每次都指定一个组件的样式和行为,你可以只做一次,然后再引用它。

为什么这些有用?

设计工作的样式指南和组件库的优点已经有大量文档说明。

但是你知道吗?对于开发者来说,这也是一个梦想成真的时刻。

良好的发展的一个基本原则是D.R.Y-不要重蹈自己的覆辙。原则指出,

每一项知识都必须在一个系统中有一个单一的、明确的、权威的表述。

这意味着,与其在多个地方重复代码,还不如编写一次代码并引用它。听起来是不是很熟悉?这正是我们在创建样式指南和组件库时使用的思维方式。通过在规范中反映这个工作流,您可以更有效地将设计转换为干代码——开发人员会喜欢您的设计的。

4视觉规范

视觉规格文件的所有风格和间隔上的设计,当他们被翻译成代码能确保你的美丽的设计在现实中看起来很好。

手动VS自动规格

最近,出现了一系列工具,有望实现可视化规范的完全自动化。Zeplin、Invision Inspect、谷歌Gallery等工具允许您上传设计文件并与开发人员共享,开发人员可以检查和提取每个元素的样式。

就像其他形式的自动化一样,这种方法也有优点和缺点。虽然它们是一种节省时间的好方法,但它们只捕获屏幕的静态版本。

您很可能仍然需要做一些注释来传达交互状态和响应行为。这就是为什么我首选的创建可视规范的方法是一种混合方法——使用自动化工具作为备份来传达简单的样式,但是添加您自己的注释来演示行为并指出更重要的可视元素。

5   视觉规格:顶级提示

用户访谈

当创建你的视觉规格时,不要试图一次性显示所有关于屏幕的信息。很有可能它会完全压倒一切,难以阅读。

作为设计师,我们从来不会让我们的用户面对一个充斥着杂乱无章信息的屏幕,那么我们为什么要对开发人员这么做呢?

相反,应该将规范分解为多个部分。例如,你可以从观察屏幕的外部区域开始:

然后再看看不同的组件是如何在屏幕上显示的:

如果一个组件特别复杂,可以将规格分解成几个部分,例如:

这将使规范更易于理解,并且在实现中出现错误的可能性更小。总是问自己:“这篇文章清晰易懂吗?”如果不是,你可能需要简化!

6行为规范

行为规范是你定义你的设计如何实际工作的规则。

有时我们认为一张简单的图片就足以传达行为,但事实并非如此。

开发人员不会读心术,我们永远不应该假设用户的思维过程会读心术我们自己的相匹配。明确地定义你的行为规则是确保你的设计确实像你希望的那样,这里有一些方法可以确保你的行为规范被阅读它们的人理解。

设置文章

想象一下,拿起一本书,读到一半时,试着去理解里面的内容,没有人喜欢在不理解更大的背景的情况下,就一头扎进细节。

在过于具体之前,交流设计的背景和周围环境是很重要的。以特性概述开始您的规范文档。这可能包括用户需求、站点地图、用户流——任何在解释这项工作的总体目标时有用的东西。

如果这些资源存在,您还可以链接到演练文档或原型。当开发人员了解设计的背景时,他们可以做出更明智的决定,并认识到为什么要做出某些选择。

展示&讲述

结合行为的描述和它看起来会如何的例子。仅仅通过图片或图像来传达一个想法是非常困难的,但是它们结合在一起几乎可以传达任何东西。我们可以使用简单、简明的语言来举一些难以解释的例子。问问你自己,如果你不是那个设计它的人,你是否理解图片所描述的行为。

表&图

你不需要坚持使用带注释的高保真模型来传达你的行为。

有时使用简单的表格或图表可能是一种更好的交流方式,特别是当涉及复杂的逻辑或繁杂的步骤时。将传统的图与屏幕的线框版本相结合,可以帮助将抽象的概念和流程链接到实际事物的外观。

7组织

所以你已经写好了你的视觉和行为规范。但是,如果您只是向开发人员抛出一个巨大的文档,那么他们几乎不可能阅读它或找到他们要找的东西。

这又回到了理解使用上下文的问题上——人们如何以及为什么要阅读本文?用户的工作流程是什么?

大多数开发团队将遵循某种形式的敏捷过程。它们通常会将功能分解为单个的故事,小到一个开发人员可以在几天到两周内完成。

以类似的方式分解你的规格可以帮助确保人们只获得他们需要的信息,而舍弃掉所有不需要的额外的东西。

试着想象一下为了构建这个特性可能会写什么样的故事,然后分解你的规范来覆盖这个特性。这可能需要一些时间来适应您的特定团队分解特性的方式。

我在Figma上组装了我的眼镜,和上面的布局类似。每个框架/画板描述一个故事大小的功能切片。

我可以直接从Jira中相应的故事链接到这个框架。很明显,规范了哪些部分与每个故事相关,开发人员也可以在其他框架中看到围绕这个故事的上下文。

迭代&改善

有时可能需要多次迭代才能完善一个规范。这看起来可能是在浪费时间,但是我们从来没有想过要向用户推出我们的第一个设计。

8   如何创建完美的规范?

好的规格的关键也是任何好的设计的关键:

理解和共鸣。

了解开发工作流程、原则和心态。

对你的最终用户抱有共情心:你能从他们的角度理解这一点吗?

原文:查看链接 ↗

作者:Scott Logic

译者:益生菌菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

我们

服务.体验.交互设计传道者

「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办,致力于创造卓越的设计知识学习课堂,专注交互设计、用户体验设计、服务设计领域的专业知识教育。

教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校,以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。

清华大学有训曰:行胜于言。「一只朝菌」谨承母校百年教诲,时刻铭记师者之责,为好学者传道授业,为有志者掌灯引行。

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询