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

在过去的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

相关推荐

  • 不同时代的网站设计技巧。

    对于大多数网站设计师来说,基于特定的目标受众来计划一个网站设计项目是显而易见的。它可能是为那些喜欢苏打水或购买电子游戏或对运动鞋有亲和力的人。但是另一个需要考虑的问题经常被忽略——为不同的时代的用户设…

    2023年2月24日 SEO操作
    00
  • 网站设计如何改版来提高利润?

    网站设计,如果企业网站做得好,企业在短短几年内就可以改变很多。三年前,移动端占所有互联网流量的10%。今天,它跃升至38%,谷歌已经推出了排名变化,优先考虑移动端网站优化结果页面。买家也改变了。今天的网站…

    2019年10月30日
    0250
  • 现代网站设计的6个要素。

    现代网站设计的6个要素,每个领域都有其发展趋势。有些东西变得流行起来,而有些东西则变得无足轻重。同样的规则也适用于现代的网站设计,传统的规则和趋势是不断变化的。如果经典的样式使你的网站时尚和易于识别,…

    2023年2月15日 SEO操作
    00
  • B端产品如何巧用动效?来看腾讯的实战案例复盘。

    腾讯企点产品线,包括客服、电话营销、商通等 SaaS 产品,产品受众角色多,业务场景复杂,由于角色与场景的复杂性,在产品设计中也遇到了一些问题: 腾讯企点往期实战案例复盘: 1. 产品界面信息量大,操作繁琐 任…

    2023年3月1日 SEO操作
    03
  • 从10个维度,分析Instagram值得学习的视觉和体验细节。

    今天从 10 个维度,聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。一、Logo 的变化下图是关于 Instagram 的从 2010-2022 整个图标变化的过程,从中能发现:图标从拟物的风格慢慢变成扁平的风格。从…

    2023年3月2日 SEO操作
    00
  • 我来教你如何避免网站设计的常见错误。

    想想看,有多少次去一个网站或一个手机应用程序,却因为糟糕的设计而离开?回顾一些人们似乎认为没问题的最糟糕的UI设计。 杂乱的界面 对用户来说,最大的障碍之一就是界面混乱。你提供了很多很酷的功能和博客文章。…

    2023年6月13日
    00
  • 如何在你的网站设计上创建分层视差效果。

    网站设计中的视差效果,以不同速度移动图层的概念,已经在动画中使用多年。Bear Grylls的官方网站在新的和有趣的方向上发挥了作用。背景山缩小到合适的位置,同时渐隐,使它们变得完全不透明,在页面的背景中,文本…

    2023年2月19日 SEO操作
    00
  • 配图加工的秘方

    在进行界面设计的时候,对於图形图像元素问题,常常有以下的几种: 图形图像的像素不够大,需要使用到大尺寸时像素变得模糊; 素材自身不够新颖,没有明确的视觉焦点; 素材的质量不够高,如失调、曝光等一系列问题…

    2022年6月25日
    0123

联系我们

QQ:951076433

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