将网站模拟图交给开发人员的技巧

110 阅读5分钟

如果你是一个主要在前端工作的网页设计师,可能有的时候你需要把你的工作交给一个开发者。他们的工作是把你的模拟图变成一个工作网站。

这是整个过程中的一个重要步骤。为了达到一个积极的结果,设计师和开发人员都需要在同一页上,可以说。但这说起来容易做起来难。

很多时候,设计和布局的某些方面会在翻译中丢失。这导致一些东西在浏览器中看起来和在你的原型设计应用程序中不同。即使是细微的差别也会损害整体的可用性和美感。

虽然把这种情况归咎于一个无赖的开发者可能更容易,但事情并不总是那么简单。沟通是关键,提供对设计本身的清晰理解也是如此。

让我们来探讨一些想法,使从设计师到开发人员的交接成为一个富有成效的过程。

提供项目细节

忽视细节是模型到构建过程中最常见的问题之一。诸如使用哪种字体、元素之间的间距以及设计上的改进(阴影、边框等)等项目很容易被误解,甚至完全错过。

这可能是由于缺乏明确性。如果没有明确的指示,开发者可能不得不在原型中搜索,以确定这些项目是如何实现的。而不是每个人都会花时间这样做。

我们可能认为我们设计的这些方面会很明显--其实不然。因此,记录各种元素是很重要的。这为开发人员在构建过程中提供了一个参考点。

幸运的是,许多应用程序提供了风格指南,这将有助于避免任何混淆。然而,如果你在Photoshop等应用程序中设计,你可能需要自己生成这些信息。

Project user interface elements displayed on a screen and a desk

保持模型和资产的有序性

说到Photoshop,你是否曾经打开过一个PSD文件,却看到大量未命名的图层,而且顺序似乎很随意?确定每个层的内容的能力可能是非常令人沮丧的。

这不仅浪费了时间,而且也是开发者可能错过那些设计细节的另一种方式。除此之外,强迫开发者浏览一个无组织的混乱的东西也不是一个交朋友的好方法。

模拟图的组织是顺利交接的关键。花点时间给你的作品中的各种元素贴上标签,并把它们放在一个合理的顺序中。

当涉及到额外的资产,如图片和字体时,把它们放在文件夹里。以反映其内容和/或用途的方式来命名图片也很有帮助。

Colored pencils neatly organized

不要忘记响应式风格

当涉及到你的设计在移动设备上的外观和工作方式时,最好不要让事情有任何机会。响应式风格和桌面风格一样重要。

同样,这也是一个好的原型设计应用程序的帮助可能是无价的。将响应性添加到模拟图中的能力使开发人员更容易将事情付诸行动。

即便如此,有些方面仍然可以从额外的解释中受益。例如,相对于手机而言,多栏布局应该如何响应平板电脑?排版会改变吗?导航如何?这些都是需要考虑的重要问题。

在风格指南和文档中包括关于移动设备的说明。这将确保每个屏幕都有一致的用户体验。

A person uses a smartphone

做一个导游

交互式模型和书面说明都很好。但是,围绕一个项目的细微之处进行对话仍然是有意义的。

由于视频会议的便利性,与开发人员的虚拟聚会应该在你的任务清单上。这使你能够充当某种 "导游",解释你创造性工作的所有活动部分。

此外,这也是一个接受宝贵反馈的机会。可能在某些情况下,开发人员会发现一个可能对用户产生负面影响的问题。最好是现在就发现,而不是在构建过程中发现。

参与者还可以互相提问,消除任何潜在的误解。我们的目标是让每个人都能与正在发生的事情保持一致。即使是花几分钟讨论项目,也会帮助你达到目的。

People point to places on a map

设计师和开发者和谐共处

最后,参与网站设计和开发的每个人都有相同的目标:一个成功的结果。从设计师到开发者的无缝转移起着重要的作用。

对于设计师来说,需要付出一点额外的努力来确保成功。它涉及到提供一个组织良好和有记录的模拟图。这包括有关网站如何在各种屏幕尺寸下工作的任何具体细节。

最后,努力与同事互动是至关重要的。花时间在一起(虚拟或面对面)讨论细节应该是一个优先事项。

要想把事情做对,需要实践。而且总是有可能出错。但通过采取上述步骤,你将把你的项目放在通往成功的最直线上。

The postTips for Handing off your Website Mockup to a Developerappeared first onSpeckyboy Design Magazine.