王永翔

打開(kāi)手機(jī)的第一瞬間，我們的感受正在發(fā)生著悄無(wú)聲息的變化。這種變化不僅僅是來(lái)自于視覺(jué)上的感受，讓一切看上去更加自然和舒服；同時(shí)也是來(lái)自于切身體會(huì)的使用感受，讓一切更加簡(jiǎn)單和易用。沒(méi)錯(cuò)，這一切變化的根本正是源自于手機(jī)UI數(shù)字化設(shè)計(jì)的不斷改善和變革。而現(xiàn)在，手機(jī)UI設(shè)計(jì)的變革似乎來(lái)得更加猛烈了，一場(chǎng)無(wú)聲的革命正在快速蔓延開(kāi)來(lái)。

手機(jī)的UI設(shè)計(jì)有多重要?

UI設(shè)計(jì)存在的意義是給用戶提供更為直觀的界面、更為簡(jiǎn)潔的操作，更為有效的交互。

對(duì)于很多購(gòu)買手機(jī)的用戶而言，他們會(huì)認(rèn)真地考慮手機(jī)的外形是否符合自己的風(fēng)格，也會(huì)看重手機(jī)擁有什么樣的炫酷功能，但是往往卻會(huì)忽視手機(jī)UI設(shè)計(jì)的重要性。那么，手機(jī)UI設(shè)計(jì)到底有多么重要呢?這樣來(lái)說(shuō)或者更貼切一些：如果一款手機(jī)在外形上或者功能上有些許瑕疵的話，這只會(huì)讓你對(duì)此抱有一些遺憾的心情，莞爾一笑，尚可接受。而如果這款產(chǎn)品是在UI設(shè)計(jì)上具有明顯缺陷的話，這往往會(huì)導(dǎo)致你在使用手機(jī)的過(guò)程中心情暴躁，尤其是在某些時(shí)候，UI設(shè)計(jì)上的缺陷甚至?xí)鼓阌性业羰謾C(jī)的沖動(dòng)!

實(shí)際上，手機(jī)UI設(shè)計(jì)的重要性還是深入人心的，這在我們不得不換手機(jī)而又沒(méi)有明確目標(biāo)的時(shí)候被充分體現(xiàn)出來(lái)。這時(shí)候，我們對(duì)手機(jī)的唯一要求往往會(huì)體現(xiàn)在易用性上，而手機(jī)的易用性則是和UI設(shè)計(jì)密不可分的。正是因?yàn)槿绱耍脩敉ǔ?huì)固執(zhí)地選擇一個(gè)品牌并堅(jiān)持下去，不為別的，就是因?yàn)橐呀?jīng)習(xí)慣了某個(gè)品牌手機(jī)的UI設(shè)計(jì)。我們?cè)趯で笈笥岩庖?jiàn)時(shí)最常聽(tīng)到的也是這樣的聲音：“要不你就買諾基亞的手機(jī)吧，別的不說(shuō)，至少它好用?！庇纱丝梢?jiàn)手機(jī)UI設(shè)計(jì)的影響力，這甚至已經(jīng)成為了能夠影響一個(gè)品牌的最重要因素。正是如此，我們現(xiàn)在有足夠的理由，打開(kāi)手機(jī)，好好研究一下其中的UI設(shè)計(jì)。

UI設(shè)計(jì)的本意指的是用戶界面設(shè)計(jì)，UI是英文User和Interface的縮寫(xiě)。從字面上看是由用戶與界面兩個(gè)部分組成，但實(shí)際上還包括用戶與界面之間的交互關(guān)系，因此，對(duì)于手機(jī)UI設(shè)計(jì)而言則是包括了這樣三個(gè)方面：用戶研究、交互設(shè)計(jì)，界面設(shè)計(jì)，這也組成了UI設(shè)計(jì)的基本原則。正是由于手機(jī)UI設(shè)計(jì)的這些原則，使得我們并不會(huì)像某些手機(jī)廠商所想的一樣只是簡(jiǎn)單地追求絢麗，花哨的界面，而uI設(shè)計(jì)存在的意義是為了讓手機(jī)針對(duì)用戶需求，能夠擁有更為直觀的界面，更為簡(jiǎn)潔的操作，更為有效的交互，這也是UI真正的核心價(jià)值。

UI設(shè)計(jì)的變革，從互聯(lián)網(wǎng)時(shí)代開(kāi)始!

互聯(lián)網(wǎng)時(shí)代，傳統(tǒng)的UI設(shè)計(jì)已經(jīng)無(wú)法滿足需求，這也成為手機(jī)UI設(shè)計(jì)變革的原因。

