iOS 7 全新外觀界面有哪些讓人心動的細節？

11-15

如果需要貼圖說明的話，希望能夠適當剪裁，而不是全長度的原截圖，可能會影響閱讀體驗。

說個字體方面的。

對字體稍有了解的都知道，Helvetica 的標點都是方形設計。今天看時間時偶爾發現了 iOS 7 鎖屏的時間顯示不再是 Helvetica 的方形冒號，而是改為圓形，然後對比了一下狀態欄時間和 iOS 6 的兩處顯示，發現了一點微小差異。如圖：

相對於其他改動，這個微小變化沒多讓人眼前一亮，但我相信設計師朋友們一定能體會到個中妙處。

iOS 7 新界面的一些 tab bar 或 toolbar 小圖標，簡單的細線繪製，配合每個應用的主題色 [1]，清新而雅緻 [3]，竟能讓人短暫忘記在主屏幕頁面遭受的各種磨難：

作為對比，六年前的審美，在此刻顯現出前所未有的不合時宜，似乎從來就不該出現：

同時 iOS 7 所引入的新開關。我從未見過如此簡單明了同時動畫有趣 [2] ── 非勻速變化並帶有短暫彈性晃動 [4] ── 的設計：

可能，iOS 7 是那種界面截圖並不是很漂亮的系統。但當你對著真實的設備操作，那股清晰的氣息卻能瞬間將你擊倒。希望接下來的幾個版本，其它細節會慢慢完善，變得 solid.

────
[1] iOS 7 的 HIG 里建議每個應用都應該選定一個主題色，此主題色應該表現在應用主界面，或者表現在 tab bar 圖標點亮，表現在主屏幕應用圖標。譬如說 Music 的主題色是霓紅色，Notes 是新鮮的屎黃色，App Store 是藍色。該死的 Game center 竟然是藍紫色。
[4] 這裡有一個用戶截取的 GIF: UI Animations
[2] And never mention this.
[3] Pixeden 參照防制了一組（Dribbble - preview.jpg by Pixeden）：

已經 Beta 6 啦，我來說幾點（以下內容可能有些 iOS 7 之前就有了，我不知道而已）

當鎖屏上有兩個及以上的觸點時，是無法解鎖的，也不能將通知和控制中心喚出，不能啟動相機，而且 8 秒後熄屏
設置了鎖屏密碼，兩次解鎖時間沒有超過設置的值，可以跳過輸入密碼步驟
連續發幾條簡訊，只有最後一條簡訊氣泡帶有箭頭
上下滑動時，簡訊氣泡會相互撞擊，動態效果很贊
簡訊氣泡的顏色從上至下為由淺至深的漸變
高階曲線不止出現在 app icon 的四個角上，很多圖形都有用高階曲線過度，比如簡訊氣泡
系統升級時，設置 icon 的兩個齒輪分別會順/逆時針轉動，動畫十分細膩
關閉飛行模式時，小飛機會沿著信號飛走
當你把倒計時設置為 0 小時 0 分鐘時，它會自動變成 0 小時 1 分鐘
即使手機重啟，之前設置的倒計時依舊生效
Reminders 可以同步 WP 日曆裡面的 To Do List （前 Lumia 用戶表示很高興）
全景照片有專門的文件夾，它們的縮略圖也是橫條顯示
耳機、藍牙耳機音量是獨立控制的
天氣會告訴你日出日落時間
天氣點擊氣溫，會告訴你濕度、下雨概率、風向風速、以及碉堡的 Feels like （感覺上是多少度，這個它怎麼算的？）
據說，白色 iPhone 開機畫面是白底黑蘋果 Logo，黑色 iPhone 開機黑底白蘋果（不過這個設計要配合 OLED 屏幕才能掉炸天）

回家了，寫到這裡。

圖標下的文字顏色會自動適應壁紙的顏色而變化。
這個真的...細緻到了極致啊

深色背景：白色字

淺色背景：黑色字

最令人動心的就是那個懸浮圖標的設計了吧——調用重力感應器，使得圖標看起來就像懸浮在手機屏幕上，輕輕側過手機就能看到圖標下面的壁紙。

在一片吐槽聲中，就是這點小細節讓我堅信蘋果還是當初那個蘋果，而 iOS7 的正式版也值得期待。

PS.在找資料的時候發現了新系統更多鮮為人知的細節，在這裡推薦一下愛范兒的評測，寫得很棒。

傳送門： http://www.ifanr.com/303226

