朱麗進

摘要：該文主要介紹UI/UE技術(shù)在iOS開發(fā)中起到?jīng)Q定性的核心作用，同時就高職學(xué)生的特點，開設(shè)UI/UE相關(guān)技術(shù)課程，利用輔助設(shè)計工具Photoshop、Sketch以及Xcode等，以完整案例歡樂頌為例，帶領(lǐng)學(xué)生如何完成UI/UE設(shè)計過程。

關(guān)鍵詞：UI/UE；圖標(biāo)；界面；交互式；歡樂頌

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2018）03-0070-02

1 iOS應(yīng)用開發(fā)UI/UE設(shè)計概述

智能手機發(fā)展到今天已經(jīng)十余年載，風(fēng)靡全球，蘋果的iphone手機更是獨占鰲頭，當(dāng)然這也與蘋果iphone手機的UI界面美觀和很好的用戶體驗分不開的。試想一下，一個看起來不美觀的應(yīng)用程序，是很難引起用戶的點擊和繼續(xù)探索的欲望的。更何況在競爭如此激烈的APP市場中，出眾的UI設(shè)計才能完勝。

在iOS應(yīng)用開發(fā)中，作為手機人機交互的紐帶——UI，它將成為手機市場的新賣點，同時也是手機的發(fā)展動力。蘋果iphone手機基于iOS 系統(tǒng)，有很多傳感器應(yīng)用在手機上，如：運動，加速傳感器、環(huán)境光傳感器、距離傳感器、磁力計傳感器、陀螺儀等等，讓操作界面更是酷炫無比，脫離了傳統(tǒng)手機應(yīng)用的單調(diào)和刻板。本文主要結(jié)合iphone本身的特點以及手機用戶的視覺，觸感等方面入手，闡述在iOS 開發(fā)中如何把UI設(shè)計的讓用戶操作習(xí)慣，審美特征，視覺感受，功能期望等等做到更好，讓用戶在人機交互中體驗最大程度人性化。本文以課堂教學(xué)案例校園歡樂送APP UI設(shè)計為例。

2 iOS 開發(fā)中UI/UE設(shè)計基礎(chǔ)

1） 圖片的處理

對于網(wǎng)絡(luò)上豐富的圖片資源，我們在做設(shè)計的時候都可以進行綜合運用，不但提高視覺效果也提高了設(shè)計的效率。例如應(yīng)用程序啟動畫面通常都是有若干張圖片輪播滑動產(chǎn)生的效果，這時我們就需要圖片素材了。但是網(wǎng)絡(luò)上的圖片往往不符合要求，我們需要進一步處理。例如，圖像大小應(yīng)針對具體的設(shè)備來進行裁剪；圖片中的冗余信息我們也要去掉；另外還要針對圖像的格式進行恰當(dāng)選擇，位圖和矢量圖如何取舍，更多的時候我們選擇PNG格式的圖片。

要想把照片處理達到我們想要的預(yù)期效果，更多時候我們選擇Photoshop軟件。

美國 Adobe 公司研究和推出的 Photoshop軟件在全球范圍內(nèi)廣泛使用，通過融入平面廣告設(shè)計、圖像合成、包裝設(shè)計等多方面功能來完成新的融合，在多個領(lǐng)域均有涉獵和拓展，從用戶使用和處理效果來說，Photoshop已經(jīng)成為了平面圖像處理的標(biāo)準(zhǔn)之一。Photoshop本著以人性化、實用化為目標(biāo)，通過其簡介的操作界面，快速有效地完成各種設(shè)計，提高的設(shè)計的效率，收到廣大設(shè)計者的信賴。

2） APP圖標(biāo)及按鈕的設(shè)計

APP圖標(biāo)一般放置在主屏幕上的，用戶通過點擊圖標(biāo)來啟動應(yīng)用程序，它就類似于你手機APP產(chǎn)品的LOGO，用戶看到圖標(biāo)的時候就對你的APP產(chǎn)生了第一印象，甚至有可能以此來判斷你的APP品質(zhì)，作用以及可靠性等，因此圖標(biāo)設(shè)計的好壞關(guān)系到你APP的存亡，它是APP UI設(shè)計中非常重要的工作。

