消除响应式网站设计中的缺陷

在过去的5年里，移动流量的份额增长了20%，今天响应式网站设计已经被认为是理所当然的了。到2020年，您可以通过手机访问任何网站，它会很好用。大多数用户如果看到一个网站在他们的智能手机或平板电脑上表现不佳，就会离开该网站。如果没有针对移动设备进行优化，谷歌将降低该网站在搜索结果中的排名。

因此，响应式网站的设计需要一种特殊的方法，不同于静态网站的开发。设计师使用响应式网站设计，设计首先由用户的设备（智能手机、平板电脑或电脑）决定，然后根据设备的屏幕大小显示。

一方面，创建响应式网站设计简化了网站的开发和维护，代码和SEO将是相同的所有设备。另一方面，响应式站点不仅仅是拉伸整个站点以适应屏幕，而是调整页面上的每个元素。响应式网站设计不能100%控制内容和风格，因为设计师永远不知道用户设备的大小。在设计响应式网站设计时，有抱负的设计师会犯一些常见的错误，而有经验的专业人员不得不做出妥协。

一、当响应式网站设计是不友好时

1、速度慢

响应式网站设计通常意味着移动用户的加载时间很长，在适应设备屏幕之前，网站的全桌面版本必须加载。所有的内容都会自动加载，即使是那些不会显示给手机用户的内容。

此外，尽管移动设备被广泛采用，无线互联网的速度仍然很慢。再加上大量的图片和视频，这使得在移动设备上使用该网站非常困难。

2、裁剪功能

有了响应式网站设计，网站在不同设备上的体验会有很大的不同。通常，设计师会删去他们认为在移动设备上没有必要的功能。但是这样的决定打破了用户的期望，特别是当他们已经有使用扩展版网站的经验。他们来到这个网站寻求解决问题的方法，并希望无论使用什么设备，都能获得相同的功能。

另一个折衷方案是在"请求桌面"网站的移动版上增加一个按钮，以照顾用户并让他们选择为幌子。但说实话，在设计移动版本并负责用户如何接收设备上的内容时，我感觉自己很懒。

3、尴尬的可用性

响应式网站设计意味着相同的内容被优化为正确的屏幕大小，但是内容体验需要是特定于设备的。

有时候设计师对网站移动版本的内容和界面不够重视，或者没有参与跨平台测试。因此，用户被迫无休止地滚动冗长的页面，在导航菜单的层次结构中下滑，在不舒服的表格中导航，仅仅因为这些内容以与桌面版本相同的方式呈现。

二、修正响应式网站设计中的错误

1、真正的适应性

考虑如何在移动设备上最大化网站内容。列、导航、表格和表单会是什么样子？简单地缩小尺寸不是一个好主意，需要一种更深思熟虑的方法。

当用户使用不同设备时，首先考虑用户的需求和情境。在页面上突出行动呼吁，建立一个简短和方便的路径，让用户成功地达到他们的目标。

2、导航和屏幕

当然，移动设备上的导航不同于桌面屏幕上的导航。移动设备上的导航需要简化，这样用户就可以快速访问他们需要的信息。要做到这一点，您可以尝试使用标签，以避免将桌面导航隐藏在汉堡包菜单后面。

用户习惯了手势。他们喜欢翻动卡片，拖放列表项，缩放图片。只要有可能，尽量为导航设计触控手势支持，使操作更直观。

移动设备（智能手机、平板电脑和笔记本电脑）激增的另一方面是对宽屏设计的关注逐渐减少。但是桌面电脑仍然很流行，为它们正确地显示网站页面仍然是设计师的工作。

不要忘记宽屏。在大屏幕上，用户可能会注意到设计师的错误，比如背景图片的宽度固定，两边有间隙，字体太小，文字的列数过窄。

无论用户的设备有多大，都必须最大限度地利用空间。

3、负载优化

图片占了很大一部分，最多占页面重量的50%。加快您的网站速度最简单的方法是优化您的图片。只要有可能，为界面创建矢量图形，并使用Sketch的内置工具和第三方服务优化光栅图形。还可以联系开发人员，讨论如何使用代码准备图像进行进一步优化。让图像逐渐加载，而不破坏布局。

4、排版和布局

当缩小屏幕的宽度时，减小文本的大小是值得的。但是如果您把字体做得太小，它就会变得难以阅读。如果您把它加得太多，用户就不会想要滚动浏览很长的文本行。为了获得最佳的可读性，每行理想的字符数应该在60-70左右，字体大小为16px，也就是8-10个单词。

素描镜使它很容易检查如何布局将看，生活在一个移动设备上。这个应用程序将帮助您找到舒适的阅读和页面内容的简单导航之间的中间地带。

5、表格和形式

电子表格和形状对于设计人员来说也是一个头疼的问题，当他们为移动设备设计时。

在更小的屏幕上显示表数据有不同的方法。他们可以添加水平滚动，完全重新设计数据，或者将行变成卡片。数据可以被重新安排，折叠成列表，停靠在屏幕的边缘。您选择的解决方案类型主要取决于您拥有的数据类型。

表单也应该易于通过电话填写。而不是一长串的字段，适合在一个屏幕上台式电脑，最好是做一个循序渐进的向导界面和使用移动模式：上面的标题字段，显示错误在提交表单之前，做分页如果分页的形式，等等。

6、为用户而不是平台设计

创建一个有用的响应式网站设计的最好方法是同时设计手机和平板电脑版本。为用户而不是设备设计。用户可以在智能手机和电脑上用不同的方式解决他们的问题。但是，无论平台如何，您都需要同样注意为用户设计体验。