App 開發(fā)中的UI 設(shè)計(jì)技術(shù)

畢程程 宋璐明 楊賽超

（1、防災(zāi)科技學(xué)院，吉林 梅河口135000 2、防災(zāi)科技學(xué)院，河北 邯鄲057150 3、大連工業(yè)大學(xué)，河北 邯鄲057150）

進(jìn)入新時(shí)代以來(lái)，信息技術(shù)發(fā)展速度不斷加快，我國(guó)手機(jī)用戶已超過(guò)14 億，手機(jī)APP 的應(yīng)用也越來(lái)越廣泛，對(duì)于當(dāng)人們來(lái)說(shuō)利用APP 進(jìn)行交易、閱讀、學(xué)習(xí)已經(jīng)成了生活中不可缺少的一部分。競(jìng)爭(zhēng)如此激烈的行業(yè)，想要在初始階段吸引用戶的興趣，第一印象是最重要的，也就是指的是用戶界面。試想一下，一個(gè)很有內(nèi)容的、運(yùn)用大量技術(shù)層面的一個(gè)應(yīng)用程序，但是沒(méi)有美觀整潔的用戶界面，哪怕開發(fā)者說(shuō)的再天花亂墜，用戶也不會(huì)想了解那么深層的東西。所以，讓人耳目一新的界面，也就是用戶交互體驗(yàn)，才能更好的讓用戶再人機(jī)交互中得到最大程度的人性化。因此在大學(xué)時(shí)光app 中不僅實(shí)現(xiàn)了美輪美奐的界面，還實(shí)現(xiàn)了大學(xué)生可以使用手機(jī)觀看各科的卷子、例題等“題庫(kù)”功能。本軟件通過(guò)在Android Studio 開發(fā)環(huán)境下集成并使用Java 語(yǔ)言編程，測(cè)試結(jié)果使用Oracle 數(shù)據(jù)庫(kù)保存。并運(yùn)用photoshop、Adobe Illustrator 等軟件進(jìn)行UI 設(shè)計(jì)的實(shí)現(xiàn)。

1 UI 設(shè)計(jì)需要的技術(shù)

1.1 圖像處理

在網(wǎng)絡(luò)上擁有琳瑯滿目的資源，這些對(duì)于我們?cè)谧鯱I 設(shè)計(jì)過(guò)程中可以說(shuō)是無(wú)價(jià)之寶。很多時(shí)候無(wú)從下手，這些資源都可以給我們靈光一現(xiàn)的感覺(jué)。在我們可以進(jìn)行綜合運(yùn)用情況下怎么樣進(jìn)行圖片的處理就變得尤為關(guān)鍵。例如，圖像的大小、文字搭配是否美觀等等問(wèn)題的處理。針對(duì)于圖片的處理，基本運(yùn)用photoshop 軟件或者是網(wǎng)絡(luò)上一些比較快捷的網(wǎng)站，像一些想要快速的進(jìn)行P 圖和摳圖的實(shí)現(xiàn)，運(yùn)用Photoshop 軟件中太過(guò)于繁瑣，，這時(shí)候運(yùn)用網(wǎng)絡(luò)上的快捷處理圖片的網(wǎng)站就會(huì)比較快速的出成果圖。但對(duì)于細(xì)節(jié)的處理，還是運(yùn)用Photoshop 更好，Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。它擁有眾多的編修與繪圖工具，可以專業(yè)地進(jìn)行圖片處理工作。

1.2 Logo 設(shè)計(jì)

