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

標籤：style   blog   code   ext   color   strong   

我們繼續上篇的內容

 

四、聚焦於內容

在iOS7裡，強調的不是眼花繚亂的裝飾效果，而是最重要的內容本身。

下面我們來探討這個主題：

 

1.刪除不必要的內容

偉大的設計更多是減法和加法的組合。

雖然很酷的想法是很重要，但還有更重要的 ———— 殺死那些很酷的想法，以保持應用程式的重點。

 

1.1.不再強調chrome

chrome是指您的應用裡不是內容本身的一部分，如導覽列和標籤欄。

iOS 7非常不建議使用chrome，有些應用程式甚至會就乾脆刪除它。如果想要還原chrome的設計，請考慮以下幾點：

 

1.1.1.chrome是需要的嗎？

仔細考慮，如果你真的在首頁使用chrome。是把它當做導航？蘋果建議刪除所有chrome符號，從而使使用者單獨瀏覽內容。

左右各一個按鈕的導航模式非常易於理解，而無需使用chrome。

使用chrome作為導航：

 

1.1.2.使用簡單的背景

相比厚重的紋理，使用簡單、透明的背景更能突出內容，蘋果的毛半透明效果就是一個非常好的例子。

蘋果試圖在iOS7裡面使chrome的顏色和背景相同，用來確保chrome消失。但要記住，這樣做很可能產生相反的效果，因為它會導致chrome在視覺上與內容混合，讓人難以區分。當chrome和內容看起來是一樣的，他們就看起來同樣重要。消滅隱藏的chrome，也就是說，chrome和背景的對比並不總是一件壞事。

請注意狀態列是與導覽列融合的，這裡以一種優雅的方式融合了兩者：

 

1.1.3.如果可能，隱藏chrome

思考一下，當chrome不在使用狀態時，你可以隱藏它們。Safari就是一個很好的例子，它希望使用者可以強烈的專註於內容，而不是為導航UI而分心。

iOS7的Safari在你下拉頁面時隱藏了chrome（左），當你回到頁面頂部時才再次顯示chrome（右）：

 

 

1.2.簡化UI元素

在iOS 7裡，你應該質疑每一個背景，紋理，陰影和邊框。這樣做是為了消除任何不必要的裝飾，使使用者可以專註於真正重要的元素。雖然裝飾可能是有用的，但節制使用它會使你的應用在iOS7裡更有家的感覺。

手機的介面往往是如此之小，任何額外的視覺重量，如漸層、邊框或逼真的細節都會吸引使用者太多的注意。因此，只有你非常確定時，再使用這些元素。

 

1.3.無邊框的按鈕

我最初得知蘋果要使用無邊框的按鈕時，第一個反應是：不！然而，事實證明，無邊框按鈕在某些地方表現得的確漂亮，比如導覽列。

在簡化的導覽列背景裡，邊框只是擾亂視覺的元素，非常不必要。

許多按鈕和導航依然需要邊框，用來區分可互動元素和不可互動元素，如：

 

蘋果的按鈕一般使用透明背景表示未選中狀態，簡單的顏色背景表示選定狀態。

你可以嘗試改變一些東西，比如邊框粗細、背景顏色、透明度、圓角半徑，或者為您的按鈕創造一個微妙的陰影和紋理。

 

1.4.用顏色來表示互動

蘋果用在一些場合用顏色的差異來表示互動，而無需使用按鈕周圍的邊框。當然，如果你的應用中互動元素是非常明確的，則不需要使用顏色來區分。

在中，紅色的Edit和 + 按鈕表示可以互動：

  

 

1.5.最小化模擬細節和skeuomorphism（仿實物紋理）

 

Skeuomorphism是設計師工具箱中的許多工具之一，它不會消失。你只需要探索在這種簡約的環境裡如何正確使用它。

 

 

 

2.內容為王

現在你已經不再強調UI，那你怎麼強調內容呢？

 

2.1.使用整個螢幕

避免只有一幀的不必要UI元素，你應該讓你的內容始終處於舞台中心。

 

2.2.內容決定螢幕

下面的天氣應用結合毛半透明效果，創造了十分有感覺的效果，特別是根據內容來決定不同的螢幕：

 

 

2.3.增加視覺樂趣

iTunes Radio避開華而不實的UI元素，為內容本身增加點綴：

 

 

 

五、聚焦於互動

