如何将设计移交给开发人员

根据我的个人经验和其他设计师的经验，以下是你应该避免的最常见的错误，以及一些可以帮助你把设计文件交给开发人员的小技巧:

1. 准备风格指南:

1.1、色板:

在开始设计之前向开发人员提供调色板，可以节省大大节省他们创建变量的时间。

Material Design by Google

调色板工具：

http://paletton.com

https://coolors.co/

https://colorhunt.co/

1.2、图集

所有类型的图标都应该是相同的大小。

(建议:在一个方框内添加图标，这样无论图形多大，图标都会与正方形的大小相同)

免费的图标:

https://iconmonstr.com/

1.3、字体指南:

在设计中始终使用Web字体，桌面字体与Web字体不同，Web Font是专门设计用于网页的字体。Google字体是最大的Web字体开源项目。

为开发人员预定义字体大小：

(标题1)Heading H1:Roboto Medium 24px Sentence

(正文1)Body 1: Roboto Regular 16px Sentence

(正文2)Body 2: Roboto Regular 14px Sentence

(按钮)Button: Roboto Medium 14px All Caps

(备注)Caption: Roboto Regular 12px Sentence

(上划线)Overline: Roboto Regular 10px All Caps

1.4、状态:

示例-状态类型:

(启用)Enabled button: #6200EE

(禁用)Disabled button: 20% #6200EE

(悬停)Hover Button: 80% #6200EE

(活动)Active State: 100% #6200EE

2. 原型和文档:

设计原型用于与团队共享您的设计，以获取反馈并与开发人员共享交互。

原型使开发人员可以了解设计中的交互，动画，手势和行为。

为开发人员准备简短的文档，包括无法通过原型共享的细节，开发人员必须严格遵守的内容，有关您的设计的评论以及规格。

例：卡片正文的最大长度应该显示前100个字符…

原型工具:

Invision

Flinto

Adobe XD

JustInMind

保证“像素完美”：

边距：元素之间的所有边距应匹配。

填充：与边距相同的规则。

图形：在用户眼中，非像素完美的图形往往看起来模糊或像素化。

3.准备分享:

准备设计文件:

1. 图层名称

2. 将他们分组

3.图标名称、组件

4. 删除不必要的层

设计的移交工具:

允许您轻松地与开发人员共享规格、资产、代码片段的平台:

Zeplin

Invision

Avocode

Marvel

Supernova

Material Design Gallery

4. 设计系统:

为了避免这些错误并更好地理解设计，以下是最著名的系统:

设计系统是开放源码的系统，它提供设计工具、资源和界面指导方针，供设计师和开发人员随时使用。

Google: Material Design

IBM: Carbon Design System

Microsoft: Fluent Design System

5. 总结

UI设计师的工作之一，就是帮助开发人员的工作变得容易。同时，如果您一直遵循这些技巧，您的设计将变得更容易，降低编写代码的难度，意味着用户最终使用的产品和你的设计会高度一致。