iOS設(shè)計原則
基本原則
- 遵從(Deference):UI應(yīng)該有助于用戶更好地理解內(nèi)容并與之交互摧茴，且不會分散用戶對內(nèi)容本身的注意力宪塔。
- 清晰(Clarity):各種尺寸的文字清晰易讀；圖標(biāo)應(yīng)該精確醒目，去除多余的修飾，突出重點，以功能驅(qū)動設(shè)計曹质。
- 深度(Depth):視覺的層次感和生動的交互動畫會賦予UI新的活力，有助于用戶更好地理解并讓用戶在使用過程中感到愉悅擎场。
設(shè)計思路
- 首先羽德，去除掉UI元素讓應(yīng)用的核心功能突顯出來，并明確之間的相關(guān)性迅办。
- 然后宅静，使用iOS的主題來定義UI并進(jìn)行用戶體驗設(shè)計。完善細(xì)節(jié)設(shè)計站欺，以及適當(dāng)合理的修飾姨夹。
- 最后，保證你設(shè)計的UI可以適配各種設(shè)備和各種操作模式矾策，使得用戶在不同場景下都可以享受你的應(yīng)用磷账。
001設(shè)計跟隨內(nèi)容
- 充分利用整個屏幕
- 重新考慮(盡量減少)擬物化設(shè)計的使用。
- 遮罩贾虽、漸變和陰影有時會讓UI元素顯得很厚重逃糟，導(dǎo)致影響到了對內(nèi)容的關(guān)注。相反蓬豁，應(yīng)該以內(nèi)容為核心绰咽，讓用戶界面成為內(nèi)容的支撐。
- 用半透明UI元素樣式來暗示背后的內(nèi)容地粪。
002保證清晰
- 使用大量留白
- 讓顏色簡化UI取募。使用一個主題色。比如Notes中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性蟆技。同時玩敏，也讓應(yīng)用有了一致的視覺主題。內(nèi)置的應(yīng)用使用了同系列的系統(tǒng)顏色付魔，這樣一來聊品，無論在深色或淺色背景上看起來都很干凈，純粹几苍。
- 通過使用系統(tǒng)字體確保易讀性。iOS的系統(tǒng)字體(SanFrancisco)使用動態(tài)類型(DynamicType)來自動調(diào)整字間距和行間距陈哑，使文本在任何尺寸大小下都清晰易讀妻坝。
- 使用無邊框的按鈕伸眶。默認(rèn)情況下，所有的欄(bar)上的按鈕都是無邊框的刽宪。在內(nèi)容區(qū)域厘贼，通過文案、顏色以及操作指引標(biāo)題來表明該無邊框按鈕的可交互性圣拄。當(dāng)它被激活時嘴秸，按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng)。
003UIKit提供4種類型的UI組件
- 欄(Bars):包含了上下文信息來指引用戶他們所在的位置庇谆，以及控件來幫助用戶導(dǎo)航或執(zhí)行操作岳掐。(比如導(dǎo)航欄、標(biāo)簽欄)
- 內(nèi)容視圖(ContentViews):包含了應(yīng)用的具體內(nèi)容以及某些操作行為饭耳，比如滾動串述、插入、刪除寞肖、排序等等纲酗。(比如集合視圖和表格視圖)
- 控件(Controls):用于執(zhí)行操作或展示信息。(比如按鈕和滑塊)
- 臨時視圖(TemporaryViews):短暫出現(xiàn)給予用戶重要信息或提供更多的選擇和功能新蟆。(如警告提示和動作菜單)觅赊。
004為自適應(yīng)而開發(fā)
- iOS定義了兩個尺寸類別，常規(guī)的和壓縮的琼稻。常規(guī)尺寸與拓展的空間緊密相關(guān)茉兰，壓縮尺寸與約束的空間相關(guān)。想要定義一種顯示環(huán)境欣簇，你需要定義一種橫屏尺寸類別规脸，與一種豎屏尺寸類別。如你所想熊咽，一個iOS設(shè)備在豎屏模式可以使用一套類別莫鸭，而橫屏模式下可以使用另一套類別。
- iOS能隨著尺寸類別和顯示環(huán)境變化而自動生成不同布局横殴。舉個例子被因，當(dāng)垂直尺寸從壓縮變?yōu)槌Ｒ?guī)時，導(dǎo)航欄和工具欄會自動變高衫仑。當(dāng)你靠尺寸類別來驅(qū)動布局變化時梨与，你的應(yīng)用在任何顯示環(huán)境時都能顯示得很好。
005UI自適應(yīng)開發(fā)指南
- 在所有環(huán)境下都保持對主體內(nèi)容的專注文狱。
- 避免布局上不必要的變化粥鞋。
- 如果你的應(yīng)用只在一個方向上運行，那么請直接一點瞄崇。
- 避免出現(xiàn)提示人們旋轉(zhuǎn)設(shè)備的相關(guān)UI元素呻粹。
- 支持同一個方向上的變化壕曼。如果你的應(yīng)用將設(shè)備方向翻轉(zhuǎn)視為用戶輸入(的一種指令)，那么就按照程序設(shè)定的方式來響應(yīng)設(shè)備翻轉(zhuǎn)等浊。
006使用布局來溝通
布局包含的不僅僅是一個應(yīng)用屏幕上的UI元素外觀腮郊。你的布局，應(yīng)該告訴用戶什么是最重要的筹燕，他們的選擇是什么轧飞，以及事物是如何關(guān)聯(lián)起來的。
強(qiáng)調(diào)重要內(nèi)容或功能撒踪，讓用戶容易集中注意在主要任務(wù)上过咬。
- 遵循從左到右的習(xí)慣——從靠近左側(cè)的屏幕開始
- 使用不同的視覺化重量和平衡來告訴用戶當(dāng)前屏顯元素的主次關(guān)系。
- 大型控件吸引眼球糠涛，比小的控件更容易在出現(xiàn)時被注意到和被點擊援奢。
- 使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序忍捡。
- 確保用戶在內(nèi)容處于默認(rèn)尺寸時便可清楚明白它的主要內(nèi)容與含義集漾。例如，用戶應(yīng)當(dāng)無需水平滾動就能看到重要的文本砸脊，或不用放大就可以看到主體圖像具篇。
- 準(zhǔn)備好改變字體大小。為了適應(yīng)一些文本大小的變化凌埂，你也許需要調(diào)整布局驱显。
- 盡量避免UI上不一致的表現(xiàn)。常用的點按類控件的大小是44x44點(points)瞳抓。
007即時啟動
用戶不會花超過一兩分鐘去評價一款新應(yīng)用埃疫。當(dāng)你可以最大程度地利用這段極短的時間，即時呈現(xiàn)對用戶有幫助的內(nèi)容時孩哑，你就能夠激發(fā)新用戶的興趣并給所有用戶一種極棒的體驗栓霜。
重要：不要在安裝過程結(jié)束后告訴用戶需要重啟設(shè)備。重啟需要花費時間横蜒，同時也會讓人覺得你的應(yīng)用不可靠且很難使用胳蛮。如果你的應(yīng)用有內(nèi)存使用或其它問題，導(dǎo)致不重啟就無法流暢運行丛晌，你必須聲明這些問題仅炊。
盡可能避免使用閃屏或者其他啟動體驗方式。用戶能夠在啟動應(yīng)用后立即開始使用是最好不過的澎蛛。
盡可能地抚垄，避免讓用戶做過多設(shè)置。而應(yīng)該如此:
- 聚焦在80%目標(biāo)用戶的需求上。
- 盡可能用其他方式獲取更多的用戶信息督勺。如果你能得到用戶在內(nèi)置應(yīng)用或硬件設(shè)置中提供的信息渠羞，直接從系統(tǒng)中獲取斤贰，不要讓用戶再次輸入智哀。
- 如果你必須要求用戶設(shè)置用戶信息，在你的應(yīng)用中直接提示用戶輸入荧恍。然后盡快保存這些設(shè)定(一般來說瓷叫，保存到你的應(yīng)用的設(shè)置模塊中)。
盡可能讓用戶晚一點再登錄送巡。最理想的狀態(tài)是摹菠，用戶在無需登錄的情況下就能盡量多地瀏覽內(nèi)容并使用部分功能。例如骗爆，AppStore會在用戶確定進(jìn)行購買商品時次氨，才要求用戶進(jìn)行登錄。對于那些強(qiáng)制用戶登錄后才能進(jìn)行一切有用操作的應(yīng)用摘投，用戶往往會直接放棄煮寡。
如果你的應(yīng)用必須先登錄后使用，那么你應(yīng)該在登錄頁面有一些簡短的文字犀呼，來描述為什么必須先登錄幸撕，以及這樣做會給用戶帶來什么好處。
謹(jǐn)慎使用新手引導(dǎo)(介紹應(yīng)用的功能和如何進(jìn)行操作)外臂。好的應(yīng)用不需要新手引導(dǎo)坐儿。如果你確實覺得需要新手引導(dǎo)抹镊，那么請參考如下的建議囊骤，設(shè)計一個簡潔、有針對性并且不妨礙用戶的新手引導(dǎo)览效。
- 只提供開始使用應(yīng)用所必需的信息罪佳。
- 好的新手引導(dǎo)應(yīng)該告訴用戶第一步應(yīng)該做什么逛漫，或者簡短地演示大部分用戶感興趣的一些功能。
- 使用動畫和可交互的方式來吸引用戶菇民，并讓用戶通過實際操作來學(xué)習(xí)如何使用尽楔。對于文字內(nèi)容的增加應(yīng)該謹(jǐn)慎，且僅當(dāng)增加文字對于提升體驗有益時才這么做第练。不要指望用戶會閱讀大段的文字阔馋。在引導(dǎo)用戶了解較為復(fù)雜的任務(wù)時，可以通過一些引導(dǎo)浮層來簡要說明每一個步驟用戶需要做什么娇掏。盡可能避免展示應(yīng)用截圖呕寝，因為截圖不可交互的，用戶可能會混淆截圖和應(yīng)用的實際界面婴梧。
- 能夠讓用戶很容易地取消或者跳過新手引導(dǎo)下梢。
不要太早要求用戶去給你的應(yīng)用評分客蹋。
一般建議按照屏幕默認(rèn)的定向方式啟動你的應(yīng)用。
重要：最好讓橫屏應(yīng)用支持兩種方向的橫屏孽江，即home鍵在左或在右方都支持讶坯。如果設(shè)備當(dāng)前已經(jīng)處于橫向狀態(tài)，那么就按照當(dāng)前狀態(tài)啟動應(yīng)用岗屏，除非你有充分的理由不這么做辆琅。其他情況時，可以考慮按home鍵處于右側(cè)的方式啟動應(yīng)用这刷。
提供一張與應(yīng)用首頁看上去一樣的閃屏婉烟。iOS會在啟動應(yīng)用時調(diào)用這張圖，這樣可以讓用戶覺得啟動速度很快暇屋，同時似袁，也可以讓你的應(yīng)用有足夠的時間去加載內(nèi)容。
如果可能咐刨，不要讓用戶在初次啟動應(yīng)用時閱讀免責(zé)聲明或者確認(rèn)用戶協(xié)議昙衅。
在應(yīng)用重啟后，需要恢復(fù)到用戶退出使用時的狀態(tài)所宰，讓他們可以從中斷之處繼續(xù)使用绒尊。
