_反应设计允许人们通过多个设备分辨率访问内容. 随着更多的人通过移动设备与网站互动,用户现在期望网站能够响应. 以及它如何支持无障碍及设备切换。
"反应设计"最早由网络设计师和开发者伊森·马可特(Ethan Marcotte)在其著作"反应网络设计_"中铸造. 默认支持设备切换 。 用户可以在桌面上开始与您的产品或服务互动,切换到电话或平板电脑,然后切换回. 对于移动用户体验设计来说, 让我们仔细研究反应设计的关键要素. 此外,《网络内容无障碍准则》将网络响应性(称为 " 回流 " )规定为无障碍内容的成功标准之一。 一个响应性网站在搜索结果方面排名也更好,对于搜索引擎优化(SEO)至关重要.
□ □ □ □ 什么是反应设计?
响应性网络设计(a.k.a. "响应性"或"响应性设计")是设计网络内容的一种方法,不管设备所支配的分辨率如何,都会出现. 通常都是用视点断点完成的(在内容达到视点时, 查看器应该根据任何分辨率的平板电脑、电话和桌面进行逻辑调整。
在应答设计中,可以根据屏幕的大小范围,定义内容流和布局变化的规则.
互动设计基金会,CC BY-SA 4.0
响应性设计通过调整设计元素的放置以适应现有空间的变化来应对浏览器宽度的变化. 如果在桌面上打开一个响应网站,并改变浏览器窗口的大小,内容会动态重排自身以适应浏览器窗口. 在手机上,现场检查可用的空间,然后呈现出理想的安排.
校对:Soup
□ 反应设计的三个主要原则
三大原则推动响应性设计. 某些设计还可能适用其他原则,但这三项原则将所有响应性网站联系在一起:
- 流网系统
在印刷品中,出版商确定在绝对措施中显示的内容(和在何处)的大小。 当互联网到达时,这一趋势仍在继续,设计师以像素大小定义网站。
“720p”和“1080p”中的“p”表示“渐进扫描”,数字是指图像在像素中的高度。
互动设计基金会,CC BY-SA 4.0
对于应答设计,绝对尺寸法不起作用,因为设备大小不同. 因此,响应性设计使用相对尺寸.
在这个图像中,你可以看到,无论设备如何,固定版本的内容都有相同的宽度,而在流体版本中,内容填补了设备可用的屏幕空间.
互动设计基金会,CC BY-SA 4.0
QQ 流体图像
当使用流体网格用相对值(如百分比)定义布局时,布局上没有任何东西会在所有设备上有一个恒定大小. 这意味着您布局中的图像需要调整每个屏幕房地产的大小 。 流体图像就是从那里进入画面的! 和水一样 流体图像能承受容器的大小 因此,你可以创建一个单一的图像,并指示浏览器根据容器大小来放大图像.
互动设计基金会,CC BY-SA 4.0
对于非摄影图像,如图标,可以使用SVG文件. 这些文件格式是轻量级的,你可以将其缩放到任何分辨率而不损失质量.
QQ 媒体查询
媒体查询是指示根据某些条件改变网站布局. 例如,在智能手机的屏幕房地产中,两栏办法可能并不实际。
您可以使用媒体查询来指示浏览器在屏幕大小小于特定大小时重排屏幕房地产. 这种布局中断的具体大小被称为“断点”。 “
在此图像中,您可以看到根据可用的屏幕房地产是如何重新安排列的位置的. 内容以智能手机1列显示,平板电脑2列,桌面电脑3列.
互动设计基金会,CC BY-SA 4.0
媒体查询最好采用 " ** 机动车第一** " 方法,即界定你想要的机动车,然后从那里扩大。 需要测试内容, 最终,你可能会发现你可以根据设备的屏幕分辨率预测断点.
□ 反应设计的最佳做法和考虑
通过反应性设计,你设计每个方面的灵活性——图像、文字和布局。 所以,你应该:
-
优先使用可缩放矢量图形(SVGs). 这是基于XML的2D图形文件格式,支持交互和动画.
-
包括三个或三个以上断点(三个或三个以上设备的发射)。
-
** 优先考虑和隐藏内容,以适应用户的使用文字**。 请检查access-date=中的日期值 (帮助) 请检查url=中的日期值 (帮助) 使用渐进披露和导航抽屉首先给用户提供需要的项目. 保留非必要物品(对空)
-
目标 ** 最小化**。
-
应用设计图案 以尽量为用户在上下文中使用**并提高其熟悉度:例如,列降图案符合许多屏幕类型的内容。
-
目标是无障碍。
□ □ □ □ 走开
响应设计是网页设计中的默认方法. 它对于无障碍和搜索引擎优化的经验至关重要。 为了创造响应性设计,UX设计师与流体网格和图像合作. 您必须与开发者密切合作, 指定断点和测试, 如果这些断点和测试是正确无误的 。
响应性设计的最佳做法包括采用移动式第一方法,有3个或更多的断点,优先排序或隐藏内容,最小化,可获取性以及使用设计模式以提高使用方便度.
□ 引用和在哪里学习更多
为了更多地了解响应性网络设计对无障碍环境的重要性,请阅读WCAG的成功标准准则。
更多地了解卢克·沃布列夫斯基提出的机动第一方法.
英雄图像 : 互动设计基金会,CC BY-SA 4.0