网站蓝图：Axure RP高保真网页原型制作

PART 1 基础部分第1章 关于Axure RP ………………………3 3.4 部件区域（Widgets）………………………24 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 AxureRP的...

第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...

3.1 AxureRP软件安装与界面 …………………21

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

3.2 工具栏区域（Toolbox）……………………21

4.11 Snag It使用简介 ……………………………57

3.3 站点地图区域（Sitemap） ………………23 PART 2 案例部分案例1 雅虎首页幻灯 ………………………61 步骤2 添加分享按钮 ………………………………68 步骤1 创建新项目 …………………………………62 步骤3 制作新浪分享接口页 ……………………69 步骤2 制作广告动态面板…………………………62 步骤4 添加登录动态面板 …………………………69 步骤3 制作Thumbnail区域 ……………………63 步骤5 添加分享按钮动作 …………………………70 步骤4 滑动...

案例2 分享到新浪微博 ……………………67 总 结 ………………………………………………………73 步骤1 创建新项目 …………………………………686----------------------- 页面 8----------------------- 目 录案例3 Gmail的进度条 …………………… 75 案例8 淘宝商城的全局导航 …………… 95 步骤1 制作进度条 …………………………………75 步骤1 准备A区的动态面板 ………………………97 步骤2 制作覆盖物 ………………………...

案例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 打分完成后显...

步骤2 添加Flash广告………………………………86 案例10 谷歌搜索提示效果…………… 111 步骤3 自动关闭广告 ………………………………86 步骤1 准备背景…………………………………… 112 总 结 ………………………………………………………86 步骤2 准备搜索框 ………………………………112 步骤3 准备提示框 ………………………………113案例6 雅虎首页全屏展开的广告 ………87 步骤4 处理tips动态面板的状态 …………… 113 步骤5 其他的关键词 ……………………...

步骤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高保真网页原型制作——AxureRP高保真网页原型制作案例12 凡客首页的跑马灯文字链 … 125 步骤5 添加事件…………………………………… 159 步骤1 准备页面元素 ……………………………129 步骤6 亲！您有新的微博 ……………………… 160 步骤2 编辑舞台面板 ……………………………...

步骤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 其...

步骤1 完成表单的布局 ………………………… 180

总 结 …………………………………………………… 147

步骤2 输入框的边框变化 ……………………… 181 步骤3 让边框跟随鼠标变化 …………………182案例15 淘宝商城首页幻灯效果 …… 149 步骤4 添加其他输入框的提示 ……………… 183 步骤1 搭建幻灯片 ………………………………150 总结 …………………………………………………… 184 步骤2 搭建幻灯片的页码部分 ………………150 步骤3 timer面板的无限循环 …………………151 案例20 通用登录注册第二部分……… 185 总 结 ………………………………………………...

步骤1 准备验证Email输入 …………………… 185 步骤2 验证Email输入 …………………………186案例16 新浪微博的图片和视频 …… 155 步骤3 验证密码…………………………………… 188 步骤1 搭建背景……………………………………156 步骤4 再次验证密码 …………………………… 190 步骤2 第一条微博 ………………………………156 步骤5 处理验证码 ……………………………… 192 步骤3 第二条有图有视频的微博 ……………157 总 结 ……………………………...

综合案例5 Morework——同行同事在线

图详情页single image rt and flag ………… 313

交流平台 …………………………………… 327

转评分享rt nd share ……………………………… 313

Ta的信息heraccount ……………………………313 项目描述 ……………………………………………… 327 拍照页面take photo homepage ……………315 需求描述 ……………………………………………… 327 设置页面settingpages …………………………316 需求分析 ……………………………………………… 328 每日拍照闹钟提醒 …………………………………317 高保真线框图 ………………………………………… 332 总 结 ………………………………………...

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

注册页面register …………………………………… 339

平台…………………………… 319 我的人脉圈…………………………………………… 340 需求描述 ………………………………………………319 登录页面 ……………………………………………… 341 需求分析 ………………………………………………320 我的公司 ……………………………………………… 341 高保真线框图 …………………………………………320 总 结 …………………………………………………… 341