响应式设计是一个痛苦的学习，但它是一个学习的一个重要的部分。我们不再陷入Web 2.0，桌面空间有限。我们现在是屏幕上 - 争先恐后地购买，构建和随处学习。
在之前设计中，我们犯了一些错误，学习了响应式设计的细微差别。因此，与其看着你反复碰撞失败 - 我们想分享一些犯过的错误以及修复它们的简单解决方案。
副本太难读了
令人惊讶的是，能够轻松地做出一些简单的大小错误，将一个曾经漂亮的网站（或Web应用程序）变成一个微观的或庞大的版本。
根据无数变量，按钮，标题和副本可能很容易偏斜。因此，在您调整大小时请记住以下几点：
1.什么是重要的？
如果您正在设计一个可以获取（或将获得）大量流量的博客，则标题和副本必须清晰易读。不要太大，也不要太小，否则用户会没完没了地滚动或者需要放大镜。
同样，如果你是为电子商务网站设计，确保产品，在大多数情况下，价格很容易消化。如果其中任何一个到处都是，你就会产生摩擦，这会无意中影响销售。没有人想找到他们喜欢的东西（也会为了钱而放弃），只是意识到他们看不到价格，或者在媒体查询中发现“添加篮子”按钮消失了。
2.按钮和号召性用语（CTA）
用户从手机和平板电脑购买并采取行动时，响应式设计需要反映页面和网站目标。这可能会非常困难，因为有巨大的用户CTAs，使一个干净的用户体验之间的界限。
如果某些东西在桌面上运行但响应不快，不要害怕稍微偏离线框。毕竟，更重要的是实现这些目标，而不是确保它们全都挤在一起。
解决方案：
响应式设计时，测试和镜像是绝对必要的。不要认为只是因为Photoshop，Illustrator或Sketch中的某些东西看起来不错，因此它在响应式设备上看起来会很棒。不要依赖你的设计，直到你测试它们为止。“在你测试它们之前，不要重视你的设计。”
页面加载时间过长
大的图像和视频会减慢网站速度。
这就成为移动设备上使用的一个问题。如果您的响应设计不必要的图像/视频重，那么您将需要用户提交更多的数据（和时间）来查看您的站点。
需记住的一点是：：用户在移动浏览时需要方便。如果网站速度很慢，那么就像在桌面上一样，用户将会离开。
不管怎样，这会给开发者和营销人员带来无数的问题，所以最好避免创建“慢速设计”。
解决方案：
同样，这相当依赖于您网站上的重要内容。删除不必要的图片或视频，这些图片或视频在响应式网站上不会增值。
ZenDesk在这方面做得很好。他们的桌面网站拥有引人入胜的首页动画，它并不存在于他们的移动网站上，但它也不会降低页面的核心价值。
问你自己：
1. 这个网站的目的是什么？目标是什么？
2.将额外的图像真的是必要的吗？
设计杀死了功能
这个错误让我们感到畏缩。通过响应式设计失去功能是一个巨大的损失。客户和用户不会在短时间内原谅你。会激怒用户。
1. 对您的桌面网站有很深的印象，然后讨厌您的移动网站上的功能丧失。
2.成为网站新用户，注意设备上的功能很差，然后永远不会回来（他们甚至可能会告诉他们的朋友）
一个例子：移动的夹点和变焦功能的丢失。在桌面上，您可以放大信息，轻松调整文本大小，并找到可读性良好的媒介。对于视力不好的人，或者那些渴望看一些小信息，一捏和缩放功能的缺失是真正的扫兴的事。
解决方法：
不要将这样的功能留给开发人员。如果你是一个文本沉重的网站，或者你知道你的设计将会触及一个功能是关键的观众，哪怕就包括一个明显的屏幕或者一个原型。
除非你把你的想法放在某个人面前，否则他们仍然是你的想法。人们不是心灵的读者。
你不了解我们的用户
不要以为开发人员可以选择通用的响应式设计并创建解决方案。 这不公平。
这就是为什么我们需要考虑谁使用我们的设计以及何时何地使用我们的设计。
这就是角色营销派上用场的地方。如果您手边没有营销人员或营销部门，那么创建一个简短的人物角色文档可以帮助您解决设计工作中的一些麻烦问题。
“作为设计师，我们需要考虑谁在使用我们的设计以及何时，何地以及如何。”
创建角色时要包含的信息：
姓名：总是给人物角色名称（例如“设计师chen”） - 这使得该过程更具人性化
图像：面部使过程更简单，更个性化
职业：这个人为了谋生而做些什么？不同的职业喜欢不同的设备。
位置：如果主要用户群位于中国西，他们可能会使用与别国人不同的设备
浏览习惯：他们浏览的方式和位置？他们是否可能在沙发上放置平板电脑或放在桌上的笔记本电脑上？
目标：他们的目标是什么，他们将如何努力实现目标？
挑战：他们在生活中面临哪些挑战？他们将如何努力解决这些挑战？
解决方案：
使用角色营销来了解有关最终用户的更多信息。你知道的越多，决定哪个响应式设计变化就越容易。它也将帮助您超越“一刀切”的响应式设计障碍。
小贴士
如果你只从本文中拿掉一件东西，确保它是这样的：你需要考虑你的设计。
现在，我们通常不会推荐任何东西。但通过设计工作，细致的思考过程可以带来极具响应能力的设计。
网友评论