關(guān)于iOS7,設(shè)計(jì)師需要了解的十件事
40度的高溫天氣仍在持續(xù),不知將來(lái)自己回頭看到現(xiàn)在寫的這些能不能感覺(jué)到這種熱到麻木甚至絕望的天氣,還有整個(gè)夏天所經(jīng)歷的這些東西。環(huán)境所帶來(lái)的某種極致而持續(xù)的感受往往讓人覺(jué)得眼前的東西不那么真實(shí),讓人想睡去。
算上這次,就是連續(xù)三周的iOS7話題了。目前已經(jīng)到了Beta5;等天氣涼快一些的時(shí)候,便會(huì)正式發(fā)布了;大家早晚都要做起來(lái)的事情,多了解一些作為基礎(chǔ)是有必要的。讓我很詫異的是,時(shí)至今日,那些在平日里需要接觸及配合的一些程序員們,甚至還沒(méi)親眼看過(guò)親手操作過(guò)iOS7,甚至?xí)J(rèn)為那些半透明控件只是網(wǎng)上流傳的概念稿當(dāng)中的花拳繡腿。那,微博上的很多朋友都了解,一旦說(shuō)起程序員的話題,我蠻容易收不住的;這事不是這里的重點(diǎn),其實(shí)根本也不值得提及。還是說(shuō)正經(jīng)的吧。
這里進(jìn)入譯文。在今年的WWDC上,蘋果推出了采用全新設(shè)計(jì)語(yǔ)言打造的iOS7。新系統(tǒng)棄用了諸如皮革、木質(zhì)一類的偽3D擬真效果,取而代之的是更加簡(jiǎn)潔輕量的設(shè)計(jì)路線,其中文字排版成了重頭戲,另外在某些方面也受到了扁平化設(shè)計(jì)的影響。
對(duì)于負(fù)責(zé)打造iOS應(yīng)用界面的設(shè)計(jì)師們來(lái)說(shuō),長(zhǎng)久以來(lái)的設(shè)計(jì)習(xí)慣和規(guī)則即將被改變。在iOS7的這些變化當(dāng)中,哪些與設(shè)計(jì)師們最為相關(guān)?蘋果公司在轉(zhuǎn)變了自身的設(shè)計(jì)思維之后,又會(huì)希望我們這些應(yīng)用設(shè)計(jì)者們將哪些新東西體現(xiàn)到自己的應(yīng)用當(dāng)中?
我們分析了蘋果的iOS7 UI過(guò)渡指南,并從中挑選出了設(shè)計(jì)師們需要知道的最重要的10條設(shè)計(jì)方面的變化。希望你能通過(guò)本文了解到iOS7的這些新特性將會(huì)怎樣影響到你的內(nèi)容呈現(xiàn)方式。
1.三大設(shè)計(jì)主題
根據(jù)蘋果官方的設(shè)計(jì)規(guī)范,設(shè)計(jì)師們需要遵守三點(diǎn)最核心的設(shè)計(jì)主題:
- 依從:UI要幫助用戶對(duì)內(nèi)容進(jìn)行理解和互動(dòng),但絕不能與內(nèi)容產(chǎn)生競(jìng)爭(zhēng)關(guān)系。
- 清晰:任何字號(hào)的文字都要清楚易讀,圖標(biāo)要精細(xì)且含義明確,裝飾性元素要少而精,且使用得當(dāng);聚焦于功能性的實(shí)現(xiàn),并以此激發(fā)設(shè)計(jì)的進(jìn)行。
- 縱深:視覺(jué)外觀的層次以及逼真的動(dòng)畫效果可以傳達(dá)出界面的活力,使界面更容易被理解,并提升用戶的愉悅度。
蘋果希望你在設(shè)計(jì)應(yīng)用的界面和交互模式時(shí)密切關(guān)注這些設(shè)計(jì)主題,特別是“依從”。它著重強(qiáng)調(diào)了怎樣使設(shè)計(jì)更好地支持內(nèi)容,而不是反過(guò)來(lái)壓制內(nèi)容。
可以看看蘋果是怎樣在iOS7內(nèi)置的日歷應(yīng)用當(dāng)中貫徹這一點(diǎn)的。新的日歷應(yīng)用在界面上極大的簡(jiǎn)化了,去除了一切不必要的設(shè)計(jì)元素,并使用了干干凈凈的白色背景,完全以內(nèi)容為中心。
2.動(dòng)態(tài)字體
iOS7使用了全新的動(dòng)態(tài)字體系統(tǒng),以改善文字內(nèi)容在任何字號(hào)下的易讀性。
動(dòng)態(tài)字體可以自動(dòng)調(diào)整任何字號(hào)下的文字粗細(xì)、字間距和行距。它同時(shí)支持字體風(fēng)格,使你能夠?yàn)閮?nèi)容標(biāo)題、正文和按鈕當(dāng)中的文字設(shè)置不同的樣式。
新的天氣應(yīng)用為我們展示了新的字體以及清晰的文字排版在使用了動(dòng)態(tài)背景的全屏視圖當(dāng)中的表現(xiàn)。
3.導(dǎo)航元素的半透明化
iOS7當(dāng)中最重要的設(shè)計(jì)變化之一就是在界面中引入了透明與半透明化。
狀態(tài)欄(status bar)能夠以完全透明的形式呈現(xiàn),導(dǎo)航欄(navigation bar)、標(biāo)簽欄(tab bar)、工具欄(tool bar)和其他一些控件也采用了半透明化的處理方式。因此,你可能需要調(diào)整內(nèi)容視圖在縱向上的實(shí)際尺寸,以便在半透明控件的下方將內(nèi)容上下文隱約地展示給用戶。
另外你也要考慮到全新的控制中心(control center),用戶可以在這里快速訪問(wèn)到一些常用功能,例如開(kāi)啟藍(lán)牙、調(diào)整屏幕亮度等等??刂浦行氖且环N模態(tài)視圖(modal view),它會(huì)隨著用戶的手勢(shì)從屏幕底部向上展開(kāi),并覆蓋在系統(tǒng)界面或當(dāng)前應(yīng)用界面之上;用戶可以透過(guò)其半透明毛玻璃背景看到下方界面中的內(nèi)容環(huán)境。
4.按鈕去掉了邊框
iOS7里的按鈕不再有邊框和背景。這使得按鈕中的標(biāo)題文字可以使用相對(duì)大一些的字號(hào),但對(duì)于那些經(jīng)過(guò)自定義設(shè)計(jì)的按鈕來(lái)說(shuō),你需要重新考慮它們的樣式能否適用于新的系統(tǒng)風(fēng)格。
蘋果在iOS7當(dāng)中加入了右滑切換界面的手勢(shì)。切換過(guò)程中,導(dǎo)航欄會(huì)展現(xiàn)出精巧的界面覆蓋疊加效果。如果你為導(dǎo)航欄中的按鈕使用了自定義設(shè)計(jì)的背景圖片,那么現(xiàn)在你需要?jiǎng)?chuàng)建一個(gè)蒙版圖片來(lái)確保這種動(dòng)畫效果的實(shí)現(xiàn)。詳見(jiàn)iOS7 UI過(guò)渡指南之Bars and Bar Buttons一節(jié)。
iOS7的標(biāo)簽欄和工具欄也有了全新的外觀,對(duì)于其中的圖標(biāo),你可能需要重新繪制一套更簡(jiǎn)潔、更線條化的圖片了。
你可以在iOS7自帶的短信應(yīng)用當(dāng)中看到最官方的按鈕使用示例,包括導(dǎo)航欄中的新消息按鈕、返回到消息列表的按鈕、聯(lián)系人按鈕、發(fā)送按鈕等。
5.屏幕上更多的可用空間
透明的狀態(tài)欄,移除了左右邊距和邊框的界面,這些新風(fēng)格體現(xiàn)出蘋果正在鼓勵(lì)設(shè)計(jì)師們將界面中的內(nèi)容擴(kuò)展至屏幕邊緣。
例如系統(tǒng)鍵盤一類的模態(tài)視圖都采用了半透明的風(fēng)格,使得它們底部的內(nèi)容元素可以被用戶感知到,即使模糊不清,也可以傳遞出縱深的含義。系統(tǒng)內(nèi)置的天氣、照片和相機(jī)應(yīng)用都非常好的展示了怎樣使用全屏風(fēng)格展示內(nèi)容。
6.向擬物化說(shuō)不
根據(jù)“依從”原則所提倡的,蘋果在設(shè)計(jì)規(guī)范中進(jìn)一步強(qiáng)烈建議設(shè)計(jì)師們“避免仿真和擬物化的視覺(jué)指引形式”。用戶界面應(yīng)該是一種圍繞著內(nèi)容而存在的支持結(jié)構(gòu),不要喧賓奪主。
簡(jiǎn)單的說(shuō),這意味著蘋果不再愿意看到3D質(zhì)感的按鈕,以及漸變、投影等其他擬物化的設(shè)計(jì)元素,因?yàn)檫@樣的元素會(huì)導(dǎo)致“UI元素過(guò)重,以至于壓倒內(nèi)容”。
雖然交互元素要輕量化,但44像素的最小點(diǎn)擊區(qū)域規(guī)則依然有效,你不能寄希望于用戶能夠精準(zhǔn)的點(diǎn)擊到小于44像素見(jiàn)方的界面元素。
關(guān)于移除擬物化風(fēng)格的設(shè)計(jì)方式,可以參考iOS7內(nèi)置的Game Center、日歷和Podcast應(yīng)用。
7.通過(guò)深度傳遞層次
iOS7最吸引人的設(shè)計(jì)之一就是系統(tǒng)界面當(dāng)中由加速計(jì)驅(qū)動(dòng)的3D效果。隨著設(shè)備在物理空間當(dāng)中的移動(dòng),圖標(biāo)與背景圖片會(huì)展示出視差效應(yīng)。這是iOS7三大設(shè)計(jì)主題當(dāng)中的第三點(diǎn)的典型示例:
縱深:視覺(jué)外觀的層次以及逼真的動(dòng)畫效果可以傳達(dá)出界面的活力,使界面更容易被理解,并提升用戶的愉悅度。
自然,蘋果也希望應(yīng)用設(shè)計(jì)師們采用相同的方式,通過(guò)半透明及動(dòng)畫效果來(lái)展示界面和元素之間的層級(jí)關(guān)系。這是應(yīng)用設(shè)計(jì)理念的一次重大飛躍,而且隨著iOS7的發(fā)布和普及,這些效果很快就會(huì)成為用戶期望當(dāng)中的一部分。
8.從零開(kāi)始重新設(shè)計(jì)應(yīng)用
在iOS7設(shè)計(jì)規(guī)范當(dāng)中,蘋果建議,在iOS7框架下重新設(shè)計(jì)應(yīng)用的最佳方式,就是剝離你已有的界面,將應(yīng)用的核心功能呈現(xiàn)出來(lái),重新確認(rèn)它們之間的相關(guān)性。
一旦你確認(rèn)好功能方面的核心要素,就需要通過(guò)iOS7的設(shè)計(jì)主題將界面和交互模式重新構(gòu)建起來(lái)。舉個(gè)簡(jiǎn)單的例子,蘋果的指南針應(yīng)用采用了最小化和功能優(yōu)先的設(shè)計(jì)方式,通過(guò)重新設(shè)計(jì)過(guò)的、更注重細(xì)節(jié)的形式來(lái)展示關(guān)鍵信息。
9.大量的留白
iOS7的應(yīng)用界面通過(guò)大量的呼吸空間來(lái)確??勺x性和易用性。在官方的設(shè)計(jì)規(guī)范中,蘋果明確指出,他們希望設(shè)計(jì)師們通過(guò)留白傳達(dá)出平靜和穩(wěn)定的感覺(jué),使應(yīng)用看上去更加專注和高效。
不要將所有東西都緊緊的塞到界面當(dāng)中,通過(guò)留白讓你的內(nèi)容呼吸起來(lái)。你可以通過(guò)App Store等界面來(lái)看看蘋果自己是怎樣做的。
10.啟動(dòng)畫面out了
最后一點(diǎn)從技術(shù)角度上講不是新東西了,但在iOS7設(shè)計(jì)規(guī)范中,蘋果再次提醒設(shè)計(jì)師們,要避免使用那些無(wú)意義的、主要用來(lái)展示品牌信息的啟動(dòng)畫面,或是任何妨礙用戶使用應(yīng)用完成任務(wù)的界面。我們的目的是要用戶盡可能快速的獲取內(nèi)容或使用功能,所以除非你有充分的理由,否則不要使用歡迎界面。為了強(qiáng)調(diào)這一點(diǎn),蘋果專門拿計(jì)算器應(yīng)用做了一張演示圖片,來(lái)告訴我們不要這樣做。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!