《网站蓝图》章节试读

《网站蓝图》的笔记-第8页 - 第一章 关于Axure RP

1.2 装修与Axure
“网站的超级样板间”
1.3 爱上Axure的十大理由
10.可以互动演示，使用Axure高保真原型达到功能和视觉上的统一。
8.可在PC和Mac间通用
7.可提前知道用户到底是否喜欢您的产品
5.可与世界上另外一个地方的同事一起做一个项目
3.工程师终于清楚你想要什么了
1.4 Axure的特色功能
1.4.1 概念图+设计
既可粗略设计（线框图），也可精细设计（高保真原型）
随时切换到手绘草图效果
快速上手
一处修改，处处更改（主部件）
部件库调用
1.4.2 互动
创建点击流网页
所见即所得
一键生成HTML代码

《网站蓝图》的笔记-第203页 - 案例22

我就是做个笔记，这本书 告一段落

《网站蓝图》的笔记-第58页

很棒!将基本的部分都看完了。以后就剩下来实践了。

《网站蓝图》的笔记-第1页 - 效率就是生命

王坚
糗事百科（www.qiushibaike.com）
秘密（thesecretapp.com）
起床大作战（app.qiushibaike.com/qichuang）

《网站蓝图》的笔记-第1页

挺后悔买的，华而不实。

《网站蓝图》的笔记-第1页

在读

《网站蓝图》的笔记-第1页 - 1

PART 1 基础部分
第1章 关于Axure RP ……………………… 3
1.1 Axure公司的故事 …………………………… 3 3.4.1 线框图部件库 …………………………………24
1.2 装修与Axure …………………………………… 3 3.4.2 部件的属性………………………………………28
1.3 爱上Axure RP的十大理由 ………………… 4 3.5 主部件区域（Masters）……………………30
1.4 Axure RP的特色功能 ……………………… 6 3.6 页面区域（Pages） …………………………30
1.4.1 概念图+设计（Sketch+Design） …… 6 3.7 页面设置区域 （Page Notes/Interactions/
1.4.2 互动 ……………………………………………… 8 Formattings）…………………………………32
1.4.3 文档 ……………………………………………… 9 3.8 部件属性区域（Widget
1.4.4 合作 ………………………………………………10 Properties）……………………………………33
1.5 Axure RP与其他原型工具的比较…………10 3.9 动态面板管理区域（Dynamic Panel
Manager） ……………………………………34
11
第2章 原型和高保真原型的比较 ………
35
第4章 AxureRP基础操作与技巧 ………
2.1 什么是原型 ………………………………………11
2.2 高保真原型 ………………………………………12 4.1 为部件添加事件 ………………………………35
2.3 为什么要制作高保真网站原型 ……………13 4.2 为页面添加事件 ………………………………42
2.4 人人都爱高保真原型 …………………………15 4.3 从Photoshop到Axure RP …………………42
2.5 谁来制作高保真原型 …………………………18 4.4 在Axure RP中使用Flash ……………………47
2.6 高保真原型的更新 ……………………………19 4.5 背景覆盖法 ………………………………………49
2.7 开始之前 …………………………………………20 4.6 拖曳部件 …………………………………………50
4.7 坐标 ………………………………………………51
第3章 AxureRP软件使用概述 21 4.8 尺寸 ………………………………………………51
4.9 设置变量值 ………………………………………52
3.1 AxureRP软件安装与界面 …………………21
4.10 生成原型并在浏览器中查看 ………………55
3.2 工具栏区域（Toolbox）……………………21
4.11 Snag It使用简介 ……………………………57
3.3 站点地图区域（Sitemap） ………………23
3.4 部件区域（Widgets）………………………24


