网站蓝图 Axure RP高保真网页原型制作PDF电子书下载

PART 1 基础部分 3

第1章 关于Axure RP 3

1.1 Axure公司的故事 3

1.2装修与Axure 3

1.3爱上Axure RP的十大理由 4

1.4 Axure RP的特色功能 6

1.4.1概念图+设计（Sketch+Design） 6

1.4.2互动 8

1.4.3文档 9

1.4.4合作 10

1.5 Axure RP与其他原型工具的比较 10

第2章 原型和高保真原型的比较 11

2.1什么是原型 11

2.2高保真原型 12

2.3为什么要制作高保真网站原型 13

2.4人人都爱高保真原型 15

2.5谁来制作高保真原型 18

2.6高保真原型的更新 19

2.7开始之前 20

第3章AxureRP软件使用概述 21

3.1 AxureRP软件安装与界面 21

3.2工具栏区域（Toolbox） 21

3.3站点地图区域（Sitemap） 23

3.4部件区域（Widgets） 24

3.4.1线框图部件库 24

3.4.2部件的属性 28

3.5主部件区域（Masters） 30

3.6页面区域（Pages ） 30

3.7页面设置区域（Page Notes/Interactions/ Formattings） 32

3.8部件属性区域（Widget Properties） 33

3.9动态面板管理区域（Dynamic Panel Manager） 34

第4章AxureRP基础操作与技巧 35

4.1为部件添加事件 35

4.2为页面添加事件 42

4.3从Photoshop到Axure RP 42

4.4在Axure RP中使用Flash 47

4.5背景覆盖法 49

4.6拖曳部件 50

4.7坐标 51

4.8尺寸 51

4.9设置变量值 52

4.10生成原型并在浏览器中查看 55

4.11 Snag It用简介 57

PART2 案例部分 61

案例1雅虎首页幻灯 61

步骤1创建新项目 62

步骤2制作广告动态面板 62

步骤3制作Thumbnail区域 63

步骤4滑动切换 64

总结 66

案例2分享到新浪微博 67

步骤1创建新项目 68

步骤2添加分享按钮 68

步骤3制作新浪分享接口页 69

步骤4添加登录动态面板 69

步骤5添加分享按钮动作 70

步骤6为Login面板添加事件 70

步骤7分享成功页面 71

步骤8倒计时3秒 72

总结 73

案例3 Gmail的进度条 75

步骤1制作进度条 75

步骤2制作覆盖物 76

步骤3移动覆盖物 76

步骤4登录页和邮箱页 76

步骤5更改Axure RP的默认打开页面 78

总结 78

案例4新浪富媒体广告示意 79

步骤1准备页面背景 81

步骤2添加必胜客的Flash广告 81

步骤3调整Flash广告的尺寸 81

步骤4关闭Flash广告 82

步骤5 Flash广告的侧边栏 82

步骤6 Flash广告自动关闭 83

总结 84

案例5 icast广告 85

步骤1创建页面背景 86

步骤2添加Flash广告 86

步骤3自动关闭广告 86

总结 86

案例6雅虎首页全屏展开的广告 87

步骤1准备广告动态面板 88

步骤2准备背景页面 88

步骤3自动关闭广告 89

总结 90

案例7淘宝首页导航鼠标悬停效果 91

步骤1准备背景图 92

步骤2制作导航菜单 92

步骤3另外一种方式 93

步骤4进一步的可能性 94

总结 94

案例8淘宝商城的全局导航 95

步骤1准备A区的动态面板 97

步骤2准备B区的动态面板 97

步骤3为面板添加事件 98

步骤4添加文字链 98

步骤5取巧的响应区域 99

步骤6更多的动态面板 101

步骤7更多动态面板 103

总结 104

案例9点评网的打分效果 105

步骤1准备星星的图片 106

步骤2准备动态面板的状态 107

步骤3让“星星闪亮” 107

步骤4打分完成后显示分数 107

步骤5满天都是小星星 108

步骤6 Baby One More Time 109

总结 110

案例10谷歌搜索提示效果 111

步骤1准备背景 112

步骤2准备搜索框 112

步骤3准备提示框 113

步骤4处理tips动态面板的状态 113

步骤5其他的关键词 114

步骤6让搜索提示出现 115

步骤7让页面完整 116

总结 117

案例11自己设计网页播放器 119

步骤1搭建舞台背景 120

步骤2播放和暂停按钮 121

步骤3音量调节按钮 121

步骤4播放进度条 122

总结 124

案例12凡客首页的跑马灯文字链 125

步骤1准备页面元素 129

步骤2编辑舞台面板 129

步骤3为文字链添加链接 131

步骤4无限循环 132

步骤5开始无限循环 135

总结 136

案例13促销的倒计时牌 137

