來(lái)源：UI中國(guó)

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

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

? 保證核心功能突出且直接，并強(qiáng)調(diào)其相關(guān)性

? 直接使用ios UIkit, 給用戶統(tǒng)一視覺(jué)感受

? 保證UI在各種設(shè)備與操作間的適配

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

? 充滿整個(gè)屏幕

? 減少視覺(jué)修飾與擬物化設(shè)計(jì)，擬物化的面板漸變及陰影使UI變得厚重，搶內(nèi)容

? 使用半透明底板，半透明能使用戶看到更多的內(nèi)容，并起到短暫的提示作用   

? 保證應(yīng)用清晰度  

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

? 使用大量留白，留白使內(nèi)容和功能醒目，并傳達(dá)一種寧?kù)o安詳?shù)囊曈X(jué)感受，更好的讓用戶聚焦和高效交互

? 用顏色簡(jiǎn)化UI，讓重點(diǎn)突出并巧妙的表示交互性

? 使用系統(tǒng)字體確保易讀性

? 使用無(wú)邊框的按鈕，默認(rèn)下，所有bar上的按鈕都是無(wú)邊框的，在內(nèi)容區(qū)域無(wú)邊框按鈕以文案、顏色及操作指引標(biāo)題來(lái)傳達(dá)按鈕功能，按鈕激活時(shí)高亮。 

?  使用布局來(lái)溝通，布局包含的不僅是UI外觀，應(yīng)該告訴用戶什么是最重要的 ，他們的選擇是什么，以及事物是如何關(guān)聯(lián)起來(lái)的，提升重要內(nèi)容和功能，讓用戶容易集中注意在主要任務(wù)上

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

? 上半部分放置主要內(nèi)容，以從左到右的習(xí)慣，從靠左側(cè)的屏幕開(kāi)始

? 使用視覺(jué)的重量和平衡向用戶展示相關(guān)屏顯重要元素
大型控件吸引眼球，比小控件更容易在出現(xiàn)時(shí)被注意到。而且大型控件更容易被點(diǎn)擊。

? 使用對(duì)齊來(lái)讓閱讀更舒適，讓分組和層次之間更有秩序
對(duì)齊讓?xiě)?yīng)用整潔有序，也讓用戶在專注屏幕時(shí)更有空間，從而專注于重要信息，不同信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰，也讓用戶更容易找到某個(gè)控件。

? 確保用戶明白處于默認(rèn)尺寸和首要內(nèi)容的含義
例如，用戶無(wú)需水平滾動(dòng)就能看到重要的文本，或不用放大就可以看到主體圖像。

? 準(zhǔn)備好改變字體大小
為了適應(yīng)一些文本的大小變化，你需要調(diào)整布局

? 盡量避免UI上不一致的表現(xiàn)
有著相似功能的控件看起來(lái)應(yīng)該相似，用戶總是認(rèn)為他們看到的不同總是有原因，而且他們傾向于花時(shí)間嘗試

? 給每個(gè)互動(dòng)元素充足空間，從而讓用戶容易操作這些內(nèi)容和控件
常用的點(diǎn)按類控件的大小是44X44

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

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

? 避免使用閃屏或者其他啟動(dòng)體驗(yàn)

? 用戶能夠在啟動(dòng)后立即開(kāi)始使用應(yīng)用是最好的事情

? 避免讓用戶做過(guò)多設(shè)置

? 聚焦在滿足80%的用戶需求上，這樣主體用戶群就無(wú)需設(shè)置各種選項(xiàng)，因?yàn)槟愕膽?yīng)用已經(jīng)默認(rèn)處于他們想要的狀態(tài)，如果有些功能有少部分用戶想要，換句話，大部分用戶不需要的話，就別管他了。

? 盡可能用其他方式獲取更多（用戶）信息，直接從系統(tǒng)中獲取減少用戶輸入
如果必須設(shè)置信息，在你的應(yīng)用中直接向用戶詢問(wèn)，并盡快保存這些設(shè)定，這樣用戶就無(wú)需強(qiáng)制跳出應(yīng)用進(jìn)入系統(tǒng)設(shè)置頁(yè)面了。如果用戶需要更改設(shè)置，他們可以在任何時(shí)候進(jìn)入應(yīng)用的設(shè)置選項(xiàng)進(jìn)行修改。

? 盡可能讓用戶晚一些登錄。
理想狀態(tài)是，用戶在無(wú)需登錄的情況下盡可能多地瀏覽并使用部分內(nèi)容。

? 若必須先登錄后使用，那么應(yīng)該在登錄頁(yè)面描述為什么必須先登錄，以及這樣對(duì)用戶的好處

? 謹(jǐn)慎使用新手引導(dǎo)
在使用新手應(yīng)用前，盡可能使應(yīng)用的功能直觀和易于尋找，“好的應(yīng)用不需要新手引導(dǎo)”

? 若有請(qǐng)簡(jiǎn)潔有針對(duì)性并且不妨礙用戶

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

? 只提供開(kāi)始使用應(yīng)用所必需的信息。

? 好的新手應(yīng)用應(yīng)該告訴用戶接下來(lái)第一步應(yīng)該做什么，在瀏覽你的應(yīng)用之前，用戶遇到太多信息，讓用戶記住這些不是當(dāng)前必須得內(nèi)容，他們很可能會(huì)覺(jué)得你的應(yīng)用難用，如果在某些特定場(chǎng)景下確實(shí)需要一些引導(dǎo)，那么應(yīng)該在用戶進(jìn)入該場(chǎng)景后進(jìn)行。

