产品设计规范

产品设计规范大纲整理

一、前言

• 规范说明
  • 设计尺寸：iphone7（375*667）
  • 切图格式：png
• 设计原则
  • 简化流程，降低用户学习成本
  • 轻量化、扁平化设计理念
  • 情感化设计体现、重视品牌传播

二、命名

• 命名规范
  • 模块_类别_功能_状态.png
  • 例子
    • 英文：nav_button_search_default@2x.png
    • 中文：导航_按钮_搜索_默认@2x.png

三、颜色

• 颜色规范
  • 主色：导航栏颜色
  • 点缀色：用于各图标、按钮等场景使用
  • 灰色系：标题文字、正文文字、辅助性文字、辅助线颜色

四、文字

• 字体
  • iOS使用字体：系统默认平方
  • android使用字体：系统默认如微软雅黑
• 字号
  • 标题文字——18pt
  • 列表标题——16pt
  • 标题正文——14pt
  • 辅助性文字——12pt
  • 底部导航图标文字——10pt

五、图标

• 桌面
  • 桌面icon大小根据每个平台尺寸适配
• 功能
  • 通过图标尺寸有
    • 16*16px
    • 24*24px
    • 48*48px
    • 64*64px
    • 100*100px
• 指示
  • 指示性图标
    • 关闭
    • 左右方向键
    • 等待中、已完成

六、控件

• 导航栏
• 标签栏
  • 高度50px
• 按钮
• 列表
• 弹窗

七、互动状态

• 图标
  • 正常Normal
  • 禁用Disable
  • 点击Pressed
  • 选中Selected
  • 已点击Clicked
• 按钮
  • 正常Normal
  • 禁用Disable
  • 点击Pressed
  • 选中Selected
  • 已点击Clicked