步骤1时·分·秒·百分之一秒 137

步骤2无限循环 137

步骤3 OnMove函数 139

步骤4初始化变量 140

总结 140

案例14制作PPT（提案） 141

步骤1制作背景 142

步骤2将背景制作为主部件（Masters） 142

步骤3制作第一张幻灯片 143

步骤4 Raise Event事件 143

步骤5其他幻灯片 144

步骤6将项目放在公司网站上 145

步骤7简单加密 146

总结 147

案例15淘宝商城首页幻灯效果 149

步骤1搭建幻灯片 150

步骤2搭建幻灯片的页码部分 150

步骤3 timer面板的无限循环 151

总结 154

案例16新浪微博的图片和视频 155

步骤1搭建背景 156

步骤2第一条微博 156

步骤3第二条有图有视频的微博 157

步骤4为Blog2添加图片和视频 158

步骤5添加事件 159

步骤6亲！您有新的微博 160

步骤7新微博的显示 161

总结 162

案例17制作iPhone交互效果 163

步骤1自制iPhone 4的部件库 164

步骤2添加iPhone 4的按钮部件 165

步骤3滑动开关 166

步骤4弹出的通知窗口 167

步骤5制作Tab按钮 168

步骤6其他部件 168

步骤7 iPhone 4的图片应用 169

总结 171

案例18引用任意页面的任意部分 173

步骤1火车票搜索 175

步骤2机票搜索 176

步骤3酒店搜索 177

步骤4其他部分 178

总结 178

案例19通用登录注册第一部分 179

步骤1完成表单的布局 180

步骤2输入框的边框变化 181

步骤3让边框跟随鼠标变化 182

步骤4添加其他输入框的提示 183

总结 184

案例20通用登录注册第二部分 185

步骤1准备验证Email输入 185

步骤2验证Email输入 186

步骤3验证密码 188

步骤4再次验证密码 190

步骤5处理验证码 192

总结 193

案例21 Apple首页的滑动搜索框 195

步骤1准备背景图片 196

步骤2准备项目 197

步骤3滑动模块 198

步骤4让搜索框变大 200

步骤5让搜索框变小 200

总结 202

案例22优衣库淘宝商城购物车 203

步骤1创建商品图片 204

步骤2选择产品颜色 205

步骤3选择尺码 207

步骤4加入购物车 207

步骤5搭建购物车 208

步骤6购物车面板的显示和关闭 211

步骤7查看购物车 213

总结 216

案例23 Looklet的真人试衣间 217

步骤1准备模特 219

步骤2第一件上装 219

步骤3第二件上装 220

步骤4第一件下装 221

步骤5脱衣服 222

总结 223

案例24游戏”大家来找茬” 225

步骤1主界面 226

步骤2关卡1 226

步骤3显示当前关卡数 228

步骤4 挑选关卡 228

步骤5一个关键的地方 229

步骤6倒计时 230

步骤7失败了 231

步骤8一关接一关的玩 234

步骤9解决几个Bug 236

总结 238

PART3 综合案例 241

综合案例1电商网站 241

1需求描述 241

2线框图 242

3购物流程（略，请参考素材） 251

4设计图 252

5高保真线框图 253

6试衣间 268

7结账页面步骤1 269

8结账页面步骤2 276

9结账页面步骤3 278

10结账页面步骤4 279

总结 279

综合案例2促销专题——迅速制作精美的促销专题 281

需求描述 281

步骤1：功能区域 283

步骤2：Logo和搜索框 285

步骤3：导航条 286

步骤4：幻灯区域 287

步骤5：品牌、活动推荐区域 292

步骤6：分类商品区域 293

步骤7：页脚 293

总结 294

外篇 最简单的专题制作方法 295

图片堆砌法 295

直接切图法 296

综合案例3臭美——iphone App 299

需求描述 299

需求分析 301

高保真线框图 301

首页Homepage 303

登录页面login 303

我的臭美日记My beauty dairy 305

查看附近nearby homepage list view 307

查看附近热门排附neaby hottest 310

我关注的人friend feed 311

图详情页single image and flag 313

转评分享rt nd share 313

Ta的信息heraccount 313

拍照页面take photo homepage 315

设置页面setting pages 316

每日拍照闹钟提醒 317

总结 317

综合案例4没够网——影响力社交团购平台 319

需求描述 319

需求分析 320

高保真线框图 320

幻灯区域 321

当前登录用户的信息 322

好友动态 323

最近被我影响的 325

Footer 325

总结 325

综合案例5 Morework——同行同事在线交流平台 327

项目描述 327

需求描述 327

需求分析 328

高保真线框图 332

事儿”页面single post 335

人的页面 335

发新事儿儿 336

注册页面register 339

我的人脉圈 340

登录页面 341

我的公司 341

总结 341