一張圖帶你快速掌握iOS設(shè)計(jì)規(guī)范

4 評(píng)論 31919 瀏覽 443 收藏 12 分鐘

每次發(fā)文章,評(píng)論里總會(huì)有大堆小白們?cè)趩?wèn):~求最新iOS設(shè)計(jì)規(guī)范鏈接~~求中文翻譯版~~你看的是哪個(gè)版本,我的怎么沒(méi)有~這次就做下基礎(chǔ)知識(shí)普及,以更簡(jiǎn)單易懂的方式整理下iOS 9 的設(shè)計(jì)規(guī)范給大家。

iOS設(shè)計(jì)規(guī)范,指的是蘋果開(kāi)發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南(iOS Human Interface Guideline)。制作這個(gè)規(guī)范的目的是為了讓所有安裝到iOS系統(tǒng)中的App都遵從某些特定的視覺(jué)特性、交互特性,以達(dá)到風(fēng)格一致性的使用體驗(yàn)。另一個(gè)層面,也是便于讓設(shè)計(jì)人員和開(kāi)發(fā)人員能夠更好的理解iOS系統(tǒng),更合理的運(yùn)用系統(tǒng)提供的功能和接口,更高效的制作出App。

概述

首先上一張整體結(jié)構(gòu)圖:

iOS人機(jī)交互指南_收起

iOS人機(jī)交互指南主要分為5個(gè)章節(jié):

  1. iOS UI設(shè)計(jì)基礎(chǔ)知識(shí)(UI Design Basics)–主要介紹針對(duì)iOS系統(tǒng)的特性,在設(shè)計(jì)時(shí)要考慮到的各種影響因素。比如多尺寸屏幕的自適應(yīng);程序的啟動(dòng)與停止時(shí)的注意事項(xiàng);iOS的布局、配色、字體規(guī)范等等。
  2. 設(shè)計(jì)策略(Design Strategies)–介紹了交互設(shè)計(jì)的一些原則以及設(shè)計(jì)實(shí)現(xiàn)App的建議流程。最后舉了幾個(gè)案例進(jìn)行說(shuō)明。
  3. iOS技術(shù)(iOS Technologies)–介紹了集成到iOS系統(tǒng)內(nèi)的一些軟硬件技術(shù),方便在設(shè)計(jì)開(kāi)發(fā)功能時(shí)加以利用。
  4. UI元素簡(jiǎn)介(UI Elements)–介紹iOS系統(tǒng)中的每個(gè)UI元素(交互控件)的使用方式和注意事項(xiàng)。在了解了這些UI元素后,設(shè)計(jì)者會(huì)更加了解系統(tǒng)提供了哪些設(shè)計(jì)元素,以便于提高開(kāi)發(fā)效率和統(tǒng)一視覺(jué)、交互體驗(yàn)。也能很好的限制住設(shè)計(jì)師們野馬一樣的思維。
  5. 圖標(biāo)與圖像設(shè)計(jì)(Icon and Image Design)–介紹了iOS系統(tǒng)對(duì)于圖標(biāo)和圖像的設(shè)計(jì)的一些要求和注意事項(xiàng)。

iOS App設(shè)計(jì)原則

iOS的整體設(shè)計(jì)原則,在規(guī)范的第一章已經(jīng)清楚的說(shuō)明:

1.?設(shè)計(jì)要服從于功能(或內(nèi)容)

設(shè)計(jì)是為了更好的讓用戶使用功能、閱讀內(nèi)容,決不能為了追求設(shè)計(jì)上的完美而犧牲了功能的使用體驗(yàn)。

在規(guī)范中舉了一個(gè)非常恰當(dāng)?shù)睦樱容^兩個(gè)計(jì)算器的設(shè)計(jì):設(shè)計(jì)更完美、更炫目的計(jì)算器給用戶帶來(lái)的確是非常糟糕的使用體驗(yàn)。而相對(duì)來(lái)說(shuō)更簡(jiǎn)潔直觀的設(shè)計(jì),則是經(jīng)過(guò)無(wú)數(shù)次迭代蘋果的設(shè)計(jì)師們最終選擇的版本。

155

3.?更加清晰明了的呈現(xiàn)UI

首先,頁(yè)面的設(shè)計(jì)要突出重點(diǎn):聚焦核心功能的呈現(xiàn),巧妙并適當(dāng)?shù)募尤胄揎椩亍?/p>

