SAY討論區

標題: 深度解析iOS7系統UI設計：簡約而不簡單 [打印本頁]

作者: freegold 時間: 2013-6-16 10:23:47 標題: 深度解析iOS7系統UI設計：簡約而不簡單

萬眾期待的蘋果iOS 7系統終於在WWDC全球開發者大會上解開了神秘的面紗。經過Jony Ive重新打造的iOS 7系統，雖然風格上更加扁平化，變得更加簡約，但用“簡約而不簡單”來形容新的iOS 7操作系統，是再合適不過的了。

其實，單純的給iOS 7定位成“扁平化”是不太客觀的。因為新系統僅僅是界面風格上變得更加平面和簡約，但是從功能上看，用Jony Ive的話說，具有了“全新類型的深度”。除了更加豐富的層次、鮮艷的用色及全新的配色方案，iOS 7系統還首次運用了動畫的元素，並且增加了天氣動畫及角度時差，這都是在之前的iOS系統中未曾見過的。
毫無疑問，Jony Ive已經開始擺脫了原本iOS系統所采用的skeuomorphic設計方法，並且試圖準備用新的設計風格來征服所有的新老用戶。
設計與系統的深度結合

在發佈會上，大家對iOS 7最關註的就是其整體風格的變化。雖然這種變化看似簡單的把應用的界面與圖標進行了重新設計，其實這恰恰說明了新的UI元素已經將表面的復雜轉化成了對系統環境的高適應性。
也許，對於一個操作系統來說，最佳的設計宗旨便是能夠讓各個元素與系統之間緊密的結合。比如iOS 7就可以通過內置的加速計來適應從不同角度觀看iPhone屏幕所帶來的視覺差，這都是之前的操作系統所不具備的想法。另外，iOS 7系統還能夠與手機的光線感應器更加緊密的結合，可以讓背景和圖標分別根據環境光線強度的不同來自動調節亮度。
iOS 7系統另一個非常棒的細節設計就是對於文本、線條的顏色與背景顏色的高度一致性。比如時間和天氣界面，似乎文字與背景搭配得十分協調，而放棄使用了原本的天氣圖標和溫度圖標來表現傳統的天氣內容。
層次與深度

經過重新設計的圖標與應用從視覺效果上絕對要比現在的iOS 6系統更簡單，但是從整個系統的生態角度來說，其實這種設計反而更復雜。比如首先所有圖標和文字並不是簡單的孤立單獨存在，而是要充分的與系統在視覺效果上緊密的結合，無論是圖標還是文字，都要給人有更多的層次感，而不僅僅是簡單的將文字放到圖標的下方。
iOS 7的屏幕本身其實大致能夠分為三個層次，從上面的分層效果圖上，我們就能夠看出大致的分級。首先在最下面的就是屏幕的背景，這一層非常清楚而且簡單，其次便是中間的圖標層，然後就是處於最上面的模糊層，可以是天氣、控制中心或通知中心。這種設計其實大大的增加了視覺效果及系統的復雜性，雖然與之前的風格截然不同，但是作為一種新的嘗試，反而會帶來意外的驚喜。
字體

來和全新的Helvetica Neue Ultra Light字體打個招呼吧。在iOS 7系統中，蘋果用一種更纖細燈的Helvetica Neue Ultra Light字體來代替了原來的Helvetica Neue字體。Helvetica Neue雖然被蘋果使用了很多年，但是蘋果打破了之前的傳統，采用了更苗條的字體，從視覺效果上看更加符合iOS 7系統的新風格。
原本的Helvetica Neue字體對於蘋果來說意義非凡，自從1983年以來，Helvetica Neue就成為了Mac OS系統的默認字體。後來，在移動設備使用的iOS系統中，蘋果也同樣使用了Helvetica Neue。
對於在新系統中更換更“苗條”的Helvetica Neue Ultra Light字體，其實也存在了不少的風險。在許多情況下，外部環境光線過於強烈時，纖細的字體可視性要差了一些，尤其是對於移動系統來說，經常要面對處於強光的條件下。但是，Helvetica Neue Ultra Light字體在背景模糊時，確實非常漂亮，所以，蘋果在二者之間選擇了後者。
系統應用程序

