原型规范·axure·产品经理
2024-04-29 10:51:27 0 举报AI智能生成
登录查看完整内容
产品经理 axure原型规范
作者其他创作
大纲/内容
移动端
分支主题
Web网页端产品，是放在浏览器这个容器里面的。
1200px/1280px/1400px
尺寸
Web后台产品，建议遵循左T布局来画原型
Web用户产品，建议遵循国字布局来画原型
布局
默认每页行数
默认每屏行数
固定表头
表格的竖向滚动条
每页行数多于每屏行数时的处理方式
行
排序
固定列
表头不能换行，列宽应至少大于表头。
列内容的长度固定时，如手机号（11位数字）等，列宽应大于该固定宽度。
列内容的长度不固定时，应考虑大多数情况下的长度情况。如个性签名，我们会允许10~50个字符，但经过数据分析发现，大多数个性签名的长度是在20以内的，我们可以设定列宽为20，从而保证大多数情况的完整显示。
列宽
末尾加……鼠标移入时在附近显示浮层显示完整内容。
数据截断
列隐藏
列
分页
时间降序
金额降序
重要性降序
页面载入默认排序
排序切换规则
文本左对齐
数值右对齐
对齐方式
查看
查找范围
匹配方式
查找
以具有区别性的字段为链接（视觉上要有所不同），如订单号。
在表格内设置单独的“查看”入口。
表格有时候会承担详情入口的作用，通过点击进入新的页面查看详情数据。
详情入口
操作比较多时，需将多余的操作折叠为‘更多’，表面上只保留1到2个常用操作。
如删除、提交、审核、删除等
单项操作
操作
鼠标移入编辑项时显示编辑样式
双击编辑
保存方式
编辑
全选
按查询条件选择
勾选状态的保持
跨页选择
勾选
在表格顶部放置按钮，执行常用操作，一般优先放在左侧
如果按钮较多，需要根据按钮类型，将具有相同功能的按钮折叠组合。
有一些按钮是配合着勾选进行批量操作的，当没有勾选项时，需要禁用该按钮。
按钮
文件格式
通常使用【页面】【表名】【时间】等字段来确定表名。
文件名
导出全部列的数据
模板
点击导出数据后，变为导出中，以告知用户数据正在导出
导出的数据量较大
导出耗时
导出数据
列表页
表单是数据录入和信息提交的通用形式，web端和移动端都很常见，通常由标签、输入项、提交按钮等多种元素构成。
业务后台的表单往往呈现出字段多、类型杂、专业性强的特点
常见：重置密码
分步骤
同一步骤内的具有共性的字段，可归纳到一个组里。组与组之间通过分隔线区分，组标题能体现该组的内容。
分组
用户的视线路径是从上到下的。为了易读和美观，需要标签右对齐、输入区宽度统一。
排版
方便用户整体查看
文本标签
输入提醒
大多数情况符合才能用默认值
有些需要用户谨慎输入的内容不能用默认值
良好的默认值
结构化格式
通常采用加*号的方式表示必填，标签后加可选的方式表示选填。
选填/必填
暗提示
校验内容：是否为空、类型格式是否正确、是否符合业务逻辑
校验方法：前端校验一般使用正则表达式，后端校验需要考虑业务逻辑
校验的触发：前端校验一般使用即时校验和焦点离开时校验，后端校验一般在提交后。
反馈类型：正确、错误、警告（有风险点但可通过校验）
校验反馈
方便用户单项查看、填写、检查
判断是否已填充所有必填项。如果没有则toast提示”请补充所有必填项”并且高亮对应的组件边框。
判断是否满足所有约束条件。约束条件通常是在对应组件失去焦点的时候进行处理，也有部分约束条件是提交表单的时候才会进行处理。
判断文件大小是否满足条件。如果超出则toast提示“文件已超过最大限制”。
判断文件是否上传成功。如果文件比较大，上传需要一定时间。如果超时未上传成功，则需要toast提示“文件太大已超时，请重新上传！”
判断调用接口进行查重。如果存在则需要toast提示“该信息已存在，请修改后重试！”
“保存成功”
明确跳转页面
提交后进行后端校验，不符合业务逻辑的内容需要有反馈内容，便于用户定位修改。
方便用户整体检查和提交
表单页
页面信息布局
页面操作
详情页
首页
搜索页
web页面
文档版本
立项交代
项目背景
结构（框架）信息图
业务流程图
全局说明
其他业务规则说明
授权、更新
短信模板
其他内容
文档规范
注意菜单的层级关系
同一页面的不同角色可以按角色用文件夹归集
页面较多的时候注意检查按钮跳转逻辑
菜单对应页面
目录
颜色：规定使用的调色板，包括主色、辅助色和中性色等。
字体和排版：规定使用的字体、字体大小、字间距、行间距以及字体样式（粗体、斜体等）。
图标和图形：定义图标的样式、大小和使用场景。
图像：图像的格式、分辨率、大小和使用规范。
视觉设计
导航：导航的布局和样式，包括菜单、面包屑和侧边栏等。
链接和按钮：链接和按钮的样式、颜色、大小以及交互效果（悬停、点击等）。
表单和输入控件：表单的设计规范，包括输入框、下拉菜单、单选按钮和复选框等。
动画和过渡：动画的类型、持续时间和触发条件等。
交互设计
交互页面
页面说明
数据说明
重要说明 可以用备注的方式
交互说明
布局规范
元件事件、动作、元件交互样式
显示与隐藏、条件与结果
全局变量与局部变量
矩形、图片、热区
单选按钮与复选框
ex:无边框效果的实现、输入框提示文字、提交按钮（密码输入文本框回车执行提交及反馈）、文本框右键设置编辑最大长度、输入类型等
文本框、列表框、内联框架
基础部件
固定到浏览器
元件属性和窗口属性的使用
鼠标指针属性的使用
动态面板的使用
中继器的使用
进阶部件
部件规范
定义：按钮是一个通过单击来触发行为的组件，是最常使用的组件之一。
由文字宽度决定
由容器决定
按钮宽度
大、中、小，按钮高度分别对应：40px、32px、24px
B端的后台一般优先使用中尺寸的按钮高度，因为大尺寸的按钮过高，提升了屏占比。
按钮高度
按钮大小
使用ant design组件，产品好开发也好。
普通、悬浮、点击、激活、不可用、加载中
按钮状态
填充按钮是主要按钮，视觉上非常明显，常常用来强调某个行动点。
常常使用在“完成”、“确定”类操作上。
当两个按钮同时出现，并表示抉择的时候。如果有引导的需求。可以强化其中一个，弱化另外一个按钮。
填充按钮
线框按钮
常用于次要操作
文字按钮所占的高度小于“轮廓按钮”和“填充按钮”，在同样的屏幕大小下，使用文字按钮能显示更多的行数，这么做提升了用户的浏览效率。
文字按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。
需要在较小的空间内展示尽量多的按钮。
可以用不同样式设计满足不同状态展示
图标按钮
通常会设置默认值
只有两种状态，且不能为空
占用较多页面空间，美感欠佳
直观展示了当前状态
注意不要用否定意义
开关按钮
在背景丰富的图片或者视频上，为减少干扰同时保持一定的视觉吸引力也会用轮廓按钮。
轮廓按钮
按钮样式
按钮规范
输入框、数字输入框
选择器
树选择
级联选择
日期选择框
时间选择器
单选框、复选框
开关
评分
滑动输入条
上传
穿梭框
底部工具栏
搜索框
数据录入规范
页面规范
规范化的原型标准可以确保团队成员之间的沟通保持一致。它帮助产品经理、设计师、开发人员和其他利益相关方使用共同的语言来讨论产品需求、功能和用户体验。
沟通一致：
有了标准，团队可以在原型设计过程中减少混乱和误解，避免重复工作。它提供了一个框架，使团队能够更快、更高效地创建原型。
提高效率：
规范的原型标准有助于保持产品设计和开发过程中的质量一致。它可以确保在设计和开发阶段不会遗漏关键特性或流程，并且可以帮助发现和解决问题。
确保质量：
当团队使用相同的原型标准时，他们可以更容易地协作和分享想法。这有助于激发创造力，并确保团队在设计和开发过程中保持一致的愿景。
促进协作：
规范化的原型标准使得版本控制和迭代更加容易。团队可以跟踪原型的变化，确保在产品开发过程中不会丢失关键信息。
支持版本控制和迭代：
为什么要规范原型
后台管理系统
前台网页
web网页
web客户端（海螺）
平板电脑
iOS
PDA
Android
平台
满足功能要求
目的
菜单支持多个级别，各页面的层级关系需要明确
按思维导图的产品规划，先搭框架，制作主页面菜单
对于产品中的通用性功能、模块、建立统一的母版组件
设置母版
原型界面设计
主要是面向开发人员和UI设计人员阐述
数据逻辑
操作交互
逻辑交互说明
给主要交互控件设置交互用例
交互用例
开工
彼此相关的项应当靠近，归组在一起。如果多项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，提供清晰的结构。
亲密性
任何东西都不能在页面上随意安放，每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰，精巧而且清爽的外观；
字段名对齐规范
字段值对齐规范
移动端：两端对齐
对齐
设计中视觉要素要在整个产品中重复出现。可以重复颜色，形状，空间，线宽，字体，大小和图片。这样可以增加条理性和统一性。
重复
基本思想是要避免页面上的元素太过相似。如果元素（字体、颜色、大小，线宽，形状，空间等）不相同，那么就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素。
对比
设计四大原则
原理
大量中后台项目实践总结出的设计规范
提供完善的设计指引、最佳实践、设计资源和设计工具，能够帮助设计者快速产出设计方案
提高效率
启发设计思路
为什么要用组件
https://ant.design/index-cn/
色彩布局字体图标暗黑模式阴影
主题样式
开发友好
组件
Ant Design
https://weui.io/
https://developers.weixin.qq.com/miniprogram/design/
WeUI
行业标杆
思路
自由主题
页面类型
原型规范
0 条评论
回复 删除
下一页
