产品原型设计规范V1.0

目前的原型工具主要包括Axure、Justinmind。以下内容仅适用这两款工具。

原型组成

原型由以下模板页面组成，以便梳理整个项目流程，方便后续设计、开发工作进行。

  1. 需求清单：使用Excle记录项目需求情况，参见模板《产品记录》，产品记录提供商务需求记录、客户沟通需求记录、后续需求变更记录、研发阶段修改记录，展示内容形式类似WIKI;
  2. 用户画像：此项可选，旨在帮助梳理项目可行性方案；
  3. 业务流程：使用Mindjet Mindmanager 梳理业务、功能、操作等流程，方便开发工作进行；
  4. 按平台分类：iOS/Android（代码：A）、Web（代码：W）、Wechat/WAP(代码:W-Justinmind中使用;代码:We/WA-Axure中使用)、Server（代码：S）,根据平台建立文件夹，统一项目输出文件；针对高保真原型，采用Justinmind绘制时，创建PC端、移动端两个文件；文件夹包含：产品结构图，产品模板页；

原型绘制

原型绘制要遵循以下内容方面的设计规则：

  1. sitemap 导航
  2. widgets 组件
  3. master 母版
  4. label 控件名
  5. interaction 交互
  6. annotation 注释
  7. location and size 位置和大小

导航

涉及产品结构图，产品页面命名，多级页面命名，页面状态处理等规则描述。

  • 产品结构图：以后项目统一采用Mindjet Mindmanager做本地管理，不再使用百度脑图做在线管理；本地管理保证文件安全性，且支持多种文件格式导出；在线管理容易造成文件排列混乱，大文件稳定性较差；
  • 产品页面命名：一级页面采用代码+编号+TAP标签命名；二级及以下页面采用代码+编码+页面内容+交互动作（可选）命名；
  • 页面状态处理：局部交互采用弹层；交互内容较多采用新页面；

组件

组件统一化包括：Axure自定义组件库、UE线框模板V1.5、组件命名规则；Justinmind自带组件库、UI KIT;第三方文件（头像图标、社交图标）。

  • Axure自定义组件库：cold library、font awesome v4.0.1、ios8-font icon
  • UE线框模板1.5：提供原型组成模板页面及导航；
  • 组件命名规则：内容命名法，适用于dynamic panel 动态面板、group 组合；功能命名法，适用于dynamic panel state 层、checkbox 复选框、radio button 选择框；组件命名存在冲突时，建议添加产品代码及所在位置信息；
  • Justinmind自带组件库：经过代码替换色值的办法修改的组件库，统一采用灰白风格；
  • UI KIT：使用现有UI素材;
  • 第三方文件（头像图标、社交图标）：进行内容填充时使用，建议以后统一使用默认状态；

母版

针对特定对象规范制作方法。
一般需要制作母版的对象有以下几种：

  • 公共元素：页头，页脚，导航；
  • 重复元素：列表项，占位符；

遵循以下制作原则：

  • 最小化切分原则：保证模板化后不影响其它元素，且自身元素能够重复利用；
  • 内部交互原则：整体作为模板，需要包含交互状态；
  • 遵循设计规范：iOS人机规范、material design设计规范；

需要注意的问题：

  • 层级关系：模板化会遮挡底层元素，注意合理调整层级关系；
  • 固定位置：特定对象会根据窗口状态判断位置，一般涉及悬浮状态，固定屏幕底部，固定页面底部等；
  • 易于维护：模板内元素应易于查找和编辑；

按照以下规则命名母版：

  • 全局母版：无代号；
  • 平台母版：平台代码+功能名称；
  • 局部母版：平台代码+功能名称+母版位置；

控件名

仅在需要对控件进行区分时进行命名，非必要时无需命名。
命名包含：平台代码、功能名称、类型名称、位置信息；解释如下：

  • 平台代码：iOS/Android（代码：A）、Web（代码：W）、Wechat/WAP(代码:W-Justinmind中使用;代码:We/WA-Axure中使用)、Server（代码：S）；
  • 功能名称：根据需求而定；
  • 类型名称：bottom 按钮、link 链接、image 图片、text 文字、input 输入框、text area 输入区域、bg 背景；

交互

统一的交互是为注释准备，以便通过注释传递主要信息。交互包含以下信息：

  • 事件：点击、滑动、悬浮、进入、离开、加载、滚动；
  • 判断：全局参数、状态接口（0-否，1-是）；
  • 动效：blind 百叶窗、bounce 弹跳、clip 收缩、drop 掉落、explode 爆炸、fade 淡入淡出、fold 折叠、highlight 高亮、puff 放大、pulsate 跳动、shake 震动、slide 滑动；
  • 过渡：slide right/left 右滑/左滑、fade 淡入淡出、flip horizontal 水平翻转、flip、vertical 垂直翻转、turn 传送、flow 流动、pop 出现、slide and fade 滑动并消失、slide up/down 上滑/下滑；
  • 参考：axure函数大全、Justinmind函数大全，使用函数形成高保真原型；

注释

使用文字描述+标记符号的方式传达产品需求。

注释如何描述？

  • 阐述功能；
  • 描述交互：操作+内容（限制，范围值，极限值）+状态（一般状态，特殊状态，误操作）；
  • 描述效果：反馈+跳转；
  • 以下可选：关联（与此有关的内容）、测试（测试方法）、其它；

注释采用何种样式？

Axure中使用水滴+圆形符号进行标注；
Justinmind中使用圆形符号进行标注，针对移动端，标注符号建议放在对象元素上，注释内容放在机型模板右侧，移交时转为Web模式；

位置和大小

原型界面尺寸的选择：移动端使用iPhone6尺寸，PC端使用1280宽度；
关于界面布局，建议参考以下规范：

  • iOS设计规范、Material Design设计规范、Bootstrap框架规范
  • 其它参考：WeUI、AntDesign

制作要求

  • 文件采用项目名称进行命名；
  • 文件通过坚果云进行版本管理；
  • 如需协同，建议使用Axure+SVN配置环境；
  • 导出文件采用项目名称+平台名称+确认状态+版本号进行命名；
  • 导出文件统一同步至Github、七牛云，通过七牛云进行在线预览；

望按照以上规范进行设计工作，提升团队效率。