蘋果iOS人機(jī)交互界面開發(fā)指南

作者：小豬哼啊哼 2011-03-02 08:35:19

我們?cè)?jīng)介紹過《iPhone應(yīng)用界面設(shè)計(jì)指南》，我們將介紹iPhone應(yīng)用界面設(shè)計(jì)指南的一個(gè)章節(jié)——《蘋果iOS應(yīng)用人機(jī)交互界面開發(fā)指南》。

用戶界面原則

好的人機(jī)界面規(guī)范遵從于用戶思考和行動(dòng)的方式，而不屈從于設(shè)備的性能。一個(gè)缺乏吸引力，復(fù)雜的，或違悖邏輯的用戶界面，卻會(huì)讓原本優(yōu)秀的應(yīng)用變得索然無味。反過來，

一個(gè)漂亮的，直覺感知的，引人入勝的界面能強(qiáng)化應(yīng)用程序的功能，并且能在用戶心中激發(fā)出正面的情緒。

◆整體之美

整體之美，并不是簡(jiǎn)單地指應(yīng)用界面有多漂亮，而是指應(yīng)用的外觀和功能是否完美地結(jié)合。例如，用來處理實(shí)際工作的應(yīng)用通常會(huì)簡(jiǎn)化裝飾性的UI元素，并置于背景中，而將重要的地位讓給任務(wù)本身，因而會(huì)僅提供標(biāo)準(zhǔn)的控件和行為。這樣傳遞給用戶的，關(guān)于這個(gè)app目的和特性，是簡(jiǎn)單而統(tǒng)一。相反地，如果類似的app提供的是古怪，花哨的界面，用戶可能無法理解，或理解為矛盾而荒謬的。

◆一致性

界面上的一致性，確保用戶能借鑒先前使用app的知識(shí)和經(jīng)驗(yàn)。做到一致性的應(yīng)用程序并不是一味地抄襲別人。確切的講，而是充分利用了規(guī)范化和模式化帶來的體驗(yàn)上的優(yōu)勢(shì)。

判斷一個(gè)應(yīng)用是否遵循了一致性原則，請(qǐng)先思考以下問題：

◆該應(yīng)用是否符合IOS標(biāo)準(zhǔn)？是否正確使用了系統(tǒng)自帶的控件，視圖和圖標(biāo)？是否跟設(shè)備的特性可靠地結(jié)合？

◆該應(yīng)用自身是否保持一致性？字體樣式及專業(yè)術(shù)語(yǔ)是否統(tǒng)一？相同的圖標(biāo)是否都意味同一件事物？當(dāng)用戶在不同場(chǎng)景執(zhí)行同樣的操作時(shí)能否預(yù)測(cè)系統(tǒng)的反應(yīng)？定制的UI是否從頭到尾都有一致的外觀和行為？

◆當(dāng)前的應(yīng)用跟之前的版本是否統(tǒng)一？各版本的術(shù)語(yǔ)表及含義是否一致？基本的概念本質(zhì)上來講是否未曾改變？

◆直接操作

當(dāng)用戶可以直接操作屏幕中的物體，而不再需要通過控件來操控時(shí)，他們會(huì)更容易沉浸于工作任務(wù)本身，也更容易理解操作的結(jié)果。多點(diǎn)觸摸技術(shù)讓iOS用戶真正體驗(yàn)到了直接操作的便利。通過手勢(shì)操作的方式，讓用戶對(duì)界面有更多的親近感，以及控制感，原因是他們不再需要通過中間媒介，例如鼠標(biāo)，間接地觸摸物體。

在一個(gè)iOS應(yīng)用程序，以下方式可以讓用戶體驗(yàn)到直接操作：

◆通過旋轉(zhuǎn)或移動(dòng)設(shè)備來影響屏幕中的物體

◆通過手勢(shì)來操作屏幕中的物體

◆操作結(jié)果以可見，迅速的方式展示給用戶

◆反饋

