UI设计APP项目计划方案

1、序号修订人发起日期完成日期状态备注12018-05-192018-05-21需求中新建22018-05-292018-06-05需求中修正32018-06-122018-06-24需求中修正42018-07-022018-07-16需求中完成一、说明1、文档背景本次修订是为了描述新产品的功能点及完成时间。2、优先级说明本次需求分四个优先级，分别是：重要/紧急（四星）、紧急/不重要（三星）、重要/不紧急（二星）、不重要/不紧急（一星）。3、项目时间开发时间测试时间验收时间上线时间二、功能概览功能名称功能点数优先级功能类型支持注册登陆5新功能UI、android、iOS、服务端首页2新功能UI、a

2、ndroid、iOS、服务端发现2新功能UI、android、iOS、服务端添加4新功能UI、android、iOS、服务端消息5新功能UI、android、iOS、服务端我的1新功能UI、android、iOS、服务端三、前台功能描述1、手机注册/登录1.1 说明用户未登录的情况下，每次打开APP都跳出登录/注册聚合页面，引导用户注册/登录，重点引导用户使用手机注册，用户登录过后就记住登陆状态不过期。1.2 登录聚合页详细描述内容交互logo、手机号注册按钮、登录按钮、微信登陆快捷方式、QQ登录快捷方式、微博登录快捷方式、稍后注册按钮1、点击“手机号注册按钮”，跳转到手机号注册页面；2、点击

3、“登录”按钮跳转到手机号登陆页面；3、点击“微信、QQ、微博登录快捷方式”，跳出对应平台的登录接口授权页面，用户填写后就成功登录；4、点击“稍后注册按钮”，用户跳过注册/登录聚合页面直接使用APP，用户只能浏览内容，当用户想要进行分享、关注、回复、喜欢、点评、发布的操作时，跳出登录聚合页面提醒用户登录；5、重点引导用户使用手机号去注册登录；6、用户登陆后，永远记住用户登录状态；1.2 手机号注册页详细描述内容表现交互登录按钮、手机号输入框、验证码输入框、获取验证码按钮、密码输入框、同意使用协议并注册按钮、软件用户使用协议1、若用户已有账号，但他点击到这个页面，那就提供给用户登录入口；2、用户需

4、要输入11位有效的手机号码；3、验证码通过短信方式发送给用户，6位数的随机数字；4、密码为616位的数字或字母；5、用户填写完上面的有效资料后，可以点“同意使用协议并注册”提交信息；6、软件用户使用协议，告知用户权利和责任；1、用户点击“登录按钮”，跳转到手机号登陆页面；2、用户需要输入11位的有效手机号才能获取验证码，用户输入后，点击“获取验证码按钮”时验证手机号，如果不符合要求，就提示用户“请输入11位有效的手机号码”；3、用户输入有效手机号后点击“获取验证码按钮”获取验证码，验证码在发送的过程中，显示60s倒计时，超过未收到或用户未填写，按钮则显示为“重新获取”。用户获取到验证码后就可以

5、在验证码输入框输入，当用户输入数字为6位或者用户焦点离开验证码输入框时，系统就开始验证是否有效，若无效，则提示用户“输入有效的验证码”或“验证码已过期，请重新获取”，验证码有效时间为10分钟；4、用户点击密码输入框时，可输入密码为616位的数字或字母，用户输入后点击“同意使用协议并注册”便开始验证以密码，若用户输入少于6位，则提示用户“密码过短，请输入616位的数字或字母”，若超过16位，则提示“密码过长，请输入616位的数字或字母”。若信息准确，则提交用户资料并跳转到“完善资料页面”；5、用户点击“软件用户使用协议”查看协议内容；6、若用户点击左上角的“返回按钮”，先判断用户是否填写过资料，

