渭南師院智慧校園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）。