APP蓝图:Axure RP7.0移动互联网产品原型设计
定 价:69 元
- 作者:吕皓月编著
- 出版时间:2015/2/1
- ISBN:9787302385622
- 出 版 社:清华大学出版社
- 中图法分类:TP393.092
- 页码:284
- 纸张:胶版纸
- 版次:1
- 开本:16K
-
商品库位:
移动互联网原型设计,简单来说,就是使用建模软件制作基于手机或者平板电脑的App,HTML 5网站的高保真原型。在7.0 之前的版本中,使用Axure RP进行移动互联网的建模也是可以的。比如,对于桌面的网站模型,制作一个1024像素宽度的页面就可以了;现在针对移动设备,制作320像素宽度的页面就好了。但是在新版本的Axure RP 7.0 中,加入了大量对于移动互联网的支持,如手指滑动,拖动,横屏、竖屏的切换,自动适应多设备等交互功能,极大地方便了移动互联网原型制作。
《APP蓝图:Axure RP7.0移动互联网产品原型设计》专注于介绍移动互联网的案例制作,以使用微信、LinkedIn、腾讯新闻客户端、滴滴打车、iOS 7等主流移动互联网应用程序为案例,深入浅出地介绍了移动互联网应用程序的设计和交互精髓。并且,最终这些制作的高保真原型可以真正地在手机上进行体验,就好像真正安装了它们一样。
《APP蓝图:Axure RP7.0移动互联网产品原型设计》的作者也是《网站蓝图——Axure RP高保真网页原型制作》的作者。对于读者来说,无论是熟练使用Axure RP,还是第一次接触这个软件,本书都是一个不错的选择。
关于Axure
本书是《网站蓝图——Axure RP 高保真网页原型制作》的兄弟篇。在2 年后的今天,移动互联网已是大势所趋,之前在桌面网站产品上默默耕耘的人们,大多早已经切换到了手机这个方寸之地。基于iOS、Android的APP,以及微信开发已经成了新的热点。我们随便走进一家单杯咖啡超过30 元的咖啡店,你就会发现,一个人喝咖啡的是来蹭网的,两个人喝咖啡是在讨论移动互联网产品,三个人喝咖啡是在讨论移动互联网创业,一堆人喝咖啡是刚听了移动互联网的讲座。笔者也被移动风暴推到了风口,所以,写下了这本《APP蓝图——Axure RP 7.0 移动互联网产品原型设计》。虽然叫《APP蓝图》,但是其中的方法可以适用于任何移动互联网产品的原型制作。
本书全部基于Axure RP 7.0(最新版本),Axure RP 7.0 对移动原型的开发做了大量的升级工作。我们不但可以在传统桌面电脑上进行高保真原型的开发与操作,而且可以在真正的iPhone 上,就像真正安装了一个应用一样的去测试一个移动应用。你会在手机屏幕上看到这个应用的图标,可以滑动、切换,就像运行一个真的APP 应用,你可以让所有相关人员“安装”这个高保真应用,当你更新了原型之后,所有人不用二次安装,全部都可以看到最新的反馈。现在你再去见老板或者投资人诉说你的想法,只要把你的手机递过去就可以了。
在首本书(《网站蓝图》)出版后的两年间,笔者明显体会到现在对于原型的需要越来越多。一个很大的原因是现在的互联网行业已经不是小众和行内人士独享的行业,所有行业都在互联网化,所以有更多的人员、资本来自于对互联网不那么了解的领域。如何准确地向不那么了解你所从事的工作的人解释你做的事情,变成了一个大的挑战。尤其是行业的混乱再加上全球化的趋势,你会发现向美国和印度的同事去解释你的想法——比如一个基于微信朋友圈分享的超级互联网创意——变得难上加难。这个时候,高保真原型是最有效和直接的武器——发一个PPT 或者一个Email 过去,远远不如一个能直接看到效果的原型有效果。而制作原型的成本又因为Axure RP 7.0 这个卓越的工具而进一步的下跌了。说,是说不清楚的,动手做吧!
最后,对于刚入互联网职场的,或者想进行一些改变的读者们,与其去学习已经被很多人诟病的PPT 和Excel,不如好好花时间学一学 Axure,你的同事和老板会立刻对你刮目相看。无论在任何地方,“特别”都是一个特别的优点。
吕皓月
前.言
建模,又常被称为画线框图、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 吧。
作者:吕皓月(阿睡)
第1章
Axure基础交互
024 1.1 欢迎界面
024 1.1.1 Axure的文件格式
025 1.1.2 团队项目
025 1.1.3 工作环境
026 1.1.4 自定义工作区
026 1.2 站点地图
026 1.3 部件概述
027 1.3.1 部件详解
047 1.3.2 部件操作
051 1.3.3 页面样式
054 1.4 交互基础
055 1.4.1 事件(Events)
058 1.4.2 用例(Cases)
060 1.4.3 动作(Actions)
062 1.4.4 交互基础案例
066 1.5 总结
第2章
母版详解
068 2.1 母版基础
068 2.1.1 创建母版的两种方法
068 2.1.2 使用母版
069 2.1.3 母版的行为特性(Master Behaviors)
第3章
动态面板高级应用
074 3.1 动态面板事件
074 3.1.1 状态改变时(OnPanelStateChange)
074 3.1.2 拖动时(OnSwipe)
074 3.1.3 滚动时(OnScroll)
074 3.1.4 改变大小时(OnResize)
074 3.1.5 载入时(OnLoad)
075 3.2 拖放事件
075 3.3 动态面板案例
076 3.3.1 灯箱效果
078 3.3.2 自动图片轮播
第4章
流程图
080 4.1 流程图概述
080 4.2 创建流程图
080 4.2.1 流程图形状
081 4.2.2 连接模式
081 4.2.3 标记页面为流程图
081 4.2.4 连接线
082 4.3 添加参照页
082 4.4 生成流程图
课前准备知识
070 2.2 自定义事件
070 2.2.1 自定义事件概述
071 2.2.2 创建和使用自定义事件
071 2.3 母版使用案例
第5 章
自定义部件库
084 5.1 自定义部件库概述
084 5.2 加载和创建自定义部件库
085 5.2.1 添加注释和交互
085 5.2.2 组织部件库到文件夹
085 5.2.3 使用自定义样式
086 5.2.4 编辑自定义部件属性
086 5.2.5 保留角部第7 章
团队项目
120 7.1 团队项目概述
122 7.2 创建团队项目
123 7.3 团队项目环境和本地副本
123 7.4 获取并打开已有团队项目
124 7.5 使用团队项目
第8 章
AxShare
130 8.1 Axshare 基础
130 8.1.1 Axshare 概述
131 8.2 AxShare 生成原型
131 8.2.1 上传原型到AxShare
132 8.2.2 管理项目
133 8.2.3 讨论
133 8.2.4 插件
134 8.2.5 漂亮URL
135 8.2.6 重定向
136 8.2.7 如何给原型添加域名
第6 章
高级交互
088 6.1 条件逻辑(Condition Logic)
088 6.1.1 条件逻辑概述
089 6.1.2 交互和条件逻辑
091 6.1.3 多条件用例
092 6.1.4 条件逻辑案例
096 6.2 设置部件值
097 6.2.1 设置文本(Set Text)
098 6.2.2 设置图像(Set Image)
099 6.2.3 设置选择/ 选中(Set Selected/Checked)
099 6.2.4 设置选定的列表项(Set Select List Option)
100 6.3 变量
100 6.3.1 变量概述
101 6.3.2 创建和设置变量值
101 6.3.3 在动作中设置变量值
103 6.3.4 使用变量值
108 6.4 函数(Functions)
108 6.4.1 函数列表
113 6.4.2 创建数学表达式
113 6.4.3 创建字符串表达式
114 6.5 案例
114 6.5.1 账单四舍五入
115 6.5.2 全局变量在不同页面间传递与动态面板交互第9章
自适应视图
138 9.1 自适应视图概述
138 9.2 自适应设计与响应式设计
139 9.3 创建和设置自适应视图
139 9.4 编辑自适应视图
140 9.4.1 修改自适应视图
140 9.4.2 继承
141 9.4.3 改变样式怎样影响视图
141 9.4.4 在视图中添加或删除部件
141 9.4.5 未入选部件
142 9.4.6 添加未入选部件
142 9.4.7 完全删除部件
1429.4.8 自适应视图的局限性
142 9.5 案例:制作简单的自适应视图
第10章
中继器部件的高级应用
146 10.1 排序数据
146 10.1.1 新增排序(Add Sort )
146 10.1.2 移除排序(Remove Sort)
147 10.2 过滤数据
147 10.2.1 新增过滤器(Add Filter)
147 10.2.2 移除过滤器(Remove Filter)
148 10.3 分页
148 10.3.1 设置当前页(Set Current Page)
149 10.3.2 设置每页项数目(Set items per Page)
149 10.4 添加/移除中继器的项
149 10.4.1 添加行(Add Rows)到中继器数据集
150 10.4.2 标记行(Mark Rows )
150 10.4.3 取消标记行(Unmark Rows)
151 10.4.4 更新行(Update Rows)
152 10.4.5 删除行 (Delete Rows )
第11章
用户界面规范文档
154 11.1 规范文档概述
155 11.2 Axure规范文档
156 11.3 生成器和输出文件
157 11.4 部件注释 (Widget Notes)
157 11.4.1 自定义注释集合
158 11.4.2 添加注释
158 11.4.3 复制和清除注释
159 11.4.4 多部件添加、编辑、删除注释
159 11.5 页面注释(Page Notes)
159 11.5.1 自定义页面注释字段
159 11.5.2 页面注释和富文本
160 11.6 生成规范文档(规格说明书)
161 11.6.1 配置一个或多个部件表
161 11.6.2 配置布局
第12 章
APP 原型设计
164 12.1 概述
164 12.2 APP 原型模板
164 12.2.1 制作iPhone APP 原型模板
167 12.2.2 制作 Android APP 原型模板
168 12.3 制作简单的 APP 原型
168 12.3.1 可滚动内容
170 12.3.2 滑动幻灯
174 12.4 在移动设备中预览原型
174 在iPhone 中预览原型
177 12.5 APP 原型的尺寸设计
177 12.5.1 viewport 概述
177 12.5.2 CSS 中的px 与移动设备中的px
第13 章
综合案例
181 13.1 使用Axure 制作 im.qq.com 网页效果
181 13.1.1 顶部导航栏
195 13.1.2 首页幻灯轮播
203 13.1.3 图片移动
208 13.1.4 下载页面
218 13.2 大众点评网
218 13.2.1 大众点评首页全局导航
225 13.2.2 大众点评会员注册
238 13.3 网易云课堂
238 13.3.1 云课堂首页顶部菜单跟随效果
245 13.3.2 云课堂首页图片缩放效果
附录A
APP 原型尺寸速查表
附录B
Axure RP7 部件操作快捷键
光盘目录
01 新方法实现跳转回登录前页面
02 Gmail 进度条加载效果
03 使用Axure 制作数独解谜小游戏
04 雅虎首页全屏展开广告
05 淘宝网手机充值效果
06 大众点评网打分效果
07 百度搜索提示效果
08 跑马灯文字链
09 键盘触发快捷键效果
10 淘宝首页幻灯
11 凡客网的全局导航
12 新浪微博的图片与视频
13 欧美系视差效果
14 引用任意页面的任意部分和携程酒店地址选择
15 图片动态放大缩小