面向智能手機(jī)的UI界面設(shè)計(jì)

朱軒櫻

摘 要：隨著手機(jī)的普及和功能的增強(qiáng)，越來越多的用戶追求手機(jī)界面的美觀度、愉悅的交互感，又能體現(xiàn)個(gè)人獨(dú)特而鮮明的風(fēng)格。本文從智能手機(jī)UI界面設(shè)計(jì)的現(xiàn)狀到自行設(shè)計(jì)完成一套界面，闡述了具有統(tǒng)一風(fēng)格的系統(tǒng)圖標(biāo)并伴有動(dòng)態(tài)的獨(dú)特解鎖方式，提高用戶的私密性、使用的舒適性與愉悅性，使機(jī)械化的東西不再機(jī)械，更具人性化，達(dá)到吸引消費(fèi)者的目的。本文旨在探索如何設(shè)計(jì)出符合現(xiàn)代人審美情趣，能展示用戶獨(dú)特的風(fēng)格，同時(shí)探索動(dòng)畫在手機(jī)UI界面上的運(yùn)用以及表現(xiàn)的多樣性。

關(guān)鍵詞：手機(jī)UI；解鎖界面；圖標(biāo)設(shè)計(jì)；人機(jī)交互

今天，手機(jī)成為移動(dòng)互聯(lián)網(wǎng)改變?nèi)藗兩钭顬榛A(chǔ)的介質(zhì)之一，不再是單一的通訊工具已成為人們生活工作娛樂的必需品，隨著軟件的不斷開發(fā)應(yīng)用，手機(jī)詮釋了更加多樣化的角色通訊、娛樂、辦公、交易……都已經(jīng)在生活中隨處可見。

手機(jī)UI界面設(shè)計(jì)是手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，一直被業(yè)界稱為產(chǎn)品的“臉面”，好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性、品位，還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。當(dāng)手機(jī)商發(fā)布智能手機(jī)時(shí)出現(xiàn)在人們面前的第一張圖片就是手機(jī)解鎖頁面，2007年iPhone發(fā)布會(huì)上，喬布斯實(shí)機(jī)演示滑動(dòng)鎖屏為序幕，當(dāng)時(shí)小丑魚的背景紙和新穎的滑動(dòng)鎖屏方式，震撼了普通公眾乃至整個(gè)業(yè)界，解鎖界面從此在手機(jī)UI設(shè)計(jì)中拉開了大序幕。在智能手機(jī)界面設(shè)計(jì)中操作是否人性化？色彩搭配是否舒適？畫面質(zhì)感是否新穎等等眾多因素影響著用戶對于產(chǎn)品的選擇，可以毫不夸張地說，產(chǎn)品擁有一個(gè)讓人眼前一亮的手機(jī)UI設(shè)計(jì)，就等于拿到了在用戶心目中的通行證。

本文涉及的手機(jī)UI界面設(shè)計(jì)指裝有安卓系統(tǒng)的智能手機(jī)解鎖界面和解鎖完成后進(jìn)入系統(tǒng)在手機(jī)屏上一系列系統(tǒng)圖標(biāo)，本文指的圖標(biāo)是狹義的手機(jī)屏幕上表示命令、符號、功能、圖像等。

1 手機(jī)UI的現(xiàn)狀

手機(jī)從最初體現(xiàn)身份標(biāo)志物到現(xiàn)在的日常用品，人們關(guān)注的焦點(diǎn)逐漸從功能性轉(zhuǎn)移到手機(jī)的外觀、操作便捷以及UI界面美觀的設(shè)計(jì)，這給手機(jī)相關(guān)設(shè)計(jì)提供了廣闊的發(fā)展空間，但是現(xiàn)在手機(jī)UI界面設(shè)計(jì)也存在以下問題：

（1）手機(jī)UI界面形式缺乏統(tǒng)一性，目前的手機(jī)UI界面基本是解鎖方式和系統(tǒng)圖標(biāo)各自分離，前后銜接不對稱，以實(shí)現(xiàn)功能為準(zhǔn)則，不能體現(xiàn)整套界面的統(tǒng)一性，不能強(qiáng)化用戶的個(gè)性化。

（2）手機(jī)UI界面內(nèi)容缺乏故事性，現(xiàn)在手機(jī)界面基本是千機(jī)一面，界面設(shè)計(jì)大同小異，大部分手機(jī)界面沒有自己思想，由于沒有故事情感在里邊，設(shè)計(jì)出的界面是隨大流，創(chuàng)新力嚴(yán)重不足。

