网站蓝图

2012-7  

吕皓月、 杨长韬 清华大学出版社 (2012-07出版)  

吕皓月，杨长韬 著  

无  

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

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

PART 1 基础部分 第1章 关于Axure RP 1.1 Axure公司的故事 1.2 装修与Axure 1.3 爱上Axure RP的十大理由 1.4 Axure RP的特色功能 1.4.1 概念图+设计（Sketch+Design） 1.4.2 互动 1.4.3 文档 1.4.4 合作 1.5 Axure RP与其他原型工具的比较 第2章 原型和高保真原型的比较 2.1 什么是原型 2.2 高保真原型 2.3 为什么要制作高保真网站原型 2.4 人人都爱高保真原型 2.5 谁来制作高保真原型 2.6 高保真原型的更新 2.7 开始之前 第3章 AxureRP软件使用概述 3.1 AxureRP软件安装与界面 3.2 工具栏区域（Toolbox） 3.3 站点地图区域（Sitemap） 3.4 部件区域（Widgets） 3.4.1 线框图部件库 3.4.2 部件的属性 3.5 主部件区域（Masters） 3.6 页面区域（Pages） 3.7 页面设置区域（Page Notes/Interactions/Formattings） 3.8 部件属性区域（Widget Properties） 3.9 动态面板管理区域（Dynamic Panel Manager） 第4章 AxureRP基础操作与技巧 4.1 为部件添加事件 4.2 为页面添加事件 4.3 从Photoshop到Axure RP 4.4 在Axure RP中使用Flash 4.5 背景覆盖法 4.6 拖曳部件 4.7 坐标 4.8 尺寸 4.9 设置变量值 4.10 生成原型并在浏览器中查看 4.11 Snag It使用简介 PART 2 案例部分 案例1 雅虎首页幻灯 步骤1 创建新项目 步骤2 制作广告动态面板 步骤3 制作Thumbnail区域 步骤4 滑动切换 总结 案例2 分享到新浪微博 步骤1 创建新项目 步骤2 添加分享按钮 步骤3 制作新浪分享接口页 步骤4 添加登录动态面板 步骤5 添加分享按钮动作 步骤6 为Login面板添加事件 步骤7 分享成功页面 步骤8 倒计时3秒 总结 案例3 Gmail的进度条 步骤1 制作进度条 步骤2 制作覆盖物 步骤3 移动覆盖物 步骤4 登录页和邮箱页 步骤5 更改Axure RP的默认打开页面 总结 案例4 新浪富媒体广告示意 步骤1 准备页面背景 步骤2 添加必胜客的Flash广告 步骤3 调整Flash广告的尺寸 步骤4 关闭Flash广告 步骤5 Flash广告的侧边栏 步骤6 Flash广告自动关闭 总结 案例5 iCast广告 步骤1 创建页面背景 步骤2 添加Flash广告 步骤3 自动关闭广告 总结 案例6 雅虎首页全屏展开的广告 步骤1 准备广告动态面板 步骤2 准备背景页面 步骤3 自动关闭广告 总结 案例7 淘宝首页导航鼠标悬停效果 步骤1 准备背景图 步骤2 制作导航菜单 步骤3 另外一种方式 步骤4 进一步的可能性 总结 案例8 淘宝商城的全局导航 步骤1 准备A区的动态面板 步骤2 准备B区的动态面板 步骤3 为面板添加事件 步骤4 添加文字链 步骤5 取巧的响应区域 步骤6 更多的动态面板 步骤7 更多动态面板 总结 案例9 点评网的打分效果 步骤1 准备星星的图片 步骤2 准备动态面板的状态 步骤3 让“星星闪亮” 步骤4 打分完成后显示分数 步骤5 满天都是小星星 步骤6 Baby One More Time 总结 案例10 谷歌搜索提示效果 步骤1 准备背景 步骤2 准备搜索框 步骤3 准备提示框 步骤4 处理tips动态面板的状态 步骤5 其他的关键词 步骤6 让搜索提示出现 步骤7 让页面完整 总结 案例11 自己设计网页播放器 步骤1 搭建舞台背景 步骤2 播放和暂停按钮 步骤3 音量调节按钮 步骤4 播放进度条 总结 案例12 凡客首页的跑马灯文字链 步骤1 准备页面元素 步骤2 编辑舞台面板 步骤3 为文字链添加链接 步骤4 无限循环 步骤5 开始无限循环 总结 案例13 促销的倒计时牌 步骤1 时•分•秒•百分之一秒 步骤2 无限循环 步骤3 OnMove函数 步骤4 初始化变量 总结 案例14 制作PPT（提案） 步骤1 制作背景 步骤2 将背景制作为主部件（Masters） 步骤3 制作第一张幻灯片 步骤4 Raise Event事件 步骤5 其他幻灯片 步骤6 将项目放在公司网站上 步骤7 简单加密 总结 案例15 淘宝商场首页幻灯效果 步骤1 搭建幻灯片 步骤2 搭建幻灯片的页码部分 步骤3 timer面板的无限循环 总结 案例16 新浪微博的图片和视频 步骤1 搭建背景 步骤2 第一条微博 步骤3 第二条有图有视频的微博 步骤4 为Blog2添加图片和视频 步骤5 添加事件 步骤6 亲！您有新的微博 步骤7 新微博的显示 总结 案例17 制作iPhone交互效果 步骤1 自制iPhone 4的部件库 步骤2 添加iPhone 4的按钮部件 步骤3 滑动开关 步骤4 弹出的通知窗口 步骤5 制作Tab按钮 步骤6 其他部件 步骤7 iPhone 4的图片应用 总结 案例18 引用任意页面的任意部分 步骤1 火车票搜索 步骤2 机票搜索 步骤3 酒店搜索 步骤4 其他部分 总结 案例19 通用登陆注册第一部分 步骤1 完成表单的布局 步骤2 输入框的边框变化 步骤3 让边框跟随鼠标变化 步骤4 添加其他输入框的提示 总结 案例20 通用登陆注册第二部分 步骤1 准备验证Email输入 步骤2 验证Email输入 步骤3 验证密码 步骤4 再次验证密码 步骤5 处理验证码 总结 案例21 Apple首页的滑动搜索框 步骤1 准备背景图片 步骤2 准备项目 步骤3 滑动模块 步骤4 让搜索框变大 步骤5 让搜索框变小 总结 案例22 优衣库淘宝商城购物车 步骤1 创建商品图片 步骤2 选择产品颜色 步骤3 选择尺码 步骤4 加入购物车 步骤5 搭建购物车 步骤6 购物车面板的显示和关闭 步骤7 查看购物车 总结 案例23 Looklet的真人试衣间 步骤1 准备模特 步骤2 第一件上装 步骤3 第二件上装 步骤4 第—件下装 步骤5 脱衣服 总结 案例24 游戏“大家来找茬” 步骤1 主界面 步骤2 关卡1 步骤3 显示当前关卡数 步骤4 挑选关卡 步骤5 一个关键的地方 步骤6 倒计时 步骤7 失败了 步骤8 一关接一关的玩 步骤9 解决几个Bug 总结 PART3 综合案例 综合案例1 电商网站 1.需求描述 2.线框图 3.购物流程（略，请参考素材） 4.设计图 5.高保真线框图 6.试衣间 7.结账页面步骤1 8.结账页面步骤2 9.结账页面步骤3 10.结账页面步骤4 总结 综合案例2 促销专题——迅速制作精美的促销专题 需求描述 步骤1：功能区域 步骤2：Logo和搜索框 步骤3：导航条 步骤4：幻灯区域 步骤5：品牌、活动推荐区域 步骤6：分类商品区域 步骤7：页脚 总结 外篇 最简单的专题制作方法 图片堆砌法 直接切图法 综合案例3 臭美——iphoto App 需求描述 需求分析 高保真线框图 首页Homepage 登录页面login 我的臭美日记My beauty dairy 查看附近nearby homepage list view 查看附近热门排行neaby hottest 我关注的人friend feed 图详情页single image rt and flag 转评分享rt nd share Ta的信息her account 拍照页面take photo homepage 设置页面setting pages 每日拍照闹钟提醒 总结 综合案例4 没够网——影响力社交团平台 需求描述 需求分析 高保真线框图 幻灯区域 当前登录用户的信息 好友动态 最近被我影响的 Footer 总结 综合案例5 Morework——同行同事在线交流平台 项目描述 需求描述 需求分析 高保真线框图 “事儿”页面single post 人的页面 发新事儿 注册页面register 我的人脉圈 登录页面 我的公司 总结