2013年11月28日，距離 iOS 7 正式版發布也已經兩個多月了。據統計如今 iOS 7 的更新率已經接近80%，系統本身也經過不斷優化，7.1 beta 加快了動畫速度後顯得更加流暢了。現在，當初很多「相對於舊版本的驚喜」已經變成了尋常的東西，這時候再看之前的答案已經顯得有些過時了。

=====================重新整理=====================

iOS 7 的所謂扁平化設計，可以說是基於Motion graphics （MG，即運動圖形）的。這是一種讓平面設計動起來的藝術，已經存在了幾十年，其最大特點就是「將自然的運動賦予幾何圖形」（這幾年流行的則是平面圖形）。在MG的世界裡，我們能感受到自然的緩動、彈性、慣性等等，充滿了張力。

蘋果最初向我們展示他們的MG設計是在今年夏天WWDC主題演講的暖場視頻里。

視頻封面 Apple - Designed By Apple - Intention視頻在這段視頻中，Jony Ive 鍾愛的小圓們隨著音樂翩翩起舞，變形、分裂、蹦跳，流暢自然。

後來，隨著 iPhone 5c 的發布，蘋果又為我們帶來了 Designed Together 廣告：

視頻封面蘋果iPhone 5c第二支廣告 - Designed Together視頻這支廣告堪稱完美，百看不厭。這裡展示了很多界面設計上的細節，正好就是我下面要說的——

iOS 7 真正精彩的細節在於大大小小的動態效果。

- 解鎖的時候，主屏幕圖標飄落。

- 輸錯密碼時四個小圓點的晃動。

- Siri 界面里，聲波的條紋變化成圓圈的動作。

- 還是 Siri，「您可以這樣問我」下面的文字飄動。（截圖很困難）

- 新通知出現時，圖標右上角的小紅圈由小變大出現。

- 滑動簡訊頁面時，氣泡們都在飄動。

- 對方輸入消息 (iMessage) 時，雲朵也在微微晃動。

- 發送消息時，自己的氣泡從鍵盤底部浮起來。

- 水平儀的設計。它太有設計感了，根本不像一個水平儀。

- Safari 滾動頁面時地址欄漸隱的動作。

- Game Center 氣球的飛動。（雖然異於整體風格）

- 簡單而富有張力的設置開關。

- （郵件、Passbook）刷新時「小菊花」的旋轉。

- 界面右滑返回時，導航欄文字的變化。

- 新應用下載時，進度圈的出現和消失，以及點擊暫停時的效果。

- 狀態條上「飛行模式的小飛機」和「勿擾模式的小月亮」的出現和消失。

這些動畫細膩優雅，這也是為什麼 iOS 7 的美感要體驗後才能發現。

P.S. Windows 8 的UI也是這個思路，做的也很不錯（很喜歡等待時那串轉動的圓點），但是沒有 iOS 7 這樣細緻入微。

===============2013年8月20日版=====================

之前為 beta 1 時所寫。兩個月，6個 beta，我們看到了 iOS 7 在各方面的完善，以下內容也有不少變化。

從開機說起吧：

開機圖標變成了純白色的蘋果圖標，從4.x時代（記不清了）開始的帶光澤蘋果不見了。算是回歸本源吧。

鎖屏：

新的鎖屏取消了滑塊，但是，是不是還有人總是下意識地滑動行些字呢？其實屏幕任何位置都可以滑動。新的開鎖動作像是把鎖屏撥到一旁，讓那些圖標可以有空飄下來的感覺。但是想吐槽上下兩個小箭頭，那個是完全沒用並且產生誤導的地方。【beta 4 起增加右滑引導，同時箭頭變為直線。】
新來的通知會跟原來就呆在鎖屏上的通知區分開——新通知是白色的，舊通知是灰色。
slide to unlock（原諒我用英文界面，強迫症不能忍中文漢化不全）（全小寫字體很整齊很贊，不過舊版本就是這樣）……slide to unlock 上面有一個向右滑動的光澤提示滑動方向（其實也是舊版本就有的）。但是這個提示性並不強，感覺蘋果有點高估了用戶（尤其是全新 iOS 7 用戶）的領悟能力。【可以無視。】
如果你設定了密碼，右滑會直接進入密碼頁。輸錯了密碼的話上邊的四個小圓點會做搖頭動作（類似 iOS 6 中語音輸入聽不清的反應），非常可愛。

——————————————補充——————————————

向上右下角的相機可以抬起整個鎖屏，這個鎖屏的反饋效果非常有趣——你把它放下來時它會彈起。如果你使勁把它「砸」下來，它甚至會高高彈開，反而使相機打開。

