郑州网站建设：伟大的设计伤害之努力实现像素完美_极简慕枫

我将分享一个设计理论，我过去几年一直致力于实现我自己的工作流程：像素完美的模型。对某些人来说，这可能是显而易见的，但它的一个原则对我自己的设计过程至关重要，因为我认为这是我在十多年的设计中被提出的最具影响力的一个想法。

郑州网站建设采用这一理论不仅仅是设计过程中的另一个步骤，它是一种改变思维革命的视角，无疑将改善您从现在开始工作的每一项设计的质量。想成为更好的网页设计师并承担更大的项目？继续阅读。

伟大的设计伤害

几年前，在SXSW 2008上我首次提到了“像素完美”设计模型的概念。Michael Lopp（几本伟大设计书籍的作者和Apple的高级工程经理）参加了一个名为“ Great Design Hurts ”的会议。他的讲话非常热闹，充满了比尔马赫剧集的亵渎。在他令人难以置信的深刻见解的讲座中，有一个小宝石解释了如何在Apple，每个设计师致力于像素完美组合的想法。也就是说，在公司周围传递的每一个comp都是如此精确，如此纯净，如此详细，以至于休闲观众无法区分设计组合和完全编码的屏幕截图。

...在公司周围传递的每一个comp都是如此精确，如此纯净，如此详细，以至于休闲观众无法区分设计组合和完全编码的屏幕截图

“就是这样！”，我想，“这个想法将彻底改变我的设计过程”。确实如此。

请参阅，开始每个设计项目，目的是跟踪它到最后一个像素，改变设计过程的每个方面。即使你每次都没有真正遵循，开始设计的意图也会对最终产品产生巨大影响。

经过一两个月的尝试，我的PSD更干净，我的文件移动得更快，我的项目不再在后期“拖延”了，我花了更少的时间在手机上试图解释差异的客户在粗略的设计模型和成品之间。哦，我被雇用了更多，这是一个很好的指标，可以遵循任何措施。

那么是什么让像素完美兼容？从本质上讲，它正在设计一个模型（特别是一个web模型，但它可以是任何东西），就像你首先通过代码设计样式一样。如果您使用CSS / HTML工作，那么您就会知道我的意思。这包括：

1. 完美的利润

2. 完美的填充

3. 完美一致的字体使用

4. 完美的边框和背景

5. 一致的颜色使用

6. 与前5条规则的智能和合理偏差。

让我详细说明这个想法; 当大多数设计师开始一个项目时，他们的设计就好像它只是一个模型。一些开发人员或质量保证专家将在稍后进行调整并对所有内容进行微调的知识限制了他们为个人设计投入了多少时间和精力。

接下来发生的事情对大多数设计师来说很自然：客户被告知图像和图标只是“占位符”。Lorem Ipsum文本用于代替真实内容。哎呀，甚至导航和其他主要用户界面元素都会在发布之前与“填充”内容交换，大多数情况下。

什么是“完美”？

“完美”意味着每个设计组件的每个元素都与您打算在最终编程产品中完全一样。

利用边距和填充，这意味着它们在整个网站设计中保持一致。如果设计中的每个侧边栏块都有10px的余量，那么每当有侧边栏时，就会设计那样。

使用字体和颜色，这意味着整个网站的一致使用。设计每个字体就好像它是一个链接到HTML元素（即：所有H1都是18px，粗体，格鲁吉亚使用黑色）。不要偏离 - 正如我最喜欢的项目经理曾经告诉我的那样，在任何一个页面上确实不应该有超过3或4种字体样式，除非你有充分的理由去做。如果您使用特定颜色的红色作为网站上的高亮颜色，请确保它在每个地方都是红色的确切颜色（除非您有理由让它与众不同）。

边界，人力资源规则和背景也应该是一致的 - 我已经看到一些组合，其中每个边界和人力资源都是相同颜色的不同色调 - 这最终导致组合看起来邋and和不专业。对于一个未经训练的眼睛，很容易看出一个设计感觉半生不熟......即使那个人不能把他们的手指放在正确的错误上。

最后，使用尽可能接近真实物品的图标，图像，标题和文字。如果您正在重新设计网站，请使用他们已发布的内容而不是Lorem Ipsum。如果客户说他们有新的图标或图像，他们将在重新设计中使用，请求他们并将其包含在设计中。

