10月3日，似乎是假期的第三天了，日子已經過到無可名狀的樣子了。把小病貓從醫院接了回來，病情穩定了些，至少眼下還沒有繼續惡化下去。每天喂5種藥，并且將貓糧泡成漿糊強行喂食。那么像現在這樣可以在間歇當中抽些時間出來專心打幾個字，更新一下博客，已經變成了奢侈的享受，很珍惜。

不知這樣的日子什么時候可以結束，希望是以好的方式逐漸恢復正常。但不知哪里來的勇氣，在這樣的狀態里卻悄悄鼓起了一些力氣，一方面盡力維護小貓的狀態，一方面努力珍惜分分秒秒空閑的時間看些書，做做事。總會好起來的。不過還是買了瓶JD陪著自己，這種時候還是需要一些的，半口下去頭疼就能好些。另外也真心感謝在微博和微信里給小貓祝福，給我鼓勵的各位朋友們。

那么就來看本周譯文唄；之前的幾篇都是資源和參考方面的更新，今天恢復一下常態吧。

這里開始譯文。乍看上去，“為iOS7重設計”無非就是新的應用圖標、無邊框按鈕、與導航欄配色相匹配的狀態欄等等。不過如果你再深入挖掘一些，便會發現很多耀眼的地方都體現著iOS7的三大設計主題，即“依從、清晰、縱深”。

對于某些應用來說，這些改變帶來了設計上的極大改善，而另外一些則甚至比從前還要糟糕，不僅可用性被破壞，而且品牌識別效應也大打折扣。本文會圍繞著iOS7 UI過渡指南當中提出的一些關鍵性的設計解決方案，介紹一些比較有代表性的應用案例。如果你正計劃著升級自己的產品，或是以iOS7風格為準繩從零開始設計應用，那么這些例子可能會幫你更好的起步。

1.全屏布局與半透明UI元素

iOS7允許應用界面充分利用“邊到邊”的全屏空間。舉個例子，如果你的應用當中會顯示系統狀態欄，那么在iOS7下，你也許需要讓用戶透過狀態欄看到它“后面”的模糊化的內容。類似的，如果你的應用會用到其他一些標準控件，例如導航欄、標簽欄、工具欄、搜索欄、范圍欄(scope bar)，那么在iOS7當中，這些控件背后的內容都可以模糊的呈現出來。如果你決定充分利用系統新特性來實現這些效果，那么就要確保內容視圖的尺寸可以填滿整個屏幕，包括這些控件背后的區域。更多細節可以參考iOS7界面設計規范當中的Bars一節。

案例

大量的iOS7應用都使用了半透明狀態欄，能夠以模糊效果呈現底部的內容。Twitter的做法則相對保守，他們通過自定義控件的方式制作了狀態欄和導航欄，使他們的顏色相配，并能呈現半透明效果。而其他一些應用，例如Instagram、Foodspotting和The New York Times等則打破了狀態欄的邊界，通過新的布局方式呈現全出血(full-bleed)效果的照片。

The New York Times在狀態欄和導航欄都使用了毛玻璃效果，并利用全屏空間來展示全出血效果的照片。

Twitter的狀態欄與導航欄顏色相配，并且都可以呈現半透明效果。

2.層與動效

iOS7 UI過渡指南推薦通過不同的層面來體現內容的層次，以增強界面對象之間的關聯性。當用戶在不同的層面之間切換時，要為其提供強化的動畫效果來進一步增強內容層次與深度的概念。

案例

在iOS7中，層面在很多時候被用來展示那些位于圖片之上的文字，例如Yahoo!新聞中的照片，以及musicXmatch當中專輯的呈現方式。此外，層面還可以用來為用戶提供某些快速訪問的功能，例如iOS7自身的通知中心和控制中心。

另外一個例子，Huffington Post應用通過一個單獨的層來呈現“全部分類(All Sections)”界面。雖然交互方式沒什么問題，但以模糊效果從該層面底部透出的照片卻沒有什么實際意義，反而會給用戶造成困惑。

關于動畫過渡效果，你可以在Luvocracy應用當中發現一些很有效的運用方式，例如其左側導航的模糊放大效果，以及展示產品頁照片時的彈跳效果等。另外，Flipboard在其封面上使用的視差動效也是個不錯的例子。

