基础操作篇

本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。

第1章 使用元件

本文目录

基础1. 添加元件到画布

基础2. 添加元件名称

基础3. 设置元件位置/尺寸

基础4. 设置元件默认角度

基础5. 设置元件颜色与透明

基础6. 设置形状或图片圆角

基础7. 设置矩形仅显示部分边框

基础8. 设置线段/箭头/边框样式

基础9. 设置元件文字边距/行距

基础10. 设置元件默认隐藏

正文

基础1. 添加元件到画布

在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。(图1-1)

基础2. 添加元件名称

在检视面板的元件名称文本框中输入元件的自定义名称,建议采用英文命名。

建议格式:PasswordInput01或Password01

名称含义:序号01的密码输入框

格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。(图1-2)

基础3. 设置元件位置/尺寸

元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。(图1-3)

x:指元件在画布中的x轴坐标值。

y:指元件在画布中的y轴坐标值。

w:指元件的宽度值。

h:指元件的高度值。

在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。(图1-4)

基础4. 设置元件默认角度

方式一:选择需要改变角度的元件,按住<Ctrl>键的同时,用鼠标拖动元件的节点到合适的角度。(图1-5)

方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。(图1-5)

基础5. 设置元件颜色与透明

选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。(图1-6)

基础6. 设置形状或图片圆角

可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。(图1-7)

基础7. 设置矩形仅显示部分边框

在Axure RP 8的版本中,矩形的边框可以在样式中设置显示全部或部分。(图1-8)

基础8. 设置线段/箭头/边框样式

线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。(图1-9)

基础9. 设置元件文字边距/行距

在元件样式中可以设置元件文字的【行间距】与【填充】。(图1-10)

行间距:是指文字段落行与行之间的空隙。

填充:是指文字与形状边缘之间填充的空隙。

基础10. 设置元件默认隐藏

选择要隐藏的元件,在快捷功能或者元件样式中勾选【隐藏】选项。(图1-11)

本文摘录自图书《Axure RP8 实战手册-网站和APP原型制作案例精粹(预计2016年8月底上市),作者为小楼一夜听春语,未经许可请勿转载!

---------------------------------------------------- End ----------------------------------------------------

转载请注明:Axure原创教程网 » AxureRP8实战手册(基础1-10)

AxureRP8实战手册(基础1-10)的更多相关文章

  1. AxureRP8实战手册(基础31-40)

    AxureRP8实战手册(基础31-40) 本文目录 基础31.     切换元件库 第2章          页面设置 基础32.     设置页面居中 基础33.     设置页面背景(图片/颜色 ...

  2. AxureRP8实战手册(基础21-30)

    AxureRP8实战手册(基础21-30) 本文目录 基础21.     设置元件默认选中/禁用 基础22.     设置单选按钮唯一选中 基础23.     设置元件不同状态时的样式 基础24.   ...

  3. AxureRP8实战手册(基础11-20)

    本文目录 基础11. 设置文本框输入为密码 基础12. 设置打开选择文件窗口 基础13. 限制文本框输入字符位数 基础14. 设置文本框提示文字 基础15. 设置文本框回车触发事件 基础16. 设置元 ...

  4. AxureRP8实战手册

    基础操作篇 本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍.同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握. 第1章 使用元件 本文目 ...

  5. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  6. Docker虚拟化实战学习——基础篇(转)

    Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker   Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...

  7. 数据科学实战手册(R+Python)书中引用资料网址

    本文会持续将<数据科学实战手册(R+Python)>一书中的附带参考资料网址手打出来, 方便访问. 由于书中的参考资料网址太多, 这个文档将可能花费一段时间才能完成. 第一章 P7  Rs ...

  8. Java 入门课程视频实战-0基础 上线了,猜拳游戏,ATM实战,欢迎围观

    Java 入门课程视频实战-0基础 已经上传完了.欢迎小伙伴们过来围观 直接进入: http://edu.csdn.net/course/detail/196 课程文件夹例如以下: 1 初识Java  ...

  9. 【Flutter】372- Flutter移动端实战手册

    ☝点击上方蓝字,关注我们! 本文字数:3705字 预计阅读时间:28分钟 导 读 Flutter又双叒叕来了!本周推送是我们Flutter系列文章的最终篇!<Flutter移动端实战手册> ...

随机推荐

  1. Convert and Cast for Date and Money format.

    SELECT REPLACE(REPLACE(@str, CHAR(13), ''), CHAR(10), '') The below script removes the TAB(Horozonta ...

  2. Django,数据模型创建之数据库API参考(转载)

    一旦 数据模型 创建完毕, 自然会有存取数据的需要.本文档介绍了由 models 衍生而来的数据库抽象API,及如何创建,得到及更新对象. 贯穿本参考, 我们都会引用下面的民意测验(Poll)应用程序 ...

  3. PL/SQL 存储函数和过程

    --存储过程 .不带参: create or replace procedure 存储过程名 as|is --说明部分 begin --执行的语句: end: 调用存储过程 execute 存储过程名 ...

  4. lnmp环境下载安装包

    一.下载php(官网):http://php.net/downloads.php 点击上图选择的php-7.0.10.tar.gz (sig) 进入如下页面: 需要在linux上面下载需要如下操作: ...

  5. 获取设置唯一的UDID的值

    http://blog.sina.com.cn/s/blog_5971cdd00102vqgy.html ---方法 http://www.jianshu.com/p/a7a4a14c8030  -- ...

  6. C#文件与流(FileStream、StreamWriter 、StreamReader 、File、FileInfo、Directory、directoryInfo、Path、Encoding)

    (FileStream.StreamWriter .StreamReader .File.FileInfo.Directory.DirectoryInfo.Path.Encoding)     C#文 ...

  7. Bug测试报告--在线考试系统--金州勇士

    项目名:在线考试系统 组名:金州勇士 测试者:宫丽君(nice!团队) 代码地址: ssh:git@git.coding.net:handsomeman/examm.git     https://g ...

  8. spring aop 中获取 request

    使用aop时需要request 和response 使用方法调用时 HttpServletRequest request = ((ServletRequestAttributes)RequestCon ...

  9. 【转】PowerShell入门(一):PowerShell能干什么?

    转至:http://www.cnblogs.com/ceachy/archive/2013/01/30/WhatCanPowerShellDo.html PowerShell能干什么呢?就像序言中提到 ...

  10. <c:if>标签判断是否为空

    <c:if test="${not empty feeType}">  注意:大括号外面不能为空. ${orderNo.ethdOriginalOrderNo} < ...