考研导师双选系统的UI设计说明文档

作者: Ping开源 | 来源:发表于2021-12-18 02:19 被阅读0次

考研导师双选系统的UI设计说明文档
如何产出一份交互设计说明文档
人生的导师
专硕在硕导眼中是被嫌弃的一类
原来我的研究生导师是这样的人
Ui项目设计说明
ui项目设计说明
docker ui 部署
2018-12-27
比不确定性更令人痛心的是错过

1.登录页

登录页说明：标题是使用的字体为字魂100号-方方先锋体，或者直接使用素材文件夹里的title.png。右侧logo使用素材文件夹里的logo.png。中间的标语颜色选用#FFFDFD。选择角色的字体颜色选用#C1C1C1。下方的一键登录按钮选用#195ED7作为底色。

2.学生端

2.1 首页

首页_学生

首页说明：顶部选用#427BEE作为底色，其中文字为考研导师双选。头图选用#3388EC作为底色，左侧配图使用素材文件夹里的document.png，右侧字体颜色选用#FFFFFF。下方四个长按钮配图分别选用btnPic_01.png、btnPic_02.png、btnPic_03.png、btnPic_04.png，长按钮的阴影参数为x：0，y：2，模糊：6，扩散：0，其中的文字颜色选用#101010，其阴影参数为x：0，y：2，模糊：6，扩散：0。底部的导航栏的底色选用#575757，其按钮logo可以从阿里巴巴矢量图库下载，被选中页面logo颜色选用#FBB805，未被选中页面logo颜色选用#A7A7A7。

2.1.1 双选流程

2.1.1.1 教师列表

双选流程-教师列表.png

双选流程-教师列表（含弹窗）（含弹窗）说明：顶部其中文字为双选流程。下方导航条平均分成三部分，被选中的底色选用#BCBCBC，文字颜色选用#FFFFFF；未被选中的底色选用#FFFFFF，文字颜色选用#F000000。下方信息使用间隔条状样式，奇数条底色选用#6CCED9，文字颜色选用#FFFFFF ；偶数条底色选用#FFFFFF，文字颜色选用#31B3D9，其中选择二字颜色选用#427BEE，详情二字颜色选用#669933（弹窗的顶部选用#427BEE作为底色。注意左侧冒号对齐，右侧内容对齐。底部的按钮的阴影参数为x：0，y：2，模糊：6，扩散：0，选择按钮的底色选用#336CEC，关闭按钮的底色选用#747474，其中字体颜色选用#FFFFFF。）。

2.1.1.2 预选导师

双选流程-预选导师

双选流程-预选导师页面（含弹窗）说明：与双选流程-教师列表页面大部分相同。下方导航条中退选二字颜色选用#FF0000（弹窗底部的退选按钮的底色选用#FF0000。）。

2.1.1.3 导师选你

双选流程-导师选你

双选流程-导师选你页面（含弹窗）说明：与双选流程-教师列表页面大部分相同。

2.1.2 意向院校

意向院校

意向院校页说明：顶部其中文字为意向院校。下方为一张图片，选用素材文件夹中的school.png图片。下方的志愿表的上角为弧形，下角为直角，第几志愿的标题底色选用#252525，输入框的提示文字颜色选用#898989，后方的logo颜色分别选用#38B54A、#F99902、#FFDA00。底部的提交按钮底色选用#3B9DEC，文字颜色选用#000000；重置按钮底色选用#FF0000，文字颜色选用#FFFFFF。

2.1.3 活动报名

活动报名_学生

活动报名页说明：顶部其中文字为活动报名。下方为一张图片，选用素材文件夹中的activity.png图片。图片下部是一个透明条，其底色选用#252525，透明度为40%，文字颜色选用#FFFFFF。下方的活动框上半部分选用来源于素材文件夹中activity文件夹里的图片，下方的活动时间和地点文字颜色选用#ADADAD，报名按钮底色选用#03A8F0，文字颜色选用#FFFFFF 。

2.1.3.1 活动详情

活动详情

