原型规范·axure·产品经理思维导图模板

移动端

web页面

尺寸

分支主题

1200px/1280px/1400px

Web网页端产品，是放在浏览器这个容器里面的。

布局

分支主题

Web后台产品，建议遵循左T布局来画原型

Web用户产品，建议遵循国字布局来画原型

列表页

查看

行

默认每页行数

默认每屏行数

每页行数多于每屏行数时的处理方式

固定表头

表格的竖向滚动条

列

排序

固定列

列宽

表头不能换行，列宽应至少大于表头。

列内容的长度固定时，如手机号（11位数字）等，列宽应大于该固定宽度。

列内容的长度不固定时，应考虑大多数情况下的长度情况。如个性签名，我们会允许10~50个字符，但经过数据分析发现，大多数个性签名的长度是在20以内的，我们可以设定列宽为20，从而保证大多数情况的完整显示。

数据截断

末尾加……鼠标移入时在附近显示浮层显示完整内容。

列隐藏

分页

排序

页面载入默认排序

时间降序

金额降序

重要性降序

排序切换规则

对齐方式

文本左对齐

数值右对齐

查找

查找范围

匹配方式

详情入口

表格有时候会承担详情入口的作用，通过点击进入新的页面查看详情数据。

以具有区别性的字段为链接（视觉上要有所不同），如订单号。

在表格内设置单独的“查看”入口。

操作

单项操作

如删除、提交、审核、删除等

操作比较多时，需将多余的操作折叠为‘更多’，表面上只保留1到2个常用操作。

编辑

鼠标移入编辑项时显示编辑样式

双击编辑

保存方式

勾选

全选

按查询条件选择

跨页选择

勾选状态的保持

按钮

在表格顶部放置按钮，执行常用操作，一般优先放在左侧

如果按钮较多，需要根据按钮类型，将具有相同功能的按钮折叠组合。

有一些按钮是配合着勾选进行批量操作的，当没有勾选项时，需要禁用该按钮。

导出数据

文件格式

文件名

通常使用【页面】【表名】【时间】等字段来确定表名。

模板

导出全部列的数据

导出耗时

导出的数据量较大

点击导出数据后，变为导出中，以告知用户数据正在导出

表单页

表单是数据录入和信息提交的通用形式，web端和移动端都很常见，通常由标签、输入项、提交按钮等多种元素构成。

业务后台的表单往往呈现出字段多、类型杂、专业性强的特点

方便用户整体查看

分步骤

常见：重置密码

分组

同一步骤内的具有共性的字段，可归纳到一个组里。组与组之间通过分隔线区分，组标题能体现该组的内容。

排版

用户的视线路径是从上到下的。为了易读和美观，需要标签右对齐、输入区宽度统一。

方便用户单项查看、填写、检查

文本标签

输入提醒

良好的默认值

大多数情况符合才能用默认值

有些需要用户谨慎输入的内容不能用默认值

结构化格式

分支主题

选填/必填

通常采用加*号的方式表示必填，标签后加可选的方式表示选填。

暗提示

分支主题

校验反馈

校验内容：是否为空、类型格式是否正确、是否符合业务逻辑

校验方法：前端校验一般使用正则表达式，后端校验需要考虑业务逻辑

校验的触发：前端校验一般使用即时校验和焦点离开时校验，后端校验一般在提交后。

反馈类型：正确、错误、警告（有风险点但可通过校验）

方便用户整体检查和提交

提交后进行后端校验，不符合业务逻辑的内容需要有反馈内容，便于用户定位修改。

判断是否已填充所有必填项。如果没有则toast提示”请补充所有必填项”并且高亮对应的组件边框。

判断是否满足所有约束条件。约束条件通常是在对应组件失去焦点的时候进行处理，也有部分约束条件是提交表单的时候才会进行处理。

判断文件大小是否满足条件。如果超出则toast提示“文件已超过最大限制”。

判断文件是否上传成功。如果文件比较大，上传需要一定时间。如果超时未上传成功，则需要toast提示“文件太大已超时，请重新上传！”

判断调用接口进行查重。如果存在则需要toast提示“该信息已存在，请修改后重试！”

“保存成功”

明确跳转页面

详情页

页面信息布局

页面操作

首页

搜索页

页面规范

布局规范

分支主题

文档规范

文档版本

分支主题

项目背景

立项交代

结构（框架）信息图

分支主题

业务流程图

分支主题

其他内容

全局说明

其他业务规则说明

授权、更新

短信模板

菜单对应页面

注意菜单的层级关系

同一页面的不同角色可以按角色用文件夹归集

页面较多的时候注意检查按钮跳转逻辑

交互页面

视觉设计

颜色：规定使用的调色板，包括主色、辅助色和中性色等。

字体和排版：规定使用的字体、字体大小、字间距、行间距以及字体样式（粗体、斜体等）。

图标和图形：定义图标的样式、大小和使用场景。

图像：图像的格式、分辨率、大小和使用规范。

交互设计

导航：导航的布局和样式，包括菜单、面包屑和侧边栏等。

链接和按钮：链接和按钮的样式、颜色、大小以及交互效果（悬停、点击等）。

