【原型规范】

前言

低保真原型绘制规范

---

尺寸规范

颜色规范

通过背景、引导字体深浅，突出要输入内容、操作项较高权重

一级标题 18px #333 加粗
二级标题 16px #666
正文 12px #666
说明性文字 10px #ccc

页面命名规范

1. 页面分开展示，父子页面区分清楚；
2. 页面命名一般采用页面标题，便于快速定位

注册页面设计

1. 用户体验与产品折中方案
   例如：注册流程
   a：手机号＋验证码
   b：手机号 + 验证码 + 密码
   c：手机号 + 验证码 + 密码 + 确认密码
   a、b比较，a没有密码输入操作步骤，用户体验较好；b中可实现使用密码登录用户分流，减少产品短信服务成本（较理想）
   ，c中强化密码记忆，用户体验较差
2. 用类似”登录即表示您同意产品条例“，替代让用户勾选同意
   避免用户不太关心操作

页面设计规范

1. 操作能让用户选择，不让用户填
2. “我的”个人菜单页面尽量展示多的初始功能，用户反馈、客服等具体功能实现跳转登录时，考虑产品改进、用户转化等问题
3. 内容型列表：内容基本信息、内容作者信息、内容互动信息
   图文列表关注产品定位图片、文字权重，排列规则等
   
   视频列表横向模式一般定位较大制作成本（一般为知识传播性），纵向模式常见随手拍短视频
   4. 互动行为
   点赞是最简单的互动行为，分享是最想让用户做的事，这两个功能一般突出显示，如页面右下角位置易于操作；
   对于不常用的功能，如删除、举报等可以选择收纳在右上角多功能键中。

交互说明规范

交互说明撰写思路：

1. 先写页面有哪些功能模块，比如导航栏、列表等
2. 再每个模块写，看到了哪些数据(图文、音视频等)
3. 这些数据怎么来的，比如用户发布、系统白动生成等
4. 再写数据的显示格式，比如长度、行数、数量、有无等
5. 写完看到什么，再写能做什么，即有哪些操作，比如点击、输入、滑动等
6. 操作的反馈。比如跳转新页面、弹框提示、toast提示等
7. 操作的限制条件，比如不同角色、不同等级、是否登陆、网络状志等
8. 系统操作的反馈。比如输入错误等
   即看到了什么，能做什么
   

PRD 文档

产品介绍：

1. 产品简介
2. 版本说明
3. 交互自查表

产品原型：

1. 全局说明
   角色/功能权限
   

   加载方式
   

   全局弹层
   

   常用字段
   

   网络异常
   

   全局交互
   
   2. 前台原型
   3. 后台原型

产品架构：

1. 产品结构图（思维导图形式罗列产品界面）

2. 信息结构图（对数据库表的总结，非必须，可交由开发）
   

3. 页面流程图
   

4. 页面流程图（非必须，可在原型中体现）
   

版本记录：

1. 文档更新日志
   
2. 需求列表
3. 开发排期

非功能需求：

1. 埋点需求（页面打开率、按钮点击率等，需要记录，需做说明）
2. 性能需求（响应时间、并发数要求）
3. 兼容性需求（终端、浏览器等）

网站设计

1. 设计尺寸及版心
   
2. 导航结构
   
   导航设计要遵循以下原则:
   简单:每个网站都应该有尽可能简单的结构;
   清晰:导航的每项对用户而言，都应该是清楚的;
   一致:系统的导航页在每一页中都应该是相同的;
   用户最少的点击，最快地到达目的网页;
   APP导航:线性;
   PC导航:面包屑，非线性

3. 字体相关
   
   

4. 视觉顺序
   将网页标题、登录注册按钮、导航栏等重要的内容，放在用户很容易看到的地方，以减少用户寻找的时间;
   从左到右，从上到下，飞字型;

5. 跨平台相似性
   用户体验设计的重要标准:
   统一;（电脑、平板、手机、音乐播放器、智能手表)
   友好;
   易用;

6. 超链接处理
   

7. 控件设计
   能点击的按钮，需要给出操作提示( hover效果或点击效果);
   不能点击的按钮，不要做成按钮的样式，更不要加各种效果;
   页面中相同级别的按钮，保持设计样式统一;

8. 注意事项
   页面加载速度:
           当用户在等待内容加载时，他们很可能会变的沮丧;如果加载速度很慢，用户很可能会离开这个网站;解决方案–懒加载、预加载;
   返回按钮:
           新打开的页面中尽量有返回按钮（或者面包屑导航）如果一定要跳转到独立的页面，设置为在新窗口打开;
   慎用促销、广告:
           促销和广告会抢夺用户的注意力，影响他们访问网站;
   慎用滚动劫持:
           用户最不喜欢的设计之一，用户有权决定自己浏览的网页和APP的位置;慎用自动播放音视频∶需要用打开的音视频文件，设置为非自动播放的形式;
   文字配色∶
           不要使用繁重的颜色背景，配方方案要协调、易接受;
           不要使用闪烁的文字;

用户端/自媒体端

即前台/后台

后台作用：优化手机端发布图文体验的 PC端发布环境
以传智新闻自媒体端后台为例：
        内容管理
        文章的发布、编辑、删除、查看，一些常用素材管理等
        粉丝管理
        粉丝的概况、粉丝列表和粉丝的画像等进行管理
        评论管理
        对评论内容的编辑、回复及常见状态的操作

工作会议、产出文件介绍：