[譯]iOS 9 人機界面指南(1-1)-為iOS設計

為iOS設計

iOS體現了以下三大設計原則:

  • 順從: UI幫助用戶更好地理解內容并與之進行交互,但并不會喧賓奪主粘勒。

  • 清晰: 各種尺寸的文字都應該清晰易讀庙睡,icon都精確易懂技俐, 修飾適當就行雕擂,突出重點功能井赌,并以此驅動設計贵扰。

  • 深度: 視覺的層次感和生動逼真的交互動效賦予了界面活力戚绕,便于用戶更好地理解功能,同時也提升了用戶在使用過程中的愉悅感耘子。


不論你是在重新設計一款現有移動應用谷誓,還是開發(fā)一款全新的片林,請從以下幾方面考慮設計:

首先端盆,透過UI看清這款應用的核心功能,并明確它們之間的相互關聯焕妙。

接下來焚鹊,使用iOS主題特征來定義UI和用戶體驗設計。完善細節(jié)研叫,適當修飾但不要無緣無故添加嚷炉。

最后探橱,確保讓你設計的UI適配不同的設備和操作模式,這樣用戶就能夠在盡可能多的場景下享受你的應用了哗讥。

在整個過程中,要隨時準備著推翻先例魏宽,質疑各種假設湖员,并讓功能和內容作為重點來推動每項設計決策瑞驱。

設計跟隨內容

盡管清新漂亮的UI和流暢的動效是iOS用戶體驗的亮點唤反,但用戶內容才是iOS的核心。

以下方法可以確保你的設計功能體驗提升肠缨,并使設計聚焦于內容:

充分利用整個屏幕:iOS系統(tǒng)天氣應用是這種方式的一個極佳例子晒奕。用漂亮的全屏描述當地目前的實時天氣狀況名斟,直觀地傳遞了最重要的信息砰盐,同時也留下空間來顯示每個時段的天氣數據。

重新考慮(減少使用)擬物化設計:遮罩囊骤、漸變和陰影有時會使UI元素顯得更加厚重也物,可能會影響用戶對內容的關注滑蚯。相反作彤,應該更多關注內容本身乌逐,讓UI來作為襯托內容的配角浙踢。

用半透明的UI元素來隱射其背后的內容:半透明元素(比如控制中心)提供了上下文的使用場景洛波,幫助用戶看見更多可用的內容蹬挤,并起短暫的提示作用焰扳。在iOS系統(tǒng)中误续,半透明元素只會使其正下方的內容模糊(看上去像是蒙上了一層糯米紙),并不會讓屏幕其他部分也變模糊育瓜。

確保清晰

保證清晰度躏仇,是另一種來確保你的移動應用內容為核心的方式焰手。下面是一些讓最為重要的內容和功能清晰可見菇晃,并且易于交互的方式:

使用大量留白:留白使重要的內容和功能更加醒目磺送,并且更容易被理解估灿。留白也可以給人一種平靜安詳的感覺缤剧,使這個應用看起來重點更突出、更高效汗销。

讓顏色來簡化UI:一種主題色(如系統(tǒng)便簽的黃色)弛针,高亮顯示了重要區(qū)域的信息,同時也巧妙地表達了可交互性宙枷。主題色同時也讓一項應用擁有一致的視覺主題慰丛。系統(tǒng)應用使用一同色系純凈的系統(tǒng)色瘾杭,這樣在深色或淺色背景下都看起來不錯。

通過使用系統(tǒng)字體來確保易讀性:San Francisco (iOS系統(tǒng)字體)使用動態(tài)類型來調整字符間距及行高睬隶,以確保文字在任何尺寸下都清晰易讀 苏潜。不論你是使用San Francisco 還是其他自定義字體恤左,都要確保適應動態(tài)類型搀绣,這樣你的應用就可以在選擇不同尺寸字體時自動作出響應。

