關(guān)于iOS 7設(shè)計(jì)師需要知道的一些事
iOS 7的改變不僅影響到了開發(fā)者,也影響到app設(shè)計(jì)師,比如沒有邊框的按鈕,半透明的下拉展示以及完全不同的icon,那么app設(shè)計(jì)師需需要關(guān)注哪些方面 以快速適應(yīng)全新的iOS 7呢?設(shè)計(jì)師不得不從頭開始學(xué)習(xí)iOS 7以確保他們的app能符合蘋果新的設(shè)計(jì)指南。同時(shí),開發(fā)者也需要認(rèn)真學(xué)習(xí)iOS 的新功能,比如Siri, Maps, AirPlay以及其他。
以下是iOS 7設(shè)計(jì)方面的主要更改,以及如何執(zhí)行的相關(guān)建議。
與之前的版本相比,iOS 7的UI變化主要體現(xiàn)在九個(gè)方面:
1.更加扁平化的設(shè)計(jì)
iOS 7 UI最大的改變時(shí)扁平化的設(shè)計(jì)。扁平化設(shè)計(jì)一詞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺效果,從而打造出一種看上去更“平”的界面。扁平風(fēng)格的一個(gè)優(yōu)勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來,減少認(rèn)知障礙的產(chǎn)生。
從上邊的對(duì)比圖中可以看出,iOS 7原生的應(yīng)用圖標(biāo)邊框已經(jīng)沒有了iOS 原生應(yīng)用icon邊框的厚重感,整體上更為輕薄。各花入各眼,雖然不少用戶并不喜歡iOS 7的這種設(shè)計(jì)風(fēng)格,但也有不少人覺得顛覆了以往的風(fēng)格,是個(gè)不錯(cuò)的改進(jìn)。
2.字體
iOS 7使用了更加輕薄,更加扁平化的Helvetica Neue UltraLight字體(Helvetica的變體)。
3.Icon
Icons的改變最為明顯,去除了iOS 6厚重、明顯的邊框,同時(shí)icon還可以根據(jù)不同設(shè)備(iPhone和iPad)和不同顯示模式(橫屏和豎屏)調(diào)整大小。
4.色彩
為了適應(yīng)更加扁平化的設(shè)計(jì)風(fēng)格,蘋果把原色配色方案更改為藍(lán)色、紅色、白色以及黑色等。
5.無邊框
按鈕方面的改變?nèi)泽w現(xiàn)在無邊框的設(shè)計(jì)上,整體上看起來像是浮在背景上。
6.圖層
新的UI布局允許你在app一個(gè)屏幕中展示不同的圖層,所以你可以通過排列布局navigation view、tab bar view以及custom view hierarchy,從而創(chuàng)建一個(gè)非常酷的界面。圖層也有助于使用半透明的設(shè)計(jì)。
7.半透明
如果你需要在app中使用下拉通知菜單,那么iOS 7將會(huì)允許用戶看到菜單背后大致的顏色。
8.手勢
iOS 7允許設(shè)備跟蹤你的動(dòng)作,而這將鼓勵(lì)那些富有創(chuàng)新精神的開發(fā)者創(chuàng)造全新的用戶界面。
9.狀態(tài)欄和菜單
按照iOS 7新的扁平化設(shè)計(jì)、極簡風(fēng)格以及配色方案,菜單、控件、導(dǎo)航以及狀態(tài)欄在設(shè)計(jì)方面也會(huì)有很大的不同。
新的UIKits
如果你是為iOS 7而設(shè)計(jì),有三樣資源是你經(jīng)常會(huì)用到的:UIKit Dynamics、Text Kit以及Xcode 5的新功能。
UIKit Dynamics可以通過把真實(shí)世界里的用戶行為融入iOS app,從而提升用戶體驗(yàn)。最初對(duì)dynamics的理解有點(diǎn)吃力,不過它真的是iOS 7界面元素中非常有意思的一部分。
Text Kit:iOS 7中,Text Kit最偉大的一面是它允許設(shè)計(jì)師使用極少的代碼配置文本,不像以前的iOS版本,需要很多代碼才能實(shí)現(xiàn)。Text Kit為文本處理提供了一個(gè)高水平的框架,能夠?qū)⑽谋緝?nèi)容按照段落、列和頁進(jìn)行布局。圍繞對(duì)象(比如圖片),允許設(shè)計(jì)師進(jìn)行編輯、展示、保存以及創(chuàng)建文 本。
升級(jí)你的app設(shè)計(jì)
iOS App Store中超過90萬的應(yīng)用都是為iOS 6或者以前的版本設(shè)計(jì),如果你的app也在其中,那么是時(shí)候升級(jí)你的app設(shè)計(jì)了。這一點(diǎn)Xcode 5可以有所幫助。
如果你選擇使用蘋果標(biāo)準(zhǔn)的iOS準(zhǔn)則創(chuàng)建按鈕、菜單以及其他簡單的功能,那么Xcode的Auto Layout功能會(huì)自動(dòng)為你進(jìn)行更新。
如果沒有使用Auto Layout,那么好吧,手動(dòng)更新你的自定義設(shè)計(jì)元素吧!
你也可以采用更為綜合的方法,讓蘋果負(fù)責(zé)為你更新一些簡單的自定義的內(nèi)容。
蘋果強(qiáng)調(diào),每個(gè)iOS 7 app需要做三件事:更新icon(120 x 120 pixels),更新app啟動(dòng)圖片以及所有圖片應(yīng)該支持視網(wǎng)膜顯示屏。
蘋果建議(沒有強(qiáng)制)所有的app采用半透明的用戶界面元素,重新設(shè)計(jì)自定義欄,更新背景圖片以支持無邊框的按鈕,還有一點(diǎn)采用UIKit的“dynamic type”。
對(duì)蘋果來說,針對(duì)iOS 7進(jìn)行設(shè)計(jì)非常重要,有助于保持App Store中的app有著一致的外觀和體驗(yàn)。
蘋果提供了三個(gè)指南需要記住:
Deference:UI是用來幫助用戶理解app,與內(nèi)容之間進(jìn)行交互,但UI和內(nèi)容之間并不沖突。
Clarity:各種尺寸的文字均非常易讀,icon精確清楚,裝飾物巧妙合適,以功能驅(qū)動(dòng)設(shè)計(jì)。
Depth:視覺富有層次,通過視覺的層次感和動(dòng)畫來展現(xiàn)生命力,讓用戶感到愉悅。
這些是初級(jí)設(shè)計(jì)師在設(shè)計(jì)新的app或者更新app時(shí)候需要考慮的,在你開始動(dòng)手前要確保你已經(jīng)熟悉了蘋果在這方面的要求和相關(guān)規(guī)則。