當(dāng)然，一套設(shè)計(jì)優(yōu)良的UI系統(tǒng)并不是一蹴而就的，基于在界面、操作，交互三個(gè)方面充分人性化的核心理念，隨著用戶需求的不斷增多以及手機(jī)功能的不斷增強(qiáng)，UI設(shè)計(jì)可以說(shuō)經(jīng)歷了三個(gè)階段的發(fā)展：通訊功能時(shí)代，多媒體功能時(shí)代、移動(dòng)互聯(lián)網(wǎng)時(shí)代。

在通訊功能時(shí)代，手機(jī)只是一種單純的通訊工具，在UI設(shè)計(jì)上也頗為簡(jiǎn)單，手機(jī)菜單中往往一個(gè)屏幕只顯示一種功能。而隨著手機(jī)多媒體娛樂(lè)功能的逐步豐富，UI設(shè)計(jì)也變成了9宮格，12宮格(同一屏幕下顯示9個(gè)功能圖標(biāo)或者12個(gè)功能圖標(biāo))這樣的設(shè)計(jì)，并成為了主流沿用至今。

在互聯(lián)網(wǎng)時(shí)代，手機(jī)逐漸成為用戶體驗(yàn)互聯(lián)網(wǎng)應(yīng)用的重要終端，其中所包含的內(nèi)容也成幾何級(jí)數(shù)增長(zhǎng)，傳統(tǒng)的UI設(shè)計(jì)已經(jīng)無(wú)法在包容更多內(nèi)容的前提下提高手機(jī)的易用性，這也成為手機(jī)UI設(shè)計(jì)變革的誘因。在這種環(huán)境下，手機(jī)UI設(shè)計(jì)顯得日益復(fù)雜起來(lái)，而不同的廠商給出的解決方案也變得更加多樣化。全新的UI設(shè)計(jì)理念開(kāi)始嶄露頭角，例如iPhone、Android手機(jī)的自定義多屏菜單設(shè)計(jì)，多普達(dá)的TouchFLO 3D、LG的3D S-Class UI分類菜單設(shè)計(jì)，諾基亞融合了Widgets互聯(lián)精靈(互聯(lián)網(wǎng)RSS信息訂閱工具)的自定義手機(jī)桌面UI設(shè)計(jì)等，無(wú)疑這些出眾的UI設(shè)計(jì)成為手機(jī)UI設(shè)計(jì)變革的先行者。

UI變革中不可或缺的三大元素正所謂萬(wàn)變不離其宗，在手機(jī)UI設(shè)計(jì)掀起的變革中，同樣有些重要的元素是不可或缺的，而這些元素也成為評(píng)判UI系統(tǒng)孰優(yōu)孰劣的關(guān)鍵所在。

元素1：視而不見(jiàn)的圖標(biāo)

圖標(biāo)，伴隨著人類文明的誕生就已經(jīng)存在，是最為有效的信息表達(dá)方式之一。而在手機(jī)UI設(shè)計(jì)當(dāng)中，圖標(biāo)同樣一直以來(lái)都是一個(gè)十分重要的視覺(jué)元素，是手機(jī)上各種功能最為直觀的表達(dá)形式。一個(gè)好的圖標(biāo)設(shè)計(jì)，并不需要花哨。絢麗的效果，也不需要過(guò)于復(fù)雜，精細(xì)的表現(xiàn)形態(tài)，只有當(dāng)一個(gè)圖標(biāo)能夠做到你能忘記它的存在時(shí)，這才算得上是成功的設(shè)計(jì)?？偟膩?lái)說(shuō)，圖標(biāo)存在的目的實(shí)際上就是要讓你忘記它的存在。這點(diǎn)很容易讓人理解，例如在一天的生活中，我們總能看到無(wú)數(shù)的圖標(biāo)，或是指引方向，或是標(biāo)記種類，或是描述功能，但是我們卻不會(huì)刻意地去關(guān)注它，而是很自然地遵循各種圖標(biāo)的指導(dǎo)，獲取相應(yīng)的信息。只有當(dāng)我們不明白圖標(biāo)所表示的含義時(shí)，才會(huì)讓我們注意到這個(gè)圖標(biāo)的存在。這對(duì)于手機(jī)UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)而言，同樣如此。手機(jī)中最為成功的圖標(biāo)可能非電話簿和信息莫屬了，幾乎從這兩個(gè)圖標(biāo)誕生開(kāi)始，在所有手機(jī)上它們的主體設(shè)計(jì)都是一樣的，而對(duì)于它們的存在，我們只能用“視而不見(jiàn)”來(lái)形容。