使用無邊框按鈕:默認情況下巧鸭,所有的按鈕都是無邊框的纲仍。在內容區(qū)郑叠,無邊框按鈕使用文案明棍、顏色和操作指引來表明其可交互性。當按鈕被激活時沸版,文案區(qū)域按鈕會出現一圈細的外邊框视粮,或是淺色的背景來作為操作響應。

使用深度層次來進行交流

iOS通常會在不同深度層次展現內容蟹腾,以此來傳遞層級和位置信息娃殖,這樣可以幫助用戶更好地理解屏幕上各個對象之間的關系议谷。

在支持 3D Touch的設備上,卧晓,輕壓(peek)、重壓( pop)以及快捷操作(quick actions)能讓用戶在不離開當前內容的情況下預覽其他重要功能郁稍。

通過使用半透明背景和浮動出現在主屏幕上方的方式耀怜,文件夾將其內容和屏幕其余部分區(qū)分開來桐愉。

提醒事項(Reminders) 如下圖从诲,以不同層級來展示內容列表。當用戶操作一項清單俊性,其余的清單就會在屏幕底部堆疊聚集起來碎罚。

日歷(Calendar)使用了較強的過渡荆烈,以便用戶在翻閱年憔购、月、日時有一種層級縱深感导绷。在滾動瀏覽年份時屎飘,用戶可以隨時看見今天的日期同時也可以執(zhí)行其他日歷任務钦购。

當用戶選擇了某一月份押桃,該年的視圖被放大直到顯示這一月的視圖。目前的日期仍然保持高亮顯示羡忘,年份標志出現在左上角的返回按鈕處磕昼,這樣用戶就能很直觀地知道當前的具體位置——從哪進入、如何返回漫雕。

選擇某一天時蝎亚,也會出現相似的過渡場景:月份視圖縱向分開发框,將當前周在內容區(qū)置頂煤墙,并顯示選中日期以小時為單位的軸視圖。通過一系列交互動效铣减,日歷應用增強了年脚作、月缔刹、日之間的層級關系校镐。


原文鏈接:iOS Human Interface Guidelines
翻譯參考:ISUX

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末鸟廓,一起剝皮案震驚了整個濱河市引谜,隨后出現的幾起案子擎浴,更是在濱河造成了極大的恐慌,老刑警劉巖退客,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萌狂,死亡現場離奇詭異,居然都是意外死亡误趴,警方通過查閱死者的電腦和手機务傲,發(fā)現死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門售葡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人楼雹,你說我怎么就攤上這事尖阔。” “怎么了谴供?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵桂肌,是天一觀的道長。 經常有香客問我轴或,道長仰禀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任饺蚊,我火速辦了婚禮污呼,結果婚禮上包竹,老公的妹妹穿的比我還像新娘。我一直安慰自己周瞎,他們只是感情好声诸,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布彼乌。 她就那樣靜靜地躺著,像睡著了一般慰照。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上稚铣,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天榛泛,我揣著相機與錄音曹锨,去河邊找鬼。 笑死沛简,一個胖子當著我的面吹牛,可吹牛的內容都是我干的椒楣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼捧灰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了炭庙?” 一聲冷哼從身側響起焕蹄,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤阀溶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后银锻,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡腐碱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年症见,在試婚紗的時候發(fā)現自己被綠了谋作。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乎芳。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡奈惑,死狀恐怖,靈堂內的尸體忽然破棺而出寂殉,到底是詐尸還是另有隱情原在,我是刑警寧澤彤叉,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布秽浇,位于F島的核電站柬焕,受9級特大地震影響,放射性物質發(fā)生泄漏击喂。R本人自食惡果不足惜碰辅,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沸柔。 院中可真熱鬧,春花似錦会钝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽掸读。三九已至,卻和暖如春澡罚,著一層夾襖步出監(jiān)牢的瞬間肾请,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工催式, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人管呵。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓捐下,卻偏偏與公主長得像萌业,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子婴程,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容