如何规范设计产品

软件产品项目工作流程

一、总体设计

对于页面原型设计，我们可以分解为多层

• 底层：数据层、逻辑层（以文字形式描述逻辑）
• 内容：各种功能汇总
• 导航：将内容进行整理
• 权限：对用户访问数据、导航进行限制
• 全屏展示：按照产品设计，根据导航，展示对应内容（整体页面）
• 插件：页面点击、跳转等交互

• 弹窗：页面信息反馈，与用户之间的交互

  
  
  

二、页面样式

1、幕布尺寸

确定当前产品页面涉及的设备，当前主流设备的屏幕参数。
我一般采用：
1）尺寸：（PC页面）
页面宽度统一使用1024px，侧边导航宽度的范围计算公式：200+8n，我们统一使用200px。
2）适配（PC页面）
统一采用自适应界面-撑满式，右边内容区宽度则随浏览器宽度而改变。当内容区宽度不足 1366x 时，浏览器底部出现滚动条。

3. 间距（PC页面）
   根据页面信息结构和内容层级，利用大、中、小三种间距来实现信息之间的亲密度区分；在 Ant Design 中，主要有以下三种间距：

2、页面布局

同一个产品，布局尽量保证统一。
具体可参考：
常见的几种WEB网页布局结构(PC端)

3、分页

1. 分页样式一：滚动翻页

   
   
   

2. 分页样式二：常规分页

   
   
   

3. 分页样式三：常规分页，用于页数较小的场景

   
   
   

三、页面加载样式

1. 菊花样式

   
   
   

2. 进度条样式

   
   
   

四、Tab

Tab分三类
1）顶部tab
2）底部Tab
3）侧边栏Tab，其中侧边栏TaB分左侧边栏、右侧边栏

五、弹框样式

1. Toast
2. alert 警示提示
3. dialog对话框
4. Notification通知提醒框
5. tooltip 文字提示
   具体可参考:
   页面中的几种弹框样式

六、文案规范

1. 当数据为空时，可使用『- -』来表示暂无数据。
2. 时间格式：年月日之间用半角短横线『-』，时分秒之间使用半角冒号『:』 表示
   日期：yyyy-mm-dd
   时分：hh:mm
   时分秒：hh:mm:ss
3. 范围之间使用半角波浪线『~』，并在其前后加上间隔以示区分。
4. 金额格式：1,000,000.00 界面显示2位小数。
5. 数量格式：1,000,000.00 界面显示2位小数。
6. 百分比格式：90.0%。
7. 使用『你』代替『您』，以拉近与用户之间的距离。
8. 使用『新建』而不用『新增』。
9. 使用『编辑』代替『修改』。
10. 使用『其他』代替『其它』。
11. 使用『此』代替『该』。
12. 使用『抱歉』而不用『对不起』，如果是我们系统造成的结果，可以使用『抱1.歉』，如果是用户自己造成的结果，则不使用这类词。
13. 使用『登录』而不用『登陆』，登录是登记记录用户输入信息的意思，切勿用成『着陆』的陆。
14. 专有名词需使用原有格式，如：iOS、iPhone、iPad。
15. 全英文的标题、标签、菜单项等需遵循英文句式中首字母大写的规范。

移动端（某种情况）

1. 时间显示规则（参考）
   1）刚刚
   2）2小时前
   3）4小时前
   4）24小时前
   5）2019/10/25
2. 数字显示（参考）
   1）1,000以下，显示具体数字
   2）1,000－10,000 显示 1K、9.9K字样
   3）10,000 显示 1W、9.9W、999W

七、术语参考

八、目录规范