全新的设计过程，带你快速步入响应式设计时代

利用以前的设计过程进行响应式设计，正暴露出诸多问题。怎样的设计过程才能满足响应式设计时代的要求呢？“优先级引导”是Sparkbox公司经过诸多尝试总结出的设计过程。它将传统设计过程与移动优先设计进行了完美结合，让响应式设计变得如此简单、完美。 Sparkbox公司的内容策略主管Drew Clemens近日发表了一篇博文《 Design Process In The Responsive Age》，分享了这一设计过程。CSDN对该文进行了编译，内容如下：

我愿意帮你解决在响应式设计中由于采用以前的设计过程而导致的一些问题。现在展示一下我们正使用的、改进后的设计过程，该过程中用到了一些很不错的新交付物和工具。它应该能成为你刷新自己设计过程的一个起点，并将你带入响应式设计时代。

所面临的问题

通过以前的设计过程来获得一些新的结果，这期间所引发的问题往往会很严重，但新奇的是，它又并非会立即显现出来。往往我们对这种设计过程早已习惯，正如我们无法意识到自己令人讨厌的怪癖一样，直到有人为我们指出。从此之后，这一“怪癖”恐怕会把我们逼疯。比如，如果我们用Photoshop设计了一个桌面大小、固定宽度的网站布局，并将其直接交给开发人员，使其转化成网页格式，这意味着我们正请开发人员做更多的关于设计的决定——最终可能无法实现它。下面列出了会遇到的一些小问题：

● 这个布局如何适应小尺寸的设备呢？（依据目标，对重要页面元素设定一个层级关系将是非常不错的。）

● 内容间的层级关系是怎样的呢？

● 导航如何响应更小的屏幕呢？

如果开发人员在可视化领域没有太多自信，可能会导致严重的问题。即便在该领域感觉良好的开发者和设计者也会陷入困境。最终，开发者常常被迫在还没完全规划好的地方做出自己的假设，有时这种情况也会发生在设计者和客户反馈的信息得到确认之前。

解决方案：优先级引导

做更多的工作，能很容易解决这个新挑战。很自然，你可能会相到，创建一个适应桌面和移动大小的线框，然后再设计一个适应桌面和移动大小的布局。这在一定程度上解决了这个问题。这时至少有更多的工作需要你和开发者去做。不管怎样，针对不同设备有不同宽度，你的设计也必须能覆盖他们。不是吗？

现在，我们成功发明了一种不同的方法。以尝试优化内容、设计、开发的时间，从各种不同的方法中找到合适的方向，以达到预算平衡——它要高效、简小、能快速使用、具有方便访问的各种工具。

该方案称之为“优先级引导”。在“优先级引导”中，我们会创建一个简单的交付物，靠某种方式，如线框图，为专注于内容的设计和移动优先开发提供指导方向。

下载该PDF

很自然，根据移动设备的尺寸进行设计的方法会产生更多单列的布局设计。反过来，单列可以线性地展示内容和功能特性。相比桌面大小的线框设计，此种线性展示更能突出优先级及层级结构，尤其当你尝试使用实际内容的草图来代替难懂文本时。

从这一点上，依靠该“优先级引导”，设计者就可以创造一些精彩的东西。设计者可以打开Photoshop，按照传统桌面的设计方法设计一个全新的布局——正如你过去十年来所做的那样。对于优秀的Web设计师来说（已具备很了不起的可视化设计能力），面对针对移动设备的设计计划，去为桌面产品进行设计，这简直太棒了。

下载完整设计图

一旦设计工作完成，传送给开发者手里的将是一个完整的桌面尺寸的设计和最初移动设备尺寸的线框图。

不要被“简单”愚弄

这个方法听起来简单——这也是它之所以美好的一方面——但它也确实能带来一些益处。

● 开发人员分别获得了桌面和移动设备两大方向的设计方案。两个方案都提供了独特的信息。一些交互虽仍需要开发人员来做，但这并不是坏事，毕竟现在少了很多靠猜测来完成的工作。

● 设计者手中的针对移动设备的线框图，已提供了内容的层级结构，但却未提供桌面尺寸的设计布局。而这就恰为设计者提供了更多自由的创作空间，以免他们陷入失望、无聊的状态。

● 通过原型、线性的展示，层级结构变得更加容易理解。移动优先设计中的标记和样式标准虽然没明确的规定，但却很灵活。

● 和以前一样，所有这些完成于二期交付物的产生过程，这样既节约了时间又节省了预算。在相同的时间（或更少）内获得了更好的结果，自然是一件好事。

关于内容的注意事项

每每谈起移动Web时，针对内容的各种问题都会成为讨论焦点。有提供“移动内容”吗？如果确实有，用户在移动过程中，对网站的内容会有不同的期望吗？如果用户确实有不同的期望，我们如何解决他们呢？

简言之，这些问题并不在本文所要讨论的范围。这些问题在其他地方都有很多深入的讨论。我认为，根据项目的不同，关于内容的这些问题的答案也会不相同。这些问题就留给你和你的团队了。

但在这里我仍想建议，在对用户做出假设时一定要认真考虑，并对内容加以限制。虽然移动内容可能存在，但你并不能仅凭屏幕的尺寸来做出这些假设。用户倚靠在沙发上通过iPhone上网，当他们坐着或看电视时，会用全部的时间来访问你站点的所有内容。这就是我们相信响应式Web设计方法的理由，它能使你的网站更好安全，基本不会降低用户的体验。这也正是本文中所提到的方法——根据所在的环境提供完备的内容。

可考虑使用的工具

STYLE TILES

设计师 Samantha Warren最近刚刚提出了“ Style Tiles”这个概念。我们都很喜欢这个概念，并有一种“我们怎么没有早想到它”的“自责”。它基本适用于所有的Web设计，在客户端交付物相当复杂的响应式设计中，也相当适用。我们已经计划把它整合到我们的工作流中。我们计划在制作线框的过程中在客户端呈现该交付物，这样样式和布局的推进工作可以独立并行完成。

针对线框的Keynote

近来，我十分沉迷于该Keynote中——可以十分出色地设计移动设备大小的内容原型线框。它快捷、易学、易分享。它是一个十会奇异的线框绘制和计划工具，有很多不错的工具可供你使用。

结论

不要害怕尝试新鲜事物。没有一劳永逸的设计过程，工具和交付物也同样。如果本文的解决方案并不适合你的项目，抛开他们，尝试其他的过程。不管怎样，你必须改进你的设计过程，以使用用户和Web的革新。你希望解决新的问题，就必然需要一个新的方法。

你也必须解决人们之间的沟通问题。团队成员和客户之间越早、越频繁的协作必须成为你工作流中的规则，没有特殊情况。内容、设计、开发团队成员间必须在创建过程的每个阶段定期地评审与协作，知道网站“成活”。

原文链接： Design Process In The Responsive Age