版权页： 插图： 设计师关心的是：我们要为什么样的人，设计什么样的东西？ 设计师都是很有想象力，很有想法的人。但是我们不能让设计师天马行空地去设计。如果你是一个设计师，有人对你说：设计一个xx东西吧，没有任何限制，让你的创意尽情发挥吧！那你千万别高兴，你要对他说：回去再想想吧。否则，你很有可能收不到设计费哦！我们需要的设计师，是能够在“框中作画”的设计师。他们一定要受到各方面的限制，然后在各种限制中寻求平衡。是的，就像运动员，你要遵守一个运动的基本规则（没听说过奥林匹克随便做运动吧？），才能成为一个伟大的运动员。而我们要传达给设计师的，就是他们要遵循的限制和规则。所以，你想得到最好的结果，就要设定最好的、最合适的限制。 不以规矩，不成方圆，全是规矩，方圆难辨。高保真原型对于设计师来说： •首先能让他们非常清楚限制之所在（—个7个字的标题设计与一个200字的文章设计完全没有可比性）； •其次能让设计师以较低成本表达他们的多个创意方案，供决策者和目标用户测试，发现最好的方案； •最后，能够让设计师从头到尾的去想—件事情，避免出现设计师想得很好，设计得很棒，但是却根本无法在时间和金钱预算内做出来的尴尬局面。 客服人员 客服人员关心的是：如果用户问我这个问瘤，我该怎么回答？ 客服人员的挑战在于，他们要用人类的语言来回答。他们不能说“就是这么设计的！”，说“会在下个版本中实现”也不是一句很体面的话。所以，客服人员是除了产品经理外的产品专家。

