跟上潮流！手把手帶你入門IOS 8人機界面設計

編者按：之前發布了一篇2萬多字的IOS 8的人機界面交互指南，可能很多同學木有看完，今天著重挑色彩、文字與布局3個方面來講，@網秦UEC??的同學已經很細致地將圖片都譯為中文，全是脫水干貨，來漲姿勢咯。

上一篇指南地址：《騰訊力作！超贊的iOS 8人機界面指南(1)：UI設計基礎》

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

很多人都曾問過我：設計應當如何入門？成為一名優秀設計師有沒有捷徑可走？要我說，雖然沒有捷徑，但確實有幾個適用于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讓這一切變得容易實現。有關這部分技巧將在動畫部分進行詳解。

設計師Xcode自學指南！

• 《搞定一像素不求人！為設計師量身打造的XCODE教程（1）》
• 《搞定一像素不求人！為設計師量身打造的XCODE教程（2）》

模糊背景

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

一切為了討喜

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

動畫

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

關于該不該做動效設計，這篇文章總結了幾個要點：《DO OR DO NOT？如何從3個方面判斷是否做交互動畫》

有意義的動效，得先學會這招！《漲姿勢！動效設計如何從四個維度吸引你的注意力？》

手勢

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

音效

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

三條規則

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

觸摸設計

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

可讀性

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

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

• 《網站字體有多重要？它幫網站提高了38%的流量！》
• 《做好中文排版！讓長文章更容易閱讀的十項原則》

入門模板

學習新技術的最佳方式就是對他人的作品進行反向工程。這些模板不僅可以幫助你學習，還可以拿來直接使用或者定制，這樣一來你就不用每每從零開始，從而能夠避免很多出錯的可能性。模板能讓你的設計更加得心應手，慢慢地你就會入迷。

ios 8 Template for Sketch

iOS 8 Template for Sketch是一個絕佳的起點。其可為你提供iOS 8中現有的大多數UI元素，你可以在自己的設計中隨心使用。在使用時，要逐漸習慣標題、按鈕、對話框等元素的尺寸。

iOS 8 Illustrator Vector UI Kit

這是針對iOS 8的一套非常完整的UI包。這個模板雖然全面但是只適用于Illustrator。

iOS 8及iPhone 6資源

為iOS 8和iPhone 6及Plus進行設計相對還說還是個比較新穎的課題，所以說這一部分會不斷更新。

【跟上流行的必備好文】

色彩的學問從來都是變幻多端的：
《快來跟上潮流！來了解一下2015年春夏流行色》

即將大幅流行的幽靈按鈕你都會了嗎？
《知根知底的趨勢！2014年最值得掌握的趨勢”幽靈按鈕”》

設計師必看的谷歌最新設計語言！
《該跟上潮流了！一大波優質的MATERIAL DESIGN資源免費下載》

原文地址：designcode.io
譯文地址：uec.nq
譯者：蔣燦

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：