知识金矿软件界面设计方法及设计思考

◆张晋心

知识金矿软件界面设计方法及设计思考

◆张晋心

（四川大学锦城学院 四川 610000）

教育是我们生活工作中必不可少的一个组成部分，传统的线下教育依旧有着一些不足之处，老师只能在有限的时间内对孩子进行有限地指导，成绩差一点的许多孩子疑惑之处老师没那么多时间来一个个解答，家长对孩子的学习进度掌握十分有限。他们都需要一个网络上的平台来解决这些问题。本文针对以上现状，设计了一套中小学生线上教育辅助平台，解决了老师、同学、家长对于学习教育的困扰。

UI；原创；视觉设计；界面设计完整流程

1 引言

知识金矿是一款原创教育类型APP软件平台。在这里，你可以选择作为一名优秀的讲师，知识金矿为你提供传播知识的平台；在这里，你也可以选择作为一名勤奋的学生，知识金矿为你提供奋勇拼搏的助力；在这里，你也可以选择作为一名关爱孩子的家长，知识金矿为你提供督促了解孩子的途径。

2 场景预设与需求分析

场景一：贾老师是一名中学语文老师，一共教了三个班，每个班都有些同学的成绩不太理想，也提出希望老师给他们补课，可是又有规定不能给学生补课，光是课堂时间又无法很好地帮助到这些学生去提升自己的成绩，贾老师为此十分烦恼。

需求分析：贾老师需要更多的一些给这些同学上课的时间或是平台。

场景二：小明同学是一名成绩中等偏下的中学生，十分想提升自己的成绩，可是自己天赋不足，自己努力并未取得很好的效果，于是希望老师给他补课，可是老师拒绝了，并叫他可以课余时间多去找老师。小明知道有这想法的同学并不止他一个课余时间并不够老师给这么多同学进行讲解。

需求分析：对于小明这位中学生来说课余时间本就稀少，课余时一个老师会被多名学生围绕，线下的时间对于老师与学生来说都是不够的。此时一个线上的平台能在很大程度上解决这个问题。

场景三：刘女士是一名普通上班族，孩子在上小学成绩不理想，作为一名母亲想时刻督促着孩子的学习，但又不好每天都给老师打电话，询问孩子总是问不出个所以然来，只能靠看孩子每天带回家的作业与隔一段时间与老师的交流来了解孩子。怎么才能更好地督促着孩子学习？她心里为之困扰着，这也是很多家长的烦恼。

需求分析：作为一名上班族线下时刻关注着孩子明显是不太现实的，而一个线上的平台便能解除刘女士的困扰，同时也能使家长更能了解孩子的校园生活。

综上知识金矿所存在的用户对象的使用场景和基于此的需求分析，做出了以下设计思考：在设计中为了接近知识，学习教育主题，色彩主要为（蓝色 rgb：#b8e2ee；灰色 rgb：#a5a8ab；白色 rgb：#ffffff）。设计中，为了贴近教学的严谨，设计颜色主要以简洁（白、灰）为主，再辅以一些蓝色（在我看来蓝色代表着广阔，与知识的繁多无边相切合），字体为微软雅黑与Adobe 黑体 Std。同时logo也是蓝色的，一个行楷的蓝色“知”字在一个球体的透明晶石中，既符合知识金矿这主题，也使得看起来不过于古板。当然这也只是最基础的主题样式，设置里也可以对主题进行更改，并不是死板的只能使用一个主题。

3 设计详细说明

3.1 登录页及整体页面布局

登录页及页面整体布局：登录页主要包含了账号，密码，注册，立即注册，忘记密码，三方登录功能（QQ与微信登录），页面整体以文字、输入框、按钮和logo为主，第三方登录是为了方便用户使用已有的微信或QQ账号进行登录，以避免花费更多的时间去注册一个新的账号。软件界面整体布局以750*1334px的iphone 7为原型模板，最小参考边距30px，内容间距以此为基准，总体主要页面13页。

3.2 首页面

主页面功能分区从上到下依次包含：头像、热门、关注（顶部标签选中时颜色加深并加了黑色短下划线），搜索图标，消息图标，课程分类（推荐、语文、数学、英语、文综），轮播图，热门的课程，下部导航（首页，课程，成绩，我的）。点击头像进入个人资料的编辑页面；点击搜索图标会出现搜索框，并自动获取用户输入焦点，和直接显示的搜索框操作复杂度一样，但是隐藏搜索框可以使画面显得更加简洁；有新消息时，消息图标右上角会出现包含数字的小红点提示（超过99条会显示为99+）；轮播图时将今日最热门、最受欢迎的课程进行置顶推荐；课程分类：点击科目跳转至课程页；热门课程中将包含课程的名字、老师、老师所处学校和课程价格以及已购人数，点击进入该课程详细页面；下部导航主要为展示了软件的主要页面构成，用户点击相应文字则会进入对应的主要页面，首页、课程、成绩、我的为一级页面。同时，处于哪个页面该页面的对应导航方块将会呈现浅灰色并底部会有一个灰色小圆点。

3.2 课程页面

课程页面包含：全部、视频、直播、练习等，课程分类（语、数、外、文等文字图标以及省略号）为您推荐、参与最多、最新发布、更多，推荐的课程的图片全部是综合性的，点击可直达相应课程；而视频、直播、练习、请愿是单一的模块，也就相当于为用户提供过滤功能；点击省略号展示所有可选科目，点击科目跳转到课程页，再次点击省略号收起展示块；为您推荐是软件根据你的信息综合所有课程推荐觉得适合你的课程；参与最多是一些参与学生数最多的课程；最新发布即实时发布的课程（优先推荐学生的老师以及学生所关注老师的最新发布），课程下方有课程的价格。

视频是老师发布的一些视频，直播是正在直播的老师，练习便是你的练习以及其他老师发布在平台上的一些习题。课程的购买有课程详细信息，章节内容，同时页面有播放按钮，可以试看，并且有购买人针对该课程的评价，每节课还有购课人针对问题的讨论。

3.3 成绩页面

成绩页面主要分为两大块：

（1）线上成绩，即你的各科老师给你布置在网络上的作业与任务的成绩与进度，以及你所选课程的成绩与进度。

（2）线下成绩，是各科老师录入的你的线下的成绩，并且是将习题一同上传的。两者都有成绩的排名，这样来激励同学们的竞争心，这些也只有自己与老师家长能看见。这样的好处便是你可以很好地针对你所做习题进行改正，同时也方便老师家长对你的问题做出指导。

3.4 我的页面

该页面最上方为个人头像昵称、用户id、学校、年级、班级，下方依次是：关注/好友、我的收藏、我的课程、我的成就、已购课程、学习记录、年级、关联账号、购物车、积分商城、设置以及衔接下部导航的意见反馈。点击各个选项可进入进行操作编辑，设置功能包含传统的用户账号安全设置，信息安全设置，需要进行个人绑定操作。同班同学将自动添加为好友，家长学生老师账号将自动互相关注，同时作为老师登录这个页面会多一个发布选项来让老师发布课程视频及习题。我的收藏主要用于学生发现好的课程习题时将其收藏起来避免丢失；成就系统是当你达成一定条件时会有勋章以及奖励赠送；学习记录是你的学习的过程时间等的记录无法删除，这样能使家长更好的督促孩子的学习；积分是购买课程赠予的积分以及奖励的积分所消费的地方；年级是录入你的学习年级班级等的地方。

该项目为我第一个独立的完整界面设计，在制作时也参考了网络上的一些其他软件的设计规范与好的思路，我个人认为这是一个能让自己进步，能更好完成这个软件设计的一个相对严谨的做法。同时在这一步上也加上自己的思维创新。包括一些细节设计，搭配都尽量地把自己的想法给体现出来。我也正学着去创立一个完全属于自己的独特风格以避免于大众化。整套设计，从最初的原型，logo，产品图标，到最后的视觉设计，一款完整的界面应当是有着一个明确的视觉主方向，我也是努力地朝这个方向去发展，这是在设计过程中需要注重的。同时在此之外，一个软件还需要好的交互才能使得用户有着更好的体验，我还需要更努力地去创新设计与完善交互才能使得自己取得更大的进步。