Axure中的样式

这篇具有很好参考价值的文章主要介绍了Axure中的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

样式

首先说一下Axure里面的原点位置

如下图:
Axure中的样式,Axure,axure
还有一个办法是我们选中我们的按钮,如上图,然后打开右边的样式,可以看按钮的x,y属性,类似于游戏中unity软件的x,y属性,类似于html中的right和bottom,其中x表示向左偏移量,而y表示的是向右偏移量。如下图:
Axure中的样式,Axure,axure
可以看到此时x和y都是0,说明我们的按钮就是在原点位置,然后w表示宽度width,而h表示高度height。而右边的5那个图标表示的是我们图标的圆角半径,接着我们看下这个值设置成5,20,100的时候,按钮形状的变化,如下图:
Axure中的样式,Axure,axure
Axure中的样式,Axure,axure
Axure中的样式,Axure,axure
可以发现设置成100和设置成25是没啥区别的,也就是说角曲度最多设置成20。

接下来我们来看下旋转按钮,如下图:
Axure中的样式,Axure,axure
比如上图就是把按钮顺时针旋转45度,如下图:
Axure中的样式,Axure,axure
接着再来看下自适应文本页面的宽度和高度如下图:
Axure中的样式,Axure,axure
点击上面的两个按钮之后 我们的图标就会自动的发生宽度和高度自适应去匹配页面 如下图:
Axure中的样式,Axure,axure

样式

偏移量 宽高 圆角半径 旋转 自适应宽高的设置
接下来说下给上面的按钮如何设置各种的样式,如下图:
Axure中的样式,Axure,axure

上面是设置图形的右偏移量、下偏移量、顺时针旋转度数、宽度、高度、圆角半径、自适应宽高的属性,我们上面已经演示过了,后面就不再演示说明了。

设置元件在页面中的名字 以及是否显示元件
接着我们看下最上方的设置组件名称 如下图:
Axure中的样式,Axure,axure
默认是没有设置矩形名称的 并且元件是可以显示的,什么意思呢都是?我们先来说下矩形名称,如果你没有设置自定义的矩形名称,那么左边显示元件的时候就是默认名称,如下图:
Axure中的样式,Axure,axure
而现在我们设置一个我们想要的元件的名称,比如下图:
Axure中的样式,Axure,axure
那么我们的页面中的对应的元件名称就改变了 如下图:
Axure中的样式,Axure,axure
我觉得这个设置页面中元件的自定义名字的功能 大概率是方便用户去找页面中的对应的元件标签。
还有一个需要注意的点事 我们页面中的真实的元件里面的文件并没有变化,如上图元件里面的文字仍然是按钮,我们仅仅是修改的元件在整个页面中被标记的名字。就像你在班级里面人家给你起了个外号就做张三,但你的真实名字仍是身份证上写的那个。
如果想要去改元件里面的内容比如想要修改上面的原件里面的按钮文字,那么你可以直接去页面的对应元件里面鼠标双击文字 就可以修改了。

接下俩我们再来说一下小眼睛图标,这个图标如果是开启的 那么我们可以看到页面中的元件,如下图:
Axure中的样式,Axure,axure
Axure中的样式,Axure,axure
但如果这个图标是关闭的 我们就看不到这个元件了 如下图:
Axure中的样式,Axure,axure
Axure中的样式,Axure,axure

元件样式
接下来说一下我们的元件样式 如下图:
Axure中的样式,Axure,axure
我们本例的元件是Primary Button如下图:
Axure中的样式,Axure,axure
我们样式中的元件样式其实和元件库里面的元件是对应的,但是我们样式中的元件样式种类更多一些 如下图:
Axure中的样式,Axure,axure
接下来我们来说一下我们的管理元件的样式按钮 如下图:
Axure中的样式,Axure,axure
点击之后可以修改我们元件的默认样式 如下图:
Axure中的样式,Axure,axure
可以看到像元件的所有样式 比如说字体颜色 字体大小 边框粗细 圆角半径 粗体 斜体等等这些,我们都可以自定义默认修改的通过管理元件样式这个按钮。

不透明度
如下图:
Axure中的样式,Axure,axure
不透明度百分百可以完全看到;
Axure中的样式,Axure,axure
不透明度百分之0就完全透明了 完全看不到了 如下图:
Axure中的样式,Axure,axure

字体样式和字体排版样式
接下来我们来说下字体样式和字体排版样式 如下图:
Axure中的样式,Axure,axure
Axure中的样式,Axure,axure

填充和边框描边
如下图:
Axure中的样式,Axure,axure
填充很容易理解就是填充背景颜色嘛!但是这里的边框描边为什么显示不出来黄色呢?很简单因为我们上面的边框的宽度设置的是0,我们修改下图下图:
Axure中的样式,Axure,axure

