在响应式项目中连接设计与开发

优秀的网页项目，不会单靠好的设计或是开发就能成功——它也需要设计师与开发者的沟通与协作。

我看过相当多的设计师与开发者由于缺乏沟通而糟蹋了项目，结果导致关系恶化。我也见过很多初学的设计师和开发者，通过团队协作创造出惊人的结果。他们避开了潜在陷阱，及时发布项目，并且迅速迭代。这种协作不仅对项目有益——善于沟通协作的团队也是一个更快乐的团队。如果任务并没有如愿进行，也会有更少的误解与紧张。

设计与开发的协作，在响应式网页设计（RWD）项目中尤其重要。各团队如今都要应对大批设备。固定的、“像素精准”的设计，如今该让位于流动的百分比设计。而且，图片资源也需要为多种设备尺寸与分辨率进行优化。

简而言之：响应式设计带来更多变数，需要交付更多资源——这也会导致更多问题。我发现一些技巧，可以克服这些障碍。

1. 首先关注“最极端”的屏幕尺寸

如果对此存疑，可以根据网页的一般经验设定屏幕尺寸范围：iPhone尺寸和桌面浏览器展开。

尽管有些设计师直接“在浏览器中”创作，一开始就完全是流式布局。但多数设计师仍然从固定尺寸开始：选定一组屏幕宽高，以此绘制效果图。

但这提出几个问题：你对开发团队重视到何种程度？应该首先交付哪些高保真资源？由于技术限制需要先考虑哪种设备？

我一直都建议从最“极端”的用户设备入手——最小和最大的设备尺寸。如果对此存疑，我建议以此为2015年的网页用户标准：

• 320 x 568像素（iPhone 5竖屏）
• 1600 x 1000px（桌面浏览器展开）

注意：你的用户可能存在差异，所以要看数据分析来定义你的“极端情况”。

“为最小和最大的设备尺寸设计，以此为响应式设计项目的起点。”

先应对最小的屏幕尺寸，这会迫使你做出艰难的选择，选出设计中最重要的功能。大屏幕尺寸则让人从另一个方向思考：最多包含多少内容？文字段落是不是太宽不易阅读？下拉菜单元素需要额外留白吗，如果需要，多少才能避免给人脱节的感觉？最后，选定最小和最大屏幕，通常需要你思考至少两种输入方式——最小的屏幕基于触摸操作，最大屏幕则使用鼠标和键盘操作。

可能最重要的是，当你应对极端情况时，你是在同时处理两种尺寸。并非完全绘制出一种屏幕尺寸，而后去适应另一种。那样会引发设计与开发的冲突。

2. 在各个断点之间讨论内容布局

既然在静止线框图和排版上投入这么多，就千万要记住，响应式网页设计天生是流动的。这意味着众多网站用户体验到的，是你设计的“中间”状态。所以几乎每件设计，都需要考虑特定尺寸间必要的布局调整。比如当尺寸减小时，内容可能会收缩，图片减少为单列。

要避免主观臆断，认为开发团队能够或是应该实现那样的布局调整。尽早行动，先知会你的开发团队，避免他们陷入太深。对于特别复杂的布局变化，最好另外绘制一张线框图或效果图来说明。特殊性不太重要的情况，通过简单的讨论，或者用邮件描述这些变化就足够了。

3. 尽早制定资源图策略

很多响应式图片需要多套资源。我个人网站的主页头图，根据屏幕尺寸和分辨率不同，会从6张不同图片中选择一张呈现。

图片格式与尺寸，通常是设计师与开发者之间的障碍。你可以使用PNG、JPG、图标字体，或者用SVG实现更小的元素或图标。并没有哪个是正确答案：一切都取决于内容和可用的资源。但重要的是对某种格式达成一致，坚持使用它。而且随着网页项目的进行，你还可以创建一些常用图片尺寸。

不过对于如今的响应式设计，这只是刚开始。你要至少输出2套位图资源（JPG）：1套给普通显示器，一套给高分辨率显示器。高级的响应式图片技术，需要更多套资源适应不同屏幕尺寸。

避免到项目末尾再决定响应式图片格式。至少要有一套像素密度显示策略。看看srcset和Picturefill，来保证良好的跨浏览器支持。如果感觉太过了，就从简单入手。用srcset属性来更换一些图片元素，这是个好的开始。看它如何处理，然后由此展开。

4. 微观的思考，模块化的设计

我的响应式设计工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS影响。两者的框架都依赖小型、可复用的组件，以此为基础打造强大的网站结构。

对于交付给开发的资料，我喜欢先专注于小型、可复用的组件。因为它们在不同设备上，通常表现出同样的体验和外观。这样的统一性有利于开发团队消化。另外，小组件通常更容易跨页面复用。所以如果你设计了一套有效的解决方案，之后再重复使用就非常简单了。

小组件通常在不同设备上表现出同样的体验和外观。这样的统一性有利于开发团队消化。

假设你在设计一个注册页面，有标题、大幅图片和表单。根据设备不同，这些元素可能会变换交错或是改变尺寸。起初，要同开发团队一起专注于注册表单的小细节。它看起来是怎样的？需要怎样的验证？相对鼠标键盘，触摸输入会使表单发生什么变化？

5. 从开发者那里获得视觉与用户体验的反馈

有些设计师把开发者阻挡在产品会议、可用性讨论和其他反馈机会之外。只有一个启动仪式，交付一些资源，和一点点其他东西。这是错误的。

要记住，经验丰富的开发者掌握大量知识。如果他们与产品接触了一段时间，他们可能也有独到见解。

前端开发者和设计师的技能通常是重叠的。越来越多的设计师自己写代码。开发者也在刻苦钻研快速原型设计、线框图和美术设计。响应式设计加剧了这项趋势。即使没有“设计师”的头衔，一名开发者也可以表达出强有力的设计见解。

我们得承认，角色与责任的独立仍然有其价值。但稍加融合便可显著改善最终产品。所以，在你的下个可用性测试中，请一位开发者加入来讨论最终产出吧。或者如果你在进行一场设计头脑风暴，或许应该邀请一些开发者。

合作很重要

所有这些技巧都需要规划和认同。由于注重产品发布与截止日期，这就难以做到。但设计与开发关系良好对任何网页项目，尤其响应式设计项目都是有益的。初期的小投资，会为你的团队带来指数级的回报。

原文链接

作者信息：
Nick Schaden, Web Platform Lead at Pocket
At Pocket, Nick oversees development and design initiatives on Pocket’s web app, Chrome packaged app, and marketing web sites. He has extensive experience introducing and integrating responsive web design, both at Pocket and previously at Animoto, a video startup based in New York. Prior to Pocket and Animoto, Nick worked in technology at Gucci and Goldman Sachs. He loves electronic music and 80s action movies.
Follow me on Twitter

翻译：可乐橙