校園學付寶APP界面UI設計與應用研究

周正 司占軍 曠羚惠

摘要：現代社會的信息傳播大部分人都是通過互聯網去獲得，并且考慮到設備的便捷性和快癡性，移動端比PC端更為受歡迎，因此，校園服務APP系統也在此潮流下逐步發展起來。該文設計了一款校園學付寶APP的UI界面，并從需求分析、設計準備及制作、前端到后端搭建以及設計完善等方面進行了設計與制作。

關鍵詞：UI設計;人機界面;后臺研究

中圖分類號：TP37

文獻標識碼：A

文章編號：1009-3044（2020）04-0054-02

UI設計在如今的信息化社會中飛速發展著，在滿足了功能的基礎上，越來越多的用戶開始重視UI界面的美觀程度以及體驗感。一個好的UI界面能夠給人帶來第一感官的舒適性，這也是界面設計師應該注重和深入研究的問題。

隨著互聯網的飛速發展，線上支付已經成為一種新型的支付方式，學生卡的充值、余額查詢、及時掛失等功能顯得更為重要，為了更好地服務于學生的校園生活，移動端的支付平臺應運而生。學付寶是一款校園服務APP，線上能夠提供充值、支付、余額查詢、修改密碼、凍結賬戶等一系列服務，解決了大學在校師生在傳統模式上的不便，通過移動端設備的智能交互，打造輕松校園、智慧校園。

1 校園學付寶APP界面制作工具介紹

使用AdobePhotoshop.Adobeillustrator合理的設計UI界面圖文功能結構布置、色彩搭配，以及個性化圖標的繪制，交互部分釆用Axure，AdobeXD進行各個頁面之間的交互設計，設計師使用AdobeXD可以更高效準確的完成靜態編譯或者框架圖到交互原型的轉變川。后臺開發則使用了微信web開發者工具。

2 校園學付寶APP界面規范化設計

2.1 原型圖設計

原型圖可以幫助設計師更好地發現并解決問題，同時也可以更好地使用戶思考核心的概念內容。在進行校園學付寶APP界面設計時，釆用了UI尺與Photoshop軟件兩者相結合的方式，先用UI尺與鉛筆大概繪制出APP的線框圖，從客戶的角度去思考這個APP所需要的功能，并且用Axure整理出整體的流程圖，進行每個頁面需要實現的功能分析，最后計算好界面尺寸，使用Photoshop軟件中的標尺工具繪制岀整齊規范的產品原型圖。

2.2 設計稿的標注與切圖

在設計的時侯，需要對設計稿有一個明確的布局標注，這里使用了PxCook軟件中的文字標注工具同時結合PS進行標注。標注的內容有：文字字體的大小、顏色;頂部標題欄的背景色值，透明度;內容顯示區域的背景色，底部標簽欄的背景色值;圖標大小以及點擊區域的位置;圖片的寬高等。此次校園學付寶APP設計以iphone6/6s為原型，狀態欄和導航欄的高度分別為40px和88px，切圖尺寸為ico_car@2x.pngo另外，針對一^圖標在不同情況下有不同的狀態，對每一種狀態都制作了對應的切片。

2.3 圖標設計

在設計中要善于利用圖標語義引導用戶行為。如釆用象形圖形來制作圖標，如短信、通訊簿等，用字符來制作圖標，如IE瀏覽器、支付寶的圖標，還可以用一些抽象的符號來隱喻要代表的應用⑵。校園學付寶APP的圖標設計使用了線面結合的方式利用一些模擬形象來達到希望傳遞的效果，考慮到用戶群體以學生為主，采取了多彩色設計給人以很青春的感覺。

應用中心的圖標含有情感化和陰影的設計元素，通過粗細一致的線條去繪制，高度概括并勾勒出各類代收費、愛心捐贈、離校申請、城市卡充值等應用中心的主要功能，使得整個頁面整齊劃一，利用圓角包圍圓角圖標給人以親和力，使用起來更能貼合用戶本身，增加用戶粘性。

2.4 界面柵格化處理

柵格系統的設計可以保持整體設計的一致性、專業性，合理的利用界面設計功能區布局，以達到頁面整潔有序。首先定義最小設計單位為4，左右間距縱向間距為24，28。其次，確定邊距和水槽大小，這就是我們定的柵格四列，系統骨架，設計時保證每個設計元素都在框架內，保持規則，邊距與水槽盡量避免放置內容，如果放，盡量釆用組的形式。

2.5 文字字號字體及顏色

校園學付寶APP以ios端設計尺寸為標準，字號范圍一般在20-36px之間（@2x），英文使用的是SanFrancisco字體，中文使用的是蘋方黑體。字體顏色通常很少用純黑色，一般釆用深灰色和淺灰色、粗體和細體來進行信息層級的劃分。

3 校園學付寶APP界面整體開發環境研究

3.1 交互設計

首頁是連接所有頁面的核心內容，它的設計至關重要。在頁面上方放置了兩個能夠對用戶登錄狀態和整個APP進行設置的按鈕，左邊的個人按鈕可以使用戶退出登錄狀態或者切換其他賬號，右邊的設置按鈕是針對整個APP的基本調整，如調整為夜間瀏覽模式、清除緩存、隱私設置等功能。

交互設計是為了滿足用戶最基礎的需求，在對首頁進行分析之后，添加了以下幾個常用的主要功能：支付、出示付款碼、卡包以及認證碼。在設備連接上了學校的支付系統后，即使沒有攜帶校園卡，也能夠通過手機對校園里的財務來往進行操作，為在校師生提供了便利。除此之外還添加了一些針對校園生活的功能，如校園卡充值、校園卡掛失，流水查詢等，學付寶APP首頁如圖4所示。在對頁面進行功能分析之后，通過Ado-beXD軟件進行界面的交互設計。

3.2 后臺開發環境

學付寶APP的后臺開發使用了微信web開發者工具，首先需要根據自己電腦的版本下載微信官方提供的模擬器，下載安裝完畢以后環境就已經搭建完成。初始化的項目包括一些簡單的代碼文件，如app.js、app.json、app.wxss。其中，.js后綴的是腳本文件，.json后綴的是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。針對校園學付寶開發，主要是一些樣式表的代碼，還有基礎內容、導航組建和媒體組件的代碼學習，用以實現一二級頁面的連接跳轉。在首頁選擇卡片式輪播設置更符合當下的趨勢，能夠更加吸引用戶，輪播代碼如下所示。

4 結束語

本文通過小程序完成了UI設計跟后臺應用開發這兩個關鍵技術的結合。本次校園學付寶APP界面UI設計在經過對設計稿進行多次修改之后，圍繞著用戶核心內容做出了從布局到功能的調整，但仍存在著一些不足，比如在前期設計的時候，沒有做到大量的用戶調研與行為研究。一個APP從前期設計到上應用商店進行調試，是一個長期且需要團隊分工的過程。雖然目前國內各院校還沒有設立相對健全的UI設計專業，但未來這個行業肯定會越來越貼合我們的生活并服務于我們的社會，也會有更多的人投入到界面研究等相關行業。

參考文獻：

[1] 李鐵萌，侯文軍，陳冬慶.對移動互聯網產品交互設計中控制感的研究[J].北京郵電大學學報：社會科學版，2014，16（4）：7-11.

[2] 張欣悅.App開發中的UI設計技巧[J].電腦知識與技術，2016，12（2）：82-83.

[通聯編輯：謝媛媛]