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

1.登录页

登录

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

2.学生端

2.1 首页

首页_学生

首页说明:顶部选用#427BEE作为底色,其中文字为考研导师双选。头图选用#3388EC作为底色,左侧配图使用素材文件夹里的document.png,右侧字体颜色选用#FFFFFF。下方四个长按钮配图分别选用btnPic_01.pngbtnPic_02.pngbtnPic_03.pngbtnPic_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,其中文字改为修改,点击修改后,按钮恢复原样。)

2.4.2 我的导师

我的导师

我的导师页(含弹窗)说明:与双选流程-教师列表页面大部分相同。

2.4.3 参与活动

参与活动_学生

参加活动页说明:顶部其中文字为参加活动。下方的活动框的底色选用#071F50,其中文字颜色选用#FFFFFF,框中右下角的退出按钮底色选用#FF0000。(在实际时间超过活动时间后,按钮底色改为#669933,其中文字改为反馈。)

2.4.4 意向院校

意向院校页说明:与首页意向院校页一致。

2.4.5 复习详情

复习详情查看

复习详情页说明:与参与活动(学生端)页面大部分相同。

2.4.6 资料收藏

资料收藏

资料收藏页说明:与资料页面大部分相同。下方文件框中取消二字颜色选用#FF0000

2.4.7 意见反馈

意见反馈页说明:使用微信自带的功能页面。

3.教师端

3.1 首页

首页_教师

首页说明:与首页(学生端)大部分相同。

3.1.1 双选流程

3.1.1.1 学生列表
双选流程-学生列表

双选流程-学生列表页面(含弹窗)说明:与双选流程-教师列表页面(学生端)大部分相同。

3.1.1.2 预选学生
双选流程-预选学生

双选流程-预选学生页面(含弹窗)说明:与双选流程-预选导师页面(学生端)大部分相同。

3.1.1.3 学生选你
双选流程-学生选你

双选流程-学生选你页面(含弹窗)说明:与双选流程-导师选你页面(学生端)大部分相同。

3.1.2 上传文件

上传文件说明:点击首页的上传文件即可选择文件上传,无需单独的页面。

3.1.3 活动填报

活动填报

活动填报页说明:与复习详情页大部分相同。上方的图片选用素材文件夹里的fill.png

3.1.4 活动详情

活动详情_教师

活动详情页说明:与活动详情页(学生端)大部分相同。

3.1.4.1 活动详情
活动详情

活动详情页说明:与活动详情页面(学生端)大部分相同。

3.2 资料

资料页说明:与资料页(学生端)一致。

3.3 资讯

资讯页说明:与资讯页(学生端)一致。

3.4 我的

我的_教师

我的页面说明:与我的页面(学生端)大部分相同。

3.4.1 个人信息

个人信息填写_教师

个人信息页说明:与个人信息页面(学生端)一致。

3.4.2 我的学生

我的学生

我的学生页(含弹窗)说明:与我的老师页面(学生端)一致。

3.4.3 我的活动

我的活动_教师

我的活动页说明:与参与活动页(学生端)一致。(在实际时间超过活动时间后,按钮底色改为#3B63CC,其中文字改为查看。)

3.4.4 资料收藏

资料收藏页说明:与资料收藏页(学生端)一致。

3.4.5 意见反馈

意见反馈页说明:使用微信自带的功能页面。
:页面中所用的提示框均以以下样式为模板。

提示框样式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 完整的交互设计内容: 一、设计背景 1、产品定位(目标用户、竞争策略(差异化、控制成本)) 2、具体设计内容 3、...
    无尽红茶阅读 7,533评论 0 13
  • “梨花带雨” 在百度上搜索“Axure RP 进度条”会出现好几个版本,有些流程看一眼,就会让人产生一种不信任,就...
    BaoTT阅读 1,134评论 2 5
  • 写在前面 随着智能电视的发展和普及,电视端的应用也随着单一的视频应用开始多样化。与手机端、网页端不同的是,TV端的...
    Ri_tee阅读 5,168评论 3 25
  • 互联网讲究快速迭代,通常设计改动的地方也不是特别多,我也能得心应手的处理好。之前经历了一次不能拆分的复杂功能改版,...
    龙爪槐守望者阅读 834评论 2 9
  • 目录 1 概述 1.1 引入的js文件 2 原生基础接口 2.1 直接调用原生方法2.1.1 调用原生身份认证...
    小雨雪smile阅读 235评论 0 0