當(dāng)然，圖標(biāo)的設(shè)計(jì)要做到能夠明確表達(dá)含義并不容易，因?yàn)槌艘紤]視覺(jué)上的感受之外，同時(shí)還要深入研究不同區(qū)域、不同文化背景下用戶對(duì)圖標(biāo)的理解。就這點(diǎn)而言。諾基亞和蘋(píng)果的圖標(biāo)設(shè)計(jì)無(wú)疑是令人稱贊的。有一個(gè)比較有趣的示例就是在手機(jī)地圖導(dǎo)航功能的圖標(biāo)設(shè)計(jì)上，諾基亞手機(jī)是用指南針(羅盤(pán))的形式來(lái)表達(dá)地圖導(dǎo)航功能。實(shí)際上，不同的文化對(duì)地圖有著不同的關(guān)聯(lián)度，比如在中國(guó)人們就不怎么使用地圖，傳統(tǒng)上都是以地標(biāo)的方式來(lái)表述地點(diǎn)，要想去某一個(gè)地方基本上都會(huì)用附近的地標(biāo)作為參照。而在歐洲，地圖的使用則是非常廣泛。為了在全球范圍內(nèi)用同一個(gè)圖標(biāo)更好地體現(xiàn)手機(jī)地圖導(dǎo)航這個(gè)功能，指南針這個(gè)無(wú)論在東方還是西方都有著悠久歷史的形象無(wú)疑成為了最好的選擇。

元素2：如我所愿的界面

在手機(jī)進(jìn)入多媒體功能時(shí)代之后，之所以9宮格，12宮格這樣的界面能夠成為絕對(duì)主流，很大程度上是因?yàn)檫@樣的界面能夠?qū)⑺械墓δ苓M(jìn)行合理的分類，并全部體現(xiàn)在同一個(gè)界面中，讓用戶能夠方便、快捷地調(diào)用每一個(gè)功能。而隨著手機(jī)功能的不斷增加，實(shí)際上在很早以前手機(jī)的9宮格界面就已經(jīng)顯得捉襟見(jiàn)肘了，為了調(diào)用像計(jì)算器這樣的功能，用戶不得不進(jìn)行更多的操作次數(shù)。當(dāng)然，大小受到限制的手機(jī)屏幕不可能按照15宮格，20宮格這樣的思路一直延續(xù)擴(kuò)展下去，而這個(gè)時(shí)候，隨著觸控屏幕技術(shù)的進(jìn)一步成熟，像iPhone這樣的多界面菜單設(shè)計(jì)方式成為了最好的解決方案。

iphone運(yùn)用多界面菜單的方式，不分巨細(xì)將所有功能統(tǒng)統(tǒng)放到桌面上，用戶通過(guò)劃動(dòng)屏幕就能迅速找到各種功能，而無(wú)須在復(fù)雜的多層菜單中逐一尋找。而作為后來(lái)者的Android手機(jī)，更是充分借鑒了iPhone多界面菜單設(shè)計(jì)的優(yōu)勢(shì)，允許用戶在不同的界面自定義放置不同

的功能圖標(biāo)，不僅便于用戶對(duì)手機(jī)的功能進(jìn)行分類管理，同時(shí)還保證用戶可以用最快的速度啟動(dòng)最常用的功能。

當(dāng)然，多界面設(shè)計(jì)理念并非僅僅適用于擺放各種功能圖標(biāo)，更加能夠通過(guò)巧妙的設(shè)計(jì)來(lái)更好地展現(xiàn)手機(jī)的多媒體娛樂(lè)功能或者是互聯(lián)網(wǎng)功能。例如LG最新推出的S-Class UI,其就將功能、聯(lián)系人、小工具，音樂(lè)／圖片等不同類型的應(yīng)用分置在不同界面，在聯(lián)系人界面可以更快地查詢到常用聯(lián)系人的電話，在音樂(lè)／圖片界面可以快速播放喜愛(ài)的音樂(lè)或者瀏覽拍攝的圖片。而HTC在最新推出的Android手機(jī)Hero上也充分應(yīng)用了多界面UI設(shè)計(jì)，尤其是其除了聯(lián)系人界面、短信息界面、音樂(lè)界面之外，還加入了twitter(目前最為流行的短博客網(wǎng)站)好友動(dòng)態(tài)界面，互聯(lián)網(wǎng)網(wǎng)頁(yè)標(biāo)簽界面，實(shí)時(shí)天氣預(yù)報(bào)界面、股票查詢界面等與互聯(lián)網(wǎng)應(yīng)用相關(guān)的全新內(nèi)容，而且還大幅度增加了每個(gè)界面的自定義程度，可以說(shuō)將多界面UI設(shè)計(jì)的應(yīng)用發(fā)揮到了極致，給用戶留下了更多的便捷。

