渐进增强 跨平台用户体验设计

渐进增强 跨平台用户体验设计
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者: ,
2017-02
版次: 01
ISBN: 9787115448484
定价: 59.00
装帧: 平装
开本: 其他
页数: 190页
正文语种: 简体中文
3人买过
  • 如果你想开发一个既优雅又好用的网站,仅仅知道如何编写代码是远远不够的。本书介绍了一种名为渐进增强的设计思想,只要将这种它运用在项目中,就能使网站的兼容性、适应性和可访问性得到极大改善。
    本书的独特之处在于,作者站在一个宏观的视角,考察了Web 设计流程的各个环节,将内容组织、UX 设计、UI 开发、响应式设计、前端开发、服务端开发、性能优化,以及种种对用户产生影响的因素联系在一起进行分析,以得出优化方案。 本书作者Aaron Gustafson是Web标准化项目的前项目经理,一直致力于Web的标准化和可访问性方面的工作,并且积累了丰富的经验。
    在近二十年的 Web 从业生涯中, Aaron 服务过众多我们所耳熟能详的企业,包括 Box、Happy Cog、美国职棒大联盟、 McAfee、纽约时报、SAS、StubHub、美国国家环境保护局、Vanguard、Walgreens和Yahoo等。Aaron亦作为 Web 标准化的顾问参加了微软浏览器团队的研发工作。
    Aaron善于通过写文章来分享他的经验和知识。他为《A List Apart》杂志撰写的“渐进增强三部曲”长期以来备受读者欢迎。他围绕渐进增强这个主题写成的图书《自适应Web设计》也获得了非常好的口碑和销量。除了写作,Aaron现在经常参加各种Web大会,与大家分享Web技术和设计方面的思考,并在世界各地和当地Web从业者进行研讨会形式的交流。
    在Aaron的家乡,田纳西州的查塔努加市,他建立了查塔努加开放设备实验室。在这个实验室中,Aaron和Kelly McCarthy组织了很多创意和技术的分享活动。Aaron 是Rosenfeld Media“专家”俱乐部的成员,其博客地址是aaron-gustafson.com。

    翟东方,北师大文学系,互联网内容方向从业十年:苏州街角撸过码,西溪湿地画过图,中关村里奋过袖,后厂村口堵过车;曾向往入读北大哲学系,屡屡失利;热衷于用代码解决设计问题,有些心得。梁任公曾曰:“启超没有什么学问……”话锋一转,“还是有些的嘛!”既醉心之,则发展之,则分享之,独乐乐不如众乐乐。Quora上有云:“Don’t waste time on trying to find meaning and purpose in life other than your instincts.(与其努力向别人证明什么,不如跟随自己的天赋做点什么)。” 颇以为是。
    任洁,北航交互设计硕士。互联网从业九年,走了一条从视觉设计到交互设计再到产品经理的道路,也因此接触了从电商门户到O2O等各种各样的产品形态。平时喜欢研究民俗和东亚志怪文献。自幼跟随老师学习工笔白描,热爱一切复杂美丽的线描图案。
    欢迎加入读者交流QQ群:364021031。 第1章 为体验而设计 / 1
    1.1 优秀的代码,麻烦的设备 / 2
    1.2 早期的Web是什么样 / 4
    1.3 技术实现和用户体验 / 6
    一个教训 / 7
    1.4 你满足不了所有的人 / 9
    1.5 向后兼容,向前适应 / 10
    技术服务于内容 / 11
    1.6 适应未知的设备 / 12
    1.7 提升Web的可访问性 / 14
    1.8 分层次设计 / 16
    1.9 渐进增强的设计思想 / 19

    第2章 内容是一切的基础 / 21
    2.1 让文案和用户产生交流 / 23
    2.2 设计稿中引入有意义的文案 / 24
    2.3 优化文案,更好地与用户对话 / 26
    问题出现时,做好准备 / 28
    2.4 文案不确定怎么办 / 30
    2.5 为用户优化文案内容 / 32
    2.6 多种形式的内容 / 33
    2.6.1 分析成本和收益 / 33
    2.6.2 保持内容的可访问性 / 37
    2.7
    收集数据的时候,请保持和用户的对话 / 40
    2.8 允许留白 / 41
    2.9 让内容带路 / 43

    第3章
    使用文档结构化标记增强用户体验 / 45
    3.1 那些年的“网页重构” / 47
    3.2 利用HTML强调内容 / 49
    3.3 实现方法不止一种 / 49
    避免可能出现的问题 / 52
    3.4 如何使用class和id / 54
    3.4.1 使用微格式结构化内容 / 56
    3.4.2 RDFa和微数据(Microdata) / 58
    3.5 元素的取舍和选择 / 60
    3.5.1 注意文档的大纲结构 / 62
    3.5.2 注意代码顺序 / 65
    3.5.3 避免加入多余的HTML标签 / 69
    3.6 使用ARIA提升页面可访问性 / 71
    3.7 容错处理 / 73
    3.8 标记语言对于用户体验的意义 / 77

    第4章 通过视觉设计提升用户体验 / 79
    4.1 设计一个系统,而非一堆页面 / 80
    4.1.1 设计清算 / 81
    4.1.2 从设计风格组件开始,发现整站的视觉语言 / 82
    4.1.3 建立视觉规范或组件库 / 83
    4.2 不做无米之炊 / 84
    4.2.1 营造和用户的对话场景 / 84
    4.2.2 考虑极端情况 / 86
    4.3 理解CSS渲染规则 / 87
    4.3.1 就近原则 / 87
    4.3.2 权重高比就近更重要 / 90
    4.3.3 利用CSS容错性 / 92
    4.3.4 渐进式导航的实例 / 97
    4.4 从小屏幕开始的设备响应 / 101
    4.4.1 为所有人提供支持,为一些人提供优化 / 105
    4.4.2 布局从小到大变化的实例 / 107
    4.4.3 允许流动布局 / 109
    4.5 紧跟标准 / 111
    4.6 防守性的设计 / 114
    保守地应用样式 / 115
    4.7 在页面中隐藏内容 / 116
    4.7.1 避免使用的方法 / 117
    4.7.2 可以适当使用的方法 / 118
    4.7.3 最佳方法 / 119
    4.8 使用CSS生成内容 / 120
    4.9 针对其他媒体类型和交互方式而设计 / 122
    4.9.1 设计一个供打印的页面 / 123
    4.9.2 兼容不同的交互方式 / 124
    4.9.3 考虑大屏幕设备 / 126
    4.10 保留浏览器的默认样式 / 128
    4.10.1 关于浏览器默认控件是否美观的讨论 / 129
    4.10.2 关于模拟系统控件的讨论 / 129
    4.11 拥抱可持续性 / 130

    第5章
    通过交互设计提升用户体验 / 133
    5.1 了解潜在的问题,避免日后踩坑 / 135
    5.1.1 了解Web的性质 / 136
    5.1.2 什么情况下会“无JavaScript” / 138
    5.2 保证最基础的用户体验 / 140
    5.3 防止性的代码 / 142
    5.3.1 先观察,再动手 / 142
    5.3.2 特性检测 / 145
    5.3.3 确认代码依赖的库的存在 / 146
    5.4 建立最低限度的代码支持 / 147
    5.5 区分对待 / 149
    5.6 创建页面所需的结构 / 150
    5.7 描述当前发生了什么 / 152
    5.8 代码简单明晰 / 153
    5.9 适应性的界面 / 156
    5.10 不要提前应用样式 / 159
    5.10.1 在HTML中添加标记 / 160
    5.10.2 充分利用ARIA / 161
    5.11 通过适当调整需求提升页面体验 / 161
    5.12 鼠标事件之外 / 164
    5.12.1 发挥键盘的作用 / 164
    5.12.2 提升触屏体验 / 166
    5.13 不要依赖网络状况 / 169
    5.13.1 将数据存储在客户端 / 169
    5.13.2 进一步丰富离线体验 / 171
    5.14 合理发挥技术能力 / 172

    第6章 持续的手艺活儿 / 175
    6.1 体验图 / 176
    6.1.1 Ix图的优点 / 177
    6.1.2 图片延迟加载的实例 / 178
    6.1.3 标签式界面实例 / 184
    6.2 从历史中学习,寄希望于明天 / 185
    6.2.1 移动互联网时代,等价于一个新的拨号上网时代 / 186
    6.2.2 以前的小屏幕,变成了现在的大屏幕 / 186
    6.2.3 仅有文字的设计方案回归了 / 187
    6.3 对任何情况都要做好准备 / 190
  • 内容简介:
    如果你想开发一个既优雅又好用的网站,仅仅知道如何编写代码是远远不够的。本书介绍了一种名为渐进增强的设计思想,只要将这种它运用在项目中,就能使网站的兼容性、适应性和可访问性得到极大改善。
    本书的独特之处在于,作者站在一个宏观的视角,考察了Web 设计流程的各个环节,将内容组织、UX 设计、UI 开发、响应式设计、前端开发、服务端开发、性能优化,以及种种对用户产生影响的因素联系在一起进行分析,以得出优化方案。
  • 作者简介:
    本书作者Aaron Gustafson是Web标准化项目的前项目经理,一直致力于Web的标准化和可访问性方面的工作,并且积累了丰富的经验。
    在近二十年的 Web 从业生涯中, Aaron 服务过众多我们所耳熟能详的企业,包括 Box、Happy Cog、美国职棒大联盟、 McAfee、纽约时报、SAS、StubHub、美国国家环境保护局、Vanguard、Walgreens和Yahoo等。Aaron亦作为 Web 标准化的顾问参加了微软浏览器团队的研发工作。
    Aaron善于通过写文章来分享他的经验和知识。他为《A List Apart》杂志撰写的“渐进增强三部曲”长期以来备受读者欢迎。他围绕渐进增强这个主题写成的图书《自适应Web设计》也获得了非常好的口碑和销量。除了写作,Aaron现在经常参加各种Web大会,与大家分享Web技术和设计方面的思考,并在世界各地和当地Web从业者进行研讨会形式的交流。
    在Aaron的家乡,田纳西州的查塔努加市,他建立了查塔努加开放设备实验室。在这个实验室中,Aaron和Kelly McCarthy组织了很多创意和技术的分享活动。Aaron 是Rosenfeld Media“专家”俱乐部的成员,其博客地址是aaron-gustafson.com。

    翟东方,北师大文学系,互联网内容方向从业十年:苏州街角撸过码,西溪湿地画过图,中关村里奋过袖,后厂村口堵过车;曾向往入读北大哲学系,屡屡失利;热衷于用代码解决设计问题,有些心得。梁任公曾曰:“启超没有什么学问……”话锋一转,“还是有些的嘛!”既醉心之,则发展之,则分享之,独乐乐不如众乐乐。Quora上有云:“Don’t waste time on trying to find meaning and purpose in life other than your instincts.(与其努力向别人证明什么,不如跟随自己的天赋做点什么)。” 颇以为是。
    任洁,北航交互设计硕士。互联网从业九年,走了一条从视觉设计到交互设计再到产品经理的道路,也因此接触了从电商门户到O2O等各种各样的产品形态。平时喜欢研究民俗和东亚志怪文献。自幼跟随老师学习工笔白描,热爱一切复杂美丽的线描图案。
    欢迎加入读者交流QQ群:364021031。
  • 目录:
    第1章 为体验而设计 / 1
    1.1 优秀的代码,麻烦的设备 / 2
    1.2 早期的Web是什么样 / 4
    1.3 技术实现和用户体验 / 6
    一个教训 / 7
    1.4 你满足不了所有的人 / 9
    1.5 向后兼容,向前适应 / 10
    技术服务于内容 / 11
    1.6 适应未知的设备 / 12
    1.7 提升Web的可访问性 / 14
    1.8 分层次设计 / 16
    1.9 渐进增强的设计思想 / 19

    第2章 内容是一切的基础 / 21
    2.1 让文案和用户产生交流 / 23
    2.2 设计稿中引入有意义的文案 / 24
    2.3 优化文案,更好地与用户对话 / 26
    问题出现时,做好准备 / 28
    2.4 文案不确定怎么办 / 30
    2.5 为用户优化文案内容 / 32
    2.6 多种形式的内容 / 33
    2.6.1 分析成本和收益 / 33
    2.6.2 保持内容的可访问性 / 37
    2.7
    收集数据的时候,请保持和用户的对话 / 40
    2.8 允许留白 / 41
    2.9 让内容带路 / 43

    第3章
    使用文档结构化标记增强用户体验 / 45
    3.1 那些年的“网页重构” / 47
    3.2 利用HTML强调内容 / 49
    3.3 实现方法不止一种 / 49
    避免可能出现的问题 / 52
    3.4 如何使用class和id / 54
    3.4.1 使用微格式结构化内容 / 56
    3.4.2 RDFa和微数据(Microdata) / 58
    3.5 元素的取舍和选择 / 60
    3.5.1 注意文档的大纲结构 / 62
    3.5.2 注意代码顺序 / 65
    3.5.3 避免加入多余的HTML标签 / 69
    3.6 使用ARIA提升页面可访问性 / 71
    3.7 容错处理 / 73
    3.8 标记语言对于用户体验的意义 / 77

    第4章 通过视觉设计提升用户体验 / 79
    4.1 设计一个系统,而非一堆页面 / 80
    4.1.1 设计清算 / 81
    4.1.2 从设计风格组件开始,发现整站的视觉语言 / 82
    4.1.3 建立视觉规范或组件库 / 83
    4.2 不做无米之炊 / 84
    4.2.1 营造和用户的对话场景 / 84
    4.2.2 考虑极端情况 / 86
    4.3 理解CSS渲染规则 / 87
    4.3.1 就近原则 / 87
    4.3.2 权重高比就近更重要 / 90
    4.3.3 利用CSS容错性 / 92
    4.3.4 渐进式导航的实例 / 97
    4.4 从小屏幕开始的设备响应 / 101
    4.4.1 为所有人提供支持,为一些人提供优化 / 105
    4.4.2 布局从小到大变化的实例 / 107
    4.4.3 允许流动布局 / 109
    4.5 紧跟标准 / 111
    4.6 防守性的设计 / 114
    保守地应用样式 / 115
    4.7 在页面中隐藏内容 / 116
    4.7.1 避免使用的方法 / 117
    4.7.2 可以适当使用的方法 / 118
    4.7.3 最佳方法 / 119
    4.8 使用CSS生成内容 / 120
    4.9 针对其他媒体类型和交互方式而设计 / 122
    4.9.1 设计一个供打印的页面 / 123
    4.9.2 兼容不同的交互方式 / 124
    4.9.3 考虑大屏幕设备 / 126
    4.10 保留浏览器的默认样式 / 128
    4.10.1 关于浏览器默认控件是否美观的讨论 / 129
    4.10.2 关于模拟系统控件的讨论 / 129
    4.11 拥抱可持续性 / 130

    第5章
    通过交互设计提升用户体验 / 133
    5.1 了解潜在的问题,避免日后踩坑 / 135
    5.1.1 了解Web的性质 / 136
    5.1.2 什么情况下会“无JavaScript” / 138
    5.2 保证最基础的用户体验 / 140
    5.3 防止性的代码 / 142
    5.3.1 先观察,再动手 / 142
    5.3.2 特性检测 / 145
    5.3.3 确认代码依赖的库的存在 / 146
    5.4 建立最低限度的代码支持 / 147
    5.5 区分对待 / 149
    5.6 创建页面所需的结构 / 150
    5.7 描述当前发生了什么 / 152
    5.8 代码简单明晰 / 153
    5.9 适应性的界面 / 156
    5.10 不要提前应用样式 / 159
    5.10.1 在HTML中添加标记 / 160
    5.10.2 充分利用ARIA / 161
    5.11 通过适当调整需求提升页面体验 / 161
    5.12 鼠标事件之外 / 164
    5.12.1 发挥键盘的作用 / 164
    5.12.2 提升触屏体验 / 166
    5.13 不要依赖网络状况 / 169
    5.13.1 将数据存储在客户端 / 169
    5.13.2 进一步丰富离线体验 / 171
    5.14 合理发挥技术能力 / 172

    第6章 持续的手艺活儿 / 175
    6.1 体验图 / 176
    6.1.1 Ix图的优点 / 177
    6.1.2 图片延迟加载的实例 / 178
    6.1.3 标签式界面实例 / 184
    6.2 从历史中学习,寄希望于明天 / 185
    6.2.1 移动互联网时代,等价于一个新的拨号上网时代 / 186
    6.2.2 以前的小屏幕,变成了现在的大屏幕 / 186
    6.2.3 仅有文字的设计方案回归了 / 187
    6.3 对任何情况都要做好准备 / 190
查看详情