文章详情

使用响应式网页设计的好处

2020-11-19

点击量:

  当Web设计人员只需要担心格式化台式机的网站时,ife就会更简单。大多数显示器和显示器易于设计,并且最适合一种尺寸。然后是移动网络的兴起。本文AAA教育的武老师对响应式网页设计的优点进行了详细的分解。

  自移动网络问世以来,最大的争论之一是是否要设计一个自适应、响应的网站,以适应不同的门户网站而改变,或者设计一个独立的移动网站。
 

使用响应式网页设计的好处
 

  为了便于今天的讨论,我们将不再考虑m(dot)设计,因为它不再被视为最佳实践,因为它涉及创建内容更少,图像更少,导航简化的全新站点。
 

  因此,考虑到这一点,让我们看一下为多门户生活方式设计的不同方法。
 

  什么是自适应网页设计和自适应网页设计?
 

  早在本世纪初,网页设计的争论就在于固定版式与流畅版式之间。流畅的设计布局以百分比设置,并且它们拉伸以适合浏览器的框架,而固定布局则锁定在由设计师设置的像素宽度所确定的单个布局中。
 

  这些方法都不是完美无缺的。尽管流体模型可以在多种屏幕尺寸上工作,但它们在宽屏显示器上看起来很苗条,没有吸引力。固定设计在其设计的屏幕上效果很好,但几乎不可能在较小屏幕的移动设备上使用。
 

  相关:设计响应式电子邮件的快速指南
 

  近年来,这两个主题是响应式网页设计和自适应式网页设计。虽然这两种方法都可以满足Google关于在移动设备上访问网站以及良好的用户体验和强大性能的建议,但每种方法都有其优缺点。
 

  首先,自适应Web设计(AWD)就像旧的固定设计一样,因为它使用基于断点的静态布局。AWD可以检测屏幕尺寸并为其加载适当的布局。这涉及设计(至少)六个屏幕宽度。使用AWD设计和开发适用于多种不同屏幕尺寸的网站可能是一项额外的工作。
 

  这种方法确实使您对样式和内容策略有了一定程度的控制,而使用响应设计则不一定如此。但是从长远来看,从头开始设计至少六个“新站点”是大量的工作,而您不必与响应式Web设计相关。
 

  The Next Web上的Carrie Cousins说,“如果满足以下条件,则应考虑使用自适应设计:
 

  设备特定的经验是必要的;
 

  实际上,您可以为每个设备创建不同的体验。UI用户体验注意到了吗
 

  您可以处理和维护自适应模板和资源。要么
 

  您的用户群正在许多不同的设备上访问您的信息(如果分析显示70%的用户在单个设备上,则自适应UI可能不值得您花费时间)。”
 

  在另一方面,响应式网页设计(RWD)不给你,在内容和风格AWD多的控制,但它确实需要少得多的工作,既构建和维护。RWD就像流体设计的后代。无论目标设备是什么,它都能适应屏幕的大小。响应式使用CSS媒体查询根据目标设备更改样式,然后根据设备的屏幕尺寸加载页面布局。
 

  “响应式设计需要花费更少的精力来构建和维护。”注意到用户心理,考虑用户有多懒。
 

  由于RWD会在屏幕上随机播放和移动内容,以使设备窗口流畅地适应,因此,您在移动设计时需要特别注意外观的视觉层次。在这里,可以在多个设备和多个浏览器中进行测试。
 

  许多设计师认为响应式设计是更具挑战性的设计方法,因为他们必须计划几乎无限数量的屏幕尺寸。即使出现了这种皱纹,RWD几乎总是会产生更清晰的代码和更好的适应性,因此在构建时要考虑到未来。
 

使用响应式网页设计的好处
 

  为什么自适应设计是网络的未来
 

  仍然没有出售为什么响应式设计负责任的设计?这个怎么样:
 

  对于您的读者来说,这更令人愉快。屏幕尺寸没有AWD所固有的限制。虽然保证响应式网站设计可以在任何屏幕尺寸上正常工作,但自适应设计只能在其布局所能支持的尽可能多的屏幕上工作。响应技巧是什么?
 

  响应式设计加载速度更快。自适应网站需要加载所有可能的布局,而自适应网站仅需要加载可在所有平台上使用的布局。
 

  面向未来。由于它不仅限于您指定的屏幕尺寸,因此无论屏幕尺寸如何,您的页面都会在下一个Samsung或iPhone(更不用说平板电脑和智能手表)上加载并显示出色的外观。
 

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

  您的iPad,iPhone,Android和可穿戴设备版本都可以轻松地存储在集中式设计文件中。使用Studio的飞镖板,您可以在调整尺寸时实时查看更改,而不必通过反复试验来查找潜在的断点。这篇文章的内容你学到了吗,更多资讯请持续关注AAA教育~

长按识别二维码,加关注
↓ ↓ ↓ 继续阅读与本文标签相同的文章
UI响应式网页
UI设计