其次,細(xì)節(jié)的設(shè)計(jì)要清晰的展現(xiàn):文字內(nèi)容在各個(gè)尺寸的屏幕中都清晰的顯示,圖標(biāo)的設(shè)計(jì)要精確和明晰的表現(xiàn)出其代表的功能,顏色的運(yùn)用要突出主題并盡可能干凈、純粹,使用無(wú)邊框按鈕以突出功能。

158

3.?利用層次感和動(dòng)效為設(shè)計(jì)增添活力

視覺(jué)上的層次感、貼近自然的動(dòng)畫(huà)效果可以讓用戶便于理解并得到愉悅感。

利用層次可以表達(dá)出各UI元素間的層次關(guān)系,以及當(dāng)前活動(dòng)的狀態(tài)。

156

利用自然的動(dòng)效可以增強(qiáng)用戶對(duì)交互邏輯的感知。

157

iOS App設(shè)計(jì)要點(diǎn)

樣式

iOS設(shè)計(jì)規(guī)范建議的App設(shè)計(jì)流程是這樣的:

  1. 去掉所有的UI修飾,只考慮核心功能以及功能間的關(guān)聯(lián)。
  2. 利用iOS的主題樣式來(lái)設(shè)計(jì)功能的UI,完善細(xì)節(jié)設(shè)計(jì)。
  3. 確保設(shè)計(jì)出的UI適配各種設(shè)備以及各種操作模式。

其中提到的iOS的主題樣式,指的是利用iOS系統(tǒng)提供的UI元素(控件)的樣式來(lái)設(shè)計(jì)。這樣設(shè)計(jì)的好處是:

  • 保證了你的應(yīng)用的交互體驗(yàn)與iOS原生應(yīng)用的體驗(yàn)的一致性,用戶使用起來(lái)沒(méi)有學(xué)習(xí)障礙。
  • 利用系統(tǒng)UI元素實(shí)現(xiàn)App,更便于與開(kāi)發(fā)溝通,而且程序開(kāi)發(fā)起來(lái)非常的方便,效率高并且錯(cuò)誤率低。

所以,熟讀“UI元素”這章的內(nèi)容,是每個(gè)設(shè)計(jì)者和開(kāi)發(fā)者的必要工作。

13

App生命周期

生命周期這個(gè)詞是來(lái)源于Android設(shè)計(jì)規(guī)范,iOS沒(méi)有特別的強(qiáng)調(diào)這個(gè)概念。而理解整個(gè)App的生命周期對(duì)于App的設(shè)計(jì)來(lái)說(shuō)確非常關(guān)鍵。

整個(gè)生命周期可以理解為這個(gè)過(guò)程:

啟動(dòng) -> 前臺(tái)運(yùn)行 -> 退出 -> 后臺(tái)運(yùn)行 -> 后臺(tái)終結(jié)(內(nèi)存釋放)

iOS系統(tǒng)的內(nèi)存釋放機(jī)制在設(shè)計(jì)規(guī)范里面沒(méi)有體現(xiàn),因?yàn)檫@個(gè)算法也在不斷的優(yōu)化沒(méi)有必要讓過(guò)多的人了解。但是需要我們熟知的是:在點(diǎn)擊Home鍵返回桌面時(shí),程序從前臺(tái)切換到后臺(tái),此時(shí)要記錄當(dāng)前畫(huà)面的流程狀態(tài)和必要的信息以便下次回到應(yīng)用恢復(fù)。這個(gè)過(guò)程在設(shè)計(jì)時(shí)就要考慮清楚。

布局

iPad的自適應(yīng)布局方式主要是利用AutoLayout(一種自適應(yīng)布局的程序?qū)崿F(xiàn)方法)和“常規(guī)”與“緊湊“兩種尺寸類別來(lái)定義的。

利用AutoLayout實(shí)現(xiàn)的屏幕布局,會(huì)在不同設(shè)備的屏幕尺寸下選擇不同的尺寸類別,以達(dá)到在該設(shè)備下的最佳顯示效果。具體的適配方式如下圖:

15

利用這種自適應(yīng)布局方式,可以讓程序開(kāi)發(fā)(以及UI設(shè)計(jì))對(duì)應(yīng)多屏幕布局變得更加容易,更加高效。從顯示效果上講,也更加協(xié)調(diào)并保證了一致性。下面以印象筆記為例,看下自適應(yīng)布局的效果。

160

