基础操作篇

本篇包含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. [BS-28] iOS中分页的几种算法

    iOS中分页的几种算法 总记录数:totalRecord 每页最大记录数:maxResult 算法一: totalPage = totalRecord % maxResult == 0 ? total ...

  2. Spring MVC Integration,Spring Security

     http://docs.spring.io/spring-security/site/docs/4.2.0.RELEASE/reference/htmlsingle/#authorize-reque ...

  3. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  4. Java基础之扩展GUI——显示About对话框(Sketcher 2 displaying an About dialog)

    控制台程序. 最简单的对话框仅仅显示一些信息.为了说明这一点,可以为Sketcher添加Help菜单项和About菜单项,之后再显示About对话框来提供有关应用程序的信息. 要新建的对话框类从JDi ...

  5. JS实时数据运算

    应朋友需要制作的一个小页面 <script type="text/javascript"> function cal(ida,idb,idc,idd) { var nu ...

  6. 14. 星际争霸之php设计模式--状态模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  7. Qt信号与槽应用实例一

    ..... connect(m_pGlobelWidget,signal(globeControlClick(object,object)),this,slot(globeControlClick(o ...

  8. js 操作 字符串

    去w3school看看string的基本方法把: 方法描述 anchor()    创建 HTML 锚.    big()    用大号字体显示字符串.    blink()    显示闪动字符串.  ...

  9. 用andtoid studio获取天气数据并解析适配

    1.申请拿到数据 可以用“聚合数据” 2.在android studio中导入需要的jar包 复制—>app—>libs—>粘贴—>右击—>Add As Library… ...

  10. jenkins对结果进行断言问题

    TextFinder plugin插件 Jenkins在判定使用shell scripts完成build成功与否的时候,是根据shell最终的返回值是否为零来判定的:零即成功,非零即失败.这点判定事实 ...