新的圖標和之前媒體所報道的基本相同，棄用了原來的反射光澤及偏深的顏色，而重新選擇了更鮮艷的配色、更簡單的背景及可愛的圖標設計。同時，還采用了清晰的圖標與模糊的背景之間的高反差設計來凸顯更加分明的層次。而鎖屏界面，則徹底了使用了模糊設計，給人耳目一新的感覺。
其實，iOS 7系統的圖標設計風格有些與上個實際奧地利設計師Gerd Arntz所倡導的形象大於一切風格非常相似，使用更加形象的符號完全可以來替代文字說明。
原本的iOS系統圖標內容非常寫實，與現實內容非常接近。而新的iOS 7圖標則讓內容回歸簡約，讓用戶一目了然，這對於用戶來說不必過多的思考第一眼就能夠分辨出這個圖標所代表的內容。
就像Jony Ive在發佈會視頻中所說的那樣，設計絕不僅僅是它表面看起來的那樣。表面上看起來簡單的東西，其實反而更加的復雜。iOS 7系統的界面雖然看起來更簡約、更幹凈，但是在其背後卻蘊藏了蘋果設計團隊對於美觀、效率和秩序性的追求。“簡約而不簡單”用來形容新的iOS 7系統，也許再合適不過了。
文章來源：騰訊數碼

附件: [ag40fiqubtu08.jpg] ag40fiqubtu08.jpg (2013-6-16 10:23:47, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MzU2NzY1fGQ1ODM2Nzg3fDE3ODI2NDkzNDZ8MHww

附件: [41acezr3e2s08.jpg] 41acezr3e2s08.jpg (2013-6-16 10:23:47, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MzU2NzY2fDMyOTlhMDVjfDE3ODI2NDkzNDZ8MHww

附件: [ryosx3v1t2g08.jpg] ryosx3v1t2g08.jpg (2013-6-16 10:23:47, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MzU2NzY3fDJlY2ZjNmRlfDE3ODI2NDkzNDZ8MHww

附件: [1py1zgyqu2z08.jpg] 1py1zgyqu2z08.jpg (2013-6-16 10:23:47, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MzU2NzY4fDU4MjNjNTdjfDE3ODI2NDkzNDZ8MHww

附件: [gtf2zrbj0ex08.jpg] gtf2zrbj0ex08.jpg (2013-6-16 10:23:47, 0 Bytes) / 下載次數 0
http://say.go2tutor.com/forum.php?mod=attachment&aid=MzU2NzY5fGZlZGQyYjFifDE3ODI2NDkzNDZ8MHww

作者: a_c_e06 時間: 2013-6-16 13:00:10

希望大家幫我把這個帖發給你身邊的人，謝謝！

作者: alvinsiusiu 時間: 2013-6-16 13:05:15

呵呵都沒人想我~~

作者: freegold 時間: 2013-6-16 13:07:42

一樓的位置好啊..

作者: HO0907 時間: 2013-6-16 13:10:32

我這樣算沙發嗎？

作者: xdxd125 時間: 2013-6-16 13:12:39

應該加分

作者: 鬼谷先生 時間: 2013-6-16 13:25:33

謝謝分享

作者: cb_reptile 時間: 2013-6-16 13:34:22

看帖累了，回覆一下吧！

作者: 底褲超人 時間: 2013-6-16 13:35:59

經過你的指點我還是沒找到在哪 ~~~

作者: mydear888 時間: 2013-6-16 13:37:56

長時間沒來看了～～

作者: LMFAO 時間: 2013-6-16 13:37:56

看完了這麼強的文章，我想說點什麼，但是又不知道說什麼好，想來想去只想

作者: kensiu123 時間: 2013-6-16 13:47:28

你加油吧

作者: DiorCherie 時間: 2013-6-16 13:48:30

要認真回覆，不然會沒有潛水值

作者: 曾冇權 時間: 2013-6-16 13:51:41

分享一切美好的事物是樓主的責任，回覆是每一位會員的義務

作者: Essi 時間: 2013-6-16 13:54:32

樓上的話等於沒說~~~

作者: vol1210 時間: 2013-6-23 03:30:30

我不是隨便的人。我隨便起來不是人

作者: oh~my~gag 時間: 2013-6-24 07:49:51

能找到這個站真好

歡迎光臨 SAY討論區 (http://say.go2tutor.com/)