在對(duì)應(yīng)Pad版布局時(shí),利用了UI元素中的Split View Controller,將不同層級(jí)的兩個(gè)內(nèi)容視圖同時(shí)顯示出來(lái),以提高大屏幕的使用效率。

159

顏色

App設(shè)計(jì)時(shí)應(yīng)選擇使用那些看起來(lái)更具個(gè)性的、純粹、干凈的顏色,并輔以或亮或暗的背景組合。同一主色應(yīng)貫穿整個(gè)App,根據(jù)功能的不同,可以選擇另一種顏色作為強(qiáng)調(diào)色。

161

設(shè)計(jì)顏色時(shí)要考慮:

  • 如果你要?jiǎng)?chuàng)建多樣的自定義顏色,要確保它們能夠和諧共存
  • 當(dāng)你使用自定義的欄顏色時(shí),著重考慮半透明的欄和應(yīng)用內(nèi)容
  • 考慮選擇一種基準(zhǔn)色顏色來(lái)表征交互性與狀態(tài)
  • 避免同時(shí)對(duì)交互控件和非交互控件使用同一顏色
  • 色彩可以向用戶傳達(dá)信息,但不一定會(huì)以你希望的方式(種族、文化、生活習(xí)慣對(duì)顏色的看法不同)
  • 不能讓顏色喧賓奪主,讓用戶分心

字體

在iOS9之后,San Francisco成為了系統(tǒng)默認(rèn)字體?;赟an Francisco的動(dòng)態(tài)字體(Dynamic Type )可以實(shí)現(xiàn):

  • 為用戶提供最易辨認(rèn)、體驗(yàn)最好的不同大小的字號(hào)。
  • 能自動(dòng)調(diào)整文字的粗細(xì),字母間距以及行高。
  • 為語(yǔ)義上有區(qū)別的文本模塊指定不同的文本樣式,比如正文、腳注或者標(biāo)題。
  • 隨著用戶調(diào)整文字屬性,文本可以動(dòng)態(tài)的進(jìn)行調(diào)整響應(yīng)。

162

設(shè)計(jì)時(shí)還要考慮:

  • 根據(jù)內(nèi)容的輕重緩急來(lái)響應(yīng)用戶調(diào)整文本尺寸的變化
  • 通常情況下,應(yīng)用中整體應(yīng)該使用單一字體
  • 確保自定義字體在所有的樣式和尺寸時(shí)都是清晰的。

動(dòng)畫(huà)

動(dòng)畫(huà)效果不僅能夠給用戶帶來(lái)震撼的視覺(jué)體驗(yàn),合適的動(dòng)效還可以達(dá)到以下的目的:

  1. 傳達(dá)當(dāng)前的狀態(tài)和提供反饋。
  2. 增強(qiáng)操作感。
  3. 幫助用戶直觀的了解到其動(dòng)作的結(jié)果。

scqp3

設(shè)計(jì)動(dòng)效時(shí)還要考慮:

  • 動(dòng)效的設(shè)計(jì)是為了突出功能,不要喧賓奪主、不要過(guò)度使用動(dòng)效耗費(fèi)性能、不要在價(jià)值不高的動(dòng)效上花費(fèi)更多的開(kāi)發(fā)工作量。
  • 盡量利用系統(tǒng)動(dòng)畫(huà),系統(tǒng)默認(rèn)的動(dòng)畫(huà)可以為App提供與iOS系統(tǒng)的動(dòng)效一致性的體驗(yàn),隨意修改往往會(huì)出現(xiàn)違和感。如果自定義動(dòng)效,也盡可能與系統(tǒng)動(dòng)畫(huà)的樣式相匹配。
  • 在同一App中動(dòng)效要保持一致。

最后,建議大家收藏iOS 人機(jī)交互指南官網(wǎng)地址,在每次iOS版本更新或新機(jī)型發(fā)售時(shí),該指南都會(huì)有所更新。

iOS Human Interface Guidline

 

作者:周博文(微信號(hào):pmzhoubw) 中云普華產(chǎn)品總監(jiān)。個(gè)人公眾號(hào) “產(chǎn)品范兒”(MobileGuideline)

本文由 @周博文 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問(wèn)大佬,UI元素這章在哪里可以找到

    回復(fù)
  2. 網(wǎng)站中文看不了嗎

    回復(fù)
  3. 真是棒棒噠!

    來(lái)自江蘇 回復(fù)
  4. 學(xué)到很多~ ??

    來(lái)自上海 回復(fù)