Logo 設(shè)計(jì)可以說(shuō)是整個(gè)APP 的靈魂，它代表著一個(gè)象征。這個(gè)象征要具有特色、要與眾不同的魅力?？蛻艨赡芤?yàn)槟愕膌ogo 就一概而論，所以logo 設(shè)計(jì)尤為重要。而我們想要做好logo設(shè)計(jì)，就要把APP 的應(yīng)用功能具體化，找到APP 主要想展現(xiàn)什么有什么特點(diǎn)，把這些特點(diǎn)和內(nèi)容陳列出來(lái)，然后進(jìn)行最后的組裝。這里一定要注意，即使想表達(dá)特性也不要同時(shí)表現(xiàn)太多個(gè)，那樣顯得過(guò)于繁瑣。而大學(xué)時(shí)光App 作為面向大學(xué)生的一款A(yù)PP 自然選擇了“學(xué)生”這個(gè)特性，經(jīng)過(guò)不斷的修改最終得出最后的logo。

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

圖標(biāo)設(shè)計(jì)主要是標(biāo)簽欄中具體功能的明確表現(xiàn)，目的是用圖形的方式引導(dǎo)用戶快速尋找想要找到的功能。而圖標(biāo)樣式分為面形圖標(biāo)、線形圖標(biāo)、線形和面型圖標(biāo)的結(jié)合、節(jié)日?qǐng)D標(biāo)。像“發(fā)現(xiàn)”就和放大鏡有關(guān)等等很多都是生活中我們慣用的東西，結(jié)合實(shí)際加以想象就可做出好的圖標(biāo)設(shè)計(jì)。

1.4 主頁(yè)面的設(shè)計(jì)

主頁(yè)面的設(shè)計(jì)還是要運(yùn)用Photoshop 軟件，多去看看成功的例子，然后養(yǎng)成自己的慣性思維，知道什么地方放圖標(biāo)好看，什么地方放文字好看，形狀是什么樣子的順眼，顏色是什么和主題比較搭等等的問(wèn)題都需要自己反復(fù)的實(shí)驗(yàn)與嘗試。

2 設(shè)計(jì)的模塊

引導(dǎo)頁(yè)：APP 開始動(dòng)圖展示，以黃色為背景，中間是APP 的logo，下面是大學(xué)時(shí)光APP 的名稱。用戶登錄：登陸APP，通過(guò)用戶名和密碼進(jìn)行登錄，登錄后還可以綁定學(xué)校教務(wù)處。交易界面：用戶發(fā)布想要交易的物品，如圖1 交易界面所示。知章界面：分為資訊、問(wèn)答和題庫(kù)三個(gè)小功能，用戶可以在此模塊進(jìn)行瀏覽工作人員發(fā)布的學(xué)習(xí)內(nèi)容，如圖2 知章界面所示。發(fā)布界面：用戶可以在此界面發(fā)交易、知章/問(wèn)答和時(shí)光，用戶點(diǎn)擊發(fā)布或者發(fā)送按鈕后跳轉(zhuǎn)相應(yīng)的時(shí)光、交易和知章界面。時(shí)光界面：可以看到自己發(fā)送的時(shí)光消息和別人發(fā)布的時(shí)光消息，如圖3 時(shí)光界面所示。我的界面：里面有課程表、時(shí)光積分、我的時(shí)光、我的知章、我的收藏、我的交易和系統(tǒng)設(shè)置功能，還可以修改個(gè)人信息，如圖4 我的界面所示。這些功能，我們都設(shè)計(jì)為啟動(dòng)畫面，熱區(qū)的運(yùn)用，淡入淡出，左右滑動(dòng)，彈出和單擊等交互效果。

圖1 交易界面

圖2 知章界面

圖3 時(shí)光界面

圖4 我的界面

3 具體實(shí)現(xiàn)的內(nèi)容

3.1 logo 模塊的設(shè)計(jì)過(guò)程

