iOS8人機(jī)交互指南再閱讀”

iOS整體的品質(zhì)感大家有目共睹，這源于其背后嚴(yán)格的設(shè)計(jì)規(guī)范，強(qiáng)調(diào)以內(nèi)容為中心，以重點(diǎn)內(nèi)容和功能為目標(biāo)，來驅(qū)動(dòng)每個(gè)細(xì)節(jié)設(shè)計(jì)。以下是我從設(shè)計(jì)規(guī)范中學(xué)到的一些設(shè)計(jì)技巧。

1.如何以內(nèi)容為中心開發(fā)或重新設(shè)計(jì)一款應(yīng)用？

• ? 保證核心功能突出且直接，并強(qiáng)調(diào)其相關(guān)性
• ??直接使用ios?UIkit,?給用戶統(tǒng)一視覺感受
• ??保證UI在各種設(shè)備與操作間的適配

2.如何提升應(yīng)用功能體驗(yàn)并關(guān)注內(nèi)容本身

• ??充滿整個(gè)屏幕
• ??減少視覺修飾與擬物化設(shè)計(jì)，擬物化的面板漸變及陰影使UI變得厚重，搶內(nèi)容
• ??使用半透明底板，半透明能使用戶看到更多的內(nèi)容，并起到短暫的提示作用
• ??保證應(yīng)用清晰度

3.如何提升應(yīng)用的清晰度

• ??使用大量留白，留白使內(nèi)容和功能醒目，并傳達(dá)一種寧靜安詳?shù)囊曈X感受，更好的讓用戶聚焦和高效交互
• ??用顏色簡(jiǎn)化UI，讓重點(diǎn)突出并巧妙的表示交互性
• ??使用系統(tǒng)字體確保易讀性
• ??使用無邊框的按鈕，默認(rèn)下，所有bar上的按鈕都是無邊框的，在內(nèi)容區(qū)域無邊框按鈕以文案、顏色及操作指引標(biāo)題來傳 ? ?達(dá)按鈕功能，按鈕激活時(shí)高亮。
• ? ?使用布局來溝通，布局包含的不僅是UI外觀，應(yīng)該告訴用戶什么是最重要的?，他們的選擇是什么，以及事物是如何關(guān)聯(lián)起來的，提升重要內(nèi)容和功能，讓用戶容易集中注意在主要任務(wù)上

。如何使用布局來提升應(yīng)用重要內(nèi)容和功能

• ??上半部分放置主要內(nèi)容，以從左到右的習(xí)慣，從靠左側(cè)的屏幕開始
• ??使用視覺的重量和平衡向用戶展示相關(guān)屏顯重要元素
  大型控件吸引眼球，比小控件更容易在出現(xiàn)時(shí)被注意到。而且大型控件更容易被點(diǎn)擊。
• ??使用對(duì)齊來讓閱讀更舒適，讓分組和層次之間更有秩序

  對(duì)齊讓應(yīng)用整潔有序，也讓用戶在專注屏幕時(shí)更有空間，從而專注于重要信息，不同信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰，也讓用戶更容易找到某個(gè)控件。

• ??確保用戶明白處于默認(rèn)尺寸和首要內(nèi)容的含義

  例如，用戶無需水平滾動(dòng)就能看到重要的文本，或不用放大就可以看到主體圖像。

• ??準(zhǔn)備好改變字體大小
  為了適應(yīng)一些文本的大小變化，你需要調(diào)整布局
• ??盡量避免UI上不一致的表現(xiàn)
  有著相似功能的控件看起來應(yīng)該相似，用戶總是認(rèn)為他們看到的不同總是有原因，而且他們傾向于花時(shí)間嘗試
• ??給每個(gè)互動(dòng)元素充足空間，從而讓用戶容易操作這些內(nèi)容和控件
  常用的點(diǎn)按類控件的大小是44X44

iOS特別注重軟件啟動(dòng)時(shí)的體驗(yàn)，將應(yīng)用從打開到啟動(dòng)這段時(shí)間壓縮的很短，并同時(shí)在載入過程中呈現(xiàn)一些對(duì)用戶有幫助的內(nèi)容，將會(huì)激發(fā)用戶的興趣并給用戶創(chuàng)造驚喜。

5.如何提升軟件啟動(dòng)時(shí)的體驗(yàn)