6、若填写过，则提示用户“您确定放弃注册吗？”，用户选择“确定”就返回登录聚合页面，用户选择“取消”则停留在当前页面；若用户未填写任何内容，则返回登录聚合页面。若用户不退出程序，再次进到该页面时，记住之前填写的信息。1.3 完善资料页详细描述内容表现交互上传头像框、名字输入框、性别（男、女）、所在城市、个人简介1、上传头像框是给用户添加头像的；2、名字输入限制在20个字符的长度内；3、性别是两个单选按钮及对应的性别名称；4、城市选择首先是定位用户位置，然后用户可以自由选择；5、个人简介可以选填，限制100字内。1、用户点击上传头像框后，跳出手机相册和拍照，用户可选择手机相册已有的照片或选择拍照，做

7、完选择后，点击“下一步”按钮跳出头像缩放界面，用户可在这里对上传的图像做缩放，点击“完成”后上传头像；2、用户点击输入框时提示文案消失，可输入20个字符长度的名字，支持特殊符号；3、用户点击输入框时提示文案消失，弹出地址选择，支持外国地区；4、用户点击输入框时提示文案消失，用户可输入100字以内的自我介绍；5、用户点击“完成”按钮时验证用户是否上传了头像、填写名称、选择性别和选择了城市，若存在没有填完的，则提示用户“请上传头像、请填写名称、请选择性别、请选择城市”，若都填完，则提交数据并跳转到APP首页；6、若用户在填写的过程中，点击了左上角的返回按钮，则提示用户“您确定要放弃完善资料吗？”，

8、用户选择“确定”后返回上一页，用户未退出APP应用程序并再次回到该页面时，记录已经填写的信息，若用户选择“取消”则停留在当前页；1.4 手机登录页详细描述内容表现交互注册按钮、手机号输入框、密码输入框、登录按钮、忘记密码1、若用户未注册而点击到这个页面，提供一个“注册”入口给用户；2、用户在手机号输入框输入已经注册的手机号码；3、密码输入框输入注册时设置的密码；4、提交登录；5、密码找回入口；1、用户点击“注册”后条状到注册页面；2、用户在手机号输入框和密码输入框输入后，点击“登录”按钮后系统开始验证用户是否注册，若手机号和密码匹配，则成功登录并调到用户唤出登录界面的地方，若手机号存在而密码错

9、误，则提示用“密码错误”，若手机号不存在，则提示用户“账号不存在，请注册”；3、点击“忘记密码”后跳转到密码找回界面；1.4 重置密码页详细描述重置密码逻辑和新用户注册时的逻辑一样。1.5 第三方登录详细描述用户在打开APP时程序需要判断用户是否装了微信、QQ、微博，若有应用没有装，则不显示这个应用对应的登录方式。内容交互微信图标、QQ图标、微博图标点击微信、QQ、微博图标，跳出微信登录授权页面，若用户同意，则获取用户信息并登录，若是第一次使用时，则登录成功后跳转到APP首页，若是在应用内部唤出登录页面的，则登录成功后跳转到唤出登录界面的地方。2、首页2.1 说明首页是新产生的内容筛选后的聚合

10、页面，有两帧，分别是热门和关注，热门页面是运营手段和系统判断推送的内容，关注页面是用户主动关注的用户的动态。内容条件机制热门的用户内容1、若内容在后台被运营团队推荐成热门，则显示；2、被点“喜欢”的次数排在当日的前100条内容以内；3、被点评的次数超过10条。1、 当日UGC大于等于100条，则用户每次激活APP时随机在当日的前30条热门中随机排列；2、 当日UGC小于100条：A、 继续随机推送前一天的内容；B、运营团队在后台进行内容推到热门。2.2 热门页详细描述内容表现交互用户头像、昵称、发布内容时间、加关注操作、用户发布内容（文字、图片、音乐、视频）、喜欢内容操作及累计次数、评论内容操

11、作及次数1、显示用户头像、用户昵称、用户发布内容的时间、对发布内容的用户能“加关注”的操作；2、发布内容的时间格式为：0时间30s，显示：刚刚30s时间60s，显示：1分钟前60s时间60m，显示：x分钟前60m时间24h，显示：x小时前24h时间48h，显示：昨天48h时间30d，显示：m月d日如果不是今年，显示：y年m月d日3、用户发布内容有四种方式：A、 纯文字，热门列表的文字最多显示四行，超过则在后面跟省略号，点击到详细才能看全部；B、 图片+文字，添加图片时必须添加文字描述，图片有两种方式获得，拍摄和从相册选择，只支持上传一张，在列表里面铺满显示，不固定宽高，文字显示遵循3.1规则；