欲成其事，先利其器，对于许多互联网从业人员(尤其是产品人员或UE设计师)来说，Axure RP无疑是你行走江湖、养家糊口的必备兵刃，这是一本读起来像小说的剑谱，阅读过程很轻松，却对功力提升大有助益。 ——暴风影音 产品副总裁 崔天龙 该书详尽剖析实用案例，充分展现编者在宏观教学上的掌控力。作为iOS开发者来说，Axure RP无疑是必备软件之一，如何在工作中充分运用Axure RP，却成为许多iOS开发者的心头病。Axure RP本身并没有教学说明，网络上只有一些简单介绍，想要做到玩转Axure RP，单靠这些是无法实现的。而现在，该书的出现，成为iOS开发者的福音，草草翻阅便爱不释手，不仅可帮助初学者迅速学习技巧，也可用于高级开发者的进阶提升，实用性很强，图文配合简明文字，清楚易学，绝对是不可错过的iOS开发者必备建模书。 ——IMOHOO INFOTECH 副总经理 王斐 本书以各大网站的实际页面为例子，详细描述了如何从一个想法，到低保真线框图，再到高保真页面原型的过程，并且结合了项目管理中（提案、归纳、演示等）的各种实用建议。是产品经理、技术工程师、商务合作人员、创业者必备指南。 ——百度资深产品经理 闫研 技术人员经常说：好的产品经理就和一段完美的爱情一样，是可遇而不可求的。和吕皓月同事了两家公司，并肩作战了多个项目，他一直都是我们公认的优秀产品经理，他编写的产品文档也是我们最愿意拿给新人学习的。 ——混迹于互联网的 @博升优势王志强 这本书从Axure RP的历史背景、适用范围入手，通过跟其他图形工具的对比充分展示了它在项目开发中的重要性和优越性。在对Axure RP有了一个初步了解之后，又通过图文搭配的方式详细具体地介绍了Axure RP的特色功能，同时结合实际教学案例，使用户能够轻松、快速地掌握学习内容，并在实际操作中熟练运用，使项目开发事半功倍。 ——魔盒信息科技有限公司 技术总监 王宝存 网站开发中，产品经理无论是写文档还是让技术人员去阅读文档，无疑都是一件非常低效的事情。尝试更高效的工具吧！Axure高保真的原型效果既能直观体现出产品经理的想法，又能和技术人员达成无障碍的沟通。这是一本循序渐进地讲解Axure RP使用的书，有大量和实战相关的案例讲解，如果您要更高效地阐述您的想法，更快速地建立产品原型，那么本书是您的案头必备！ ——美乐网技术总监 冷昊 非常实用，是互联网产品经理提高效率的必备工具书。 ——淘宝联盟广告策划 黛羽 这是一本深入浅出的Axure实战宝典，鲜活生动的案例式教学，让经典原型制作工具的学习不仅仅是纸上谈兵。帮助你简单、全面、深刻了解Axure。 ——去哪儿网 产品总监 高兴 每个产品经理都会喜欢上这本书，因为它能让你的每一个奇妙想法都快速展现在大家面前，它能让投资人喜欢你、让老板喜欢你、让设计师喜欢你、让工程师喜欢你…… ——新浪乐居 刘博 不管是一本好书还是一款优秀的软件，都不可能永久称霸。而本书，我不敢说永远不会被超越，但我敢说一定是未来三年内最受用的互联网工作者用书——记住：“不是之一”。我建议本书应该作为互联网从业人士的必读书籍。 ——前雅虎网高级编辑 胡烨

