【Axure10】样式区域-元件样式(常规以矩形为例)

元件通用样式

样式区域主要进行元件的样式的修改。由于元件的大多样式相同,本文以矩形为例进行样式的说明。其它元件样式若有特殊设置,将进行单独说明。

名称、显示

名称

选中元件的名称,系统默认为空(友好的命名可以在概要页面快速查找)。

显示隐藏

控制元件的显示与隐藏(眼睛图标),默认状态为显示。

对齐、排列

对齐

对齐只对两个及两个以上元件有效。

  • 左对齐

  • 垂直居中对齐

  • 右对齐

  • 顶部对齐

  • 水平居中对齐

  • 底部对齐。

排列

分布只对三个及三个以上元件有效。分布可以将选中元件按照水平(横向)或垂直(纵向)方向的进行等间距划分。

  • 横向分布
  • 垂直分布

位置尺寸

image

位置设置

X:元件左上角的X轴位置。

Y:元件左上角的Y轴位置。

旋转设置

°(旋转):元件旋转的角度(支持负角度的输入,负角度系统会自动换算)。

W:元件的宽度。

H:元件的高度。

圆角

设置元件的圆角,圆角支持四个角度单独设置圆角,

  • 半径:设置元件的半径大小
  • 可见性:设置矩形四个角那些为圆角,可以控制图标的四个顶点设置,选中状态存在颜色区分。

文字自适应

文字自适应宽度:在元件中存在元件上的文字采用自适应的方式。

文字自适应高度:在元件中存在元件上的文字采用自适应的方式。

  • 文字的宽、高自适应在9中存在此功能,但是状态是未知状态,在10中进行了状态的优化,如果选择了某方向的自适应,在位置属性部分对应的方向就是选中状态。
  • 文字自适应可以防止文字在不同浏览器中预览导致文字换行错位。可以其配合边距进行使用,也是常用且实用的一个功能。

元件全局样式

元件在默认状态下,都存在对应的默认样式,在常规情况下,可以在元件的默认样式上进行对应的修改调整,达到所需的效果样式。

默认样式选择

选择内置的其它样式或新建样式进行选择。

样式一键同步

针对全局样式,新增了可以一键改变全局的同组件的样式。可以快速方便的将现有设置的样式同步至全局(同一样式参数的)。

是不是有点绕,举个例子说明下:

创建3个矩形A、B、C

按照顺序编辑A的样式、B的样式、C的样式

如果此时点击B的样式同步全局,只会同步改变A的样式,C不会改变。

如果此时点击C的样式同步全局,会同步改变A与B的样式,C不会改变。

管理元件样式

进行全局所有元件样式的统一管理,支持样式的新增等。

透明度

管理当前元件的整体透明度参数。

排版(文字)

主要进行元件中文字样式设置与排版等(元件中存在文字均可进行设置)。

字体:

可以选择替换文字的字体格式。

注意:

  • 1、如果原型需要在非本电脑展示,使用特殊的字体没需要在演示电脑提前安装,不然浏览器会自动更换为默认字体。
  • 2、注意字体的版权,确认是可以商用的字体(这里有太多故事...),避免版权纠纷)。

字体属性:

如果安装为系列字体,可以选择字体的其他样式属性进行调整。

字体大小:

调整字体显示的大小。

注:常规浏览器最小兼容字体大小为12px,为了防止预览时字体不一致(小于12px会自动放大),需设置字体大于等于12px。如需设置12px以下哎,且需要正常预览,可以在浏览器中修改设置字体大小属性。

字体颜色:

调整字体显示的颜色。

行间距:

当存在换行的字段时,行间距控制上下行的距离。

字体对齐:

左对齐、水平居中对齐、右对齐、上对齐、垂直居中对齐、下对齐。

字体其它属性设置

字体属性设置:

加粗、倾斜、下滑线、删除线。

基线

设置字体是否为上标、下标、正常。

  • Normal:正常。

  • Superscript:上标(例如:某某的平方)。

  • Subscript:下标(例如:脚注)。

注:通过上下标的设置,可以实现部分公式的表示。

字母大小写

设置文字中字母的大小写自动转换。

  • Normal:正常。

  • uppercase:大写。

  • Lowercase:小写。

注:只需进行设置,系统会自动进行字母的大小写转换。

字间距:

字体之前的间距。

字体阴影:

给字体添加阴影,可以设置阴影的大小和偏离方位(通过坐标控制)。

填充

  • 颜色填充:选中元件进行颜色填充,部分支持渐变色。

  • 渐变色支持线性和径向。

  • 支持颜色填充单独透明度设置。

  • 图片:选中的元件进行图片的填充。

  • 图片同时支持填充样式、位置定位点选择。

边框(描边)

颜色:

描边的颜色。

线宽:

描边的宽度。

类型:

可以选择不同虚线间隔的描边。

箭头样式:

在线段中可以调节样式。可以设置对应描边的样式,例如不同间距的虚线。

可见性:

可以调整描边的四边是否显示。点击对应的方向,进行设置,选中与未选中有颜色区分。

阴影

  • 外部:在元件的内部添加阴影。

  • 内部:在元件的外部添加阴影。

  • 模糊:将阴影进行模糊处理,数值越大越模糊

  • 扩展:将阴影向外(设置的方向)进行延伸,数值越大,延伸越大。

阴影在原型制作中比较少用,在用到的时候自己可以尝试多调整下,来达到想要的效果。Axuer中的阴影只通过坐标可以调整显示方向。

边距(文字)

显示文字距离元件的父容器的距离。可以保持字体显示位置的对应精确调整。

  • 其实边距挺实用的,合理的设置边距可以方便原型的尺寸对齐,从而做出高保真的原型。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容