App 開發中的UI 設計技術

畢程程 宋璐明 楊賽超

（1、防災科技學院，吉林 梅河口135000 2、防災科技學院，河北 邯鄲057150 3、大連工業大學，河北 邯鄲057150）

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

1 UI 設計需要的技術

1.1 圖像處理

在網絡上擁有琳瑯滿目的資源，這些對于我們在做UI 設計過程中可以說是無價之寶。很多時候無從下手，這些資源都可以給我們靈光一現的感覺。在我們可以進行綜合運用情況下怎么樣進行圖片的處理就變得尤為關鍵。例如，圖像的大小、文字搭配是否美觀等等問題的處理。針對于圖片的處理，基本運用photoshop 軟件或者是網絡上一些比較快捷的網站，像一些想要快速的進行P 圖和摳圖的實現，運用Photoshop 軟件中太過于繁瑣，，這時候運用網絡上的快捷處理圖片的網站就會比較快速的出成果圖。但對于細節的處理，還是運用Photoshop 更好，Photoshop 主要處理以像素所構成的數字圖像。它擁有眾多的編修與繪圖工具，可以專業地進行圖片處理工作。

1.2 Logo 設計

Logo 設計可以說是整個APP 的靈魂，它代表著一個象征。這個象征要具有特色、要與眾不同的魅力。客戶可能因為你的logo 就一概而論，所以logo 設計尤為重要。而我們想要做好logo設計，就要把APP 的應用功能具體化，找到APP 主要想展現什么有什么特點，把這些特點和內容陳列出來，然后進行最后的組裝。這里一定要注意，即使想表達特性也不要同時表現太多個，那樣顯得過于繁瑣。而大學時光App 作為面向大學生的一款APP 自然選擇了“學生”這個特性，經過不斷的修改最終得出最后的logo。

1.3 圖標的設計

圖標設計主要是標簽欄中具體功能的明確表現，目的是用圖形的方式引導用戶快速尋找想要找到的功能。而圖標樣式分為面形圖標、線形圖標、線形和面型圖標的結合、節日圖標。像“發現”就和放大鏡有關等等很多都是生活中我們慣用的東西，結合實際加以想象就可做出好的圖標設計。

1.4 主頁面的設計

主頁面的設計還是要運用Photoshop 軟件，多去看看成功的例子，然后養成自己的慣性思維，知道什么地方放圖標好看，什么地方放文字好看，形狀是什么樣子的順眼，顏色是什么和主題比較搭等等的問題都需要自己反復的實驗與嘗試。

2 設計的模塊

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

圖1 交易界面

圖2 知章界面

圖3 時光界面

圖4 我的界面

3 具體實現的內容

3.1 logo 模塊的設計過程

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

圖5 大學時光APP 應用程序的logo

3.2 引導界面的設計過程

大學時光APP 引導界面，工作人員主要想以整潔、簡單為主。所以引導界面上，并沒有展現太多的元素，在設計初期，本想以灰色背景為主、然后加上白色字體的勵志言語，以豎列的座右銘形式展現出來，最終因為這種形式太過于大眾化而取消，工作人員都統一認為用APP 的名稱用以裝飾即可，即簡明扼要又通俗易懂。又因灰色背景的顏色和logo 過于相近，使這個格調顯得暗沉，所以把背景改成和主頁面一樣的設計風格變為黃色，文字也因背景的調整進行了相應的調整，整體顯得更加的和諧和美觀。

3.3 登錄界面的設計過程

登錄界面主要想要實現的就是用戶名的輸入，密碼的輸入和登錄按鈕。用戶名的輸入和密碼的輸入都需要相應的文本框，文本框起初用photoshop 中矩形工具下拉欄中的圓角矩形工具來進行文本框背景、大小、邊框粗細來進行調整，后來對頁面進行了優化，改為一條橫線。用戶名、密碼常規用文字來進行裝飾，但我們卻選用小圖標的方式代替了文字描述。登錄按鈕采用白色背景和黑色漢字和無邊的圓角矩形進行修飾。記住密碼、立即注冊即記住密碼等等的文字則用Photoshop 中橫排文字工具。

4 結論

在大學時光APP 開發過程中，美觀的界面吸引了不少用戶，給APP 整體增加了不少的光彩。本文講述了大學時光APP 運用Photoshop 和Adobe Illustrator 等輔助軟件進行了用戶各個界面和logo 設計的過程、設計初期遇到的問題和最后整合后的方案。

大學生創新創業項目: 防災科技學院大學生創新創業項目“大學時光APP”(201911775093)。