|
轉(zhuǎn)自葛布林大帝的博客
四、聚焦于內(nèi)容 在iOS7里，強(qiáng)調(diào)的不是眼花繚亂的裝飾效果，而是最重要的內(nèi)容本身。
下面我們來(lái)探討這個(gè)主題：
1.刪除不必要的內(nèi)容
偉大的設(shè)計(jì)更多是減法和加法的組合。
雖然很酷的想法是很重要，但還有更重要的——?dú)⑺滥切┖芸岬南敕?，以保持?yīng)用程序的重點(diǎn)。
1.1.不再?gòu)?qiáng)調(diào)chrome
chrome是指您的應(yīng)用里不是內(nèi)容本身的一部分，如導(dǎo)航欄和標(biāo)簽欄。
iOS 7非常不建議使用chrome，有些應(yīng)用程序甚至?xí)透纱鄤h除它。如果想要還原chrome的設(shè)計(jì)，請(qǐng)考慮以下幾點(diǎn)：
1.1.1.chrome是需要的嗎？
仔細(xì)考慮，如果你真的在首頁(yè)使用chrome。是把它當(dāng)做導(dǎo)航？蘋(píng)果建議刪除所有chrome符號(hào)，從而使用戶(hù)單獨(dú)瀏覽內(nèi)容。
左右各一個(gè)按鈕的導(dǎo)航模式非常易于理解，而無(wú)需使用chrome。
下圖使用chrome作為導(dǎo)航：
 1.1.2.使用簡(jiǎn)單的背景
相比厚重的紋理，使用簡(jiǎn)單、透明的背景更能突出內(nèi)容，蘋(píng)果的毛玻璃效果就是一個(gè)非常好的例子。
蘋(píng)果試圖在iOS7里面使chrome的顏色和背景相同，用來(lái)確保chrome消失。但要記住，這樣做很可能產(chǎn)生相反的效果，因?yàn)樗鼤?huì)導(dǎo)致chrome在視覺(jué)上與內(nèi)容混合，讓人難以區(qū)分。當(dāng)chrome和內(nèi)容看起來(lái)是一樣的，他們就看起來(lái)同樣重要。消滅隱藏的chrome，也就是說(shuō)，chrome和背景的對(duì)比并不總是一件壞事。
請(qǐng)注意狀態(tài)欄是與導(dǎo)航欄融合的，這里以一種優(yōu)雅的方式融合了兩者：
 1.1.3.如果可能，隱藏chrome
思考一下，當(dāng)chrome不在使用狀態(tài)時(shí)，你可以隱藏它們。Safari就是一個(gè)很好的例子，它希望用戶(hù)可以強(qiáng)烈的專(zhuān)注于內(nèi)容，而不是為導(dǎo)航UI而分心。
iOS7的Safari在你下拉頁(yè)面時(shí)隱藏了chrome（左），當(dāng)你回到頁(yè)面頂部時(shí)才再次顯示chrome（右）：
 1.2.簡(jiǎn)化UI元素
在iOS 7里，你應(yīng)該質(zhì)疑每一個(gè)背景，紋理，陰影和邊框。這樣做是為了消除任何不必要的裝飾，使用戶(hù)可以專(zhuān)注于真正重要的元素。雖然裝飾可能是有用的，但節(jié)制使用它會(huì)使你的應(yīng)用在iOS7里更有家的感覺(jué)。
手機(jī)的界面往往是如此之小，任何額外的視覺(jué)重量，如漸變、邊框或逼真的細(xì)節(jié)都會(huì)吸引用戶(hù)太多的注意。因此，只有你非常確定時(shí)，再使用這些元素。
1.3.無(wú)邊框的按鈕
我最初得知蘋(píng)果要使用無(wú)邊框的按鈕時(shí)，第一個(gè)反應(yīng)是：不！然而，事實(shí)證明，無(wú)邊框按鈕在某些地方表現(xiàn)得的確漂亮，比如導(dǎo)航欄。
在簡(jiǎn)化的導(dǎo)航欄背景里，邊框只是擾亂視覺(jué)的元素，非常不必要。
許多按鈕和導(dǎo)航依然需要邊框，用來(lái)區(qū)分可交互元素和不可交互元素，如下圖：
 蘋(píng)果的按鈕一般使用透明背景表示未選中狀態(tài)，簡(jiǎn)單的顏色背景表示選定狀態(tài)。
