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

2019.08.16 mf_web

96

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

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

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

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

  1. 时尚指南

  2. 组件文档

  3. 页面周围的规格

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

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

梅州企业网站开发

1.风格指南

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

Styleguides

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

2.组件文档

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

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

组件文档

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

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

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

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

3.规格文件

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

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

  1. 分别导出多个页面上使用的组件。

  2. 导出页面。

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

  • Popup_Normal.jpg

  • Popup_Naming.jpg

  • Popup_Spacing.jpg

规格文件

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

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

散斑

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

梅州企业网站开发

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP