渭南师院智慧校园APP UI设计研究

赵梦涵 李萌萌

摘要：渭南师院智慧校园APP UI设计研究，通过平台提高了学校教育的信息化水平，基于大数据模式下的教育管理與教育教学实现形式，逐步解决校园教学和生活中存在的问题和师生的困扰，为在校师生打造更好的学习和生活环境，提供更加便利的服务。

关键词：智慧校园;智慧教育;学校信息化

一、渭南师院智慧校园APP UI设计概述

教育是发展的重中之重，国家对教育事业的发展格外重视，智慧教育和教学也在逐渐发展，壮大，社会的进步，科学的发展离不开教育，教育能够更好地发展也离不开科学，两者相辅相成，智慧校园APP UI设计为信息化的教学提供更高效的模式，使在校师生可以更好的使用校园资源。

二、渭南师院智慧校园APP UI设计创意构思

1.    渭南师院智慧校园APP UI设计创意来源

随着教育信息化建设和信息技术融合创新的不断深入，结合渭南师院学校的实际情况，对老师与学生的问卷调查和数据分析研究，了解到在师生校园生活中的各种需求，从理论和实践两个方面研究智慧校园的现状，展开思考。第一，了解在校师生的校园生活需求，例如：由于学校生活的必需需求，产生了洗澡卡，饭卡，水卡，洗衣卡，充值校园网的软件，充值饭卡的软件等等，所以时常存在丢卡现象，部分卡又不能补办，于是带来了一系列的麻烦，使生活不免有些繁琐;学院通知与教学资源，通常需要班干部进行传达，而班干部消息繁多，容易遗漏个别信息，导致错过重要的活动，比如四六级考试，补考等;老师授课内容不能最大化进行分享;为此制定合理的方案，提高校园生活效率，减少不必要的损失和麻烦，将知识最大化的呈现，达到资源共享的目标;第二，完善配套机制促进智慧校园建设的有序开展;第三，由于每所大学都有不同的特点，所以探索建立与高职院校发展目标相适应的“校本化”智慧校园;第四，尝试建立智慧校园建设的审查评估机制，提升教育信息化服务水平，使研究方向更加明确。通过以上四点发现和总结，结合渭南师院的师生反馈，由此进行渭南师院智慧校园APP UI设计。

2.    渭南师院智慧校园APP UI设计创意过程

（1）渭南师院智慧校园设计前期

在生活功能上，渭南师院智慧校园设计灵感源于校园生活中越来越多的师生反映因为硬性需求，需要有各种洗澡卡，饭卡，水卡，洗衣卡等才能在学校生活，为此在渭南师院智慧校园APP功能上设计了虚拟卡片，通过移动端，将所有需要的卡片进行整合，可以方便师生操作，个人的账号可以有效地记录管理卡片，减少生活中忘记卡片随身携带的麻烦，防止了卡片丢失带来的损失，减少了制作卡片的成本，为在校师生提供更高效的服务;学校通知下达，需要逐层传达，可能遗漏或超时，通过移动端的校园消息通知功能，可以及时了解校园动态，防止遗漏，提高效率;校园中的知识丰富，老师的精彩授课，图书馆的大量书籍，好的知识应该被最大化的分享，创造更多的价值和意义，渭南师院智慧校园APP设计了资源共享功能，老师可以提供线上直播课程，不仅限于本专业的学生，感兴趣的在校师生都可以观看，图书馆资源可以在线上查找预览，实现随时阅读，高效学习。

在风格设定上，采用扁平化的设计方式，这样的设计更加简洁，方便用户操作，提升用户体验和使用效率;破界的处理，增强视觉冲击力;错位的排版提升画面创意使界面表现更有创意;引导页和缺省界面以插画的方式展现，引导页插画明确告知用户产品的功能和使用方法;给用户提供指引;缺省页的插画可以缓解用户的负面情绪，为用户带来更好地体验和感受。

在应用上，主要以手机移动端、Ipad和智能穿戴为应用载体，保证用户的方便使用，用户在学习和校园生活中更加便捷。

在色彩搭配上，因为针对在校师生，用户人群相对年轻，对学习，工作充满热情所以采用主色调以紫色，突出年轻人的朝气蓬勃，胆识和勇气，对未来无限的可能，紫色富有内涵而深沉，表达了在校老师的学识，通过这样的颜色，展现了渭南师院APP的师生特点以及核心理念。

（2）     渭南师院智慧校园APP UI设计草图

绘制设计草图，确定渭南师院智慧校园APP的Logo，引导页的信息传达，功能的操作流程，标题栏中图标的设计，金刚区图标设计。

（3）     渭南师院智慧校园APP UI设计过程

使用Adobe Photoshop CS6、Adobe Illustrator CC2014根据低保真原型图绘制APP的功能界面，引导页和缺省页，选择符合APP的主色，辅助色和点缀色，借鉴优秀的设计作品和交互方式完善作品，Adobe After Effects CC2018制作动效演示。

（4）     渭南师院智慧校园APP UI设计成果

通过Adobe After Effects CC2018制作整款APP的界面和交互流程，重点突出作品的创新之处，最终以动效的形式展现交互效果。

3.    渭南师院智慧校园APP UI设计艺术特色

（1）     渭南师院智慧校园APP定位

渭南师院智慧校园APP是一款针对渭南师院在校师生设计的功能类软件，此款软件的设计主要以资源共享，消息通知，卡片合集为主要内容，使校园生活更加便捷。

（2）     渭南师院智慧校园APP实用性

通过智能化，使学校更加高效，从服务到管理都可以得到提升，减少资源的浪费，使沟通更加快捷，校园信息资源的共享，使资源最大化展现和利用，为师生提供了更高效的教学和学习体验。

通过感知化，对校园的教育、传输、整合、处理和分享，结合校园物联网系统的管理与控制，实现校内考勤、门禁、消费、信息接收和互动等功能的整体感知，提高校园的运行效率。

通过互动性，使人与人，人与物之间可以更加方便，快捷，流畅的互相联通。

（3）     渭南师院智慧校园APP风格

这款APP在整体风格是插画和不同卡片形式的应用，为用户提供更好地视觉感受和交互体验。

4.    创作手法

通过手绘进行思维导图和APP界面的手绘图稿，使用Xmind6完善思维导图，强调创新之处和界面的级别，使逻辑关系更加清晰明了，在电脑上运用Adobe Photoshop CS6、Adobe Illustrator CC2014、制作界面，Logo，所需元素的繪制，使用Adobe After Effect CC2018制作界面与界面之间内容的交互，建立人与界面之间的使用形式，从而完成更好地交互体验，同时能更完整的介绍整款APP的界面所具有的使用属性。

APP的Logo设计是根据APP的功能与名称结合设计的，颜色与APP的主色调保持一致，可以点击到的Icon大小是44-60像素，能够充分表现APP的功能特点，使用户的操作更加方便。

字体选用苹方字体，最小字体为22号字体，标签栏高为98px。在单个界面采用的比较常见的IphoneX尺寸，大小是828*1792px。整体画面布局使用卡片的形式，给用户舒适的视觉体验。

设计软件：Adobe Photoshop CS6、Adobe Illustrator CC2014、Ado‐be After Effect CC2018。

5.    渭南师院智慧校园APP UI设计效果图综述

渭南师院智慧校园APP UI设计共有15张界面设计，分为引导页，登录页，卡片合集，校园网，洗澡功能，洗衣功能，我的共六个界面模块，每个部分都有相对应的功能，之间的关系相辅相成，方便用户操作。

渭南师院智慧校园APP UI设计为顺应社会发展，打造物联网的交互方式，实现智能化，互动性，感知化的多方面深入，挖掘用户潜在需求，打在智慧校园生活。

作为功能类APP，可以多一些细节设定和制作，Icon可以添加更加新颖的交互动效，随着发展和用户的使用反馈，APP还需要不断地迭代更新，提供更好的交互体验。

参考文献

[1]   李成杰，李露.运动APP用户体验结构研究[J].包装工程，2020，41（08）：128-133.

[2]   张粤湘，张焯宇，刘钰.AR高校校园APP模式创新研究[J].科技与创新，2020（16）：97-98.

[3]   郑禄红，程南清.智慧校园视野下学校信息化领导力的建设及培养路径[J].中国远程教育，2020（08）：55-61.

[4]   常刚.多校区智慧校园模式探析——以陕西职业技术学院为例[J].计算机产品与流通，2020（09）：250.

[5]   豪越HYDO职业技术院校运维管理解决方案[J].网络安全和信息化，2020（08）：143.

作者简介

赵梦涵（1999—），女，汉族，河北省迁安市人，本科，主要从事数字媒体艺术方向研究。

李萌萌（1998—），女，汉族，山西省晋中市人，本科，主要从事数字媒体艺术方向研究。

基金项目：陕西省大学生创新创业训练计划项目：渭南师院智慧校园APP UI设计研究（S201910723057）。