第1章 拥抱变化 1
1.1 精美设计稿的诞生 2
1.2 静态设计稿舒适区 4
1.3 专家的入侵 5
1.4 我们都是交互设计师 8
1.5 跳出瀑布模型 8
1.6 压死骆驼的稻草 9
1.7 屋里的大象 10
1.8 这并非福音书 11
1.9 这是个挑战 11
第2章 从内容开始 13
2.1 微结构vs.模块化结构 14
2.2 懒人的内容清单 16
2.3 通用的例子：本书网站 16
2.4 渐进的设计原则：零界面 17
2.5 创建内容清单示例 18
2.6 试试看 21
第3章 内容参考线框图 23
3.1 别把线框图复杂化 25
3.2 第一步：创建低保真的、基于网络的设计稿 26
3.2.1 创建基础HTML 27
3.2.2 形成基本样式 30
3.2.3 移动优先版线框图 33
3.2.4 添加导航 35
3.2.5 为大尺寸屏幕创造变量 37
3.3 打破神话 43
3.3.1 交互设计师应该做线框图 43
3.3.2 线框图应该详细 44
3.3.3 内容参考线框图是否限制了设计选择？ 44
3.3.4 现在就考虑布局是不是有点太早了？ 45
3.3.5 我应该做什么样的线框图？ 45
3.3.6 我应何时让客户参与？(或者说“我的漂亮的交付品在哪儿？”) 46
3.4 动手试试 46
第4章 基于文本而设计 49
4.1 内容为王 50
4.2 标记纯文本 53
4.2.1 用Markdown来处理图书页面的内容 54
4.2.2 这个阶段修改的意义 56
4.2.3 思考很重要 58
4.3 将纯文本转换为HTML 59
4.3.1 使用命令行 60
4.3.2 转化为HTML 65
第5章 线性设计 67
5.1 开发一种设计语言 68
5.1.1 使用设计漏斗 70
5.1.2 在实际设备中运行设计 72
5.2 增强结构化内容 74
5.2.1 模板介绍 76
5.2.2 目前你的项目文件夹 79
5.2.3 思考和画草图 80
5.2.4 多尝试字体和颜色 81
5.2.5 暂时不要做太多 85
第6章 断点图 87
6.1 文档断点 89
6.1.1 剖析断点 90
6.1.2 可视化断点 92
6.1.3 断点图组件 93
6.2 创建简单的断点图 95
6.3 主次断点 97
6.4 添加更多东西 98
6.5 总结 102
第7章 为断点而设计 103
7.1 首先，关于草图的一点点东西 104
7.1.1 如何素描 105
7.1.2 在设备上素描 109
7.1.3 养成素描的习惯 111
7.2 专注于主断点 112
7.3 素描的时候仔细思考内容 114
7.3.1 文本 114
7.3.2 导航 115
7.3.3 表格 116
7.4 当你没有灵感的时候怎么办 119
第8章 创建Web设计模型 121
8.1 跨越障碍 123
8.1.1 客户不关心 123
8.1.2 其他的人 124
8.1.3 你自己 125
8.1.4 展示你的模型 127
8.2 开始实践 128
8.3 从静态页面到静态网站生成器 133
8.3.1 模板 133
8.3.2 选择一个静态站点生成器 134
8.3.3 关于Dexy 135
8.3.4 安装Dexy 136
8.3.5 你积累的资源 140
8.3.6 添加样式 140
8.3.7 添加内容 142
8.3.8 给内容分组 142
8.3.9 Dexy控制中心：dexy.yaml文件 146
8.3.10 使用CSS完成Web设计模型 148
8.3.11 多个页面 148
8.4 总结 150
第9章 截屏 151
9.1 为什么不直接在网页上进行展示？ 152
9.1.1 演示/现实的平衡 153
9.1.2 截屏：从Web设计模型回到图像 154
9.2 如何截屏 157
9.2.1 手动截屏 157
9.2.2 自动截屏 159
9.3 展示截屏 164
第10章 成果展示：浏览器体验 167
10.1 你会在你的设计中发现很多的bug 168
10.2 沟通与协作 169
10.3 怎样去展示你的交互原型 171
10.3.1 用设备来让你的设计更有说服力 171
10.3.2 解释你的设计 172
10.4 测试和客户审阅 173
10.4.1 客户审阅 175
10.4.2 做好笔记 176
10.4.3 使用笔记去修改设计 182
第11章 创建设计手册 185
11.1 网页设计规范 187
11.2 设计手册的内容与结构 189
11.3 我心仪的规范设计软件 191
11.4 创建设计文档 193
11.4.1 动手写文档 194
11.4.2 添加各种形式的示例 196
11.4.3 生成截图 197
11.4.4 配置Dexy 199
11.4.5 测试整个Dexy项目 200
11.4.6 捕获特定元素的屏幕截图 201
11.4.7 引入能渲染出效果的HTML 204
11.4.8 包含高亮的代码 207
11.4.9 动手做一个你自己的文档 210
11.5 写在末尾的话 211
· · · · · · (收起)
1.1 精美设计稿的诞生 2
1.2 静态设计稿舒适区 4
1.3 专家的入侵 5
1.4 我们都是交互设计师 8
1.5 跳出瀑布模型 8
1.6 压死骆驼的稻草 9
1.7 屋里的大象 10
1.8 这并非福音书 11
1.9 这是个挑战 11
第2章 从内容开始 13
2.1 微结构vs.模块化结构 14
2.2 懒人的内容清单 16
2.3 通用的例子：本书网站 16
2.4 渐进的设计原则：零界面 17
2.5 创建内容清单示例 18
2.6 试试看 21
第3章 内容参考线框图 23
3.1 别把线框图复杂化 25
3.2 第一步：创建低保真的、基于网络的设计稿 26
3.2.1 创建基础HTML 27
3.2.2 形成基本样式 30
3.2.3 移动优先版线框图 33
3.2.4 添加导航 35
3.2.5 为大尺寸屏幕创造变量 37
3.3 打破神话 43
3.3.1 交互设计师应该做线框图 43
3.3.2 线框图应该详细 44
3.3.3 内容参考线框图是否限制了设计选择？ 44
3.3.4 现在就考虑布局是不是有点太早了？ 45
3.3.5 我应该做什么样的线框图？ 45
3.3.6 我应何时让客户参与？(或者说“我的漂亮的交付品在哪儿？”) 46
3.4 动手试试 46
第4章 基于文本而设计 49
4.1 内容为王 50
4.2 标记纯文本 53
4.2.1 用Markdown来处理图书页面的内容 54
4.2.2 这个阶段修改的意义 56
4.2.3 思考很重要 58
4.3 将纯文本转换为HTML 59
4.3.1 使用命令行 60
4.3.2 转化为HTML 65
第5章 线性设计 67
5.1 开发一种设计语言 68
5.1.1 使用设计漏斗 70
5.1.2 在实际设备中运行设计 72
5.2 增强结构化内容 74
5.2.1 模板介绍 76
5.2.2 目前你的项目文件夹 79
5.2.3 思考和画草图 80
5.2.4 多尝试字体和颜色 81
5.2.5 暂时不要做太多 85
第6章 断点图 87
6.1 文档断点 89
6.1.1 剖析断点 90
6.1.2 可视化断点 92
6.1.3 断点图组件 93
6.2 创建简单的断点图 95
6.3 主次断点 97
6.4 添加更多东西 98
6.5 总结 102
第7章 为断点而设计 103
7.1 首先，关于草图的一点点东西 104
7.1.1 如何素描 105
7.1.2 在设备上素描 109
7.1.3 养成素描的习惯 111
7.2 专注于主断点 112
7.3 素描的时候仔细思考内容 114
7.3.1 文本 114
7.3.2 导航 115
7.3.3 表格 116
7.4 当你没有灵感的时候怎么办 119
第8章 创建Web设计模型 121
8.1 跨越障碍 123
8.1.1 客户不关心 123
8.1.2 其他的人 124
8.1.3 你自己 125
8.1.4 展示你的模型 127
8.2 开始实践 128
8.3 从静态页面到静态网站生成器 133
8.3.1 模板 133
8.3.2 选择一个静态站点生成器 134
8.3.3 关于Dexy 135
8.3.4 安装Dexy 136
8.3.5 你积累的资源 140
8.3.6 添加样式 140
8.3.7 添加内容 142
8.3.8 给内容分组 142
8.3.9 Dexy控制中心：dexy.yaml文件 146
8.3.10 使用CSS完成Web设计模型 148
8.3.11 多个页面 148
8.4 总结 150
第9章 截屏 151
9.1 为什么不直接在网页上进行展示？ 152
9.1.1 演示/现实的平衡 153
9.1.2 截屏：从Web设计模型回到图像 154
9.2 如何截屏 157
9.2.1 手动截屏 157
9.2.2 自动截屏 159
9.3 展示截屏 164
第10章 成果展示：浏览器体验 167
10.1 你会在你的设计中发现很多的bug 168
10.2 沟通与协作 169
10.3 怎样去展示你的交互原型 171
10.3.1 用设备来让你的设计更有说服力 171
10.3.2 解释你的设计 172
10.4 测试和客户审阅 173
10.4.1 客户审阅 175
10.4.2 做好笔记 176
10.4.3 使用笔记去修改设计 182
第11章 创建设计手册 185
11.1 网页设计规范 187
11.2 设计手册的内容与结构 189
11.3 我心仪的规范设计软件 191
11.4 创建设计文档 193
11.4.1 动手写文档 194
11.4.2 添加各种形式的示例 196
11.4.3 生成截图 197
11.4.4 配置Dexy 199
11.4.5 测试整个Dexy项目 200
11.4.6 捕获特定元素的屏幕截图 201
11.4.7 引入能渲染出效果的HTML 204
11.4.8 包含高亮的代码 207
11.4.9 动手做一个你自己的文档 210
11.5 写在末尾的话 211
· · · · · · (收起)
具体描述
固定寬度的Photoshop圖層、不斷膨脹的客戶需求、無休止的綫框圖……拋棄它們吧！陳舊的Web設計交付流程不再適用於移動時代的響應式方案。設計的工作流本質上並沒有發生改變，是最佳實踐變瞭。
《響應式Web設計全流程解析》為你展示瞭如何擁抱新的設計範式，創造微信時代的網站。你會學到的策略包括：如何更好地管理客戶的開發需求和預期；在瀏覽器中進行設計的方法；超越靜態的Photoshop圖層的文檔化方法；將響應式設計斷點可視化的方法。 學習並掌握《響應式Web設計全流程解析》引人入勝的內容之後，你就可以完全拋棄老舊的瀑布流交付模型，轉而使用一種全新的方式來設計移動時代的網站。
用户评价
评分
评分
##从学习的先后来讲：了解流程 > 深入技术。没有流程，开发会陷入迷茫与混乱。 全栈：前端开发者也要培养培养自己的品味，学习、参与设计！
评分##断点图
评分 评分 评分 评分烂爆了…
评分##让我这个非互联网公司搞前端的对整个前端开发流程有了较全面的了解 自己也在尝试其中的流程方法
评分##通俗易懂，不错的工具书。
相关图书
本站所有內容均為互聯網搜索引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2025 tushu.tinynews.org All Rights Reserved. 求知書站 版权所有