反饋是對(duì)用戶的操作的回應(yīng)，使他們確信自己的請(qǐng)求正在被處理。用戶希望操作控件時(shí)能接受即時(shí)的反饋，如果操作過程比較久，需要不斷更新操作進(jìn)展。

內(nèi)置的應(yīng)用程序能響應(yīng)每一個(gè)用戶操作行為。例如，列表項(xiàng)在用戶點(diǎn)按時(shí)會(huì)高亮。持續(xù)數(shù)秒的操作，會(huì)有一個(gè)控件來顯示過程進(jìn)度，合適的話，還可以加上補(bǔ)充性的文字。

細(xì)微的動(dòng)畫能作為意思明確的反饋，清晰地展示操作結(jié)果。例如，列表添加新行時(shí)的動(dòng)畫，能幫助用戶追蹤這個(gè)改變過程。

聲音同樣能提供有用的反饋，但這個(gè)不應(yīng)該做為主要或唯一的反饋機(jī)制，因?yàn)樵谟行﹫?chǎng)所，用戶可能聽不到聲音，或者他們關(guān)閉了聲音。

◆隱喻

當(dāng)應(yīng)用中的物體和操作是由現(xiàn)實(shí)世界映射過來時(shí)，用戶能快速地掌握如何使用這個(gè)應(yīng)用。

軟件隱喻的典型例子是文件夾：在真實(shí)世界，人們用文件夾放置東西，因而在計(jì)算機(jī)中，把文件放入文件夾，就能迅速地被理解。

