智能手機G U I設(shè)計原則研究

潘 璠，明 蘭

（南華大學 設(shè)計與藝術(shù)學院，湖南 衡陽421001）

智能手機是指“具有獨立的操作系統(tǒng)，可以由用戶自行安裝軟件、游戲等第三方服務(wù)商提供的程序，通過此類程序來不斷對手機的功能進行擴充，并可以通過移動通訊網(wǎng)絡(luò)來實現(xiàn)無線網(wǎng)絡(luò)接入的這樣一類手機的總稱”[1]。GUI（Graphical User Interface）即人機交互圖形化用戶界面設(shè)計，準確來說就是屏幕產(chǎn)品的視覺體驗和互動操作部分，屬于人機界面中的軟界面形式。智能手機GUI設(shè)計即為滿足用戶需求對手機應(yīng)用界面而進行的視覺設(shè)計和交互設(shè)計，它包含了最為重要的三個因素：界面、圖標和交互特效。

一、界面設(shè)計

隨著計算機和網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，智能手機除了突出產(chǎn)品外觀的硬界面設(shè)計外，更注重強調(diào)“高效、自然、友好”的軟界面設(shè)計。在智能手機界面設(shè)計的概念創(chuàng)意階段，通常只需考慮幾個非常關(guān)鍵的界面或者能夠展示設(shè)計風格的界面即可，如待機、應(yīng)用程序（主菜單）、音樂播放器、相冊、撥號等。

（一）風格一致的界面

一致性是智能手機GUI設(shè)計中最為重要的原則之一，使用相同風格的界面設(shè)計能夠減少視覺的過渡跳轉(zhuǎn)，減少界面切換帶給用戶的焦慮，使得用戶對界面的理解更容易以及整個GUI體驗更加流暢。在完成界面一致性的設(shè)計過程中可以引入一些VI的思想來規(guī)范，既包括界面視覺元素的一致性和規(guī)范性，也指使用相同信息表現(xiàn)方式，如在字體、顏色、術(shù)語等方面。如圖1中短信、聯(lián)系人、撥號通話以及音樂界面所顯示出的一致性和強烈的延續(xù)性，對于保持用戶焦點、改進交互效果有很大幫助。

圖1 ：界面的一致性

（二）個性化的定制界面創(chuàng)意公社

隨著科技的不斷發(fā)展，基于智能手機系統(tǒng)的相關(guān)軟件應(yīng)運而生，不管是官方應(yīng)用還是第三方應(yīng)用的軟件系統(tǒng)已成為用戶直接操作和應(yīng)用的主體。但是問題也隨之而來，由于Android、Symbian、iOS等幾大操作系統(tǒng)占據(jù)主流，導致千篇一律、毫無個性和創(chuàng)意的手機界面充斥市場。隨著市場競爭的激烈，越來越多的手機運營商開始自己定制更個性化的界面，關(guān)注用戶需求的個性化定制時代正在到來。如果說整體性和一致性是基于手機GUI視覺效果的和諧統(tǒng)一而考慮，那么個性化界面設(shè)計主要是以用戶需求為中心進行設(shè)計，既包括了界面的藝術(shù)性在視覺上帶給用戶獨特愉悅的感受，更注重基于用戶使用習慣的交互設(shè)計。

1.獨特的界面構(gòu)架

界面構(gòu)架即界面信息構(gòu)架，它決定了軟界面的整體結(jié)構(gòu)，界面“視覺設(shè)計的布局結(jié)構(gòu)就是通過這種信息架構(gòu)對所有內(nèi)容進行視覺化處理”。[2]界面信息的制定完全建立在用戶研究的基礎(chǔ)上，根據(jù)前期的研究結(jié)果和數(shù)據(jù)（主要是用戶的需求以及產(chǎn)品開發(fā)要求）確定手機的功能，然后將功能分類，設(shè)計成一組組的邏輯模塊，并且細分這些模塊，從而組織成邏輯分明的界面結(jié)構(gòu)。

目前，智能手機的關(guān)鍵界面一般涵蓋了待機解鎖界面、應(yīng)用程序（主菜單）界面、二級菜單界面、三級菜單界面等層級。其中，iphone開創(chuàng)了應(yīng)用程序界面經(jīng)典的宮格設(shè)計，即將所有一級應(yīng)用程序圖標縱橫排列在首頁的導航方式。就在16宮格界面泛濫之時，國外手機品牌不斷致力于創(chuàng)新設(shè)計。2011年諾基亞推出的Lumia 710手機，采用了微軟開發(fā)的Windows Phone 7.0系統(tǒng)。對比其他系統(tǒng)的圖標海洋，活動格窗取代了圖標，它不僅是一個快速啟動的按鈕，同時也是一個信息更新的展示板，將內(nèi)容更新用最直接的方式實時告知用戶，而無需用戶進行任何操作，從而在視覺上給用戶不斷帶來新的印象。針對愛玩社交網(wǎng)絡(luò)的用戶，摩托羅拉Droid X采用了自己定制化的MOTOBlur社交應(yīng)用集成界面，獨特的MOTOBlur界面為消費者提供了非常便捷的社交應(yīng)用集成功能，讓消費者僅需動一動手指即可輕松享受與親朋好友社交互動、分享信息的樂趣，還可以根據(jù)自己的喜好對這些社交插件進行排列，創(chuàng)造出一個完全屬于自己、充滿個性的待機界面。

