Axure RP8产品原型设计快速上手指南
上QQ阅读APP看书,第一时间看更新

2.2 文本部件

文本部件主要用于在页面上显示文字内容,是最常用的部件之一。其实从本质上讲,文本部件也是形状部件,但由于主要用于文字的输入和显示,在此对它单独进行介绍。

文本的类型

Axure中针对文字的部件主要有三种类型。

标签:最常用的文字部件。

标题:格式化的标签(标题1、标题2、标题3)。

文本:文本标签的另外一种形式,通常可以理解成我们平时所说的段落即可。

在页面中添加文本

和其他设计类软件不同的是,Axure将文本这一工具也设计成了一个部件工具,同时还内置了几种不同的样式,所以要在页面编辑区域使用文字内容,直接拖动一个文本部件到页面编辑区域即可。双击可进入文本的编辑状态,修改为想要的文字内容。另外页面编辑区域也支持文本的直接复制和粘贴,可以将外部文字内容直接粘贴在页面编辑区域。

修改文本的样式属性

拖动文本到页面编辑区域后,点击检查器面板中的样式面板,可以对应修改文本的样式属性。

调整文本的坐标位置

页面编辑区域是一个以X轴和X轴构成的平面区域,文本部件被拖动到页面编辑区域就被赋予了一个坐标位置,可以手动修改文本的坐标,也可以直接单击选中文本部件拖动改变其坐标位置。

文本的宽度与高度

文本的宽度和高度有自动和固定两种属性,默认为自动,文本部件会根据输入的文本内容的多少自动扩充大小;当手动修改了文本部件的宽度之后文本的属性就变为了固定,这时候无论输入多少内容,文本的宽度和高度都不发生改变。如果文本的宽度和高度过大,还可直接根据文本的宽度和高度自动调整。

调整文本的行间距

对于大段的段落文字,为了使排版更加美观,需要对其行间距进行调整。Axure中暂时还没有字间距和段间距。

文本的对齐方式

文本的对齐方式有常见的左、中、右对齐,还有上、中、下对齐,默认是左对齐和向上对齐。

制作项目符号列表

Axure项目符号类型比较单一,只有一种项目符号样式,如果想做出多种样式类型,可以下载一些小图标结合文本部件进行制作。

STEP 01 拖动一个文本部件到页面编辑区域,输入文字并进行适当换行。

STEP 02 点击工具栏上项目符号列表图标或部件样式面板中的“项目符号”设置。

借鉴竞品网站的字体及行间距设置

我们做产品的时候,经常会分析同类型的产品。通过查看同类型的网站,可以参考学习字体的颜色、字号、行间距等设计,使我们的原型更加高保真。

STEP 01 在Chrome浏览器中选中需要查看的界面元素,如标题,单击鼠标右键,点击“审查元素”。

STEP 02 通过前端样式,查看标题的字号、字体类型和颜色。

采用类似的方法,还可以获得缩略图的尺寸等。