本次课程执行的基本思路 本次课程主要介绍两个软件的使用: 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） 行间距：是指文字段落行与行之间的空隙。 填充：是指文字与形状边缘之间填充的空隙
Lorem ipsum dolor sit amet, consectetur (矩形名称 adipiscing elit Aenean euismod bibendum laoreet Proin gravida dolor sit amet lacus Normal accumsan et viverra justo commodo Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis 项目符号 orci, sed rhoncus sapien nunc E三三== 填充 在30上0右0下 基础10.设置元件默认隐藏 选择要隐藏的元件,在快捷功能或者元件样式中勾选【隐藏】选项。(图1-11) x441y52w:300ch170隐意 检视:短形 (矩形名称 位置·尺寸 2 X轴坐标y轴坐标 充度度 0 Box 2 默认情况下元件隐藏后会在编辑区显示淡黄色阴 填充 基础11.设置文本框输入为密码 文本框属性中选择文本框的{类型}为【密码】。(图1-12)
基础 10. 设置元件默认隐藏 选择要隐藏的元件，在快捷功能或者元件样式中勾选【隐藏】选项。（图 1-11） 基础 11. 设置文本框输入为密码 文本框属性中选择文本框的{类型}为【密码】。（图 1-12）
检视文本框 (攻本框名称 样式 Number Phone Number Time 基础12.设置打开选择文件窗口 文本框属性中选择文本框的{类型}为【文件】,即可在浏览器中变成打开选择本 地文件的按钮。该按钮样式各浏览器略有不同。(图1-13)
基础 12. 设置打开选择文件窗口 文本框属性中选择文本框的{类型}为【文件】，即可在浏览器中变成打开选择本 地文件的按钮。该按钮样式各浏览器略有不同。（图 1-13）
检视文本框 (攻本框名称 样式 Number Phone Number 浏览…未选择文件 浏览器中的效果 Time 基础13.限制文本框输入字符位数 在文本框属性中输入文本框的{最大长度}为指定长度的数字。(图1-14) 检视文本框 (文本框名称 隐藏提示触发⊙输入○获取焦点 最大长度 基础14.设置文本框提示文字 在文本框属性中输入文本框的{提示文字}。提示文字的字体、颜色、对齐方式等 样式可以点击【提示样式】进行设置。(图1-15) 提示文字设置包含{隐藏提示触发}选项,其中: 输入:指用户开始输入时提示文字才消失。 获取焦点:指光标进入文本框时提示文字即消失
基础 13. 限制文本框输入字符位数 在文本框属性中输入文本框的{最大长度}为指定长度的数字。（图 1-14） 基础 14. 设置文本框提示文字 在文本框属性中输入文本框的{提示文字}。提示文字的字体、颜色、对齐方式等 样式可以点击【提示样式】进行设置。（图 1-15） 提示文字设置包含{隐藏提示触发}选项，其中： 输入：指用户开始输入时提示文字才消失。 获取焦点：指光标进入文本框时提示文字即消失
11020 检视:文本框 (又本框名称 Text 提示文字 设置提示文宇的样式 Aa提示样式#999999 设置提示文宇消失的触发条件 隐藏提示触发◎输入O获取焦点 最大长度 基础15.设置文本框回车触发事件 文本框回车触发事件是指在文本框输入状态下按键,可以触发某个元件的 【鼠标单击时】事件。只需在文本框属性中{提交按钮}的列表中选择相应的元件即可。 (图1-16) (又本框名称 最大长度 BUTTON □隐边框 □禁用 提交按钮 检视矩形 > MyButton My Button 元件提示 基础16.设置元件鼠标移入的提示 在文本框属性中{元件提示}中输入提示内容即可。(图1-17)
基础 15. 设置文本框回车触发事件 文本框回车触发事件是指在文本框输入状态下按键，可以触发某个元件的 【鼠标单击时】事件。只需在文本框属性中{提交按钮}的列表中选择相应的元件即可。 （图 1-16） 基础 16. 设置元件鼠标移入的提示 在文本框属性中{元件提示}中输入提示内容即可。（图 1-17）
检视:矩形 (矩形名称 引用页 □选中 设置选项组名称 忘记密码? 元件提示 浏览器中的效果 点击找回密码 基础17.设置矩形为其他形状 在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。(图1- 点击打开形状列表 凶○匚 △N☆ →Da 0◇口Q△△ 转换为自定义形状 基础18.设置自定义形状 在形状上点击,在菜单中选择【转换为自定义形状】,即可对形状进 行编辑。也可以通过点击形状右上角的圆点图标,在打开的形状选择列表中选择【转 换为自定义形状】(图1-18)。具体的编辑操作见图1-19中的标注
基础 17. 设置矩形为其他形状 在画布中点击矩形右上方圆点图标即可打开形状列表，设置为其它形状。（图 1- 18） 基础 18. 设置自定义形状 在形状上点击，在菜单中选择【转换为自定义形状】，即可对形状进 行编辑。也可以通过点击形状右上角的圆点图标，在打开的形状选择列表中选择【转 换为自定义形状】（图 1-18）。具体的编辑操作见图 1-19 中的标注