12、C、 音乐+文字，添加音乐时必须添加文字描述，音乐添加来自于系统，用户从系统选择音乐，需要显示音乐对应的封面、音乐名字、描述，显示用户的文字描述，文字遵循3.1规则；D、视频+文字，添加视频时必须添加文字描述，视频使用户拍摄上传，只支持10s长度，需要有视频滤镜系统，文字遵循3.1规则；4、内对内容进行“喜欢”操作，需要显示被喜欢的次数；5、对内容能进行“评论”，需要显示被评论的次数。1、点击用户头像、用户昵称跳转到用户“个人主页”，点击“加关注”对用户进行关注，被关注的用户出现在“我的关注”里面，“加关注”按钮消失。被加关注后的用户内容就不出现在“热门”里面了，出现在“关注”里面；2、内容是

13、纯文字，点击文字到详情页面；3、图片+文字，点击图片或文字都跳转到详情页面；4、音乐+文字，点击音乐内容或文字跳转到详情页面；5、视频+文字，点击视频内容或文字跳转到详情页面；6、点击“喜欢”时，点击状态需要有反馈，后面的数字+1，被喜欢的内容添加到“我的喜欢”里面；7、点击“评论”时，在当前页面弹出评论输入框和键盘，评论字数为1,300，用户点击“提交”后，提交评论内容，关闭评论输入框和键盘。评论按照最新的评论排在前面来显示。2.3 关注页详细描述关注列表页面、详情页面的形式和热门列表页面、详情页面一样，区别在于用户后面没有关注按钮。2.4 详情页详细描述内容表现交互1、发布内容的用户头像、

14、昵称、发布内容时间、加关注操作、用户发布内容（文字、图片、音乐、视频）；2、对发布的内容进行喜欢、写评论、分享（分享到QQ空间、微信朋友、朋友圈、微博）、复制内容链接、举报；3、写评论的用户头像、昵称、时间、评论内容；4、对写点评的用户关注/取消关注、举报用户的评论、回复用户评论。1、显示发布内容的用户头像、用户昵称、用户发布内容的时间、对发布内容的用户能“加关注”的操作；2、发布内容的时间格式为：0时间30s，显示：刚刚30s时间60s，显示：1分钟前60s时间60m，显示：x分钟前60m时间24h，显示：x小时前24h时间48h，显示：昨天48h时间30d，显示：m月d日如果不是今年，显示

15、：y年m月d日3、用户发布内容有四种方式：A、 纯文字，热门列表的文字最多显示四行，超过则在后面跟省略号，点击到详细才能看全部；B、 图片+文字，添加图片时必须添加文字描述，图片有两种方式获得，拍摄和从相册选择，只支持上传一张，在列表里面铺满显示，不固定宽高，文字显示遵循3.1规则；C、 音乐+文字，添加音乐时必须添加文字描述，音乐添加来自于系统，用户从系统选择音乐，需要显示音乐对应的封面、音乐名字、描述，显示用户的文字描述，文字遵循3.1规则；D、视频+文字，添加视频时必须添加文字描述，视频使用户拍摄上传，只支持10s长度，需要有视频滤镜系统，文字遵循3.1规则；4、内对内容进行“喜欢”操作

16、，用户点击喜欢后就保存在用户个人中心的“喜欢”里面，需要显示被喜欢的次数；5、对内容能进行“评论”，需要显示被评论的次数。6、对发布的内容分享，能分享到QQ空间、微信朋友、朋友圈、微博，分享出去的内容就是APP显示的内容；7、把该条内容的评论按最新写的评论排在前面的方式显示出来，显示用户头像、昵称、写点评的时间、点评内容及更多操作，更多操作包括关注/取消关注、举报用户评论、回复用户评论。1、点击用户头像、用户昵称跳转到用户“个人主页”，点击“加关注”对用户进行关注，被关注的用户出现在“我的关注”里面，“加关注”按钮消失。被加关注后的用户内容就不出现在“热门”里面了，出现在“关注”里面；2、图片