你可以嘗試改變一些東西，比如邊框粗細(xì)、背景顏色、透明度、圓角半徑，或者為您的按鈕創(chuàng)造一個(gè)微妙的陰影和紋理。
1.4.用顏色來(lái)表示交互
蘋(píng)果用在一些場(chǎng)合用顏色的差異來(lái)表示交互，而無(wú)需使用按鈕周?chē)倪吙颉．?dāng)然，如果你的應(yīng)用中交互元素是非常明確的，則不需要使用顏色來(lái)區(qū)分。
在下圖中，紅色的Edit和 + 按鈕表示可以交互：
 1.5.最小化仿真細(xì)節(jié)和skeuomorphism（仿實(shí)物紋理）
 Skeuomorphism是設(shè)計(jì)師工具箱中的許多工具之一，它不會(huì)消失。你只需要探索在這種簡(jiǎn)約的環(huán)境里如何正確使用它。
 2.內(nèi)容為王
現(xiàn)在你已經(jīng)不再?gòu)?qiáng)調(diào)UI，那你怎么強(qiáng)調(diào)內(nèi)容呢？
2.1.使用整個(gè)屏幕
避免只有一幀的不必要UI元素，你應(yīng)該讓你的內(nèi)容始終處于舞臺(tái)中心。
2.2.內(nèi)容決定屏幕
下面的天氣應(yīng)用結(jié)合毛玻璃效果，創(chuàng)造了十分有感覺(jué)的效果，特別是根據(jù)內(nèi)容來(lái)決定不同的屏幕：
 2.3.增加視覺(jué)樂(lè)趣
iTunes Radio避開(kāi)華而不實(shí)的UI元素，為內(nèi)容本身增加點(diǎn)綴：
 五、聚焦于交互
應(yīng)用的設(shè)計(jì)即將經(jīng)歷一個(gè)方向上根本性轉(zhuǎn)變。此前，基于絢麗視覺(jué)效果的應(yīng)用可能會(huì)脫穎而出，但在iOS 7里，照片般逼真的按鈕將會(huì)從屏幕消失。
那么，如何在iOS7里脫穎而出？如何創(chuàng)建一個(gè)令人愉快應(yīng)用？總之，應(yīng)用設(shè)計(jì)的新模式將更少談?wù)撏庥^，而更多的談?wù)撌褂酶惺?。我認(rèn)為不再高度強(qiáng)調(diào)視覺(jué)效果的iOS7將引起交互設(shè)計(jì)領(lǐng)域的文藝復(fù)興。
簡(jiǎn)單的視覺(jué)效果更容易迅速創(chuàng)建新穎動(dòng)畫(huà)、過(guò)渡和互動(dòng)模式實(shí)驗(yàn)，簡(jiǎn)單的縮放和變形比處理紋理和斜面容易至少一千倍。
下圖中，左邊（iOS7）版本相比右邊（iOS7）使用了更簡(jiǎn)單的視覺(jué)效果：
 1. 魔法般的Touch
 Touch是神奇的：它讓你以為你操作的是物理對(duì)象，而不是移動(dòng)屏幕周?chē)南袼?。蘋(píng)果知道這個(gè)事實(shí)很好，這就是為什么第一個(gè)iPhone采用1:1的滾動(dòng)比例并運(yùn)用了彈跳效果。
