幾塊錢評論：文章讓我收獲頗多的點(diǎn)：設(shè)計激發(fā)用戶行為。大家可以仔細(xì)閱讀下，從文章中理解設(shè)計是如何影響用戶判斷和采取行動的。相信你一定會有收獲哦。

和其他很多公司一樣，我們最近花了不少時間來重新設(shè)計我們的iPhone應(yīng)用Polar，使其能夠適配蘋果最新推出的操作系統(tǒng)。在漫長的重設(shè)計過程當(dāng)中，我們真切地了解到了很多關(guān)于為iOS7進(jìn)行設(shè)計的利與弊，甚至是一些說不清道不明的地方。

當(dāng)我們開始著手將Polar已有的界面元素與iOS7的整體美學(xué)及設(shè)計語言進(jìn)行適配的時候，有一件事情變得很清楚——我們不會僅僅滿足于讓應(yīng)用適配 iOS7，我們想要確保重設(shè)計之后的方案確實(shí)比之前的版本要更好。從某些方面來講，iOS7讓我們可以更輕松改進(jìn)現(xiàn)有的設(shè)計方案；而在另外一些方面上，事 情卻變得困難了很多，我們的多數(shù)時間也正是花在了這些地方。

iOS7設(shè)計的益處

相比于iOS6及以前的版本，iOS7的設(shè)計語言具有與生俱來的簡潔性。從表面上來看，這一特性可以幫助我們更簡單的設(shè)計應(yīng)用，不過在現(xiàn)實(shí)中，你可能需要做更多的事情，才能打造出更簡潔的設(shè)計方案；這并非易事。

“真正的簡潔是指，你不斷地前行再前行，直到你發(fā)現(xiàn)：‘是啊，自然是這樣的！’” –?Jonathan Ive，2013

對于我們應(yīng)用當(dāng)中的很多設(shè)計元素，我們確實(shí)需要運(yùn)用Ive所說的持續(xù)迭代的設(shè)計方式進(jìn)行優(yōu)化，不過蘋果的設(shè)計團(tuán)隊(duì)帶來的新系統(tǒng)也使得我們可以利用更 多其他的元素來得到更好的效果。例如，在使用了iOS7風(fēng)格的文本輸入框之后，我們的表單立刻變得簡單明了，而且與系統(tǒng)自身的美學(xué)外觀更加搭配。

界面頭部是需要做很多工作的地方，不過這也迫使我們從一些最基本的原則出發(fā)來改善現(xiàn)有的設(shè)計，同時我們也得到機(jī)會來挑戰(zhàn)iOS7當(dāng)中總最具代表性的 毛玻璃效果。默認(rèn)情況下， 新的導(dǎo)航欄是半透明的，并且與狀態(tài)欄使用了相同的配色；相比于之前的版本，這使得整個頭部成為視覺上的整體，同時也能映襯出底部內(nèi)容。這些都是新方案當(dāng)中 好的地方，但它們同時也帶來了一些新的挑戰(zhàn)。

為了給內(nèi)容提供更多的顯示空間，當(dāng)用戶在內(nèi)容列表里向下瀏覽時，我們會讓整個導(dǎo)航欄消失；而當(dāng)用戶向上看回前面的內(nèi)容時，導(dǎo)航欄又會出現(xiàn)，以便用戶可以使用的相關(guān)導(dǎo)航功能。但是iOS7默認(rèn)的半透明狀態(tài)欄的行為卻打破了我們的規(guī)則，具體情況見這段視頻；我們必須另外考慮解決方案。

使用系統(tǒng)控件的情況。在滾屏?xí)r，導(dǎo)航欄消失，狀態(tài)欄也失去了底色。

改造之后的情況。在滾屏?xí)r，導(dǎo)航欄消失，狀態(tài)欄仍然保持原樣。

最終，我們的解決方案是在系統(tǒng)狀態(tài)欄之下、內(nèi)容視圖之上增加一層藍(lán)色的“襯底”，且位置固定。當(dāng)產(chǎn)生滾屏?xí)r，導(dǎo)航欄消失，而狀態(tài)欄當(dāng)中的內(nèi)容則襯在藍(lán)色的背景上。

我們接下來要面對的是自定義的下拉刷新控件的表現(xiàn)問題。在之前的版本中，我們使用了下拉刷新的方式來更新界面當(dāng)中的內(nèi)容。而在iOS7當(dāng)中，之前默認(rèn)隱藏在導(dǎo)航欄后面的元素變得隱約可見了，使得導(dǎo)航欄當(dāng)中的文字有些難以閱讀。

我們的解決方案是對任何位于導(dǎo)航欄底部的內(nèi)容進(jìn)行強(qiáng)化的模糊處理。這一方面保持了界面當(dāng)中的深度和層次，一方面也能確保毛玻璃效果不會影響內(nèi)容的可讀性，可以說是雙贏。

綜上所述，在我們的應(yīng)用里，對于表單和頭部控件來說，iOS7的設(shè)計語言使我們能夠更輕松的進(jìn)行正確的設(shè)計，而且我認(rèn)為我們最終的一些解決方案比僅僅使用系統(tǒng)原生控件來的更好些。不過對于其他一些界面元素來說，事情就沒這么輕松了。

iOS7設(shè)計的弊端

iOS7簡潔的設(shè)計語言同樣會讓你付出代價：設(shè)計師能夠用來構(gòu)建信息層級關(guān)系及易讀性的視覺元素總量減少了。

