淺析iPhone用戶界面設(shè)計(jì)精粹

1、作為一款革命性產(chǎn)品，iPhone（這里泛指iPhone和iPod touch，當(dāng)然還有iPad）為我們帶來(lái)了許多意想不到的創(chuàng)意和驚喜。過(guò)去兩個(gè)月多的時(shí)間里，我們認(rèn)真地咀嚼iPhone Human Interface Guidelines，感悟字里行間透露著的蘋(píng)果的細(xì)致與智慧。興奮、激動(dòng)之余，有太多的驚喜想與大家分享。但無(wú)論從時(shí)間上還是精力上，130頁(yè)的完整套餐肯定會(huì)讓所有的人吃不消。我們收集了iPhone平臺(tái)的專業(yè)設(shè)計(jì)師的意見(jiàn)，加上翻譯過(guò)程的一點(diǎn)體會(huì)，整理出11條設(shè)計(jì)精粹。最后，希望這份130頁(yè)濃縮而成的快餐不會(huì)讓您覺(jué)得難吃，enjoy yourself！1. 了解應(yīng)用類型及各自特點(diǎn)iPhon

2、e平臺(tái)有三類型的應(yīng)用： 效率型應(yīng)用（Productivity Applications） 實(shí)用工具（Utility Applications） 沉浸型應(yīng)用（Immersive Applications）每一種都有各自不同的特點(diǎn)和應(yīng)用場(chǎng)合。設(shè)計(jì)之前如果能夠清楚產(chǎn)品的目標(biāo)和特點(diǎn)，選擇合適的應(yīng)用類型可以更好地迎對(duì)。效率型應(yīng)用用于幫助完成日常的一些工作，如收發(fā)郵件、即時(shí)通信、照片管理與分享。用戶快速查看、跳轉(zhuǎn)、執(zhí)行、完成，連貫的動(dòng)作要求界面簡(jiǎn)單直接，讓用戶可以全神貫注于任務(wù)本身。這類應(yīng)用一般都附帶自然的層級(jí)結(jié)構(gòu)。所以，表格視圖（table view）可以在這類軟件里大派用場(chǎng)。圖1.1 附帶層級(jí)結(jié)構(gòu)的效

3、率型應(yīng)用實(shí)用工具用于執(zhí)行一項(xiàng)簡(jiǎn)單的任務(wù)（如計(jì)算器，天氣報(bào)告），簡(jiǎn)單，容易配置就可以了。圖1.2 實(shí)用工具之“天氣報(bào)告”和“深度睡眠”沉浸型應(yīng)用可以為用戶帶來(lái)極致的娛樂(lè)和游戲體驗(yàn)，這類應(yīng)用可以進(jìn)一步細(xì)分為游戲和虛擬仿真類。這類應(yīng)用和標(biāo)準(zhǔn)的系統(tǒng)界面不同，用戶希望這類應(yīng)用能夠給他們帶來(lái)最大的娛樂(lè)，因此，界面設(shè)計(jì)的自由發(fā)揮度比較高，仿真的、可愛(ài)的設(shè)計(jì)風(fēng)格往往能恰到好處。圖1.3 沉浸型應(yīng)用2. 熟悉系統(tǒng)布局和控件特點(diǎn)iPhone 操作系統(tǒng)提供了非常出色的UI庫(kù)，這些標(biāo)準(zhǔn)的控件和視圖都得到了大量的研究才得以真正派上用場(chǎng)。另一方面，iPhone 用戶已經(jīng)對(duì)這些軟件非常熟悉，不管是出于什么理由，如果沒(méi)有更好

4、更實(shí)用的創(chuàng)意，我們應(yīng)該遵循iPhone的控件規(guī)范。至少，在我們打破iPhone的規(guī)則之前，“You must understand the rules before you can break them.”(你必須了解規(guī)則然后才能打破他們)。iPhone 提供的UI組件從大到小，大致可列舉如下（具體每種控件和視圖的細(xì)節(jié)，請(qǐng)參考iPhone 用戶界面設(shè)計(jì)指南第二部分）： 導(dǎo)航條，標(biāo)簽條，工具條和狀態(tài)條 彈出對(duì)話框、操作面板和模式視圖 表格視圖（Table Views）, 文本視圖（Text Views）, web視圖（Web Views） 應(yīng)用程序控件（如文本框、分頁(yè)顯示器、輪轉(zhuǎn)選擇器、進(jìn)度條、