《网站蓝图:Axure RP高保真网页原型制作》直入正题，用24个取自淘宝、雅虎、新浪、谷歌、苹果等著名网站的网页功能点和5个整体网站的综合案例，详细说明如何使用Axure RP一步一步制作网站高保真原型图，也就是网站的图纸。在功能点中，与时俱进地选择了当前互联网最流行的功能和技术，比如社交网络、团购、iPhone4、电子商务、微博、富媒体广告等，也充分考虑了互联网从业人员中各个角色的需求，比如产品经理、决策者、工程师、市场营销人员、广告公司、设计师等。

无

网站蓝图 PDF格式下载

一开始在亚马逊浏览本书的时候很纳闷：一本不到三百五十页的书要卖到九十九元？？下面有位网友还评论“书很厚”，我还怀疑是不是简介中把书的页数给弄错了。买到手一看，妈呀，真的很厚，和普通书五六百页差不多一样厚——因为它每页的纸张都是用比较厚重的那种纸，加上它的内容，我觉得很值了！

只有书，没给光盘，什么情况？？？

买书的时候看到商家对书本身附带的光盘没有任何介绍，我默认为有视频，拿回来一看，没视频教程的~

丫丫丫书本很好，很清晰

印刷的纸质真的不错，内容图文并茂、色彩丰富，作为工科生，我头一次看到教学类的书籍会如此欢喜

清华大学的计算机类书品质还是不错的，买的第一本AxureRP网页原因制作的书，作为入门，之前网上也有这书的扫描，但是都不太全，买一本带上光盘可看实例，书印刷纸张太好了，好厚一本，不过价格自然也不便宜，虽然打了6折样子，但第三方卖家是有15的运费所以算下来只比直营店便宜了些，不过好像别的网站也差不多就这个价格罢了，书运送速度还行，4天左右吧，没有破损，不过卖家电话说最后一本库存特价书不开发票的，还是略有不爽，看在书的份上，给5分吧~

很实用，适合初学者，工具书。

产品经理必读之书，很棒！

设计交互的很好的教材

真的很好，亚马逊购物真的好，物流快，快的我惊讶，这本书真的太好，我实在真的挑不出一点不好，虽然价格贵，但是很值得

我以前学习这个软件都是网上找和听大神给我讲，现在我也可以是大神了！

内容还不错啊，就是光盘打不开，晕怎么办啊

整本书不错，讲得很细致，但是有点地方稍微有些繁琐和重复，虽然讲细致些对新人有帮助，但是讲太多也容易造成混乱。

书还可以，就是光盘中没有部件库。

还可以的书，给弟兄们看

网站蓝图

产品经理好帮手

axure软件学习