——————————————————————————————

主屏幕：
壁紙能夠響應手機方向，通過相對運動模擬層次感這一點盡人皆知，雖說也算是細節，但已經在發布會上展示了，無驚喜。
@TrusBe 提到的飛行模式小飛機其實也是舊設計，iOS 6 以前就有的。iOS 6 的狀態條上還有個可愛的細節是勿擾模式的小月亮，如果你在設置中打開勿擾模式，小月亮會以一個動畫出現（月相那種【更正：是月食】），但是遺憾的是iOS 7 (beta) 中沒有了這個小月亮，希望正式版中回歸。【更正：iOS 7 beta 中這個設計仍然存在。】

時鐘成為了日曆之後的第二個動態圖標。秒針採用了連續緩動的方式讓你不會在意它是動的。為什麼強調這個秒針？我感覺這一點是蘋果的用心所在。要知道 iOS 6 的內置時鐘里秒針是躍動的，並且為了擬真還有震動效果，（對於舊系統而言這也是非常贊的細節！）不過為了適應新系統，時鐘也跟著改變了。

通知中心：

Today（今日）中會用自然語言向你彙報今天的天氣和日程，而不再是原來的圖標和列表。這讓我感覺是Siri給我發的消息。【這一條權當跑題處理吧，不算所謂「細節」。】

控制中心無亮點。認為實用但是設計很差。

——————————————補充——————————————

直到我發現手電筒的圖標在亮起和滅掉時，上邊的小開關位置是不同的……

——————————————————————————————

多任務：

雙擊主屏幕按鈕進入多任務界面，會為你自動對焦到前一個程序。當然啦，你都打開多任務了還有什麼理由留在本程序上呢？（求補充：Windows Phone 做得如何？）
下排的圖標會在你滑到盡頭時拉開間距，為了取得視覺上的平衡。

應用程序：
點按一個圖標打開應用，圖標會變大到佔滿屏幕。這個不算細節所以我沒加項目符號。多說兩句：
這種動畫效果讓圖標不再是按鈕，而變成了一種類似標籤的東西（這裡借鑒了@周震的回答，如何評價 iOS 7 Beta 1？），給我的感覺其實有點像 Prezi 。尤其是文件夾動畫，從打開文件夾到打開應用，平滑縮放，一氣呵成。（腦補正式版的流暢。beta 卡得不行。）【現在已經非常流暢。】
返回主屏幕的動畫也是一致的。但是細節在這裡：

如果你的應用是通過多任務或通知中心打開的，那麼在退出時是完全不同的效果。畫面突然變黑，中心出現一個白點，然後白點消失，圖標飄落。這個白點的出現讓我感到很舒服，但是我並不知道它的實際意圖是什麼（求補充解釋）。我聯想到一款第一人稱跑酷遊戲鏡之邊緣（Mirror"s Edge），屏幕中心會一直有一個小點用於緩解3D眩暈。【已經改變，請無視這條。】
在一個程序中打開另一個程序，舊版設計是新應用從後邊翻到前面來，新版則變為新應用出現在左側，這顯然是為了呼應多任務界面。

應用界面：
贊同@鄭紫陽，新圖標很典雅。主題色也算是不錯的設計。下面說原生應用中印象最深的細節。
信息：

滾動對話頁面會發現，平面化的小氣泡們會隨著滾動輕微飄動。【特別贊！】

設置：

繼續贊同@鄭紫陽，開關的動畫富有張力。它有一種」賴著不走「的傲嬌，就像 iOS 6 里的郵件及 Passbook 刷新動畫。新版本的刷新動畫也不錯，再談。

音樂：

正在播放界面中，沒有封面的專輯會把專輯名和歌手作為用大字顯示在上面，等於現做了一個封面。區別與以前只用一張黑色音符圖那種很壓抑的感覺。
橫屏沒有 Cover Flow 了，變成了縮略圖顯示。貫徹整體風格。沒有專輯封面的同樣有補全。【並且可以捏拉縮放。】【此條認為跑題。】

郵件：

刷新動畫變了，「小菊花」會隨著下拉，邊旋轉邊補全花瓣，最後轉起來。這個動畫感覺比舊設計更簡潔流暢，只是有時候拉得太快，……轉得也太快了。

目前發現了這些，以後可能再補充。
————————————————————————————
對了還有關機界面。

毛玻璃的 slide to power off 和 Cancel 的色塊。亮點在於滑的過程中這兩個色塊上下的部分會變暗，完全滑過鬆開後，兩個色塊向中間靠攏，整個把屏幕掃黑關機。【beta 5 以後關機色塊發生了變化，動畫也產生了相應改變，但總體感覺類似。】

