描述
开 本: 16开纸 张: 胶版纸包 装: 平装是否套装: 否国际标准书号ISBN: 9787302385622
移动互联网原型设计，简单来说，就是使用建模软件制作基于手机或者平板电脑的App，HTML 5网站的高保真原型。在7.0 之前的版本中，使用Axure RP进行移动互联网的建模也是可以的。比如，对于桌面的网站模型，制作一个1024像素宽度的页面就可以了；现在针对移动设备，制作320像素宽度的页面就好了。但是在新版本的Axure RP 7.0 中，加入了大量对于移动互联网的支持，如手指滑动，拖动，横屏、竖屏的切换，自动适应多设备等交互功能，极大地方便了移动互联网原型制作。
本书专注于介绍移动互联网的案例制作，以使用微信、LinkedIn、腾讯新闻客户端、滴滴打车、iOS 7等主流移动互联网应用程序为案例，深入浅出地介绍了移动互联网应用程序的设计和交互精髓。并且，终这些制作的高保真原型可以真正地在手机上进行体验，就好像真正安装了它们一样。
本书的作者也是《网站蓝图——Axure RP高保真网页原型制作》的作者。对于读者来说，无论是熟练使用Axure RP，还是次接触这个软件，本书都是一个不错的选择。
第1章 隆重介绍Axure RP 7.0
1.1 更多的事件支持
1.2 快速预览
1.3 文本输入控件的输入提示
1.4 丰富的输入控件内容
1.5 新的控件形状
1.6 动态面板的新属性
1.7 切割图片
1.8 所有控件都可以被隐藏
1.9 控件可以被设置为圆角、透明、阴影
1.10 部件管理区域（Uidget Manager）取代了动态面板管理区域（Dynamic Panel Manager）
1.11 跨页面的撤销功能
1.12 全新的部件类型——Repeater（循环列表部件)
1.13 Adaptive View （自适应视野）的支持
1.14 Axure Share 发布平台
1.15 高亮显示所有有互动事件的部件
1.16 Sitemap 中的变量跟踪器
1.17 界面上的调整
1.18 预置参数的添加
第2章 Axure RP7.0的基本操作
2.1 界面介绍
2.2 添加事件
2.3 添加变量
2.4 fx
第3章 移动互联网原型设计九原则
原则1：产品设计者要是产品的重要用户
原则2：在每一个界面上考虑用户在界面上要获得什么
原则3：用合适的方式显示信息
原则4：考虑移动互联网设备的特殊性
原则5：实在想不明白，就看看别人怎么做吧
原则6：从简单的产品开始
原则7：将美好的情感融入产品
原则8：内容与形式同样重要
原则9：数据分析与用户分析同样重要
第4章 移动建模
4.1 场景模拟
4.2 真实模拟
第5章 常见的APP界面布局
5.1 顶部导航
5.2 标签式导航
5.3 抽屉式
5.4 九宫格式
5.5 下拉列表式
5.6 异形
5.7 分级菜单
第6章 第三方控件库
第7章 iPhone 5s横向滑动效果
第8章 应用程序的启动过渡页面
第9章 微信的纵向滑动效果
第10章 腾讯新闻客户端的横向/ 纵向交织的拖动效果
第11章 iOS 7信息应用的删除效果
第12章 下拉缓冲效果
第13章 图片的单击和双击效果
第14章 滴滴打车的现在用车效果
第15章 股票的局部纵向和横向滚动效果
第16章 LinkedIn 的抽屉式菜单
第17章 iOS的单选按钮
第18章 Passbook的Tab效果
第19章 提醒事项
第20章 时钟拖拽
第21章 联系人字母导航
第22章 新手提示
第23章 邮箱的自适应视图
第24章 iOS 7的控制中心效果
第25章 iOS的提示
第26章 弹出幻灯界面
第27章 响应式页面设计
第28章 iOS 8的即时信息回复
第29章 iOS 8的iMessage加入照片和视频
结束语
建模，又常被称为画线框图、mockup、原型图、demo，其主要用途是在正式进行设计和开发之前，通过一个逼真的效果图来模拟终的视觉效果和交互效果。
在现代企业当中，尤其是互联网企业，无论企业规模大小，时间都意味着金钱。开发出的产品不符合初的要求，不满足用户期待，会白白浪费大量的人力物力。所以决策者在将产品推向市场之前，都希望程度地去了解终的产品到底是什么样子的，但是又不能投入时间真正地做出一个真实的产品。所以，模型就成了好的帮手。建筑行业中的设计图，汽车行业中的概念车，零售行业中小规模局部上市的一些实验商品，手机行业中的工程原型机，都是建模的好例子。
本书就是要向大家介绍如何使用Axure RP 7.0 软件制作移动互联网的网站原型。比如，如何制作一个微信那样的联系人对话框，如何制作一个像iOS 里面拖动的橡皮筋效果。通过这些具体应用的案例，让读者熟悉整个建模的过程，从而利用Axure RP 7.0 这个神奇的工具，将自己的想法转化成可以向别人介绍的逼真的原型。然后通过这个原型，获得企业内部的资源支持或项目主导者的认可，确认讨论的需求，甚至获得潜在投资人的支持，把握一个机会。
如果大家对传统的互联网建模有兴趣，可以参考笔者的另外一本书《网站蓝图——Axure RP高保真网页原型制作》，也由清华大学出版社出版。在那本书中，从简单的原型到复杂的交互，读者可以全面了解Axure RP 的功能。在本书中，对于完全没有使用过Axure RP 的读者来说，可能会需要一点儿时间适应。
在《网站蓝图——Axure RP 高保真网页原型制作》出版后，很多读者提出了一个疑问，那就是原型到底要做得多“逼真”才算是令人满意的？是否需要100% 的模拟真实的情况？那样可能意味着原型的制作也要花费相当多的时间和精力。笔者的答复是：看应用场景。
如果你的原型就是用来跟你熟识的一些产品经理和工程师进行沟通交流，那么也许一个非常简单的用于示意的原型图就足够了。因为你们彼此了解，很多的沟通可以通过语言和默契来完成，甚至不需要原型。
如果你的原型是用来跟上司提案用的，那么就要做相对详细一些，尤其是涉及用户交互和流程的部分。要让他们清楚了解，你这个页面是做什么的？怎么用？如何展现每个细节？尤其是在产品立项或者阶段性审核的时候，做得越详细，证明准备得越充分，也就越容易面对质疑，终获得认可。注意，“细节决定成败”这句话，其实应该是“关键的细节决定成败”，并非所有细节都要在模型阶段进行展现。
如果你的原型是给客户提案用的，那么这个时候要尽可能的详细。因为你希望客户能够说一句：“这就是我想要的，就照着这个去做就可以了。”有了客户的确认，你才能放心地去制作和开发，才不会在后面对客户的一句：“这不是我们开始说的啊？”既然客户是消费者，
那么就一定要尽量让他们在开始阶段就了解到自己买了什么东西。笔者强烈建议在进行互联网开发工作的时候，能够在合同之外附上客户确认的高保真原型图，以给项目的终审批设定一个双方共同认可的标杆，避免损失和误解。
后，重要的一点，也是建议：如果你自己做原型的时候都觉得做得太过复杂，想不清楚，那么也就到了适可而止的时候了。毕竟，原型只是表达方式之一，你可以用文字、视频、面对面的交流、比喻、类比，甚至是采用与另外一个网站来直接做对比的方式来把你的想法说清楚。很多伟大的创意和想法不是用PPT 表达的，那么很多精彩的设计自然也可以不靠原型来展现。
在《网站蓝图——Axure RP 高保真网页原型制作》这本书中，笔者确实提供了一些比较复杂的案例，大量的交互和变量的使用。其实这不是非常必要的。笔者的目的是让用户了解Axure RP 的一些复杂的功能和对于复杂项目的把握，而并非让大家学会了Axure RP 这个工具而陷于另外一个制作原型的黑洞。
下面让我们快一点儿开始使用强大的版本的Axure RP 7.0 吧。
作者：吕皓月（阿睡
★欲成其事，先利其器，对于许多互联网从业人员(尤其是产品人员或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 7.0 进行移动建模跟桌面建模是很不相同的。因为如果直接使用“Preview（预览）”，我们会发现项目在桌面浏览器（如IE、Chrome或者Safari）中自动打开了。而我们并没有一个移动版本的Axure RP 7.0 能够直接在手机或者平板电脑上运行，然后使用移动浏览器来预览。所以，我们需要在桌面上完成原型的建模工作然后让模型“看起来”或者“感觉起来”是在移动设备上运行。为了做到这一点，我们使用以下两种方式进行“模拟”的移动建模。
4.1 场景模拟
简单来说，我们制作一个跟移动设备屏幕尺寸相同的“页面”区域，然后把它放到一个移动设备的背景前面。这样，整体看来，就好像我们在一个移动设备上运行该原型一样。为了做到这一点，我们先去下载一个移动设备的“背景”。
在本书中，笔者将使用“iPhone 5s”来作为建模的背景图片。大家可以在本章的素材部分下载相应的图片。建议大家直接使用这张设计好的图片。
在开始创作前，我们先简单介绍一下iPhone 5s 的各个部分的屏幕尺寸。iPhone 5s 的屏幕显示部分的尺寸是640 像素x1136 像素。每英尺的像素数是326。有些读者可能对这些概念并不熟悉。没有关系，我们只需要设定一个大小合适的背景图片，然后在它上面进行原型创作就好了。背景大，我们制作的原型尺寸也可以大；背景小，我们制作的尺寸就小。只要二者合适就好了。
iPhone 5s 的状态栏，也就是显示信号、电池容量的这个部分的尺寸是640 像素x40 像素。一般来说，在进行原型创作的时候，我们不能使用这个部分的显示。所以，我们的有效创作面积为640像素x1096像素。
但是640 像素x1096 像素这个尺寸对于普通的电脑屏幕来说，仍然太大了，不方便我们进行创作和演示。而在iPhone 上之所以这么大的区域能够在手掌大的一块地方显示出来，是因为iPhone 的分辨率达到了视网膜级别。所以，我们要把背景图进行一下缩小处理，以使我们具有一个等比例缩小的，320像素x548 像素的背景。为做到这一点，我们需要使用专业的图片软件Photoshop 来处理这个图片。在本章的素材中，我们已经处理好了一张iPhone 5s 图片，其外围尺寸为443 像素x900 像素，有效的显示区域为320 像素x568 像素。也就是宽和高都缩小了一半，刚好适合我们的屏幕尺寸。
下面我们就来在Axure RP 7.0 中制作一个iPhone 5s 的工作区域。
首先，在Axure RP 7.0 中创建一个新项目，然后添加一个新的页面叫作“场景模拟”。
然后，我们把“iPhone-5s-Golden”这张JPG 图片添加到Axure RP 7.0 中。我们可以直接通过文件拖拽的方式，也可以在Axure RP 7.0 中拖拽一个图片控件到编辑区中，然后双击它。
选中“iPhone-5s-Golden ”这张图片，Axure RP 7.0会发现这是一张很大的图片，所以会询问是否要优化这张图片。因为我们希望保持图片的清晰度，所以我们选择“否”。然后Axure RP 7.0A 会提示是否要自动修改该图片的尺寸，这个时候要选择“是”。
我们把这张图片放在X 100：Y 0 的位置，这个时候，整个页面的样子如下图所示。
我们之后的主要工作区域，就是如下图所示的这个区域（青色的区域），尺寸为320 像素x548 像素。而对于整个iPhone 5s 背景，一般是不动的，它只是一个背景；上面的状态栏，一般也是不需要使用的。下面让我们向这个背景图上添加一些元素。我们先添加一个矩形控件来盖住原先的iPhone 桌面。该矩形控件的属性如下表所示。
名 称 类 型 坐 标 尺 寸 填充色/ 边框色
无 Rectangle X162：Y198 W320：H548 #FFFFFF/#FFFFFF
现在的页面的样子如下图所示。：
接下来，向页面中添加四个菜单选项，就像我们在很多应用中看到的一样。每个菜单选项其实就是一个矩形控件，它们的属性如下表所示。
名 称 类 型 坐 标 尺 寸 文 本 填充色/ 边框色
rectMenu1 Rectangle X162：Y700 W80：H46 菜单1 #CCCCCC/ 无
rectMenu2 Rectangle X242：Y700 W80：H46 菜单2 #CCCCCC/ 无
rectMenu3 Rectangle X322：Y700 W80：H46 菜单3 #CCCCCC/ 无
rectMenu4 Rectangle X402：Y700 W80：H46 菜单4 #CCCCCC/ 无
设置完成后，页面是这样的（见下图）。
页面似乎看起来有趣了。我们会持续添加元素，直到页面看起来是这样的（见下图）。
看起来很像一个应用程序了吧？
有了这样的一个背景，虽然我们还是在桌面电脑上进行模型的创作和演示，但是看起来就像是我们在用iPhone 5s 体验。这样也同样能够以非常简单的方式，让所有人对原型终的效果有一个非常直观的了解。当然，观看原型也是在桌面浏览器上进行的。
使用320 像素x548 像素的创作区域的理由是，320像素的宽度，建立4 个菜单的话，如上图中的菜单1、菜单2、菜单3、菜单4，每个菜单的宽度就是80 像素，如果是5 个菜单，每个宽度就是64 像素，宽度都很合适。而如果对背景图片处理不当的话，如宽度变成了很随意的340 像素，那么在制作的时候，就会出现宽度不平均的现象。另外，还有一个理由，就是很多iPhone 应用的菜单都是4 个。
场景模拟是一种较为简单和高效的制作移动原型的方式，通过不同的手机背景，我们就可以很容易地制作基于iPhone 5s、三星Galaxy、小米等热门手机的应用场景的应用，而不用去真的购买和拥有这些手机。如下图所示，我们更换图片背景后，同样的内容可以在三星手机上展现。
但是如果我们真的想在手机上来体验我们的原型，就只能使用下一节的方法了。
4.2 真实模拟
真实模拟的做法就是，我们仅在Axure RP 7.0 中制作一个320 像素x568 像素的页面区域，然后生成HTML 的页面，并将其发布到Axure Share 上。接下来用iPhone 5s 使用移动版本的浏览器打开Axure Share 上的项目地址进行浏览。然后将这个页面保存为一个主屏幕快捷方式，接下来运行这个快捷方式。这样，我们就真的可以在移动设备上真实地体验原型了。
我们接下来按照如下步骤来创建一个真实模拟的项目。
1. 制作原型页面
我们在本章的项目中添加一个新的页面叫作“真实模拟”，向其中添加如下表所示的元素。
名 称 类 型 坐 标 尺 寸 文 本 填充色/ 边框色
rectStatus Rectangle X0：Y0 W320：H20 无 #000000/#000000
rect1 Rectangle X0：Y20 W320：H40 应用1 #999999/#999999
Label1 Label X16：Y75 W292：H288 内容内容 无/ 无
Bs1 Button Shape X16：Y392 W292：H40 按钮1 无/ 无
Bs2 Button Shape X16：Y442 W292：H40 按钮2 无/ 无
rectMenu1 Rectangle X0：Y522 W80：H46 菜单1 #CCCCCC/ 无
rectMenu2 Rectangle X80：Y522 W80：H46 菜单2 #CCCCCC/ 无
rectMenu3 Rectangle X160：Y522 W80：H46 菜单3 #CCCCCC/ 无
rectMenu4 Rectangle X240：Y522 W80：H46 菜单4 #CCCCCC/ 无
现在界面如下图所示，包含所有元素的外围尺寸是320 像素x568 像素。
然后，我们为按钮1 添加一个OnClick 事件，让大家体会一下在手机上点击按钮的效果。我们拖拽一个矩形控件到页面区域，设置属性如下表所示。
名 称 类 型 坐 标 尺 寸 文 本
rectPopup Rectangle X60：Y180 W200：H100 按钮1 被点击了
将这个矩形控件设置为“隐藏”。我们希望点击按钮1 的时候再显示该矩形，为此右键单击这个矩
形控件，然后在弹出菜单中选择“Set Hidden”命令。
然后，我们为按钮1 添加如下图所示的事件，当该按钮被点击时，可以显示矩形区域。
这个简单的页面就制作好了。其实跟“场景模拟”中的页面是类似的。
2. 设置发布参数
在发布前，因为终的原型是要用在移动端的，所以我们要控制一下生成原型的一些参数。这些参数非常重要，直接决定了我们的原型在移动端的体验。这与“场景模拟”中发布并且在桌面浏览器中预览的过程是不一样的。在场景模拟中，只要使用默认的参数就可以了。
为此，我们点击“Publish”按钮，在下拉菜单中选择“Preview Options”。
然后，在弹出的窗口中选择“Con.gure”。
接下来，就会看到如下图所示的窗口，我们在窗口中选择“Mobile/Device（移动设备）”。
该页面是用来配置在移动端生成的页面的一些参数和规格的。下面我们分别解释每个参数的意义。
. Include Viewport Tag ：添加视图标签。打开这个开关后，我们才能设置如下的参数。
. Width （px or device-width）：宽度，要求输入像素值或者根据设备宽度自动设置。因为我们制作的页面一般都是320像素宽度的，所以一般设置为320像素。
. Height （px or device-height）：高度，要求输入像素值或者根据设备高度自动设置。这个值一
般不需要设置。
. Initial Scale（0-10.0）：初始的缩放尺度。默认是1.0，也就是说，默认就是自然1∶1的大小。iPhone上可以通过双指的缩放来缩小和放大页面，这里就是设置页面一打开的时候的缩放规模。如果我们在这里设置2.0，那么就意味着页面打开的时候，就默认被放大到2倍大小。
. Minimum Scale （0-10.0）：能够小被缩放的尺度。有时候我们需要控制用户能够缩小的小尺度。默认为空，无须设置。
. Maximum Scale （0-10.0）：能够被放大的尺度。有时候我们需要控制用户能够放大的尺度。默认为空，无须设置。
. User Scalable （no or blank）：用户是否能够放大或缩小页面。如果我们不希望用户可以进行缩放，就填写“no”。默认为空，用户是可以进行缩放的。
. Prevent vertical page scrolling （blocks elastic scrolling）：禁用垂直滚动（同时也阻止iOS的弹性滚动）。有的时候我们不希望用户进行垂直方向的滚动，如在使用原型模拟iPhone应用的时候。在这里，勾选这个复选框，因为我们要模拟一个iPhone应用的界面，无须垂直滚动。
. Auto detect and link phone numbers（iOS）：自动侦测并链接电话号码，仅对iOS设备。勾选了该功能后，当在原型中的文本中输入手机号码这样的文字的时候，Axure RP 7.0会自动为其添加链接。这样，用户可以点击它们，并且看到“拨打该电话”的选项。
接下来的一个区域是用来设置应用程序在iPhone 上的开始图标和过场页面的。开始图标就是如下图所示的这些图标按钮。
我们需要一个114 像素x114 像素的PNG 图片来做当前应用的开始图标。在本章的素材目录中，我们已经做好了一个叫作“App-logo”的图片，如下图所示。
我们点击如下图所示的Import 按钮把它添加进来。
过场页面，就是在点击图标后，在应用正式开始运行前出现的一个过渡页面。比如，我们运行微信时那个著名的图片，就是一个过渡页面。
对于这个测试的应用，我们暂时不需要设置过渡页面。过渡页面可以针对屏幕尺寸的不同，设置三个，分别用于iPhone 的竖屏显示、iPad的竖屏显示和iPad 的横屏显示。
. Hide browser nav （When launched from iOS home screen）：当从iOS，也就是iPhone的主屏幕启动原型的时候，隐藏浏览器的导航条。选中这个复选框，它非常有用，可以在全屏下浏览我们的原型。至于如何将一个应用从主屏幕启动，我们之后会介绍。
. iOS Status Bar：如何显示iOS的状态栏，也就是屏幕上方的显示运营商信号和电池容量的状态栏。可以选择的选项有“default（默认）”，“black（黑色）”或者“black-translucent（黑色半透明）”。我们选择black-translucent. 这个时候，所有的电池容量、信号、时间等信息会以白色显示。背景是透明的，会透出下方的内容，也就是我们在这个项目中添加的那个320像素x20像素的黑色矩形。
3. 发布页面
参数设置完成后，我们点击Publish to Axure Share 按钮。在如下图所示的弹出窗口中，使用注册后Axure Share 账号登录（如果没有，就注册一个）。其他的参数设置都使用默认的就好了，然后点击“Publish（发布）”按钮。
……
评论
还没有评论。