内容
- 响应式方法
- 如何首先保留内容？
- 为什么？
- 01.定义您的业务和用户目标
- 02.尽可能多地参考他们
- 03.不要害怕后退
- 04.也推动自己的团队
- 05.预先定义所有内容需求
- 如何从演示中提取内容？
- 我们需要停止在布局方面思考内容
- 强迫您的客户独立于设计计划其内容
- 在设计之前完成您的内容
- 每次使用真实内容
- 那么线框如何用于响应式设计项目？
- 素描
- 浏览器内框架
- 注解
- 在线框中使用真实内容
- 我如何首先为小屏幕设计？
- 从一开始就从设备进行抽象设计
- 使用样式图块
- 创建界面和谐
- 在浏览器中查看所有内容
- 平衡静态程序
- 结论
让我们清楚一点：只有将重点放在眼前的更深层次的问题上，设计才是解决方案。一个坚实的过程应该始终指导我们的工作，但是我们需要拥抱一些更灵活的东西。我们的介质终于证明自己是流动的，所以我们的过程不应该吗？考虑一下系统设计：您需要同时看到整个图景和微小的细节。不可能的？离得很远！
弗兰克·奇梅罗（Frank Chimero）在他的《设计的形状》一书中精美地表达了这一观点：“在某些方面，艺术家从画架中退后一步，以对作品有新的认识。绘画在近处和远处是相等的：近处时，艺术家会努力工作以留下自己的烙印。在很远的地方，他对作品进行了评估，以分析其品质。他退后一步，让工作与他交谈。”
我们需要让我们的工作，我们的媒介与我们对话。随着响应式设计的兴起，我们终于拥抱了原本应该是流动的媒介。现在是退后一步，评估工作，分析并采用新的工作方式，新流程的绝佳时机。静态模型和不懂代码的网络设计师的日子已经一去不复返了。现在是时候做出响应了。
响应式方法
在本文开头，我们将为一个坚实的流程揭露一个大秘密。因为我们如此疯狂准备好？响应过程是负责任的过程。模糊的？也许。愚蠢的？不会。像之前的Web标准运动一样，响应式设计正在通过对未来友好的方法推动Web向前发展。
像任何设计过程一样，它应该关注所有背后的“为什么”。那么为什么存在网站？传递内容。那可能是基于任务的，社交的，信息性的……没关系。一切都归结为这一点：从为什么，结构合理的内容以及重要的交互开始。
以下是我们最常听到的有关响应式设计过程的问题。
如何首先保留内容？
我们在项目开始时都很乐观。 “内容至上！”我们说。 “用户目标！记住重要的事！”这是真的。但是这是什么意思？您如何实施以内容为先的流程？
即使您知道（或认为知道），也很容易随着项目的进行而忘记。长期项目有不断拖延的趋势（以及……和……）。我们不再思考原因，而开始关注如何做。我们自欺欺人，以为我们的项目可以分为可以独立存在的单独的“发现”和“开发”阶段。
事实是，我们必须一直不停地问为什么。无论您以为自己知道多少，也无论已经进行了多少计划–每次做出决定，每次设计按钮或撰写标题时，都必须问……
为什么？
我为什么要这样做？是给谁用的？它将帮助我的客户实现什么业务目标？它有什么需要帮助我的用户解决的？不要只保留内容。首先保留原因。
这听起来很容易。但是要做好，就得努力。推动您的客户和您的团队先定义他们的理由。没有Lorem Ipsum，没有“我们以后再说”。做你的作业！您所有的操作方式都需要从坚实的原因开始。在Yellow Pencil中，这意味着我们对项目的推销，估算，预算和计划方式进行了巨大的改变。我们必须争取预算和时间来进行可靠的研究，策略和规划。你可能也是。但是，一旦您的客户和您的团队看到了定义内容需求的巨大好处，他们将永远不会回头。
培训他们是我们的工作。 （如果您想了解有关与客户打交道的更多信息，请阅读Mike Monteiro的出色著作《设计就是工作》。）客户可能很难理解进行所有研究和预先工作的价值。他们为什么要这么做？他们最终并没有“完成”任何事情，而且他们常常只是得到一张发票和一个大的Word文档。
那不是他们的错，这是我们的错。更好地证明这一价值是我们的责任。每一步，我们都需要将其归结为最重要的原因。
这对于响应式设计尤为重要。响应迅速的网站不需要进行更多的开发工作，但确实需要进行更多的计划。确实，我们计划一直以来都应该这样做。目睹当前每隔三年重新设计的项目周期。您要继续这样做吗？我们肯定不会。
因此，这是在项目过程中首先保留内容的三个步骤。
01.定义您的业务和用户目标
为项目建立业务和用户目标的优先列表。您的用户最想知道或做什么？做你的研究。做出明智的推断，而不是疯狂的猜测。征求所有利益相关者的同意。
02.尽可能多地参考他们
每次您做出决定时，每次有人提出新功能或设计元素或内容页面时，都要让他们将请求映射到业务和用户目标。此功能将满足什么实际需求？真正的原因是什么？ （提示：“因为我想”或“我真的很喜欢蓝色”或“ Facebook上的所有人”均不计算在内。）
03.不要害怕后退
这可能是一个艰难的过程。客户关系可能很微妙，可能很容易放弃赢得战争的战斗。但是请记住，我们在一起！这不是企业与用户的对决；我们与他们。
满足用户需求是满足业务需求的最佳方法。因为没有我们的用户，我们就没有生意！客户（好的客户）并不是要您对所有事情说“是”。因此，如果您的客户要求的东西不能满足他们的目标或他们的用户的需求，请不要害怕挑战他们。这与自我无关。这是关于创造最佳解决方案的方法。
04.也推动自己的团队
在创意团队中工作时，这也可能是一个挑战。角色分离（视觉设计，用户体验，信息体系结构，内容策略，内容制作）可能导致沟通不畅。我们很忙，我们不知所措。从头到尾很难坚持一个项目，尤其是在完成“您的”工作之后。
您团队的关系至少与客户关系同样重要。正如我们对待客户一样，我们必须提醒自己原因。协作是关键。您不能简单地“交出”内容计划，线框或设计。我们必须尽可能齐心协力。 “完成”可交付成果并转移到其他目标很容易。当事情变得艰难的时候，留在一个项目上要困难得多。
瀑布式的创造性工作是行不通的。团队成员之间的敏捷协作工作可以带来更好的结果。
05.预先定义所有内容需求
事情就是这样：响应式网站需要更长的计划时间。我们不再只是在计划一个单一的环境。我们正在计划我们现在所知道的所有背景，还有一些尚不存在的背景。
但是，针对所有这些复杂性进行计划所需的时间要比回头重新安装您没有考虑的功能要花费的时间少得多。因此，花时间/精力/预算。在您进入设计之前，强迫您的客户和您的团队定义（并承诺！）他们的所有内容。使用页表。使用结构化内容。立即证明您的内容永不过时！或稍后再哭。
如何从演示中提取内容？
您在Internet-o-sphere上听到了很多。但是等等，什么？等待-为什么？
因为演示可以（并且将会）改变。 15年前我们设计网站的方式几乎与现在的呈现方式无关。但是你知道什么没有改变吗？字。我们仍然使用'em。互联网主要用于（基于文本的）内容。我们仍然使用它来解决信息问题；完成任务。但是，如果您的内容取决于演示方式（Flash简介页，有人吗？），那么很可能几年之内将无法使用。那太糟了。
我们需要停止在布局方面思考内容
我们（作为一个行业）已经培训了客户以布局的方式思考内容。我们说：“将其放在侧边栏中。” “那应该放在页脚中。”停止！停下来。停止。这与位置无关。这是关于优先级的。对您的用户来说，最重要的内容是什么？因为猜猜是什么：布局会根据上下文而变化。小屏幕设计上可能不会有侧边栏。
您的客户想要的巨型超级菜单？不会在iPhone上飞。
强迫您的客户独立于设计计划其内容
好的，您不必强迫他们。鼓励他们。强烈鼓励。页表对此非常有用。如果您还没有读过它，请立即继续阅读Kristina Halvorson和Melissa Rach的网络内容策略，以获取有关如何创建它们的更多信息。按优先顺序组织它们。不要参考位置或布局。这将帮助您的客户以更有效率的方式考虑其内容，并在最终确定线框或设计之前推动内容创建过程的进行。
在设计之前完成您的内容
好的，这并不总是可能的。但是，在开始设计之前可以消除的不确定性就越大，那么以后再去进行更改时所需要的操作就越少。
每次使用真实内容
如果可能，请使用特殊情况的内容–向客户显示最复杂的页面，图像和菜单。当他们在成品中看到最混乱的内容时，这将避免在过程的后期出现意外。
功能强大的浏览器内线框带来了与众不同的世界。让您的客户观察他们的内容在各种屏幕尺寸之间的移动和变化。在展示线框时指出这一点（正在做面对面的演示，对吗？）向他们演示如何在布局变化的同时，它们的信息优先级在整个屏幕尺寸上保持不变。
那么线框如何用于响应式设计项目？
我们坚信，RWD的交互设计必须快速且经常地进入浏览器。创建描述所有内容的静态文档几乎是不可能的。当然，我们可以创建一个演示三个，四个或五个断点的文档，但这只是故事的一小部分。断点之间的所有时刻如何？这发生在浏览器中。
素描
尽管如此，还是能够快速协作地勾勒出您的想法还是一件好事。不需要在任何特定的介质上进行此操作，但是笔上有一些关于铅笔的东西。此处的全部目的是快速迭代地提出想法。我们喜欢尽可能画草图，甚至还有一个应用程序：UI Sketcher。
浏览器内框架
这是给我们的真实机票。当在浏览器中演示RWD时，我们喜欢重用模式和系统。当然，我们可以每次从头开始创建自己的系统，但这并不能帮助我们或我们的客户。
我们还喜欢使用快速响应原型框架，例如Twitter的Bootstrap或Zurb的Foundation。我们个人倾向于Foundation，因为它适合我们的工作流程。如果任何一个采用小屏幕，低带宽优先的方法，那就太好了，但这就是我们的发展方向。
注解
RWD线框的批注是必不可少的，但我们发现，它常常被忽略。大声说出来：文档，文档，文档！我们已经从朋友那里看到了一些示例，并且认为陪审团仍在“正确”对浏览器内响应式线框进行正确注释的“最佳”方法上。如上所述，我们经常使用Zurb的Foundation，并喜欢使用其Reveal附加组件来显示我们的注释。这些注释仅在较大的屏幕上显示，理想情况下可以打开和关闭。
在线框中使用真实内容
关于线框和设计模型的Lorem Ipsum一直有很多争论，但是如果线框中没有真正的内容，那就错了。内容告知交互决策，并告诉您设计何时中断。 Lorem Ipsum如何做到这一点？
我如何首先为小屏幕设计？
多年来，我们在设计时就考虑了特定的分辨率。这是默认设置。无论是在笔记本中进行素描，在OmniGraffle中进行线框图绘制，在Photoshop中工作还是在浏览器中进行设计，我们都知道画布的尺寸。那些时光已逝。我们非常相信为小屏幕进行设计并逐步进行改进。那么，设计师如何将他或她的工作流程从固定的画布大小更改为流畅的画布呢？
从一开始就从设备进行抽象设计
除非我们针对特定设备进行设计，否则至关重要的是，我们必须停止考虑设备并开始考虑体验。以下所有技术都可以帮助设计人员在保持设备不可知性（最大程度上）的同时，设计出自己的体验。
使用样式图块
使用样式图块确定方向并快速迭代。样式图块使设计人员不必过于具体就可以确定设计系统的方向。他们的创作者萨曼莎·沃伦（Samantha Warren）通过以下方式对他们进行了描述：
“样式图块用于当情绪板太模糊而伴奏太文字时。样式图块可与实际界面元素建立直接连接，而无需定义布局。”
创建界面和谐
想象一下将所有视觉和互动元素融合在一起的画布。不是查看特定的UI布局，而是查看所有元素如何协同工作。这是一个界面和谐画布。界面和谐画布使设计人员能够将想法融合在一起，但不必专注于任何一个屏幕尺寸。另外，这是有效交流和记录设计元素的好方法，而不是生成完整的样式指南。
如果您有兴趣进一步阅读，可以在这里和此处找到关于界面和谐主题的两篇优秀文章。
在浏览器中查看所有内容
所有内容都需要在浏览器中组合在一起。这是UI设计真正栩栩如生的地方。看到真实内容如何与视觉元素交互至关重要。无法在静态环境中正确执行此操作。您需要查看它在本机介质中的响应方式。
平衡静态程序
浏览器和静态程序（例如Photoshop）之间存在流程。应该有一个平衡点，允许以流畅自然的方式创建设计系统。当然，这将在Photoshop中发生，但是响应式设计的设计师也需要学习如何在浏览器中进行创造性思考。
结论
再次感受：从为什么开始，从结构良好的内容和重要的交互开始。首先关注小屏幕和低带宽，并逐步增强您的响应式概念。我们的媒介正在走向成熟。我们有机会做正确的事情并改变世界，一次一个Web项目。
发现适合设计师使用的20种最佳线框图工具
Steve Fisher协调了加拿大Yellow Pencil的研究，分析，设计和策略，并就RWD，UX和开源等主题发表了演讲。 Alaine Mackenzie是Yellow Pencil的内容策略师。