應用的設計即將經曆一個方向上根本性轉變。此前，基於絢麗視覺效果的應用可能會脫穎而出，但在iOS 7裡，照片般逼真的按鈕將會從螢幕消失。

那麼，如何在iOS7裡脫穎而出？如何建立一個令人愉快應用？總之，應用設計的新模式將更少談論外觀，而更多的談論使用感受。我認為不再高度強調視覺效果的iOS7將引起互動設計領域的文藝複興。

簡單的視覺效果更容易迅速建立新穎動畫、過渡和互動模式實驗，簡單的縮放和變形比處理紋理和斜面容易至少一千倍。

中，左邊（iOS7）版本相比右邊（iOS7）使用了更簡單的視覺效果：

 

 

1. 魔法般的Touch

 

Touch是神奇的：它讓你以為你操作的是物理對象，而不是移動螢幕周圍的像素。蘋果知道這個事實很好，這就是為什麼第一個iPhone採用1:1的滾動比例並運用了彈跳效果。

電腦是冰冷的，但如果把電腦當做一個進入物理世界的視窗，使用者可建立友好的、熟悉的和身臨其境的體驗。然而，任何滯後或者頓卡都會立刻打破幻想，結束魔術表演。

iOS7沒有丟棄模擬的細節？沒有，當然沒有。在iOS7裡，視覺上的模擬被淡化，而使用者互動和動態物理效果上的模擬被加強。實際上，iOS7內建了一個物理引擎來實現一個目的：建立一個感覺起來更真實的介面。

偉大的設計誕生時將更少使用Photoshop，更多使用Xcode和Quartz Composer。這些工具可以讓你去探索應用給人的感受，而不僅僅是外觀。

 

2.直接操作

直接操縱螢幕上的對象，而不是點擊在一旁的按鈕，滾動手勢、拖動和捏住對象縮放都是直接操作的例子。

iOS7的照片沒有箭頭按鈕用來切換照片，自然的掃動手勢完成了這一任務：

 

現實感的介面需要使用者操控對象，所以你需要把你的抽象功能整合到物理對象。例如，我的團隊不得不思考，如何在一個時間管理應用裡表示時間？最後，我們把時間作為一個時間軸上的物理塊，這增強了它的視覺效果和操作靈活度：

 

 

3.物理模擬和動畫

真遺憾蘋果的頁面只是簡單的1：1滾動，而不是我們熱愛的落差慣性和反彈力效果。直接同時操作與物理和動畫，我們的目標是使互動感受真實。

iOS 7的鎖屏將彈起不同的高度：

 

在未來，那些忽視物理模擬的應用會很快讓人感到陳舊和停滯。UI設計師才剛剛開始探索如何在使用者互動上使用物理模擬，我們這裡有一些想法供你參考：

3.1.動態

• 不要聯想數位動畫，而是思考物理原理。當你在一個物理表面推動一個球，它不會勻速到達終點。相反地，當你推動時它開始加速，而摩擦力讓它減速直至停止。當一個對象從10英尺落下時，反彈力比從2英尺落下更高，你的介面應該具備相同的行為方式。幸運的是，蘋果的新UIKit Dynamics API讓你實現這些動態效果更為容易。

3.2.連續性

• 不要想著把每個螢幕當做一塊完全的石板，而是思考一個Item如何從一個螢幕到達另一個螢幕，利用逼真的動畫來實現這些動作，例如移動、縮放和變形等等。

3.3.反彈力

• 它不只是滾動。這取決於你賦予對象多大的彈性，反彈力可以添加一個有趣的觸摸。

 

4. 三維

諷刺的是，人們在呼喚“扁平化”的作業系統應該回到過去時，卻忽視iOS7包含了最立體的一切，例如斜面立體效果就讓人眼前一亮。iOS 7的三個主要指導原則之一是深度，深度可以採取一些形式：

 

4.1.3D效果

蘋果希望你利用立體效果為你的應用增添有趣的視覺體驗，比如用視差效果讓頁面區隔更加明確。

 

 

4.2.層次

傾斜你的iPhone ，你會看到案頭表徵圖實際上並沒有坐在背景上 — 視差效果表明他們正漂浮著，而彈出的控制中心和磨砂半透明效果使得控制中心位於所有表徵圖之上。思考一下你的介面層次，並使用3D效果來明確使用者想使用的層次。

毛玻璃提供了一個微妙的層次感效果：

 

