如何设计出开发者不会讨厌的网站

为了获得最佳的视觉精度，每个Web设计项目最终都需要为每个页面和界面设计完整的模型。由于受到技术上的限制，这些模型必须作为与开发人员定期讨论的协作性视觉设计文档——而不仅仅是传递给对方的东西，就好像对方是WYSIWIG工厂一样。

图形、纹理、排版和其他小花菜都必须从一个简单的图形转换成一个生动的界面。但是，仅仅因为你懂得如何设计伟大的原型，并不意味着你懂得如何为开发人员设计它们。在本文中，我们将提供一些技巧，帮助您构建尽可能平稳地过渡到开发的模型。

毕竟，如果您希望项目向前发展，您必须始终确保从框架和系统角度思考的开发人员能够清楚地理解您的数字艺术作品。

正如免费设计人员与开发人员协作指南中推荐的那样，正确实现的第一步是预测开发过程中可能(通常会)出现的UI限制。

在设计世界中，似乎任何美丽的想法都可以用代码来创建。HTML5/CSS3规范确实走过了很长的路，但是一些想法在完全支持下仍然很难构建。

当在线框/原型阶段与开发人员合作时，请始终牢记HTML5、CSS3或任何您选择的语言的局限性。这样，你就会知道该设计什么，以及如何可视化地设计想法，以便开发人员可以实际构建界面。

在你的办公桌旁边(或者在谷歌文档中)列一个清单，列出需要避免的障碍、障碍和界面想法。虽然以后可能会添加这些特性，但您应该首先关注最可行的接口元素的优先级排序。在设计过程中，每周与开发人员一起回顾一下这个列表，这样你就不会迷失在一个高保真度的设计中，而这个设计实际上是一个技术梦魇。

现在已经为设计可行性提供了一个良好的起点，让我们研究一些在设计时要记住的其他方法。

当涉及到探索交互时，原型是讨论可行性的最有效的平台。除了实际编码你的设计，原型比简单地描述或注释平面线框图和原型要有效得多。

即使是粗略的低保真原型(也被称为交互式线框)也可以向开发人员展示内容的总体框架，以及用户点击体验时内容之间的依赖关系。虽然视觉上的细节还远远不够完善，但开发人员仍然可以提供关于设计基础设施的反馈。

例如，对于一个大型博客设计，您可能会陷入无限滚动的僵局，但是card UI模式仍然可以作为可用性和站点加载时间之间的折衷。在更微妙的层次上，开发人员还可以为您提供特定于设备的反馈。导航头在原型中可能工作得很好，但在某些浏览器和设备中，它可能完全被地址栏隐藏了。

除非您让开发人员使用您的原型，否则您将无法发现这些技术上的挫折(其中一些可能需要彻底的更新)。事实上，我们的应用程序与Photoshop和Sketch结合的部分原因是为了鼓励更多的设计师跨入交互设计阶段(即使他们更喜欢首先增加视觉设计的逼真度)。

网页设计领域与移动应用程序设计有很大的不同。

Android和iOS应用程序运行在一个操作系统上，屏幕分辨率各不相同。然而，网站引入了更多的变量——它们必须在不同的屏幕分辨率、不同的操作系统、不同的浏览器、以及不同的屏幕分辨率(和设备)上运行。

设计网站界面的过程和设计手机应用程序界面的过程很相似。但是这两种媒介的开发有很大的不同。在设计模型时，您需要考虑每个特性的潜在缺陷和缺陷。

对于并不是所有浏览器都支持的较新的CSS3技术(例如:转换、反射、剪贴路径和屏蔽)尤其如此。虽然Photoshop和大多数其他设计程序都允许你在你的设计旁边插入注释，但当你准备一个主要的迭代时，没有什么可以替代与开发人员进行快速的可行性讨论。

下面，您将找到一些我们最喜欢的免费开源脚本，以帮助提高浏览器兼容性。这些资源在设计时可能不能直接帮助您，但在与开发人员协作时，它们无疑是一个重要的对话点。

即使您不了解这些脚本是如何工作的，您也应该向您的开发人员提出它们。根据我们的经验，我们发现开发人员很欣赏这种主动姿态，而且不介意花时间解释兼容性问题。毕竟，这对双方都有好处，因为熬夜通常是设计师和开发人员共同的痛苦。

由于主页是整个站点的门户，所以它的设计可能需要花费最大的精力，但是您也需要对内页应用同样的精确度。

在一些大公司，由于严格的内部流程，项目经理要求每个页面都有完整的模型。在其他公司，一些开发人员可能有设计经验，允许他们从一个模型构建多个相似的页面(为您节省更多的时间来处理独特的页面)。根据公司协议调整模型细节的级别。

现在，让我们研究一些模型元素的开发注意事项。

一个敏锐的图形设计的感觉是需要的伟大的模型设计。