（3）手機(jī)UI界面交互缺乏愉悅性，目前手機(jī)UI解鎖界面和圖標(biāo)采用靜態(tài)的方式呈現(xiàn)，表現(xiàn)形式相對比較單一，缺少動(dòng)態(tài)化和趣味化；開鎖界面單調(diào)乏味，缺乏娛樂性、設(shè)計(jì)性，最重要的是無法滿足用戶日益強(qiáng)烈的個(gè)性化要求。

2 手機(jī)UI的設(shè)計(jì)原則

手機(jī)UI界面和其他的界面設(shè)計(jì)也有許多共通的地方，但手機(jī)UI界面的設(shè)計(jì)更注重用戶體驗(yàn)、操作便捷及內(nèi)容優(yōu)質(zhì)，它不同于電腦等媒介，屏幕的大小限制了展示內(nèi)容，設(shè)計(jì)出內(nèi)容豐富、形式統(tǒng)一又能展示用戶的獨(dú)特性，以滿足不同的用戶需求，這就要求手機(jī)UI的設(shè)計(jì)更要優(yōu)于其他媒介的UI設(shè)計(jì)，設(shè)計(jì)師應(yīng)遵守的設(shè)計(jì)原則：

用戶為主體性，所謂界面就是要了解客戶的心理、功能的需求，找到用戶中意的目標(biāo)，并且把用戶的目標(biāo)當(dāng)作自己的目標(biāo)，把用戶當(dāng)作自己的親人，要去細(xì)細(xì)地了解他們的需要，這樣才能真正做到以客戶為主體。UI是使用者與程序交流的途徑，通過UI向用戶傳達(dá)信息進(jìn)行服務(wù)，界面設(shè)計(jì)的是用戶而不是程序員。

圖標(biāo)的一致性，使用者在使用UI界面時(shí)要求圖標(biāo)具有一定的統(tǒng)一性，可以讓使用者在很短的時(shí)間內(nèi)記住這些圖標(biāo)。相反，如果在設(shè)計(jì)時(shí)采用不同的元素，既亂七八糟又給用戶使用帶來識(shí)別的困難，甚至一些急性子的用戶會(huì)放棄這個(gè)界面。在設(shè)計(jì)時(shí)做到縱觀全局把握每個(gè)元素，一致的設(shè)計(jì)目標(biāo)、元素外觀、交互行為是UI設(shè)計(jì)最重要的原則之一。

視覺的直觀性，設(shè)計(jì)師在設(shè)計(jì)界面時(shí)可以通過改變文字、圖片來表達(dá)自己的思想，設(shè)計(jì)之初要找出重點(diǎn)，在吸引使用者興趣的地方著重處理，由于手機(jī)的屏幕小展示的內(nèi)容多，所以設(shè)計(jì)師在設(shè)計(jì)界面時(shí)要簡潔明了、邏輯清晰、明確地表達(dá)內(nèi)容，讓用戶一目了然。

操作的簡易性，簡易就是簡單、容易，是為了讓用戶更簡單、更容易地使用產(chǎn)品，減少發(fā)生錯(cuò)誤的可能。

3 用戶體驗(yàn)下的手機(jī)UI《念》主題設(shè)計(jì)

（1）手機(jī)UI的市場調(diào)查。自從蘋果公司推出智能手機(jī)滑屏解鎖方式，扁平化設(shè)計(jì)基本是一統(tǒng)天下，可以說蘋果開創(chuàng)了手機(jī)觸摸的新紀(jì)元。但是隨著時(shí)間的推移其界面設(shè)計(jì)的缺點(diǎn)也暴露出來：一是界面圖標(biāo)設(shè)計(jì)的表現(xiàn)形式太單一。二是整套界面設(shè)計(jì)包括開鎖和圖標(biāo)的內(nèi)容缺少故事性。三是圖標(biāo)之間關(guān)聯(lián)性不大，沒有統(tǒng)一的主題思想。一款好的界面設(shè)計(jì)除迎合市場發(fā)展趨勢還需要滿足用戶心理需求，在設(shè)計(jì)初準(zhǔn)備200份《手機(jī)界面設(shè)計(jì)市場調(diào)查報(bào)告》做市場調(diào)查，此次參與調(diào)查的人員以35歲以下居多。調(diào)查情況如下：有41%的用戶選擇簡潔大方的設(shè)計(jì)風(fēng)格；有16%的人喜歡手機(jī)自帶的UI設(shè)計(jì)，說明這部分人圖省事可以用就不換，同時(shí)也說明智能手機(jī)的自帶UI界面設(shè)計(jì)能滿足部分用戶需求；有12%的人喜歡自定義手機(jī)界面，說明這部分人喜歡風(fēng)格獨(dú)特、彰顯個(gè)性的手機(jī)界面。經(jīng)過分析對比，發(fā)現(xiàn)大部分用戶喜歡界面干凈、整齊，交互功能體驗(yàn)明確、快捷；發(fā)現(xiàn)簡約型、功能明確的界面設(shè)計(jì)符合大多數(shù)用戶的歡迎，因此在項(xiàng)目實(shí)施初就決定采用畫面簡潔、交互舒適、主題突出、故事生動(dòng)的設(shè)計(jì)方案。

