《网站与手机App原型设计》金晖|(epub+azw3+mobi+pdf)电子书下载

图书名称：《网站与手机App原型设计》

【作　者】金晖

【丛书名】普通高等教育“十三五”规划教材；服务外包产教融合系列教材

【页 数】 152

【出版社】 广州：华南理工大学出版社 , 2017.03

【ISBN号】978-7-5623-5188-7

【分 类】网页制作工具

【参考文献】 金晖. 网站与手机App原型设计. 广州：华南理工大学出版社, 2017.03.

图书封面：

图书目录：

《网站与手机App原型设计》内容提要：

本教材以AxureRP7.0软件为主，详细介绍了如何使用AxureRP软件制作网页和APP的线框图和高保真原型。本教材内容共分十章，介绍了AxureRP站点地图、部件库、母版和页面设置、部件交互、高级交互、中继器、自适应视图等相关知识。本教材中的所有实例都是编者通过精心挑选，结合当前网页和App设计中常用的、流行的交互行为制作而成。读者学完本教材后基本能独立完成网页和APP高保真原型的制作。本教材以AxureRP7.0软件为主，详细介绍了如何使用AxureRP软件制作网页和APP的线框图和高保真原型。

《网站与手机App原型设计》内容试读

1

初识Axure RP

Axure RP是美国Axure Software Solution公司开发的一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的设计人员能够快速创建应用软件或Wb网站的线框图、流程图、原型和规格说明文档。

目前，Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经

理、T咨询师、用户体验设计师、交互设计师、界面设计师等。另外，架构师、程序开

发工程师也在使用Axure RP。

1.1产品原型

产品原型概括地说是整个产品面市之前的框架设计。以网站用户注册为例，整个前期的交互设计流程图之后，就是原型开发的设计阶段，简单来说是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品在脱离网络状态下更加具体、生动地进行表达。

1.1.1原型设计的作用

原型，是用线条、图形描绘出的产品框架，也称为线框图。原型设计就是指综合考虑产品目标、功能需求场景、用户体验等因素，对产品的各版块、界面和元素进行合理性排序的过程。

原型设计在整个产品流程中处于最重要的位置，有着承上启下的作用。原型设计之前的需求或是功能信息都相对抽象，原型设计的过程就是将抽象信息转化为具象信息的

过程，之后的产品需求文档(PRD)是对原型设计中的版块、界面、元素及它们之间的执

行逻辑进行描述和说明。所以说，原型设计的重要性无可替代。

原型设计的作用有以下两点。

(1)因为原型设计是需求和功能的具象化表达，所以原型设计可以辅助产品经理与

领导、交互、UI和技术等部门沟通产品思路。

(2)因为原型设计相较于UI设计稿来说修改更方便，所以原型设计能提高产品经理

的工作效率。

服务外包产教融吕系列教材

1.1.2原型设计的类型和工具

与手

1.手绘原型（草图）

所需工具：铅笔、橡皮、白纸

铅笔相比于中性笔的好处在于方便修改，白纸的好处在于可以随心所欲，不过对于

型设

移动产品的设计来说，建议在印有手机框架的白纸上绘制，以便于快速进人情景状态，也能对手屏的界面分配做到心中有数，如图1-1所示。

图1-1手绘原型

2.工具原型

所需工具：Axure RP(推荐)、Justmind(APP)、Keynote(最近比较火，适用于Mac OS)。对Axure RP而言，无论是PC端产品经理还是APP产品经理都比较熟悉，通过工具绘制的产品原型已经比较正式，如果添加了色彩和交互动作（高保真），可与最终产品形态无异，如图1-2所示。

了？立围入奥美

图1-2 Axure RP原型

2

1.2 Axure RP7.0介绍

初

识

Axure RP是一款便捷高效的网页制作工具，本书将介绍Axure RP7.O版。Axure RP

xu

7.0有助于快速建立交互和窗口布局，此外还新增内嵌文本链接、旋转形状以及移动应用原型制作功能。

Axure RP7.0的新功能和新特性：

(1)增加了预览选项，能够设置在预览和生成原型时是否最小化或不带有左侧的站点地图导航。

(2)优化了界面和操作，明显提高绘制效率，可直接在控件上改变形状，同时加入几个常用形状。

(3)支持了投影和内阴影，可以用来画简单的组件。

(4)支持更多的触发事件，动态面板也可以执行鼠标点击事件。

(5)普通形状也能增加事件效果，例如，要移动一个形状，不需要转化成动态面板。

(6)事件用例感觉也有所变化，增加了一些参数，例如，切换动态面板状态时有更多的参数可以选择。

(7)增加了实时预览功能，再也不用一遍又一遍地生成页面了。

(8)内容自适应，例如，动态面板或文字块能根据内容自动适应到合适大小。

(9)强化的表格功能中继器，可以自动填充数据，对数据进行排序、过滤等操作。(10)页面级的参数Onresize,在手机测试时可以作为横竖屏判断。(11)响应式布局，可以定义不同窗口大小下的布局结构。

1.2.1 Axure RP的启动界面

当安装完Axure RP7.0并初次启动时，会出现欢迎画面和许可证信息，如图1-3所示。

在弹出的欢迎窗口中，包括以下3个操作。

T用千取西男

(1)打开已有文件。显示最近打开的项目，或者打开一个新的项目。

①在Mac版本中，一个Axure RP程序可以同时打开多个文件，并可以通过

Windows菜单在多个文件之间切换。

