觸屏手機(jī)界面的設(shè)計(jì)是伴隨著觸屏手機(jī)的發(fā)展而產(chǎn)生的視聽(tīng)設(shè)計(jì)新課題，是對(duì)傳統(tǒng)手機(jī)界面設(shè)計(jì)的更加細(xì)化的一個(gè)分支，其設(shè)計(jì)必須是設(shè)計(jì)師以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)手機(jī)界面的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)，并隨著通訊技術(shù)的發(fā)展而發(fā)展。表面上看，它不過(guò)是關(guān)于頁(yè)面版式設(shè)計(jì)的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)、技術(shù)和人機(jī)交互科學(xué)的高度統(tǒng)一。本文主要從設(shè)計(jì)師的角度出發(fā)，運(yùn)用工業(yè)設(shè)計(jì)的方法，對(duì)觸屏手機(jī)的界面設(shè)計(jì)原則進(jìn)行初步思考與探索，以期從中得到一些有益的結(jié)論。

　　1　觸屏手機(jī)概述

　　觸屏手機(jī)，顧名思義，就是可以通過(guò)觸摸屏幕而實(shí)現(xiàn)控制的手機(jī)。它的歷史并不長(zhǎng)，從1999年Motorola公司推出款觸屏手機(jī)A6188以來(lái)，也不到10年時(shí)間。然而在這短短的幾年間，觸屏手機(jī)界面卻產(chǎn)生了重大的變化，其間，大致可以劃分為3個(gè)階段。

　　1.1　雙色文字界面階段

　　早期（1999～2002年）的觸屏手機(jī)由于技術(shù)上的限制，絕大多數(shù)采用黑白、藍(lán)黑、綠黑等雙色屏幕。在界面設(shè)計(jì)上，主要是以文字為主，輔以直線用于劃分不同區(qū)域。在圖形設(shè)計(jì)上，基本沒(méi)有或是采取少量的線條勾勒出圖形的輪廓。這一時(shí)期的手機(jī)界面設(shè)計(jì)十分簡(jiǎn)單，甚至可以說(shuō)是原始，設(shè)計(jì)僅僅只是滿足于功能，在視覺(jué)表現(xiàn)方面和交互設(shè)計(jì)方面考慮并不多。

　　1.2　彩色圖形界面階段

　　由于技術(shù)上的提高，這一時(shí)期的觸屏手機(jī)界面以基本上采用彩屏界面。界面設(shè)計(jì)從內(nèi)容上更加的豐富，圖標(biāo)設(shè)計(jì)更加精致，少量設(shè)計(jì)采用了動(dòng)態(tài)效果表現(xiàn)。文字方面字體字號(hào)的選擇更加自由，用戶可以自行定義自己所需字體。同時(shí)，部分手機(jī)廠商提供多套頁(yè)面主題可供更換，用戶也可自行制作相關(guān)主題。這段時(shí)期（2003～2006年），觸屏手機(jī)頁(yè)面在設(shè)計(jì)方面處于高速發(fā)展時(shí)期，視覺(jué)表現(xiàn)方面和之前相比有了很大的提高。

　　但在交互設(shè)計(jì)方面設(shè)計(jì)仍有限制，主要還是以點(diǎn)擊為主。

　　1.3　人機(jī)交互界面階段

　　2007年，Iphone的發(fā)售使觸屏手機(jī)界面設(shè)計(jì)產(chǎn)生了一種革命。其創(chuàng)新性的人機(jī)交互設(shè)計(jì)，使得手機(jī)界面設(shè)計(jì)從視覺(jué)效果設(shè)計(jì)方面向?qū)τ脩趔w驗(yàn)方面發(fā)生了轉(zhuǎn)移。人們慢慢的意識(shí)到，觸屏手機(jī)界面的設(shè)計(jì)不僅僅只是GUI（用戶圖形界面）的設(shè)計(jì)，同時(shí)還包括了交互設(shè)計(jì)和用戶測(cè)試/研究設(shè)計(jì)。這一時(shí)期的設(shè)計(jì)，更強(qiáng)調(diào)于用戶體驗(yàn)，好的用戶體驗(yàn)不僅僅只是包括視覺(jué)上的，同時(shí)還有觸覺(jué)、聽(tīng)覺(jué)以及交互性方面等。

