金华网站建设:解决设计师和开发人员之间差距的工具

2019.08.02 mf_web

133

在本文中,我将快速总结一些工具,这些工具可以帮助您将设计传达给负责将其设计变为现实的开发人员。我将列出一些教程来帮助你开始 - 所以让我们陷入困境!金华网站建设

粉笔和奶酪

开发人员可以说是专注于计算和逻辑,而设计师则更多地关注创造性过程。正如您可能想象的那样,这可能会在实际尝试协同工作的两方之间产生通信问题。最终,弥合这一差距的理想沟通渠道应该是一个兼顾两个半球的工具,允许他们用自己的语言进行交流,同时保持项目的保真度。 

令人高兴的是,有这个问题的解决方案,实际上有很多解决方案,而且我已经选择了几个流行的选择,并考虑了它们的最佳功能。 

InVision(草图和Photoshop集成)

InVision是业界最受欢迎的原型制作工具之一。

注册,您将免费开始一个项目,目前三个项目的付费订阅每月15美元起。与InVision的插件和集成数量令人难以置信,因此除了我们的目标(更好的通信)之外,您还可以找到一些额外的功能来改善您的工作流程。

核心功能包括:

  • InVision拥有大量的原型设计功能,例如直接移动测试,以及将原型嵌入任何地方进行用户测试的可能性。

  • 与许多其他工具集成我无法在这里命名。业界已将其作为标准接受,因此已创建许多插件以与InVision一起使用。

  • 版本控制与Sketch或Adobe Products中的文件同步。 

  • 虽然在私人测试版中(以及Zeplin / Avocode当前强大的地方),InVision也有一个导出工具,可以为任何元素创建样式表和生成代码。现在判断这个功能与其竞争对手相比有多好还为时过早。  

Avocode  (草图和Photoshop集成)

我们过去曾多次报道Envato Tuts +上的Avocode ; 它可以作为出于Web开发目的而导出设计的一种方式。

Avocode提供为期14天的试用期,之后每个用户每月收取7美元的无限期项目费用。如果您想与其他人分享您的工作(这是一个想法),您必须升级到每月10美元的订阅计划,这仍然比本文中提到的其他选项便宜。 

Avocode具有完整的Sketch和Photoshop集成以及以下功能:

  • 开发人员可以挑选他们需要的东西 - 无需在设计师一侧创建任何样式指南。拉出的任何元素都有完整的规格,颜色(HEX,RGBA,HSLA),字体,样式和尺寸。

  • CSS代码导出和多个图像导出(支持SVG文件)。样式也可以导出到SASS,Stylus和Less; 对于前端开发人员来说,这是一个巨大的胜利。

  • 一个简洁的复制和粘贴文本功能,您可以将设计中的文本粘贴到带有HTML标题标记的代码编辑器中(例如H1)。

  • 所有计划都有无限的项目。当您需要更多用户参与项目时进行升级。

  • 版本控制和与电子邮件通知的协作。从业务(10美元)订阅计划开始,可以使用Slack集成。

Zeplin(草图)

Zeplin是我们最近在Andreia的初学者教程中向您介绍的内容。

zeplin

与InVision类似,3个项目的月订阅起价为每月15美元(您可以免费开始一个项目)。这个Mac / Windows / Web工具的功能主要集中在解决手头的问题:设计人员 - 开发人员交接。你没有像InVision那样得到所有额外的花里胡哨,但它对于协作来说确实很有效。  

一些主要特点:

  • 仅适用于Sketch。

  • 它为您的所有设计提供特定的HEX和RGB值。

  • 自动生成资产(按钮,图标或您选择作为资产的任何内容)。

  • 提供给开发人员的特定于平台(iOS,Android或Web)的信息(PT,DP / SP,PX)。通过这种方式,开发人员可以使用他们在SDK中熟悉的度量对您的资产进行编码。它甚至提供了颜色代码片段,因此开发人员可以只复制和粘贴。

  • 与Slack完全集成,因此团队的所有成员都知道任何设计更新。

使用插件进行Sketch / Photoshop扩展

它几乎不需要提到Sketch和Photoshop都有一个健康的插件列表来导出你的设计并为开发人员创建详细的样式指南。他们定价的几个例子:

  • 墨水  (Photoshop,Free):一种风格指南生成器。

  • Markly  (Sketch / Photoshop,49.99美元):UI / Spec风格指南生成器。由Netflix,Google,Facebook和许多其他人使用。

值得一提的是

本文中建议的工具是业界最常见,经过测试和审核的网络/移动团队协作。让我们看看其他一些我们将不会详细介绍的内容。

如果你正在设计移动设备, Framer(如下图所示)是值得一提的另一个工具。但是,如果你更喜欢专注于设计或编程,它的方法可能不太适合,但不是两者兼而有之。Framer是同时使用创意和逻辑流程的一个很好的例子。 

Adobe XD(Adobe体验设计CC,以前称为Project Comet)是市场上相对较新的玩家,但凭借业界排名第一的应用程序公司,您可以确定它会产生影响。虽然它为设计原型提供了一套出色的工具,但它的重点是用户体验,而不是设计师 - 开发人员的可交付成果。它提供“生产就绪的艺术作品”,但您不会在菜单上找到代码片段和详细的可导出资源。

结论

如果您还没有将任何这些工具集成到您的工作流程中,并且您在设计中面临网站开发的持续问题,我强烈建议您查看上述工具。至少,开始试用!最后,每月的小额费用(或购买费用)将为您节省大量与团队成员来回的时间。

金华网站建设

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP