送給真正的互聯(lián)網(wǎng)人一頓干貨早餐

【小咖導(dǎo)讀】本文源自公眾號IXDC，iOS整體的品質(zhì)感大家有目共睹，這源于其背后嚴格的設(shè)計規(guī)范，強調(diào)以內(nèi)容為中心，以重點內(nèi)容和功能為目標(biāo)，來驅(qū)動每個細節(jié)設(shè)計。以下是從設(shè)計規(guī)范中學(xué)到的一些設(shè)計技巧。

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

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

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

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

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

? 充滿整個屏幕

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

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

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

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

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

? 用顏色簡化UI，讓重點突出并巧妙的表示交互性

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

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

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

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

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

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

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

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

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

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

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

? 給每個互動元素充足空間，從而讓用戶容易操作這些內(nèi)容和控件

常用的點按類控件的大小是44X44

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

5.如何提升軟件啟動時的體驗

? 避免使用閃屏或者其他啟動體驗

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

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

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

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

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

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

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

? 若有請簡潔有針對性并且不妨礙用戶。

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

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

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

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

? 能讓用戶簡單地取消和跳過新手引導(dǎo)。不脫離主任務(wù)，去完成一個子任務(wù)或者獲得信息的方式在iOS中被稱為模態(tài)情境，模態(tài)情景會臨時性阻止用戶對應(yīng)用其他部分的交互操作，理想情況下用戶與應(yīng)用進行一種非線性交互，所以盡量減少應(yīng)用中模態(tài)體驗。

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

? 必須引起用戶關(guān)注的時候

? 一個獨立任務(wù)需要完成或者很明顯被放棄，為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時候。

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

? 保持模態(tài)任務(wù)的簡單、簡短和高度聚焦。如果子任務(wù)過于復(fù)雜，用戶會在進入模態(tài)情景時忽略主要任務(wù)，在設(shè)計一個涉及視覺層次的模態(tài)任務(wù)時要特別考慮這點，因為用戶有可能迷失并且忘記如何回到之前的操作中去。如果一個模態(tài)任務(wù)包含不同視圖的子任務(wù)，確保給用戶一個獨立，清晰的導(dǎo)航路徑，并避免迂回。

? 始終提供明顯、安全的途徑退出模態(tài)任務(wù)，確保用戶在退出模態(tài)視圖時可以預(yù)期操作結(jié)果

? 一個任務(wù)需要多層級的模態(tài)視圖時，確保用戶理解點擊完成按鈕的結(jié)果。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務(wù)的一部分，還是整個任務(wù)？因為存在這種疑惑的可能性，所以盡可能避免在下級視圖中添加完成按鈕

? 保證提醒對話框的內(nèi)容都是重要且可操作的。提醒對話框會打斷用戶的體驗并且要點擊才會消失，所以要讓用戶感到提醒信息是有用的，打斷是有價值的

? 尊重用戶關(guān)于接受通知的選擇。用戶會設(shè)置接收，應(yīng)用通知的形式，必須尊重用戶的喜好設(shè)置，否則可能觸怒用戶，導(dǎo)致其關(guān)閉所有的推送通知。

9.如何提升交互性和反饋體驗

? 對于用戶熟悉的標(biāo)準(zhǔn)手勢不要賦予不同的行為，除非是游戲

? 不要創(chuàng)建和標(biāo)準(zhǔn)手勢功能相似的手勢操作。用戶已經(jīng)習(xí)慣標(biāo)準(zhǔn)手勢操作，沒有必要讓用戶學(xué)習(xí)達到同樣效果的不同操作

? 可以用復(fù)雜手勢作為完成某項任務(wù)的快捷方式，但不是唯一觸達的方式。最好給用戶提供一些簡單、直接的方式完成某操作，即使這種方法需要額外的動作。簡單地手勢能讓用戶集中于當(dāng)前的體驗和內(nèi)容，而不是交互操作本身。

? 除非是游戲，否則避免定義新手勢

? 在特定的環(huán)境中，可以考慮使用多指操作。雖然復(fù)雜的操作不一定適用于所有應(yīng)用，但對用戶會花大量時間使用的應(yīng)用來說可以豐富體驗，例如游戲。

10.如何利用交互元素吸引用戶點擊

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

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

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

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

