周正 司占軍 曠羚惠

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

關(guān)鍵詞：UI設(shè)計;人機界面;后臺研究

中圖分類號：TP37

文獻標識碼：A

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

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

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

1 校園學(xué)付寶APP界面制作工具介紹

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

2 校園學(xué)付寶APP界面規(guī)范化設(shè)計

2.1 原型圖設(shè)計

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

2.2 設(shè)計稿的標注與切圖

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

2.3 圖標設(shè)計

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

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

2.4 界面柵格化處理

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

2.5 文字字號字體及顏色

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

3 校園學(xué)付寶APP界面整體開發(fā)環(huán)境研究

3.1 交互設(shè)計

首頁是連接所有頁面的核心內(nèi)容，它的設(shè)計至關(guān)重要。在頁面上方放置了兩個能夠?qū)τ脩舻卿洜顟B(tài)和整個APP進行設(shè)置的按鈕，左邊的個人按鈕可以使用戶退出登錄狀態(tài)或者切換其他賬號，右邊的設(shè)置按鈕是針對整個APP的基本調(diào)整，如調(diào)整為夜間瀏覽模式、清除緩存、隱私設(shè)置等功能。

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

3.2 后臺開發(fā)環(huán)境

學(xué)付寶APP的后臺開發(fā)使用了微信web開發(fā)者工具，首先需要根據(jù)自己電腦的版本下載微信官方提供的模擬器，下載安裝完畢以后環(huán)境就已經(jīng)搭建完成。初始化的項目包括一些簡單的代碼文件，如app.js、app.json、app.wxss。其中，.js后綴的是腳本文件，.json后綴的是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序?qū)嵗ａ槍π@學(xué)付寶開發(fā)，主要是一些樣式表的代碼，還有基礎(chǔ)內(nèi)容、導(dǎo)航組建和媒體組件的代碼學(xué)習(xí)，用以實現(xiàn)一二級頁面的連接跳轉(zhuǎn)。在首頁選擇卡片式輪播設(shè)置更符合當(dāng)下的趨勢，能夠更加吸引用戶，輪播代碼如下所示。

4 結(jié)束語

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

參考文獻：

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

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

[通聯(lián)編輯：謝媛媛]