[iOS翻譯]《iOS7 by Tutorials》系列：iOS7的設計精髓(上)

簡介：

本文翻譯自《iOS7 by Tutorials》一書的第一章「Designing for iOS 7」，主要從程序員角度介紹了iOS7的新設計理念，堪稱神做！本文翻譯僅做學習交流之用，版權歸原做者全部，有刪減。非專業翻譯人士粗糙之處在所不免，想體會原文精髓的朋友請到Raywenderlich商店支持正版。

—————— by 葛布林大帝

關於做者：

這篇文章的原做者是Jeremy Olson，一個頂級設計師加程序大牛，多款應用位列蘋果商店的前100名。雖然說本文主題是界面設計，但其偉大的地方在於，它是說給程序猿聽的！

 

目錄：

1、iOS7的設計不一樣以往

• 1.爲何要爲iOS7從新設計？
• 2.iOS7的新設計原則
• 3.iOS7的設計關鍵字：聚焦

2、聚焦於功能

• 1.應用的定義
• 2.一個想作全部事的應用，什麼都作不了
• 3.一個爲想爲全部人設計的應用，誰都吸引不了

3、聚焦於設計基礎

• 1.對比度
• 2.重複
• 3.對齊
• 4.靠近
• 5.排版

4、聚焦於內容

• 1.刪除沒必要要的內容
• 2.內容爲王

5、聚焦於交互

• 1.魔法般的Touch
• 2.直接操做
• 3.物理仿真和動畫
• 4.三維
• 5.手勢和導航
• 6.個性

6、在App世界留下你的印記

7、最後的挑戰

 

 

1、iOS7的設計不一樣以往

1.爲何要爲iOS7從新設計？

個人團隊意識到，花一些時間從新設計咱們的應用以適應iOS7是一項有價值的投入。專爲iOS7設計的應用將會在蘋果商店如魚得水，由於：

• 用戶　　
  • 但願本身使用的應用適應iOS7環境
• 媒體
  • 不想要看起來老舊的應用做爲封面
• 蘋果
  • 更喜歡應用迎接他們的新設計原則

 

2.iOS7的新設計原則

正如許多人同樣，剛開始接觸iOS7時，我也很不爽它的改變：扁平化、毫無質感而且單調。但過了一段時間我開始喜歡上它，由於我發現了蘋果最新的設計原則有跡可循：

• 新的焦點
  • 全部的重點其實就是讓你的視線彙集到內容與交互上，你再也不須要老是上下掃視來尋找你須要的內容。
• 多樣化的到來
  • 最好的iOS7應用將不只僅是模仿「設置」或「日曆」的界面。最好的應用將使用新的設計語言做爲起點，而且把他們創新到極致。就像iOS6上最好的應用同樣，一旦iOS7平臺成熟，將會產生大量的多樣化應用.

如今讓咱們一塊兒解開層層包裹，在iOS7上構建偉大的應用吧！

 

3.iOS7的設計關鍵字：聚焦

當我開始爲iOS7設計應用時，我試圖尋找一個詞彙來解釋全部事情，如今我將要說這個詞就是：聚焦。

與不少流行的觀點相反，iOS7並非關於扁平化的設計。它包含了大量驚人的非扁平化元素，事實上iOS7的三維元素比以往任何iOS早起版本都多。相應的，iOS7其實移除讓人分心的元素，以聚焦在三個關鍵概念上（這些概念反覆被蘋果用來描述他們的新設計哲學）：

• 清晰
  • 聚焦於基本圖形設計，把目光放在功能上　　
• 順從
  • 聚焦於內容　　
• 深度
  • 聚焦於交互　　

我相信最好的iOS7應用將會用他們獨特的方式闡述這三個概念。

 

2、聚焦於功能  

偉大的應用並非從你拿出你的速寫本或打開Photoshop開始，相反的，它開始於兩個問題：

• 誰是這個應用的用戶？
• 這個應用解決什麼問題？

 

 1.應用的定義

一個應用的定義聽起來像這樣：誰是應用的使用者？這個應用解決什麼問題？而個人應用裏，這個定義聽起來像這樣：爲特定用戶提升效率

 

2.一個想作全部事的應用，什麼都作不了

 

你的應用應該聚焦在一個問題上。若是你沒法用一句話來描述你的應用是幹嗎的，那你的應用必定是太大了，而且很難給人留下深入印象。這使得用戶疑惑你的應用具有哪些功能，而且難以與用戶的朋友分享。

 

3.一個爲想爲全部人設計的應用，誰都吸引不了

讓一個應用爲全部人設計實際上是一個陷阱。當你的應用爲全部人設計，其實就是不爲任何人設計。不過若是你爲一個特定人羣設計應用，而且讓他們使用得爽的話，他們就有可能帶動另外一羣人來使用你的應用。

 

 

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

 

 後續內容，請在博客園搜索：葛布林大帝