请记住，我们正在努力创建精确的设计组合，使它们看起来像实际的，实时的，编码实现的屏幕截图。

反对完美的争论

在我再迈出一步之前，让我们来解决明显的反驳论点。成本。时间。努力。沮丧......你心中已经形成的争论可能听起来像这样：

“如果我花时间细致地详细说明通过我手中的每一个设计模型，我将花费3倍于设计的时间......更不用说如果客户不喜欢这样的事实设计，这一切都在垃圾桶里“。

一个公平的论点，一个肯定有它的优点，但它不足以使这篇文章脱轨:)记住，目标不是让每个设计模型真正完美（那将是疯狂和昂贵的） - 目标是改变你的设计方法。事实上，像素完美的方法在许多情况下并不真实......但这应该阻止你努力争取它。

让我们来看看像素完美复合的好处，然后我们将回到这个论点。

Pixel Perfect Mockups的优点

它迫使你变得更有条理。更多的组织意味着花费更少的时间与PSD摔跤，花更多的时间在设计上踢屁股。

不再向客户解释。如果您已经完美地设计了一个comp，也就是说，一切都在您想要的地方，您不必向客户解释他们在设计组件中看到的内容实际上并不是最终产品中的内容。

不再向开发人员解释。当您的客户将您的设计组合发送给印度的开发团队时，这会非常方便，因为长期解释性电子邮件无法翻译。如果他们唯一的工作就是完全按照他们在comp上看到的内容进行编码，那么就会降低他们误解任何设计规范的可能性。而且，对于我工作的流利程序员来说，这更容易; 他们专注于编程，而不是试图弄清楚我是否需要10px的利润率或15px的利润率。

减少花在QA上的时间。质量分析，如果你不熟悉的话，就是黑板上的最后一轮设计，你会回到粗略的“提议”设计中并准备好进行最终展示。对于开发人员来说，这也是最终“发布前”轮次的名称，其中每个细节，功能错误和杂散像素都得到了理解。当然，在小型项目中，您可能永远不会经历QA循环; 但是在具有预算的大型项目中，在完成此步骤并清理已清理的源文件之前，您根本不会离开项目。

更快乐的艺术总监/客户。如果你的艺术总监（或者他/她的头衔）能够花更少的时间来挑剔你的比赛的细节和更多的时间给予有价值的指示，他们的血压（和你的）将不可避免地在设计审查会议期间下降。

更专业的最终结果。是的，你的比赛看起来会更专业。既然您花费较少的时间来解释或为邋mock的模型找借口，那么您可以花更多的时间来提高您的费率......

反击

因此，作为对像素完美复合的论证的回应，我将做出这些最后的观点。

你的比赛应该已经很完美了。这是任何设计项目的最终目标，如果你最终没有到达那里，那可能只是因为你从来没有打算过。

它比其他选择花费更少的时间。选择一个：花费6个小时精心设计一个网络模型并快速获得客户批准或花4个小时进行设计，另外4个修复愚蠢的错误，最后让客户签署设计。

编辑和修订以这种方式发生得更快，而不是更慢。如果您使用这种心态设计了模型，并且您的PSD被组织起来以反映这一点，那么客户端请求的每个后续修订集都将以闪电般的速度发生。

优秀的模型意味着更少的开发时间。这可以节省您（或您的客户）的现金。这是快速原型设计的基本租户- 在进入昂贵的开发周期之前做好准备。

这是小项目和大预算演出之间的最大差距。一个简单的事实是，寻找自由职业者来接受他们项目的招聘人员使用“注重细节”作为自由设计师是否能够处理主要网络项目的最具指示性的衡量标准。如果你有一个充满了草率的投资组合，那么证明你是值得信赖和有能力的将会更加困难。

最后的想法和警告

我之前说过，但这是我的最后一点。你不会在每个comp上实现像素完美，这很好。有一个时间和地点粗略草图comp，你（和你的客户）将知道它何时。这种“像素完美补偿”理论在100％的时间内不需要100％的结果，它只能决定你为每个项目带来的基本态度。在我自己的项目中经过多年的努力，我可以说它非常值得痛苦。

郑州网站建设有不同的观点或评论？在评论部分开始或加入以下讨论！