一張圖帶你快速掌握iOS設計規范

每次發文章,評論里總會有大堆小白們在問:~求最新iOS設計規范鏈接~~求中文翻譯版~~你看的是哪個版本,我的怎么沒有~

這次就做下基礎知識普及,以更簡單易懂的方式整理下iOS 9 的設計規范給大家。

iOS設計規范,指的是蘋果開發者官網上面的 iOS 人機交互指南(iOS Human Interface Guideline)。制作這個規范的目的是為了讓所有安裝到iOS系統中的App都遵從某些特定的視覺特性、交互特性,以達到風格一致性的使用體驗。另一個層面,也是便于讓設計人員和開發人員能夠更好的理解iOS系統,更合理的運用系統提供的功能和接口,更高效的制作出App。

概述

首先上一張整體結構圖:

iOS 人機交互指南

iOS人機交互指南主要分為5個章節:

iOS UI設計基礎知識(UI Design Basics)--主要介紹針對iOS系統的特性,在設計時要考慮到的各種影響因素。比如多尺寸屏幕的自適應;程序的啟動與停止時的注意事項;iOS的布局、配色、字體規范等等。

iOS UI設計基礎知識

設計策略(Design Strategies)--介紹了交互設計的一些原則以及設計實現App的建議流程。最后舉了幾個案例進行說明。


設計策略

iOS技術(iOS Technologies)--介紹了集成到iOS系統內的一些軟硬件技術,方便在設計開發功能時加以利用。

關于iOS技術,個人認為只需要了解就可以了,在這里不做過多的贅述。

UI元素簡介(UI Elements)--介紹iOS系統中的每個UI元素(交互控件)的使用方式和注意事項。在了解了這些UI元素后,設計者會更加了解系統提供了哪些設計元素,以便于提高開發效率和統一視覺、交互體驗。也能很好的限制住設計師們野馬一樣的思維。

UI元素

圖標與圖像設計(Icon and Image Design)--介紹了iOS系統對于圖標和圖像的設計的一些要求和注意事項。


圖標和圖像設計

※ 以上思維導圖請到我的個人公眾號“產品范兒”(MobileGuideline)中下載。

預告:Android設計規范思維導圖正在整理中,敬請期待。

iOS App設計原則

iOS的整體設計原則,在規范的第一章已經清楚的說明:

1,設計要服從于功能(或內容)

設計是為了更好的讓用戶使用功能、閱讀內容,決不能為了追求設計上的完美而犧牲了功能的使用體驗。

在規范中舉了一個非常恰當的例子,比較兩個計算器的設計:設計更完美、更炫目的計算器給用戶帶來的確是非常糟糕的使用體驗。而相對來說更簡潔直觀的設計,則是經過無數次迭代蘋果的設計師們最終選擇的版本。

2,更加清晰明了的呈現UI

首先,頁面的設計要突出重點:聚焦核心功能的呈現,巧妙并適當的加入修飾元素。

其次,細節的設計要清晰的展現:文字內容在各個尺寸的屏幕中都清晰的顯示,圖標的設計要精確和明晰的表現出其代表的功能,顏色的運用要突出主題并盡可能干凈、純粹,使用無邊框按鈕以突出功能。

3,利用層次感和動效為設計增添活力

視覺上的層次感、貼近自然的動畫效果可以讓用戶便于理解并得到愉悅感。

利用層次可以表達出各UI元素間的層次關系,以及當前活動的狀態。

利用自然的動效可以增強用戶對交互邏輯的感知。

iOS App設計要點

樣式

iOS設計規范建議的App設計流程是這樣的:

① 去掉所有的UI修飾,只考慮核心功能以及功能間的關聯。
② 利用iOS的主題樣式來設計功能的UI,完善細節設計。
③ 確保設計出的UI適配各種設備以及各種操作模式。

其中提到的iOS的主題樣式,指的是利用iOS系統提供的UI元素(控件)的樣式來設計。這樣設計的好處是:
· 保證了你的應用的交互體驗與iOS原生應用的體驗的一致性,用戶使用起來沒有學習障礙。
· 利用系統UI元素實現App,更便于與開發溝通,而且程序開發起來非常的方便,效率高并且錯誤率低。

所以,熟讀“UI元素”這章的內容,是每個設計者和開發者的必要工作。

