随着用一轮轮的迭代对能力测试进行打磨,我们开始发展出一套方法,将复杂的网页界面设计进行分解,使之适合开发渐进增强和能力测试。 有时,找出能正确支持某种高级设计组件的原生HTML元素非常容易:一个自定义样式下拉菜单的外观和行为非常像原生的select元素,不用多想就知道该从它起步。类似地,自定义样式的复选框可能会存在一些打造样式方面的难题,但是我们从一开始就知道它们是复选框。 然而,其他一些案例却没有这么明显:一个Netflix样式的、Ajax驱动的星级评定组件应该使用哪种基本标记?我们在众多新闻网站都能看到的“最热门/最多邮件发送/最多评论”标签式内容组件又该如何处理?那些能在Kayak和其他电子商务网站上看到的,用于过滤结果的自定义日期或价格范围滑块呢?那些更加复杂但却日益流行,类似于Gmail这样使用拖放等富交互手段的Ajax驱动型应用程序呢?你无法从通常受支持的HTML元素工具箱里找到符合这些情形的精确匹配。 话又说回来,虽然这些例子都是高度定制的并且交互性丰富,但它们支持的用户操作(在刻度栏上选择一个选项,从一个内容区域切换到另一个,设置某个范围的低点和高点,排序,搜索和检索)却明显能用标准HTML做到。我们只需一些创造性思考,解构这些组件和交互方式,然后确定用哪些原生HTML元素能完成同样的工作。 主要挑战在于,如何透过自定义样式、动画和其他行为看到隐含的基本运动部件。我们把这一过程比喻成“将组件放到X光下”:举个例子,那些整洁的CSS和脚本功能使自定义滑块具备交互功能,但它们其实只是皮肤和衣服,在基本体验中,滑块的“骨骼”则是用来设置高低数值的文本框输入,或选择一小组选项的单选按钮,甚至还可以是用来选择一大组选项的选择菜单。 X光透视在审视复杂的设计时会变得更加复杂和有趣,比如组合多种内容类型和交互组件的网站,使用动态内容和复杂布局的网络应用程序,或者根据用户交互情况在页面中选择性提供内容的工作流程等。 在宏观层面上也有一次X光透视过程,以识别网页各主要部分(或多个网站页面之间的共有模式)如何组合在一起,寻找可能揭示出内容和功能关键部分组合关系的行为模式,并评估如何优化这些资源的序列,以确保它们在基本和增强环境下都能正常工作。 进行这种高阶分析时,组件或元素层级的基本原则同样适用,即确定服务用户所需的所有关键内容和功能,考虑在某种特定情形下可以使用的HTML元素(基于内容格式、数据需求、业务规则或整体流程),确定能够提供最佳用户体验的标准HTML标记,很简单。 第2章会更详细地讨论X光透视,并考虑一些能探究解构过程细节的复杂设计方案。此外,第8章~第19章会把界面组件一个个地放在X光下,看看渐进增强技术如何让基本和增强体验都尽可能具有完整可访问性、功能性和可用性。 在深入探讨如何将X光透视实际应用于网站和组件之前,我们先介绍一下在项目中成功进行渐进增强开发的流程。
渐进增强的Web设计——1.2 规划渐进增强:X光透视
书名: 渐进增强的Web设计
作者:
出版社: 人民邮电出版社
原作名: Designing with progressive enhancement:building the web that works for everyone
译者: 牛化成 | [英] Patty Toland | [英] Scott Jehl | [法] Maggie Costello Wachs
出版年: 2014-1
页数: 328
定价: 69.00
装帧: 平装
ISBN: 9787115338396