17、+文字，点击图片在当前页面模态查看图片，第一次点开时，图片按原始比例铺满屏幕，双击放到最大，再次双击回到原始比例，两个手指缩放看图片细节，再次单击关闭模态看图；3、音乐+文字，点击音乐就播放；4、视频+文字，点击视频观看视频；5、点击“喜欢”时，点击状态需要有反馈，后面的数字+1，被喜欢的内容添加到“我的喜欢”里面；6、点击“评论”时，在当前页面弹出评论输入框和键盘，评论字数为1,300，用户点击“提交”后，提交评论内容，关闭评论输入框和键盘。评论按照最新的评论排在前面来显示。7、在分享出去wap页面里面，不管用户点击什么操作都提示用户“该操作只能在应用内进行，立即体验”，点击立即体验后就跳转

18、到AppStore的下载页面；8、点击写点评的用户头像、昵称跳转到对应用户的个人主页，点击“更多”后弹出“关注/取消关注、举报用户评论、回复用户评论”，点击举报时弹出举报页面填写，提交后依然会到这个页面，点击“回复”，则在当前弹出键盘和输入框给用户进行回复，字数为1,300。3、发现3.1 说明内容备注发现用户、发现用户内容按照最新产生内容的用户排在上面的时间顺序来排，已经关注过的用户内容和推荐到热门的内容不出现在这里。发现专题运营团队的运营专题内容；3.2 用户页详细描述内容表现交互用户头像、昵称、发布的动态个数、加关注按钮、最新发布的动态1、显示最新发布的内容的用户的头像、昵称、该用户已经

19、发布的动态的个数；2、能对用户进行加关注操作；3、显示最新发布的动态缩略图。1、点击用户头像、昵称跳转到用户个人主页；2、点击“加关注”按钮后，对该用户进行加关注操作，出现在“我”的“关注”里面，“加关注”按钮消失；3、点击内容缩略图跳转到内容详情页面，内容详情页面如2.4描述。3.3 发现页详细描述内容表现交互活动专题列表一个专题就是一个图片，按最新的显示在前面的方式排列，历史记录也放出来。1、 内容来源：运营团队的运营专题内容；2、点击图片后调到详情页面，专题类型有这三种：A、 图文混排页面，描述一个事情，页面功能：分享；B、 类似热门内容，只是在这被归类为专题了,点击内容调到详情页面查看

20、，详情逻辑如上面2.4；C、 官方发起的活动，用户点击报名参与后就能传图文、音乐、视频并参与评论。评论按最新的显示在前面的方式排列出来，需要显示用户头像、昵称、发布时间、内容（文字、图片、视频、音乐，图片支持19张）、对评论的更多操作（包括关注用户、举报评论、回复评论），其中用用户发布的图片，点击后弹出看大图，音乐点击播放，视频点击观看。4、添加内容表现交互添加按钮，能添加文字、图片、音乐、视频1、添加文字页面有文字输入框、添加照片按钮、发送按钮；2、添加照片页面，有拍照按钮，手机相册的图片列表，图片类别每一行显示3张，自适应宽高；3、添加音乐页面，用户可以对当前列表的的音乐进行试听、添加操作

21、，可以搜索音乐；4、用户可以拍摄1s10s的视频传上去，并能描述。1、用户点击工具条上的“添加”按钮，弹出选择，用户可以选择添加“文字、图片、音乐、视频”。用户再次点击“添加”按钮时收起弹框，或点击“关闭”来收起弹框；2、用户添加文字时，唤出添加文字页面和键盘，输入框默认获得输入焦点，可以随时输入，也可以点击下面的添加图片按钮添加图片，点击发送按钮发送内容；3、添加照片，若从相册选择，只能显示照片，不显示视频，若视频过长不符合要求，选择照片后跳转到文字描述输入框，用户可不输入文字，也能发送；4、用户添加音乐时，音乐列表按照系统推送的派列，用户可以对点击试听按钮试听音乐，就在当前页面播放，点击“

