《iOS7 by Tutorials》系列：iOS7的設計精髓(上)

這篇文章的原做者是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裏，注重基礎設計原則是很是重要的。