搜索
高级检索
高级搜索
书       名 :
著       者 :
出  版  社 :
I  S  B  N:
文献来源:
出版时间 :
APP蓝图:Axure RP 7.0移动互联网产品原型设计
0.00    
图书来源: 浙江图书馆(由图书馆配书)
  • 配送范围:
    全国(除港澳台地区)
  • ISBN:
    9787302385622
  • 作      者:
    吕皓月编著
  • 出 版 社 :
    清华大学出版社
  • 出版日期:
    2015
收藏
作者简介
  吕皓月,网名阿睡(MrSleepy),2002年毕业于北京大学物理系,毕业后在澳大利亚的海滨小城拿到了硕士学位,之后一直从事互联网相关工作。曾就职于雅虎、阿里巴巴、CHICR时尚电商、某知名手机品牌公司。担任过工程师、产品经理、销售策划、市场策划、营销总监、战略合作等职务。对互联网行业的产品、技术、营销等方面有着持续的热情。同时,一直内嵌一颗创业的心,无奈没有钱,只好把想法做成原型,于是有了写书的冲动。  曾为上线彻夜不眠,曾为需求文档呕心沥血,曾为表明观点苦口婆心,曾为实现功能软磨硬泡、曾为界面细节威逼利诱,曾为争取资源据理力争,也曾为了迸发的灵感奋笔疾书到凌晨。不敢说对互联网行业有多么深的理解,但是却对自己喜欢的事情热情洋溢。期望本书能与互联网的同业者共勉,早日实现真正的多劳多得。  最后说说我的梦想:让科技提高效率,然后每个人都可以多睡一会儿。
展开
内容介绍

  移动互联网原型设计,简单来说,就是使用建模软件制作基于手机或者平板电脑的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。

  ——去哪儿网 产品总监 高兴


  ★每个产品经理都会喜欢上这本书,因为它能让你的每一个奇妙想法都快速展现在大家面前,它能让投资人喜欢你、让老板喜欢你、让设计师喜欢你、让工程师喜欢你……

  ——新浪乐居 刘博


  ★不管是一本好书还是一款出色的软件,都不可能长久称霸。而本书,我不敢说永远不会被超过,但我敢说一定是未来三年内非常受用的互联网工作者用书——记住:“不是之一”。我建议本书应该作为互联网从业人士的必读书籍。

  ——前雅虎网高级编辑 胡烨

展开
精彩书摘

  移动建模

  本书的大部分内容和案例将是关于移动建模的。所以我们先来介绍一下如何进行移动建模。使用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(发布)”按钮。

  ……

展开
目录

第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 加入照片和视频 

结束语  


展开
加入书架成功!
收藏图书成功!
我知道了(3)
发表书评
读者登录

请选择您读者所在的图书馆

选择图书馆
浙江图书馆
点击获取验证码
登录
没有读者证?在线办证