4.3.縮放使用者介面

我認為一些最酷的使用者介面創新將來自這個縮放概念，並把它帶到夢想不到的境界。

縮放介面存在於iOS7裡：

 

 

5. 手勢和導航

一旦使用者學會適當的手勢，可以在互動時更加有趣和便捷。

為掃動完成：

 

然而，一些功能可能無法很好地用手勢來完成，不自然的手勢很難記住並且沒有使用樂趣。另外，如果不是每天使用的話，使用者可能會忘記不熟悉的手勢。實驗各種手勢讓使用者的手指變得敏感，但請不要隨意設計過於自由的手勢控制介面。

iOS7引入了一個新的模式：回掃（swipe to go back）。你可以點擊後退按鈕，但回掃明顯輕鬆了許多，尤其是在iPhone 5甚至以後更大的螢幕上。

為回掃：

 

雖然手勢的設計是為了讓使用者使用更加方便，但鍵盤操作也應該保留，使用者有權利選擇多種操作方式。

 

6. 個性

開發人員請站出來，您的iOS7應用必須有一個獨特的和令人愉快的個性。美觀當然很重要，但應用的個性同樣至關重要！

為了增強應用的個性，可以思考以下幾點：

6.1.音頻

• 音頻是一個巨大的的待開發領地，裡面有一些先驅者如Tapbots，誰的應用裡包括細微的點擊和蜂鳴聲？

6.2.語言

• 誰會想每天面對枯燥的文本？詼諧或幽默的語言是散發出個性的最佳途徑之一。

6.3.表徵圖

• 使用者對您應用的印象往往來源於表徵圖。由於它生活在使用者的主畫面上，價值如此巨大的表徵圖應得到精心設計，表徵圖應該體現出應用的個性。

個性真的可以包含在所有的設計細節裡，讓您的應用變得偉大。從完善每一個像素、最佳化每一次互動、融合每一次體貼設計，再到賞心悅目的動畫、詼諧的資訊，這些都能讓您的應用變得更加完美。

 

 

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

“不要說謊， iOS7已經讓我很興奮的工作了，裡面有非常酷的東西（至少我這麼認為） 。” 　　  ---- Mark Jardine，Tweetbot的設計師

在這幾年的應用設計裡，iOS7的風格可能最激動人心。Marco Arment指出，App Store將再一次成為開發人員的沃土。這種激進的設計轉變意味著，未來幾年將在各類排名前列的應用中看到新設計理念，這些應用將深度尊重蘋果的新設計原則，創造出使用者前所未見的獨特UI介面。

而好訊息在於，你可以建立這些應用程式！雖然這並不容易，是的，競爭會很激烈。但是，現在學會蘋果新設計理念的你，比以往擁有更多的機會創造一個偉大的應用。來吧，在App世界裡留下你的印記！

 

/* 

譯者的廢話：

完成下面這個挑戰後，這一章的學習算是完成了，相信您和我一樣對iOS7有了一個全新的認識。

在iOS7正式推出的半年內，我就收集到了三十幾本iOS7的相關書籍（更別說那些更多我手上沒有的），可見老外的手腳之快和對新技術的熱愛程度。Raywenderlich上有許多許多經典的文章，《iOS7 by Tutorials》這本書就是Raywenderlich團隊的精華合集，強烈推薦購買！而我會抽時間繼續該系列的翻譯。

如果您對我的譯文感興趣，想繼續瀏覽後續的其他iOS譯文，可以關注我的新浪微博：@葛布林大帝

共同學習，共同提高

----（部落格園）葛布林大帝

*/

 

七、最後的挑戰

挑戰：重新設計這個程式！

iOS 6上的一個應用，它的形狀非常差，需要你的協助。你的挑戰是運用你已經瞭解的設計知識（如對比、重複、對齊、接近、排版和蘋果的新設計理念）來拯救這個應用，使它重新適配iOS7。

 

你有很多方式來開始，你可以使用Xcode、Photoshop，或者乾脆用一張紙和一些彩色鉛筆。在你開始你的新設計之前，嘗試找出原設計的所有問題，這裡有一些提示：

?你是否注意到有對齊的任何問題？

?是否相關的概念組合在一起？

?是否方便操作？

?如果刪掉一些裝飾，這個應用看起來會像什嗎？

 

下面我提供了一個解決方案，但要注意的設計的本質是完全主觀的，有多種設計方案。

樣本：