恰當(dāng)?shù)碾[喻，在使用或體驗(yàn)方面不需要拘泥于現(xiàn)實(shí)世界的限制。比如，用戶能往計(jì)算機(jī)的文件夾放入盡可能多的文件，而這在現(xiàn)實(shí)中是不可能的。

iOS為隱喻提供了巨大的施展空間。iOS支持多種圖片格式和手勢(shì)。用戶實(shí)實(shí)在在的跟屏幕中的物體產(chǎn)生交互，在很多情況下的操作跟現(xiàn)實(shí)中沒有兩樣。在iOS中隱喻包括：

◆點(diǎn)按iPod播放控制鍵

◆在游戲中，拖動(dòng)，翻動(dòng)，滑出物體

◆滑動(dòng)雙向開關(guān)

◆翻動(dòng)照片

◆點(diǎn)滑選擇器來選擇

一般來說，只要映射得不過，隱喻都能發(fā)揮很好的效果。假如電腦上的文件夾還需要被組織到某個(gè)虛擬櫥柜中，就灰常不好用了！

◆讓用戶來控制

讓用戶而不是程序來觸發(fā)和控制操作。雖然程序可以給出操作建議，或者對(duì)危險(xiǎn)的操作提出警告，但如果因此而完全剝奪了用戶處理錯(cuò)誤的權(quán)利，這樣就不對(duì)了。好的app既能給予用戶足夠的權(quán)限，又能幫助用戶避免危險(xiǎn)的后果，這需要做到一個(gè)平衡。

熟悉且可預(yù)測(cè)的控件和行為能夠加強(qiáng)用戶對(duì)app的控制感。并且當(dāng)操作簡(jiǎn)單而直接，用戶能輕易地理解并記住。

用戶希望有足夠多的機(jī)會(huì)，在操作被處理前取消它。并且，他們希望能有機(jī)會(huì)執(zhí)行一個(gè)可能的毀滅性的操作來達(dá)到他們的目標(biāo)。最后，對(duì)正在被執(zhí)行的操作，他們也希望能優(yōu)雅地停止它。#p#

App設(shè)計(jì)策略

◆定義你的應(yīng)用程序

用一句描述性的語(yǔ)句來清晰，具體地定義出你的app的主要用途和受眾人群。

在開發(fā)的早期就定義好你的app，這能幫助你成功地將產(chǎn)品想法和特性轉(zhuǎn)化為一致性的應(yīng)用產(chǎn)品。在開發(fā)過程中，利用這個(gè)定義來幫助你判斷哪些潛在的特性和行為是有意義的。請(qǐng)按照以下的步驟來定義你的app。

1. 列出所有用戶可能喜歡的特性

現(xiàn)在就開始頭腦風(fēng)暴吧，你將會(huì)獲得有關(guān)你產(chǎn)品主要想法的所有相關(guān)的任務(wù)。不要擔(dān)心這份列表會(huì)太長(zhǎng)；稍后你可以進(jìn)行縮減。

2．明確你的用戶

你的用戶可能都是在移動(dòng)的，并且都希望應(yīng)用程序擁有漂亮的圖片，簡(jiǎn)單的交互和高效的性能，如何再細(xì)分呢？你可以問問自己，對(duì)用戶來說哪些是重要的事，以便利店購(gòu)物應(yīng)用為例：

◆用戶通常在家做飯還是更喜歡便當(dāng)

◆用戶是優(yōu)惠券控還是對(duì)其不感冒

◆喜歡嘗試新的食材還是一成不變

◆教條地遵照食譜還是勇于創(chuàng)新

◆購(gòu)物方式是少量多次還是多量少次

◆是將需要的東西列在購(gòu)物清單一次采購(gòu)還是在回家的途中憑記憶購(gòu)買需要的東西

◆認(rèn)品牌還是無所謂

深思熟慮這些問題后，可能你會(huì)給出最能描述你的受眾人群的3個(gè)特征：依賴食譜，忙碌，節(jié)儉。

3．精簡(jiǎn)app特性列表

根據(jù)受眾人群的特征，對(duì)app特性列表做精簡(jiǎn)，最后可能只留下了少數(shù)的app特性，這就對(duì)了，偉大的iOS應(yīng)用高度專注于用戶需要完成的任務(wù)。

舉例來說，考慮你在步驟一列出的那一長(zhǎng)串特性，盡管都很有用，但并非對(duì)所有用戶都如此。也不會(huì)所有用戶都欣賞你提供的那些特性。

你檢查這份列表后，最后得出需要關(guān)注3個(gè)主要特性：創(chuàng)建列表，激活并使用代金券，獲取菜譜。

現(xiàn)在你可以打造應(yīng)用的定義語(yǔ)句了，準(zhǔn)確概括出誰(shuí)使用app，做什么事情。還是這個(gè)便利店購(gòu)物應(yīng)用的例子，一個(gè)好的定義語(yǔ)句可能是：

那些熱愛烹飪，節(jié)儉的人們創(chuàng)建購(gòu)物清單的工具。

4．還沒有結(jié)束

在整個(gè)開發(fā)過程中使用這個(gè)定義來界定app特性，所使用的控件，及術(shù)語(yǔ)是否合適。

◆為設(shè)備設(shè)計(jì)App

你清楚你的app功能及用戶群；與此同時(shí)，你需要確保僅從外觀和感覺，就能明顯判斷出這是一個(gè)iOS設(shè)備上的應(yīng)用。這一點(diǎn)至關(guān)重要，因?yàn)橛脩魧?duì)選擇安裝到設(shè)備上的應(yīng)用都寄予了很高的期望。如果你的app感覺像是為其他設(shè)備所設(shè)計(jì)的，或者是像網(wǎng)頁(yè)上的應(yīng)用，用戶就不會(huì)對(duì)你的應(yīng)用給出好評(píng)。

◆擁抱iOS UI模式

習(xí)慣了內(nèi)置app外觀和行為的用戶，對(duì)那些下載的應(yīng)用他們會(huì)有類似的體驗(yàn)期望。你不用模仿這些內(nèi)置app的每一處細(xì)節(jié)，不過理解其中的設(shè)計(jì)模式將很有幫助。從理解各種iOS設(shè)備的特征，及運(yùn)行的app開始。然后，記住下面幾件事情：

讓控件看起來都是可點(diǎn)按的。iOS控件，例如按鈕，選擇器，滑動(dòng)條，都帶有輪廓線和漸變，這會(huì)引導(dǎo)用戶去點(diǎn)按。

App的結(jié)構(gòu)是清晰且易于導(dǎo)航。iOS提供了導(dǎo)航條用于多層級(jí)內(nèi)容的導(dǎo)航。