總的來(lái)說(shuō)，作為手機(jī)UI設(shè)計(jì)中最為重要的一環(huán)，界面的設(shè)計(jì)在觸控技術(shù)下得到了更大空間的擴(kuò)展，而多界面設(shè)計(jì)憑借更直觀的展現(xiàn)方式、更豐富的自定義功能，成為了當(dāng)下最為流行的UI設(shè)計(jì)元素，不可或缺。

元素3：坐享其成的交互

作為手機(jī)UI設(shè)計(jì)三大環(huán)節(jié)中的人機(jī)交互，往往關(guān)系著整套UI設(shè)計(jì)的成敗，而在互聯(lián)網(wǎng)時(shí)代，全新的UI設(shè)計(jì)也帶來(lái)了全新的交互方式。

對(duì)于手機(jī)的各項(xiàng)功能，每一項(xiàng)都需要用戶去點(diǎn)擊啟動(dòng)后才能使用，這種交互方式是以用戶為主動(dòng)而進(jìn)行的。而在互聯(lián)網(wǎng)時(shí)代，不斷瘋狂增長(zhǎng)的網(wǎng)絡(luò)信息顯然再讓用戶逐一打開(kāi)手機(jī)網(wǎng)絡(luò)瀏覽器去獲取就會(huì)變得過(guò)于繁重，主動(dòng)獲取互聯(lián)網(wǎng)內(nèi)容的方式反而顯得被動(dòng)起來(lái)，這時(shí)候，或許將用戶設(shè)為“被動(dòng)”的交互方式更容易解決問(wèn)題。

例如之前提到的HTC的Android手機(jī)Hero提供的twitter好友動(dòng)態(tài)界面，這就是一種非常人性化的交互方式。通過(guò)該界面，用戶可以更加直觀，方便、快捷地獲取設(shè)定好的好友twitter博客內(nèi)容，而無(wú)須重復(fù)打開(kāi)手機(jī)瀏覽器→輸入twitter網(wǎng)址→登錄賬戶→查看好友博客內(nèi)容這樣的流程，真正做到了化繁為簡(jiǎn)。

在增強(qiáng)互聯(lián)網(wǎng)交互體驗(yàn)這方面，諾基亞利用全新的UI設(shè)計(jì)理念給出了更為完善的解決方案：諾基亞N97采用了涵蓋范圍更廣的Widgets互聯(lián)精靈，并將其與手機(jī)桌面融合，用戶可以在手機(jī)桌面上自定義放置多個(gè)不同的互聯(lián)精靈，例如Facebook、Flickr、新浪新聞、淘寶，攜程，時(shí)尚網(wǎng)、玩主，大麥票務(wù)、財(cái)經(jīng)網(wǎng)、張小盒漫畫(huà)、大智慧股票等不同的互聯(lián)網(wǎng)內(nèi)容，并使其與互聯(lián)網(wǎng)連接保持實(shí)時(shí)更新。用戶只需要啟動(dòng)手機(jī)就能在第一時(shí)間看到最新相關(guān)互聯(lián)網(wǎng)內(nèi)容，可以說(shuō)諾基亞N97這種獨(dú)特的UI設(shè)計(jì)方式讓用戶在互聯(lián)網(wǎng)時(shí)代體驗(yàn)到了“坐享其成”的快感，是手機(jī)UI設(shè)計(jì)在互聯(lián)網(wǎng)應(yīng)用中進(jìn)行變革的一個(gè)絕妙思路。

當(dāng)然，這種坐享其成的交互方式還只是剛剛進(jìn)入初級(jí)階段，而下一步，我們可以看到互聯(lián)網(wǎng)內(nèi)容獲取與手機(jī)功能的更多結(jié)合。例如通過(guò)與手機(jī)的GPS定位功能融合，能夠在用戶身處不同的區(qū)域或城市時(shí)，自動(dòng)獲取相應(yīng)的交通資訊、天氣預(yù)報(bào)等更加有價(jià)值的信息，通過(guò)與手機(jī)的音樂(lè)播放功能融合，能夠自動(dòng)獲取相應(yīng)曲目的歌詞以及關(guān)聯(lián)音樂(lè)等內(nèi)容，等等。這樣更加“被動(dòng)”的交互方式會(huì)得到我們更多的青睞，讓我們?cè)诩姺钡幕ヂ?lián)網(wǎng)世界中顯得從容自如。