②在Windows版本中，每个Axure RP程序只能打开一个文件。如果想同时打开多个文件，可以再运行一个Axure RP程序来打开另一个文件。

(2)新建。新建一个项目。Axure RP包含以下3种不同的文件格式。

①.p文件。这是设计时使用Axure RP进行原型设计时所创建的单独文件，也是

Axure RP创建新项目的默认格式。

②.plib文件。这是自定义部件库文件。可以到网上下载Axure RP部件库使用，也可以自己制作自定义部件库。

服务外包产教融吕系列教材

网

欢迎使用Aocure RP Pro7.0

与手

授权给较件缘

axureRPPRO

7.0.03174

型设

打开已有文件

新建

分天猫的全局导航甲

日即文件

后微信原型设计印合a8p

日aap

日敌据的必理p

学习

日练习2p

0秒介铝视须，

日练习1p

10分钟入门文件

日效中p

1小时核心培面>

合中维器p

给我们发送部件，

合注册rp

AXUe7斯功能

品打开

点商时不示面

关闭

图1-3 Axure RP7.0的欢迎界面

③，p叫j文件。这是团队协作的项目文件，通常用于团队中多人协作处理同一个较为复杂的项目。

(3)学习。Axure RP7.0官方在线学习教程，这也是初学者一个很好的学习平台。点选欢迎窗口左下角的“启动时不显示该画面”，那么下次启动软件时将不再显示欢迎画面。

1.2.2 Axure RP的工作界面

点击欢迎窗口中的“新建/RP文件”即可进人工作界面。认识Axure RP7.0的工作界面对于掌握Axure RP7.0,提高制作效率是关键的一步。Axure RP7.0的工作界面有“站点地图”“所有部件库”“母版”“部件交互和注释”“部件属性和样式”“部件管理”等，如图1-4所示。

1.菜单栏

“菜单栏”提供了“文件”“编辑”“视图”“项目”“布局”“发布”“团队”“帮助”8项菜单，单击其中任意一项菜单，随即会出现一个下拉式指令菜单。如果指令选项为浅灰色，则代表该指令在当前的状态下不能执行。有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将有助于提高工作效率。有些指令的右边会有一个小黑

三角的标记，它代表该指令还包含下一级的指令，鼠标在此停留片刻即可显现，如图1-5所示。

4

命名Axure RP Pro7.0 icensed to

①

文件历量白拔要)重目的布得A发布网团队①每助问

日品日￥地色D0100%9国气号口2m-的年-

初

认

Arial

Normal

Home

Axur

交互座

☐pege2

用倒语辞

DPage 3

3

8

名

通件裤，三。Q

性式

4

9

Default>Common

6

4位置+大小

满中顺

H1

H2

标

庄有文互列样式

文本

每睡0可■

新码倒

界面数入时界口改变大小时应口时

面苏事件

5

10

图I-4 Axure RP工作界面

文件D编横日)视工程P)布置(A发布(P)回队D帮助

工具栏①

,√常用

面板(P,

√编始器

重置视图

Team

√发布

遮罩图示M)

√Arrange

√显示注（日

√Shape Formatting

Show Location and Size Tooltip

√文本格式

显示草图效果(S)

位置和大小

显示背景(B)

图1-5菜单栏样式

2.工具栏

“工具栏”指的是“菜单栏”下边的2排按钮，选择菜单“视图/工具栏”，勾选

站点地图(4)

27X

其中的“常用”“编辑器”“团队”“发布”

凸于需第地最Q

“布局”“形状样式”“文本格式”“位置和

4Home

大小”等8项，完整的“工具栏”就显示出

DPage 1

Page 2

来了。

DPage 3

3.站点地图

“站点地图”可用于创建和管理页面。新项目的站点地图区默认包含一个首页和其下的3个嵌套页面，如图1-6所示。

图1-6站点地图

5

服务外包产教融吕系列教材

网

在进行复杂页面编辑时，建议先创建一个站点地图，也就是说网站的整体结构先规

与

划好，然后再进行单独页面的编辑，这样比较高效。

4.所有部件库

机

Axure RP7.0自带了两个部件库，分别是线框图部件库和流程图部件库。默认显示的是线框图部件库，该部件面板包含Common、Forms和Menus and Table3个部分，如

原

图1-7所示。

计

Widgets (Defaut)

选经部件库，三，Q

4 Common

8

H1

H2

A-

标题1

标题2

标萃

文本

□

☒

矩形

占位符

自定义形状

横线

直线

行

章

围

图像热区

动态面板

内部架

中世器

4Forms

abcl

围

目B

文本框（单行）文本框（多行）

下拉列表框

列表选择框

复选框

(●

w可

单远框

HmML按细

4 Menus and Table

用

表格

Classic Menu-Classic Menu.

Horizontal

Vertical

图1-7线框图部件库

5.母版

“母版”可用来创建可重复使用的资源和管理全局变化，是整个项目中重复使用的部件容器。对母版的任何修改提交后，任何页面中所使用的相同的母版都会同时改变。

用来创建母版的常用元素有页头、页脚、导航、模板和广告等。当每个页面中有大量相同、重复的元素时，使用母版能够节省时间，提高设计效率。

6.页面编辑区域

“页面编辑区域”是Axure RP软件工作的区域，设计者所有的部件布局都必须放置在该区域中进行编辑操作。

7.页面属性面板

“页面属性面板”在“页面编辑区域”下方，由“页面注释”“页面交互”“页面样式”3

6

···试读结束···