• ??避免使用閃屏或者其他啟動(dòng)體驗(yàn)
• ??用戶能夠在啟動(dòng)后立即開始使用應(yīng)用是最好的事情
• ??避免讓用戶做過多設(shè)置
• ??聚焦在滿足80%的用戶需求上，這樣主體用戶群就無需設(shè)置各種選項(xiàng)，因?yàn)槟愕膽?yīng)用已經(jīng)默認(rèn)處于他們想要的狀態(tài)，如果有些功能有少部分用戶想要，換句話，大部分用戶不需要的話，就別管他了
• ??盡可能用其他方式獲取更多（用戶）信息，直接從系統(tǒng)中獲取減少用戶輸入
  如果必須設(shè)置信息，在你的應(yīng)用中直接向用戶詢問，并盡快保存這些設(shè)定，這樣用戶就無需強(qiáng)制跳出應(yīng)用進(jìn)入系統(tǒng)設(shè)置頁面了。如果用戶需要更改設(shè)置，他們可以在任何時(shí)候進(jìn)入應(yīng)用的設(shè)置選項(xiàng)進(jìn)行修改。
• ??盡可能讓用戶晚一些登錄。
  理想狀態(tài)是，用戶在無需登錄的情況下盡可能多地瀏覽并使用部分內(nèi)容。
• ??若必須先登錄后使用，那么應(yīng)該在登錄頁面描述為什么必須先登錄，以及這樣對(duì)用戶的好處
• ??謹(jǐn)慎使用新手引導(dǎo)
  在使用新手應(yīng)用前，盡可能使應(yīng)用的功能直觀和易于尋找，“好的應(yīng)用不需要新手引導(dǎo)”
• ??若有請(qǐng)簡(jiǎn)潔有針對(duì)性并且不妨礙用戶

6.如何設(shè)計(jì)新手引導(dǎo)

• ??只提供開始使用應(yīng)用所必需的信息。
• ??好的新手應(yīng)用應(yīng)該告訴用戶接下來第一步應(yīng)該做什么，在瀏覽你的應(yīng)用之前，用戶遇到太多信息，讓用戶記住這些不是當(dāng)前必須得內(nèi)容，他們很可能會(huì)覺得你的應(yīng)用難用，如果在某些特定場(chǎng)景下確實(shí)需要一些引導(dǎo)，那么應(yīng)該在用戶進(jìn)入該場(chǎng)景后進(jìn)行。
• ??用交互動(dòng)畫吸引用戶，謹(jǐn)慎增加文字，不要指望用戶會(huì)閱讀大段文字，并謹(jǐn)慎使用應(yīng)用截圖，因?yàn)閼?yīng)用截圖是死的，用戶可能會(huì)混淆截圖和應(yīng)用的實(shí)際界限。
• ??能讓用戶簡(jiǎn)單地取消和跳過新手引導(dǎo)

不脫離主任務(wù)，去完成一個(gè)子任務(wù)或者獲得信息的方式在iOS中被稱為模態(tài)情境，模態(tài)情景會(huì)臨時(shí)性阻止用戶對(duì)應(yīng)用其他部分的交互操作，理想情況下用戶與應(yīng)用進(jìn)行一種非線性交互，所以盡量減少應(yīng)用中模態(tài)體驗(yàn)

7.何種情況使用模態(tài)情景

• ??必須引起用戶關(guān)注的時(shí)候
• ??一個(gè)獨(dú)立任務(wù)需要完成或者很明顯被放棄，為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時(shí)候。

8.怎樣設(shè)計(jì)模態(tài)情景

• ??保持模態(tài)任務(wù)的簡(jiǎn)單、簡(jiǎn)短和高度聚焦。
  如果子任務(wù)過于復(fù)雜，用戶會(huì)在進(jìn)入模態(tài)情景時(shí)忽略主要任務(wù)，在設(shè)計(jì)一個(gè)涉及視覺層次的模態(tài)任務(wù)時(shí)要特別考慮這點(diǎn)，因?yàn)橛脩粲锌赡苊允Р⑶彝浫绾位氐街暗牟僮髦腥?。如果一個(gè)模態(tài)任務(wù)包含不同視圖的子任務(wù)，確保給用戶一個(gè)獨(dú)立，清晰的導(dǎo)航路徑，并避免迂回
• ??始終提供明顯、安全的途徑退出模態(tài)任務(wù)
  確保用戶在退出模態(tài)視圖時(shí)可以預(yù)期操作結(jié)果