5、更多按鈕等）3. 使用隱喻隱喻為界面視覺(jué)提示和功能建立了直觀的邏輯聯(lián)系。將軟件中涉及的元素和操作與真實(shí)世界關(guān)聯(lián)起來(lái)能夠更好地幫助用戶理解。iPhone內(nèi)置的備忘錄應(yīng)用就是一個(gè)使用隱喻的典范。除了基本的刪除和郵件這些圖標(biāo)隱喻，整個(gè)產(chǎn)品的外形：棕色的頭部導(dǎo)航，米黃色的紙質(zhì)背景，配合細(xì)致的行隔線和垂直的雙細(xì)線，儼然就是一可愛(ài)的小小備忘本。將產(chǎn)品與實(shí)體對(duì)應(yīng)起來(lái)，用戶一看就知道軟件的用途。iPhone操作系統(tǒng)的隱喻不勝枚舉，我們尚可盡量遵循，但如果有“更合適更貼切”的隱喻，你也可以放膽一試。4. 一目了然，即看即點(diǎn)用戶在移動(dòng)場(chǎng)景下不會(huì)長(zhǎng)時(shí)間對(duì)著手機(jī)屏幕，他們可能“迅速打開(kāi)音樂(lè)播放器隨便播放一首就跳去其他

6、應(yīng)用程序或繼續(xù)其他的事情”，不要以為用戶有時(shí)間去研究怎樣使用你的應(yīng)用程序，這種注意力相對(duì)分散的情景要求你的應(yīng)用程序界面必須盡量簡(jiǎn)潔，一目了然，用戶看到就能馬上理解。一般有三種方式可以簡(jiǎn)化界面： 刪減軟件功能：功能越少，界面越簡(jiǎn)潔。移動(dòng)產(chǎn)品的設(shè)計(jì)，減法遠(yuǎn)比加法來(lái)得重要。請(qǐng)牢記移動(dòng)產(chǎn)品設(shè)計(jì)里最重要的金科玉律： 為移動(dòng)場(chǎng)景下的大多數(shù)用戶設(shè)計(jì)最常用的少數(shù)幾個(gè)功能特點(diǎn)（Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context）。 減少輸入

7、：盡可能地減少輸入，直接為用戶提供選項(xiàng)。如索引列表，既方便用戶記憶，也可以幫助用戶快速掃描并直接選中；輪轉(zhuǎn)選擇器，劃上劃下即可選中，減少打字耗時(shí)的同時(shí)省去繁多的錯(cuò)誤檢測(cè)。 避免不必要的交互：用戶也不是你想像中那么傻的，不要一味提醒他們?nèi)绾尾僮鳎◣椭蕉嗾f(shuō)明你的軟件越難用），設(shè)計(jì)時(shí)應(yīng)該關(guān)注如何更有效地引導(dǎo)用戶集中精力快速完成任務(wù)。內(nèi)置的短信發(fā)送實(shí)在是太經(jīng)典了，寫(xiě)信人和收信人左右區(qū)分，信息內(nèi)容通過(guò)時(shí)間順序排列下來(lái)，整個(gè)信息來(lái)回歷史一目了然。呼叫程序同樣出色，重新設(shè)計(jì)的數(shù)字鍵盤(pán)弱化了字母排列，突出數(shù)字，由此換來(lái)寬大容易點(diǎn)擊的屏幕空間。圖4.1 一目了然的短信歷史查看和撥號(hào)呼叫5. 考慮屏幕上下不論單

8、手操作還是兩只手配合操作，屏幕上部分的可見(jiàn)性是最好的。所以，在設(shè)計(jì)應(yīng)用程序時(shí)，應(yīng)該將最常使用的的信息一般是高度概括的信息，如導(dǎo)航，或者一些常規(guī)操作如添加、完成、保存、取消置于屏幕頂端。屏幕的底部一般是輔助性的工具欄或切換視圖使用的頁(yè)簽欄。一些影響較大的操作如果出現(xiàn)在屏幕下半?yún)^(qū)域，必須仔細(xì)考慮它們的排列設(shè)計(jì)。如圖5.1，一般情況下，操作面板的取消按鈕放在最后，這樣可以鼓勵(lì)用戶閱讀完所有的選項(xiàng)，暗藍(lán)色的返回按鈕可以和一般的按鈕區(qū)分開(kāi)來(lái)，即便用戶沒(méi)閱讀完也知道這是返回按鈕。對(duì)于一些影響較大的操作（如刪除），將其放在面板的頂部是最好的，因?yàn)轫敳扛菀妆豢吹?，再加上紅色的警告暗示，用戶選擇起來(lái)會(huì)更為慎重