? 在內(nèi)容區(qū)域，有必要給按鈕添加邊界或背景? 操作條中的按鈕、動作表單和提醒對話框可以不需要邊界，因為用戶知道在這種區(qū)域中大多數(shù)選項是可交互的。但是在內(nèi)容區(qū)域，按鈕有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來

? App store應(yīng)用中使用有邊界的按鈕，將按鈕和整個內(nèi)容條區(qū)分開來，點擊整條內(nèi)容查看詳細信息，點擊按鈕進行下載。反饋會幫助用戶了解應(yīng)用當(dāng)前在做什么，發(fā)現(xiàn)接下來可以做什么以及理解動作產(chǎn)生的結(jié)果。

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

? 盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的。例如，郵箱應(yīng)用將當(dāng)前的狀態(tài)顯示工具條上，這樣就不影響當(dāng)前內(nèi)容。

? 避免顯示不必要的警告框。警告框是一種很強的反饋機制，只能在傳遞非常重要也是理論上可行的信息時才需要使用它，如果用戶常看到很多不是重要信息的警告框，他們很開就會忽略所有對話框提醒

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

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

? 為了在ios中感覺舒適，你的應(yīng)用雖然不必看起來和內(nèi)置一樣，但是需要對它的遵從、清晰度和深度進行整合。花些時間弄清楚在你的應(yīng)用中，遵從清晰和深度代表的異味，并把它們在你的自定義元素中表達出來

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

13.如何讓用戶意識到你的品牌

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

? 避免遠離用戶關(guān)心的內(nèi)容

考慮用低侵入性的方法無處不在地展示品牌，比如巧妙地定制屏幕背景

? 抵擋住誘惑，不要把你的logo貫穿整個應(yīng)用

對于用戶來說通常會很容易在不知道網(wǎng)頁所屬的情況下訪問一個網(wǎng)頁，但卻極少有用戶會在完全不看一個ios系統(tǒng)中得應(yīng)用圖標(biāo)的情況下打開它。

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

? 將圖標(biāo)設(shè)計當(dāng)成一個講述應(yīng)用背后的故事，以及與用戶建立情感連接的機會

? 圖標(biāo)應(yīng)該獨特、簡潔、打動人心、讓人印象深刻

? 圖標(biāo)應(yīng)該在不同的背景以及不用的規(guī)格下都同樣美觀。為了豐富大尺寸圖標(biāo)的質(zhì)感而添加的細節(jié)有可能讓圖標(biāo)在小尺寸時變得不清楚。

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

? 盡可能使用UIkit提供的標(biāo)準(zhǔn)UI元素，多使用標(biāo)準(zhǔn)元素而非自定義元素

? 嚴格遵循每個UI元素的設(shè)計規(guī)范，當(dāng)你應(yīng)用中UI元素的外觀與功能都是用戶所熟悉的，他們可以很容易的根據(jù)先前的經(jīng)驗使用它，進而更好的使用你的應(yīng)用

? 不要混用不同版本iOS里的UI元素

? 請避免創(chuàng)造自定義UI元素來表現(xiàn)標(biāo)準(zhǔn)交互行為

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

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

更多推薦

回復(fù)“21”——百度十年產(chǎn)品經(jīng)驗總結(jié)：產(chǎn)品經(jīng)理九步法

回復(fù)“22”——產(chǎn)品經(jīng)理必知的11個微信接口

回復(fù)“24”——五天，谷歌如何制作一款A(yù)pp？

回復(fù)“30”——內(nèi)部價值千萬的24張產(chǎn)品策略PPT！

回復(fù)“31”——騰訊產(chǎn)品大拿告訴你，用戶體驗是這樣設(shè)計的

回復(fù)“33”——阿里產(chǎn)品經(jīng)理內(nèi)訓(xùn)能力模型解讀

回復(fù)“34”——張小龍：微信背后的產(chǎn)品觀

回復(fù)“39”——你不知道的HTML5的概念、方法和推廣實戰(zhàn)指南

回復(fù)“43”——移動H5前端性能優(yōu)化指南

回復(fù)“44”——策劃一個線上活動的整體流程

原創(chuàng)或推薦文章請發(fā)送至郵箱：xiaoxi@pmcaff.com

pmcaff合作媒體：Chinaz

總結(jié)

以上是生活随笔為你收集整理的值得向IOS学习的15个APP设计技巧！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。