2.Widget的個性化設(shè)計

Widget中文譯為“微件”，是展示在智能手機主屏的一種快速瀏覽的應(yīng)用程序插件，為用戶提供一鍵式的服務(wù)，通常被設(shè)計為查看天氣、時間、新聞、股票、音樂播放等信息的特定功能。用戶可以通過一系列的小插件把喜歡的應(yīng)用放于桌面，并根據(jù)自己的需求來排列、顯示，享受更加個性化的移動互聯(lián)網(wǎng)服務(wù)。

widget界面設(shè)計的重點在于如何在冰冷的功能中賦予其情感，使用戶的觸摸感更具情緒化。早期的widget界面設(shè)計如時間和天氣等以枯燥和冰冷的文字傳達信息，事實上圖形化Widget界面更能增加用戶的認知感，虛擬場景和主題設(shè)計是豐富用戶體驗和滿足個性需求的設(shè)計趨勢，如以動態(tài)特效生動反映天氣的真實感強烈的3D界面，具有四季變化的日歷界面或精致漂亮的時鐘界面。

總之，基于用戶需求對手機界面的定制化開發(fā)能夠?qū)⒂脩魧ο到y(tǒng)界面的肯定和喜愛有效的轉(zhuǎn)移到產(chǎn)品上來，是手機廠商為突出自己產(chǎn)品賣點，實現(xiàn)智能手機個性化所帶來的產(chǎn)品差異化的戰(zhàn)略手段，也是未來塑造品牌的最好方式。

二、圖標設(shè)計

智能手機中圖標的概念是指手機屏幕上表示指令、程序的符號、圖像。圖標是界面設(shè)計中的重要元素之一，也是智能手機GUI設(shè)計中最生動的視覺形態(tài)，經(jīng)過良好設(shè)計的、形象逼真的圖標所代表的動作或命令是人們迅速、直觀理解信息的有力工具。

（一）統(tǒng)一性和整體性

一套風格統(tǒng)一的圖標是進行圖標設(shè)計的基本原則，整體性的設(shè)計會比零散的設(shè)計更有品質(zhì)，更容易讓用戶理解和信賴。圖標的整體性設(shè)計首先表現(xiàn)在設(shè)計風格的統(tǒng)一，是輕松詼諧的繪畫風格還是簡潔明快的平面效果抑或是酷炫時尚的3D效果，以及各種特效的設(shè)計；其次還表現(xiàn)在顏色的選擇上，顏色不宜過多，過多的顏色出現(xiàn)在一個小的區(qū)域中會產(chǎn)生一種雜亂的感覺。

從藝術(shù)表現(xiàn)形式上看，智能手機界面圖標追求酷炫時尚的情感表達，多為3D炫彩圖標，普遍采用浮雕、倒影和漸變的處理效果，以造成豐富真實的視覺效果。這也是當今手機界面圖標設(shè)計的主流。但是在這種主流風格的基礎(chǔ)上，更要秉持差異化的設(shè)計理念對圖標進行精心設(shè)計，從而各具特色。如索尼愛立信LT18i的圖標更具強烈的透視感和空間感，色彩則以白色為主色調(diào)，輔以少面積的藍色和綠色，整體視覺清爽舒適。

（二）主題性和文化性

界面既是信息交互的媒介又是用戶體驗的媒介。在豐富用戶體驗、實現(xiàn)界面風格個性化乃至品牌識別方面，圖標無疑是最重要的元素之一。iphone導角方形的經(jīng)典圖標與機身外形一樣，使產(chǎn)品與操作界面外觀和諧，同時也成為蘋果iphone界面的最大特點。

隨著定制手機界面的出現(xiàn)，圖標的個性特征成為手機GUI設(shè)計所追求的重要設(shè)計原則。一個信封就代表短信息、一個樂符就代表音樂的圖標時代早已一去不返，無論是自帶程序還是第三方程序，智能手機圖標的設(shè)計越來越具有主題性和文化性。圖2為“80后記憶”的主題圖標設(shè)計，童年記憶中的代表性物品在準確傳達信息的同時，以濃烈的懷舊風格引起都市忙碌的人們對童年美好時光的追憶。具備娛樂性和欣賞性的有主題文化的圖標，因映射出用戶所屬群體共有的價值觀、習俗、生活方式等文化內(nèi)涵，更容易引起用戶的興趣。主題性圖標也是未來智能手機圖標設(shè)計的發(fā)展趨勢，手機用戶通過在線下載更換不同的主題圖標來獲得更豐富和更細分的視覺體驗。