（2）手機(jī)UI《念》主題的風(fēng)格設(shè)定?！赌睢分黝}從個(gè)性的角度融合活力、唯美、懷念元素來設(shè)計(jì)的智能手機(jī)UI界面，植入動(dòng)態(tài)的解鎖方式增強(qiáng)趣味性，使用戶在彰顯個(gè)性的同時(shí)體驗(yàn)解鎖的快樂。通常用戶喜愛的產(chǎn)品是風(fēng)格上認(rèn)同內(nèi)容上共鳴，通過調(diào)查分析發(fā)現(xiàn)用戶群體中很大一部分為離開父母的學(xué)子或闖天下的年輕人，作為一個(gè)遠(yuǎn)離家鄉(xiāng)，遠(yuǎn)離親朋好友，獨(dú)自在外求學(xué)、工作的異鄉(xiāng)人，時(shí)常牽掛著家鄉(xiāng)的人、家鄉(xiāng)的景，尤其是每逢佳節(jié)倍思親，別有一番辛酸。由此設(shè)計(jì)一套采用信封和郵戳為題材，以《念》為主題的手機(jī)UI界面，以表對家鄉(xiāng)的思念，對遠(yuǎn)方親人的牽掛，對兒時(shí)童年的懷念。在手機(jī)界面設(shè)計(jì)中色彩的搭配是視覺基礎(chǔ)，色彩也最能體現(xiàn)設(shè)計(jì)意圖，隨著客戶群體的廣泛化，客戶的性格、愛好以及生活環(huán)境而產(chǎn)生不同的心理需求，手機(jī)界面的色彩也越來越潮流化、多元化、豐富化。本套設(shè)計(jì)在色彩搭配注意下面幾點(diǎn)：第一，特色鮮明。第二，搭配合理。第三，講究藝術(shù)性。第四，避免使用單色。第五，使用鄰近色。第六，背景色的使用。第七，色彩的數(shù)量不宜過多。在風(fēng)格設(shè)計(jì)上體現(xiàn)明快、簡潔，操作快捷，做到解鎖和圖標(biāo)風(fēng)格統(tǒng)一，色彩以米白色為主色調(diào)，采用扁平化的制作手法，達(dá)到在手機(jī)屏幕上瀏覽時(shí)舒服度，同時(shí)能體現(xiàn)對家鄉(xiāng)的思念。

（3）手機(jī)UI《念》主題的開鎖界面設(shè)計(jì)。目前市場上解鎖界面分為兩類：第一類如iPhone、三星的簡潔型，除了時(shí)間日期顯示沒有太多的其他功能，界面清爽。第二類：步步高、魅族、華為等功能型，界面基本為環(huán)形，有信息、未接來電等功能的預(yù)覽，剛用覺得一目了然，用久了會(huì)產(chǎn)生操作繁瑣的感覺。本款解鎖界面設(shè)計(jì)采用簡潔型設(shè)計(jì)，色調(diào)上采用米白色為主色調(diào)，藍(lán)色和白色點(diǎn)綴，既符合信封的特質(zhì)，又簡潔大方。界面上保留基礎(chǔ)的時(shí)間日期，預(yù)覽時(shí)沒有短信、電話，運(yùn)用美式信封為主背景，郵票部分可以讓用戶選擇拍照或者圖片進(jìn)行替換體現(xiàn)界面的獨(dú)特性，下方的時(shí)間顯示數(shù)字效果和日期都是用設(shè)計(jì)好的字體效果進(jìn)行替換。解鎖方式是通過手指拖動(dòng)郵戳部分開始解鎖動(dòng)畫，郵戳的埃菲爾鐵塔塔尖是解鎖位置，拖到愛心松手的話是進(jìn)入主界面，拖電話則進(jìn)入撥號界面，拖信息則進(jìn)入短信界面，快速便捷，通過拖拉郵戳的方式使客戶在操作中體驗(yàn)舒適與愉悅，使機(jī)械化的東西不再機(jī)械，更具人性化，更能吸引消費(fèi)者。

