值得向iOS學習的15個APP設(shè)計技巧

0 評論 14251 瀏覽 19 收藏 16 分鐘

iOS8人機交互指南再閱讀”

iOS整體的品質(zhì)感大家有目共睹,這源于其背后嚴格的設(shè)計規(guī)范,強調(diào)以內(nèi)容為中心,以重點內(nèi)容和功能為目標,來驅(qū)動每個細節(jié)設(shè)計。以下是我從設(shè)計規(guī)范中學到的一些設(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ū)域無邊框按鈕以文案、顏色及操作指引標題來傳 ? ?達按鈕功能,按鈕激活時高亮。
      • ? ?使用布局來溝通,布局包含的不僅是UI外觀,應(yīng)該告訴用戶什么是最重要的?,他們的選擇是什么,以及事物是如何關(guān)聯(lián)起來的,提升重要內(nèi)容和功能,讓用戶容易集中注意在主要任務(wù)上

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

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

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

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

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

      • ??準備好改變字體大小
        為了適應(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)該在登錄頁面描述為什么必須先登錄,以及這樣對用戶的好處
      • ??謹慎使用新手引導
        在使用新手應(yīng)用前,盡可能使應(yīng)用的功能直觀和易于尋找,“好的應(yīng)用不需要新手引導”
      • ??若有請簡潔有針對性并且不妨礙用戶

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

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

不脫離主任務(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ù)過于復雜,用戶會在進入模態(tài)情景時忽略主要任務(wù),在設(shè)計一個涉及視覺層次的模態(tài)任務(wù)時要特別考慮這點,因為用戶有可能迷失并且忘記如何回到之前的操作中去。如果一個模態(tài)任務(wù)包含不同視圖的子任務(wù),確保給用戶一個獨立,清晰的導航路徑,并避免迂回
      • ??始終提供明顯、安全的途徑退出模態(tài)任務(wù)
        確保用戶在退出模態(tài)視圖時可以預(yù)期操作結(jié)果
      • ??一個任務(wù)需要多層級的模態(tài)視圖時,確保用戶理解點擊完成按鈕的結(jié)果
        點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務(wù)的一部分,還是整個任務(wù)?因為存在這種疑惑的可能性,所以盡可能避免在下級視圖中添加完成按鈕
      • ??保證提醒對話框的內(nèi)容都是重要且可操作的
        提醒對話框會打斷用戶的體驗并且要點擊才會消失,所以要讓用戶感到提醒信息是有用的,打斷是有價值的
      • ??尊重用戶關(guān)于接受通知的選擇
        用戶會設(shè)置接收,應(yīng)用通知的形式,必須尊重用戶的喜好設(shè)置,否則可能觸怒用戶,導致其關(guān)閉所有的推送通知

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

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

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

      • ??暗示交互性,設(shè)計時可以使用很多線索。包括顏色、位置、上下文、表意明確地圖標和標簽。并不需要過于修飾元素向用戶展示可交互性
      • ??一個關(guān)鍵的顏色可以給用戶提供很強的視覺指引,尤其是在沒有冗余的其他顏色時。為了有對比,使用顏色標記可交互的元素,并且使用統(tǒng)一的、易識別的視覺風格
      • ??返回按鈕使用多個線索指明其可交互性并傳達其功能
        出現(xiàn)在導航中、顯示一個指向后方的圖標、使用了關(guān)鍵色、顯示了上一級頁面的標題
      • ??一個圖標或者標題提供了清晰的名稱指引用戶點擊它。
        例如,地圖中的標題“立交橋路線”、“定位到這里”,清楚地說明了用戶可做的操作。結(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)用當前在做什么,發(fā)現(xiàn)接下來可以做什么以及理解動作產(chǎn)生的結(jié)果

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

      • ??盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進行操作或不跳出當前內(nèi)容就能獲得需要的信息是最好的。例如,郵箱應(yīng)用將當前的狀態(tài)顯示工具條上,這樣就不影響當前內(nèi)容。
      • ??避免顯示不必要的警告框。警告框是一種很強的反饋機制,只能在傳遞非常重要也是理論上可行的信息時才需要使用它,如果用戶常看到很多不是重要信息的警告框,他們很開就會忽略所有對話框提醒

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

      • ??每個自定義的元素本身都具備良好的觀感和功能性,但也應(yīng)該和與應(yīng)用中其他元素保持一致無論應(yīng)用中其他元素是自定義還是標準的
      • ??為了在ios中感覺舒適,你的應(yīng)用雖然不必看起來和內(nèi)置一樣,但是需要對它的遵從、清晰度和深度進行整合?;ㄐr間弄清楚在你的應(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)用圖標的情況下打開它

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

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

?15.如何正確使用標準UI元素

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

source:ui中國

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!