编辑导语：Web靠山产物的详情页凡是是表单页的查察结果，PM常常碰着，那么画它的时候遵循哪些常见类型呢？本篇文章作者具体先容了Web靠山产物的详情页类型，我们一起来看一下。

Web靠山详情页主要由字段名和字段值构成，按照需求也会包括图片，链接，附件等元素；各人可以看看作者利用类型画出来的详情页是否较量简捷整齐。

一、实现类型

对付完全由字段名和字段值构成的详情页，发起回收Axure的表格元件来画原型，简朴快速；结果如下图。

操纵步调：从默认元件库中拖动“表格”到事情区符合位置，然后之一列填充相应的字段名，第二列填写相应的字段值，最后删除多余的第三列即可。

假如详情页尚有图片、链接、附件等元素。发起回收Axure的文本元件来画原型，适应性较量强；结果如下图。

操纵步调：先画字段名，从默认元件库中拖动“文本标签”到事情区符合位置然后双击输入名称；再画字段名，从默认元件库中拖动“文本标签”到事情区符合位置然后双击输入名称。

留意：字段值有时候需要选择图片/文字链接等其他Axure元件。

二、间距类型

字段间距需要保持一致(可能担保相邻字段的纵坐标差值)，这样整体的显示结果会较量好。

假如字段回收默认的文本元件，发起字段间距回收10px。具体步调详见作者旧文 Axure如何调解线框图的对齐细节。

操纵步调：按照需求拖动相应的字段值，Axure自动显示相邻间距，然后逐步调解到符合的间距；可能本身按照第1个字段值的Y坐标+间距，从而得出第二个字段值的Y坐标。

三、对齐类型 1. 字段名对齐类型

字段名有长有短，发起节制在3~6字以内，这样的展示结果会较量好。

由于有多个字段，所以需要遵循相应的对齐类型，凡是是左侧对齐，有时候也会选择右侧对齐，可是居中对齐是不符合的。

字段名左对齐结果：

操纵步调：按住Ctrl同时选择所有的字段值然后点击常用东西栏的“左侧对齐”按钮，然后再修改X坐标到符合位置。

字段名右对齐结果：

操纵步调：按住Ctrl同时选择所有的字段值然后点击常用东西栏的“右侧对齐”按钮，然后再修改X坐标到符合位置。

2. 字段值对齐类型

字段值有长有短，别的字数无法节制在必然范畴内，所以不适合回收右侧对齐类型，只能回收左侧对齐类型；展示结果详见上面2张图。

给各人看一下右侧对齐的后面案例结果，相信有必然审美的PM都不会如此设计。

三、链接类型

Web详情页的凡是有文字链接、图片链接、附件链接、视频链接；他们需要遵循差异的交互类型。

1. 文字链接

文字链接发起利用蓝色字体，悬停显示下划线。

操纵步调：点击该文本链接，配置鼠标单击时事件，添加行动“打开链接”，然后选择打开在“通过新标签页打开”(有时候也回收原标签页打开)，然后链接到相应的页面。

别的需要在交互样式——鼠标悬停的样式，点击勾选“下划线”。

2. 附件链接

附件链接发起利用图标+蓝色文字暗示，点击附件链接自动下载到当地。

操纵步调：点击该文本链接，配置鼠标单击时事件，添加行动“打开链接”，链接到“链接到URL或文件路径”；然后输入相对的当地路径，最后选择在当前窗口打开，文章开头的原型地点中可以体验相应的交互进程。

相关文章：

Web靠山产物的表单页类型

Axure如何调解线框图的对齐细节

#专栏作家#

荡子，小我私家微信langzipm，公家号：荡子画原型(langzisay)。专注于APP原型设计和产物类型。