　　2　觸屏手機(jī)界面設(shè)計(jì)的內(nèi)容及原則

　　隨著人們對(duì)審美、時(shí)尚、趣味的不斷追求，手機(jī)界面設(shè)計(jì)也不斷花樣翻新，越來(lái)越多精美、新穎、富有創(chuàng)造力和想象力的界面充斥著我們的視界?？墒牵瑥目捎眯缘慕嵌戎v，并不是越花哨的界面越被用戶所接受，界面的美，不僅要作為藝術(shù)審美形式的美，滿足人們感覺(jué)上的愉悅性，更多的是產(chǎn)品作為操作的一種工具，來(lái)滿足人實(shí)現(xiàn)某種目的帶來(lái)的愉悅性。它不僅僅是一種表象，而是一種實(shí)質(zhì)性的體現(xiàn)，帶有更多的實(shí)用性。

　　成功的觸屏手機(jī)界面設(shè)計(jì)必須進(jìn)行人機(jī)方面的可用性研究，了解人在感覺(jué)和認(rèn)識(shí)方面的需求。在設(shè)計(jì)的同時(shí)，必須充分考慮各種視覺(jué)元素的樣式和在不同操作狀態(tài)下的視覺(jué)效果。

　　觸屏手機(jī)界面設(shè)計(jì)涉及的具體內(nèi)容很多，總的來(lái)說(shuō)可以概括為視聽(tīng)元素設(shè)計(jì)和版式設(shè)計(jì)兩個(gè)方面。

　　2.1　視聽(tīng)元素設(shè)計(jì)

　　這里所說(shuō)的視聽(tīng)元素，主要包括：文本、圖標(biāo)、圖像、表格、導(dǎo)航工具等界面構(gòu)成元素。無(wú)論是文本、圖標(biāo)，還是圖像、表格、導(dǎo)航工具，設(shè)計(jì)師所要考慮的是如何把它們放進(jìn)觸屏這個(gè)小的"畫板"中才能達(dá)到很好的效果。

　　2.1.1　圖標(biāo)設(shè)計(jì)原則

　　手機(jī)界面的特點(diǎn)就是屏幕尺寸小，傳統(tǒng)的用戶界面、窗口界面技術(shù)并不適用，因此，讓手機(jī)視聽(tīng)元素一目了然是非常重要的。以圖標(biāo)設(shè)計(jì)為例，每一個(gè)圖標(biāo)都表示一個(gè)目標(biāo)動(dòng)作，它應(yīng)該有強(qiáng)烈的表意性，幫助用戶識(shí)別。同時(shí)，由于手機(jī)屏幕有尺寸限制，圖標(biāo)不易過(guò)大，否則會(huì)產(chǎn)生比例失調(diào)。當(dāng)然，由于觸屏手機(jī)上圖標(biāo)的可點(diǎn)擊性，圖標(biāo)的設(shè)計(jì)也不能過(guò)小，否則讓用戶手操作時(shí)產(chǎn)生困難。在顏色的選擇上，顏色不宜過(guò)多，過(guò)多的顏色出現(xiàn)在一個(gè)小的區(qū)域中會(huì)產(chǎn)生一種雜亂的感覺(jué)。

　　同時(shí)，顏色也要保證可識(shí)別性；比如，在暗色的背景上，圖標(biāo)顏色的設(shè)計(jì)就應(yīng)該以白色，黃色，草綠等亮色為主色調(diào)。為了確保圖像的清晰，可以適當(dāng)采用顏色的漸變，陰影等效果。當(dāng)然，圖標(biāo)的設(shè)計(jì)也可以遵循一定的規(guī)范，例如《WindowsVista用戶體驗(yàn)設(shè)計(jì)規(guī)范》中就從概念、透視、光源、陰影等幾個(gè)方面對(duì)圖標(biāo)的設(shè)計(jì)有著詳細(xì)的說(shuō)明。

　　2.1.2　文本設(shè)計(jì)原則

