乍看上去，“為iOS7重設(shè)計”無非就是新的應(yīng)用圖標(biāo)、無邊框按鈕、與導(dǎo)航欄配色相匹配的狀態(tài)欄等等。不過如果你再深入挖掘一些，便會發(fā)現(xiàn)很多耀眼的地方都體現(xiàn)著iOS7的三大設(shè)計主題，即“依從、清晰、縱深”。
對于某些應(yīng)用來說，這些改變帶來了設(shè)計上的極大改善，而另外一些則甚至比從前還要糟糕，不僅可用性被破壞，而且品牌識別效應(yīng)也大打折扣。本文會圍繞著iOS7 UI過渡指南當(dāng)中提出的一些關(guān)鍵性的設(shè)計解決方案，介紹一些比較有代表性的應(yīng)用案例。如果你正計劃著升級自己的產(chǎn)品，或是以iOS7風(fēng)格為準(zhǔn)繩從零開始設(shè)計應(yīng)用，那么這些例子可能會幫你更好的起步。
1.全屏布局與半透明UI元素
iOS7允許應(yīng)用界面充分利用“邊到邊”的全屏空間。舉個例子，如果你的應(yīng)用當(dāng)中會顯示系統(tǒng)狀態(tài)欄，那么在iOS7下，你也許需要讓用戶透過狀態(tài)欄看到它“后面”的模糊化的內(nèi)容。類似的，如果你的應(yīng)用會用到其他一些標(biāo)準(zhǔn)控件，例如導(dǎo)航欄、標(biāo)簽欄、工具欄、搜索欄、范圍欄(scope bar)，那么在iOS7當(dāng)中，這些控件背后的內(nèi)容都可以模糊的呈現(xiàn)出來。如果你決定充分利用系統(tǒng)新特性來實現(xiàn)這些效果，那么就要確保內(nèi)容視圖的尺寸可以填滿整個屏幕，包括這些控件背后的區(qū)域。更多細(xì)節(jié)可以參考iOS7界面設(shè)計規(guī)范當(dāng)中的Bars一節(jié)。
案例
大量的iOS7應(yīng)用都使用了半透明狀態(tài)欄，能夠以模糊效果呈現(xiàn)底部的內(nèi)容。Twitter的做法則相對保守，他們通過自定義控件的方式制作了狀態(tài)欄和導(dǎo)航欄，使他們的顏色相配，并能呈現(xiàn)半透明效果。而其他一些應(yīng)用，例如Instagram、Foodspotting和The New York Times等則打破了狀態(tài)欄的邊界，通過新的布局方式呈現(xiàn)全出血(full-bleed)效果的照片。
The New York Times在狀態(tài)欄和導(dǎo)航欄都使用了毛玻璃效果，并利用全屏空間來展示全出血效果的照片。
Twitter的狀態(tài)欄與導(dǎo)航欄顏色相配，并且都可以呈現(xiàn)半透明效果。
2.層與動效
iOS7 UI過渡指南推薦通過不同的層面來體現(xiàn)內(nèi)容的層次，以增強(qiáng)界面對象之間的關(guān)聯(lián)性。當(dāng)用戶在不同的層面之間切換時，要為其提供強(qiáng)化的動畫效果來進(jìn)一步增強(qiáng)內(nèi)容層次與深度的概念。
案例
在iOS7中，層面在很多時候被用來展示那些位于圖片之上的文字，例如Yahoo!新聞中的照片，以及musicXmatch當(dāng)中專輯的呈現(xiàn)方式。此外，層面還可以用來為用戶提供某些快速訪問的功能，例如iOS7自身的通知中心和控制中心。
另外一個例子，Huffington Post應(yīng)用通過一個單獨的層來呈現(xiàn)“全部分類(All Sections)”界面。雖然交互方式?jīng)]什么問題，但以模糊效果從該層面底部透出的照片卻沒有什么實際意義，反而會給用戶造成困惑。
關(guān)于動畫過渡效果，你可以在Luvocracy應(yīng)用當(dāng)中發(fā)現(xiàn)一些很有效的運用方式，例如其左側(cè)導(dǎo)航的模糊放大效果，以及展示產(chǎn)品頁照片時的彈跳效果等。另外，F(xiàn)lipboard在其封面上使用的視差動效也是個不錯的例子。
3.負(fù)空間(留白)與配色
iOS7界面設(shè)計規(guī)范中的“為iOS7設(shè)計”一節(jié)建議設(shè)計師們移除界面中不必要的裝飾性元素，并充分利用留白：
“留白可以使重要的內(nèi)容及功能更加突出。同時，留白還可以傳達(dá)出一種平靜和穩(wěn)定的感覺，使應(yīng)用看上去更加專注和高效?！?/p>
此外，他們還建議通過配色來簡化UI：
“一種關(guān)鍵的顏色——例如備忘錄應(yīng)用中的黃色——可以突出重要信息，并巧妙的暗示出元素的可交互性。同時，它也可以為應(yīng)用帶來具有一致性的視覺主題?！?/p>
案例
然而，很多應(yīng)用要么忽視了這條建議，要么執(zhí)行的有些過頭。無論出于怎樣的原因，大量應(yīng)用當(dāng)中充斥著過多的留白，而顏色卻過于稀疏微弱。這種風(fēng)格對于蘋果來說也許是不錯的，因為它們具有明顯的iOS7風(fēng)格，但對于應(yīng)用本身來說也許會產(chǎn)生負(fù)面效應(yīng)，因為這種平淡的設(shè)計風(fēng)格可能會稀釋掉產(chǎn)品的品牌識別效應(yīng)。在大量淺色風(fēng)格的應(yīng)用當(dāng)中，例如Snapguide這樣配色豐富的應(yīng)用也許能給用戶帶來更多驚喜，使其更受歡迎。
4.動態(tài)字體
動態(tài)字體可以針對任何字號的文字內(nèi)容自動調(diào)整其字間距和行間距。如果你準(zhǔn)備采用動態(tài)字體技術(shù)，那么應(yīng)用中的文字內(nèi)容格式會隨著用戶在系統(tǒng)“設(shè)置”當(dāng)中對字號的調(diào)整而自動響應(yīng)變化。那些以文字閱讀為主的應(yīng)用將會極大的受益于這項技術(shù)，例如新聞、文章、郵件、微博等等。對這類應(yīng)用來說，采用動態(tài)字體技術(shù)就意味著用戶無需進(jìn)行很多設(shè)置便能得到更具一致性的閱讀體驗。
案例
當(dāng)前，采用動態(tài)字體技術(shù)的應(yīng)用還不是很多。這里有一個很簡單的原因：那些會受益于這項技術(shù)的應(yīng)用當(dāng)中，多數(shù)已經(jīng)包含了字號調(diào)整方面的功能。不過這類訂制化的解決方案并不理想，因為這意味著用戶需要針對每個不同的應(yīng)用來單獨設(shè)置最合適的字號。
采用了動態(tài)字體技術(shù)的The New York Times應(yīng)用在大字號下的表現(xiàn)。
5.自動布局
正如iOS7開發(fā)文檔中所介紹的，充分利用自動布局技術(shù)的應(yīng)用可以更加輕松的從iOS6過渡到iOS7適配，因為這些技術(shù)可以幫助應(yīng)用自動調(diào)整UI元素的尺寸。如果同時采用自動布局及動態(tài)字體技術(shù)，那么應(yīng)用的界面元素也可以隨著字號的變化而響應(yīng)式的調(diào)整，幫你實現(xiàn)諸如用戶在調(diào)小字號之后界面布局自動從一列變?yōu)閮闪械男枨蟆?/p>
案例
當(dāng)人們采用動態(tài)布局技術(shù)來解決從iOS6向iOS7過渡的問題時，從表面看來似乎難以發(fā)現(xiàn)什么明顯的變化。而另一方面，如果同時使用動態(tài)字體技術(shù)，那么變化會更容易被發(fā)現(xiàn)。我的意思是，目前我還沒找到這方面的實際案例；如果你發(fā)現(xiàn)了一些，不妨分享給大家。
6.應(yīng)用圖標(biāo)和控件圖標(biāo)
iOS7在應(yīng)用圖標(biāo)方面有很多變化，詳情可以參考iOS7界面設(shè)計規(guī)范當(dāng)中的圖標(biāo)與圖形尺寸一節(jié)。其中，我們可以注意到的變化包括略微增大的圖標(biāo)尺寸、新的黃金分割率網(wǎng)格、新的配色方案、更加扁平的風(fēng)格、曲線輪廓等等。此外，蘋果建議第三方應(yīng)用的設(shè)計師們重新設(shè)計控件當(dāng)中的自定義按鈕圖標(biāo)，使它們看上去更輕量，更貼近iOS7原生風(fēng)格。
案例
幾乎所有的iOS7應(yīng)用都重新設(shè)計了它們的應(yīng)用圖標(biāo)，因為這一點在iOS7 UI過渡規(guī)范當(dāng)中是有明確要求的。然而，只有一部分應(yīng)用依照iOS7風(fēng)格重新設(shè)計了它們的按鈕圖標(biāo)。有些應(yīng)用只是很勉強(qiáng)的做了些改變，特別是那些曾經(jīng)為了突出品牌效應(yīng)而自定義設(shè)計過圖標(biāo)的應(yīng)用。這里也有一個時間的問題，也許所有的應(yīng)用最終都會在它們看上去開始落伍的時候升級它們的圖標(biāo)設(shè)計，否則就可能被用戶嘲笑“哦，那個應(yīng)用看上去太iOS6了！”。
Shazam面向iOS7重新設(shè)計了他們的圖標(biāo)。
Ted應(yīng)用同樣重新設(shè)計了標(biāo)簽欄上的按鈕圖標(biāo)。
7.無邊框按鈕
蘋果建議僅在非常必要的時候為按鈕添加邊框或背景。這里的基本原理是，用戶通常都知道在各種控件欄和動作表單、警告框中的元素是可以交互的，因此邊框并不是必需的。而iOS7 UI過渡指南當(dāng)中也提到一些例外情況，例如內(nèi)置的“時鐘”應(yīng)用當(dāng)中用來啟動計時的圓形按鈕，或是iTunes當(dāng)中帶有邊框的“購買”按鈕。
案例
無邊框按鈕已經(jīng)在iOS7應(yīng)用當(dāng)中被廣泛使用了，因為這個改變的成本及其造成的影響都不大。當(dāng)用在導(dǎo)航欄當(dāng)中時，它們是很明顯的可交互元素；然而，當(dāng)出現(xiàn)在主要文字內(nèi)容附近時，有些無邊框按鈕看上去只是樣式特殊的文字而已。造成這種情況的原因之一，就是對于無邊框按鈕來說，每個應(yīng)用都有自己的“關(guān)鍵色”，例如Foodspotting的綠色，或是Opentable的紅色。
Foodspotting里的一些無邊框按鈕在用戶看來并不具備交互性。
Snapguide應(yīng)用導(dǎo)航欄上的無邊框按鈕。
8.其它視圖和UI控件
iOS7當(dāng)中包含大量的標(biāo)準(zhǔn)控件升級，例如日期選擇器、添加聯(lián)系人按鈕、詳情展開按鈕、信息按鈕、頁碼控制器、選擇器、進(jìn)度條、刷新控制器、分段控制器、滑塊、計步器、切換、文本域等。例如動作表單、警告框、模態(tài)視圖一類的臨時性視圖也在視覺呈現(xiàn)方式上發(fā)生了變化。對這些控件進(jìn)行升級不會對應(yīng)用產(chǎn)生重大的影響，因為它們的基本構(gòu)成方式和交互方式并沒有發(fā)生根本性的變化。更多詳情可以參考iOS7界面設(shè)計規(guī)范當(dāng)中的Controls一節(jié)。
案例
大量的應(yīng)用都開始使用iOS7風(fēng)格的新標(biāo)準(zhǔn)控件，因為這類升級是完全“免費”的，無需代碼方面的變動。這其中有一點值得提及，就是標(biāo)準(zhǔn)的切換控件在激活狀態(tài)時的顏色是可以自定義的。雖然看上去沒太大所謂，但這點細(xì)節(jié)可以使你的應(yīng)用界面看上去更具一致性。另外一點受歡迎的變化就是新的列表結(jié)構(gòu)，它可以延伸到界面邊緣，給用戶帶來更多的可點擊空間。
Luvocracy的注冊界面使用了新的iOS7列表控件。
Luvocracy將切換控件的激活狀態(tài)定制為紅色。
Foodspotting當(dāng)中的切換控件在激活狀態(tài)時為綠色。
9.手勢
在iOS7里，用戶可以從界面底部向上滑動，來展開控制中心。類似的，如果用戶希望訪問通知中心，他們可以從界面頂端向下滑動。那些使用了類似手勢命令的應(yīng)用可能需要重新考慮相關(guān)功能的觸發(fā)方式，以避免和這些系統(tǒng)手勢產(chǎn)生沖突。
案例
不幸的是，即使在手勢操作上與iOS7沒有明顯的沖突，應(yīng)用也有可能受到這些系統(tǒng)級手勢的影響。例如在The New York Times當(dāng)中，用戶在向上滾屏瀏覽內(nèi)容時有可能不小心觸發(fā)控制中心的展開。而有些應(yīng)用改變了它們從前的導(dǎo)航風(fēng)格，以避免與系統(tǒng)手勢產(chǎn)生沖突。舉個例子，新版本的Facebook應(yīng)用在主屏使用標(biāo)簽欄作為導(dǎo)航，很可能是為了避免與系統(tǒng)級的右滑回退手勢產(chǎn)生沖突？雖然蘋果在手勢操作方面的改變是值得贊賞的，但實現(xiàn)方式上也有一定的弊端。
Facebook重回標(biāo)簽欄導(dǎo)航的時代。
10.系統(tǒng)改進(jìn)
除了以上所說的這些在應(yīng)用內(nèi)部可能產(chǎn)生的改變以外，系統(tǒng)級的變化也可能影響第三方應(yīng)用，這當(dāng)中值得注意的一點就是包含了Airdrop功能的分享表單(Share Sheet)，以及多任務(wù)機(jī)制。如果你的應(yīng)用已經(jīng)整合了系統(tǒng)原生的分享表單，那么在iOS7當(dāng)中它們會自動更新到新的版本。同樣，曾經(jīng)僅限于內(nèi)置應(yīng)用的多任務(wù)功能現(xiàn)在有了更廣泛的運用范圍，這也意味著內(nèi)容的下載和更新可以在后臺自動執(zhí)行了。
案例
我們已經(jīng)可以在很多應(yīng)用當(dāng)中看到包含了Airdrop功能的分享表單了，不過更多的應(yīng)用仍在使用舊版的動作表單，或是自定義的解決方案。你不能指責(zé)他們，畢竟新的分享表單在實現(xiàn)方式上還是有一定復(fù)雜度的。
對于多任務(wù)來說，當(dāng)前有很多新聞或照片媒體類的應(yīng)用都已經(jīng)開始使用這方面的功能來實現(xiàn)后臺的上傳或下載。幸運的是，如果相關(guān)功能產(chǎn)生了性能方面的問題，用戶可以在系統(tǒng)的“設(shè)置”當(dāng)中手動關(guān)閉多任務(wù)功能，不過我懷疑有多少人有能力準(zhǔn)確的發(fā)現(xiàn)這方面的問題。
The New York Times使用了新的分享表單，包括Airdrop功能。