設(shè)計師可以通過一系列的屬性來創(chuàng)建信息的呈現(xiàn)方式，使人們清楚他們所看到的信息的含義。例如配色、尺寸、紋理等元素，可以被用來在界面中打造內(nèi)容之 間的相似性、差異性或是繼承關(guān)系。而當(dāng)這些元素變得扁平了之后，設(shè)計師可用的界面設(shè)計元素辭典就變薄了。這就好像一個人失去了一部分詞匯量，他必須使用更 加有限的詞匯與他人進(jìn)行交流。

你可以在很多iOS7應(yīng)用中發(fā)現(xiàn)，扁平化的設(shè)計元素使得內(nèi)容和功能的層級關(guān)系變得不再清晰。對比Twitter的發(fā)推界面在iOS6和7當(dāng)中的表現(xiàn)，后者的界面中，元素之間缺乏必要的對比，使得重要的功能(Tweet)不再那么顯而易見。

在iOS7的某些地方，你很難判斷哪個元素是界面中最主要的call to action，因?yàn)楦鱾€元素之間只有細(xì)微的樣式差別。例如在每個iOS7用戶都能見到的條款與條件(Terms and Conditions)界面中，作為最主要的行為按鈕，“Agree”僅僅比該界面當(dāng)中其他一些元素稍稍大了一點(diǎn)粗了一點(diǎn)。

當(dāng)然，要通過對比度較低的視覺元素來創(chuàng)建有效的視覺層級關(guān)系也并非不可能，只是難度變大了。這讓我們又想起Jony Ive所說的話：一切都在于迭代。

進(jìn)行過扁平化處理的視覺元素，彼此之間的差異性有所降低。在下面的例子中，你會發(fā)現(xiàn)，無論是添加、搜索還是創(chuàng)建，它們看上去都差不多，用戶需要依靠細(xì)小的視覺差異來進(jìn)行判斷。

我們在自己應(yīng)用里的投票列表界面中也面臨著類似的挑戰(zhàn)。在iOS6當(dāng)中，我們可以依靠深度(陰影)和紋理質(zhì)感來區(qū)分列表當(dāng)中的不同項(xiàng)目；而到了 iOS7，只是簡單的把這些元素拍平的話，便會帶來視覺層次方面的問題。很多視覺元素看上去都混在了一起，使用戶很難立刻區(qū)分出列表當(dāng)中各個不同的投票項(xiàng) 目。

在我們繼續(xù)移除了一些視覺元素之后，這個更扁平更簡潔的頁面才變得清晰了一些。我們?nèi)サ袅艘恍┍尘?，拿掉了一些圖標(biāo)，另外為諸如評論和分享一類的文字按鈕使用了不同的配色。

失去了質(zhì)感和深度的界面元素迫使視覺設(shè)計師必須更加努力的工作，才能在界面當(dāng)中各種類型的元素之間創(chuàng)造出有意義的差異化。我認(rèn)為這正是為iOS7進(jìn)行設(shè)計的難點(diǎn)之一，它使你必須懂得怎樣簡化，怎樣使用更簡單的視覺形式來提供清晰明確的信息交流方式。

另外一個需要重點(diǎn)迭代的地方就是我們的標(biāo)簽欄。多虧設(shè)計師Thanh漂亮的作品，我們的標(biāo)簽欄不僅能夠提供關(guān)鍵功能的快速訪問入口，同時也可以很好的表達(dá)出我們產(chǎn)品的個性。不過當(dāng)我們簡單的將iOS7線條化的圖標(biāo)風(fēng)格融入到自己的界面當(dāng)中時，出現(xiàn)了兩個問題。

首先，新的風(fēng)格使我們的圖標(biāo)難以在最短時間內(nèi)表達(dá)其自身的含義。Aubrey Johnson最近指出，空心圖標(biāo)需要用戶花更多時間去理解，而我們發(fā)起的一輪投票看上去也證明了這一觀點(diǎn)。不過即使沒有這些理論和數(shù)據(jù)，我們也直到標(biāo)簽欄當(dāng)中的新圖標(biāo)在溝通效率上確實(shí)存在問題。其次，我們失去了原有的很多個性。于是我們不斷迭代，直到我們找到一種方案，既能保持自己的個性，同時又讓人覺得符合iOS7的風(fēng)格。

要在產(chǎn)品自己的個性與iOS7的個性之間尋求恰當(dāng)?shù)钠胶?，而不是簡單的將界面改造為iOS7風(fēng)格。如果將iOS7的視覺風(fēng)格比喻為語言，那么我們必須通過自己的聲音講出來。

此外，我們發(fā)現(xiàn)，在我們的一個關(guān)鍵界面——創(chuàng)建投票界面當(dāng)中，扁平化的程度有些過了量。當(dāng)我們第一次將這個界面改造為iOS7風(fēng)格時，功能的優(yōu)先級無法體現(xiàn)出來了；而在從前的版本中，這正是通過元素的質(zhì)感與深度來確立的。

為了體現(xiàn)清晰的層次關(guān)系，以便讓用戶知道他們在創(chuàng)建投票時首先應(yīng)該做些什么，我建議在默認(rèn)情況下對那些次級元素進(jìn)行模糊化處理，使用戶的注意力集中在最優(yōu)先的功能上。

不過最終，鑒于可用性方面的考慮，以及時間成本方面的問題，我們放棄了這種方案。不過我們?nèi)栽诒３值?，很快，為iOS7專門打造的Polar就會 推出。如果你有興趣的話，屆時不妨安裝一個，看看我們的設(shè)計是怎樣進(jìn)行過渡的。我們自己很享受這次重設(shè)計的旅程，相信你也會的。

來源：互聯(lián)網(wǎng)er的早讀課