? 用交互動(dòng)畫(huà)吸引用戶，謹(jǐn)慎增加文字，不要指望用戶會(huì)閱讀大段文字，并謹(jǐn)慎使用應(yīng)用截圖，因?yàn)閼?yīng)用截圖是死的，用戶可能會(huì)混淆截圖和應(yīng)用的實(shí)際界限。

? 能讓用戶簡(jiǎn)單地取消和跳過(guò)新手引導(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ù)過(guò)于復(fù)雜，用戶會(huì)在進(jìn)入模態(tài)情景時(shí)忽略主要任務(wù)，在設(shè)計(jì)一個(gè)涉及視覺(jué)層次的模態(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ì)操作，沒(méi)有必要讓用戶學(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)用來(lái)說(shuō)可以豐富體驗(yàn)，例如游戲。

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

? 暗示交互性，設(shè)計(jì)時(shí)可以使用很多線索。包括顏色、位置、上下文、表意明確地圖標(biāo)和標(biāo)簽。并不需要過(guò)于修飾元素向用戶展示可交互性

? 一個(gè)關(guān)鍵的顏色可以給用戶提供很強(qiáng)的視覺(jué)指引，尤其是在沒(méi)有冗余的其他顏色時(shí)。為了有對(duì)比，使用顏色標(biāo)記可交互的元素，并且使用統(tǒng)一的、易識(shí)別的視覺(jué)風(fēng)格

? 返回按鈕使用多個(gè)線索指明其可交互性并傳達(dá)其功能
出現(xiàn)在導(dǎo)航中、顯示一個(gè)指向后方的圖標(biāo)、使用了關(guān)鍵色、顯示了上一級(jí)頁(yè)面的標(biāo)題

? 一個(gè)圖標(biāo)或者標(biāo)題提供了清晰的名稱指引用戶點(diǎn)擊它。
例如,地圖中的標(biāo)題“立交橋路線”、“定位到這里”，清楚地說(shuō)明了用戶可做的操作。結(jié)合關(guān)鍵色，可以省去按鈕邊界或者其他多余的修飾。

? 在內(nèi)容區(qū)域，有必要給按鈕添加邊界或背景

? 操作條中的按鈕、動(dòng)作表單和提醒對(duì)話框可以不需要邊界，因?yàn)橛脩糁涝谶@種區(qū)域中大多數(shù)選項(xiàng)是可交互的。但是在內(nèi)容區(qū)域，按鈕有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來(lái)

? App store應(yīng)用中使用有邊界的按鈕，將按鈕和整個(gè)內(nèi)容條區(qū)分開(kāi)來(lái)，點(diǎn)擊整條內(nèi)容查看詳細(xì)信息，點(diǎn)擊按鈕進(jìn)行下載

反饋會(huì)幫助用戶了解應(yīng)用當(dāng)前在做什么，發(fā)現(xiàn)接下來(lái)可以做什么以及理解動(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í)才需要使用它，如果用戶?？吹胶芏嗖皇侵匾畔⒌木婵颍麄兒荛_(kāi)就會(huì)忽略所有對(duì)話框提醒

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

? 每個(gè)自定義的元素本身都具備良好的觀感和功能性，但也應(yīng)該和與應(yīng)用中其他元素保持一致無(wú)論應(yīng)用中其他元素是自定義還是標(biāo)準(zhǔn)的

? 為了在ios中感覺(jué)舒適，你的應(yīng)用雖然不必看起來(lái)和內(nèi)置一樣，但是需要對(duì)它的遵從、清晰度和深度進(jìn)行整合?；ㄐr(shí)間弄清楚在你的應(yīng)用中，遵從清晰和深度代表的異味，并把它們?cè)谀愕淖远x元素中表達(dá)出來(lái)

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

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

? 以精致優(yōu)雅不唐突的方式植入品牌的顏色和圖片。
用戶使用你的應(yīng)用來(lái)完成事物或者進(jìn)行娛樂(lè)，他們不希望被迫著去觀看廣告，為了獲得更好的用戶體驗(yàn)，你可以通過(guò)字體、顏色和圖像設(shè)計(jì)來(lái)潛移默化的提醒用戶你的品牌身份

? 避免遠(yuǎn)離用戶關(guān)心的內(nèi)容
考慮用低侵入性的方法無(wú)處不在地展示品牌，比如巧妙地定制屏幕背景

? 抵擋住誘惑，不要把你的logo貫穿整個(gè)應(yīng)用
對(duì)于用戶來(lái)說(shuō)通常會(huì)很容易在不知道網(wǎng)頁(yè)所屬的情況下訪問(wèn)一個(gè)網(wǎng)頁(yè)，但卻極少有用戶會(huì)在完全不看一個(gè)ios系統(tǒng)中得應(yīng)用圖標(biāo)的情況下打開(kāi)它

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元素來(lái)表現(xiàn)標(biāo)準(zhǔn)交互行為

? 不要用系統(tǒng)自帶的按鈕和元素表達(dá)其他含義

? 如果你的應(yīng)用是沉浸式體驗(yàn)，那么創(chuàng)造全新的自定義UI是合理的