- Axure RP8产品原型设计快速上手指南
- 何广明
- 1016字
- 2020-06-28 05:34:30
2.2 文本部件
文本部件主要用于在页面上显示文字内容,是最常用的部件之一。其实从本质上讲,文本部件也是形状部件,但由于主要用于文字的输入和显示,在此对它单独进行介绍。
文本的类型
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0039_0001.jpg?sign=1739021085-cbLTjo40C3dxJr4HfC174dQuRE4td1hd-0-ad35d5e7501e808d9cc9f337a4619580)
Axure中针对文字的部件主要有三种类型。
❑ 标签:最常用的文字部件。
❑ 标题:格式化的标签(标题1、标题2、标题3)。
❑ 文本:文本标签的另外一种形式,通常可以理解成我们平时所说的段落即可。
在页面中添加文本
和其他设计类软件不同的是,Axure将文本这一工具也设计成了一个部件工具,同时还内置了几种不同的样式,所以要在页面编辑区域使用文字内容,直接拖动一个文本部件到页面编辑区域即可。双击可进入文本的编辑状态,修改为想要的文字内容。另外页面编辑区域也支持文本的直接复制和粘贴,可以将外部文字内容直接粘贴在页面编辑区域。
修改文本的样式属性
拖动文本到页面编辑区域后,点击检查器面板中的样式面板,可以对应修改文本的样式属性。
调整文本的坐标位置
页面编辑区域是一个以X轴和X轴构成的平面区域,文本部件被拖动到页面编辑区域就被赋予了一个坐标位置,可以手动修改文本的坐标,也可以直接单击选中文本部件拖动改变其坐标位置。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0040_0001.jpg?sign=1739021085-tOPyZSli8ig7uIhWgVVaOv29jZ35tKXl-0-90f91727d7a477b094d6f56f7b073de4)
文本的宽度与高度
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0040_0002.jpg?sign=1739021085-Xw5zQny1cdVNaZN24KlM6yXyuI0Tw4AP-0-0f8f5c224e2d57237936851824cd91c3)
文本的宽度和高度有自动和固定两种属性,默认为自动,文本部件会根据输入的文本内容的多少自动扩充大小;当手动修改了文本部件的宽度之后文本的属性就变为了固定,这时候无论输入多少内容,文本的宽度和高度都不发生改变。如果文本的宽度和高度过大,还可直接根据文本的宽度和高度自动调整。
调整文本的行间距
对于大段的段落文字,为了使排版更加美观,需要对其行间距进行调整。Axure中暂时还没有字间距和段间距。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0040_0003.jpg?sign=1739021085-G7YA8nx8HrBQfJfIn51ylQTfqRXKyGJC-0-45180a564ea7d8dd09f21ae4a286bda7)
文本的对齐方式
文本的对齐方式有常见的左、中、右对齐,还有上、中、下对齐,默认是左对齐和向上对齐。
制作项目符号列表
Axure项目符号类型比较单一,只有一种项目符号样式,如果想做出多种样式类型,可以下载一些小图标结合文本部件进行制作。
STEP 01 拖动一个文本部件到页面编辑区域,输入文字并进行适当换行。
STEP 02 点击工具栏上项目符号列表图标或部件样式面板中的“项目符号”设置。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0041_0001.jpg?sign=1739021085-hiWcvw1DVTVnI2dRh2gzlZvYE1v9Svhx-0-020d88af14d3968a6c598f740a6ab6af)
借鉴竞品网站的字体及行间距设置
我们做产品的时候,经常会分析同类型的产品。通过查看同类型的网站,可以参考学习字体的颜色、字号、行间距等设计,使我们的原型更加高保真。
STEP 01 在Chrome浏览器中选中需要查看的界面元素,如标题,单击鼠标右键,点击“审查元素”。
STEP 02 通过前端样式,查看标题的字号、字体类型和颜色。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0041_0002.jpg?sign=1739021085-Zv7UfDTlArdvv82IBCmB02n4sDNSJPtN-0-71e7b2e0ba7eb9a8497705f732e76ddb)
采用类似的方法,还可以获得缩略图的尺寸等。