為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