快好知 kuaihz

Axure教程:根据文字内容自动调整按钮大小!

在用Axure做原型时,经常要对Button的长度和宽度做调整,我们通常会使用鼠标拖动的方式来调整,可是当按钮文字长度不一样,经常的拖动会非常繁杂,有没有提高效率的方法呢?

效果图

我们先来看一下效果图~(按钮的使用主要是在PC端,做后台原型时使用较为频繁)

制作方法

首先我们选择一个你需要的使用的元件。一般来说会用下面两个带边框的元件,颜色可以根据情况进行修改。

其次我们需要对元件进行边距和边角等做处理,这一步是对按钮的美观做处理。

在这里我对选中这个元件并对这个元件设置Padding(所有内边距):

L为left(左边距,即文字与左边框的距离)

T为top(顶边距,即文字与上边框的距离)

R为right(右边距,即文字与右边框的距离)

B为bottom(底边距,即文字与下边框的距离)

除此之外还可以设置圆角、字距、字体大小等等,在此不细说。

最后我们对设置好美观的元件设置根据内容自动调整

选中元件,点击下方图中所示的两个按钮,点击左侧横状的按钮可以自动调整宽度,点击右侧竖状的按钮可以自动调整高度。

小tips:当你手动拉伸元件大小之后,自动调整大小的功能会失效哦,如果需要自动调整的话需要重新再进行点击哦~

这样通过复制进行使用或者保存到元件库中就可以很方便的使用了哟!你学会了吗?

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:按钮  按钮词条  大小  大小词条  根据  根据词条  调整  调整词条  文字  文字词条  
原型

 Axure教程:鼠标移入移出特效

本篇教程将为大家展示如何使用Axure制作按钮触发效果。一、演示效果二、制作过程首先,我们看下本次教程用到的3个元件:我们将3个元件水平垂直居中对齐,并且将层顺...(展开)

原型

 小红书App产品需求文档(PRD...

笔者以安卓系统手机端用户的身份通过使用、体验和分析等方式来倒推“小红书”APP,并生成产品需求文档PRD。小红书app是以用户分享内容(UGC)模式闯入到大家视...(展开)