周正 司占軍 曠羚惠

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

關(guān)鍵詞：UI設(shè)計(jì);人機(jī)界面;后臺(tái)研究

中圖分類(lèi)號(hào)：TP37

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）04-0054-02

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

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

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

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

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

2.1 原型圖設(shè)計(jì)

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

2.2 設(shè)計(jì)稿的標(biāo)注與切圖

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

2.3 圖標(biāo)設(shè)計(jì)

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

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

2.4 界面柵格化處理

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

2.5 文字字號(hào)字體及顏色

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

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

3.1 交互設(shè)計(jì)

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

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

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

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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