温州网站建设：5种简单的方法来准备您的Web设计

2019.08.02 mf_web

174

恭喜！您已经设计了自己的网站，并且感觉已经准备好将其发送给编码团队。您可能有一个开发人员，或者您可能正在比较那里流行的PSD> HTML商店......您甚至可能计划自己编写代码。无论你决定使用什么解决方案，我认为每个设计师在准备他们的设计被编码为功能齐全的网站时应该知道一些技巧。

温州网站建设

提示01：使其成为“像素完美”

创建“像素完美”组合背后的理论可以这样说：对于我们的编码员，我们看到的就是你得到的！大多数程序员都不会为您解释您的设计。如果您使用不匹配的边距，填充，字体大小，颜色等移交设计补偿，大多数开发人员将完全按照我们的看法对其进行编码 - 包括错误！这可能意味着很多挫折和浪费的时间（和金钱）进行修改; 所以，如果你想要像素完美的编码，那么你可以省去头疼并发出完美的像素。

在将您的设计发送到编码阶段之前，需要花一两个小时的时间用精细的齿梳进行检查。

这里的工作流程解决方案很简单 - 在将设计发送到编码阶段之前，需要花费一两个小时来检查它是否使用精细的梳齿。您不一定需要记录整个设计（尽管一些开发人员会要求这样做），但要注意确保以下元素完全符合您的要求至关重要：

边距：元素之间的所有边距应该或多或少匹配。如果您打算将所有边距设置为25px，请确保它们在设计中完全是25px。
填充：这与边距相同：确保元素内部的填充符合您的意图。
字体用法：确保每次在设计中使用字体时，它都是您想要编码的内容 - 如果您希望“所有段落文本为10px Arial且线宽为18pt”，请确保设计中的每个段落以这种方式设置。
颜色：如果您有一个确切的颜色，无论是字体，背景还是其他任何颜色，请确保使用您想要在编码中使用的确切十六进制值。

在你交出的设计文件中设置一些“指南”也值得花些时间。一种简单的方法是使用像960.gs网站提供的网格模板。网格模板中的准则确保元素的宽度都是精确的。因此，没有一个957px宽的容器，它将是您想要的精确960px。

提示02：留下笔记

如果您想要一些不明显的东西，例如当您将鼠标移动到屏幕顶部时必须向下滑动的导航菜单。确保通过添加备注清楚地说明。有几种方法可以做到这一点（我已经看过从PowerPoint文档到打印输出的所有内容都有手写），但我最喜欢的方式实际上很简单：在Photoshop中使用Note Tool（见下图）。当开发人员打开文件时，笔记工具会自动显示笔记，并且很容易快速阅读设计师的意图。

如果您不使用Photoshop，那没关系。我发现的大多数图形软件（从Fireworks到Illustrator）都有类似的添加注释的方式。如果由于某种原因这不是一个选项 - 只需将您的笔记放入一个文本文件中，该文件包含您提供给开发人员的文件。

技巧03：包含交互设计

您的设计在交互方面越详细，开发人员就越容易对其进行编码。请务必添加一些设计在与其进行交互时的外观示例。每个设计都会有所不同，但不应忘记的重要互动包括：

下拉菜单
链接/按钮悬停状态
图像滑块
灯箱
提示
表单元素

这个提示背后的原因是：如果你没有向开发人员展示你期望某种互动看起来如何，那么他们可能会使用一种没有样式的通用设计，这可能会像一个痛苦的拇指一样突出。当然，有一些程序员（像我一样！）会尽力猜测你想要的东西，为什么在你花几分钟的时间自己设计它时，为什么要留下一些如此重要的猜测呢？

提示04：记住脚本

时间就是金钱，所以如果你设计一个看起来漂亮的滑块的网站并且你确切知道哪个脚本是完美的，那么在开始编写它们之前先告诉开发人员吧！如果您没有特定的脚本，那么花费几分钟时间搜索是否存在特定脚本可能是值得的。自定义脚本可能会花费大量时间和金钱 - 而且创建一个特定脚本的设计要比从头创建一个自定义脚本以匹配您的设计要容易得多。

使用预制脚本并不是件坏事！这可能看起来像是用来粉碎你的创造力的建议，但是这样想：它可以轻松地花费20倍的时间从头开始编写代码，而不是使用预先制作的代码。预构建的脚本通常易于调整和重新设计，通过简单的Google搜索可以获得成千上万的脚本。如果您找不到可用的免费脚本，Envato甚至拥有自己的高级脚本市场：CodeCanyon！

提示05：了解您正在设计的技术

让我们假设你是一个重大项目的设计师。你花了几周时间在设计上工作并最终得到你的客户的批准......只是在一周后发现设计几乎不可能编码，并且它的成本是客户预算的10倍; 这一切都是因为你设计了整个网站没有什么的理解是与不是可能有一定的技术（闪光，HTML等）。

我可以给出的最重要的提示之一是：每个网页设计师都必须对他们正在设计的平台有一些了解。这可能是HTML，Flash，PHP，甚至是手机或平板电脑等设备。你学到了多少取决于你，但是从长远来看，对平台如何工作的基本理解将为你节省很多心痛。我常常给出一种不实用（或价格合理）的华丽设计，因为它的设计并没有考虑到实用性。

我常常给出一种不实用（或价格合理）的华丽设计，因为它的设计并没有考虑到实用性。

我并不是说你限制你的创造力（几乎任何东西都可以用足够的时间和精力来编码）; 而且我也没有建议你出去成为一名编码大师（你让我失业了！）......但是，如果你对所设计的技术有基本了解，那将有助于你的设计一些基本的经验法则将使编码更容易，更实惠。

例如：如果您将网站设计为静态网页，那么了解一下HTML和CSS的工作原理是有意义的。即使只是基本了解HTML和CSS如何相互关联，也足以让您在设计时做出更好的决策。设计师对他/她设计的技术越了解，他们在设计方面就会越好！

*是的，HTML并不是唯一的技术，因此，如果您正在设计Flash或其他技术，请将其作为您研究的重点......但是，您应该知道，建筑师应该知道如何摆动锤子，即使他从来没有这样做过。

额外提示：说出来！

您不需要为您设计的每个网站提供20页样式指南，但是可能不会在comp中显示的通信原则对于任何编码项目的成功非常重要。如果您的设计有特殊要求（即：它需要满足某些可访问性标准，或者它必须与IE5.1等100％兼容），请确保您让编码器事先知道，以便我们可以提前计划。在设计编码后找出主要要求是昂贵修订的秘诀，对于编码人员来说，这并不像你想象的那样有趣或有利可图！我们大多数人宁愿转向另一个令人兴奋的项目，而不是花费数月时间与沮丧的客户进行修订。