計(jì)算機(jī)是冰冷的，但如果把計(jì)算機(jī)當(dāng)做一個(gè)進(jìn)入物理世界的窗口，用戶(hù)可創(chuàng)建友好的、熟悉的和身臨其境的體驗(yàn)。然而，任何滯后或者頓卡都會(huì)立刻打破幻想，結(jié)束魔術(shù)表演。
iOS7沒(méi)有丟棄仿真的細(xì)節(jié)？沒(méi)有，當(dāng)然沒(méi)有。在iOS7里，視覺(jué)上的仿真被淡化，而用戶(hù)交互和動(dòng)態(tài)物理效果上的仿真被加強(qiáng)。實(shí)際上，iOS7內(nèi)置了一個(gè)物理引擎來(lái)實(shí)現(xiàn)一個(gè)目的：創(chuàng)建一個(gè)感覺(jué)起來(lái)更真實(shí)的界面。
偉大的設(shè)計(jì)誕生時(shí)將更少使用Photoshop，更多使用Xcode和Quartz Composer。這些工具可以讓你去探索應(yīng)用給人的感受，而不僅僅是外觀。
2.直接操作
直接操縱屏幕上的對(duì)象，而不是點(diǎn)擊在一旁的按鈕，滾動(dòng)手勢(shì)、拖動(dòng)和捏住對(duì)象縮放都是直接操作的例子。
iOS7的照片沒(méi)有箭頭按鈕用來(lái)切換照片，自然的掃動(dòng)手勢(shì)完成了這一任務(wù)：
現(xiàn)實(shí)感的界面需要用戶(hù)操控對(duì)象，所以你需要把你的抽象功能整合到物理對(duì)象。例如，我的團(tuán)隊(duì)不得不思考，如何在一個(gè)時(shí)間管理應(yīng)用里表示時(shí)間？最后，我們把時(shí)間作為一個(gè)時(shí)間軸上的物理塊，這增強(qiáng)了它的可視化效果和操作靈活度：
3.物理仿真和動(dòng)畫(huà)
真遺憾蘋(píng)果的頁(yè)面只是簡(jiǎn)單的1：1滾動(dòng)，而不是我們熱愛(ài)的落差慣性和反彈力效果。直接同時(shí)操作與物理和動(dòng)畫(huà)，我們的目標(biāo)是使交互感受真實(shí)。
iOS 7的鎖屏將彈起不同的高度：
在未來(lái)，那些忽視物理仿真的應(yīng)用會(huì)很快讓人感到陳舊和停滯。UI設(shè)計(jì)師才剛剛開(kāi)始探索如何在用戶(hù)交互上使用物理仿真，我們這里有一些想法供你參考：
3.1.動(dòng)態(tài)
不要聯(lián)想數(shù)碼動(dòng)畫(huà)，而是思考物理原理。當(dāng)你在一個(gè)物理表面推動(dòng)一個(gè)球，它不會(huì)勻速到達(dá)終點(diǎn)。相反地，當(dāng)你推動(dòng)時(shí)它開(kāi)始加速，而摩擦力讓它減速直至停止。當(dāng)一個(gè)對(duì)象從10英尺落下時(shí)，反彈力比從2英尺落下更高，你的界面應(yīng)該具備相同的行為方式。幸運(yùn)的是，蘋(píng)果的新UIKit Dynamics API讓你實(shí)現(xiàn)這些動(dòng)態(tài)效果更為容易。
3.2.連續(xù)性
不要想著把每個(gè)屏幕當(dāng)做一塊完全的石板，而是思考一個(gè)Item如何從一個(gè)屏幕到達(dá)另一個(gè)屏幕，利用逼真的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)這些動(dòng)作，例如移動(dòng)、縮放和變形等等。
3.3.反彈力
它不只是滾動(dòng)。這取決于你賦予對(duì)象多大的彈性，反彈力可以添加一個(gè)有趣的觸摸。
4. 三維
諷刺的是，人們?cè)诤魡尽氨馄交钡牟僮飨到y(tǒng)應(yīng)該回到過(guò)去時(shí)，卻忽視iOS7包含了最立體的一切，例如斜面立體效果就讓人眼前一亮。iOS 7的三個(gè)主要指導(dǎo)原則之一是深度，深度可以采取一些形式：
4.1.3D效果
蘋(píng)果希望你利用三維效果為你的應(yīng)用增添有趣的視覺(jué)體驗(yàn)，比如用視差效果讓頁(yè)面區(qū)隔更加明確。
4.2.層次
傾斜你的iPhone ，你會(huì)看到桌面圖標(biāo)實(shí)際上并沒(méi)有坐在背景上 — 視差效果表明他們正漂浮著，而彈出的控制中心和磨砂玻璃效果使得控制中心位于所有圖標(biāo)之上。思考一下你的界面層次，并使用3D效果來(lái)明確用戶(hù)想使用的層次。
毛玻璃提供了一個(gè)微妙的層次感效果：
4.3.縮放用戶(hù)界面
我認(rèn)為一些最酷的用戶(hù)界面創(chuàng)新將來(lái)自這個(gè)縮放概念，并把它帶到夢(mèng)想不到的境界。
縮放界面存在于iOS7里：
5. 手勢(shì)和導(dǎo)航
一旦用戶(hù)學(xué)會(huì)適當(dāng)?shù)氖謩?shì)，可以在交互時(shí)更加有趣和便捷。
下圖為掃動(dòng)完成：
然而，一些功能可能無(wú)法很好地用手勢(shì)來(lái)完成，不自然的手勢(shì)很難記住并且沒(méi)有使用樂(lè)趣。另外，如果不是每天使用的話(huà)，用戶(hù)可能會(huì)忘記不熟悉的手勢(shì)。實(shí)驗(yàn)各種手勢(shì)讓用戶(hù)的手指變得敏感，但請(qǐng)不要隨意設(shè)計(jì)過(guò)于自由的手勢(shì)控制界面。
iOS7引入了一個(gè)新的模式：回掃（swipe to go back）。你可以點(diǎn)擊后退按鈕，但回掃明顯輕松了許多，尤其是在iPhone 5甚至以后更大的屏幕上。
下圖為回掃：
雖然手勢(shì)的設(shè)計(jì)是為了讓用戶(hù)使用更加方便，但鍵盤(pán)操作也應(yīng)該保留，用戶(hù)有權(quán)利選擇多種操作方式。
6. 個(gè)性
開(kāi)發(fā)者請(qǐng)站出來(lái)，您的iOS7應(yīng)用必須有一個(gè)獨(dú)特的和令人愉快的個(gè)性。美觀當(dāng)然很重要，但應(yīng)用的個(gè)性同樣至關(guān)重要！
為了增強(qiáng)應(yīng)用的個(gè)性，可以思考以下幾點(diǎn)：
6.1.音頻
音頻是一個(gè)巨大的的待開(kāi)發(fā)領(lǐng)地，里面有一些先驅(qū)者如Tapbots，誰(shuí)的應(yīng)用里包括細(xì)微的點(diǎn)擊和蜂鳴聲？
6.2.語(yǔ)言
誰(shuí)會(huì)想每天面對(duì)枯燥的文本？詼諧或幽默的語(yǔ)言是散發(fā)出個(gè)性的最佳途徑之一。
6.3.圖標(biāo)
用戶(hù)對(duì)您應(yīng)用的印象往往來(lái)源于圖標(biāo)。由于它生活在用戶(hù)的主屏幕上，價(jià)值如此巨大的圖標(biāo)應(yīng)得到精心設(shè)計(jì)，圖標(biāo)應(yīng)該體現(xiàn)出應(yīng)用的個(gè)性。
個(gè)性真的可以包含在所有的設(shè)計(jì)細(xì)節(jié)里，讓您的應(yīng)用變得偉大。從完善每一個(gè)像素、優(yōu)化每一次互動(dòng)、融合每一次體貼設(shè)計(jì)，再到賞心悅目的動(dòng)畫(huà)、詼諧的信息，這些都能讓您的應(yīng)用變得更加完美。
六、在App世界留下你的印記
“不要說(shuō)謊， iOS7已經(jīng)讓我很興奮的工作了，里面有非?？岬臇|西（至少我這么認(rèn)為） ?！? ---- Mark Jardine，Tweetbot的設(shè)計(jì)師
在這幾年的應(yīng)用設(shè)計(jì)里，iOS7的風(fēng)格可能最激動(dòng)人心。Marco Arment指出，App Store將再一次成為開(kāi)發(fā)者的沃土。這種激進(jìn)的設(shè)計(jì)轉(zhuǎn)變意味著，未來(lái)幾年將在各類(lèi)排名前列的應(yīng)用中看到新設(shè)計(jì)理念，這些應(yīng)用將深度尊重蘋(píng)果的新設(shè)計(jì)原則，創(chuàng)造出用戶(hù)前所未見(jiàn)的獨(dú)特UI界面。
而好消息在于，你可以創(chuàng)建這些應(yīng)用程序！雖然這并不容易，是的，競(jìng)爭(zhēng)會(huì)很激烈。但是，現(xiàn)在學(xué)會(huì)蘋(píng)果新設(shè)計(jì)理念的你，比以往擁有更多的機(jī)會(huì)創(chuàng)造一個(gè)偉大的應(yīng)用。來(lái)吧，在App世界里留下你的印記！
七、最后的挑戰(zhàn)
挑戰(zhàn)：重新設(shè)計(jì)這個(gè)程序！
下圖iOS 6上的一個(gè)應(yīng)用，它的形狀非常差，需要你的幫助。你的挑戰(zhàn)是運(yùn)用你已經(jīng)了解的設(shè)計(jì)知識(shí)（如對(duì)比、重復(fù)、對(duì)齊、接近、排版和蘋(píng)果的新設(shè)計(jì)理念）來(lái)拯救這個(gè)應(yīng)用，使它重新適配iOS7。
你有很多方式來(lái)開(kāi)始，你可以使用Xcode、Photoshop，或者干脆用一張紙和一些彩色鉛筆。在你開(kāi)始你的新設(shè)計(jì)之前，嘗試找出原設(shè)計(jì)的所有問(wèn)題，這里有一些提示：
·你是否注意到有對(duì)齊的任何問(wèn)題？
·是否相關(guān)的概念組合在一起？
·是否方便操作？
·如果刪掉一些裝飾，這個(gè)應(yīng)用看起來(lái)會(huì)像什么？
下面我提供了一個(gè)解決方案，但要注意的設(shè)計(jì)的本質(zhì)是完全主觀的，有多種設(shè)計(jì)方案。
示例：
四、聚焦于內(nèi)容 在iOS7里，強(qiáng)調(diào)的不是眼花繚亂的裝飾效果，而是最重要的內(nèi)容本身。
下面我們來(lái)探討這個(gè)主題：
1.刪除不必要的內(nèi)容
偉大的設(shè)計(jì)更多是減法和加法的組合。
雖然很酷的想法是很重要，但還有更重要的——?dú)⑺滥切┖芸岬南敕?，以保持?yīng)用程序的重點(diǎn)。
1.1.不再?gòu)?qiáng)調(diào)chrome
chrome是指您的應(yīng)用里不是內(nèi)容本身的一部分，如導(dǎo)航欄和標(biāo)簽欄。
iOS 7非常不建議使用chrome，有些應(yīng)用程序甚至?xí)透纱鄤h除它。如果想要還原chrome的設(shè)計(jì)，請(qǐng)考慮以下幾點(diǎn)：
1.1.1.chrome是需要的嗎？
仔細(xì)考慮，如果你真的在首頁(yè)使用chrome。是把它當(dāng)做導(dǎo)航？蘋(píng)果建議刪除所有chrome符號(hào)，從而使用戶(hù)單獨(dú)瀏覽內(nèi)容。
左右各一個(gè)按鈕的導(dǎo)航模式非常易于理解，而無(wú)需使用chrome。
下圖使用chrome作為導(dǎo)航：
1.1.2.使用簡(jiǎn)單的背景
相比厚重的紋理，使用簡(jiǎn)單、透明的背景更能突出內(nèi)容，蘋(píng)果的毛玻璃效果就是一個(gè)非常好的例子。
蘋(píng)果試圖在iOS7里面使chrome的顏色和背景相同，用來(lái)確保chrome消失。但要記住，這樣做很可能產(chǎn)生相反的效果，因?yàn)樗鼤?huì)導(dǎo)致chrome在視覺(jué)上與內(nèi)容混合，讓人難以區(qū)分。當(dāng)chrome和內(nèi)容看起來(lái)是一樣的，他們就看起來(lái)同樣重要。消滅隱藏的chrome，也就是說(shuō)，chrome和背景的對(duì)比并不總是一件壞事。
請(qǐng)注意狀態(tài)欄是與導(dǎo)航欄融合的，這里以一種優(yōu)雅的方式融合了兩者：
1.1.3.如果可能，隱藏chrome
思考一下，當(dāng)chrome不在使用狀態(tài)時(shí)，你可以隱藏它們。Safari就是一個(gè)很好的例子，它希望用戶(hù)可以強(qiáng)烈的專(zhuān)注于內(nèi)容，而不是為導(dǎo)航UI而分心。
iOS7的Safari在你下拉頁(yè)面時(shí)隱藏了chrome（左），當(dāng)你回到頁(yè)面頂部時(shí)才再次顯示chrome（右）：
1.2.簡(jiǎn)化UI元素
在iOS 7里，你應(yīng)該質(zhì)疑每一個(gè)背景，紋理，陰影和邊框。這樣做是為了消除任何不必要的裝飾，使用戶(hù)可以專(zhuān)注于真正重要的元素。雖然裝飾可能是有用的，但節(jié)制使用它會(huì)使你的應(yīng)用在iOS7里更有家的感覺(jué)。
手機(jī)的界面往往是如此之小，任何額外的視覺(jué)重量，如漸變、邊框或逼真的細(xì)節(jié)都會(huì)吸引用戶(hù)太多的注意。因此，只有你非常確定時(shí)，再使用這些元素。
1.3.無(wú)邊框的按鈕
我最初得知蘋(píng)果要使用無(wú)邊框的按鈕時(shí)，第一個(gè)反應(yīng)是：不！然而，事實(shí)證明，無(wú)邊框按鈕在某些地方表現(xiàn)得的確漂亮，比如導(dǎo)航欄。
在簡(jiǎn)化的導(dǎo)航欄背景里，邊框只是擾亂視覺(jué)的元素，非常不必要。
許多按鈕和導(dǎo)航依然需要邊框，用來(lái)區(qū)分可交互元素和不可交互元素，如下圖：
蘋(píng)果的按鈕一般使用透明背景表示未選中狀態(tài)，簡(jiǎn)單的顏色背景表示選定狀態(tài)。
你可以嘗試改變一些東西，比如邊框粗細(xì)、背景顏色、透明度、圓角半徑，或者為您的按鈕創(chuàng)造一個(gè)微妙的陰影和紋理。
1.4.用顏色來(lái)表示交互
蘋(píng)果用在一些場(chǎng)合用顏色的差異來(lái)表示交互，而無(wú)需使用按鈕周?chē)倪吙?。?dāng)然，如果你的應(yīng)用中交互元素是非常明確的，則不需要使用顏色來(lái)區(qū)分。
在下圖中，紅色的Edit和 + 按鈕表示可以交互：
1.5.最小化仿真細(xì)節(jié)和skeuomorphism（仿實(shí)物紋理）
Skeuomorphism是設(shè)計(jì)師工具箱中的許多工具之一，它不會(huì)消失。你只需要探索在這種簡(jiǎn)約的環(huán)境里如何正確使用它。
2.內(nèi)容為王
現(xiàn)在你已經(jīng)不再?gòu)?qiáng)調(diào)UI，那你怎么強(qiáng)調(diào)內(nèi)容呢？
2.1.使用整個(gè)屏幕
避免只有一幀的不必要UI元素，你應(yīng)該讓你的內(nèi)容始終處于舞臺(tái)中心。
2.2.內(nèi)容決定屏幕
下面的天氣應(yīng)用結(jié)合毛玻璃效果，創(chuàng)造了十分有感覺(jué)的效果，特別是根據(jù)內(nèi)容來(lái)決定不同的屏幕：
2.3.增加視覺(jué)樂(lè)趣
iTunes Radio避開(kāi)華而不實(shí)的UI元素，為內(nèi)容本身增加點(diǎn)綴：
五、聚焦于交互
應(yīng)用的設(shè)計(jì)即將經(jīng)歷一個(gè)方向上根本性轉(zhuǎn)變。此前，基于絢麗視覺(jué)效果的應(yīng)用可能會(huì)脫穎而出，但在iOS 7里，照片般逼真的按鈕將會(huì)從屏幕消失。
那么，如何在iOS7里脫穎而出？如何創(chuàng)建一個(gè)令人愉快應(yīng)用？總之，應(yīng)用設(shè)計(jì)的新模式將更少談?wù)撏庥^，而更多的談?wù)撌褂酶惺堋Ｎ艺J(rèn)為不再高度強(qiáng)調(diào)視覺(jué)效果的iOS7將引起交互設(shè)計(jì)領(lǐng)域的文藝復(fù)興。
簡(jiǎn)單的視覺(jué)效果更容易迅速創(chuàng)建新穎動(dòng)畫(huà)、過(guò)渡和互動(dòng)模式實(shí)驗(yàn)，簡(jiǎn)單的縮放和變形比處理紋理和斜面容易至少一千倍。
下圖中，左邊（iOS7）版本相比右邊（iOS7）使用了更簡(jiǎn)單的視覺(jué)效果：
1. 魔法般的Touch
Touch是神奇的：它讓你以為你操作的是物理對(duì)象，而不是移動(dòng)屏幕周?chē)南袼?。蘋(píng)果知道這個(gè)事實(shí)很好，這就是為什么第一個(gè)iPhone采用1:1的滾動(dòng)比例并運(yùn)用了彈跳效果。
計(jì)算機(jī)是冰冷的，但如果把計(jì)算機(jī)當(dāng)做一個(gè)進(jìn)入物理世界的窗口，用戶(hù)可創(chuàng)建友好的、熟悉的和身臨其境的體驗(yàn)。然而，任何滯后或者頓卡都會(huì)立刻打破幻想，結(jié)束魔術(shù)表演。
iOS7沒(méi)有丟棄仿真的細(xì)節(jié)？沒(méi)有，當(dāng)然沒(méi)有。在iOS7里，視覺(jué)上的仿真被淡化，而用戶(hù)交互和動(dòng)態(tài)物理效果上的仿真被加強(qiáng)。實(shí)際上，iOS7內(nèi)置了一個(gè)物理引擎來(lái)實(shí)現(xiàn)一個(gè)目的：創(chuàng)建一個(gè)感覺(jué)起來(lái)更真實(shí)的界面。
偉大的設(shè)計(jì)誕生時(shí)將更少使用Photoshop，更多使用Xcode和Quartz Composer。這些工具可以讓你去探索應(yīng)用給人的感受，而不僅僅是外觀。
2.直接操作
直接操縱屏幕上的對(duì)象，而不是點(diǎn)擊在一旁的按鈕，滾動(dòng)手勢(shì)、拖動(dòng)和捏住對(duì)象縮放都是直接操作的例子。
iOS7的照片沒(méi)有箭頭按鈕用來(lái)切換照片，自然的掃動(dòng)手勢(shì)完成了這一任務(wù)：
現(xiàn)實(shí)感的界面需要用戶(hù)操控對(duì)象，所以你需要把你的抽象功能整合到物理對(duì)象。例如，我的團(tuán)隊(duì)不得不思考，如何在一個(gè)時(shí)間管理應(yīng)用里表示時(shí)間？最后，我們把時(shí)間作為一個(gè)時(shí)間軸上的物理塊，這增強(qiáng)了它的可視化效果和操作靈活度：
3.物理仿真和動(dòng)畫(huà)
真遺憾蘋(píng)果的頁(yè)面只是簡(jiǎn)單的1：1滾動(dòng)，而不是我們熱愛(ài)的落差慣性和反彈力效果。直接同時(shí)操作與物理和動(dòng)畫(huà)，我們的目標(biāo)是使交互感受真實(shí)。
iOS 7的鎖屏將彈起不同的高度：
在未來(lái)，那些忽視物理仿真的應(yīng)用會(huì)很快讓人感到陳舊和停滯。UI設(shè)計(jì)師才剛剛開(kāi)始探索如何在用戶(hù)交互上使用物理仿真，我們這里有一些想法供你參考：
3.1.動(dòng)態(tài)
不要聯(lián)想數(shù)碼動(dòng)畫(huà)，而是思考物理原理。當(dāng)你在一個(gè)物理表面推動(dòng)一個(gè)球，它不會(huì)勻速到達(dá)終點(diǎn)。相反地，當(dāng)你推動(dòng)時(shí)它開(kāi)始加速，而摩擦力讓它減速直至停止。當(dāng)一個(gè)對(duì)象從10英尺落下時(shí)，反彈力比從2英尺落下更高，你的界面應(yīng)該具備相同的行為方式。幸運(yùn)的是，蘋(píng)果的新UIKit Dynamics API讓你實(shí)現(xiàn)這些動(dòng)態(tài)效果更為容易。
3.2.連續(xù)性
不要想著把每個(gè)屏幕當(dāng)做一塊完全的石板，而是思考一個(gè)Item如何從一個(gè)屏幕到達(dá)另一個(gè)屏幕，利用逼真的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)這些動(dòng)作，例如移動(dòng)、縮放和變形等等。
3.3.反彈力
它不只是滾動(dòng)。這取決于你賦予對(duì)象多大的彈性，反彈力可以添加一個(gè)有趣的觸摸。
4. 三維
諷刺的是，人們?cè)诤魡尽氨馄交钡牟僮飨到y(tǒng)應(yīng)該回到過(guò)去時(shí)，卻忽視iOS7包含了最立體的一切，例如斜面立體效果就讓人眼前一亮。iOS 7的三個(gè)主要指導(dǎo)原則之一是深度，深度可以采取一些形式：
4.1.3D效果
蘋(píng)果希望你利用三維效果為你的應(yīng)用增添有趣的視覺(jué)體驗(yàn)，比如用視差效果讓頁(yè)面區(qū)隔更加明確。
4.2.層次
傾斜你的iPhone ，你會(huì)看到桌面圖標(biāo)實(shí)際上并沒(méi)有坐在背景上 — 視差效果表明他們正漂浮著，而彈出的控制中心和磨砂玻璃效果使得控制中心位于所有圖標(biāo)之上。思考一下你的界面層次，并使用3D效果來(lái)明確用戶(hù)想使用的層次。
毛玻璃提供了一個(gè)微妙的層次感效果：
4.3.縮放用戶(hù)界面
我認(rèn)為一些最酷的用戶(hù)界面創(chuàng)新將來(lái)自這個(gè)縮放概念，并把它帶到夢(mèng)想不到的境界。
縮放界面存在于iOS7里：
5. 手勢(shì)和導(dǎo)航
一旦用戶(hù)學(xué)會(huì)適當(dāng)?shù)氖謩?shì)，可以在交互時(shí)更加有趣和便捷。
下圖為掃動(dòng)完成：
然而，一些功能可能無(wú)法很好地用手勢(shì)來(lái)完成，不自然的手勢(shì)很難記住并且沒(méi)有使用樂(lè)趣。另外，如果不是每天使用的話(huà)，用戶(hù)可能會(huì)忘記不熟悉的手勢(shì)。實(shí)驗(yàn)各種手勢(shì)讓用戶(hù)的手指變得敏感，但請(qǐng)不要隨意設(shè)計(jì)過(guò)于自由的手勢(shì)控制界面。
iOS7引入了一個(gè)新的模式：回掃（swipe to go back）。你可以點(diǎn)擊后退按鈕，但回掃明顯輕松了許多，尤其是在iPhone 5甚至以后更大的屏幕上。
下圖為回掃：
雖然手勢(shì)的設(shè)計(jì)是為了讓用戶(hù)使用更加方便，但鍵盤(pán)操作也應(yīng)該保留，用戶(hù)有權(quán)利選擇多種操作方式。
6. 個(gè)性
開(kāi)發(fā)者請(qǐng)站出來(lái)，您的iOS7應(yīng)用必須有一個(gè)獨(dú)特的和令人愉快的個(gè)性。美觀當(dāng)然很重要，但應(yīng)用的個(gè)性同樣至關(guān)重要！
為了增強(qiáng)應(yīng)用的個(gè)性，可以思考以下幾點(diǎn)：
6.1.音頻
音頻是一個(gè)巨大的的待開(kāi)發(fā)領(lǐng)地，里面有一些先驅(qū)者如Tapbots，誰(shuí)的應(yīng)用里包括細(xì)微的點(diǎn)擊和蜂鳴聲？
6.2.語(yǔ)言
誰(shuí)會(huì)想每天面對(duì)枯燥的文本？詼諧或幽默的語(yǔ)言是散發(fā)出個(gè)性的最佳途徑之一。
6.3.圖標(biāo)
用戶(hù)對(duì)您應(yīng)用的印象往往來(lái)源于圖標(biāo)。由于它生活在用戶(hù)的主屏幕上，價(jià)值如此巨大的圖標(biāo)應(yīng)得到精心設(shè)計(jì)，圖標(biāo)應(yīng)該體現(xiàn)出應(yīng)用的個(gè)性。
個(gè)性真的可以包含在所有的設(shè)計(jì)細(xì)節(jié)里，讓您的應(yīng)用變得偉大。從完善每一個(gè)像素、優(yōu)化每一次互動(dòng)、融合每一次體貼設(shè)計(jì)，再到賞心悅目的動(dòng)畫(huà)、詼諧的信息，這些都能讓您的應(yīng)用變得更加完美。
六、在App世界留下你的印記
“不要說(shuō)謊， iOS7已經(jīng)讓我很興奮的工作了，里面有非常酷的東西（至少我這么認(rèn)為） ?！? ---- Mark Jardine，Tweetbot的設(shè)計(jì)師
在這幾年的應(yīng)用設(shè)計(jì)里，iOS7的風(fēng)格可能最激動(dòng)人心。Marco Arment指出，App Store將再一次成為開(kāi)發(fā)者的沃土。這種激進(jìn)的設(shè)計(jì)轉(zhuǎn)變意味著，未來(lái)幾年將在各類(lèi)排名前列的應(yīng)用中看到新設(shè)計(jì)理念，這些應(yīng)用將深度尊重蘋(píng)果的新設(shè)計(jì)原則，創(chuàng)造出用戶(hù)前所未見(jiàn)的獨(dú)特UI界面。
而好消息在于，你可以創(chuàng)建這些應(yīng)用程序！雖然這并不容易，是的，競(jìng)爭(zhēng)會(huì)很激烈。但是，現(xiàn)在學(xué)會(huì)蘋(píng)果新設(shè)計(jì)理念的你，比以往擁有更多的機(jī)會(huì)創(chuàng)造一個(gè)偉大的應(yīng)用。來(lái)吧，在App世界里留下你的印記！
七、最后的挑戰(zhàn)
挑戰(zhàn)：重新設(shè)計(jì)這個(gè)程序！
下圖iOS 6上的一個(gè)應(yīng)用，它的形狀非常差，需要你的幫助。你的挑戰(zhàn)是運(yùn)用你已經(jīng)了解的設(shè)計(jì)知識(shí)（如對(duì)比、重復(fù)、對(duì)齊、接近、排版和蘋(píng)果的新設(shè)計(jì)理念）來(lái)拯救這個(gè)應(yīng)用，使它重新適配iOS7。
你有很多方式來(lái)開(kāi)始，你可以使用Xcode、Photoshop，或者干脆用一張紙和一些彩色鉛筆。在你開(kāi)始你的新設(shè)計(jì)之前，嘗試找出原設(shè)計(jì)的所有問(wèn)題，這里有一些提示：
·你是否注意到有對(duì)齊的任何問(wèn)題？
·是否相關(guān)的概念組合在一起？
·是否方便操作？
·如果刪掉一些裝飾，這個(gè)應(yīng)用看起來(lái)會(huì)像什么？
下面我提供了一個(gè)解決方案，但要注意的設(shè)計(jì)的本質(zhì)是完全主觀的，有多種設(shè)計(jì)方案。
示例：
|
|
|
來(lái)自： 昵稱(chēng)2735774 > 《工作》
