iOS開發中的UI/UE設計技術

朱麗進

摘要：該文主要介紹UI/UE技術在iOS開發中起到決定性的核心作用，同時就高職學生的特點，開設UI/UE相關技術課程，利用輔助設計工具Photoshop、Sketch以及Xcode等，以完整案例歡樂頌為例，帶領學生如何完成UI/UE設計過程。

關鍵詞：UI/UE；圖標；界面；交互式；歡樂頌

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

1 iOS應用開發UI/UE設計概述

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

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

2 iOS 開發中UI/UE設計基礎

1） 圖片的處理

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

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

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

2） APP圖標及按鈕的設計

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

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

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

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

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

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

3 iOS應用交互式UI設計

1） APP高保真原型設計

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

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

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

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

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

引導頁：App開始動圖展示。點擊GO進入。

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

動態界面：用戶發布快遞信息的動態，工作人員可以在此界面接單。

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

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

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

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

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

Xcode本身提供了很多便捷化的圖形化設計工具，幾乎不用編碼，就可以完成一個簡單的APP設計。因此引入Xcode的安裝和項目結構，以及簡單Demo的制作：如使用故事版創建交互效果，利用Tab Bar完成交互效果，頁面滾動效果和導航效果等等。讓學生在這些內容的學習過程中，能夠對軟件的基本開發原理，像素等有所了解，在設計過程中，可以嚴格按照要求，會搭配編碼工程師完成相應的UI設計，大大提高設計的效率和效果。

4 總結

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

參考文獻：

[1] 趙曉影.Android應用開發中的UI[J].設計勞動保障世界，2013（12）.

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

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

[4] 何健寧.基于Axure的APP原型設計在教學中的應用[J].電腦開發與應用，2014（8）.

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