响应式 on Victor42

避免3种响应式设计灾祸

hi@victor42.work (Victor42) — Sun, 26 Apr 2015 11:42:00 +0000

[国外设计第83期]

响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。

本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略。

缩放、流式布局与响应式

这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。

缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。

上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。

流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。

上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。

响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。

上图：不同分辨率下响应式布局的例子。

灾祸1：菜单折行

如果在页面顶部使用了导航栏，当页面展现在小屏幕上时，响应式设计通常会把它“掰”成更紧凑的格式，但这并非总是有效，如果显示区域比断点更宽，又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。

有些方法可以解决这个问题。其一，减少导航栏中横排菜单项的数量，将它们分门别类。然后选中某类时，你可以通过下拉菜单来显示子类。

其二，减少断点的数值。应该以导航栏开始出问题的实际数值为准，而非具体设备尺寸。

其三，不同设备使用不同方式，例如滑动抽屉。

灾祸2：使用固定宽度图片

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时，图片就被裁剪了。

上图：糟糕的固定宽度图片例子，它太大了。于是出现了滚动条，内容被推到屏幕之外。

通过给图片设定相对单位，可以避免这个问题。或者使用支持响应式的框架（比如Bootstrap），使用响应式图片class名来控制（例如class=“img-responsive”）。

上图：同样的元素，用响应式图片class名的方式，滚动条就不见了。

灾祸3：元素的扭曲

这有点晦涩难懂，但本质上，布局显示在小窗口上的时候，所有未经处理的列都会以行的形式呈现。这是个问题，因为内容的扭曲会不经意地改变设计的层级。

上图：列变成了行，扭曲了内容。

解决方法显而易见，但令人惊奇的是，仍有很多人在纠结它：只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置，盖住了其他元素，可以通过将它包裹在div容器中，设置外边距，迫使它回到原本的地方。

规划有助于避免问题

本文只讨论了3种最普遍遇到的响应式设计灾祸，还有很多其他途径会毁了一个好的设计。预防错误并不难。现代浏览器都有内置的响应式布局测试，好好规划设计，多做测试。

原文链接

作者信息： EMMA GRANT Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com More articles by Emma Grant

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

hi@victor42.work (Victor42) — Sun, 12 Apr 2015 00:18:00 +0000

[国外设计第82期]

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

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

设计与开发的协作，在响应式网页设计（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

如何让响应式设计保持迷人

hi@victor42.work (Victor42) — Sun, 18 Aug 2013 22:14:39 +0000

[国外设计第6期]

响应式网页设计很流行，而且绝无秘密可言。行家们倡导，各品牌趋之若鹜。这不仅是创建一个移动端站点，而是让你的网站适用于每种浏览器尺寸，不论桌面端、平板还是智能手机

响应式设计的秘诀，是创建一个不论大小尺寸都美观的网站。在点开你的设计软件着手动工之前，你需要考虑很多。这是个额外步骤，最终成品却总能证明它的价值所在。很明显，设计师若不考虑响应式设计，网站就会倾向于呆板无趣

设计师绝对有必要保持自己的创意贯穿整个响应式站点。鉴于更多人在使用平板和智能手机，你总希望保证每个人都能访问你的网站。这里有一些提示，可以帮助你在设计响应式网站的同时，保持创意和高效

1. 使用绝妙的字体

对于响应式网站，你不得不考虑它在小屏幕上看起来如何。好的字体是所有优秀网站的重头戏，然而它在响应式设计中，却几乎成了必需品。随着屏幕减小，大部分元素都应该变化、缩小或者移动位置。首先，也是重中之重，你的字体要具备这种能力

第二，你得用不同标题尺寸和多种文字大小。如今，我们在桌面端设计中常常使用巨大的标题和页头。这点不必延续整个网站，因为你总得考虑更小尺寸。确保你使用FitText这类插件来缩小字号就好，它很管用

Smith用了很多种不同字体来打造引人注目的外观和氛围。也将不同字体大小贯穿全站。桌面模式下，文字和段落多列布局的方式很有意思。当窗口被缩小，文字压缩成一列。所幸文字的比例和样式没变，保持了一致性