◆為用戶任務(wù)量身定制UI

最好的app能夠讓定制的UI體現(xiàn)出清晰的用途，且便于使用。要做到這一點(diǎn)，在設(shè)計(jì)的初期就應(yīng)該考慮到UI定制的問題。原因是對(duì)品牌打造，原創(chuàng)性及市場(chǎng)銷售的考量經(jīng)常會(huì)影響UI定制的決策，而這個(gè)過程也會(huì)持續(xù)，直到你考慮定制對(duì)用戶體驗(yàn)的影響。

使用iOS SDK，你可以選擇盡可能多或少的定制UI。因?yàn)闆]有對(duì)定制的數(shù)量做任何限制，你需要考慮這么定制對(duì)app提供的任務(wù)會(huì)有什么影響。關(guān)于任務(wù)，你需要考慮用戶多久來執(zhí)行一次，并且是在什么情況下執(zhí)行。

不要為了定制而定制。理想情況下，經(jīng)過定制的UI能夠方便用戶處理任務(wù)，并且加強(qiáng)他們的用戶體驗(yàn)。你應(yīng)該盡可能的讓app任務(wù)本身來決定是否及如何定制UI。例如：

◆如果你的app需要處理大量具體數(shù)據(jù)，用戶會(huì)非常希望提供的界面便于理解，盡可能的使用標(biāo)準(zhǔn)控件，和高效的導(dǎo)航。

◆如果你的app只是用于瀏覽內(nèi)容，用戶通常不希望UI太突出。

◆如果你的app是游戲，或者是模擬真實(shí)世界，具有故事情節(jié)的應(yīng)用，用戶很希望自己能進(jìn)入一個(gè)奇特的世界，充滿了漂亮的圖片和豐富的交互。

盡可肯能不要加重用戶的認(rèn)知負(fù)擔(dān)。用戶習(xí)慣于標(biāo)準(zhǔn)UI控件的外觀和行為，他們不用再停下來思考如何使用。當(dāng)面對(duì)那些無論是外觀還是行為都不同于標(biāo)準(zhǔn)的UI控件，用戶就無法利用先前知識(shí)和經(jīng)驗(yàn)。除非你特制的UI能幫助用戶簡(jiǎn)化工作，他們不太愿意花時(shí)間去學(xué)習(xí)這種并不普遍的用法。

保持一致性。你定制了越多的UI，你就越需要確保UI的外觀和行為跟app保持一致。當(dāng)用戶花時(shí)間來使用那些專門定制的陌生控件時(shí)，他們會(huì)期盼從你的app中獲得使用的些許線索。

內(nèi)容至上。標(biāo)準(zhǔn)的控件對(duì)用戶來說太熟悉了，因而不會(huì)跟內(nèi)容來爭(zhēng)奪用戶的注意力。當(dāng)你在定制你的UI控件，請(qǐng)注意不要它喧賓奪主了，應(yīng)該確保用戶能將注意力放在他們更關(guān)心的內(nèi)容上。舉例來說，如果你的app可以播放視頻，你可能會(huì)定制播放控制按鈕。當(dāng)你與其在是否選擇定制還是標(biāo)準(zhǔn)的控件的抉擇中猶豫不決，還不如花時(shí)間考慮下控件是否在用戶開始觀看視頻后消失的問題。

反復(fù)考慮能幫助你更好地定制。如果你想定制出比標(biāo)準(zhǔn)控件更好的控件，請(qǐng)確保你設(shè)計(jì)的控件能提供同標(biāo)準(zhǔn)控件一樣足夠多的信息。比如你創(chuàng)建了一個(gè)遠(yuǎn)離用戶觀念中的按鈕形象，沒有圓角和沒有三維效果，用戶就意識(shí)不到這是可點(diǎn)按的。又或者，你創(chuàng)建了一個(gè)雙向開關(guān)，卻沒有展示反向值，用戶可能就意識(shí)不到這是個(gè)雙向開關(guān)。