App生命周期

生命周期這個詞是來源于Android設計規范,iOS沒有特別的強調這個概念。而理解整個App的生命周期對于App的設計來說確非常關鍵。

整個生命周期可以理解為這個過程:

啟動 -> 前臺運行 -> 退出 -> 后臺運行 -> 后臺終結(內存釋放)?

iOS系統的內存釋放機制在設計規范里面沒有體現,因為這個算法也在不斷的優化沒有必要讓過多的人了解。但是需要我們熟知的是:在點擊Home鍵返回桌面時,程序從前臺切換到后臺,此時要記錄當前畫面的流程狀態和必要的信息以便下次回到應用恢復。這個過程在設計時就要考慮清楚。

布局

iPad的自適應布局方式主要是利用AutoLayout(一種自適應布局的程序實現方法)和“常規”與“緊湊“兩種尺寸類別來定義的。

利用AutoLayout實現的屏幕布局,會在不同設備的屏幕尺寸下選擇不同的尺寸類別,以達到在該設備下的最佳顯示效果。具體的適配方式如下圖:

利用這種自適應布局方式,可以讓程序開發(以及UI設計)對應多屏幕布局變得更加容易,更加高效。從顯示效果上講,也更加協調并保證了一致性。下面以印象筆記為例,看下自適應布局的效果。

在對應Pad版布局時,利用了UI元素中的Split View Controller,將不同層級的兩個內容視圖同時顯示出來,以提高大屏幕的使用效率。

顏色

App設計時應選擇使用那些看起來更具個性的、純粹、干凈的顏色,并輔以或亮或暗的背景組合。同一主色應貫穿整個App,根據功能的不同,可以選擇另一種顏色作為強調色。

設計顏色時要考慮:
·?如果你要創建多樣的自定義顏色,要確保它們能夠和諧共存
·?當你使用自定義的欄顏色時,著重考慮半透明的欄和應用內容
·?考慮選擇一種基準色顏色來表征交互性與狀態
·避免同時對交互控件和非交互控件使用同一顏色
·色彩可以向用戶傳達信息,但不一定會以你希望的方式(種族、文化、生活習慣對顏色的看法不同)
· 不能讓顏色喧賓奪主,讓用戶分心

字體

在iOS9之后,San Francisco成為了系統默認字體。基于San Francisco的動態字體(Dynamic Type )可以實現:
· 為用戶提供最易辨認、體驗最好的不同大小的字號。
· 能自動調整文字的粗細,字母間距以及行高。
· 為語義上有區別的文本模塊指定不同的文本樣式,比如正文、腳注或者標題。
· 隨著用戶調整文字屬性,文本可以動態的進行調整響應。

設計時還要考慮:
· 根據內容的輕重緩急來響應用戶調整文本尺寸的變化
·?通常情況下,應用中整體應該使用單一字體
· 確保自定義字體在所有的樣式和尺寸時都是清晰的。

動畫

動畫效果不僅能夠給用戶帶來震撼的視覺體驗,合適的動效還可以達到以下的目的:
1,傳達當前的狀態和提供反饋。
2,增強操作感。
3,幫助用戶直觀的了解到其動作的結果。

設計動效時還要考慮:
· 動效的設計是為了突出功能,不要喧賓奪主、不要過度使用動效耗費性能、不要在價值不高的動效上花費更多的開發工作量。
· 盡量利用系統動畫,系統默認的動畫可以為App提供與iOS系統的動效一致性的體驗,隨意修改往往會出現違和感。如果自定義動效,也盡可能與系統動畫的樣式相匹配。
· 在同一App中動效要保持一致。


最后,建議大家收藏iOS 人機交互指南官網地址,在每次iOS版本更新或新機型發售時,該指南都會有所更新。

iOS Human Interface Guidline

如果有需要本文中的思維導圖以及中文版設計規范全文,請私信我或關注我的微信公眾號“產品范兒”(MobileGuideline)下載。


本文由 @周博文 原創發布于簡書,未經許可,禁止轉載。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,106評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,441評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,211評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,736評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,475評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,834評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,829評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,009評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,559評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,306評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,516評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,038評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,728評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,132評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,443評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,249評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,484評論 2 379

推薦閱讀更多精彩內容