2012-1-2 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
作為一款革命性產(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)的專(zhuān)業(yè)設(shè)計(jì)師的意見(jiàn),加上翻譯過(guò)程的一點(diǎn)體會(huì),整理出11條設(shè)計(jì)精粹 。最后,希望這份130頁(yè)濃縮而成的快餐不會(huì)讓您覺(jué)得難吃,enjoy yourself!
1. 了解應(yīng)用類(lèi)型及各自特點(diǎn)
iPhone平臺(tái)有三類(lè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)用類(lèi)型可以更好地迎對(duì)。
效率型應(yīng)用用于幫助完成日常的一些工作,如收發(fā)郵件、即時(shí)通信、照片管理與分享。用戶(hù)快速查看、跳轉(zhuǎn)、執(zhí)行、完成,連貫的動(dòng)作要求界面簡(jiǎn)單直接,讓 用戶(hù)可以全神貫注于任務(wù)本身。這類(lèi)應(yīng)用一般都附帶自然的層級(jí)結(jié)構(gòu)。所以,表格視圖(table view)可以在這類(lèi)軟件里大派用場(chǎng)。
圖1.1 附帶層級(jí)結(jié)構(gòu)的效率型應(yīng)用
實(shí)用工具用于執(zhí)行一項(xiàng)簡(jiǎn)單的任務(wù)(如計(jì)算器,天氣報(bào)告),簡(jiǎn)單,容易配置就可以了。
圖1.2 實(shí)用工具之“天氣報(bào)告”和“深度睡眠”
沉浸型應(yīng)用可以為用戶(hù)帶來(lái)的娛樂(lè)和游戲體驗(yàn),這類(lèi)應(yīng)用可以進(jìn)一步細(xì)分為游戲和虛擬仿真類(lèi)。這類(lèi)應(yīng)用和標(biāo)準(zhǔn)的系統(tǒng)界面 不同,用戶(hù)希望這類(lèi)應(yīng)用能夠給他們帶來(lái)最大的娛樂(lè),因此,界面設(shè)計(jì)的自由發(fā)揮度比較高,仿真的、可愛(ài)的設(shè)計(jì)風(fēng)格往往能恰到好處。
2. 熟悉系統(tǒng)布局和控件特點(diǎn)
iPhone 操作系統(tǒng)提供了非常出色的UI庫(kù),這些標(biāo)準(zhǔn)的控件和視圖都得到了大量的研究才得以真正派上用場(chǎng)。另一方面,iPhone 用戶(hù)已經(jīng)對(duì)這些軟件非常熟悉,不管是出于什么理由,如果沒(méi)有更好更實(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 用戶(hù)界面設(shè)計(jì)指南》第二部分):
● 導(dǎo)航條,標(biāo)簽條,工具條和狀態(tài)條
● 彈出對(duì)話(huà)框、操作面板和模式視圖
● 表格視圖(Table Views), 文本視圖(Text Views), web視圖(Web Views)
● 應(yīng)用程序控件(如文本框、分頁(yè)顯示器、輪轉(zhuǎn)選擇器、進(jìn)度條、更多按鈕等)
3. 使用隱喻
隱喻為界面視覺(jué)提示和功能建立了直觀的邏輯聯(lián)系。將軟件中涉及的元素和操作與真實(shí)世界關(guān)聯(lián)起來(lái)能夠更好地幫助用戶(hù)理解。
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),用戶(hù)一看就知道軟件的用途。
iPhone操作系統(tǒng)的隱喻不勝枚舉,我們尚可盡量遵循,但如果有“更合適更貼切”的隱喻,你也可以放膽一試。
4. 一目了然,即看即點(diǎn)
用戶(hù)在移動(dòng)場(chǎng)景下不會(huì)長(zhǎng)時(shí)間對(duì)著手機(jī)屏幕,他們可能“迅速打開(kāi)音樂(lè)播放器隨便播放一首就跳去其他應(yīng)用程序或繼續(xù)其他的事情”,不要以為用戶(hù)有時(shí)間去 研究怎樣使用你的應(yīng)用程序,這種注意力相對(duì)分散的情景要求你的應(yīng)用程序界面必須盡量簡(jiǎn)潔,一目了然,用戶(hù)看到就能馬上理解。一般有三種方式可以簡(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ù)用戶(hù)設(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)。
● 減少輸入:盡可能地減少輸入,直接為用戶(hù)提供選項(xiàng)。如索引列表,既方便用戶(hù)記憶,也可以幫助用戶(hù)快速掃描并直接選中;輪轉(zhuǎn)選擇器,劃上劃下即可選中,減少打字耗時(shí)的同時(shí)省去繁多的錯(cuò)誤檢測(cè)。
● 避免不必要的交互:用戶(hù)也不是你想像中那么傻的,不要一味提醒他們?nèi)绾尾僮鳎◣椭蕉嗾f(shuō)明你的軟件越難用),設(shè)計(jì)時(shí)應(yīng)該關(guān)注如何更有效地引導(dǎo)用戶(hù)集中精力快速完成任務(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. 考慮屏幕上下
不論單手操作還是兩只手配合操作,屏幕上部分的可見(jiàn)性是最好的。所以,在設(shè)計(jì)應(yīng)用程序時(shí),應(yīng)該將最常使用的的信息——一般是高度概括的信息,如導(dǎo)航,或者一些常規(guī)操作如添加、完成、保存、取消——置于屏幕頂端。
屏幕的底部一般是輔助性的工具欄或切換視圖使用的頁(yè)簽欄。一些影響較大的操作如果出現(xiàn)在屏幕下半?yún)^(qū)域,必須仔細(xì)考慮它們的排列設(shè)計(jì)。如圖5.1,一 般情況下,操作面板的取消按鈕放在最后,這樣可以鼓勵(lì)用戶(hù)閱讀完所有的選項(xiàng),暗藍(lán)色的返回按鈕可以和一般的按鈕區(qū)分開(kāi)來(lái),即便用戶(hù)沒(méi)閱讀完也知道這是返回 按鈕。對(duì)于一些影響較大的操作(如刪除),將其放在面板的頂部是最好的,因?yàn)轫敳扛菀妆豢吹?,再加上紅色的警告暗示,用戶(hù)選擇起來(lái)會(huì)更為慎重。
圖5.1 操作面板上的按鈕排列
6. 提供指尖大小的點(diǎn)擊區(qū)域
如果按鍵布局過(guò)于擁擠,用戶(hù)就要小心翼翼地花更多時(shí)間去操作,錯(cuò)誤也會(huì)緊接而來(lái)。簡(jiǎn)潔易用的界面 空間必須合理地控制按鈕布局和交互元素,讓用戶(hù)更快更容易點(diǎn)擊。
舊版內(nèi)置計(jì)算器的按鍵是大號(hào)的,有效區(qū)域都為44*44px,非常容易點(diǎn)擊。新版的計(jì)算器為了容下更多的按鈕,按鍵大小做了一些調(diào)整,雖然高度上略 有減小,但用戶(hù)點(diǎn)擊起來(lái)還算容易。對(duì)于經(jīng)常使用的“=”號(hào),整個(gè)目標(biāo)區(qū)域都加大了,這種樣式上的區(qū)分可以將主要操作和次要操作區(qū)分開(kāi)來(lái),以便更好地引導(dǎo)用 戶(hù)。
橫屏的計(jì)算器完整模式可以容下更多的按鍵,按鍵大小相對(duì)豎屏的要小,盡管如此,用戶(hù)點(diǎn)擊起來(lái)還是得心應(yīng)手。
圖6.1 適合手指點(diǎn)擊的計(jì)算器按鍵
7. 靈活運(yùn)用手勢(shì)支持
去到哪里,手指就跟到哪里,多種動(dòng)作隨時(shí)變換,直接感知與設(shè)備交互,如此自然直接的“輸入”,如果能夠靈活合適地運(yùn)用,除了可以帶來(lái)良好的用戶(hù)體驗(yàn),還能極大滿(mǎn)足用戶(hù)的控制欲望。
圖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)按、捏),確保用戶(hù)能夠理解他們的含義,并且為這些手勢(shì)操作提供 直接的響應(yīng)反饋。
8. 考慮橫豎屏方向變化
iPhone游戲里出現(xiàn)橫豎屏設(shè)計(jì)比較正常,都是視具體的游戲類(lèi)型來(lái)分。但一般的效率型應(yīng)用或?qū)嵱霉ぞ撸彩菣M豎屏都有。林子大了,什么鳥(niǎo)都有,有 些用戶(hù)就是喜歡經(jīng)常將屏幕旋轉(zhuǎn)過(guò)來(lái),而且還不在少數(shù)。他們或是喜歡橫屏的瀏覽方式(如備忘錄、音樂(lè)),或是希望打橫可以看到更多的信息(如計(jì)算器)。設(shè)計(jì) 的時(shí)候必須充分考慮用戶(hù)的期望。有時(shí)將界面內(nèi)容旋轉(zhuǎn)就可以簡(jiǎn)單滿(mǎ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á)到48px,多了整整16px。如果是在小屏幕上輸入,你更傾向那種方式?
如果你的應(yīng)用程序界面只支持單一方向的展示,最好的做法就是保持界面固定,不隨著設(shè)備方向改變而改變。例如,當(dāng)用戶(hù)選擇去看一個(gè)iPod視頻時(shí),不 管屏幕打橫打豎,這段視頻都是橫向展示的。有了這
個(gè)暗示,用戶(hù)就會(huì)很自然地旋轉(zhuǎn)屏幕到水平橫向觀看。翻轉(zhuǎn)按鈕也沒(méi)有存在的必要了。
9. 合理的反饋
縱觀所有的內(nèi)置應(yīng)用,反饋可謂無(wú)處不在。由于大部分的操作都是通過(guò)手勢(shì)(其實(shí)還有抖動(dòng)、語(yǔ)音輸入方式)完成的,通過(guò)一些明顯的變化來(lái)響應(yīng)用戶(hù)做出的操作,能夠給予用戶(hù)極大的信心。
圖9.1 iPhone版 QQ斗地主的音量大小調(diào)整
進(jìn)入QQ斗地主的游戲設(shè)置頁(yè)面調(diào)整音量大小時(shí),手指的大小蓋住了滑塊,為了將選中的信息反饋給用戶(hù),兩邊的擴(kuò)音器圖標(biāo)同時(shí)使用了外發(fā)光樣式。
iPhone 操作系統(tǒng)提供了許多自動(dòng)反饋的機(jī)制。動(dòng)畫(huà)就是其中一種。不過(guò)切記一點(diǎn),動(dòng)畫(huà)的目的在于提升用戶(hù)體驗(yàn),而不是成為盲目追求酷炫的焦點(diǎn)。
10. 優(yōu)化啟動(dòng)過(guò)程
iPhone OS4.0以前的應(yīng)用都屬于單任務(wù)的,用戶(hù)會(huì)經(jīng)常在多個(gè)應(yīng)用程序之間切換,一個(gè)電話(huà)來(lái)了,用戶(hù)不得不退出正在進(jìn)行的應(yīng)用程序。要確保用戶(hù)回來(lái)時(shí)啟動(dòng)足夠快 速,以減少用戶(hù)的等待,而且,為了將影響降到,應(yīng)盡可能保存上次關(guān)閉之前的操作結(jié)果。這似乎都是工程師的職責(zé),但作為一個(gè)優(yōu)秀的設(shè)計(jì)師 ,你還可以為此做很多的事情。
開(kāi)啟時(shí)第一屏顯示一個(gè)背景圖或者簡(jiǎn)短的loading動(dòng)畫(huà)。即使是普通的效率型應(yīng)用或者簡(jiǎn)單的實(shí)用小工具,啟動(dòng)時(shí)如果能夠預(yù)先顯示一個(gè)背景圖,背景圖與程序啟動(dòng)后首界面平穩(wěn)自然地過(guò)渡,這種方式既可以帶給用戶(hù)即時(shí)的反饋,也可以“縮短”用戶(hù)等待的時(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)該一如既往地為用戶(hù)提供這種流暢的體驗(yàn),畢竟,用戶(hù)啟動(dòng)的時(shí)候還是期望軟件可以“快一點(diǎn)”。
啟動(dòng)時(shí)要切記一點(diǎn):不要彈出一個(gè)說(shuō)明性窗口,或一個(gè)刺眼的閃屏,或其它類(lèi)似的啟動(dòng)體驗(yàn)(網(wǎng)絡(luò)wifi提示這些是例外)。這種方式很突兀,讓用戶(hù)立即使用你的應(yīng)用程序就好了。
11. 為應(yīng)用程序設(shè)計(jì)圖標(biāo)
應(yīng)用程序圖標(biāo)是指放在iPhone屏幕上用來(lái)啟動(dòng)程序的圖標(biāo)。iPhone的屏幕大小只有480*320px,在這狹小的屏幕里,用戶(hù)希望放下盡可能多的圖標(biāo),這些圖標(biāo)必須具有突出的視覺(jué)效果才能方便用戶(hù)辨認(rèn)。要做到這一點(diǎn),可以從以下兩方面著手:
● 美觀:確保圖標(biāo)簡(jiǎn)單美觀,富有吸引力,這樣用戶(hù)才愿意讓這些圖標(biāo)長(zhǎng)久占據(jù)有限的屏幕空間。
● 可識(shí)別特點(diǎn):要讓用戶(hù)在大量圖標(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操作系統(tǒng)自動(dòng)添加效果后的圖標(biāo)
為了確保你的圖標(biāo)可以利用這些視覺(jué)效果,你應(yīng)該遵照以下圖標(biāo)設(shè)計(jì)規(guī)范:
● 圖片格式:PNG
● 大?。?7X57像素,90°直角(如果圖像不符合標(biāo)準(zhǔn),iPhone系統(tǒng)將自動(dòng)按比例調(diào)整)
● 不要有任何發(fā)亮或有光澤的部分
● 不使用alpha透明
最后,將圖標(biāo)文件命名為Icon.png,放在程序的資源包中即可。
本文來(lái)自:http://www.ipc.me/study-on-iphone-human-interface.html
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com