跳到主要内容

使用响应式模型进行的7个常见错误

响应式设计不仅仅是一个流行的设计趋势,这是对从桌面到移动的巨大浏览转变的实际回应。为了在当前的行业中生存,网页设计师必须支持多种屏幕尺寸和设备,并且响应式方法(RWD)解决了许多这些问题。

Image courtesy of PlasmaComp, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

图片由PlasmaComp提供,http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

作为为形式带来创意的过渡阶段,模型在设计过程中占有很大的份量。本文回顾了在RWD中进行设计时最常见的模型错误,因此您可以确保您的响应步骤向前迈出一步,而不是向前迈进。

01.设计设备,而不是屏幕

根据OpenSignal提供的数据目前市场上有24,093种不同的Android设备,而去年只有18,796种 - 这甚至不包括iOS和其他设备。

这种令人难以置信的多样性使得无法定位单个设备。更智能的策略是关注屏幕的大小。

Image courtesy of Luke Wrobelwski: https://www.flickr.com/photos/lukew

图片由Luke Wrobelwski提供:https://www.flickr.com/photos/lukew

不要考虑可穿戴设备,手机,平板电脑或台式机。将您的模型划分为:

  • 微型显示屏
  • 小屏幕
  • 中档
  • 超大

由于许多设备各不相同,因此特定屏幕尺寸为确定尺寸提供了更可靠的指标。想想手机的所有不同屏幕尺寸:有些尺寸大于小尺寸平板电脑。

专注于屏幕尺寸也可以防止依赖设备大小来响应断点,这是我现在要描述的另一个响应式模拟错误。

02.仅依赖于断点的设备大小

总有一个新的设备即将到来,即使你考虑到每个可用设备的断点,你的响应式网站也会在下一个大的时候出现问题。

Image courtesy of Stephanie Walter, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

图片由Stephanie Walter提供,http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

如中所述Web UI最佳实践通过UXPin,“构建到设计,而不是设备”:

  • 从...开始移动优先方法:为最小的屏幕构建一个模型,然后按比例放大。作为参考,iPhone的纵向是320像素宽。
  • 如果您的许多用户拥有可穿戴设备,则需要考虑具有更小分辨率的微屏幕。 Apple Watch是Pebble Time之后的最小尺寸,宽度为272像素。
  • 随着您的设计开始感到紧张,请添加媒体查询进行任何必要的布局更改,以使您的设计舒适,并在每一步都很好地工作。
  • 设计最大宽度为2000像素的覆盖范围涵盖了当今最大的显示器。根据来自W3Schools的最新浏览器统计数据,99%的访问者的分辨率低于2000像素大小。
  • 介绍响应断点基于设计的需要,以避免介于常见设备尺寸之间的令人不舒服的中间状态。创建一个“响应”屏幕尺寸的设计是RWD的本质。

03.忽略触摸控制

触摸控制是大多数移动设备的一大优势:它们既有趣又直观,而且节省时间。不要在某些设备上忽略它们,因为其他设备无法使用它们。以下是包含触摸控件的一些提示:

  • 了解每个设备的最佳实践。在小屏幕上,左下角是最容易进行拇指访问的地方,因此请将最常点击的元素放在那里。然而对于平板电脑来说,由于它们的保持方式不同,因此顶角是主要的触控空间。
  • 点击目标(如CTA按钮)必须足够大。最少44分符合有利于手指的指导方针。
  • 元素之间的建议间距至少为23pt,以避免点击错误的元素。
  • 适应缺乏悬停状态。您可以替换单击激活的函数,或从头开始显示本机状态的悬停元素。
  • 不要重新发明轮子。常见的手势像滑动工作最适合导航和其他功能,因为它们已经被用户学习。

04.链接到不适合移动设备的内容

您无法将访问者链接到您的网站或其他地方的其他网页或内容。响应式体验的问题在于,与设备无关的站点链接到无响应的网页。

如果您的响应式网站链接到外部网站,除了考虑替代网站之外,您无能为力。但是,当链接到您控制的网站和资源(包括微型网站或合作伙伴网站)时,您需要确保所有这些网站和资源都能提供始终如一的积极响应体验。

05.较大的屏幕规划不佳

我建议采用移动优先的方法,而不仅仅是移动方式。虽然较小的屏幕可能更受欢迎,但42%的流量仍来自桌面访问者。必须考虑屏幕尺寸谱的两侧。

Image courtesy of UXPin

图片由UXPin提供

以下是一些建议样机指南考虑“大局”:

  • 您需要做的不仅仅是放大较小的屏幕设计。通过添加新元素或重构视觉层次结构来利用额外空间。
  • 检查图像的质量 - 它们可能在较大的屏幕上显得模糊。
  • 同样,检查线长的可读性。 45到75个字符是最佳选择。你可以使用来自Chris Coyer的书签测试你的设计线长。
  • 不要过多地放大字体。超大字体占用了大量的水平空间,这可能会迫使读者放慢速度或跳过内容。

06.在屏幕尺寸上使用一致的导航

设备内的一致导航绝对是一件好事。但是,不要与一个布局结婚并尝试在其他设备上反复重新创建它。这违背了响应式设计的内容。

Image courtesy of FiveSimpleSteps (desktop)

图片由FiveSimpleSteps提供(桌面)

Image courtesy of FiveSimpleSteps (mobile)

图片由FiveSimpleSteps(手机)提供

但是,为了保持一致的用户体验,一些一致性很好。某些元素应保持相同,以构建可识别的界面,并向用户建议如何在新设备上使用UI。这些要素应保持一致:

  • 链接或按钮标签
  • 字样
  • 色彩处理

然而,不同的屏幕尺寸需要不同的导航系统。以下元素不应保持一致,因为它们适应特定屏幕尺寸的细微差别:

  • 按钮大小
  • 视觉布局
  • 导航功能 - 包括触摸控制

例如,桌面导航可以静态位于屏幕顶部。当您重新设计移动屏幕的布局时,您可以使导航持久并缩小尺寸以避开(但保留类似的颜色方案,排版和按钮标签)。

07.隐藏内容

一种常见的误解曾经导致移动用户匆忙,只想要一个较小版本的“完整网站”。联系人信息和指示等内容优先,其他内容隐藏。

现在我们知道大多数移动用户根本不是移动用户68%的使用量发生在家中。大多数用户希望在移动设备上使用完整的网站。没有删节,但重新格式化。

Image courtesy of UXPin

图片由UXPin提供

了解某人的首选设备与了解他们的首选内容并不相同。如果内容与一台设备上的用户相关,则可能与其他设备上的用户相关。

此外,您必须考虑多设备任务流。用户经常在一台设备上启动任务,在另一台设备上完成任务,并在此过程中在它们之间切换。根据设备限制内容也会限制用户的交互方式。

针对不同的屏幕尺寸,以不同方式呈现和优先排序内容根据渐进增强,但绝不隐藏或限制内容本身。

进一步阅读

这里的提示只是免费电子书中可用内容的预览UX设计趋势2015和2016

通过分析当今最佳用户体验示例中的71个,本指南将有用的趋势解构为日常设计的简单设计策略。

话:杰里米吉拉德

Jeremy Girard是位于罗德岛普罗维登斯的网页设计/开发负责人Envision技术顾问。他还在罗德岛大学教授网站设计和前端开发。他为此贡献了内容免费设计库通过协作原型应用程序UXPin。

像这样?阅读这些!



翻译字数超限