• ??一個(gè)任務(wù)需要多層級(jí)的模態(tài)視圖時(shí)，確保用戶理解點(diǎn)擊完成按鈕的結(jié)果
  點(diǎn)擊一個(gè)低層級(jí)視圖上的完成按鈕是完成這個(gè)視圖中任務(wù)的一部分，還是整個(gè)任務(wù)？因?yàn)榇嬖谶@種疑惑的可能性，所以盡可能避免在下級(jí)視圖中添加完成按鈕
• ??保證提醒對(duì)話框的內(nèi)容都是重要且可操作的
  提醒對(duì)話框會(huì)打斷用戶的體驗(yàn)并且要點(diǎn)擊才會(huì)消失，所以要讓用戶感到提醒信息是有用的，打斷是有價(jià)值的
• ??尊重用戶關(guān)于接受通知的選擇
  用戶會(huì)設(shè)置接收，應(yīng)用通知的形式，必須尊重用戶的喜好設(shè)置，否則可能觸怒用戶，導(dǎo)致其關(guān)閉所有的推送通知

9.如何提升交互性和反饋體驗(yàn)

• ??對(duì)于用戶熟悉的標(biāo)準(zhǔn)手勢(shì)不要賦予不同的行為，除非是游戲
• ??不要?jiǎng)?chuàng)建和標(biāo)準(zhǔn)手勢(shì)功能相似的手勢(shì)操作
  用戶已經(jīng)習(xí)慣標(biāo)準(zhǔn)手勢(shì)操作，沒有必要讓用戶學(xué)習(xí)達(dá)到同樣效果的不同操作
• ??可以用復(fù)雜手勢(shì)作為完成某項(xiàng)任務(wù)的快捷方式，但不是唯一觸達(dá)的方式
  最好給用戶提供一些簡(jiǎn)單、直接的方式完成某操作，即使這種方法需要額外的動(dòng)作。簡(jiǎn)單地手勢(shì)能讓用戶集中于當(dāng)前的體驗(yàn)和內(nèi)容，而不是交互操作本身
• ??除非是游戲，否則避免定義新手勢(shì)
• ??在特定的環(huán)境中，可以考慮使用多指操作
  雖然復(fù)雜的操作不一定適用于所有應(yīng)用，但對(duì)用戶會(huì)花大量時(shí)間使用的應(yīng)用來說可以豐富體驗(yàn)，例如游戲。

10.如何利用交互元素吸引用戶點(diǎn)擊

• ??暗示交互性，設(shè)計(jì)時(shí)可以使用很多線索。包括顏色、位置、上下文、表意明確地圖標(biāo)和標(biāo)簽。并不需要過于修飾元素向用戶展示可交互性
• ??一個(gè)關(guān)鍵的顏色可以給用戶提供很強(qiáng)的視覺指引，尤其是在沒有冗余的其他顏色時(shí)。為了有對(duì)比，使用顏色標(biāo)記可交互的元素，并且使用統(tǒng)一的、易識(shí)別的視覺風(fēng)格
• ??返回按鈕使用多個(gè)線索指明其可交互性并傳達(dá)其功能
  出現(xiàn)在導(dǎo)航中、顯示一個(gè)指向后方的圖標(biāo)、使用了關(guān)鍵色、顯示了上一級(jí)頁面的標(biāo)題
• ??一個(gè)圖標(biāo)或者標(biāo)題提供了清晰的名稱指引用戶點(diǎn)擊它。
  例如,地圖中的標(biāo)題“立交橋路線”、“定位到這里”，清楚地說明了用戶可做的操作。結(jié)合關(guān)鍵色，可以省去按鈕邊界或者其他多余的修飾。
• ??在內(nèi)容區(qū)域，有必要給按鈕添加邊界或背景
• ??操作條中的按鈕、動(dòng)作表單和提醒對(duì)話框可以不需要邊界，因?yàn)橛脩糁涝谶@種區(qū)域中大多數(shù)選項(xiàng)是可交互的。但是在內(nèi)容區(qū)域，按鈕有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來
• ??App?store應(yīng)用中使用有邊界的按鈕，將按鈕和整個(gè)內(nèi)容條區(qū)分開來，點(diǎn)擊整條內(nèi)容查看詳細(xì)信息，點(diǎn)擊按鈕進(jìn)行下載

反饋會(huì)幫助用戶了解應(yīng)用當(dāng)前在做什么，發(fā)現(xiàn)接下來可以做什么以及理解動(dòng)作產(chǎn)生的結(jié)果

