Invision搬运:使用响应式web设计的好处

原文链接

当网站设计师只需要设计网站的视觉时,生活就开始变得更加简单了。大多数显示器和显示器都很容易设计,且一种尺寸可以适合大多数屏幕。随后,移动互联网兴起了。

自从移动互联网诞生以来,最大的争论之一就是,是设计一个适应性强、响应能力强的站点来适应不同的门户网站,还是设计一个独立的移动站点(其中最著名的是m(dot)为http://m.site.com/设计的URL结构)。

为了我们今天的讨论,我们将视m(dot)设计为历史,它不再被认为是一种最佳实践,因为它涉及到用更少的内容、更少的图像和更简单的导航创建一个全新的站点。

因此,让我们看看为多门户生活方式设计的不同方法。

《Invision搬运:使用响应式web设计的好处》


一、什么是响应式web设计和自适应web设计

早在本世纪初,网页设计的争论就集中在固定布局流动布局之间。流畅的设计布局是用百分比来设置的,它们被拉伸以适应浏览器的框架,而固定的布局则被锁定在由设计师设置的像素宽度决定的单一布局中。

这两种方法都不是十全十美的。虽然流动的元素可以在多种屏幕尺寸下工作,但在宽屏显示器上,它们看起来很瘦,也不吸引人。固定设计在其设计的屏幕上运行良好,但在屏幕较小的移动设备上几乎不可能使用。

响应式web设计自适应web设计是近年来的两个热门话题。虽然这两种方法都有助于满足谷歌的建议,即站点可以通过移动访问,并具有良好的用户体验和强大的性能,但每种方法都有其优缺点。

(1)自适应web设计

自适应web设计(adaptive web design,AWD)与曾经的固定设计类似,它使用基于断点的静态布局。AWD用于检测屏幕大小并为其加载适当的布局。这涉及到(至少)为6个屏幕宽度进行设计。设计人员可以额外地为不同尺寸的屏幕量身定制其内容。

这种方法确实能对样式和内容策略进行一定程度的控制,这是使用响应式设计所不需要的。但是从长远来看,设计至少6个新站点是一项非常繁重的劳动。

 The Next网站的Carrie Cousins列举了以下建议使用自适应web设计的情况:

·特定于设备的体验是必要的

·你可以为这些设备创造不同的体验

·你可以处理和维护自适应模板和资源,或:

·你的用户群正在许多不同的设备上访问您的信息(如果分析显示70%的用户在一台设备上,那么自适应UI可能不值得你浪费时间)。

另一方面,响应式web设计(RWD)对内容和样式的控制没有AWD那么多,但是构建和维护所需的工作要少得多。RWD就像是流体设计的后代。无论目标设备是什么,它都能适应屏幕的大小。响应式使用CSS媒体根据目标设备更改样式,然后根据设备的屏幕大小加载页面布局。

(2)响应式web设计

响应式设计需要的构建和维护工作要少得多”

由于RWD为了流畅地适应设备窗口而在屏幕上移动和移动内容,因此你需要特别注意设计的视觉层次结构。这就是在多个设备和多个浏览器上进行测试的方便之处。

许多设计师认为响应式设计是一种更具挑战性的设计方法,因为他们必须为几乎无限的屏幕尺寸进行规划。即使有这样的缺陷,RWD几乎总是能带来更干净的代码和更好的适应性,所以它是在考虑未来的情况下构建的。

 

二、为什么响应式设计是web的未来

(1)更愉悦的用户体验

在屏幕尺寸上没有像AWD那样的固有限制。响应式站点设计保证在任何屏幕大小上都能很好地工作,而自适应设计只能在其布局所允许的所有屏幕上工作。

(2)更快的加载速度

适应性网站需要加载所有可能的布局,而响应性网站只需要加载在所有平台上运行的布局。

(3)适应未来发展

这是未来的趋势。因为它不受屏幕大小的限制,所以无论屏幕大小如何,你的页面在下一代三星或iPhone(更不用说平板电脑和智能手表了)上都会加载得很好,视觉上也很美观。

最重要的是,响应式设计会被自动地整合到InVision Studio项目中(所以你没有任何借口)!响应式工具是Studio本身的核心原则。这允许用户利用组件和响应性约束轻松快速地创建同一屏幕的不同版本。

最后,欢迎来到这样一个世界:你的iPad、iPhone、Android和可穿戴设备版本都可以轻松地集中在一个设计文件中。

附:invision studio工具下载

    原文作者:jwjwj
    原文地址: https://www.jianshu.com/p/c990fc4ddd0e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