如何做好APP圖標(biāo)設(shè)計，我們先要將APP的應(yīng)用功能具體化，然后通過聯(lián)想找到對應(yīng)圖形，緊接著將抽象圖形。例如天氣預(yù)報APP，我們聯(lián)想到太陽，云都是跟天氣有關(guān)，因此iphone中的APP用太陽和云朵抽象組合，圖標(biāo)來源與生活，讓用戶也倍感親切。

但值得注意的是，抽象圖形不能過于抽象，否則很難分辨，從而降低了圖標(biāo)的識別度，從而適得其反。

有時候相同功能的APP可能存在一定的相似之處，如微信和米聊，都是聊天通信應(yīng)用程序，他們都是有氣泡組成的，因此在做設(shè)計之前最好還是要做好調(diào)研工作，看看同行設(shè)計的樣子，然后通過分析調(diào)整設(shè)計，做到區(qū)別而又新穎獨特。

Sketch是一款使用與所有設(shè)計師的矢量繪圖應(yīng)用，而矢量圖也正是目前網(wǎng)頁、圖標(biāo)和界面設(shè)計最好的方式。同時Sketch除了矢量編輯的功能外，還添加了一些基本位圖工具，如模糊和色彩校正等。目前越來越多的設(shè)計師開始使用Sketch去做UI界面設(shè)計，原因很多，一方面它足夠輕巧，對系統(tǒng)配置要求不高；另一方面，內(nèi)置了大量提高工作效率的特性，使用起來很方便；還有救是他的朵花瓣工作模式，讓設(shè)計師在同一個界面可以將交互過程串聯(lián)起來非常方便。

歡樂送app主圖標(biāo)作為一個app的靈魂，必須要充分反映此款app的主題，首先底部選擇一個圓角矩形作為背景，因為此款app使用對象是大學(xué)生，主要是用于大學(xué)生代拿快遞的app?，F(xiàn)在大部分大學(xué)生性格急躁做事情急于求成，使用圓角矩形寓意讓學(xué)生做事情學(xué)會圓潤，做事情不能急躁。然后圖標(biāo)背景色是灰白漸變色，如果單獨選用白色會顯得單調(diào)。翅膀有兩重含義，一種是代表了我國快遞業(yè)迅速發(fā)展；另一種則代表使用歡樂送app可以讓學(xué)生更快的拿到快遞。翅膀的色彩也選用紫藍色的漸變色。代表了大學(xué)生充滿了活力，給人一種生機勃勃的感覺。此款圖標(biāo)給人一種簡答大方明了的感覺。

3 iOS應(yīng)用交互式UI設(shè)計

1） APP高保真原型設(shè)計

產(chǎn)品原型設(shè)計是整個產(chǎn)品面世之前的一個框架設(shè)計，將頁面的模塊，元素、人機交互的形勢，利用設(shè)計工具對產(chǎn)品進行生動的表達。設(shè)計軟件原型，它并不是可以作為最終使用的軟件，而是利用設(shè)計工具勾勒軟件的整體結(jié)構(gòu)，并添加一些交互效果，甚至可以模擬軟件的功能操作。根據(jù)項目的大小、類型、工期以及用戶需求的不同可以選擇采用草圖原型。低保真原型或者高保真原型。

作為計算機專業(yè)學(xué)生，我們選擇Axure RP幫助我們根據(jù)需求設(shè)計功能和界面，可以快速地創(chuàng)建應(yīng)用軟件的線條圖、流程圖、原型和規(guī)格說明文檔，同時支持多人協(xié)作和版本控制管理，是一款非常專業(yè)的快速原型設(shè)計軟件。

實際設(shè)計過程中，我們利用Axure RP豐富的部件庫來搭建每一個頁面，結(jié)合母版的設(shè)計從而減少重復(fù)工作量。然后充分利用Axure RP的動態(tài)面板，變量，鏈接行為，部件行為等制作豐富的交互效果。同時還可以利用中繼器模擬數(shù)據(jù)庫的增刪改查操作，從而達到高保真原型設(shè)計的要求。