表单和输入控件：表单的设计规范，包括输入框、下拉菜单、单选按钮和复选框等。

动画和过渡：动画的类型、持续时间和触发条件等。

交互说明

页面说明

数据说明

重要说明可以用备注的方式

部件规范

基础部件

元件事件、动作、元件交互样式

显示与隐藏、条件与结果

全局变量与局部变量

矩形、图片、热区

单选按钮与复选框

文本框、列表框、内联框架

ex:无边框效果的实现、输入框提示文字、提交按钮（密码输入文本框回车执行提交及反馈）、文本框右键设置编辑最大长度、输入类型等

进阶部件

元件属性和窗口属性的使用

固定到浏览器

鼠标指针属性的使用

动态面板的使用

中继器的使用

按钮规范

定义：按钮是一个通过单击来触发行为的组件，是最常使用的组件之一。

按钮大小

按钮宽度

由文字宽度决定

由容器决定

按钮高度

大、中、小，按钮高度分别对应： 40px、32px、24px

B端的后台一般优先使用中尺寸的按钮高度，因为大尺寸的按钮过高，提升了屏占比。

按钮状态

普通、悬浮、点击、激活、不可用、加载中

使用ant design组件，产品好开发也好。

按钮样式

分支主题

填充按钮

填充按钮是主要按钮，视觉上非常明显，常常用来强调某个行动点。

常常使用在“完成”、“确定”类操作上。

当两个按钮同时出现，并表示抉择的时候。如果有引导的需求。可以强化其中一个，弱化另外一个按钮。

线框按钮

文字按钮

常用于次要操作

文字按钮所占的高度小于“轮廓按钮”和“填充按钮”，在同样的屏幕大小下，使用文字按钮能显示更多的行数，这么做提升了用户的浏览效率。

图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。

需要在较小的空间内展示尽量多的按钮。

可以用不同样式设计满足不同状态展示

开关按钮

直观展示了当前状态

通常会设置默认值

只有两种状态，且不能为空

占用较多页面空间，美感欠佳

注意不要用否定意义

文字按钮

文字按钮所占的高度小于“轮廓按钮”和“填充按钮”，在同样的屏幕大小下，使用文字按钮能显示更多的行数，这么做提升了用户的浏览效率。

轮廓按钮

在背景丰富的图片或者视频上，为减少干扰同时保持一定的视觉吸引力也会用轮廓按钮。

数据录入规范

输入框、数字输入框

选择器

树选择

级联选择

日期选择框

时间选择器

单选框、复选框

开关

评分

滑动输入条

上传

穿梭框

底部工具栏

搜索框

为什么要规范原型

沟通一致：

规范化的原型标准可以确保团队成员之间的沟通保持一致。它帮助产品经理、设计师、开发人员和其他利益相关方使用共同的语言来讨论产品需求、功能和用户体验。

提高效率：

有了标准，团队可以在原型设计过程中减少混乱和误解，避免重复工作。它提供了一个框架，使团队能够更快、更高效地创建原型。

确保质量：

规范的原型标准有助于保持产品设计和开发过程中的质量一致。它可以确保在设计和开发阶段不会遗漏关键特性或流程，并且可以帮助发现和解决问题。

促进协作：

当团队使用相同的原型标准时，他们可以更容易地协作和分享想法。这有助于激发创造力，并确保团队在设计和开发过程中保持一致的愿景。

支持版本控制和迭代：

规范化的原型标准使得版本控制和迭代更加容易。团队可以跟踪原型的变化，确保在产品开发过程中不会丢失关键信息。

平台

web网页

后台管理系统

前台网页

web客户端（海螺）

移动端

iOS

平板电脑

Android

PDA

思路

目的

满足功能要求

开工

原型界面设计

按思维导图的产品规划，先搭框架，制作主页面菜单

菜单支持多个级别，各页面的层级关系需要明确

设置母版

对于产品中的通用性功能、模块、建立统一的母版组件

逻辑交互说明

主要是面向开发人员和UI设计人员阐述

数据逻辑

操作交互

交互用例

给主要交互控件设置交互用例

原理

设计四大原则

亲密性

彼此相关的项应当靠近，归组在一起。如果多项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，提供清晰的结构。

对齐

任何东西都不能在页面上随意安放，每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰，精巧而且清爽的外观；

字段名对齐规范

字段值对齐规范

移动端：两端对齐

重复

设计中视觉要素要在整个产品中重复出现。可以重复颜色，形状，空间，线宽，字体，大小和图片。这样可以增加条理性和统一性。

对比

基本思想是要避免页面上的元素太过相似。如果元素（字体、颜色、大小，线宽，形状，空间等）不相同，那么就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素。

行业标杆

为什么要用组件

提高效率

大量中后台项目实践总结出的设计规范

提供完善的设计指引、最佳实践、设计资源和设计工具，能够帮助设计者快速产出设计方案

启发设计思路

Ant Design

https://ant.design/index-cn/

主题样式

色彩布局字体图标暗黑模式阴影

组件

开发友好

WeUI

https://weui.io/

https://developers.weixin.qq.com/miniprogram/design/

分支主题

自由主题

页面类型