朱軒櫻

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

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

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

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

本文涉及的手機(jī)UI界面設(shè)計指裝有安卓系統(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)注的焦點逐漸從功能性轉(zhuǎn)移到手機(jī)的外觀、操作便捷以及UI界面美觀的設(shè)計，這給手機(jī)相關(guān)設(shè)計提供了廣闊的發(fā)展空間，但是現(xiàn)在手機(jī)UI界面設(shè)計也存在以下問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)語

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

參考文獻(xiàn)：

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

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

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

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