翻了下這幾年的iOS人機(jī)界面指南，開篇始終是遵從（Deference），清晰（Clarity），深度（Depth）這三個(gè)關(guān)鍵字，從iOS7到iOS9從未變過。在iOS>中UI作為內(nèi)容的支撐，始終服務(wù)于內(nèi)容，就像喬幫主說的“設(shè)計(jì)不只是看上去的樣子和感覺，設(shè)計(jì)的關(guān)鍵在于它如何發(fā)揮作用?！?/p>

一、遵從 (Deference)

設(shè)計(jì)為內(nèi)容服務(wù)，UI作為內(nèi)容的支撐，可以幫助用戶更好地理解內(nèi)容并與之交互，且不會(huì)分散用戶對(duì)內(nèi)容本身的注意力。以內(nèi)容為中心被反復(fù)強(qiáng)調(diào)，而平時(shí)設(shè)計(jì)師卻常常會(huì)因?yàn)檫^度追求美感而忽視這一點(diǎn)。

如何使設(shè)計(jì)遵從內(nèi)容，并突出內(nèi)容：

• 利用整個(gè)屏幕。

• 減少視覺修飾與擬物化設(shè)計(jì)的使用。漸變和陰影有時(shí)會(huì)使UI變得厚重，影響用戶對(duì)內(nèi)容的關(guān)注。

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

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

二、清晰 (Clarity)

清晰在這里可以理解為：文字清晰易讀，圖標(biāo)精確醒目，去除多余修飾，突出重點(diǎn)，以功能驅(qū)動(dòng)設(shè)計(jì)。

如何提升應(yīng)用清晰度：

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

• 用顏色簡化UI。突出重點(diǎn)并暗示交互性。

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

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

正確使用標(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元素混用。

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

- 避免用系統(tǒng)自帶的按鈕和元素傳達(dá)其他含義。

- 在沉浸式體驗(yàn)的應(yīng)用中，創(chuàng)造全新的自定義UI是合理的，比如H5頁面和各種游戲類APP。

使用戶集中注意在主要任務(wù)上：

-使用布局來溝通。用布局告訴用戶什么是最重要的 ，如何選擇，以及事物之間的關(guān)聯(lián)。

- 屏幕上半部分放置主要內(nèi)容。遵循用戶從左到右的習(xí)慣，并從靠左側(cè)的屏幕開始。

- 使用視覺元素的大小和平衡向用戶展示相關(guān)屏顯的重要內(nèi)容。大控件比小控件更容易在出現(xiàn)時(shí)被注意和點(diǎn)擊。使用對(duì)齊來讓閱讀更舒適，讓分組和層次之間更有秩序。對(duì)齊會(huì)讓應(yīng)用整潔有序，也會(huì)讓用戶在專注屏幕時(shí)篩選重要信息。不同 信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰，也會(huì)讓用戶更容易的找到某個(gè)控件。

- 確保默認(rèn)尺寸下重要內(nèi)容的顯示。例如：用戶無需水平滾動(dòng)就能看到重要的文本，或不用放大就可以看到主體圖像。

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

- 給每個(gè)互動(dòng)元素留足空間，讓用戶輕松的操作。常用的點(diǎn)按類控件的大小是44X44。

三、深度 (Depth)

視覺的層次感和生動(dòng)的交互動(dòng)畫會(huì)讓UI看起來更有活力，有助于用戶更好地理解并提升用戶的愉悅感。

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

• 用戶熟悉的標(biāo)準(zhǔn)手勢(shì)避免賦予不同的行為，除非是游戲。
• 避免創(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òng)作。簡單地手勢(shì)會(huì)讓用戶集中于當(dāng)前的體驗(yàn)和內(nèi)容，而不是操作本身。
• 除非是游戲，否則避免定義新手勢(shì)
• 在特定的環(huán)境中，可以考慮使用多指操作。雖然復(fù)雜的操作不一定適用于所有應(yīng)用，但對(duì)用戶會(huì)花大量時(shí)間使用的應(yīng)用來說可以豐富體驗(yàn)，例如游戲。

使用有助于理解的反饋：

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

-避免顯示不必要的提醒對(duì)話框。對(duì)話框是一種很強(qiáng)的反饋機(jī)制，只能在傳遞非常重要也是理論上可行的信息時(shí)才需要使用它，如果用戶?？吹胶芏嗖皇侵匾畔⒌膶?duì)話框，他們很快就會(huì)忽略所有對(duì)話框提醒。

參考：

1. 《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（1）：UI設(shè)計(jì)基礎(chǔ)》
2. 《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（2）：設(shè)計(jì)策略》
3. 《騰訊力作！IOS 9人機(jī)界面指南（3）：IOS 技術(shù) （上）》

感謝閱讀 ：）

【為了這8個(gè)指南也得存書簽！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

作者：ME網(wǎng)易移動(dòng)設(shè)計(jì)

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量106萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com