我們逐漸的適應了iOS7的設計語言和美學。適應之后，便是進一步的發(fā)展，作為設計師，創(chuàng)新是我們心中永不熄滅的火種。如何讓iOS7的界面設計"更上一層樓"呢？從某種角度來說，iOS7"看起來"很容易設計，因為iOS7界面簡約。但是從另一種角度來看，正是這種"簡約"增加了我們的設計難度。

如果您還沒有蘋果難以體驗到iOS7的話，優(yōu)設哥推薦您一份PSD《熱門資源：iOS 7 GUI PSD打包下載》，可以零距離剖析到iOS7的界面。

一、加法設計

前面已經提到過，和iOS6相比，iOS7的界面具有天生的簡約性。表面看來，似乎設計工作簡化了。實則不然，過去的加法設計需要花時間添加細節(jié)，現在的減法設計需要花時間思考、簡化元素，設計師并沒有輕松多少。

"真正的簡約設計是：作品必須不斷的被簡化，一改再改，直到設計最終成形。"——Jonathan Ive,2013

Jonathan Ive的這番話的意思是，iOS7上的界面設計需要經歷多次的版本迭代，精雕細琢的進行簡化，你看下圖的對比，可能有人會說，"看起來差不多嘛。"。實際上，這是精心改進的結果（下圖），右面的輸入區(qū)域感覺更簡約，整體的風格也更統一，柔和流暢，左面iOS6的相比之下就不如右面。

iOS7上的標頭需要下功夫去設計，這就要求我們提高對標題這一元素的理解，要求我們更深入的了解其本質。標頭中加入了毛玻璃效果，這是iOS7體驗特色之一，具備透明效果的標頭便能和系統狀態(tài)欄的顏色一致（下圖），不會像iOS6那樣出現狀態(tài)欄和標頭之間毫無過渡，略帶割裂感。首先，我們要考慮標頭如何與狀態(tài)欄風格統一（以前只考慮標頭就行了），其次，標頭下面還要呈現模糊效果的內容，這就是工作量的提升。

控件不占用內容空間，在需要的時候又出現，這是界面設計的至高境界。

iOS7的毛玻璃效果很華麗，但是又有一定限制，你看下圖，還是占用了一定的界面空間（這里如果清晰一點就好了，可是模糊又有模糊的好處，見下文）。

這里提倡一種變通方法：便是當用戶向下滑動手機界面時，標頭消失，以便更大限度的讓用戶尋找信息。

當用戶向上滑動一定量后（用戶要么在該界面找到了所需信息，用戶需要進一步仔細閱覽；要么用戶沒有找到，用戶需要返回上一級。無論如何，兩種情況都需要導航工具），標頭會重新出現，這樣就能方便用戶導航。

這是Polar這款應用的下拉刷新設計，我參與了這款應用的設計，剛開始我們覺得明顯一點比較好，這樣用戶便能快速發(fā)現此功能，但是這導致了一個問題：標頭的文本內容可讀性降低了。因此我們增強了模糊感。（你看，之前提到的毛玻璃效果由于過于模糊而占用空間，而此處因為不太模糊而影響用戶閱讀標頭，可見毛玻璃效果怎么設置取決于場景）

你看，通過增加模糊感。標頭的深度感、可讀性均得以加強。雙贏。

在上面的種種案例中，我們發(fā)現，iOS7的設計語言肯定不是盡善盡美的。我們要通過自己的思考，在iOS7設計美學的基礎上，構建超越iOS7的設計。

二、iOS7的應用界面設計需要更多的思考

相比iOS6，iOS7的視覺元素有所減少。問題一，沒有了擬物的"隱喻"，用戶該要如何理解界面元素。問題二，更簡化的層級該要如何打造？

"大巧不工"，可真正能有幾人能夠理解這種"不工"的境界？