圖2 ：80后記憶主題圖標設(shè)計

（三）可用性和識別性

首先，手機的圖標設(shè)計因受限于產(chǎn)品大小的不同，在設(shè)計過程中最好用矢量軟件制作圖標來配合彈性的尺寸要求，通常情況下圖標保持在64px×64px～96px×96px之間，以解決不同LCD分辨率尺寸的兼容問題，保證圖標的可用性和識別性。

其次，圖標的功用在于建立起虛擬世界與真實世界的一種隱喻或者映射關(guān)系，減輕認知負擔，讓用戶快速、準確理解圖標的含義以便操作。隱喻在圖形界面設(shè)計中是一種重要的表現(xiàn)手法，通過歸納和聯(lián)想建立圖標的視覺表象與其背后的意義兩者之間的連結(jié)。這種連結(jié)關(guān)系取決于人的知識體系和生活經(jīng)驗，因此圖標設(shè)計師應(yīng)該仔細考慮用戶的知識體系，并且充分運用日常生活的、共識度高的事物找到最短的概念連結(jié)。

最后，最好使用簡短文字做為圖標的冗余編碼。在信息傳播的過程中，增加信息的冗余度是保證信息傳輸?shù)目煽啃缘淖钣行У姆椒āＷ煮w的形態(tài)、大小、顏色等也會影響界面的視覺感受和運行效果，對于手機界面文字而言，中文字體大小應(yīng)不小于14px，英文字體大小不小于12px，字體的形態(tài)也不宜過于復雜，黑體和中等線體因其橫豎撇捺筆畫一致相等、空隙均勻，是手機界面中的常用字體。

三、交互特效

手機界面信息架構(gòu)完成了邏輯分明的功能模塊，用戶如何使用這些功能就是界面交互設(shè)計的范疇，它包括用戶如何操作、功能之間如何跳轉(zhuǎn)、無效信息如何展示等等。其中，交互特效的引入很好地解決了動畫方式和操作流程的問題，能夠幫助用戶去自然地理解手機發(fā)生了什么。交互特效的方式多樣，如轉(zhuǎn)場、過渡、吸附、彈出等，在使用時要遵循以下原則。

（一）認知的可依賴性

認知的可依賴性是指符合用戶認知習慣的交互方式，包括人們?nèi)粘Ｉ钋榫暗淖匀徽J知和對人機界面產(chǎn)品的積累認知，將相同的經(jīng)驗延伸到手機界面中從而獲得自然好用的操作方式。在人們?nèi)粘Ｉ钪芯陀袘?yīng)用的滑動、拖拽、旋轉(zhuǎn)、點擊等手勢操作自然隨意，無需視覺元素的提示，減少用戶記憶負擔。熟知電腦的用戶則對進度條和菊花轉(zhuǎn)等過渡特效不陌生，用手機上傳照片或發(fā)郵件的數(shù)據(jù)加載過程都會添加很好的過渡動效。

（二）操作的便捷性

首先，避免使用不必要的動畫，讓用戶的操作更少一點，讓界面更簡單一點。豐富的動效雖然可以讓人機交互更具活力，但任何的動效都需要基于需求的基礎(chǔ)之上，不能為了動而動。動效可以讓用戶減少焦慮，消除等待感，但處理不當也會引起用戶焦慮。例如發(fā)送短信過程中的進度條特效會使用戶產(chǎn)生離開當前界面，短信發(fā)送失敗的誤導，此時可以選擇后臺發(fā)送，告知用戶發(fā)送成功或失敗即可。其次，強調(diào)核心動作，突出產(chǎn)品重點功能，形成強烈印象。根據(jù)用戶的使用習慣，用戶操作過程可以分主要操作和次要操作，適當減少次要操作的視覺“分量”更能突出產(chǎn)品特點。

（三）提示的必要性

在用戶對某些界面操作感到不知所措時，應(yīng)在界面上增加相應(yīng)的提示告訴用戶該怎樣操作，就可以極大地提高操作的可用性。例如在欣賞相冊時通過“＋”、“－”符號提示照片放大或縮小的操作功能，或通過閃動箭頭、高亮的方式提示用戶滑動和點擊的操作功能。

[1][美]薩爾特曼.客戶如何思考［M］.李華飚，等譯.北京：機械工業(yè)出版社，2004.

[2]杜鵑.手機信息界面設(shè)計研究［D］.武漢理工大學，2007.