為 iOS 7 所設(shè)計(jì)的用戶界面
iOS7 體現(xiàn)了以下主題:
- 尊重。UI幫助用戶理解內(nèi)容,并與之交互,但是不會喧賓奪主。
- 清晰。所有尺寸的文字都能輕松識別,圖標(biāo)精確清楚,裝飾巧妙而適當(dāng),促使設(shè)計(jì)更為注重功能。
- 深度。視覺層面和實(shí)時(shí)動畫賦予應(yīng)用活力,并提高用戶的理解和喜愛程度。
iOS7的天氣預(yù)報(bào)
iOS6的天氣預(yù)報(bào)
不論你是在重新設(shè)計(jì)一個(gè)現(xiàn)有的APP還是在開發(fā)一個(gè)新的,都可以參考蘋果公司重新設(shè)計(jì)內(nèi)置APP的方式:
- 首先,舍棄暴露APP的核心功能的UI,并重申其關(guān)聯(lián)性。
- 接下來,將iOS7的主題貫穿于UI設(shè)計(jì)和用戶體驗(yàn)中。用心設(shè)計(jì)細(xì)節(jié)和裝飾。
- 整體上,準(zhǔn)備好推倒重來,問題假設(shè),關(guān)注內(nèi)容和功能,并以此來驅(qū)動每一個(gè)設(shè)計(jì)決定。
讓位內(nèi)容
盡管輕快優(yōu)美的UI和流體般的運(yùn)動元素大大增加了IOS 7的用戶體驗(yàn),但是app應(yīng)用所提供的用戶內(nèi)容才是重中之重。
這兒有一些方法,可以幫助你設(shè)計(jì)出促進(jìn)了應(yīng)用的功能和讓位應(yīng)用的用戶內(nèi)容的優(yōu)秀設(shè)計(jì)。
充分利用整塊屏幕. 從新審視嵌入的視圖和整體的視圖結(jié)構(gòu)的分別。讓應(yīng)用的內(nèi)容延伸到屏幕的邊緣。上面的天氣應(yīng)用就是個(gè)很好的例子:那個(gè)全屏顯示的優(yōu)美背景,顯示了當(dāng)前時(shí)間本地天氣狀況,直入主題,大氣地展現(xiàn)了最重要的信息,并且為顯示每小時(shí)的天氣信息提供了充足的空間。
重新審視擬物化的視覺指標(biāo). 斜面,梯度,和陰影效果有時(shí)會導(dǎo)致UI元素比重過大,甚至超過內(nèi)容或者和內(nèi)容產(chǎn)生競爭。事實(shí)上,關(guān)注點(diǎn)應(yīng)該在于內(nèi)容,UI起到一個(gè)輔助作用。

用半透明化的UI元素暗示背后的內(nèi)容. 半透明的元素--如控制中--用于提供一個(gè)控制環(huán)境,幫助用戶看到盡可能多的內(nèi)容,還可以得知應(yīng)用的狀態(tài)。在IOS 7中,半透明元素只會模糊元素后的內(nèi)容--有種透過米紙的效果--半透明元素不會模糊元素沒有覆蓋到余下屏幕。
提供清晰的顯示
提供清晰的顯示是另外一種確保內(nèi)容在你應(yīng)用中的重要地位的方式. 這里是一些能使最重要的內(nèi)容和功能明晰且易于訪問的方法.
使用大量的留白. 留白使得重要內(nèi)容和功能更加醒目,且更容易理解. 留白也可以表達(dá)出平靜安寧的感覺, 而且它也可以使得一個(gè)應(yīng)用看起來更加的專注和高效.
使用顏色來簡化 UI. 使用一種關(guān)鍵顏色—比如重要提示使用的黃色—突出顯示重要的區(qū)域并且巧妙的展現(xiàn)交互性功能. 這也同樣能賦予一個(gè)應(yīng)用統(tǒng)一的視覺主題. 內(nèi)置應(yīng)用都使用一類純凈系統(tǒng)顏色,不管是在明的或是暗的背景之上,其每一個(gè)色調(diào)都看起來不錯.

通過使用系統(tǒng)字體來確認(rèn)其可讀性. iOS 7系統(tǒng)字體對字間距和行高都對進(jìn)行自適應(yīng),因此顯示的文本能很輕松的被閱讀,而且在每一個(gè)字體大小上都看起來很好. 不管你是使用系統(tǒng)的或是自定義的字體,請確保使用上了動態(tài)類型,以便你的應(yīng)用能夠在用戶選擇不同的文字大小時(shí)都能有所響應(yīng).
擁抱無邊框按鈕. 在iOS 7中, 所有的條狀按鈕都是沒有邊框的. 在內(nèi)容區(qū)域, 一個(gè)無邊框按鈕使用背景,顏色和具有號召性的標(biāo)題來體現(xiàn)其可交互性. 而當(dāng)其被使用時(shí),內(nèi)容區(qū)域的按鈕可以顯示一個(gè)細(xì)邊框或者淺色背景來使得自己與眾不同.

使用層次上的深度來進(jìn)行溝通
iOS 7經(jīng)常使用不同的層來展現(xiàn)內(nèi)容,以傳達(dá)層次和位置的不同, 那樣就可以幫助用戶理解存在于屏幕上的對象之間的關(guān)系.
通過使用半透明的背景,并且在主屏幕上以浮動的效果出現(xiàn),文件夾就可以將其內(nèi)容與屏幕的其它部分區(qū)分開來.
像這里所展示的,提醒應(yīng)用在層里面展示列表. 當(dāng)用戶在一個(gè)列表上操作時(shí),其它列表在屏幕的底部被集中在一起.

日歷使用了增強(qiáng)的轉(zhuǎn)換,當(dāng)它們在被查看其年、月以及日份時(shí),就可以給用戶一種層次和深度感. 這里所展示的年視圖中, 用戶可以即時(shí)地看到今天的日期,并同時(shí)對其它日歷任務(wù)進(jìn)行操作.
當(dāng)用戶選擇一個(gè)月份時(shí),年視圖會放大并顯示出月視圖. 今天的日期仍然高亮顯示并且年份會顯示在返回按鈕中, 以便用戶知曉他們目前的確切位置,來自哪里,還有從哪兒回到過去.

類似的過渡效果會發(fā)生在用戶選擇一天的時(shí)候: 月視圖看上去裂開了,將當(dāng)前的星期推上屏幕的頂部并揭開顯示出選定天的每小時(shí)視圖. 每一種過渡, 日歷都加強(qiáng)了年、月以及日之間的層次關(guān)系.