============================================================

8月20日封，原諒我亂七八糟的排版。正式版放出之後還會更新。

讓我心動或激動的一點是：白色背景的圖標。

此前或許有一些「懶惰」的應用開發者用過白色作為圖標的背景，但是以設計師有意識地去追求，使用白色作為圖標背景的很少見，更不用說像 iOS 7 這樣，展示的首屏就有 5 個這樣的圖標，背後當然有很強的意願，因為相比之下，認為 Apple 設計師黔驢技窮或者應付了事而導致這樣的圖標出現，這種觀點是更靠不住腳的。

與 iOS 6 相比，這個白色如此突兀，它就像造反的前鋒。一開始很多人都會被它嚇倒，尤其是設計師，感覺自己的禁區被其攻破了。

它漂亮嗎？很多人認為它丑的嚇人。它也不是因美而生，「When something is designed to work beautifully, it tends to look that way, too.」（Apple - iOS 7 - Design）這句話甚至可理解成「它是丑的」，但這不是 Apple 關心的。它是丑的嗎？我認為會有越來越多的人認為它也是很漂亮的。憑什麼白色不能作為一種顏色？它不總是代表著「空白」和「無」。改變看法認為它是漂亮的用戶並不是要為白色平反，而是他有了新的認知視角，對手機對交互界面有了新的體會和認識。

「iOS 7, The mobile OS from a whole new perspective.」（Apple - iOS 7 - Overview）

圖標可以是抽象的或者具象的，具象到照片或者照片級繪製，但是無論傾向哪方面，它存在的意義就是它所指向的，也就是它作為符號而存在的意義，或許很漂亮讓人想去舔，但是它不具備這個功能，那麼它自身的形式如何與它指向的意義進行適配，就是圖標設計最主要的內容（並不是唯一，或許讓人想舔也可作一部分），那麼能體現設計的品質就是這種內在的一致性（coherence：Apple Unveils iOS 7）。如果你要強調這種一致性，那麼必然朝著某一種簡潔明確的方向前進，「There is a profound and enduring beauty in simplicity, in clarity, in efficiency.」

這種一致性可視作是物質的客觀的，也就是當人走開了它還是存在的。那麼，這個圖標或者界面設計得讓人想舔是不能離開一個具體的操作者的，一個圖標設計得讓人認為可以點擊，它是物質性的需求，而吸引人去點擊就不是完全客觀了。使用一個白色背景的圖標（因為有圓角四邊形）當然是可點擊的，至於要不要吸引，不需要。它需要獨立，需要區分，需要識別迅速，識別性，就是以最具代表性的視覺元素被人快速識別，而不是提供最豐富的視覺信息，雖然兩者不矛盾，設計豐富的也可以具有很強的 icon 屬性，但隨著內容成為主要並且日常化，人們很少去主動地品嘗圖標和界面的美味了。那麼，Apple 在首頁放上這 5 個白色背景圖標能否很好的得以區分，去過自己去嘗試一下配色，會發現白色的應用不僅是大膽而且也是非常合適的。

為什麼不設計帶一點漸變的呢？為什麼要？而且漸變已經有不少了。

iPhone 1 代背部有上下分割，因為天線需要塑料材質，那麼為什麼不用白色呢，iPod nano 背後為什麼要留白色，還有 iPad 的天線，iPad mini 倒是是對黑白兩色進行匹配了，但是那種直接在頂部切割的方式是否可以設計成更隱蔽的呢……如果以這樣的角度去看，會發現 Apple 產品上有很多需要修飾掩蓋的，為了更好看。

Jasper Morrison 為 Flos 設計過一款燈叫做 Suspended Glo-Ball（ Suspended Glo-Ball），當它打開時因為陰影的消失，它就像完全平面的白色的圓出現在房子上空（或者是如深澤直人所描述的像是房間開了一個洞，來自這本書《不為設計而設計=最好的設計》 (豆瓣)），當時這段描述讓我心動或激動了一下。

而 iOS 7 的白色背景圖標也有類似感覺，白色是可以被設計的。

然後，它們是漂亮的（除了 Newsstand），因為此前沒人這麼做過。

iOS 6 以後再無美感（個人主觀想法，不吵架）。

沒有人發現！
鎖屏的時鐘！
鎖屏壁紙明度很低的時候時鐘字體是白色的！
反之是黑色的！
這是我一直以來的願望啊！！！是有多人性化的設計！！！！！！