活动详情页说明：顶部其中文字为活动详情。页面顶部近似于半圆的背景，其底色选用#3089ED。页面整体由活动信息和教师信息两块构成，其中左侧文字颜色选用#000000，右侧文字选用#BABABA，第二个框中的的标题颜色选用#306CED。底部的按钮底色选用#306CED，其文字颜色选用#FFFFFF。（点击报名后提示活动报名成功，按钮底色改为#FF0000，其中文字改为退出，点击退出后提示活动退出成功，按钮恢复原样。）

2.1.3.2 活动反馈

活动反馈

活动反馈页说明：与活动详情页面大部分相同。下方第二个框中的提示文字颜色选用#6B6A6A，被选中的五角星整体颜色选用#FEE122。（点击提交后提示提交成功，按钮底色改为#6B6A6A，按钮无法点击。）

2.1.4 复习详情

复习计划填写

复习详情页说明：顶部其中文字为活动详情。下方为一张图片，选用素材文件夹中的review.png图片。整体背景上角为圆弧形，且覆盖在头图上。各输入框的底色选用#FFFFFF，其中的提示文字颜色选用#999999。底部的提交按钮底色选用#336CEC，重置按钮选用#FF0000，其中的文字颜色选用#FFFFFF。（点击提交后提示复习计划填写成功，按钮底色改为#669933，其中文字改为修改，点击修改后，按钮恢复原样。）

2.2 资料

资料

资料页说明：顶部其中文字为精选考研资料。下方紧贴的搜索框内框颜色选用#DFDBDB，外框颜色选用#FFFFFF，搜索二字颜色选用#0084FF。文件框整体主色调根据上传的文件类型来决定，上传文件的类型为word选用#3B9DEC，上传文件的类型为ppt选用#F99902，上传文件的类型为excel选用#107C41，上传文件的类型为pdf选用FF0000，上传文件类型选用#BCBCBC，其中下载二字颜色选用#669933，收藏二字颜色选用#669933。（点击收藏后提示文件收藏成功，文字颜色改为#FF0000，文字改为取消，点击修改后，恢复原样。）

2.3 资讯

资讯

资讯页说明：顶部其中文字为最新考研资讯。下方紧贴的搜索框与资料页中的样式一致。搜索框下方是一个轮播图，轮播图的宽高比为75/32，轮播图中的图片使用素材文件夹里swiper_01文件夹里的素材。下方的资讯框左侧的配图来源于后台管理人员上传的资讯详情文章的第一张图，若资讯详情文章里不存在图片，则使用素材文件夹里的默认图片noPic.png，右侧发布人和文章来源字体颜色选用#BEBEBE。

2.3.1 资讯详情

资讯详情.png

资讯详情页说明：顶部其中文字为资讯详情。资讯详情来源于后台管理人员上传资讯详情文章，通过Markdown格式生成的，资讯标题加粗，文章来源向后空两个字体的大小，整篇文章字体大小为标题>来源>内容，文章中的图片边距不得超过文字的边距。

2.4 我的

我的_学生

我的页面说明：顶部其中文字为我的考研之路。上半部分选用#5290FF作为底色，头像使用用户的微信头像，并设置成圆形，除考研倒计时的天数字体颜色选用#FF0000外，其它字体颜色均选用#FFFFFF，每日签到前的小logo选用素材文件夹里的calc.png。下方的七个框的底色选用#FFFFFF，其边线颜色选用#BCBCBC，前面的logo颜色选用#5697C6，其可以从阿里巴巴矢量图库下载，中间的文字颜色选用#000000，后面的小箭头颜色选用#B2B2B2。底部的标语颜色选用#BCBCBC。

2.4.1 个人信息

个人信息填写_学生

个人信息页说明：顶部其中文字为个人信息填写。下方的矩形框的底色选用#BBBBBB，前面小竖条的颜色选用#135AB2，后面的文字颜色选用#FFFFFF。下方的表中左侧文字和划线颜色选用#8E96AF，右侧的提示文字或输入文字颜色选用#FFFFFF。底部的提交按钮底色选用#336CEC，重置按钮选用#FF0000，其中的文字颜色选用#FFFFFF。（点击提交后提示个人信息填写成功，按钮底色改为#669933，其中文字改为修改，点击修改后，按钮恢复原样。）