9、。圖5.1 操作面板上的按鈕排列6. 提供指尖大小的點(diǎn)擊區(qū)域如果按鍵布局過(guò)于擁擠，用戶就要小心翼翼地花更多時(shí)間去操作，錯(cuò)誤也會(huì)緊接而來(lái)。簡(jiǎn)潔易用的界面空間必須合理地控制按鈕布局和交互元素，讓用戶更快更容易點(diǎn)擊。舊版內(nèi)置計(jì)算器的按鍵是大號(hào)的，有效區(qū)域都為44*44px，非常容易點(diǎn)擊。新版的計(jì)算器為了容下更多的按鈕，按鍵大小做了一些調(diào)整，雖然高度上略有減小，但用戶點(diǎn)擊起來(lái)還算容易。對(duì)于經(jīng)常使用的“=”號(hào)，整個(gè)目標(biāo)區(qū)域都加大了，這種樣式上的區(qū)分可以將主要操作和次要操作區(qū)分開(kāi)來(lái)，以便更好地引導(dǎo)用戶。橫屏的計(jì)算器完整模式可以容下更多的按鍵，按鍵大小相對(duì)豎屏的要小，盡管如此，用戶點(diǎn)擊起來(lái)還是得心應(yīng)手。圖6

10、.1 適合手指點(diǎn)擊的計(jì)算器按鍵7. 靈活運(yùn)用手勢(shì)支持去到哪里，手指就跟到哪里，多種動(dòng)作隨時(shí)變換，直接感知與設(shè)備交互，如此自然直接的“輸入”，如果能夠靈活合適地運(yùn)用，除了可以帶來(lái)良好的用戶體驗(yàn)，還能極大滿足用戶的控制欲望。圖7.1 手勢(shì)操作：滾屏、長(zhǎng)按、拖動(dòng)、捏當(dāng)然，手指的一個(gè)最重要問(wèn)題在于它比鼠標(biāo)指針大得多，靈敏度和精確度會(huì)有所欠缺。一些同時(shí)使用鼠標(biāo)和鍵盤(pán)的操作（如復(fù)制、粘貼、選擇文字）是手指很難完成的。設(shè)計(jì)上應(yīng)該考慮由此帶來(lái)的影響，避免濫用。如果你的應(yīng)用支持比較復(fù)雜的手勢(shì)（長(zhǎng)按、捏），確保用戶能夠理解他們的含義，并且為這些手勢(shì)操作提供直接的響應(yīng)反饋。8. 考慮橫豎屏方向變化iPhone游戲里

11、出現(xiàn)橫豎屏設(shè)計(jì)比較正常，都是視具體的游戲類型來(lái)分。但一般的效率型應(yīng)用或?qū)嵱霉ぞ?，也是橫豎屏都有。林子大了，什么鳥(niǎo)都有，有些用戶就是喜歡經(jīng)常將屏幕旋轉(zhuǎn)過(guò)來(lái)，而且還不在少數(shù)。他們或是喜歡橫屏的瀏覽方式（如備忘錄、音樂(lè)），或是希望打橫可以看到更多的信息（如計(jì)算器）。設(shè)計(jì)的時(shí)候必須充分考慮用戶的期望。有時(shí)將界面內(nèi)容旋轉(zhuǎn)就可以簡(jiǎn)單滿足他們的需求，但有時(shí)也需要你重新去設(shè)計(jì)以展示更多的內(nèi)容（如橫屏的音樂(lè)會(huì)出現(xiàn)一個(gè)新的界面，展示所有的歌曲）。圖8.1 iPhoneQQ 橫屏輸入豎屏情況下，輸入鍵盤(pán)寬度只有320px，平均每個(gè)按鍵寬只有32px（320/10，這里忽略鍵與鍵的間隔）；橫屏?xí)r每個(gè)按鍵寬可以達(dá)到48

12、px，多了整整16px。如果是在小屏幕上輸入，你更傾向那種方式？如果你的應(yīng)用程序界面只支持單一方向的展示，最好的做法就是保持界面固定，不隨著設(shè)備方向改變而改變。例如，當(dāng)用戶選擇去看一個(gè)iPod視頻時(shí)，不管屏幕打橫打豎，這段視頻都是橫向展示的。有了這個(gè)暗示，用戶就會(huì)很自然地旋轉(zhuǎn)屏幕到水平橫向觀看。翻轉(zhuǎn)按鈕也沒(méi)有存在的必要了。9. 合理的反饋縱觀所有的內(nèi)置應(yīng)用，反饋可謂無(wú)處不在。由于大部分的操作都是通過(guò)手勢(shì)（其實(shí)還有抖動(dòng)、語(yǔ)音輸入方式）完成的，通過(guò)一些明顯的變化來(lái)響應(yīng)用戶做出的操作，能夠給予用戶極大的信心。圖9.1 iPhone版 QQ斗地主的音量大小調(diào)整進(jìn)入QQ斗地主的游戲設(shè)置頁(yè)面調(diào)整音量大小時(shí)

