本文多地图警告！有了电脑，格式会更友好。
前两篇文章梳理了简单的逻辑，并演示了如何针对QQ登录界面编写艺术文档。
下一步，它将自然到来。
我们就要写开发文档了。
开发文档就是给程序大爷看的。
你在文档里写，我要一个什么什么样的东西，这个东西有什么，怎么做。
文档有条理，逻辑清晰，程序大爷能够看懂，就达到目的了。
但这个文档包含哪些内容，怎么写呢？
我们还以QQ登陆界面为例，对应的开发文档，就是把第一篇的逻辑，和第二篇的美术，结合在一起，形成正式的文档，就行了。
以下整篇就是文档示例，灰字引用格式就是解说，和正文区分开——
《QQ登陆界面》开发文档
文档负责人：阿绿 完成时间：2018.6.27
开头要预留一个表格，写文档后续每次的修改记录，包含时间、内容、修改人，对应版本等
1. 概述
-
一个聊天软件登陆界面，用于登陆聊天账号
-
参考：QQ登陆界面
尽可能简洁地说明程序要做的是什么，并且提供竞品参考对象
2. 入口
-
QQ程序
走windows默认开启规则
-
QQ程序桌面等快捷方式
说明这个东西要在哪里打开，怎么打开，如果是游戏，还得加个开放条件之类的
3. 主界面
界面说明：
■ 上部分
1. 左上为白色企鹅剪影+QQ文字
2. 右上从左 到右，依次为设置入口、最小化按钮、关闭按钮，三者有选中状态
3. 蓝色区域显示动画，循环播放
■ 中部分
1. 上下区域交接中央，预留圆形头像显示
2. 头像右下显示状态切换入口
3. 下方显示账号、密码输入区域
● 账号输入区域分别显示企鹅剪影、默认灰色文字提示、账号扩展按钮
● 密码输入区域分别显示锁形剪影、默认灰色文字提示、软键盘按钮
● 企鹅剪影和锁形剪影，有标亮状态，代表已经选中对应输入框
4. 再下方依次显示自动登陆、记住密码、找回密码灰字，前两者有可勾选的复选框
■ 下部分
1. 中央显示蓝色登陆按钮，有点击状态
2. 左下显示注册账号灰字
3. 右下显示二维码标识入口
这里之所以需要拿着草图在开发文档里写美术需求，是因为一般按照工期，文档交到程序手里时，美术的正式效果图还不一定能出来，程序需要看着你的草图先去想象
4. 界面流程
4.1 动画播放
如图，蓝色区域，直接播放循环动画
4.2 右上角操作
上图右上角分别有三个按钮：
■ 设置入口
1. 点击设置入口，界面播放翻转效果，变为以下弹框内容
2. 介绍弹框内容，略
3.介绍返回和直接关闭逻辑，略
这些以及后面有写“略”的，都是原本文档应该写的部分，只是我懒，没写
■ 最小化
1. 点击最小化入口，界面最小化
2. 可以单击击右下对应的黑白企鹅图标再次打开
● 企鹅图标与面板一一对应
■ 关闭
1. 点击关闭按钮，直接关闭面板
2. 关闭时要记录保存需要保存的信息
● 列举需要保存的信息，下次打开还有的，略
4.3 头像及状态入口
■ 头像
1. 显示头像是根据下方QQ账号进行判断
● 若账号输入框为空，或显示的是未成功登陆的QQ号，则显示默认企鹅头像
● 若账号输入框显示的是已经成功登陆过的QQ号，则显示正确的QQ自定义头像
◇ 头像从缓存中取
◇ 账号包括手动输入的，以及列表选取的
2. 多账号登陆入口
● 将鼠标指针悬停在头像上，会有多账号登陆入口展开
● 点击入口，弹框提示变为启用多账号登陆确认内容
◇ 写清楚继续确定的功能点，略
◇ 取消返回上一面板
■ 状态选择
1. 点击头像右下角状态选择入口，可以展开状态选择列表
2. 列表内容，从上往下分为3类，通俗概括如下
● 能被打扰
◇ 我在线上
◇ Q我吧
● 避免打扰
◇ 离开
◇ 忙碌
◇ 请勿打扰
● 隐身
这里最好详细介绍对应状态是代表什么，有什么效果
3. 选择对应的状态，可以在登陆后，显示对应状态并生效
● 点击对应状态后，关闭列表，入口也会显示所选状态图标
● 已经选择的状态，可以重复点击选择
● 选择的状态，即使登陆失败，返回时暂时会保存，后续清空
4.4 账号及密码输入
■ 空白状态
1. 企鹅及锁形ui置灰状态
2. 账号和密码输入框，有默认灰字显示
● 显示内容
◇ 账号：QQ号码/手机/邮箱
◇ 密码：密码
● 有文字输入时自动清空，空白未选取后恢复灰字显示
3. 自动登陆和记住密码可勾选
■ 输入状态
1. 企鹅及锁形ui对应输入可亮起
● 通过更换ui实现
● 选中输入框就亮起
2. 账号与密码输入框，可直接输入内容，有输入上限
● 密码输入要自动转化为黑点，以保护隐私
● 上限建议配置
3. 手动输入可以从账号列表中自动读取可能的相同账号，账号列表说明见下方
4. 输入时也可以勾选自动登陆和记住密码可勾选
5. 输入账号以后，要判断此账号当前是否在线，如果有，则需要提示
■ 账号列表
1. 账号输入框右侧，会有账号列表入口
● 点击可以展开已经成功登陆过的账号
● 账号会显示头像、QQ号、昵称等信息
● 列表会有数量上限，上限走配置
● 列表排序，按照登陆成功倒序排列
2. 点击选择，可以快速输入对应账号
● 如果对应账号有勾选密码，则同时也会显示对应密码
■ 软键盘
1. 点击密码右侧，软键盘入口，能够打开浮动软键盘
2. 可以使用鼠标单击软键盘输入
● 软键盘开启时，不能用硬件键盘输入
3. 点击右上可关闭，点击其他区域也可以关闭
■ 自动登陆与记住密码
1. 勾选记住密码，可以在成功登陆后，下次登陆时显示保存的密码
2. 勾选自动登录，可以在成功登陆后，下次打开QQ登陆面板时，通过保存的账号和密码，直接登陆
● 勾选自动登陆的同时，也会勾选记住密码
■ 找回密码——点击找回密码，跳转对应链接
4.4 登陆
■ 登陆
下面的第一段，也可以通过流程图之类的来表意
1. 点击登陆按钮，需要进行以下判断
● 首先判断是否有输入账号
◇ 若无，冒泡提示：请您输入账号后再登陆
◇ 若有，进入下一步
● 再次判断是否有输入密码
◇ 若无，冒泡提示：请您输入密码后再登陆
◇ 若有，进入下一步
● 转入登陆流程，判断密码是否正确
◇正确，登陆成功
◇失败，弹框提示
绝对不止这几步，这里只举简单的例子
2. 点击登陆按钮时，需要记录部分信息
● 是否有勾选记住密码
● 是否有勾选自动登录
● QQ在线状态选择了哪种（就是头像右下角的那个）
■ 注册账号——点击注册，跳转对应链接
■ 二维码入口——点击二维码入口，弹框变为二维码登陆状态
5. 配表格式
略
6. 日志记录
略
7. 美术需求
见上一篇
到这里为止，基本上一篇很简略的开发文档，就算完成了。
用作新人示范应该是够了。
其实这么一看，的确是很多步骤很无聊。
下一篇，我会随便找个手游，取个小系统，再示范一遍，谢谢关注。
【游戏策划·基础篇】