　　和傳統(tǒng)按鍵式手機(jī)不同，觸屏手機(jī)界面上的文本大多是可以觸摸操作的，要在用戶操作的同時(shí)，保證文字的可識(shí)別性和減少用戶誤操作的幾率，這就對(duì)文本圖形的設(shè)計(jì)提出了更高的要求。一般而言，在手機(jī)界面設(shè)計(jì)中，字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體中宋體9～12較為美觀，很少使用超過(guò)12號(hào)的字體。而對(duì)于觸屏界面而言，由于操作時(shí)存在視線遮擋的情況，因此，在手指滑過(guò)的狀態(tài)下，可以適當(dāng)考慮將文字放大和偏移。

　　2.1.3　圖表設(shè)計(jì)原則

　　圖像和表格所占的區(qū)域相對(duì)較大，如何保持如此大面積的元素和頁(yè)面的整體協(xié)調(diào)是設(shè)計(jì)師在設(shè)計(jì)時(shí)必須考慮的問(wèn)題。

　　此外，對(duì)于一些尺寸上超出界面范圍的圖像和表格必須保證在移動(dòng)操作的過(guò)程中也保持相當(dāng)好的可識(shí)別性和易操作性。

　　2.1.4　導(dǎo)航設(shè)計(jì)原則

　　用戶需要適當(dāng)?shù)姆答佇盘?hào)來(lái)評(píng)價(jià)操作結(jié)果，的導(dǎo)航設(shè)計(jì)應(yīng)該提示明確，讓用戶隨時(shí)知道自己所處的位置，同時(shí)能夠迅速跳轉(zhuǎn)到自己想進(jìn)的目標(biāo)頁(yè)面。操作步數(shù)也是衡量導(dǎo)航設(shè)計(jì)的一個(gè)重要標(biāo)準(zhǔn)，要盡可能的用少的操作數(shù)使用戶達(dá)到目標(biāo)。當(dāng)然，在導(dǎo)航簡(jiǎn)單明了的同時(shí)，也充分考慮到用戶的習(xí)慣，減少用戶學(xué)習(xí)的時(shí)間。

　　2.2　版式設(shè)計(jì)

　　觸屏手機(jī)界面的版式設(shè)計(jì)，同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多共同之處，它在界面設(shè)計(jì)中占據(jù)著重要的地位。即是在有限的屏幕空間上將視聽(tīng)多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個(gè)性化的表現(xiàn)出來(lái)，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽(tīng)傳達(dá)方式。它在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感和精神上的享受。

　　2.2.1　布局原則

　　一個(gè)合理布局的對(duì)于觸屏手機(jī)界面的版式設(shè)計(jì)尤為重要，一般來(lái)說(shuō)，手機(jī)顯示屏的尺寸有限，布局合理，流暢使視線融會(huì)貫通，也可間接幫助用戶找到自己關(guān)注的對(duì)象。根據(jù)視覺(jué)注意的分布可知，人的視覺(jué)對(duì)左上角比較敏感占40%,明顯高于其他區(qū)域。因此，設(shè)計(jì)師應(yīng)考慮將重要信息或視覺(jué)流程的停留點(diǎn)安排在注目?jī)r(jià)值高的視域，使得整個(gè)界面的設(shè)計(jì)主題一目了然。

　　2.2.2　交互原則

　　設(shè)計(jì)要與人進(jìn)行交流，操作的便捷性和多樣性也是設(shè)計(jì)師在觸屏手機(jī)界面版式設(shè)計(jì)中所要考慮的一個(gè)重要的問(wèn)題。