3.負空間(留白)與配色

iOS7界面設計規范中的“為iOS7設計”一節建議設計師們移除界面中不必要的裝飾性元素，并充分利用留白：

“留白可以使重要的內容及功能更加突出。同時，留白還可以傳達出一種平靜和穩定的感覺，使應用看上去更加專注和高效。”

此外，他們還建議通過配色來簡化UI：

“一種關鍵的顏色——例如備忘錄應用中的黃色——可以突出重要信息，并巧妙的暗示出元素的可交互性。同時，它也可以為應用帶來具有一致性的視覺主題。”

案例

然而，很多應用要么忽視了這條建議，要么執行的有些過頭。無論出于怎樣的原因，大量應用當中充斥著過多的留白，而顏色卻過于稀疏微弱。這種風格對于蘋果來說也許是不錯的，因為它們具有明顯的iOS7風格，但對于應用本身來說也許會產生負面效應，因為這種平淡的設計風格可能會稀釋掉產品的品牌識別效應。在大量淺色風格的應用當中，例如Snapguide這樣配色豐富的應用也許能給用戶帶來更多驚喜，使其更受歡迎。

4.動態字體

動態字體可以針對任何字號的文字內容自動調整其字間距和行間距。如果你準備采用動態字體技術，那么應用中的文字內容格式會隨著用戶在系統“設置”當中對字號的調整而自動響應變化。那些以文字閱讀為主的應用將會極大的受益于這項技術，例如新聞、文章、郵件、微博等等。對這類應用來說，采用動態字體技術就意味著用戶無需進行很多設置便能得到更具一致性的閱讀體驗。

案例

當前，采用動態字體技術的應用還不是很多。這里有一個很簡單的原因：那些會受益于這項技術的應用當中，多數已經包含了字號調整方面的功能。不過這類訂制化的解決方案并不理想，因為這意味著用戶需要針對每個不同的應用來單獨設置最合適的字號。

采用了動態字體技術的The New York Times應用在大字號下的表現。

5.自動布局

正如iOS7開發文檔中所介紹的，充分利用自動布局技術的應用可以更加輕松的從iOS6過渡到iOS7適配，因為這些技術可以幫助應用自動調整UI元素的尺寸。如果同時采用自動布局及動態字體技術，那么應用的界面元素也可以隨著字號的變化而響應式的調整，幫你實現諸如用戶在調小字號之后界面布局自動從一列變為兩列的需求。

案例

當人們采用動態布局技術來解決從iOS6向iOS7過渡的問題時，從表面看來似乎難以發現什么明顯的變化。而另一方面，如果同時使用動態字體技術，那么變化會更容易被發現。我的意思是，目前我還沒找到這方面的實際案例；如果你發現了一些，不妨分享給大家。

6.應用圖標和控件圖標

iOS7在應用圖標方面有很多變化，詳情可以參考iOS7界面設計規范當中的圖標與圖形尺寸一節。其中，我們可以注意到的變化包括略微增大的圖標尺寸、新的黃金分割率網格、新的配色方案、更加扁平的風格、曲線輪廓等等。此外，蘋果建議第三方應用的設計師們重新設計控件當中的自定義按鈕圖標，使它們看上去更輕量，更貼近iOS7原生風格。

案例

幾乎所有的iOS7應用都重新設計了它們的應用圖標，因為這一點在iOS7 UI過渡規范當中是有明確要求的。然而，只有一部分應用依照iOS7風格重新設計了它們的按鈕圖標。有些應用只是很勉強的做了些改變，特別是那些曾經為了突出品牌效應而自定義設計過圖標的應用。這里也有一個時間的問題，也許所有的應用最終都會在它們看上去開始落伍的時候升級它們的圖標設計，否則就可能被用戶嘲笑“哦，那個應用看上去太iOS6了！”。

Shazam面向iOS7重新設計了他們的圖標。

Ted應用同樣重新設計了標簽欄上的按鈕圖標。

7.無邊框按鈕

蘋果建議僅在非常必要的時候為按鈕添加邊框或背景。這里的基本原理是，用戶通常都知道在各種控件欄和動作表單、警告框中的元素是可以交互的，因此邊框并不是必需的。而iOS7 UI過渡指南當中也提到一些例外情況，例如內置的“時鐘”應用當中用來啟動計時的圓形按鈕，或是iTunes當中帶有邊框的“購買”按鈕。