11.如何設(shè)計(jì)有助于理解的反饋

• ??盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進(jìn)行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的。例如，郵箱應(yīng)用將當(dāng)前的狀態(tài)顯示工具條上，這樣就不影響當(dāng)前內(nèi)容。
• ??避免顯示不必要的警告框。警告框是一種很強(qiáng)的反饋機(jī)制，只能在傳遞非常重要也是理論上可行的信息時(shí)才需要使用它，如果用戶?？吹胶芏嗖皇侵匾畔⒌木婵颍麄兒荛_就會(huì)忽略所有對(duì)話框提醒

12.在進(jìn)行自定義圖標(biāo)、顏色和字體，以及創(chuàng)建區(qū)別于其他應(yīng)用的UI設(shè)計(jì)時(shí)，牢記以下幾點(diǎn)

• ??每個(gè)自定義的元素本身都具備良好的觀感和功能性，但也應(yīng)該和與應(yīng)用中其他元素保持一致無論應(yīng)用中其他元素是自定義還是標(biāo)準(zhǔn)的
• ??為了在ios中感覺舒適，你的應(yīng)用雖然不必看起來和內(nèi)置一樣，但是需要對(duì)它的遵從、清晰度和深度進(jìn)行整合。花些時(shí)間弄清楚在你的應(yīng)用中，遵從清晰和深度代表的異味，并把它們?cè)谀愕淖远x元素中表達(dá)出來

理想狀態(tài)下，你開發(fā)的某個(gè)特定品牌的應(yīng)用應(yīng)該通過創(chuàng)建獨(dú)特外觀和感覺來為用戶提供難忘的體驗(yàn)

13.如何讓用戶意識(shí)到你的品牌

• ??以精致優(yōu)雅不唐突的方式植入品牌的顏色和圖片。
  用戶使用你的應(yīng)用來完成事物或者進(jìn)行娛樂，他們不希望被迫著去觀看廣告，為了獲得更好的用戶體驗(yàn)，你可以通過字體、顏色和圖像設(shè)計(jì)來潛移默化的提醒用戶你的品牌身份
• ??避免遠(yuǎn)離用戶關(guān)心的內(nèi)容
  考慮用低侵入性的方法無處不在地展示品牌，比如巧妙地定制屏幕背景
• ??抵擋住誘惑，不要把你的logo貫穿整個(gè)應(yīng)用
  對(duì)于用戶來說通常會(huì)很容易在不知道網(wǎng)頁所屬的情況下訪問一個(gè)網(wǎng)頁，但卻極少有用戶會(huì)在完全不看一個(gè)ios系統(tǒng)中得應(yīng)用圖標(biāo)的情況下打開它

14.如何設(shè)計(jì)應(yīng)用圖標(biāo)

• ??將圖標(biāo)設(shè)計(jì)當(dāng)成一個(gè)講述應(yīng)用背后的故事，以及與用戶建立情感連接的機(jī)會(huì)
• ??圖標(biāo)應(yīng)該獨(dú)特、簡(jiǎn)潔、打動(dòng)人心、讓人印象深刻
• ??圖標(biāo)應(yīng)該在不同的背景以及不用的規(guī)格下都同樣美觀。為了豐????富大尺寸圖標(biāo)的質(zhì)感而添加的細(xì)節(jié)有可能讓圖標(biāo)在小尺寸時(shí)變得不清楚。

?15.如何正確使用標(biāo)準(zhǔn)UI元素

• ??盡可能使用UIkit提供的標(biāo)準(zhǔn)UI元素，多使用標(biāo)準(zhǔn)元素而非自定義元素
• ??嚴(yán)格遵循每個(gè)UI元素的設(shè)計(jì)規(guī)范，當(dāng)你應(yīng)用中UI元素的外觀與功能都是用戶所熟悉的，他們可以很容易的根據(jù)先前的經(jīng)驗(yàn)使用它，進(jìn)而更好的使用你的應(yīng)用
• ??不要混用不同版本iOS里的UI元素
• ??請(qǐng)避免創(chuàng)造自定義UI元素來表現(xiàn)標(biāo)準(zhǔn)交互行為
• ??不要用系統(tǒng)自帶的按鈕和元素表達(dá)其他含義
• ??如果你的應(yīng)用是沉浸式體驗(yàn)，那么創(chuàng)造全新的自定義UI是合理的

source:ui中國