梅州企业网站开发：如何为网站或应用程序创建指南和标准

2019.08.16 mf_web

虽然某些方法可能会有所不同，但任何项目最重要的起点之一都是一套指导方针。

为每个项目创建指导方针和标准（即使它不是最初的范围）可以增加您的工作流程，也可以保持您的设计一致，并希望以正确的方式开发。

这确实是设计师的责任。你不能责怪开发人员不是你的像素怪物。引导他们。

首先创建三种主要类型的文档。

对于同时进行前端开发的设计人员，不建议使用此过程。如果是这种情况，请添加另一个步骤，在其中创建具有编码样式指南和编码组件的单独平台。您甚至可能希望在步骤2开始编码并省略步骤。

这个过程的两个着名的例子是Bootstrap和Purecss。是的，这些都是完整的前端框架，并且可能比您正在进行的项目更大，但您明白了吗？

梅州企业网站开发

1.风格指南

样式指南定义了设计项目中每个元素的样式。它基本上是开发人员的一般风格指南。本文档详细定义了颜色，排版，表格，列表项目，图标使用，分隔线等。创建元素后拖放元素并为每个元素设置规则。

Styleguides

*提示：命名元素。尽管开发人员最终可能会使用不同的类，但在引用这些元素时它可能很有用。假设您使用渐变导航栏的网站有不同的主题颜色。更容易引用#PrimaryThemeColor - #SecondaryThemeColor而不是命名不同的颜色。

在许多方面，此文档与样式指南相同，但在不同的级别上。组件是登录框，滑块，轮播，页眉，页脚等元素。

这与一般样式指南的不同之处在于，本文档可帮助您在整个设计过程中保持一致性。开发人员更容易识别重复元素，这将加快流程。

组件文档

如您所见，在处理响应式项目时，包含每个组件的“行为”是有益的。同样，普通开发人员不会关注这些类型的事情（并且不应该这样）。

如果您没有强调CTA文本在移动设备上居中对齐的事实，他们将不会注意到。相信我。

一旦您认为已完成，请拖放组件以确保从一开始就设置规则，以防止对最终模型的填充，颜色和字体大小进行无休止的编辑。

*提示：将组件导出为单独的.psb文件。最大的好处是，当您的客户决定更改内容时，您只需更新该特定的.psb文件。这是一个真正的节省时间。

最后一步是指定页面。由于我们已经设置了元素和组件的样式，因此唯一剩下的就是引用这些组件并定义边距（命名和间距）。

我们对adidas网上商店使用了以下方法，对于一个大的平台，真正有助于将其分解为：

对于这两种类型的导出，我们使用3 层组合，它们易于导出：

规格文件

我知道所有这些看起来都很痛苦，但作为交互设计师，这一点至关重要。

幸运的是，有一些很棒的插件可以节省你一些时间。其中一个是specKing。此工具可以指定上述所有内容，但我更喜欢将其用于间距和标签。

任何提示或改进？我们很想听到有关为项目创建规范的方法的一些反馈。在评论中分享您的想法。

梅州企业网站开发