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

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

消除响应式网站设计中的缺陷(图1)

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

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

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

消除响应式网站设计中的缺陷(图2)

1、速度慢

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

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

2、裁剪功能

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

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

3、尴尬的可用性

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

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

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

1、真正的适应性

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

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

2、导航和屏幕

消除响应式网站设计中的缺陷(图3)

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

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

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

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

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

3、负载优化

消除响应式网站设计中的缺陷(图4)

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

4、排版和布局

消除响应式网站设计中的缺陷(图5)

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

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

5、表格和形式

消除响应式网站设计中的缺陷(图6)

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

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

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

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

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/228465.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月24日 00:37
下一篇 2023年2月24日 00:37

相关推荐

  • 教你网站设计中需要具体考虑的方面是什么。

    在互联网高速发展的今天,公司网站成为公司发展业务和提高在线形象的标配,网站设计就显得越来越重要。网站设计中更具体要考虑哪些方面,具体方面有以下几个方面: 1、网站实践的内容 有些网站建设公司,设计出来的…

    2023年6月15日
    02
  • 品牌网站设计,不只是这么简单。

    20世纪,世界上最伟大的发现,网络肯定是其中之一。如今大大小小的公司,都想搭上这台快车,透过建设一个网站,扩展销售平台,提升销售额。 但是,许多网页设计公司只关注于网页设计本身,忽略了企业希望了解通过网…

    2019年5月13日
    0232
  • 小编分享网站设计的五大流行方法。

      网站设计与平面设计、视觉设计等专业都有着不可分割的联系,所以网站设计是一个知识面非常广泛的行业,想要成为一个合格的网站设计师就必须要不断的学习各方面的知识。  在中的网站建设网站设计市场中,网站设计…

    2023年6月15日
    00
  • 我来教你提升用户体验度的网站设计技巧。

      网站设计工作中很多内容与用户体验密切相关,可以说是企业网站“面子工程”的主要缔造者。网站设计中与用户体验相关的内容有:网页的结构布局、页面的色彩搭配、字体设计、导航设计等等。一项做不好都会影响企业网…

    2023年6月15日
    00
  • 小编教你网站设计的八个步骤。

    由于快捷制作网站的工具越来越多,用起来也是越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。于是很多人认为网页制作简单,就匆忙制作自己的网站,但是做出来后才发现自己的…

    2023年6月13日
    00
  • 教你网站设计需要多少费用。

    一个专业网站设计开发费用需要多少?正值互联网经济高速发展的时代,网站作为现在大小企业的标配,已经成为一个热门话题,相信各个企业主,在做网站之前肯定也是考虑到很多问题,比如哪家网络公司从设计到开发比较专…

    2023年6月15日
    01
  • 小编教你网站设计中常见的问题是什么。

    很多企业老板花钱请网站设计公司做了企业的网站设计,目的很明确就是推广企业品牌,但是设计时会有很多问题,如何让网站设计公司帮您解决企业网站设计的问题,让网站真正起到无穷的力量。以下几点大概说说网站设计…

    2023年6月9日
    01
  • 我来教你网站设计对消费者行为的影响。

    随着电子商务的不断发展,网站设计的好坏对消费者的购买行为产生重大的影响.我们通过分析研究,决定从两个阶段来进行分析网站设计对消费者行为的影响。网站设计对消费者的影响分为两个阶段,第一个阶段是在消费者对…

    2023年6月19日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息