本次课程执行的基本思路 本次课程主要介绍两个软件的使用: Axure rP与 PhotoShop 高保真、中低保真。 1、 Axure rP(20分钟) 基础1.添加元件到画布 在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置 上松开。(图1-1) 由 Qindex 4 D index page2 D page3 v本元体 矩形2 主要按 基础2.添加元件名称 文本框属性中输入元件的自定义名称,建议采用英文命名 建议格式: PasswordInput01或 Password01 名称含义:序号01的密码输入框 格式说明:“ Password”表示主要用途;“ Input”表示元件类型,一般情况下可 省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01” 表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读
本次课程执行的基本思路： 本次课程主要介绍两个软件的使用：Axure RP 与 PhotoShop。 高保真、中低保真。 1、Axure RP（20 分钟） 基础 1. 添加元件到画布 在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置 上松开。（图 1-1） 基础 2. 添加元件名称 文本框属性中输入元件的自定义名称，建议采用英文命名。 建议格式：PasswordInput01 或 Password01 名称含义：序号 01 的密码输入框 格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可 省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01” 表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读
101200 检视文本框 >PasswordInput01 羊式 加用侧 喉获取焦点时 喉失去焦点时 更多事件>》> 基础3.设置元件位置/尺寸 元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行 输入调整。(图1-3) x:指元件在画布中的x轴坐标值 y:指元件在画布中的y轴坐标值。 ·13日1▲.日三===■0·∠,=· x200×100w30ch170 轴向右变大 (矩形名称 位尺寸 元件位足指元件左上顶点在画布中的坐标 004I W:指元件的宽度值。 h:指元件的高度值。 在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。(图
基础 3. 设置元件位置/尺寸 元件的位置与尺寸可以通过鼠标拖拽调整，也可以在快捷功能或元件样式中进行 输入调整。（图 1-3） x：指元件在画布中的 x 轴坐标值。 y：指元件在画布中的 y 轴坐标值。 w：指元件的宽度值。 h：指元件的高度值。 在输入数值调整元件尺寸时，可以在样式中设置，让元件【保持宽高比例】。（图 1-4）
1-B△ 三图三=== 日·∠三·三 index x 元件度 位置·尺寸 艳动节点改变元件尺寸 y柱坐想 Image 元件高度o 基础4.设置元件默认角度 方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合 适的角度。(图1-5) 方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开 设置。(图1-5) 检视占位符 这些都是元件节点 (占位符名称 签角度 度 调整元件角度 元件角度 Box 1 按住ctr键时,鼠标指针进入元件节点点会改变形状 基础5.设置元件颜色与透明 选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜 色,或者在元件样式中进行设置。(图1-6)
基础 4. 设置元件默认角度 方式一：选择需要改变角度的元件，按住键的同时，用鼠标拖动元件的节点到合 适的角度。（图 1-5） 方式二：在元件样式中进行角度的设置，元件的角度与元件文字的角度可以分开 设置。（图 1-5） 基础 5. 设置元件颜色与透明 选择要改变颜色的元件，点击快捷功能区中的背景颜色设置按钮，选取相应的颜 色，或者在元件样式中进行设置。（图 1-6）
国==口·∠ 轨充类单色 设单色浙变 形名称 吸跟颜色工目 胜坐y性想度C2 设置自定义颜色 最近的风面 样式中的填免颜色设置 基础6.设置形状或图片圆角 可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半 径来实现。(图1-7) 检视矩形 (矩形名称 边框∠-三 设置园角半径 Arial Normal 清部分角BTy么+ 基础7.设置矩形仅显示部分边框 在 Axure rp8的版本中,矩形的边框可以在样式中设置显示全部或部分。(图 8)
基础 6. 设置形状或图片圆角 可以通过拖动元件左上方的圆点图标进行调整，也可以在元件样式中设置圆角半 径来实现。（图 1-7） 基础 7. 设置矩形仅显示部分边框 在 Axure RP 8 的版本中，矩形的边框可以在样式中设置显示全部或部分。（图 1- 8）
检机:矩形 ∠· 角半径 不明 Arial 取消部分边框 基础8.设置线段/箭头/边框样式 线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。(图1- 1·日1A.=E===口 ∠· 三 边框样式 颜色线线形头 (矩形名称 ∠ 边框/线段头的样式设置 8 不运明 100% 基础9.设置元件文字边距/行距 在元件样式中可以设置元件文字的【行间距】与【填充】。(图1-10) 行间距:是指文字段落行与行之间的空隙 填充:是指文字与形状边缘之间填充的空隙
基础 8. 设置线段/箭头/边框样式 线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。（图 1- 9） 基础 9. 设置元件文字边距/行距 在元件样式中可以设置元件文字的【行间距】与【填充】。（图 1-10） 行间距：是指文字段落行与行之间的空隙。 填充：是指文字与形状边缘之间填充的空隙