发表于2024-11-21
相关好书推荐:
移动互联网原型设计,简单来说,就是使用建模软件制作基于手机或者平板电脑的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,还是一次接触这个软件,本书都是一个不错的选择。
★欲成其事,先利其器,对于许多互联网从业人员(尤其是产品人员或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。
——去哪儿网 产品总监 高兴
★每个产品经理都会喜欢上这本书,因为它能让你的每一个奇妙想法都快速展现在大家面前,它能让投资人喜欢你、让老板喜欢你、让设计师喜欢你、让工程师喜欢你……
——新浪乐居 刘博
★不管是一本好书还是一款出色的软件,都不可能长久称霸。而本书,我不敢说永远不会被超过,但我敢说一定是未来三年内非常受用的互联网工作者用书——记住:“不是之一”。我建议本书应该作为互联网从业人士的必读书籍。
——前雅虎网高级编辑 胡烨
第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 RP 7.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 加入照片和视频
结束语
移动建模
本书的大部分内容和案例将是关于移动建模的。所以我们先来介绍一下如何进行移动建模。使用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 :添加视图标签。打开这个开关后,我们才能设置如下的参数。
APP蓝图:Axure RP7.0移动互联网产品原型设计 下载 mobi pdf epub txt 电子书 格式 2024
APP蓝图:Axure RP7.0移动互联网产品原型设计 下载 mobi epub pdf 电子书书不错,挺好的啊噗噗噗
评分很快送到,昨晚下班前订的,第二天早上就到了,很赞
评分写得很不错,有很多案例
评分内容浅显 印刷一般 入门书还可以 包装很好
评分给老弟买的,不知道怎么样,应该是正版
评分很好的书,正在看呢。哈哈
评分初级入门还是可以的
评分很好,入门可以,深度不够。。。。。
评分京东快递一如既往的快
APP蓝图:Axure RP7.0移动互联网产品原型设计 mobi epub pdf txt 电子书 格式下载 2024