当网页设计师只需要担心台式电脑的格式化网站时,生活就更简单了。大多数显示器和显示器都很容易设计,最适合一种尺寸。然后是移动网络的兴起。
 
自移动网络曙光以来,其中一个重大争论就是是否设计一个适应性更强的响应网站,以适应不同的门户网站或设计独立的移动网站[通俗地称为熟悉的http://m.site.comURL结构的m(点)设计]。
 
相关:11个响应式网页设计的强大示例
 
为了我们今天的讨论,我们将m(点)设计视为过去的事情,因为它不再被认为是最佳实践,因为它涉及创建一个内容较少,图像较少且导航简化的全新网站。
 
因此,考虑到这一点,我们来看看设计多门户生活方式的不同方法。

响应式网站设计

什么是响应式网页设计和自适应网页设计?
 
早在本世纪初,网页设计的争论就是固定布局与流体布局之间的争论。流体设计布局设置了百分比,并且它们伸展以适应浏览器的框架,而固定布局被锁定在由设计者设置的像素宽度确定的单一布局中。
 
这两种方法都不是完美的。虽然流体模型在多种屏幕尺寸下工作,但它们在宽屏显示器上看起来很瘦,不吸引人。固定设计在其设计的屏幕上运行良好,但几乎不可能在小型屏幕移动设备上使用。
 
 
近年来的两个主题是响应式网页设计和自适应网页设计。虽然这两种方法都有助于满足谷歌关于网站可以在移动设备上访问的建议以及良好的用户体验和强大的性能,但每种方法都有其优点和缺点。
 
首先,自适应网页设计(AWD)就像旧的固定设计,因为它使用基于断点的静态布局。AWD的工作原理是检测屏幕尺寸并为其加载合适的布局。这包括设计(至少)六个屏幕宽度。它可以是额外的工作,设计和开发AWD多个不同屏幕尺寸的网站。
 
这种方法确实可以对风格和内容策略进行一定程度的控制,您不一定会使用响应式设计。但从长远来看,从零开始设计至少六个“新网站”形成了大量的工作,而这些工作并不一定与响应式网页设计有关。
 
Carrie Cousins在下一个网站上说,你应该“考虑使用自适应设计,如果:
 
  • 设备特定的体验是必需的;
  • 实际上,您可以为每个设备创建不同的体验;
  • 您可以处理和维护自适应模板和资源; 要么
  • 您的用户群正在许多不同的设备上访问您的信息(如果分析显示70%的用户在单个设备上,则自适应用户界面可能不值得您花时间)。“
  • 另一方面,响应式网页设计(RWD)并不能像AWD那样对内容和风格进行更多的控制,但它的构建和维护工作确实需要很少的工作。RWD就像流体设计的后代。无论目标设备如何,它都能适应屏幕的大小。响应式使用CSS媒体查询根据目标设备更改样式,然后根据设备的屏幕大小加载页面布局。
 
“响应式设计的构建和维护工作量少得多。”
 
由于RWD在屏幕上拖曳并移动内容以便流畅地适应设备窗口,因此您需要特别注意设计转换时的视觉层次结构。这是测试多个设备和多个浏览器的地方派上用场的地方。
 
许多设计师认为响应式设计是更具挑战性的设计方法,因为他们必须规划几乎无限数量的屏幕尺寸。即使有这种皱纹,RWD几乎总是会产生更清晰的代码和更好的适应性,所以它的构建是为了将来的未来。
 
为什么响应式设计是网络的未来
 
还没有出售的设计为什么负责设计负责任?这个怎么样:
 
  • 这对你的读者来说更令人愉快。像AWD一样,屏幕尺寸没有固有的限制。虽然响应式网站设计可以保证在任何屏幕尺寸上都能正常工作,但自适应设计只能在其布局所能达到的尽可能多的屏幕上工作。
  • 响应式设计加载速度更快。自适应网站需要加载所有可能的布局,而响应式网站只需加载适用于所有平台的网站。
  • 这是未来的保障。由于它不限于您指定的屏幕尺寸,因此无论屏幕尺寸如何,您的网页都会在下一个三星或iPhone(更不用说平板电脑和智能手表)上加载并看起来很棒。

最重要的是,响应式设计会自动整合到您的InVision Studio项目中(所以您没有任何理由)!响应式工具是Studio本身的核心宗旨。这允许用户轻松快速地创建利用组件和响应约束的相同屏幕的各种版本。

响应式网站设计
 
欢迎来到一个全新的世界,您的iPad,iPhone,Android和可穿戴设备版本都可以在一个集中式设计文件中生活,只需很少的努力。Studio的飞镖可让您在调整尺寸时实时查看变化,而无需通过反复试验来查看潜在的中断点。