案例

無邊框按鈕已經在iOS7應用當中被廣泛使用了，因為這個改變的成本及其造成的影響都不大。當用在導航欄當中時，它們是很明顯的可交互元素；然而，當出現在主要文字內容附近時，有些無邊框按鈕看上去只是樣式特殊的文字而已。造成這種情況的原因之一，就是對于無邊框按鈕來說，每個應用都有自己的“關鍵色”，例如Foodspotting的綠色，或是Opentable的紅色。

Foodspotting里的一些無邊框按鈕在用戶看來并不具備交互性。

Snapguide應用導航欄上的無邊框按鈕。

8.其它視圖和UI控件

iOS7當中包含大量的標準控件升級，例如日期選擇器、添加聯系人按鈕、詳情展開按鈕、信息按鈕、頁碼控制器、選擇器、進度條、刷新控制器、分段控制器、滑塊、計步器、切換、文本域等。例如動作表單、警告框、模態視圖一類的臨時性視圖也在視覺呈現方式上發生了變化。對這些控件進行升級不會對應用產生重大的影響，因為它們的基本構成方式和交互方式并沒有發生根本性的變化。更多詳情可以參考iOS7界面設計規范當中的Controls一節。

案例

大量的應用都開始使用iOS7風格的新標準控件，因為這類升級是完全“免費”的，無需代碼方面的變動。這其中有一點值得提及，就是標準的切換控件在激活狀態時的顏色是可以自定義的。雖然看上去沒太大所謂，但這點細節可以使你的應用界面看上去更具一致性。另外一點受歡迎的變化就是新的列表結構，它可以延伸到界面邊緣，給用戶帶來更多的可點擊空間。

Luvocracy的注冊界面使用了新的iOS7列表控件。

Luvocracy將切換控件的激活狀態定制為紅色。

Foodspotting當中的切換控件在激活狀態時為綠色。

9.手勢

在iOS7里，用戶可以從界面底部向上滑動，來展開控制中心。類似的，如果用戶希望訪問通知中心，他們可以從界面頂端向下滑動。那些使用了類似手勢命令的應用可能需要重新考慮相關功能的觸發方式，以避免和這些系統手勢產生沖突。

案例

不幸的是，即使在手勢操作上與iOS7沒有明顯的沖突，應用也有可能受到這些系統級手勢的影響。例如在The New York Times當中，用戶在向上滾屏瀏覽內容時有可能不小心觸發控制中心的展開。而有些應用改變了它們從前的導航風格，以避免與系統手勢產生沖突。舉個例子，新版本的Facebook應用在主屏使用標簽欄作為導航，很可能是為了避免與系統級的右滑回退手勢產生沖突？雖然蘋果在手勢操作方面的改變是值得贊賞的，但實現方式上也有一定的弊端。

Facebook重回標簽欄導航的時代。

10.系統改進

除了以上所說的這些在應用內部可能產生的改變以外，系統級的變化也可能影響第三方應用，這當中值得注意的一點就是包含了Airdrop功能的分享表單(Share Sheet)，以及多任務機制。如果你的應用已經整合了系統原生的分享表單，那么在iOS7當中它們會自動更新到新的版本。同樣，曾經僅限于內置應用的多任務功能現在有了更廣泛的運用范圍，這也意味著內容的下載和更新可以在后臺自動執行了。

案例

我們已經可以在很多應用當中看到包含了Airdrop功能的分享表單了，不過更多的應用仍在使用舊版的動作表單，或是自定義的解決方案。你不能指責他們，畢竟新的分享表單在實現方式上還是有一定復雜度的。

對于多任務來說，當前有很多新聞或照片媒體類的應用都已經開始使用這方面的功能來實現后臺的上傳或下載。幸運的是，如果相關功能產生了性能方面的問題，用戶可以在系統的“設置”當中手動關閉多任務功能，不過我懷疑有多少人有能力準確的發現這方面的問題。

The New York Times使用了新的分享表單，包括Airdrop功能。

Albumatic仍在使用簡單的動作表單。

英文原文: http://www.touchytalk.com/?p=174