讓你用六個詞匯描述一個物體很容易，可現在有所限制，僅僅給你兩個詞匯去描述，你該如何傳達清晰？

同樣的，以前我們有更豐富的色彩，更細膩的材質，更逼真的光影效果，以及更富層次的信息層級。而現在"扁平化"之后，手段變得有限了。我們要如何達到跟以前一樣的結果，甚至超越？

看看Twitter iOS6版與iOS7版的比較，iOS7版本的界面元素間缺少對照，導致某些關鍵控件不突出，無法有效的引起行為召喚(Call To Action)

現在該貶貶iOS7了，很明顯左面的Tweet按鈕要比右面的明顯。右面的界面中元素辨識度不高。

iOS7的界面中很多主要交互元素僅僅在字體粗細和顏色上做了調整（下圖的Agree按鈕），不仔細看，還真不是太好認。

當然，我們還是有辦法利用少量的視覺元素打造高效的視覺對照和信息層級，但是很艱難。我們回想一下開頭引用Jony Ive的話吧："必須一改再改。"

我們再來用Polar這個案例來解釋一下種種問題吧。

這是我們的早期設計，你看"添加"，"搜索"以及"創(chuàng)建新投票"這幾個欄混雜到一塊兒了，用戶很難加以區(qū)分。

這就是挑戰(zhàn)，我們在iOS6中以來陰影和材質來區(qū)分彼此，形成對照。在iOS7中，要想以簡約的、扁平式的風格打造優(yōu)良的信息層級很困難。我們做了種種努力去區(qū)分彼此，但是最后的結果往往是各個元素混合到一塊兒，看起來差不太多。

嗯，很雜亂，不是嗎？我們思考之后，認為是元素太多了，按照簡化的思路，移除了一些視覺元素，移除了材質，這似乎奏效了一點（上圖從左到右）。然后通過顏色對比來打造對照感（下圖）。

在iOS7中打造優(yōu)秀的辨識度不容易，個人認為這是iOS7界面設計的關鍵所在，也是難點。它逼迫著你不斷簡化，元素更少，對照感相對就容易設計。

再來談談Polar這款應用的標簽欄設計，我們這款應用的標簽欄圖標設計的很贊，很個性化，很直觀。我們從iOS6升級到了iOS7，采用了iOS7那種纖細的線條輪廓，問題出現了。

首先，仔細看看上面這組對比，有人提出上面的圖標更有效率，我們做了用戶調查，也確實如此。為何？因為從視覺沖擊力的角度講，空心不如實心，細線條不如粗線條。用戶能夠對第一組圖標迅速做出反應，而第二組需要先辨識一下這組圖標的不同之處，再進行操作。

其次，這么一修改，把圖標的"個性化"改沒了。

所以，我們需要"一改再改"，下面是標簽欄的升級圖。

標簽欄的反復更改后得出的經驗：你的應用界面固然有自己的"個性"，iOS7的界面也有自己的"特質"，如何完美平衡，不太容易。iOS7的設計美學可以作為參考，但是不能一味的模仿，要根據自己的情況來設計。

在"創(chuàng)建新投票"這個界面中，我們也犯了錯誤，一開始設計的"不是那么扁平"稍稍一來了一下深度感和、材質，但是效果不盡人意。（下圖為修改的兩個版本）

我推薦使用模糊效果，效果還不錯，用兩塊模糊的毛玻璃"夾住"最核心的信息，這樣便打造了視覺焦點，信息層級很清晰。

三、結論

好的產品必然是要經過不斷升級、重復迭代的。
還是那句話，"不要墨守成規(guī)，要學會變通"，思考是設計良藥。

作者：Luke Wroblewski
翻譯：@MartinRGB
轉摘請注明優(yōu)設網譯文出處，謝謝各位小編。

 
================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業(yè)總監(jiān)在群內及YY語音（YY頻道：156982）分享實戰(zhàn)經驗。
設計微博：擁有粉絲量55萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：