在《动态面板的应用(2)》一文中,我们高度还原了百度贴吧的登录面板。
这个登录面板由三个主要部分组成。
在原型中,这三个组成部分都由不同的元件组成,分解如下图。
除了元件的组成之外,很多元件都需要进行样式的设置。
1、形状
两种方式的登录面板都有背景矩形,这个背景矩形是没有边框的白色矩形。
需要将[填充][颜色]设置为[白色],[线段]的[线宽]设置为“0”。
并且,这个矩形的上方两个角部是圆角。
需要设置[圆角]的[半径]为“3”像素,并且取消下方两个圆角的[可见性]。
登录面板下方的浅蓝色背景矩形以及用户名密码登录面板中的蓝色登录按钮,同样需要设置填充颜色、线宽与圆角,参考上方的设置即可。
2、图标
登录面板右上方的图标,可以使用基本元件中的图片元件,双击或在样式中导入素材图片,也可以在本地文件夹中复制图片文件,粘贴到Axure的画布中。
除了调整图片的尺寸为60*60像素之外,也要进行圆角的设置,设置[圆角]的[半径]为“3”像素,并且取消左侧以及右下三个圆角的[可见性]。。
3、文本
一般的文本都使用文本标签元件,只需要设置文字的字号与字色。
不过,在案例中有一个文本略有特点,就是文字中间部分是蓝色,其他部分是黑色。
这样的文本样式,只需要双击文本标签元件后,划选中间的部分,单独设置字色即可。
4、线段
二维码的底层也是一个背景矩形,这个矩形需要设置[线段]的[颜色]为[浅灰色],[线宽]为“1”。
5、文本框
用户名与密码的输入框使用文本框元件,同样要进行圆角的设置,设置[圆角]的[半径]为“3”像素。
并且,文本框中的文字[左侧]需要与边框有“7”个像素的[边距]。
这样看上去才会更加美观。
除了以上默认样式的设置,文本框还需要进行提示样式的设置,设置文字的[字号]与[字色]。
温馨提示:如果不了解提示样式的设置,请参考《Axure的7种交互样式(5)-提示的交互样式》。而且建议把之前的教程都看看,打好基础,循序渐进。
不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!
转载请注明:iaxure.com » 常用样式设置(1)