（4）手機(jī)UI《念》主題的系統(tǒng)圖標(biāo)設(shè)計(jì)（如圖1）。圖標(biāo)的基本功能在于提示信息與強(qiáng)調(diào)產(chǎn)品的重點(diǎn)特征，以醒目的信息傳達(dá)讓用戶知道操作的重點(diǎn)。在手機(jī)UI界面中，與用戶接觸最多的就是手機(jī)系統(tǒng)操作界面中的圖標(biāo)按鈕，現(xiàn)在各設(shè)計(jì)工作室把圖標(biāo)設(shè)計(jì)提高到了一個(gè)新的高度，不但強(qiáng)調(diào)示意性，強(qiáng)調(diào)主題文化，品牌意識(shí)，圖標(biāo)設(shè)計(jì)的表現(xiàn)形式多樣，目的是傳達(dá)出產(chǎn)品的設(shè)計(jì)理念?！赌睢愤x擇為信封郵票來表達(dá)主題，圖標(biāo)的制作為簡潔風(fēng)格圖標(biāo)，運(yùn)用整套的配色來完成設(shè)計(jì)，和開鎖界面的用色相互呼應(yīng)。圖標(biāo)上選用了簡介的設(shè)計(jì)，通過非常大的色差來表現(xiàn)圖標(biāo)的各個(gè)部分，圖標(biāo)識(shí)別性比較高，同時(shí)采用動(dòng)態(tài)的畫面植入手機(jī)，使簡單的圖標(biāo)變得更有趣味性。因此，做得比較符合用戶的直觀感受，簡潔明了，同時(shí)強(qiáng)調(diào)體現(xiàn)每一個(gè)圖標(biāo)的設(shè)計(jì)功能性，整套手機(jī)UI的設(shè)計(jì)詳見圖1。

綜上所述，整套手機(jī)UI《念》主題的界面設(shè)計(jì)力圖做到形式美觀、內(nèi)容完整，主題突出，打破市場上大批人云亦云的手機(jī)界面設(shè)計(jì)。當(dāng)然要制作完整內(nèi)容的手機(jī)主題還有很多問題有待研究開發(fā)，本文只是作一個(gè)簡單的研究探索。

4 結(jié)語

手機(jī)產(chǎn)業(yè)隨著技術(shù)標(biāo)準(zhǔn)化生產(chǎn)以及激烈的價(jià)格競爭下，手機(jī)的人機(jī)交互界面（UI）給手機(jī)市場提供新的賣點(diǎn)，手機(jī)UI界面在未來的發(fā)展空間會(huì)更大，被認(rèn)為是新的產(chǎn)業(yè)動(dòng)力。手機(jī)UI的新設(shè)計(jì)與功能開發(fā)是根據(jù)各種客戶群體的喜好及使用習(xí)慣而進(jìn)行的，隨著手機(jī)用戶年齡層的擴(kuò)大，性別、環(huán)境、生活方式的多樣化，其開發(fā)范圍和潛力正在無限擴(kuò)大。這些新的趨勢使得界面交互可能不再囿于某個(gè)具體產(chǎn)品本身，它可能開始涉及了與使用環(huán)境及其他用戶之間的交流。根據(jù)對當(dāng)前手機(jī)技術(shù)的分析以及對國外在人機(jī)交互及相關(guān)領(lǐng)域研究的關(guān)注，提出了“泛交互”的概念，并對新的趨勢、新的設(shè)計(jì)進(jìn)行展望。

參考文獻(xiàn)：

[1] 周陟. UI進(jìn)化論移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)[M].清華大學(xué)出版社，2010.

[2] 董建明，傅利民，擾培倫.人機(jī)交互第3版——以用戶為中心的設(shè)計(jì)和評估[M].清華大學(xué)出版社，2010.

[3] Robert Hoekman.Jr .瞬間之美：Web界面設(shè)計(jì)如何讓用戶心動(dòng)[M].人民郵電出版社，2009.

[4] Susan Weinschenk .設(shè)計(jì)師要懂心理學(xué)[M].人民郵電出版社，2013.