　　和普通手機(jī)不同，觸屏手機(jī)的特點(diǎn)是可以用手觸擊屏幕而產(chǎn)生不同的操作，而非單純的點(diǎn)擊某些特定的按鍵。在此基礎(chǔ)上，觸屏手機(jī)界面的交互方式呈現(xiàn)出多樣性，可以點(diǎn)擊，可以滑動(dòng)，可以拖拽，可以多點(diǎn)滑動(dòng)，也可以將一系列動(dòng)作組合起來(lái)形成一個(gè)個(gè)特殊的“手勢(shì)”，設(shè)計(jì)師必須通過(guò)一個(gè)特定的版式設(shè)計(jì)一些視覺(jué)元素排列，使之清晰明確的告訴用戶有效的操作信息，即讓用戶明確知道該如何操作，而不是讓用戶一點(diǎn)點(diǎn)的嘗試。當(dāng)然，對(duì)于多種手勢(shì)的復(fù)合運(yùn)用，也可以采用幫助菜單的方法，但需要注意的是幫助菜單必須放在顯眼的位置，以便用戶比較容易的發(fā)現(xiàn)，從而達(dá)到良好的用戶體驗(yàn)。

　　2.2.3　色彩原則

　　柳冠中先生說(shuō)過(guò)，設(shè)計(jì)不僅是在造物，其實(shí)也是抒情的過(guò)程。色彩影響著人的情緒，一些餐廳或飯館把自己的招牌設(shè)置成橙黃色，這是因?yàn)槌赛S色比較容易激起人們的食欲。觸屏手機(jī)界面版式的色彩設(shè)計(jì)也是如此，其總體色彩應(yīng)該和自己相對(duì)應(yīng)的頁(yè)面主題相協(xié)調(diào)。比如藍(lán)底色的手機(jī)頁(yè)面上配上白色的按鍵圖標(biāo)就會(huì)產(chǎn)生一種醒目的效果，可以提示用戶該按鍵圖標(biāo)可點(diǎn)擊，而如果配上大紅色的按鍵圖標(biāo)就會(huì)產(chǎn)生一種不舒服的感覺(jué)，讓用戶想遠(yuǎn)離它，這就違背了設(shè)計(jì)的初衷。同時(shí)，在色彩設(shè)計(jì)中，也應(yīng)注意主題的鮮明，操作區(qū)域和非操作區(qū)域一定要通過(guò)不同的顏色使之有效的區(qū)分開(kāi)來(lái)，已達(dá)到吸引用戶注意力的效果。

　　3　觸屏手機(jī)界面設(shè)計(jì)實(shí)例

　　下面以觸屏手機(jī)Iphone的界面為例，談?wù)動(dòng)|屏手機(jī)界面設(shè)計(jì)原則的運(yùn)用。

　　3.1　視聽(tīng)元素設(shè)計(jì)原則的運(yùn)用

　　Iphone的默認(rèn)圖標(biāo)為圓角方形，全屏可放20個(gè)圖標(biāo)，大小適中，在清晰明確表現(xiàn)出圖標(biāo)內(nèi)容的同時(shí)也利于手指點(diǎn)擊操作。在色彩表現(xiàn)上顏色鮮明，玻璃效果的運(yùn)用很好的表現(xiàn)出了光感。圖標(biāo)的動(dòng)態(tài)效果也是吸引消費(fèi)者的一個(gè)重要因素。

　　用戶進(jìn)行文體操作時(shí)，由于屏幕上面默認(rèn)字體比較小，Iphone采用一個(gè)放大境顯示出放大的字體效果，而軟鍵盤輸入時(shí)由于手指會(huì)遮擋視線，所以Iphone將放大的字體在旁邊顯示。這樣的設(shè)計(jì)，極大地提高了用戶識(shí)別文字的能力，尤其是對(duì)于老年人或者視力比較差的用戶益處更大。

　　Iphone的圖像設(shè)置也別具一格，例如在音樂(lè)瀏覽器中，當(dāng)前專輯的圖像正面居中，占據(jù)了用戶的視覺(jué)中心，其它專輯分居兩側(cè)且為立體式的斜放，這樣的斜放設(shè)計(jì)，既在數(shù)量上能顯示更多的專輯，又在視覺(jué)上符合用戶的體驗(yàn)習(xí)慣，見(jiàn)圖1。

圖1　Iphone的音樂(lè)瀏覽器界面

　　在界面的下方，Iphone設(shè)置了電話、短信等4個(gè)常用的功能按鈕作為快捷導(dǎo)航，同時(shí)，當(dāng)圖標(biāo)增多時(shí)界面上會(huì)出現(xiàn)亮點(diǎn)不同的小圓點(diǎn)來(lái)輔助導(dǎo)航。

