蘋果iOS人機交互界面開發(fā)指南
我們曾經(jīng)介紹過《iPhone應(yīng)用界面設(shè)計指南》,我們將介紹iPhone應(yīng)用界面設(shè)計指南的一個章節(jié)——《蘋果iOS應(yīng)用人機交互界面開發(fā)指南》。
用戶界面原則
好的人機界面規(guī)范遵從于用戶思考和行動的方式,而不屈從于設(shè)備的性能。一個缺乏吸引力,復(fù)雜的,或違悖邏輯的用戶界面,卻會讓原本優(yōu)秀的應(yīng)用變得索然無味。反過來,
一個漂亮的,直覺感知的,引人入勝的界面能強化應(yīng)用程序的功能,并且能在用戶心中激發(fā)出正面的情緒。
◆整體之美
整體之美,并不是簡單地指應(yīng)用界面有多漂亮,而是指應(yīng)用的外觀和功能是否完美地結(jié)合。例如,用來處理實際工作的應(yīng)用通常會簡化裝飾性的UI元素,并置于背景中,而將重要的地位讓給任務(wù)本身,因而會僅提供標(biāo)準(zhǔn)的控件和行為。這樣傳遞給用戶的,關(guān)于這個app目的和特性,是簡單而統(tǒng)一。相反地,如果類似的app提供的是古怪,花哨的界面,用戶可能無法理解,或理解為矛盾而荒謬的。
◆一致性
界面上的一致性,確保用戶能借鑒先前使用app的知識和經(jīng)驗。做到一致性的應(yīng)用程序并不是一味地抄襲別人。確切的講,而是充分利用了規(guī)范化和模式化帶來的體驗上的優(yōu)勢。
判斷一個應(yīng)用是否遵循了一致性原則,請先思考以下問題:
◆該應(yīng)用是否符合IOS標(biāo)準(zhǔn)?是否正確使用了系統(tǒng)自帶的控件,視圖和圖標(biāo)?是否跟設(shè)備的特性可靠地結(jié)合?
◆該應(yīng)用自身是否保持一致性?字體樣式及專業(yè)術(shù)語是否統(tǒng)一?相同的圖標(biāo)是否都意味同一件事物?當(dāng)用戶在不同場景執(zhí)行同樣的操作時能否預(yù)測系統(tǒng)的反應(yīng)?定制的UI是否從頭到尾都有一致的外觀和行為?
◆當(dāng)前的應(yīng)用跟之前的版本是否統(tǒng)一?各版本的術(shù)語表及含義是否一致?基本的概念本質(zhì)上來講是否未曾改變?
◆直接操作
當(dāng)用戶可以直接操作屏幕中的物體,而不再需要通過控件來操控時,他們會更容易沉浸于工作任務(wù)本身,也更容易理解操作的結(jié)果。多點觸摸技術(shù)讓iOS用戶真正體驗到了直接操作的便利。通過手勢操作的方式,讓用戶對界面有更多的親近感,以及控制感,原因是他們不再需要通過中間媒介,例如鼠標(biāo),間接地觸摸物體。
在一個iOS應(yīng)用程序,以下方式可以讓用戶體驗到直接操作:
◆通過旋轉(zhuǎn)或移動設(shè)備來影響屏幕中的物體
◆通過手勢來操作屏幕中的物體
◆操作結(jié)果以可見,迅速的方式展示給用戶
◆反饋
反饋是對用戶的操作的回應(yīng),使他們確信自己的請求正在被處理。用戶希望操作控件時能接受即時的反饋,如果操作過程比較久,需要不斷更新操作進展。
內(nèi)置的應(yīng)用程序能響應(yīng)每一個用戶操作行為。例如,列表項在用戶點按時會高亮。持續(xù)數(shù)秒的操作,會有一個控件來顯示過程進度,合適的話,還可以加上補充性的文字。
細(xì)微的動畫能作為意思明確的反饋,清晰地展示操作結(jié)果。例如,列表添加新行時的動畫,能幫助用戶追蹤這個改變過程。
聲音同樣能提供有用的反饋,但這個不應(yīng)該做為主要或唯一的反饋機制,因為在有些場所,用戶可能聽不到聲音,或者他們關(guān)閉了聲音。
◆隱喻
當(dāng)應(yīng)用中的物體和操作是由現(xiàn)實世界映射過來時,用戶能快速地掌握如何使用這個應(yīng)用。
軟件隱喻的典型例子是文件夾:在真實世界,人們用文件夾放置東西,因而在計算機中,把文件放入文件夾,就能迅速地被理解。
恰當(dāng)?shù)碾[喻,在使用或體驗方面不需要拘泥于現(xiàn)實世界的限制。比如,用戶能往計算機的文件夾放入盡可能多的文件,而這在現(xiàn)實中是不可能的。
iOS為隱喻提供了巨大的施展空間。iOS支持多種圖片格式和手勢。用戶實實在在的跟屏幕中的物體產(chǎn)生交互,在很多情況下的操作跟現(xiàn)實中沒有兩樣。在iOS中隱喻包括:
◆點按iPod播放控制鍵
◆在游戲中,拖動,翻動,滑出物體
◆滑動雙向開關(guān)
◆翻動照片
◆點滑選擇器來選擇
一般來說,只要映射得不過,隱喻都能發(fā)揮很好的效果。假如電腦上的文件夾還需要被組織到某個虛擬櫥柜中,就灰常不好用了!
◆讓用戶來控制
讓用戶而不是程序來觸發(fā)和控制操作。雖然程序可以給出操作建議,或者對危險的操作提出警告,但如果因此而完全剝奪了用戶處理錯誤的權(quán)利,這樣就不對了。好的app既能給予用戶足夠的權(quán)限,又能幫助用戶避免危險的后果,這需要做到一個平衡。
熟悉且可預(yù)測的控件和行為能夠加強用戶對app的控制感。并且當(dāng)操作簡單而直接,用戶能輕易地理解并記住。
用戶希望有足夠多的機會,在操作被處理前取消它。并且,他們希望能有機會執(zhí)行一個可能的毀滅性的操作來達到他們的目標(biāo)。最后,對正在被執(zhí)行的操作,他們也希望能優(yōu)雅地停止它。#p#
App設(shè)計策略
◆定義你的應(yīng)用程序
用一句描述性的語句來清晰,具體地定義出你的app的主要用途和受眾人群。
在開發(fā)的早期就定義好你的app,這能幫助你成功地將產(chǎn)品想法和特性轉(zhuǎn)化為一致性的應(yīng)用產(chǎn)品。在開發(fā)過程中,利用這個定義來幫助你判斷哪些潛在的特性和行為是有意義的。請按照以下的步驟來定義你的app。
1. 列出所有用戶可能喜歡的特性
現(xiàn)在就開始頭腦風(fēng)暴吧,你將會獲得有關(guān)你產(chǎn)品主要想法的所有相關(guān)的任務(wù)。不要擔(dān)心這份列表會太長;稍后你可以進行縮減。
2.明確你的用戶
你的用戶可能都是在移動的,并且都希望應(yīng)用程序擁有漂亮的圖片,簡單的交互和高效的性能,如何再細(xì)分呢?你可以問問自己,對用戶來說哪些是重要的事,以便利店購物應(yīng)用為例:
◆用戶通常在家做飯還是更喜歡便當(dāng)
◆用戶是優(yōu)惠券控還是對其不感冒
◆喜歡嘗試新的食材還是一成不變
◆教條地遵照食譜還是勇于創(chuàng)新
◆購物方式是少量多次還是多量少次
◆是將需要的東西列在購物清單一次采購還是在回家的途中憑記憶購買需要的東西
◆認(rèn)品牌還是無所謂
深思熟慮這些問題后,可能你會給出最能描述你的受眾人群的3個特征:依賴食譜,忙碌,節(jié)儉。
3.精簡app特性列表
根據(jù)受眾人群的特征,對app特性列表做精簡,最后可能只留下了少數(shù)的app特性,這就對了,偉大的iOS應(yīng)用高度專注于用戶需要完成的任務(wù)。
舉例來說,考慮你在步驟一列出的那一長串特性,盡管都很有用,但并非對所有用戶都如此。也不會所有用戶都欣賞你提供的那些特性。
你檢查這份列表后,最后得出需要關(guān)注3個主要特性:創(chuàng)建列表,激活并使用代金券,獲取菜譜。
現(xiàn)在你可以打造應(yīng)用的定義語句了,準(zhǔn)確概括出誰使用app,做什么事情。還是這個便利店購物應(yīng)用的例子,一個好的定義語句可能是:
那些熱愛烹飪,節(jié)儉的人們創(chuàng)建購物清單的工具。
4.還沒有結(jié)束
在整個開發(fā)過程中使用這個定義來界定app特性,所使用的控件,及術(shù)語是否合適。
◆為設(shè)備設(shè)計App
你清楚你的app功能及用戶群;與此同時,你需要確保僅從外觀和感覺,就能明顯判斷出這是一個iOS設(shè)備上的應(yīng)用。這一點至關(guān)重要,因為用戶對選擇安裝到設(shè)備上的應(yīng)用都寄予了很高的期望。如果你的app感覺像是為其他設(shè)備所設(shè)計的,或者是像網(wǎng)頁上的應(yīng)用,用戶就不會對你的應(yīng)用給出好評。
◆擁抱iOS UI模式
習(xí)慣了內(nèi)置app外觀和行為的用戶,對那些下載的應(yīng)用他們會有類似的體驗期望。你不用模仿這些內(nèi)置app的每一處細(xì)節(jié),不過理解其中的設(shè)計模式將很有幫助。從理解各種iOS設(shè)備的特征,及運行的app開始。然后,記住下面幾件事情:
讓控件看起來都是可點按的。iOS控件,例如按鈕,選擇器,滑動條,都帶有輪廓線和漸變,這會引導(dǎo)用戶去點按。
App的結(jié)構(gòu)是清晰且易于導(dǎo)航。iOS提供了導(dǎo)航條用于多層級內(nèi)容的導(dǎo)航。
◆為用戶任務(wù)量身定制UI
最好的app能夠讓定制的UI體現(xiàn)出清晰的用途,且便于使用。要做到這一點,在設(shè)計的初期就應(yīng)該考慮到UI定制的問題。原因是對品牌打造,原創(chuàng)性及市場銷售的考量經(jīng)常會影響UI定制的決策,而這個過程也會持續(xù),直到你考慮定制對用戶體驗的影響。
使用iOS SDK,你可以選擇盡可能多或少的定制UI。因為沒有對定制的數(shù)量做任何限制,你需要考慮這么定制對app提供的任務(wù)會有什么影響。關(guān)于任務(wù),你需要考慮用戶多久來執(zhí)行一次,并且是在什么情況下執(zhí)行。
不要為了定制而定制。理想情況下,經(jīng)過定制的UI能夠方便用戶處理任務(wù),并且加強他們的用戶體驗。你應(yīng)該盡可能的讓app任務(wù)本身來決定是否及如何定制UI。例如:
◆如果你的app需要處理大量具體數(shù)據(jù),用戶會非常希望提供的界面便于理解,盡可能的使用標(biāo)準(zhǔn)控件,和高效的導(dǎo)航。
◆如果你的app只是用于瀏覽內(nèi)容,用戶通常不希望UI太突出。
◆如果你的app是游戲,或者是模擬真實世界,具有故事情節(jié)的應(yīng)用,用戶很希望自己能進入一個奇特的世界,充滿了漂亮的圖片和豐富的交互。
盡可肯能不要加重用戶的認(rèn)知負(fù)擔(dān)。用戶習(xí)慣于標(biāo)準(zhǔn)UI控件的外觀和行為,他們不用再停下來思考如何使用。當(dāng)面對那些無論是外觀還是行為都不同于標(biāo)準(zhǔn)的UI控件,用戶就無法利用先前知識和經(jīng)驗。除非你特制的UI能幫助用戶簡化工作,他們不太愿意花時間去學(xué)習(xí)這種并不普遍的用法。
保持一致性。你定制了越多的UI,你就越需要確保UI的外觀和行為跟app保持一致。當(dāng)用戶花時間來使用那些專門定制的陌生控件時,他們會期盼從你的app中獲得使用的些許線索。
內(nèi)容至上。標(biāo)準(zhǔn)的控件對用戶來說太熟悉了,因而不會跟內(nèi)容來爭奪用戶的注意力。當(dāng)你在定制你的UI控件,請注意不要它喧賓奪主了,應(yīng)該確保用戶能將注意力放在他們更關(guān)心的內(nèi)容上。舉例來說,如果你的app可以播放視頻,你可能會定制播放控制按鈕。當(dāng)你與其在是否選擇定制還是標(biāo)準(zhǔn)的控件的抉擇中猶豫不決,還不如花時間考慮下控件是否在用戶開始觀看視頻后消失的問題。
反復(fù)考慮能幫助你更好地定制。如果你想定制出比標(biāo)準(zhǔn)控件更好的控件,請確保你設(shè)計的控件能提供同標(biāo)準(zhǔn)控件一樣足夠多的信息。比如你創(chuàng)建了一個遠(yuǎn)離用戶觀念中的按鈕形象,沒有圓角和沒有三維效果,用戶就意識不到這是可點按的。又或者,你創(chuàng)建了一個雙向開關(guān),卻沒有展示反向值,用戶可能就意識不到這是個雙向開關(guān)。
確保對定制的UI做充分的用戶測試。測試過程中,請密切觀察測試者,觀測其能否對控件的行為做出預(yù)測,以及能否輕松的交互。比如你設(shè)計了一個可點按區(qū)域小于44*44pixel的控件,那么用戶就不能輕松地點按。
◆原型和迭代
在將你的設(shè)計付諸實現(xiàn)以前,先制作出原型來進行用戶測試是一個不錯的想法。即使你只能邀請為數(shù)不多的同事來測試你的原型,他們對你的app功能和用戶體驗上的全新視角也能使你獲益良多。
在你設(shè)計的最初階段,你可以使用紙質(zhì)原型或線框圖對主要視圖和控件進行布局,同時確定出屏幕之間的轉(zhuǎn)換地圖。原型測試能提供一些有用的反饋,但原型信息的匱乏也會誤導(dǎo)測試者。用戶很難憑空想象在真實數(shù)據(jù)下app的體驗將會變得如何。
如果你能將新鮮出爐的app放在真機上運行,你將會獲得更有價值的反饋。當(dāng)用戶與你真機上的原型進行交互時,他們會更容易發(fā)現(xiàn)哪個功能還未實現(xiàn),哪里用戶體驗太復(fù)雜。
創(chuàng)建出一個可靠原型的最簡單的方法是使用Xcode的模板,先新建一個基本的app,并且用合適的可占位的內(nèi)容來填充。然后將原型安裝在設(shè)備上,提供用戶一個真實的測試環(huán)境。你不必提供大量的數(shù)據(jù),也不用做到每個控件都是可點按的。只需測試者能通過點按屏幕的某個區(qū)域跳轉(zhuǎn)到下個邏輯視圖,或者能完成主要的任務(wù),他們就能給出建設(shè)性的反饋意見。
當(dāng)你使用Xcode來制作原型,你能很輕松的修改原型。一旦修改周期縮短,你就有時間來做多輪的迭代測試,從而確保在開發(fā)之前完善并確定你的最終設(shè)計。#p#
用戶體驗指南
◆抓住主要的任務(wù)
當(dāng)應(yīng)用程序一直關(guān)注于核心任務(wù),就能讓人感到滿意和愉快。你的應(yīng)用定義語句會幫助你專注于核心任務(wù)上。如要持續(xù)地關(guān)注,你需要判斷出每塊內(nèi)容和屏幕中最重要的部分。
分析每個屏幕,哪些是必需的。當(dāng)你考慮每個屏幕需要展示哪些,問問自己,這個關(guān)鍵的信息和功能,用戶現(xiàn)在就需要嗎?如果回答不是,考慮其在上下文中是否必不可少,或者可能根本就不重要。
◆內(nèi)容至上
非游戲類的應(yīng)用,考慮設(shè)計一個簡潔的UI框架,你可以通過以下方式:
最小化控件的數(shù)量和所占的地位,以減輕其在UI界面中的比重。照片應(yīng)用中,把一些不起眼的控件放置在一個半透明條中。
定制控件時,請盡量完美地與你圖片風(fēng)格統(tǒng)一。
用戶停止與控件的交互,過一定時間后,考慮將控件隱去。
◆從上到下地考慮
屏幕的頂部是最容易被用戶注意到的。用戶手握設(shè)備,通常會有如下的交互方式:
◆用他們不常用的手握住(或平躺在平面上),用常用的手的手指操作。
◆用一個手握住,并用那個手的拇指操作
◆放在雙手間,且用兩個手的拇指同時操作
將最常被用到的信息放在頂部,那里是最容易被發(fā)現(xiàn)和夠到。當(dāng)用戶從上到下的訪問屏幕,展示的信息應(yīng)該是從通用到特殊,從高級別到低級別。
◆符合邏輯的路徑
符合邏輯的信息路徑,能方便用戶做出預(yù)測。另外,請使用標(biāo)記,例如在后退按鈕上標(biāo)記將回退到哪里,用戶通過此標(biāo)記能知道當(dāng)前的位置,也知道將回退到何處。
大多數(shù)情況下,要訪問一個屏幕只有唯一的路徑。如果需要在不同場景下訪問同一個屏幕,考慮模式視圖的方式。
◆讓一切變得簡單和顯而易見
你應(yīng)該努力讓你的應(yīng)用程序容易理解,因為你無法確定用戶是否愿意花時間或者精力來研究它。
開門見山地展現(xiàn)核心功能。通過以下方法來達成:
◆減少要讓用戶做選擇的控件
◆合理地使用標(biāo)準(zhǔn)控件和手勢,并注意保持一致性
◆控件的標(biāo)簽需要明確,這樣用戶能清楚的知道他們在做什么事
同內(nèi)置應(yīng)用程序所采用的使用規(guī)范保持一致。用戶了解如何在具有層級關(guān)系的屏幕間導(dǎo)航,編輯列表內(nèi)容,和通過tab條在程序的各模塊間切換。通過強化用戶體驗讓這一切變得簡單。
◆使用能被用戶理解的術(shù)語
在使用文本與用戶溝通時,請使用那些能被用戶理解的術(shù)語。特別說明的是,要盡量避免在界面中出現(xiàn)技術(shù)性的行話。站在用戶的角度來考慮所使用的詞句是否貼切。
Wifi網(wǎng)絡(luò)設(shè)置界面就使用樸素的文字來解釋,對用戶的偏好設(shè)置,iOS是如何響應(yīng)的。
◆最小化必要的輸入
輸入信息會花費時間和精力,不管是點按控件還是鍵盤輸入。
【編輯推薦】