13、，手指的大小蓋住了滑塊，為了將選中的信息反饋給用戶，兩邊的擴(kuò)音器圖標(biāo)同時(shí)使用了外發(fā)光樣式。iPhone 操作系統(tǒng)提供了許多自動(dòng)反饋的機(jī)制。動(dòng)畫(huà)就是其中一種。不過(guò)切記一點(diǎn)，動(dòng)畫(huà)的目的在于提升用戶體驗(yàn)，而不是成為盲目追求酷炫的焦點(diǎn)。10. 優(yōu)化啟動(dòng)過(guò)程iPhone OS4.0以前的應(yīng)用都屬于單任務(wù)的，用戶會(huì)經(jīng)常在多個(gè)應(yīng)用程序之間切換，一個(gè)電話來(lái)了，用戶不得不退出正在進(jìn)行的應(yīng)用程序。要確保用戶回來(lái)時(shí)啟動(dòng)足夠快速，以減少用戶的等待，而且，為了將影響降到最低，應(yīng)盡可能保存上次關(guān)閉之前的操作結(jié)果。這似乎都是工程師的職責(zé)，但作為一個(gè)優(yōu)秀的設(shè)計(jì)師，你還可以為此做很多的事情。開(kāi)啟時(shí)第一屏顯示一個(gè)背景圖或者簡(jiǎn)短的

14、loading動(dòng)畫(huà)。即使是普通的效率型應(yīng)用或者簡(jiǎn)單的實(shí)用小工具，啟動(dòng)時(shí)如果能夠預(yù)先顯示一個(gè)背景圖，背景圖與程序啟動(dòng)后首界面平穩(wěn)自然地過(guò)渡，這種方式既可以帶給用戶即時(shí)的反饋，也可以“縮短”用戶等待的時(shí)間。圖 10.1 啟動(dòng)時(shí)的預(yù)加載背景運(yùn)行天氣應(yīng)用和iPhone QQ時(shí)，即使是很短的啟動(dòng)時(shí)間，預(yù)加載背景還是能夠讓人感覺(jué)啟動(dòng)等待的時(shí)間縮短了。雖然iPhone OS4.0開(kāi)始支持多任務(wù)，但不要天真地以為這種背景預(yù)加載的細(xì)節(jié)可以忽視了，應(yīng)用程序應(yīng)該一如既往地為用戶提供這種流暢的體驗(yàn)，畢竟，用戶啟動(dòng)的時(shí)候還是期望軟件可以“快一點(diǎn)”。啟動(dòng)時(shí)要切記一點(diǎn)：不要彈出一個(gè)說(shuō)明性窗口，或一個(gè)刺眼的閃屏，或其它類似的

15、啟動(dòng)體驗(yàn)（網(wǎng)絡(luò)wifi提示這些是例外）。這種方式很突兀，讓用戶立即使用你的應(yīng)用程序就好了。11. 為應(yīng)用程序設(shè)計(jì)圖標(biāo)應(yīng)用程序圖標(biāo)是指放在iPhone屏幕上用來(lái)啟動(dòng)程序的圖標(biāo)。iPhone的屏幕大小只有480*320px，在這狹小的屏幕里，用戶希望放下盡可能多的圖標(biāo)，這些圖標(biāo)必須具有突出的視覺(jué)效果才能方便用戶辨認(rèn)。要做到這一點(diǎn)，可以從以下兩方面著手： 美觀：確保圖標(biāo)簡(jiǎn)單美觀，富有吸引力，這樣用戶才愿意讓這些圖標(biāo)長(zhǎng)久占據(jù)有限的屏幕空間。 可識(shí)別特點(diǎn)：要讓用戶在大量圖標(biāo)中輕松找到該應(yīng)用程序，圖標(biāo)必須要有自己的特點(diǎn)，對(duì)于關(guān)聯(lián)的產(chǎn)品，可以結(jié)合品牌進(jìn)行設(shè)計(jì)。圖11.1 “企鵝”圖標(biāo)，一看就知道是QQ產(chǎn)品為了與內(nèi)置圖標(biāo)保持協(xié)調(diào)一致，iPhone操作系統(tǒng)一般會(huì)自動(dòng)給圖標(biāo)增加一些視覺(jué)效果： 圓角 陰影效果 反光效果圖11.2 未添加視覺(jué)效果的的普通圖標(biāo)圖11.3 iPhone