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

標籤：des   com   http   blog   style   img   c   log   t   size   sp   

簡介：

本文翻譯自《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

 

 後續內容，請在部落格園搜尋：葛布林大帝