响应式Web设计成功的驱动因素之一是能够为移动设备上的用户创建更好的体验的能力。在本文中,我们将为网站设计师介绍10种响应式设计最佳实践。

从小到大

响应式Web设计成功的驱动因素之一是能够为移动设备上的用户创建更好的体验的能力。尽管不能夸大这一好处的重要性,但当设计人员将响应式设计仅视为小屏幕解决方案时,就会出现问题。事实是,响应式网页设计对所有屏幕尺寸(包括超大显示屏)都有好处。

在过去的几年中,网站的移动流量一直在上升,而如今,移动访问者在许多网站中的访问量中所占的比例最大。尽管这些统计数据指出了针对移动设备进行优化的重要性,但不应以较大的台式机屏幕为代价来做到这一点。仍然有很多人访问具有较大屏幕的网站(包括许多用户,他们每天在不同时间在设备之间切换),细心的设计师理解,对小屏幕的改进支持并不意味着将注意力转移到大屏幕上那些。

设计Web体验时,应采用“ 移动优先 ”方法。请遵循《UX设计趋势2015和2016》中的建议:写下所有内容类别,对它们进行优先级排序,然后首先将它们放在最小的视口中。当您移至较大的视口(如平板电脑或台式机)时,根据需要添加元素。例如,如果您使用的是协同设计应用程序UXPin,则意味着在320px断点上创建您的第一个原型。

还要考虑更大的屏幕尺寸,以及流行的断点之间的尺寸。请记住,每天都会有新设备投放市场(目前市场上有24,093个不同的Android设备),因此今天流行的断点在不久的将来可能不会如此,而且尺寸甚至不在我们的雷达现在可能在未来变得至关重要。通过同时关注流行的断点和它们之间的差距,您可以设计出具有真正可扩展性的体验。

考虑上下文

响应式Web设计通常只不过是将网站“适配”到不同的屏幕而已。随着屏幕尺寸的增加,单列布局会扩展为跨越多列,最终以支持的最大屏幕尺寸结束。从纯粹的布局可伸缩性的角度来看,“适合大小”过程是有意义的,但是它忽略了该布局中呈现的实际内容(并且它没有考虑上下文)。考虑一家餐厅的网站。显然,您希望该站点的布局适合在移动屏幕上显示。但是,上下文不仅仅限于考虑哪些内容可能与使用这些设备的访问者最相关的要求。

您可能会认为,由于这些客户在移动设备上,他们正在寻找到餐厅的评论或路线,但是如果他们已经在餐厅了呢?在那种情况下,即使它们在移动设备上,它们显然也不需要指示。相反,他们可能正在寻找该餐厅菜单的营养信息。您拥有的数据越多(设备,位置,对该站点的过往访问等),则越有更多上下文可用于通知您的UX决策。在进行设计时,请与项目的开发团队联系,以了解在访问者的站点体验期间可以收集哪些数据,以及这些信息最终如何更好地建立上下文。

优先区分内容

从较大的屏幕显示的多列移动到非常小的屏幕的单列布局是响应站点的典型特征,但是布局更改不会随列而停止。您网站上的不同内容将需要不同的布局方法。例如,拿物品挑逗之类的东西。您可能会以某种方式在某些屏幕上显示该内容,但是不同的屏幕尺寸可能需要更改该显示才能最有效。

但是,当以较小的尺寸查看同一页面时,此布局会有所变化,消除了编辑图像以节省空间。这些图像虽然很不错,但对于内容的呈现当然不是至关重要的,因此,随着空间变紧,可以安全地将其删除,而不会占用整个内容。这是在不同情况下对相同内容进行布局和优先级区分的完美示例。

可扩展的导航

导航是快速响应式网站最具挑战性的方面之一,尤其是当您处理非常大的深层菜单时,有效地进行设计。

对于较大的屏幕,效果最佳的设备将在其他设备上完全崩溃。这就是为什么在设计站点的导航时,您并不希望在每个不同的屏幕站点或响应站点的主要布局版本中都获得一致的导航体验。取而代之的是,您将重点放在创建清晰,用户友好的导航上,即使每个屏幕上访问导航的确切方法各不相同。