　　3.2　版式設(shè)計(jì)原則的運(yùn)用

　　Iphone的布局并沒(méi)有采用常見(jiàn)的3×3的九宮格布局模式，而是把界面劃分成上下2大區(qū)域；界面上區(qū)域顯示一些較常用的功能圖標(biāo)，在界面下區(qū)域顯示重要的4個(gè)功能，見(jiàn)圖2。

圖2　Iphone的圖標(biāo)布局

　　兩區(qū)域之間有明顯地距離間隔，便于用戶快速識(shí)別出下方重要的功能圖標(biāo)。所有圖標(biāo)采用大圖形加文字的組合方式，據(jù)科學(xué)分析得知大量圖形的使用有利于快速識(shí)別和便于記憶，因此如果圖標(biāo)設(shè)計(jì)地很，則用戶可以降低視線搜索的時(shí)間，操作效率也會(huì)得到相應(yīng)提高。

　　Iphone的創(chuàng)新在于它的交互設(shè)計(jì)，它打破了觸屏手機(jī)傳統(tǒng)的交互方式，充分模擬了正常人操作物體的固有習(xí)慣和思維方式，用操作日常中的物體時(shí)一般采用的推、拉、滾、扭、按壓和撥動(dòng)等基本動(dòng)作，以令人賞心悅目的交互手法帶給了用戶非常棒的體驗(yàn)感。例如，在鬧鈴頁(yè)面時(shí)鐘的設(shè)計(jì)上Iphone采用一種滾筒造型，用戶直接用手指向上或向下快速撥動(dòng)即可，系統(tǒng)會(huì)自動(dòng)根據(jù)手指撥動(dòng)的方向顯示對(duì)應(yīng)的信息。實(shí)踐表明，這種直接用手指在屏幕上滑動(dòng)的方式就比較容易且操作效率也較高。

　　Iphone默認(rèn)的界面在色彩設(shè)計(jì)上以黑色為主色調(diào)，配合著白色透明的玻璃高光，一系列高對(duì)比色的運(yùn)用凸顯出高科技的色彩。在具體的頁(yè)面設(shè)計(jì)上，Iphone也有自身一些獨(dú)到之處。例如，在初始菜單頁(yè)面中，各個(gè)圖標(biāo)的顏色是變化且鮮艷的，這樣有2點(diǎn)好處：不斷變化的事物能夠引起人的注意力，而提示用戶點(diǎn)擊；界面設(shè)計(jì)的色彩個(gè)性化，可以協(xié)調(diào)用戶的心理，讓用戶對(duì)軟件產(chǎn)品時(shí)常保持一種新鮮度。

　　4　結(jié)語(yǔ)

　　隨著數(shù)字化識(shí)別技術(shù)在我國(guó)日新月異的廣泛應(yīng)用，傳統(tǒng)的按鍵式手機(jī)的使用手段和方法受到了極大的挑戰(zhàn)，而觸屏手機(jī)則憑借其良好的交互性和操作性無(wú)疑將是手機(jī)發(fā)展的重要方向之一。觸屏手機(jī)的界面作為用戶直接操作和應(yīng)用的主體，也必將受到人們的關(guān)注。目前的觸屏手機(jī)界面在視覺(jué)效果上已經(jīng)達(dá)到了一個(gè)相當(dāng)高的水平，如何讓用戶使用時(shí)感到舒適、方便已成為現(xiàn)在設(shè)計(jì)師在設(shè)計(jì)時(shí)所考慮的問(wèn)題，一切必須以人的需求為前提，這也是人本主義設(shè)計(jì)關(guān)注的焦點(diǎn)之一?？梢灶A(yù)見(jiàn)，未來(lái)一段時(shí)間觸屏手機(jī)界面的設(shè)計(jì)在視覺(jué)效果更加突出的同時(shí)，人機(jī)交互性也會(huì)是設(shè)計(jì)師關(guān)注的重點(diǎn)，具有的人性化的設(shè)計(jì)，才是用戶真正想要得到的。