（動態的效果不好截圖）
1、呼醒屏幕時背景燈像是緩慢調節亮度點亮的；
2、如果你設置了來電頭像，對方來電話的時候，他的頭像再也不會被遮住了，界面簡潔到想舔；
3、圖標利用重力感應與背景形成一種懸浮的效果；
4、解鎖的瞬間，圖標像是從眼前落到背景上的，但是由於第三點的原因，感覺更像是懸浮在屏幕上；
5、類似於Path下拉氣泡刷新類的小功能、小驚喜很多很多，比如：開關的動態彈性效果，打開關閉飛行模式的時候小飛機的效果（這個有人說之前的版本也有，自己暫時無法驗證了。）；

關閉的時候動畫是這樣子的：飛機從左往右，沿著五格信號跑道一直衝向運營商。

6、照片應用裡面，點擊圖片查看時，圖片有種想衝出屏幕的感覺，然後到適應屏幕展現，這個效果不錯。
7、設置界面頂部文字的動畫：點擊設置的時候頂部出現『設置』，點擊『通用』的時候，設置字樣動畫移動到左上角，成為返回的摁鈕，『通用』從右上角划出移到之前設置的位置，同理點擊『關於本機』的時候，『通用』移到左上角，『關於本機』從左上角划出；返回上級菜單的時候，效果相同，方向相反；

建議：一定要親自上手之後，玩上一兩天，不然真的無法體會到新系統帶來的驚喜和體驗，我現在是有備份都不願意回去了，期待第二個測試版本。

你一定得看看這兩個視頻
視頻封面

iOS7 3D效果詳細演示 (iphone5)視頻ios7的3D效果詳細演示
視頻封面

iOS7 蘋果沒有介紹的隱藏細節視頻蘋果沒有介紹的ios7細節

看了一圈，發現沒人回答那我就說了
見圖

可以看到，簡訊中的【明天下午】和【明天上午10點】下面有一條下劃線
就象這樣
明天下午來xxxx、明天上午10點做xxxx
猜測大概只要發送的內容中出現時間的都會有，目的是讓時間更加顯眼，加強提醒的。
不排除正式版會和提醒、日曆等功能關聯的可能。

時間圖標不僅可以動了

而且！！！

正常界面下秒針連續轉動

長按圖標進入「抖動界面」

秒針一頓一頓的轉動！

時尚科技感線條組成的icon和同樣具有纖細線條感的Helvetica Neue Ultra Light字體搭配在一起，相得益彰，簡潔明快～

壁紙的晃動??我還記得剛發現時我還換了個大胸女郎的照片?有事沒事就晃屏幕看胸甩來甩去。

整體的交互都不錯，原本要用插件實現的主屏幕icon動畫效果，現在直接就有了。賞心悅目。
不過整體顏色過亮，刺眼，看久了眼睛不舒服。

12年4s丟了之後，好久不用蘋果了，不知道是ios幾代有這個效果，前兩天買iPad air時侯發現的。圖標是浮在背景上面的，不會動，但是壁紙是會隨著握持角度的變化而小範圍擺動。真是一個細微到很難注意到的設計，雖然的確沒什麼用，不過我第一次發現時候被驚艷了，不要問我為什麼！

其餘設計只是覺得很貼心，但這個真是被驚艷了

帶有邏輯的分層設計

無法撥打最近通話記錄的最上和最下的電話號碼

facetime的毛玻璃

內容重於形式的理念最早起源於WP，這樣的UI給人以簡潔的感覺，符合大多數人的審美，手機操作系統並不是單個獨立的APP，整體要讓人清晰明了，本人還沒有升級到7.0，沒有親身體驗過，只針對目前網上曝出的圖片來看，界面是有點像安卓4.0以及WP，吐槽聲不斷主因是因為人們接受不了蘋果跟在別人的後面，人們的期望也很高，希望正式版發布後能給人們以驚喜，和別人不一樣，做別人不敢做的事，讓用戶越來越適應，那才是蘋果。

當默認鎖定界面壁紙為iOS7 官方默認的那張星空，並設置到四位密碼的時候，緩慢地滑動解鎖，仔細觀察那10個圓形數字鍵的邊緣變化，會有一種會心的驚喜。

有沒人跟我一樣非常喜歡毛玻璃的設計...
那種漸變式的美感，如果搭配上好看的壁紙簡直美到爆啊！
的確想樓上說的一樣，僅僅只是試用完IOS7就再也不想去看IOS6了，會突然發現擬物化設計實在不好，不是不好看，但是IOS7的確更美了