设计导航栏的一些规则参考:

  • 您应该在导航中尽可能保持一致,包括按钮和链接上使用的标签以及这些按钮的视觉特征(字体选择,颜色等)。
  • 你应该从一致性的坚持割舍是如何导航工程或勾画出。通过鼠标悬停访问的弹出菜单可能对桌面访问者来说效果很好,但在触摸屏和小尺寸菜单上会分崩离析。对于那些实例,您设计的导航应该具有相似的感觉,但是适合于将在何处使用的不同功能。

图像质量与下载速度

图像是最大的罪魁祸首之一。随着网站设计趋势朝着巨大的跨屏图像,页面的文件大小只会增加。作为设计师,我们希望这些图像看起来最好,尤其是当它们是迎合用户的主要视觉效果时。与质量一样重要,您必须努力在丰富的视觉效果和整体页面性能之间找到平衡。

  • 在设计响应式Web页面时,请考虑页面的每个视觉效果,并再次积极删除不必要的内容。
  • 重新考虑诸如首页轮播的元素,这些元素需要多个大图像以及“动画化”这些广告牌显示所必需的Javascript。通过简单地删除带有4张图像的轮播并转到1张静态图像,您可以通过消除75%的图像以及动画脚本来显着减小该页面的大小。

在主动删除掉所有不需要的图像之后,请优化可用于Web交付的所有图像,并尽可能使用适当的图像格式,包括SVG文件。这是我们下一步的完美选择。

在适当的地方使用图标

正确使用图标可以通过多种方式改善响应式网页设计。精心设计的适当图标可以帮助替换冗长的文本,这在空间有限的较小屏幕上尤其有用。

图标通常可以使用SVG文件格式传递到网站。这些可缩放矢量图形非常适合多设备友好站点,因为可以根据需要调整它们的大小,而无需增加图像本身的文件大小;SVG文件也可以使用CSS进行动画处理,从而为设计添加一些有趣的效果,而不会因大量额外的脚本而使设计陷入困境,这会对站点性能产生负面影响。对于不支持SVG的浏览器,需要使用后备支持,但是对于那些不支持SVG的浏览器,使用此文件格式可以带来很多好处。

注意字体大小

排版是网页设计的重要组成部分,无论是否响应。但是,在设计响应站点时,必须特别注意字体设计选择会随着布局的其他方面而变化。选择字体时,请确保您的选择效果良好,并且无论放大还是缩小,都可以保持所需的总体感觉。

一些字体较细的字体在较大或什至中等大小的字体上都可以正常工作,但是当字体尺寸过小时,这些字体就缺乏清晰度。这将影响网站的可读性,这是永远无法接受的。如果必须使用带有细字母的特殊字体,请确保即使最小字体也可以读取,或者考虑用其他最小字体替换字体。 文本列越宽,则需要更多的行高(每行文本的垂直高度)来帮助用户找到下一行的开始。16pt主体类型既是大多数浏览器的默认设置,也是所有屏幕尺寸的理想起点。但这不是最终要求。使标题清晰明了,至少是其支持文字的1.6倍。在您网站的所有副本上包含足够的对比度,包括文本和背景色(设置的背景色)以及链接的颜色(网站的其余内容)。

在实际设备上测试您的设计

计划设计如何针对不同尺寸进行缩放是这些设备设计的重要组成部分,但是您不能止步于这种理论方法。能够在真实设备上与您的设计进行交互,将向您展示其实际工作原理,既可以确认您做出的决策,也可以向您展示可能需要进行改进的地方。

除了您自己的测试之外,与实际用户进行可用性测试是在现实环境中使用设计的另一个重要部分。如果您可以节省资源,那么值得与不同的用户一起测试不同的设备。尽管这使测试所需的用户数量成倍增加,但这是防止由于设计熟悉而产生偏差的最安全方法。例如,如果您设计了三个断点,则对15个用户进行测试(每个断点五个)将帮助您发现大多数可用性问题。