阴影
Axure中的样式,Axure,axure
首先开一下没有阴影的元件 如下图。接下来我们看下开启阴影之后的元件 如下图:
Axure中的样式,Axure,axure
所谓的阴影就是会给元件一个影子,这样看着会更加的立体一些。接着我们把影子向右偏移量x设置为20,把影子向下偏移量设置为20,把模糊程度也设置为20,对比一下元件发生的变化 如下图:
Axure中的样式,Axure,axure
最后说一下边距
如下图:
Axure中的样式,Axure,axure
这里的边距指的其实是元件里面的字体相对于元件的偏移量,和我们的html中的绝对位置偏移量是一样的。其中L表示的就是left指的是向左偏移量也就是这个值越大越靠右,T表示的是top指的是向上偏移量也就是这个值越大越靠下;R表示的是right指的是向右偏移量;B表示的是bottom指的是向下偏移量;文章来源地址https://www.toymoban.com/news/detail-860418.html

到了这里,关于Axure中的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Axure插件axure-chrome-extension安装

    chrome浏览器打开axure生成的HTML静态文件页面预览打开如下图显示 ,这是因为chrome浏览器没有安装Axure插件axure-chrome-extension导致的。 方式一:先下载Axure谷歌浏览器插件,然后在浏览器中添加扩展程序。添加已解压得扩展程序。 插件下载地址:https://download.csdn.net/download/qq_41

    2024年02月11日
    浏览(93)
  • Axure RP 10汉化版下载 Axure RP 10 mac授权码

    Axure RP10汉化版是最强大的计划,原型设计和交付给开发人员的方法,而无需编写代码。能够制作逼真的,动态形式的原型。   Axure RP 10汉化版下载 Axure RP 10 mac授权码 1.显示动态面板 使用Axure RP 10,您可以在新的“所有状态”视图中并排查看和编辑动态面板的所有状态。在您

    2024年02月09日
    浏览(38)
  • 整理了一些已分类的产品Axure元件库,助力正在找Axure组件库的同学高速成长

    在我加入的一些高质量产品交流群和一些高质量交互设计交流群里经常有同学在问,“有没有全一点的Axure元件库呀?”、“大家有没有Web端元件库呀?”、“有没有微信小程序元件库呀?”等等这些问题。 重复的问题实在是太多太多了,我干脆做个《产品元件库》来满足大

    2024年02月16日
    浏览(61)
  • Axure动态显示实时时间

    Axure制作动态的实时时间(视频右上角) 步骤教学 【新建元件】实时时间的显示区域新建一个动态面板(2个状态面板) 【新建元件】两个状态面板的相同位置,分别新建“一级标题”(实时时间1、实时时间2);注意:最后显示的实时时间的字体样式跟“一级标题”一致,

    2024年02月13日
    浏览(37)
  • Axure RP

    Axure RP(Rapid Prototyping)是一款交互式原型设计工具,用于创建高保真的交互式界面原型和线框图。它主要用于用户体验(UX)和用户界面(UI)设计,以及为Web应用程序和移动应用程序制作可交互的原型。 Axure RP官网: https://www.axure.com/ 网盘 链接: https://pan.baidu.com/s/11qthDGiqkN2

    2024年02月10日
    浏览(38)
  • 【Axure】交互&情形

    目录 一. 交互          1.1 概念         1.2 交互样式         1.3 交互事件         1.3.1 常用的元件交互事件         1.3.2 动态面板独有的事件          1.3.3 复选框和下拉列表的交互事件         1.4 交互动作 二. 情形         2.1 概念         2.2 效果演示 三. 案例

    2024年02月04日
    浏览(46)
  • Axure教程——滑屏效果

    本文介绍用Axure来做一个移动端引导页的滑屏效果。 效果预览 预览地址:https://dsn3d3.axshare.com 制作元件 1、所需元件 矩形 动态面板 2、制作过程 拖入一个动态面板元件,命名为“”切换,大小设置为375×667,如图: 进入动态面板,背景颜色设置为#000000,不透明度30%,拖入四

    2024年02月12日
    浏览(41)
  • Axure教程—选择器

    本文将教大家如何用AXURE中的动态面板制作选择器 一、效果 预览地址:https://zhihp9.axshare.com 二、功能 用户点击选择框,可以显示下拉选择器,点击后选择对应项。 三、制作 1、选择框 拖入一个矩形,设置大小为164×38,其文本为”请选择“,如图: 对其鼠标悬停以及选中时

    2024年02月10日
    浏览(47)
  • Axure的交互与情形

    1.用户需求与行为的了解:在进行交互设计之前,我们需要深入了解用户的需求和行为模式。通过用户研究和分析,我们可以得到关于用户喜好、行为习惯和心理需求的重要信息,从而指导设计决策。 2.创造简洁直观的交互体验:在设计交互原型时,我们应追求简洁和直观的

    2024年02月03日
    浏览(48)
  • Axure教程—菜单滚动切换交互

    本文接受的是用Axure中的动态面板和热区制作菜单滚动切换交互 效果 预览地址:https://u5ircj.axshare.com 功能 页面滚动到某一内容部分,显示其相应的菜单。 制作 一、所需元件 矩形、动态面板、热区 二、制作过程 拖入一个矩形元件,其大小设置为1000×92,命名为”导航“ 在导

    2024年02月12日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包