總而言之，以上所提及的圖標(biāo)設(shè)計(jì)、多界面設(shè)計(jì)、被動(dòng)交互設(shè)計(jì)三個(gè)手機(jī)UI設(shè)計(jì)元素，分別從不同角度突破了互聯(lián)網(wǎng)時(shí)代下提升手機(jī)易用性的瓶頸，讓手機(jī)擁有了更為直觀的界面、更為簡(jiǎn)潔的操作、更為有效的交互，實(shí)現(xiàn)了手機(jī)UI設(shè)計(jì)的核心價(jià)值，它們?cè)诨ヂ?lián)網(wǎng)時(shí)代手機(jī)UI設(shè)計(jì)變革中必定會(huì)成為不可或缺的重要元素。

UI設(shè)計(jì)變革的下一站與手機(jī)技術(shù)和應(yīng)用不斷發(fā)展，進(jìn)步一樣，手機(jī)UI設(shè)計(jì)的變革也在不斷進(jìn)取，而或許UI設(shè)計(jì)變革的下一站就是將各種UI設(shè)計(jì)元素關(guān)聯(lián)起來(lái)。

擁有三個(gè)不可或缺的UI設(shè)計(jì)元素并不代表著UI設(shè)計(jì)變革到達(dá)了最終目的地，與手機(jī)技術(shù)和應(yīng)用不斷發(fā)展，進(jìn)步一樣，手機(jī)UI設(shè)計(jì)的變革也在不斷進(jìn)取，最近互聯(lián)網(wǎng)上流傳出的索尼愛(ài)立信Android手機(jī)UI設(shè)計(jì)的視頻讓我們找到了UI設(shè)計(jì)變革下一站的蹤跡——關(guān)聯(lián)。

泄露的視頻中顯示，索尼愛(ài)立信即將推出的Android手機(jī)不僅同時(shí)具備了圖標(biāo)設(shè)計(jì)、多界面設(shè)計(jì)以及被動(dòng)交互設(shè)計(jì)這三大元素，而且還別出心裁地利用手機(jī)通訊的核心價(jià)值——聯(lián)系人為線索，把短信息、郵件、圖片博客，twitter博客，F(xiàn)acebook等內(nèi)容一一關(guān)聯(lián)起來(lái)，將各種元素融為一體。這樣的UI設(shè)計(jì)理念很好地體現(xiàn)了手機(jī)作為通訊工具的特性，利用手機(jī)中存儲(chǔ)的聯(lián)系人資源為縱軸，以手機(jī)上各種功能和訂閱的各種互聯(lián)網(wǎng)內(nèi)容為橫軸，形成了縱橫交錯(cuò)的UI體系。手機(jī)上的每一個(gè)功能、每一項(xiàng)內(nèi)容不再是單獨(dú)存在的個(gè)體，同時(shí)也讓多界面設(shè)計(jì)、被動(dòng)交互設(shè)計(jì)的優(yōu)勢(shì)和價(jià)值充分展現(xiàn)出來(lái)。在這樣的UI設(shè)計(jì)理念之下，手機(jī)作為人與人溝通的重要工具這一價(jià)值在互聯(lián)網(wǎng)時(shí)代同樣得到了無(wú)縫延伸，突顯出手機(jī)在互聯(lián)網(wǎng)時(shí)代的價(jià)值存在。毫無(wú)疑問(wèn)，創(chuàng)新的uI設(shè)計(jì)成為了這次價(jià)值體現(xiàn)的唯一原動(dòng)力。

現(xiàn)在，一方面，手機(jī)的外觀設(shè)計(jì)、硬件配置、功能應(yīng)用已經(jīng)沒(méi)有跨越式的創(chuàng)新。一方面，手機(jī)成為互聯(lián)網(wǎng)時(shí)代越來(lái)越重要的體現(xiàn)終端。這樣的環(huán)境下，手機(jī)的UI設(shè)計(jì)成為了舞臺(tái)上的主角。UI設(shè)計(jì)的不斷創(chuàng)新和變革，將會(huì)給我們帶來(lái)更多的驚喜和更高的價(jià)值，甚至是成為我們選擇手機(jī)的唯一標(biāo)準(zhǔn)。從此，手機(jī)UI設(shè)計(jì)君臨天下的時(shí)代已然來(lái)臨!