您如何创建产品设计文档?

平面设计 工作流程 前端开发
2022-02-07 20:57:57

我在一家公司担任初级 UX/UI 设计师。我负责(重新)设计应用程序,并在公司流程中设置一些设计。

我想为开发人员创建某种“设计文档”,但我不知道是否已经为此创建了一些工具。

我的目标是集中设计,解释如何以及何时使用它们,以及一段代码来展示如何创建组件(css 类、HTML 结构)。

有那个工具吗?

谢谢!

2个回答

听起来您需要的是样式指南。

我以前做过一些(公平的警告,要正确地制作它们需要大量的工作)。

就个人而言,我使用 InDesign 来整理这样的文档。它为您组织内容的方式提供了很大的自由。

我还看到很多品牌在网上发布他们的产品。如果您有大量进出公司的人可能需要访问它,那么这是有道理的。

至于创建风格指南的“方法”,我强烈建议您查找大公司或您真正喜欢的任何公司的风格指南。

此链接将带您进入 Microsoft 样式指南之一的部分。微软似乎根据所讨论的应用程序拆分了他们的风格指南。如果这对您的公司有意义,您可能会考虑这样做。

更具体到开发人员

如果您希望该指南适合开发人员,您可以执行Google 在此处所做的类似操作。

他们的开发者风格指南旨在帮助保持相当一致的品牌外观和感觉,尽管有无数开发者在无数地方为谷歌或谷歌风格创造东西。

例如,在 Highlights 部分,Google 谈到了写作中应该使用的语气。深入了解本指南,您会看到HTML 格式指南之类的内容。

无论您最终做什么,请确保将样式标记为指导方针,除非它确实是一个硬性规定(即不要重新着色徽标)。我之所以这么说,是因为总会有这样的情况,即设计在最初的指导方针之外表现得更好。

如果您担心开发人员会偏离正确的风格,请添加条件。例如,我总是输入类似“如果这些颜色都不适合您的应用,请在选择其他颜色之前咨询营销团队”。

更多视觉风格指南/品牌书籍的例子

(顺便说一句,谷歌“品牌书籍”)

样式指南的颜色部分示例 你可能会为调色板做这样的事情。

喜力标志尺寸指南 这是一个很好的示例,用于显示徽标等元素的样式和尺寸要求。

这一切都归结为您要实现的目标。不同的商店有不同的系统。如果你想和你的开发者交流,问问他们什么对他们有价值——是带注释的屏幕吗?或更复杂的样式指南或设计系统?您是在研究单一产品还是各种产品,每个产品都不同,并且有自己的一系列问题?从长远来看,采用复杂的系统是有意义的。如果您的项目总是在变化,也许更灵活的方法可能会做。