例如，即使两个页面仅以图标的不同来区分，最安全的选择仍然是创建两个独立的原型以避免任何混淆。大多数时候，你会发现创建所有的内页然后分别导出图标更安全——这样，开发者可以访问单独的图标图像和页面设计作为参考材料。

图片来源:图标设置在UXPin

在结束你的模型设计之前，按照这个检查表来看看你是否遗漏了什么。下面是一些需要检查的事情的快速列表:

在较大的项目中，我们建议包含一个简短的开发人员说明文档。一定要澄清与笔记相关的参考模型(和页面部分)。如果你在UXPin中工作，你可以在预览模式下给设计本身添加一个注释，或者你也可以上传一个单独的文档到你的项目文件夹中。

图片来源:通过UXPin进行合作

手机应用程序模型必须考虑横向和纵向视图，而网站必须支持从智能手机到宽屏显示器的任何尺寸的任何视图。

如果您的设计是为了响应，那么我们建议为每个断点创建不同的模型，以向开发人员展示如何适应布局。

考虑以下几个改变:

没有正确或错误的答案，因为每个项目都需要单独处理。

当有疑问时，Luke Wroblewski所倡导的“移动优先”方法总是一个好的起点(一旦你完成了最初的用户研究)。围绕最小屏幕尺寸的内容进行设计，然后随着屏幕尺寸的增大而增大。通过首先构建基本内容，您确保了更愉快的与设备无关的体验。

要准备过渡到开发，请确保正确标记响应式模型。文件名必须包括响应断点(以像素为单位)以及其他重要细节(修订日期、草案编号、视网膜屏幕等)。

您的目标是针对每一种可能的情况进行设计，这样开发人员就不必去思考了。

与往常一样，如果您不确定如何交付某个内容，只需询问其中一个开发人员他们喜欢哪种格式。保持沟通渠道畅通，减少问题，避免混乱。

数字设计程序有很多形式，从Adobe Photoshop到Fireworks和流行的新人SketchApp。尽管功能不同，但在这些不同的应用程序中，总体的模型设计过程仍然相对统一。

下面的技巧是针对为开发人员创建模型资产的设计人员的。其中一些想法表面上很容易被忽视，但是当需要编写代码时，它们就会产生巨大的不同。

掌握任何设计程序都需要时间，而转换工作流程也会让人望而却步。但是一旦你尝试将这些技巧融入其中，它们就会成为你的第二天性。当您在设计时考虑到开发人员，这会使每个人的工作变得更容易。

下面是我们这些年学到的一些最佳实践:

更多实用的技巧，我们推荐Photoshop礼仪网站，其中包括几十个主题的建议，如效果，图层组织，排版。要了解更多关于模型的解剖和过程，请查看模型的免费指南。

每个开发人员至少应该了解版本控制系统，它就像存储脚本、数据库或整个网站以前版本的数字档案。除了组织文件之外，版本控制对于回滚更改或比较两个(或多个)文件之间的差异也很有用。

尽管版本控制主要用于编程，但在设计社区中也有一些人使用它。虽然基于设计的版本控制还很新，但是有一些很好的资源可用。Pixelapse是一个在线存储应用程序，用于管理云中的设计文档。虽然GitHub主要是一个代码存储平台，但他们最近增加了对PSD文件的支持。

现在，设计者可以使用GitHub作为他们自己的PSDs版本控制系统。当然，该站点是开源的，对于私有企业项目来说可能不是一个很好的选择——但它是一个练习和学习版本控制的好方法。

下面是一些以设计为中心的版本控制的替代方案:

Photoshop和Sketch都支持各种各样的插件来自动化任务和改进典型的设计流程。尽管Sketch是建立在网页设计的基础之上的，Photoshop有更多的插件选择，仅仅是因为它存在的时间更长，关注的任务范围更广(照片编辑、打印工作、UI设计等)。

图片来源:Pixabay。CC0公共领域。

我们为从头创建界面的UI设计人员选择了以下插件。与传统的工作流程相比，这些插件将帮助你用更少的时间和精力实现像素完美的模型。

模型和高保真原型的创建是设计团队在开发人员接管之前的最后一个主要任务。为了让你的设计在过渡期间保持在正常的轨道上，提供尽可能多的资源并澄清一切。正如我们之前建议的那样，过度澄清总比不充分澄清要好。

图片来源:我是沃尔什。知识共享。

在设计模型时要考虑到开发人员，这样你就可以不断地对现实进行检查。当你从自己的例行程序转向对开发人员更友好的过程时，这绝对是令人沮丧的。但是，当你作为一个更大的团队的一部分在设计项目中工作时，最好是在流程上妥协，而不是由于沟通上的失败而在设计上不必要地妥协。

要了解更多与开发人员协作的技巧，请查看免费的设计人员与开发人员协作指南。在70多个页面中，您将获得包括开发人员在设计的所有不同阶段的真实建议:规划功能、线框图、原型、原型和测试。