响应式设计中的常见危机以及如何解决它们

已发表: 2015-12-29

图 1

没有任何东西设置在坚实的基础和像水一样灵活的布局元素，它甚至不是传统意义上的“设计”。 响应式设计正在（并适应）市场上的设备流。 每个人都在尝试，成为一名网页设计师从未如此棒过。

响应式设计有很多实践，很难看到一组并称它们为最好的。 我们不能有一个“做什么”清单。 然而，我们可以从彼此的错误中吸取教训。

所以这就是我学到的响应式网络设计：

为您的观众设计。 不是你自己。

图 2
假设您正试图通过一个超快速、设计精美的网站和为这些移动用户提供的出色用户体验来吸引大部分印度观众。 那里有12亿人； 它应该是一个瞬间的，巨大的打击。 数字本身对你有利。 或者如果你知道那里只有 13% 的人拥有智能手机，他们就会是。 （来源：谷歌移动星球）。

这只是学习和理解您的受众至关重要的原因之一。

文化多样性、年龄、性别、职业、语言、流行设备等可能是影响您的品牌/网站成败的非常重要的因素。
这比听起来容易。

众所周知，设计师会忘记他们为谁设计。

因此，如果您手头没有 UX 架构师，您最好自己研究一下。 它最终会反映在你的工作上，所以不要耸耸肩说这不是你的强项。

对于特定于移动设备的号码，请使用 Google 的 Mobile Planet。 向您的客户询问他们的观众。

如果您能设身处地为观众着想，您将能够创建直观的用户友好型设计。 这不是火箭科学，只是基本的人类心理。

“线框”需要一个故事

如果没有交互，您的响应式设计项目将是不完整的。 这同样适用于您的模型。

你的设计（很可能）不会是一页纸的演出，内容出现而没有其他任何事情发生。

没有交互，没有状态，没有动画或效果：基本上所有可以使您的网站成功（或失败，如果不加思索地使用）的东西都被剥离了。 虽然 Style Tiles 是经典之作，但有充分的理由（正如其创始人所说，“围绕设计展开对话”），但在当今的设计术语中，它太简单了，无法达到复杂的程度。

花一些时间来创建您的想法的交互式原型。 在开始前端开发之前，在这些方面进行广泛的合作。

不要只是到处乱想。 你听说过讲故事吗？

只用您的原型和直觉向您的客户讲述一个响应迅速的互动故事。

使用 Balsamiq、Axure、UXPin 等工具来创建这些“故事”的可视化版本。 用文字激发他们的想象力； 用精心制作的原型喂养它。
它将有助于简化您以后的设计和开发工作，并为您提供一些明确的轨道来坚持。 作为奖励：第一印象仍然很重要。 一个好的原型表明你对这个项目充满热情。

内容：一是看得见、适应性强。 总是

您做出响应的原因是通过统一访问和设备无关，您的消息具有更广泛的影响力。

您必须隐藏您的内容，从而破坏了响应式设计的全部目的。

无论如何，您的移动受众都会下载数据，那么隐藏它有什么意义呢？ 创建内容元素清单。 确定哪些元素出现在所有页面上，哪些元素出现在特定页面上。 例如，您的 CTA 按钮可以在每个页面上，也可以在特定页面上（如登录页面、相关资源页面等）。

您从首先放置内容元素开始，然后从那里开始构建。 钟声和口哨声在最后。

首先：了解用户目标以及他们希望从网站获得什么，然后调整您的内容以便在他们的设备上轻松访问。

与其仅仅挤压一百万字的文章以适应移动页面，不如让您的用户有机会细读信息，而无需无休止地滚动。 前端或服务器端脚本不是（实际）答案。

做到这一点的一个好方法是使用简短而准确的摘要进行预览。

让用户决定是否要滚动浏览您的其余内容。 TL; DR 在每个人中都很常见（甚至是媒体组织，这就是为什么我们在没有实际事实检查的情况下发布故事，并且仅基于炒作）。 因此，在您的内容末尾添加一个部分并使其更容易。

第二：务必向用户提供完整的信息，而不是只提供零碎的信息。

使用响应式列和字体。 对流体数据表使用 Zurb 响应表。 压缩媒体（使用 CDN 和缓存来提高性能）。
内容就是你的信息。 无论设备大小如何，都要确保它清晰可见。

奖励：内容优先让您牢记内容层次结构，这使得设计导航的过程更加顺畅。

尊重设备限制和功能

图 3
当我们谈论“移动优先”或“渐进式增强”时，我们是否真正理解并适应最低限度的要求？ 以下是“最低限度”应该是什么的概要：

  • 可用屏幕宽度：最小 120 像素。
  • 标记语言支持： XHTML Basic 1.1 交付内容类型为 application/xhtml + xml。
  • 字符编码： UTF-8
  • 图像格式支持： JPEG、GIF 89a。
  • 颜色：最少 256 种颜色。
  • 样式表支持： CSS 级别 1、CSS 级别 2 @media 规则以及手持设备和所有媒体类型
  • HTTP： HTTP/1.0 或更新的 HTTP1.1
  • 脚本：不支持客户端脚本。

基于这些规范，创建功能设计并不难。 问题是扩大规模。
考虑设备尺寸是件好事，但这只是开始，而不是全部。 缩小和规范化脚本（性能和体验），设计干净的界面并注意足够的空白（用于窃听），尊重设备的连接性和负载限制（性能），并且始终严格测试在这里很重要。

请减轻负担

图 4
我不想在这个问题上喋喋不休（我们对此主题有很多意见），但不可否认页面速度对于更高排名和更好的用户体验的重要性。

简单地说：如果您的页面加载缓慢，没有人会费心等待它赶上。

像移动优先这样的方法实际上对此非常有效。 在渐进式增强中，我们从最简单的一切开始：UI 元素、功能以及我们正在为所有设备的最窄带宽而设计的事实。 那些仍然谴责移动优先方法的优点的人会同意，这确实将性能和速度置于其他一切之上。

此外，无需提醒您，您必须检查媒体的大小。

因此，请使用 CDN（适用于中高流量网站）和专门减轻页面负载的后端开发技术。 使用缓存。 通过在保存 JPG 图像以供 Web 之前选中相关框来提高感知性能（网站对用户的“感觉”有多快）。

保持您的设计精益求精（最不重要的是您的所有客户和用户）。

TL; 博士

因此，这是我为一个响应式 Web 设计所学到的：

  • 为观众设计。 稍微研究一下并使用 Google Mobile Planet（和其他类似工具）来获取数字。
  • 线框可以通过故事变得栩栩如生。 “原型”是指设备/系统的初步版本。 让它成为真正有效的东西。 使用交互式原型制作工具。
  • 使内容可见并具有适应性。 无论如何都不要在手机上隐藏内容，因为它会被下载。 如果有一篇原创文章，请添加更适合在手机上阅读的简短相关摘要。
  • 尊重设备限制和功能。 除了鼠标/手指点击辩论或尺寸之外，针对目标受众使用的最低设备规格进行设计。
  • 注意性能。 不仅是为了更好的搜索排名，也是为了体验。

作者简介： Lucy Barret 与 HireWPGeeks Ltd 有关联。她提供 HTML 到 WordPress 的转换服务，并且她有一个专家开发团队来帮助她。 她也是一位热情的博主，喜欢与大型 WordPress 社区分享她的知识。 在 Facebook 和 Google+ 等社交媒体网络上关注她的公司。