超讚！iOS7應用介面設計深度剖析

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

　　一、加法設計

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

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

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

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

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

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

　　這裡提倡一種變通方法：便是當使用者向下滑動手機介面時，標頭消失，以便更大限度的讓使用者尋找資訊。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　這是我們的早期設計，你看”新增”，”搜尋”以及”建立新投票”這幾個欄混雜到一塊兒了，使用者很難加以區分。

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

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

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

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

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

　　其次，這麼一修改，把圖示的”個性化”改沒了。

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

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

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

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

　　三、結論

　　好的產品必然是要經過不斷升級、重複迭代的。

　　還是那句話，”不要墨守成規，要學會變通”，思考是設計良藥。