Smashing magazine的做法也一样。窗口缩小时，整个抛弃了右半边的设计（广告）。无论如何，窗口中的文字、样式、颜色和大小都始终如一

2. 使用精彩的图片

和文字排版一样，图像在任何网页设计中都至关重要。在响应式设计中，当你在更小的屏幕上查看网站，你的图片应该相应更小或等比缩放，这点也和文字相同。响应式设计中有成百上千种不同布局和图片尺寸。注重图片的选择和使用，因为它们毫无疑问会发生变化。随着屏幕变大或变小，图片会改变形状和展现方式，或被裁切掉一部分

理想情况下，你会希望确保窗口尺寸变化时，大幅摄影图片不会有任何裁切。另外，在你制作图像时，必须保证你的作品加载速度快，而且对小尺寸屏幕可见。这就是为什么设计师推崇扁平设计，它使得这点更容易

在Pandiscio中，首先你得注意一下这个大标题图片在桌面端的样子。它是完整的，伸向两侧边缘，而且质量相当高。当你缩小窗口尺寸，图片也跟着变小、变化形状（从矩形变成方形）、被裁切。他们找到了随屏幕尺寸变化仍保持美观的图片

KinHR是个使用了各种不同图形化元素的网站。请注意在大小尺寸下，头图会像Pandiscio一样缩小。但无论如何，在网页主体部分中，图片缩小却保持外形不被裁切

3. 不要忽视导航

如果人们不知道如何浏览你的网站，那他们就直接不浏览了。响应式设计的导航更难处理，因为我们已经习惯于为横向设计打造导航。如今，我们得创建能够轻易压缩以适应纵向规格的导航

只有少量链接时这并不是大问题。你可以将你的导航变小或缩至顶部，也可以为访客提供一个下拉菜单。主要问题是该如何处理包含更多内容的繁重导航

Mashable有大量链接，因为它有大量的分类甚至更多的文章。在这之上，他们还有自己的公司二级页链接。Mashable决定在左侧为小屏幕浏览器创建一个弹出菜单

Monocle网站导航顶部有两块延伸部分。为适应小尺寸浏览器，他们为极端情况的内容创建了下拉菜单，并且缩减了导航的第二部分

4. 使它好玩

点击网上的链接，在看见页面之前，你很可能要坐等内容加载。精确地找到“下一页”按钮来浏览更多内容也非常令人讨厌。这类的事情并不好玩，也不直观

注重细节并使你的网站更加直观，会令你的网站更值得分享。想想在所有尺寸的浏览器上使用同一个网站会是怎样。想想你执行一个操作时网站应该如何反应。找到这些问题并修复它们，你的网站用起来就会很容易、好玩和直观，同时也使它更有趣点！

Mud注重各种过渡效果，使得他们的网站更加有趣。很多元素滑动下拉和淡入，而不仅是唐突地移动和出现，从而创造一种非常顺滑的感觉，与众不同

在作品集之间跳转时，Neue Yorke用了很多动态效果。动画再次创造出了高端的感觉，让访客对即将显示的内容兴趣十足

5. 跳出条条框框

如果其他办法都没效果，那就发挥创意吧。响应式设计并不意味着要束缚我们的创作方式。总有实现创意的空间，无论通过代码还是设计

Enso创造了一个看起来绝非响应式的网站。注意尺寸缩小时布局如何一点点变化，却仍然保持着他们的品牌和创意

TBWA有一个创意精彩的网站，不过他们也有精彩的图片和字体！他们物尽其用打造了一个非凡且有趣的响应式设计

结论

在响应式设计或任何网站设计中保持创意，和画出构思并修改定稿一样简单。开始计划网站的作用和功能时，会比着手动工更好玩。响应式设计未必是一件重大、万全的任务，广大设计师畏惧的那种。它非常简单！记牢所有我们之前讨论过的，然后创造世所罕见的精彩网站吧！祝你在响应式设计中好运相伴

原文链接