PART 2 案例部分
案例1 雅虎首页幻灯 ……………………… 61 步骤2 添加分享按钮 ………………………………68
步骤1 创建新项目 …………………………………62 步骤3 制作新浪分享接口页 ……………………69
步骤2 制作广告动态面板 …………………………62 步骤4 添加登录动态面板 …………………………69
步骤3 制作Thumbnail区域 ……………………63 步骤5 添加分享按钮动作 …………………………70
步骤4 滑动切换………………………………………64 步骤6 为Login面板添加事件……………………70
总 结 ………………………………………………………66 步骤7 分享成功页面 ………………………………71
步骤8 倒计时3秒 ……………………………………72
案例2 分享到新浪微博 …………………… 67 总 结 ………………………………………………………73
步骤1 创建新项目 …………………………………68
6
----------------------- 页面 8-----------------------
目 录
案例3 Gmail的进度条 …………………… 75 案例8 淘宝商城的全局导航 …………… 95
步骤1 制作进度条 …………………………………75 步骤1 准备A区的动态面板 ………………………97
步骤2 制作覆盖物 …………………………………76 步骤2 准备B区的动态面板 ………………………97
步骤3 移动覆盖物 …………………………………76 步骤3 为面板添加事件 ……………………………98
步骤4 登录页和邮箱页 ……………………………76 步骤4 添加文字链 …………………………………98
步骤5 更改Axure RP的默认打开页面 ………78 步骤5 取巧的响应区域 ……………………………99
总 结 ………………………………………………………78 步骤6 更多的动态面板 ………………………… 101
步骤7 更多动态面板 …………………………… 103
总 结 …………………………………………………… 104
案例4 新浪富媒体广告示意 …………… 79
步骤1 准备页面背景 ………………………………81
步骤2 添加必胜客的Flash广告 …………………81 案例9 点评网的打分效果 ……………… 105
步骤3 调整Flash广告的尺寸 ……………………81 步骤1 准备星星的图片 ………………………… 106
步骤4 关闭Flash广告………………………………82 步骤2 准备动态面板的状态 ………………… 107
步骤5 Flash广告的侧边栏 ………………………82 步骤3 让“星星闪亮” …………………………… 107
步骤6 Flash广告自动关闭 ………………………83 步骤4 打分完成后显示分数 ………………… 107
总 结 ………………………………………………………84 步骤5 满天都是小星星 ………………………… 108
步骤6 Baby One More Time ……………… 109
案例5 iCast广告 …………………………… 85 总 结 …………………………………………………… 110
步骤1 创建页面背景 ………………………………86
步骤2 添加Flash广告………………………………86 案例10 谷歌搜索提示效果 …………… 111
步骤3 自动关闭广告 ………………………………86 步骤1 准备背景…………………………………… 112
总 结 ………………………………………………………86 步骤2 准备搜索框 ……………………………… 112
步骤3 准备提示框 ……………………………… 113
案例6 雅虎首页全屏展开的广告 ……… 87 步骤4 处理tips动态面板的状态 …………… 113
步骤5 其他的关键词 …………………………… 114
步骤1 准备广告动态面板 …………………………88
步骤6 让搜索提示出现 ………………………… 115
步骤2 准备背景页面 ………………………………88
步骤7 让页面完整 ……………………………… 116
步骤3 自动关闭广告 ………………………………89
总 结 …………………………………………………… 117
总 结 ………………………………………………………90
案例11 自己设计网页播放器 ………… 119
案例7 淘宝首页导航鼠标悬停效果 …… 91
步骤1 搭建舞台背景 …………………………… 120
步骤1 准备背景图 …………………………………92
步骤2 播放和暂停按钮 ………………………… 121
步骤2 制作导航菜单 ………………………………92
步骤3 音量调节按钮 …………………………… 121
步骤3 另外一种方式 ………………………………93
步骤4 播放进度条 ……………………………… 122
步骤4 进一步的可能性 ……………………………94
总 结 …………………………………………………… 124
总 结 ………………………………………………………94
7
----------------------- 页面 9-----------------------
网站蓝图网站蓝图 ——Axure RP高保真网页原型制作——Axure RP高保真网页原型制作
案例12 凡客首页的跑马灯文字链 … 125 步骤5 添加事件…………………………………… 159
步骤1 准备页面元素 …………………………… 129 步骤6 亲！您有新的微博 ……………………… 160
步骤2 编辑舞台面板 …………………………… 129 步骤7 新微博的显示 …………………………… 161
步骤3 为文字链添加链接 ……………………… 131 总 结 …………………………………………………… 162
步骤4 无限循环…………………………………… 132
步骤5 开始无限循环 …………………………… 135 案例17 制作iPhone交互效果 ……… 163
总 结 …………………………………………………… 136
步骤1 自制iPhone 4的部件库 ……………… 164
步骤2 添加iPhone 4的按钮部件 …………… 165
案例13 促销的倒计时牌 ……………… 137 步骤3 滑动开关…………………………………… 166
步骤1 时·分·秒·百分之一秒 …………………… 137 步骤4 弹出的通知窗口 ………………………… 167
步骤2 无限循环…………………………………… 137 步骤5 制作Tab按钮……………………………… 168
步骤3 OnMove函数 …………………………… 139 步骤6 其他部件…………………………………… 168
步骤4 初始化变量 ……………………………… 140 步骤7 iPhone 4的图片应用 ………………… 169
总 结 …………………………………………………… 140 总 结 …………………………………………………… 171
案例14 制作PPT（提案） …………… 141 案例18 引用任意页面的任意部分 … 173
步骤1 制作背景…………………………………… 142 步骤1 火车票搜索 ……………………………… 175
步骤2 将背景制作为主部件 步骤2 机票搜索…………………………………… 176
（Masters） ……………………………… 142 步骤3 酒店搜索…………………………………… 177
步骤3 制作第一张幻灯片 ……………………… 143 步骤4 其他部分…………………………………… 178
步骤4 Raise Event事件 ……………………… 143 总结 …………………………………………………… 178
步骤5 其他幻灯片 ……………………………… 144
步骤6 将项目放在公司网站上 ……………… 145 案例19 通用登录注册第一部分 …… 179
步骤7 简单加密…………………………………… 146
步骤1 完成表单的布局 ………………………… 180
总 结 …………………………………………………… 147
步骤2 输入框的边框变化 ……………………… 181
步骤3 让边框跟随鼠标变化 ………………… 182
案例15 淘宝商城首页幻灯效果 …… 149 步骤4 添加其他输入框的提示 ……………… 183
步骤1 搭建幻灯片 ……………………………… 150 总结 …………………………………………………… 184
步骤2 搭建幻灯片的页码部分 ……………… 150
步骤3 timer面板的无限循环 ………………… 151 案例20 通用登录注册第二部分 ……… 185
总 结 …………………………………………………… 154
步骤1 准备验证Email输入 …………………… 185
步骤2 验证Email输入 ………………………… 186
案例16 新浪微博的图片和视频 …… 155 步骤3 验证密码…………………………………… 188
步骤1 搭建背景…………………………………… 156 步骤4 再次验证密码 …………………………… 190
步骤2 第一条微博 ……………………………… 156 步骤5 处理验证码 ……………………………… 192
步骤3 第二条有图有视频的微博 …………… 157 总 结 …………………………………………………… 193
步骤4 为Blog2添加图片和视频 …………… 158
8
----------------------- 页面 10-----------------------
目 录
案例21 Apple首页的滑动搜索框 … 195 案例23 Looklet的真人试衣间 ……… 217
步骤1 准备背景图片 …………………………… 196 步骤1 准备模特…………………………………… 219
步骤2 准备项目…………………………………… 197 步骤2 第一件上装 ……………………………… 219
步骤3 滑动模块…………………………………… 198 步骤3 第二件上装 ……………………………… 220
步骤4 让搜索框变大 …………………………… 200 步骤4 第一件下装 ……………………………… 221
步骤5 让搜索框变小 …………………………… 200 步骤5 脱衣服 ……………………………………… 222
总 结 …………………………………………………… 202 总 结 …………………………………………………… 223
案例22 优衣库淘宝商城购物车 …… 203 案例24 游戏"大家来找茬" …………… 225
步骤1 创建商品图片 …………………………… 204 步骤1 主界面 ……………………………………… 226
步骤2 选择产品颜色 …………………………… 205 步骤2 关卡1 ……………………………………… 226
步骤3 选择尺码…………………………………… 207 步骤3 显示当前关卡数 ………………………… 228
步骤4 加入购物车 ……………………………… 207 步骤4 挑选关卡…………………………………… 228
步骤5 搭建购物车 ……………………………… 208 步骤5 一个关键的地方 ………………………… 229
步骤6 购物车面板的显示和关闭 …………… 211 步骤6 倒计时 ……………………………………… 230
步骤7 查看购物车 ……………………………… 213 步骤7 失败了 ……………………………………… 231
总 结 …………………………………………………… 216 步骤8 一关接一关的玩 ………………………… 234
步骤9 解决几个Bug …………………………… 236
总 结 …………………………………………………… 238
PART 3 综合案例
综合案例1 电商网站 …………………… 241 综合案例2 促销专题——迅速制作精美的
1. 需求描述 …………………………………………… 241 促销专题 …………………… 281
2. 线框图 ……………………………………………… 242 需求描述 ……………………………………………… 281
3. 购物流程（略，请参考素材） ……………… 251 步骤1：功能区域 …………………………………… 283
4. 设计图 ……………………………………………… 252 步骤2：Logo和搜索框 …………………………… 285
5. 高保真线框图 …………………………………… 253 步骤3：导航条 ……………………………………… 286
6. 试衣间 ……………………………………………… 268 步骤4：幻灯区域 …………………………………… 287
7. 结账页面步骤1…………………………………… 269 步骤5：品牌、活动推荐区域 …………………… 292
8. 结账页面步骤2…………………………………… 276 步骤6：分类商品区域 …………………………… 293
9. 结账页面步骤3…………………………………… 278 步骤7：页脚 ………………………………………… 293
10. 结账页面步骤4 ………………………………… 279 总 结 …………………………………………………… 294
总 结 …………………………………………………… 279
外篇 最简单的专题制作方法………… 295 综合案例3 臭美——iphone App … 299
图片堆砌法 …………………………………………… 295 需求描述 ……………………………………………… 299
直接切图法 …………………………………………… 296 需求分析 ……………………………………………… 301
9
----------------------- 页面 11-----------------------
网站蓝图网站蓝图 ——Axure RP高保真网页原型制作——Axure RP高保真网页原型制作
高保真线框图 ………………………………………… 301 幻灯区域 ……………………………………………… 321
首页Homepage …………………………………… 303 当前登录用户的信息 ……………………………… 322
登录页面login ……………………………………… 303 好友动态 ……………………………………………… 323
我的臭美日记 My beauty dairy ……………… 305 最近被我影响的……………………………………… 325
查看附近 nearby homepage list view …… 307 Footer ………………………………………………… 325
查看附近热门排行neaby hottest …………… 310 总结 …………………………………………………… 325
我关注的人friend feed…………………………… 311
综合案例5 Morework——同行同事在线
图详情页single image rt and flag ………… 313
交流平台 …………………………………… 327
转评分享rt nd share ……………………………… 313
Ta的信息her account …………………………… 313 项目描述 ……………………………………………… 327
拍照页面take photo homepage …………… 315 需求描述 ……………………………………………… 327
设置页面setting pages ………………………… 316 需求分析 ……………………………………………… 328
每日拍照闹钟提醒 ………………………………… 317 高保真线框图 ………………………………………… 332
总 结 …………………………………………………… 317 “事儿”页面single post …………………………… 335
人的页面 ……………………………………………… 335
发新事儿 ……………………………………………… 336
综合案例4 没够网——影响力社交团购
注册页面register …………………………………… 339
平台 …………………………… 319 我的人脉圈 …………………………………………… 340
需求描述 ……………………………………………… 319 登录页面 ……………………………………………… 341
需求分析 ……………………………………………… 320 我的公司 ……………………………………………… 341
高保真线框图 ………………………………………… 320 总 结 …………………………………………………… 341

《网站蓝图》的笔记-第20页

snagit截图工具，截滚屏，不错