手把手帶你入門IOS 8人機界面設計

 　　在去年，Apple針對新時代用戶徹底更新了其設計語言。現在的設計語言相對之前大為簡化，能夠讓設計師將精力集中到動畫和功能上，而不是繁復的視覺細節上。

　　很多人都曾問過我：設計應當如何入門?成為一名優秀設計師有沒有捷徑可走?要我說，雖然沒有捷徑，但確實有幾個適用於iOS的設計技巧和規則能夠從全局角度改變你的設計方式。

　　當然，即便你目前的設計目標是完全不同於iOS的平台，相互之間的設計理念也是相通的，你可以將在web和印刷領域學習到的技巧運用到iOS設計中去。iOS 8是一個讓設計尋回根源的平台，它給人一種類似現代雜志的感覺，文字精美、布局簡單。本文中所介紹的內容將在你未來設計優秀產品的旅程中給你帶來巨大的裨益。

　　iOS 8人機界面指南

　　在開始設計之前，我們需要先了解一下都有哪些資源可為我們所用。幸運的是，這方面資源還是很多的。

　　如果你還沒讀過iOS 8人機界面指南，我強烈建議你快速浏覽一遍，讓自己從整體上了解一下新版本進行了哪些改變和改進。

　　核心理念

　　iOS 8包含3大核心理念：遵從、明晰與深度。

　　下面我將這幾項設計原則的含義細化成能夠實際操作的內容進行解釋，當然，我解釋的深度將遠甚於Apple指南。

　　順從

　　以內容為主角，其他都是配角。所使用的元素應當作為內容的補充，不要使用會分散人注意力的視覺元素與內容爭搶目光。

　　簡化

　　將用戶界面簡化到只保留最核心的美感。每次在你要添加新元素時都應自問：是否必要?如果你的應用不屬於游戲或者沒有特定的主題，那麼請慎重使用大量的材質、3D效果和多重陰影，將關鍵放到功能性顏色、協調漸變和美觀的文字上。

　　內容最大化

　　內容應占滿整個屏幕，給內中的元素留出最大的空間。不要使用多重容器，將滾動區域最大化以便給交互留出更多空間。

　　顏色

　　使用顯眼的顏色表現能夠點擊或需要突出的元素。顏色和中性色調選擇的正確與否將決定你設計的成敗。這是iOS 8設計中將要深層次講解的一個方面。

　　文字既是內容

　　為了簡化用戶界面以及突出內容，文字將占到整個屏幕的50%到90%。考慮到這一點，你應當選用漂亮的字體，通過設定適當的粗細、線寬和顏色使其達到視覺美觀、適合閱讀的狀態。這一方面將在文字部分進行更深入的介紹。

　　負空間

　　使用負空間凸顯內容。你所能看到的東西越少，就越能將注意力全部集中到僅有的物體上。負空間能夠留出呼吸的余地。不用在屏幕中堆砌太多的結構和無用的視覺元素。

　　圖標狀態

　　用於導航的圖標有兩種狀態：輪廓及填充。使用輪廓的好處是不分散注意力。如果對圖標進行填充，就會轉移人的注意力。另外其還可能表示當前頁面為活動頁面。

　　明晰

　　讓一切顯然易懂。按鈕應當表現出自己的功能，文字應該方便閱讀並留出舒適的間距。你的內容應當明確表現出應用的功效。例如，如果是有關咖啡的應用，則應當能讓人聯想到咖啡豆、濃縮咖啡和咖啡的棕褐色。

　　文字要方便閱讀

　　在視網膜屏幕上，文字的大小不能小於22px。最佳閱讀尺寸為32px。

　　使用作用明確的圖標

　　圖標不能含混不清，應當明確表現出自身的作用。在可能的情況下，盡量使用文字輔助。如果你使用了圖標，那就一定不能在其他地方使用與當前圖標類似的其他圖標，否則會讓用戶看不懂。同樣，不要使用“後退”或者“提交”這種太泛泛的文字，而應盡可能明確，例如“返回首頁”或者“注冊新賬號”等。更多細節請閱讀圖標部分。

　　描述性畫面

　　每個頁面都應說明自己的用途。盡量減少使用品牌內容，代以明確的畫面標題，如果采用了標簽欄，則還應使用高亮的當前標簽狀態。

　　顏色的含義

　　顏色是有含義的。你可以使用紅色、綠色、藍色和中性色調分別表現破壞性操作、確認操作、鏈接和非活動狀態。如果將這些顏色用做其他用途則會誤導用戶。例如，刪除按鈕上一定不要使用綠色。

　　深度

　　深度可能是最難理解的一個部分了。這是個非常抽象，同時又很有力而獨特的概念。深度是指所有內容都應當具有關聯和過渡關系。在真實生活中，當你從一個房間進到另一個房間中時，你會產生過渡和距離感，這樣你才不會迷路。這個理念同樣適用於用戶界面。

　　“對人和人所存在的現實的冷漠，是設計的唯一大忌。”-Dieter Rams

　　過渡界面

　　從個人角度來講，我認為這是iOS 8最有意思也最獨一無二的一方面。每個屏幕之間的過渡、桌面縮放成文件夾然後縮放到應用。從傳統角度來說，這種技巧很難操作，但Xcode 5讓這一切變得容易實現。有關這部分技巧將在動畫部分進行詳解。

　　模糊背景

　　背景不能影響到內容的清晰度。將背景模糊化不僅能讓你保證其顏色的自然，同時能夠突出前景。模糊並不是無中生有的效果，它在現實生活中也真實存在，比如你定睛看某個物體時，其他物體就會變模糊。

　　一切為了討喜

　　在指南中有3項能夠讓應用出彩的內容沒有被提到：動畫、手勢和音效。這3項內容很容易用過火，所以要謹慎。

　　動畫

　　動畫不僅能作為畫面之間的過渡，還能給你的設計增添趣味性。另外還能讓容易被忽略的元素受到關注。

　　手勢

　　自iPhone 5開始采用長屏幕以來，後退按鈕按起來就不那麼方便了。所以說，手勢雖然比不上眼睛看得見的視覺按鈕，但也可以作為視覺交互的一個延伸。其對於水平比較高的用戶來說非常方便。而隨著我們大家的水平日漸提高，視覺提示正逐漸讓位給一些真正有用的功能。

　　音效

　　音效在應用中的使用很少，但其卻能將一項平凡的任務轉變成令人激動的體驗。通過音效，大家不用眼睛就能知道你使用的是什麼應用。如果能讓音效達到耳熟能詳的效果，你就能以最小的努力贏得很大的成功。

　　三條規則

　　下面這3條極為重要的iOS 設計規則是萬萬不可忽略的：思考觸摸界面、提高文字可讀性並針對iPhone 4進行優化。

　　觸摸設計

　　按鈕應當方便好按。在視網膜屏幕上，按鈕的大小應當為60-120px高。最佳高度為88px。在極少數情況下，可以為文字內部的鏈接設定44px，但使用時要慎重——用戶可能很難按得到。即便是純文字按鈕也應該有至少60px的可點擊區域。寬度應與高度相同。

　　可讀性

　　在視網膜屏幕上，文字大小不能小於22px。最佳閱讀字體大小為32px。使用120-140%的線高可提高閱讀體驗。

　　轉移到網頁版上，可讀性仍然是關鍵的一環，案例+方法：

　　《網站字體有多重要?它幫網站提高了38%的流量!》

　　《做好中文排版!讓長文章更容易閱讀的十項原則》