中华MBA网校
新用户注册 登录
  首页 初中层管理者    公司战略  |  市场营销  |  人力资源  |  企业经营  |  财务金融  |  项目管理  |  信息科技  |  团队建设  |  运营管理  |  事业规划
   当前位置:首页 ->> 初中层管理者 ->> 信息科技
矩形框的含义是什么(深度理解和应用元件样式)
来自:    时间:2023年   阅读1196次     【
    此文可能是所有文章里最为基础的一篇,但是相信它会给你带来扎实的原型设计基础知识。

矩形框,在Axure自带的元件库里,是一个普通的不能再普通的元件。系统提供三种类型,有边框白色背景、无边框浅灰色背景和无边框深灰色背景。

然而,我们有时候可能小看了这个元件。毕竟,只是一个矩形框而已,能有多大的用处呢?

下面,我们从矩形框的基本样式设置、交互样式设置和属性设置三个方面,来看看矩形框到底有多么的有用。

一、基本样式设置

矩形的基本样式设置主要包括背景颜色、背景阴影,边框颜色、边框线宽、边框线段类型、边框可见性,圆角半径和对齐方式,其它的样式不常用,暂不赘述。

1、背景颜色

    样式说明:作为背景颜色,比较简单些,可以设置为单色或者渐变色。
    应用场景:显示区域背景、交互按钮。
    应用案例:在带有标题栏的区域中间,放置两个按钮,一个扁平化按钮,一个渐变色按钮。

(1)从元件库里拖动一个无边框【深灰色】背景矩形框,大小设置为600*40,作为标题栏,双击设置文字内容为“背景颜色的应用”。

(2)再从元件库里拖动一个无边框【浅灰色】背景矩形框,大小设置为600*300,作为内容区域,放在上面标题栏下方。

(3)添加两个无边框矩形,大小150*50,第一个直接设置背景颜色为灰色,第二个设置背景颜色深灰色到浅灰色的渐变过渡。

小结:通过设置矩形的大小、填充颜色,我们就以将矩形作为区域背景以及按钮来使用。当然,我们没有对按钮的样式进一步说明,后面我们将对矩形框按钮的样式继续深入介绍。

2、背景阴影

    样式说明:对背景阴影,它的效果是出现在矩形框的四周,因此常用的场景是显示区域的边框阴影或发光效果。
    应用场景:内容区域的背景,和同颜色的背景区分开来。
    应用案例:一个带有阴影效果的弹出窗口。

(1)添加一个浅灰色无边框矩形,大小为400*200,作为弹出窗口的背景。

(2)添加一个深灰色无边框矩形,大小为400*40,作为弹出窗口的标题,放在和上面的背景框相同位置,设置文字内容为“标题栏”。

(3)选择窗口背景矩形框,设置边框阴影,偏移位置中x和y都为0,也就是阴影没有某个方向偏移,这样达到的效果就是在矩形框的四周都有阴影,再设置模糊大小为25,颜色为默认,效果如下:

预览一下,看看实际效果,看起来很漂亮:

小结:通过设置矩形框的边框阴影,就能完成样式很好看的弹出窗口,我们进一步只要将标题栏和内容区域转换为动态面板,就可以当作弹出窗口使用了。

3、边框颜色、线宽、线段类型、边框可见性

    样式说明:有边框的矩形,默认是黑色边框,常常并不好看,例如黑色边框的按钮,总是那么深沉。线宽是粗细的体现;线段类型其实用的也不多,可能更多在设置虚线边框样式的时候使用;而边框的可见性还是比较有用。
    应用场景:普通有边框按钮、带有选中状态样式的导航菜单。
    应用案例:一个导航菜单,右侧有一个中英文切换按钮。

(1)添加一个有边框白色矩形,大小为150*50,设置背景为灰色,边框比背景颜色稍微深一些。

(2)修改矩形框的样式,边框设置为最粗,同时设置边框的可见性中只保留下边框:

(3)这时,我想你应该已经看出它的基本样式了,可作为导航菜单中的第一个选中菜单。复制这个矩形菜单三个,分别设置文字为产品、商城和论坛,取消边框:

(4)再复制一下“首页”按钮,显示所有边框,并设置边框为最细,文字内容设置为“ENGLISH”:

预览一下整体效果:

小结:可以看到上面的导航菜单的初步效果,虽然没有交互效果,但是样式基本满足要求,当前处于选中状态的首页菜单,以及其它导航菜单和按钮,在下一篇的交互样式中我们会继续完成这个例子。