大學(xué)時(shí)光APP 主要面向的是大學(xué)生的一些交友、學(xué)習(xí)、交易等功能。然而這些功能肯定不能同時(shí)都在logo 上展現(xiàn)出來(lái)，那么就要對(duì)這些特性進(jìn)行篩選，選出最想表達(dá)的，所以最終我們定下了大學(xué)生這個(gè)特性。特性選擇完之后進(jìn)行初稿的設(shè)計(jì)、我們選擇了一個(gè)正在看書的小女孩，但經(jīng)過(guò)多方的調(diào)查，反響都不是很好，最終定下來(lái)一個(gè)小女孩的側(cè)面作為主要的元素。主要元素定下來(lái)之后，進(jìn)行了手繪，把我們的想法變成實(shí)際的東西展現(xiàn)出來(lái)。再把紙上的東西用Adobe Illustrator 進(jìn)行繪制，運(yùn)用選擇工具、矩形工具、鋼筆工具等工具進(jìn)行繪制，先畫出大體的模樣，然后進(jìn)行細(xì)節(jié)的改變，經(jīng)過(guò)多次的實(shí)驗(yàn)和修改，定下來(lái)背景為黑色，然后又加上了APP 的名字和英文單詞、還是覺(jué)得少了什么點(diǎn)什么，多次實(shí)驗(yàn)后，加了一束光，這束可以說(shuō)是點(diǎn)睛之筆，整個(gè)圖標(biāo)變得活了起來(lái)，這才定下來(lái)最終的logo 圖標(biāo)，如圖5 所示。

圖5 大學(xué)時(shí)光APP 應(yīng)用程序的logo

3.2 引導(dǎo)界面的設(shè)計(jì)過(guò)程

大學(xué)時(shí)光APP 引導(dǎo)界面，工作人員主要想以整潔、簡(jiǎn)單為主。所以引導(dǎo)界面上，并沒(méi)有展現(xiàn)太多的元素，在設(shè)計(jì)初期，本想以灰色背景為主、然后加上白色字體的勵(lì)志言語(yǔ)，以豎列的座右銘形式展現(xiàn)出來(lái)，最終因?yàn)檫@種形式太過(guò)于大眾化而取消，工作人員都統(tǒng)一認(rèn)為用APP 的名稱用以裝飾即可，即簡(jiǎn)明扼要又通俗易懂。又因灰色背景的顏色和logo 過(guò)于相近，使這個(gè)格調(diào)顯得暗沉，所以把背景改成和主頁(yè)面一樣的設(shè)計(jì)風(fēng)格變?yōu)辄S色，文字也因背景的調(diào)整進(jìn)行了相應(yīng)的調(diào)整，整體顯得更加的和諧和美觀。

3.3 登錄界面的設(shè)計(jì)過(guò)程

登錄界面主要想要實(shí)現(xiàn)的就是用戶名的輸入，密碼的輸入和登錄按鈕。用戶名的輸入和密碼的輸入都需要相應(yīng)的文本框，文本框起初用photoshop 中矩形工具下拉欄中的圓角矩形工具來(lái)進(jìn)行文本框背景、大小、邊框粗細(xì)來(lái)進(jìn)行調(diào)整，后來(lái)對(duì)頁(yè)面進(jìn)行了優(yōu)化，改為一條橫線。用戶名、密碼常規(guī)用文字來(lái)進(jìn)行裝飾，但我們卻選用小圖標(biāo)的方式代替了文字描述。登錄按鈕采用白色背景和黑色漢字和無(wú)邊的圓角矩形進(jìn)行修飾。記住密碼、立即注冊(cè)即記住密碼等等的文字則用Photoshop 中橫排文字工具。

4 結(jié)論

在大學(xué)時(shí)光APP 開發(fā)過(guò)程中，美觀的界面吸引了不少用戶，給APP 整體增加了不少的光彩。本文講述了大學(xué)時(shí)光APP 運(yùn)用Photoshop 和Adobe Illustrator 等輔助軟件進(jìn)行了用戶各個(gè)界面和logo 設(shè)計(jì)的過(guò)程、設(shè)計(jì)初期遇到的問(wèn)題和最后整合后的方案。

大學(xué)生創(chuàng)新創(chuàng)業(yè)項(xiàng)目: 防災(zāi)科技學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)項(xiàng)目“大學(xué)時(shí)光APP”(201911775093)。