簡介：
本文翻譯自《iOS7 by Tutorials》一書的第一章“Designing for iOS 7”，主要從程序員角度介紹了iOS7的新設計理念，堪稱神作！本文翻譯僅作學習交流之用，版權歸原作者所有，有刪減。非專業翻譯人士粗糙之處在所難免，想體會原文精髓的朋友請到Raywenderlich商店支持正版。
—————— by 葛布林大帝
關於作者：
這篇文章的原作者是Jeremy Olson，一個頂級設計師加程序大牛，多款應用位列蘋果商店的前100名。雖說本文主題是界面設計，但其偉大的地方在於，它是說給程序猿聽的！
目錄：
一、iOS7的設計不同以往
- 1.為什么要為iOS7重新設計？
- 2.iOS7的新設計原則
- 3.iOS7的設計關鍵字：聚焦
二、聚焦於功能
- 1.應用的定義
- 2.一個想做所有事的應用，什么都做不了
- 3.一個為想為所有人設計的應用，誰都吸引不了
三、聚焦於設計基礎
- 1.對比度
- 2.重復
- 3.對齊
- 4.靠近
- 5.排版
四、聚焦於內容
- 1.刪除不必要的內容
- 2.內容為王
五、聚焦於交互
- 1.魔法般的Touch
- 2.直接操作
- 3.物理仿真和動畫
- 4.三維
- 5.手勢和導航
- 6.個性
六、在App世界留下你的印記
七、最后的挑戰
一、iOS7的設計不同以往
1.為什么要為iOS7重新設計？
我的團隊意識到，花一些時間重新設計我們的應用以適應iOS7是一項有價值的投入。專為iOS7設計的應用將會在蘋果商店如魚得水，因為：
- 用戶
- 希望自己使用的應用適應iOS7環境
- 媒體
- 不想要看起來老舊的應用作為封面
- 蘋果
- 更喜歡應用迎接他們的新設計原則
2.iOS7的新設計原則
正如許多人一樣，剛開始接觸iOS7時，我也很不爽它的改變：扁平化、毫無質感並且單調。但過了一段時間我開始喜歡上它，因為我發現了蘋果最新的設計原則有跡可循：
- 新的焦點
- 所有的重點其實就是讓你的視線聚集到內容與交互上，你不再需要總是上下掃視來尋找你需要的內容。
- 多樣化的到來
- 最好的iOS7應用將不僅僅是模仿“設置”或“日歷”的界面。最好的應用將使用新的設計語言作為起點，並且把他們創新到極致。就像iOS6上最好的應用一樣，一旦iOS7平台成熟，將會產生大量的多樣化應用.
現在讓我們一起解開層層包裹，在iOS7上構建偉大的應用吧！
3.iOS7的設計關鍵字：聚焦
當我開始為iOS7設計應用時，我試圖尋找一個詞匯來解釋所有事情，現在我將要說這個詞就是：聚焦。
與很多流行的觀點相反，iOS7並不是關於扁平化的設計。它包含了大量驚人的非扁平化元素，事實上iOS7的三維元素比以往任何iOS早起版本都多。相應的，iOS7其實移除讓人分心的元素，以聚焦在三個關鍵概念上（這些概念反復被蘋果用來描述他們的新設計哲學）：
- 清晰
- 聚焦於基本圖形設計，把目光放在功能上
- 順從
- 聚焦於內容
- 深度
- 聚焦於交互
我相信最好的iOS7應用將會用他們獨特的方式闡述這三個概念。
二、聚焦於功能
偉大的應用並不是從你拿出你的速寫本或打開Photoshop開始，相反的，它開始於兩個問題：
- 誰是這個應用的用戶？
- 這個應用解決什么問題？
1.應用的定義
一個應用的定義聽起來像這樣：誰是應用的使用者？這個應用解決什么問題？而我的應用里，這個定義聽起來像這樣：為特定用戶提高效率
2.一個想做所有事的應用，什么都做不了
你的應用應該聚焦在一個問題上。如果你無法用一句話來描述你的應用是干嘛的，那你的應用一定是太大了，並且很難給人留下深刻印象。這使得用戶疑惑你的應用具備哪些功能，並且難以與用戶的朋友分享。
3.一個為想為所有人設計的應用，誰都吸引不了
讓一個應用為所有人設計其實是一個陷阱。當你的應用為所有人設計，其實就是不為任何人設計。不過如果你為一個特定人群設計應用，並且讓他們使用得爽的話，他們就有可能帶動另一群人來使用你的應用。
三、聚焦於設計基礎
自從iOS7不再強調質感的用戶界面元素例如紋理、傾斜和chrome，你需要牢牢抓住圖形設計的基礎原則。Steven Bradley這樣形容它：
“當你剝開一件事物的裝飾，留下的應該是它的核心基礎。很不幸的是，太多的扁平化設計僅僅聚焦在外表的扁平化上，而忽視了最基礎的設計准則。”
讓我們不要落入這個陷阱。雖然我不能充分滿足設計的所有的基本層面，但我至少可以講一些基本的圖形設計原則，讓我們開始吧！
1.對比度
1.1.對比度簡介
對比度是兩個元素之間的視覺差異，它可以通過顏色、紋理或其他元素風格來形成對比。左邊的文本具有高對比度，因為文本顏色與背景顏色非常不同，這使得文本非常可見；右側的文本與背景對比度非常低，這使得它幾乎看不見。請注意你的眼睛會自動吸引到左邊的框，高對比度元素的合理應用可以讓你的設計大放異彩。對比度是一個非常強大的工具，但必須謹慎地使用。如果在屏幕上出現太多的高對比度元素，用戶的眼睛會不知道往哪兒放。
1.2.對比度的作用
- 高亮
- 強調最重要的元素，淡化次要的元素
- 秀色可餐
- 讓整體的設計更具視覺活力
- 狀態
- 顯示一個元素的狀態是活動還是休眠
- 可讀性
- 確保文本易於閱讀
1.3.對比度之挑戰
1.3.1.問題：
一起來看看下面的截圖，顯然這個用戶界面是有缺陷的。但究竟錯在哪里？你會怎樣解決它？
記下所有你注意到的設計缺陷（提示：它沒有使用對比！），接着看看下面有注解的版本：
1.3.2.注解版本
1.3.3.修改版本
啊哈！現在界面看起來好多了！這些新的設計更加美觀、專業並且更具功能性。
2.重復
2.1.重復簡介
重復聽起來像這樣：同一個對象或樣式重演。如果兩個元素有聯系，他們應該有着相似的視覺風格。缺乏重復的UI看起來很奇怪，因為人類使用模式思維來感知世界。
2.2.重復之挑戰
2.2.1.問題：
再一次，看看下面的屏幕截圖。對，它看起來不專業，但是為什么呢？和以前一樣，記下任何你的發現（提示：它有很多元素需要重復！）
2.2.2.注解版本：
2.2.3.修改版本：恰當地使用重復，使這個應用更容易直觀呈現所需的信息
3.對齊
3.1.對齊簡介
對齊是關於視覺對象相互連接的方式。任何程序員應該好好學習對齊，因為定位錯誤是程序員實現設計時最容易犯錯的地方之一。對應的基本思路是，不應在屏幕上任意擺放元素，每一個元素應至少與其他一個元素連接。這可能意味着兩件事情：
- 邊緣對齊
- 沿着邊緣線垂直或者水平對齊
- 居中對齊
- 居中垂直或水平對齊
3.2.對齊之挑戰
3.2.1.問題：來看看下面的截圖，看你是否能找出對齊的問題
3.2.2.注解版本：從遠處看，下面的屏幕看起來還好。但如果你仔細觀察，你會發現，對准誤差使畫面看起來蓬亂和業余。看下圖的對齊線：
3.2.3.修改版本：紅色的線表示水平對齊方式，屏幕上的元素沒有精確對准的任何其他元素，造成對齊線的雜亂。對齊線是非常有用的工具，利用它調整一下界面，看，更少的對齊線代表元素的整齊，這讓用戶的眼睛更加舒服：
4.靠近
4.1.靠近簡介
靠近指的是，如果一些元素是相關的，他們應該靠在一起。如果兩個元素沒有關系，他們應該遠離對方。開發者往往希望最大化利用屏幕，最好每個像素都塞滿東西。雖然這可能是有效的，但也產生了一個混亂的布局。留白，這是你組織元素時最強大的工具，它能幫助你的用戶毫不費力的理解各內容的意義。
4.2.靠近之挑戰
4.2.1.問題：看看你能不能找出下圖的靠近問題
4.2.2.注釋版本
4.2.3.修改版本：很明顯，無關的元素不當靠近，會使元素之間的關系非常混亂。你將如何解決這些問題？下面是我的一個解決方案，但總有很多不同的方式來解決設計問題。當一切都正確組合時，應用中各元素的功能將更加清晰！
5.排版
5.1.排版原則
下面是排版時要考慮的一些通用規則：
- 5.1.1.最多使用三種字體
- 這包括不同字體和同一字體內風格的組合，如字體、顏色、大小、以及粗體和斜體修飾符的組合。太多的字體會打亂你的布局一致性。
- 5.1.2.有節制地使用文字居中
- 有時候，你絕對需要居中的文本，如導航欄標題，但經驗告訴我們最好盡可能避免使用它。左或右對齊的文本布局通常顯得更加專業。
- 5.1.3.保持你的字體簡單
- 增強文本易讀性。
- 5.1.4.提前測試字體大小
- iOS7提供用戶修改字體大小的選項。一定要提前在你的應用上測試所有能選擇的字體大小，使之看起來都一樣的舒適。
- 5.1.5.使用差異較大的字體來區分內容
- 同一屏幕上盡量少用相似的字體，那會讓用戶分不清它們的區別。應用差異較大的字體，讓用戶輕易分辨出它們內容的不同。
- 5.1.6.使用同一字體的風格變換
- 靈活運用字體顏色、大小、以及粗體和斜體修飾符的組合，用以突出一些重要的內容。
這么多條要記住可能不容易，其實你只需要記住最關鍵的一條：讓用戶界面保持一致。如果應用界面看起來不夠舒適，那排版一定出了什么問題。
5.2.排版之挑戰
5.2.1.問題：下面的排版出了什么問題？
5.2.2.注釋版本
5.2.3.修改版本
這個程序已經變得更漂亮、更實用，而你所做的僅僅是改變字體。
此時，您已經了解五個基本設計：對比、重復、對齊、接近和排版。記住，在iOS7里，注重基礎設計原則是非常重要的。另外推薦一本設計類的書《The Non- Designers Design》by Robin Williams
后續內容，請在博客園搜索：葛布林大帝