Web后台产品的详情页规范

Web后台详情页主要由字段名和字段值组成,根据需求也会包含图片,链接,附件等元素;大家可以看看作者使用规范画出来的详情页https://eda513.axshare.com是否比较简洁整齐。

一、实现规范

对于完全由字段名和字段值组成的详情页,建议采用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原型设计和产品规范。

本文作者 @浪子 。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部