22、添加”按钮后，调到文字描述界面，有文字输入框，把添加的音乐名字、封面、演唱者、被分享的次数列出来，用户可以删除一添加音乐，点击删除后，出现添加按钮，点击添加按钮跳会音乐列表页面。用户在输入框搜索音乐时，若有符合结果则列出来，如果无符合结果就告诉用户没有符合的结果，但推荐给用户类似风格的音乐；用户在文字描述页面输入文字或者不输文字都能发送音乐，点击发送后，就发布一条新内容；5、用户点击添加视频时，弹出照相机，若用户就选择拍照，并拍照后依然可以跟图文发布的地方一样去。若用户选择视频，用户按住拍摄按钮，能拍摄1s10s时长的视频，用户放开拍摄按钮后，自动停止拍摄，点击“下一步”后把视频添加到文字描述

23、界面，用户可以预览视频，可删除当前视频，删除后显示拍摄按钮。用户不输人文字也能点击发送按钮发送内容。5、消息消息分别是用户的私信和系统通知消息。5.1 通知触发机制用户所在界面出现时间出现频率消失时间方式锁屏有新动作产生时1次用户查看1、新消息通知：软件logo，内容：你有1条未读消息；2、动作触发通知：xx赞了你、xx关注了你、xx回复了你；3、唤醒通知：用户连续5天没有启动APP，就推送一个动态去唤醒用户。系统消息页面有新动作产生时1次用户查看1、新消息通知：软件logo，内容：你有1条未读消息；2、动作触发通知：xx赞了你、xx关注了你、xx回复了你的点评；3、唤醒通知：用户连续5天没有

24、启动APP，就推送一句唤醒文案给用户5.2 私信页详细说明内容表现交互私信1、私信显示头像、对话文字内容和时间，时间现实遵循以下规则：A、如果在3分中之内有持续的文字发送和接收，就不显示时间；持续20分钟后开始显示下一个对话集的开始时间；B、如果3分钟之内没有持续的文字发送和接收，就现实时间；C、时间格式和评论的一样；2、屏蔽私信3、删除私信4、举报私信1、产生私信第一种是在用户个人主页或者机构主页点击“私信”按钮，像对方发私信；第二种是在对方发过来的私信里面进行回复；2、接收私信在“消息”-“私信”里面查看，并进行回复；3、对骚扰信息进行屏蔽，点击屏蔽后就不会在接收到该用户的私信，在操作中解

25、除后再次接收私信；4、用各自系统的删除方式删掉私信，比如iOS的左滑，按合作的长按；5、可对私信进行举报。5.3 通知页详细说明内容表现交互1、关注；2、评论；3、赞；4、系统通知1、关注，显示关注“我”的用户的头像、昵称、关注的时间，如果“我”未关注对方，则显示加关注按钮，如果已关注对方，则不显示加关注按钮；2、评论，显示对“我”评论的用户的头像、昵称、评论内容缩略以及对应的被评论的内容的缩略；3、赞，显示对“我”赞的用户的头像、昵称、时间以及对应的被赞的内容的缩略；4、系统通知，包括系统更新、系统活动、“我”对别人的举报反馈、别人对“我”的举报处理通知、用户反馈处理情况通知。1、点击关注“我”的用户头像、昵称跳转到对应用户的个人主页，点击“加关注”按钮对用进行关注，关注后的用户出现在“我”的关注里面；2、点击评论“我”的用户头像、昵称跳转到对应用户的个人主页，点击评论内容和内容缩略跳转到对应的内容详情页面；3、点击赞“我”的用户头像、昵称跳转到对应用户的个人主页，点击内容缩略跳转到对应的内容详情页面；4、系统通知点击每一条进行阅读，不能进行回复，可删除。6、我6.1 说明“我”自己的页面和其他用