我們以校園歡樂送APP設(shè)計為例，在實際教學(xué)過程中，讓學(xué)生在校園里跟潛在學(xué)生用戶進行需求溝通和市場調(diào)研，然后進行項目評估，做好之后，讓學(xué)生在課堂上針對這個項目完成APP原型設(shè)計。

這款歡樂送APP，主要是用戶發(fā)布自己的快遞信息，包括送達時間，快遞公司，取貨號碼，備注，賞金工作人員可以及時掌握，然后申請搶單，將快遞給用戶送上門，然后用戶通過APP支付傭金。主要功能包括：

引導(dǎo)頁：App開始動圖展示。點擊GO進入。

用戶登錄：登陸App，通過學(xué)號和身份證后六位登錄。

動態(tài)界面：用戶發(fā)布快遞信息的動態(tài)，工作人員可以在此界面接單。

發(fā)布界面：用戶可以在此界面發(fā)布快遞信息（送達時間，快遞公司，取貨號碼，備注，賞金）點擊確認發(fā)布跳轉(zhuǎn)到訂單界面。

訂單界面：包括我的訂單，我的跑腿。

我的界面：里面有自己賬戶的金額，簽到記錄，積分管理，實名認證，收貨地址，設(shè)置，分享賺積分。

這些功能，我們基本都設(shè)計為啟動畫面，Tab的切換，熱區(qū)的運用，淡入淡出，左右滑動，上下滑動，彈出面板，回彈效果，單擊等等交互效果。

2） Xcode的引入，讓設(shè)計師知其所以然，提高設(shè)計效果

Xcode本身提供了很多便捷化的圖形化設(shè)計工具，幾乎不用編碼，就可以完成一個簡單的APP設(shè)計。因此引入Xcode的安裝和項目結(jié)構(gòu)，以及簡單Demo的制作：如使用故事版創(chuàng)建交互效果，利用Tab Bar完成交互效果，頁面滾動效果和導(dǎo)航效果等等。讓學(xué)生在這些內(nèi)容的學(xué)習(xí)過程中，能夠?qū)浖幕鹃_發(fā)原理，像素等有所了解，在設(shè)計過程中，可以嚴格按照要求，會搭配編碼工程師完成相應(yīng)的UI設(shè)計，大大提高設(shè)計的效率和效果。

4 總結(jié)

在iOS 開發(fā)過程中引入UI/UE設(shè)計知識，給整個教學(xué)提高了很大的效果，很多大學(xué)程序設(shè)計類課程都是重技術(shù)輕設(shè)計，忽略了軟件的前期策劃和創(chuàng)意設(shè)計部分，但實際過程中，APP的原型制作恰恰是對軟件的功能和用戶體驗起決定性作用。同時，對于高職類的學(xué)生來說，他們的專業(yè)基礎(chǔ)知識相對比較薄弱，一開始就學(xué)習(xí)生硬的編碼，難度大，進而失去對專業(yè)的學(xué)習(xí)興趣，因此引入UI/UE設(shè)計，能提高學(xué)生學(xué)習(xí)的積極性，更增加了他們的創(chuàng)造力。課堂上，他們可以暫時拋掉枯燥乏味的后臺開發(fā)，編碼，投身并不斷嘗試新的想法和設(shè)計，反復(fù)研究交互效果，多樣化的作品，讓學(xué)生更有學(xué)習(xí)的成就感。

參考文獻：

[1] 趙曉影.Android應(yīng)用開發(fā)中的UI[J].設(shè)計勞動保障世界，2013（12）.

[2] 王東.Photoshop平面廣告創(chuàng)意技巧及應(yīng)用[J].電子出版，2003（4）：51-54.

[3] 靜電.Sketch+Xcode雙劍合璧移動UI設(shè)計師快速上手指南[M].北京：電子工業(yè)出版社，2015.

[4] 何健寧.基于Axure的APP原型設(shè)計在教學(xué)中的應(yīng)用[J].電腦開發(fā)與應(yīng)用，2014（8）.

[5] 林曉亮.智能手機UI主題界面交互設(shè)計[D].南昌：南昌大學(xué)，2016.