界面设计

版本 日期 描述 作者
v1.0 2019-5-31 登录、注册页面设计初稿 zhulinyin
v1.1 2019-6-2 修改了邮箱、密码图标,增加了注册时输入昵称的输入框 zhulinyin
v1.2 2019-6-9 添加了问答、问卷列表、问答详情、个人中心页面,进行了细节微调 zhulinyin
v1.3 2019-6-15 添加了回答问题,填写问卷,发布问题、问卷页面 zhulinyin
v1.4 2019-6-19 添加了鼠标悬浮头像、问卷题目时的效果 zhulinyin
v1.5 2019-6-25 添加了收益细则和问卷统计结果页面 zhulinyin
v1.6 2019-6-28 添加了文字说明 zhulinyin

1、Introduction

设计师:李江涛

2、登录

主要的主题风格采用浅蓝色的色调,考虑到前端使用Element-UI的组件,我把各个组件都按Element-UI的组件风格来绘制。

登录

3、注册

注册

登录与注册页面之间可以相互跳转,登录成功即跳转到主页。

4、问卷列表

问卷列表主要用于展示已有的问卷,主要包含的信息有问卷的题目、描述、每份问卷的单价、问卷的创建时间、题目量、总份数和已填份数。

问卷列表

5、问答列表

问答列表主要用于展示已有的问答,主要包含的信息有问答的题目、描述、悬赏的赏金、创建时间、问题的回答量和是否已经被采纳。

问答列表

6、个人中心

个人中心展示个人信息和本人发布的问卷、提问、回答和收益细则。

个人中心

7、问答详情

问答详情页主要展示问题的回答,当问题已被采纳,被采纳的回答会标注被采纳并且“我来回答”按钮变灰(disable)。

问答详情

8、回答问题

若问题未被采纳,则点击“我来回答”按钮时出现提交回答输入框。

回答问题

9、填写问卷

填写问卷

10、发布问题

点击发起提问按钮时弹出对话框,填写问题的题目、描述和悬赏金额并发布问题。

发布问题

11、发起问卷

点击问卷主页的发起问卷跳转到发起问卷页面,填写问卷题目和描述,点击右侧的单选、多选、单项填空即可添加题目。

发起问卷

11.1、添加单选

添加单选

11.2、添加多选

添加多选

11.3、添加填空

添加填空

11.4、发布问卷弹窗

发布问卷弹窗

11.5、鼠标悬浮问卷题目

鼠标悬浮到问卷题目上时背景色变灰,并出现编辑和删除按钮。

鼠标悬浮问卷题目

12、鼠标悬浮头像

鼠标悬浮右上角头像出现弹出框,可进入到个人主页或退出当前用户。鼠标悬浮个人中心头像可从本地选择头像上传。

鼠标悬浮头像

13、收益细则

收益细则展示支出与收入细则。

收益细则

14、问卷统计结果

问卷统计结果显示已填写的人数,每个选项选择的人数和填空部分的所有回答。

问卷统计结果