確保對(duì)定制的UI做充分的用戶測(cè)試。測(cè)試過程中，請(qǐng)密切觀察測(cè)試者，觀測(cè)其能否對(duì)控件的行為做出預(yù)測(cè)，以及能否輕松的交互。比如你設(shè)計(jì)了一個(gè)可點(diǎn)按區(qū)域小于44*44pixel的控件，那么用戶就不能輕松地點(diǎn)按。

◆原型和迭代

在將你的設(shè)計(jì)付諸實(shí)現(xiàn)以前，先制作出原型來進(jìn)行用戶測(cè)試是一個(gè)不錯(cuò)的想法。即使你只能邀請(qǐng)為數(shù)不多的同事來測(cè)試你的原型，他們對(duì)你的app功能和用戶體驗(yàn)上的全新視角也能使你獲益良多。

在你設(shè)計(jì)的最初階段，你可以使用紙質(zhì)原型或線框圖對(duì)主要視圖和控件進(jìn)行布局，同時(shí)確定出屏幕之間的轉(zhuǎn)換地圖。原型測(cè)試能提供一些有用的反饋，但原型信息的匱乏也會(huì)誤導(dǎo)測(cè)試者。用戶很難憑空想象在真實(shí)數(shù)據(jù)下app的體驗(yàn)將會(huì)變得如何。

如果你能將新鮮出爐的app放在真機(jī)上運(yùn)行，你將會(huì)獲得更有價(jià)值的反饋。當(dāng)用戶與你真機(jī)上的原型進(jìn)行交互時(shí)，他們會(huì)更容易發(fā)現(xiàn)哪個(gè)功能還未實(shí)現(xiàn)，哪里用戶體驗(yàn)太復(fù)雜。

創(chuàng)建出一個(gè)可靠原型的最簡(jiǎn)單的方法是使用Xcode的模板，先新建一個(gè)基本的app，并且用合適的可占位的內(nèi)容來填充。然后將原型安裝在設(shè)備上，提供用戶一個(gè)真實(shí)的測(cè)試環(huán)境。你不必提供大量的數(shù)據(jù)，也不用做到每個(gè)控件都是可點(diǎn)按的。只需測(cè)試者能通過點(diǎn)按屏幕的某個(gè)區(qū)域跳轉(zhuǎn)到下個(gè)邏輯視圖，或者能完成主要的任務(wù)，他們就能給出建設(shè)性的反饋意見。

當(dāng)你使用Xcode來制作原型，你能很輕松的修改原型。一旦修改周期縮短，你就有時(shí)間來做多輪的迭代測(cè)試，從而確保在開發(fā)之前完善并確定你的最終設(shè)計(jì)。#p#

用戶體驗(yàn)指南

◆抓住主要的任務(wù)

當(dāng)應(yīng)用程序一直關(guān)注于核心任務(wù)，就能讓人感到滿意和愉快。你的應(yīng)用定義語(yǔ)句會(huì)幫助你專注于核心任務(wù)上。如要持續(xù)地關(guān)注，你需要判斷出每塊內(nèi)容和屏幕中最重要的部分。

分析每個(gè)屏幕，哪些是必需的。當(dāng)你考慮每個(gè)屏幕需要展示哪些，問問自己，這個(gè)關(guān)鍵的信息和功能，用戶現(xiàn)在就需要嗎？如果回答不是，考慮其在上下文中是否必不可少，或者可能根本就不重要。

◆內(nèi)容至上

非游戲類的應(yīng)用，考慮設(shè)計(jì)一個(gè)簡(jiǎn)潔的UI框架，你可以通過以下方式：

最小化控件的數(shù)量和所占的地位，以減輕其在UI界面中的比重。照片應(yīng)用中，把一些不起眼的控件放置在一個(gè)半透明條中。

定制控件時(shí)，請(qǐng)盡量完美地與你圖片風(fēng)格統(tǒng)一。

用戶停止與控件的交互，過一定時(shí)間后，考慮將控件隱去。

◆從上到下地考慮

屏幕的頂部是最容易被用戶注意到的。用戶手握設(shè)備，通常會(huì)有如下的交互方式：