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

　　尽量在100字以内讲清楚一本书的价值或卖点。AxureRP，一款伟大的，默默无闻的网站建模软件。说它伟大，是因为它用如此简单的方式，将千言万语化作无声的默契；说它默默无闻，是因为只有很少的人在偷偷的使用着它，编织和描绘自己的梦想和创意。而大部分人尚不知道有这样一款神奇的软件，可以让人们如此清晰的触摸一个网站的脉络。仁者见仁，智者见智这样一句话，不知道让多少网站的建设经历了推倒重来，混乱之治，莫名其妙，虎头蛇尾的痛苦过程。这一切的原因都是因为，文字是不可靠的！文字的不可靠在于，不同的人对于同样的文字，会有不同的理解。这样不同的理解也就从一开始将网站建设带入了深渊。所有的人都知道，建筑是靠图纸造出来的。建筑图纸详细说明了建筑是什么样子的，所有人照着图纸施工，造出来的大楼是跟图纸一模一样的。正因为很多网站没有好的图纸，才导致了网站建设中的拖沓与混乱。那么，如何制作网站的图纸？AxureRP就是用来给网站画图纸的软件。它如同服装设计师的样衣，如同建筑师的图纸，如同电影导演的故事板，如同售楼处的样板间。总之，它能让你在真正付出时间和金钱来制作一个网站之前，能够完全了解到最终真正网站所具有的功能，设计，交互和用户体验。就亲眼看到，亲手用到一个网站。然后在这个原型的基础上进行用户测试和改进，节省大量的时间和金钱。比这个更棒的是，它能让别人一下子就明白网站是做什么的，如何使用一个网站以及要花多少人力物力把一个网站给做出来。

　　吕皓月，网名阿睡（Mrsleepy），2002年毕业于北京大学物理系。毕业后出国未遂，一直从事互联网相关的工作。曾就职于雅虎，阿里巴巴，公司A，公司B等公司。担任过工程师，产品经理，销售策划，市场策划，营销总监等职务。对互联网行业的产品，技术，营销等方面有着持续的热情。曾为上线彻夜不眠，曾为书写需求文档呕心沥血，曾为表明观点苦口婆心，曾为实现功能软磨硬泡、威逼利诱，曾为争取资源据理力争，也曾为了迸发的灵感奋笔疾书到凌晨。不敢说对互联网行业有多么深的理解，但是却对自己喜欢的事情热情未泯。期望能与互联网的同业者共勉，能够多劳真的多得。杨长韬，网名Tom Yang，近洋海归。2004年初离开任职3年的卓越网出国深造，学习广告营销与视觉设计。2007年回国至今从事商业品牌建立、互联网营销以及体验设计等相关工作，参与的项目包括雀巢、北欧航空、三里屯Village以及钓鱼台米高梅集团酒店等，然而最值得称道的作品是2010年为其太太制作的Google Map电子贺卡，在被Google官方取缔前的4天中，其访问流量Alexa排名Google Map关键词全球第二。

                   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的特色功能       ………………………  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   AxureRP与其他原型工具的比较…………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                                               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   创建新项目      …………………………………686----------------------- 页面 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高保真网页原型制作——AxureRP高保真网页原型制作案例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    RaiseEvent事件       ………………………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添加图片和视频         …………… 1588----------------------- 页面 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高保真网页原型制作——AxureRP高保真网页原型制作   高保真线框图 …………………………………………301              幻灯区域     ……………………………………………… 321   首页Homepage  ……………………………………303                  当前登录用户的信息  ……………………………… 322   登录页面login     ………………………………………303           好友动态     ……………………………………………… 323   我的臭美日记 My beauty dairy ………………305                  最近被我影响的……………………………………… 325   查看附近 nearby homepage list view  ……307                    Footer    ………………………………………………… 325   查看附近热门排行neabyhottest          …………… 310          总结   …………………………………………………… 325   我关注的人friend feed…………………………… 311
                                                                综合案例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   总 结   ……………………………………………………317            “事儿”页面single post …………………………… 335                                                                  人的页面     ……………………………………………… 335                                                                  发新事儿     ……………………………………………… 336
综合案例4  没够网——影响力社交团购
                                                                  注册页面register …………………………………… 339
                平台……………………………           319        我的人脉圈…………………………………………… 340   需求描述    ………………………………………………319           登录页面     ……………………………………………… 341   需求分析    ………………………………………………320           我的公司     ……………………………………………… 341   高保真线框图 …………………………………………320              总 结   …………………………………………………… 341