4、圆角设置

    样式说明:圆角是指矩形的四个直角可以调整为指定半径大小的圆形,看起来更美观。
    应用场景:也是常常作为内容区域的背景。
    应用案例:圆角标题栏弹出窗口

(1)回到前面的弹出窗口示例,选择弹出窗口的内容区域背景和标题栏,设置圆角大小都为8:

(2)但是,我们发现这样设置出现了问题,矩形框的四周都被设置成了圆角,显然不太美观。幸好,圆角也可以指定在哪个方向上是否可见,我们把下边两处不要设置为圆角,同时调整一下背景阴影的大小为10:

再预览一下效果,这时就美观多了,只有上标题栏的上半部分带有圆角效果:

小结:圆角也像边框的可见性一样,指定某个角可以显示圆角,更加的灵活。

5、对齐方式,文字边距

    样式说明:矩形框中的文字对齐方式容易理解,根据实际需要设置对齐方式即可,同时可以调整文字距离边框的距离。
    应用场景:作为标题栏,对齐方式应用的比较多。
    应用案例:弹出窗口的标题栏对方式

(1)继续前面的弹出框,选择标题栏,设置文字对齐方式为左对齐:

(2)可是我们又发现,这个文字太靠左了,看起来很挤,边距的设置可以派上用场了,设置左边距为10:

好了,这样好多了。

小结:从前面矩形框的背景颜色设置、阴影、边框、圆角、对齐方式等基本样式的设置,我们可以完成原型设计过程中许多常见的界面样式,可以满足我们产品原型设计过程中80%的样式和布局。

怎么样,是否开始发现小小矩形框的强大之处?

>>浏览全部0条评论
主题:
验证码:
 
内容:
您的IP:3.144.212.145,请注意文明用词
账户:
密码:
注册 找回密码
-:::-学员心声 更多..
mmm123123 说:
    人生当中有四堂课,我们是一定要上的,哪四堂课呢?1、读万卷书2、行万里路3、阅人无数4、名师开悟。
bestme 说:
    听了老师讲的领导力是一门情商修炼专题,让我明白情商对一个领导者有多重要啊
bestme 说:
    平庸的员工是昂贵的,只有优秀的员工才是免费
qwerty 说:
    老师讲如何才能让员工自动自发的去工作,总得来说就是让员工有获得感,给企业创造利润也就是给自己增加收入
qwerty 说:
    听了老师讲解的企业管理方法--拆解后,对如何检查部署的执行力有更高的认识。
-:::-学习卡中心

 

说明:为方便广大学员购买经理人网校课程,特推出经理人网校学习卡(共分30、50、100、200、500元五种面值),每张学习卡都有不同的卡号,学员在购买学习卡后,刮开密码覆盖层,进入经理人网校,注册学员代码和密码、然后用已注册的学员代码和密码登录经理人网校,选择所要学习的课程(也可以在充值后选择)、输入学习卡的卡号和密码(如有多张可依次输入,直到充完为止)、学习卡充值完毕、就用“学习卡支付”支付课程费用、等确认支付成功后,用已注册的学员代码和密码登录经理人网校点击所报课程开始学习。
注意:为保障您的听课安全,请务必通过本网公布的正规渠道购卡并自行注册、充值!

-:::-相关软件下载
 媒体播放器下载  Real播放器下载
 FLASH播放器下载  压缩软件下载
 英语通播放器下载  AC课件播放器下载
 视频解码器下载  绿坝-花季护航
-:::-汇款及联系方式

经理人网、职业经理人证书、经理人资格证、是中国经理人获取各类管理类资格证书最佳学习网络机构!

请扫描微信二维码付款,备注您在网校的用户名,我们会把您的资金充到你的帐户里,

或支付后请加微信:gongpansixiang,通知客服人员.

 

网上书店
MBA考试类
管理经典著作
战略管理类
财务管理类
人力资源类
市场销售类
其它类型
网站关键词  |  关于我们  |  联系我们  |  招商中心  |  学习卡购买说明  |  付款及充值方式  |  帮助中心  |  学员心声
经理人网 www.58guanli.com  COPYRIGHT © 2013 - 版权所有  人人都是管理者-我爱经理人网、58管理、经理人证书、职业经理人、经理人培训、经理人招聘、MBA联考、DBA博士-是中国管理者学习交流的共同家园!

有任何问题请加微信:gongpansixiang,通知客服人员

中国工业和信息化部:湘ICP备19004842号-1  湘公网安备 43011102001727号