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

朱麗進(jìn)

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

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

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

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

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

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

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

1） 圖片的處理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

引導(dǎo)頁(yè)：App開始動(dòng)圖展示。點(diǎn)擊GO進(jìn)入。

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

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

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

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

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

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

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

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

4 總結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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