在去年，Apple針對新時(shí)代用戶徹底更新了其設(shè)計(jì)語言。現(xiàn)在的設(shè)計(jì)語言相對之前大為簡化，能夠讓設(shè)計(jì)師將精力集中到動(dòng)畫和功能上，而不是繁復(fù)的視覺細(xì)節(jié)上。

很多人都曾問過我：設(shè)計(jì)應(yīng)當(dāng)如何入門？成為一名優(yōu)秀設(shè)計(jì)師有沒有捷徑可走？要我說，雖然沒有捷徑，但確實(shí)有幾個(gè)適用于iOS的設(shè)計(jì)技巧和規(guī)則能夠從全局角度改變你的設(shè)計(jì)方式。

當(dāng)然，即便你目前的設(shè)計(jì)目標(biāo)是完全不同于iOS的平臺，相互之間的設(shè)計(jì)理念也是相通的，你可以將在web和印刷領(lǐng)域?qū)W習(xí)到的技巧運(yùn)用到iOS設(shè)計(jì)中去。iOS 8是一個(gè)讓設(shè)計(jì)尋回根源的平臺，它給人一種類似現(xiàn)代雜志的感覺，文字精美、布局簡單。本書中所介紹的內(nèi)容將在你未來設(shè)計(jì)優(yōu)秀產(chǎn)品的旅程中給你帶來巨大的裨益。

iOS 8人機(jī)界面指南

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

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

核心理念

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

下面我將這幾項(xiàng)設(shè)計(jì)原則的含義細(xì)化成能夠?qū)嶋H操作的內(nèi)容進(jìn)行解釋，當(dāng)然，我解釋的深度將遠(yuǎn)甚于Apple指南。

順從

以內(nèi)容為主角，其他都是配角。所使用的元素應(yīng)當(dāng)作為內(nèi)容的補(bǔ)充，不要使用會分散人注意力的視覺元素與內(nèi)容爭搶目光。

簡化

將用戶界面簡化到只保留最核心的美感。每次在你要添加新元素時(shí)都應(yīng)自問：是否必要？如果你的應(yīng)用不屬于游戲或者沒有特定的主題，那么請慎重使用大量的材質(zhì)、3D效果和多重陰影，將關(guān)鍵放到功能性顏色、協(xié)調(diào)漸變和美觀的文字上。

內(nèi)容最大化

內(nèi)容應(yīng)占滿整個(gè)屏幕，給內(nèi)中的元素留出最大的空間。不要使用多重容器，將滾動(dòng)區(qū)域最大化以便給交互留出更多空間。

顏色

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

文字既是內(nèi)容

為了簡化用戶界面以及突出內(nèi)容，文字將占到整個(gè)屏幕的50%到90%。考慮到這一點(diǎn)，你應(yīng)當(dāng)選用漂亮的字體，通過設(shè)定適當(dāng)?shù)拇旨?xì)、線寬和顏色使其達(dá)到視覺美觀、適合閱讀的狀態(tài)。這一方面將在文字部分進(jìn)行更深入的介紹。

負(fù)空間

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

圖標(biāo)狀態(tài)

用于導(dǎo)航的圖標(biāo)有兩種狀態(tài)：輪廓及填充。使用輪廓的好處是不分散注意力。如果對圖標(biāo)進(jìn)行填充，就會轉(zhuǎn)移人的注意力。另外其還可能表示當(dāng)前頁面為活動(dòng)頁面。

明晰

讓一切顯然易懂。按鈕應(yīng)當(dāng)表現(xiàn)出自己的功能，文字應(yīng)該方便閱讀并留出舒適的間距。你的內(nèi)容應(yīng)當(dāng)明確表現(xiàn)出應(yīng)用的功效。例如，如果是有關(guān)咖啡的應(yīng)用，則應(yīng)當(dāng)能讓人聯(lián)想到咖啡豆、濃縮咖啡和咖啡的棕褐色。

文字要方便閱讀

在視網(wǎng)膜屏幕上，文字的大小不能小于22px。最佳閱讀尺寸為32px。

使用作用明確的圖標(biāo)

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

描述性畫面

每個(gè)頁面都應(yīng)說明自己的用途。盡量減少使用品牌內(nèi)容，代以明確的畫面標(biāo)題，如果采用了標(biāo)簽欄，則還應(yīng)使用高亮的當(dāng)前標(biāo)簽狀態(tài)。

顏色的含義

顏色是有含義的。你可以使用紅色、綠色、藍(lán)色和中性色調(diào)分別表現(xiàn)破壞性操作、確認(rèn)操作、鏈接和非活動(dòng)狀態(tài)。如果將這些顏色用做其他用途則會誤導(dǎo)用戶。例如，刪除按鈕上一定不要使用綠色。

深度

深度可能是最難理解的一個(gè)部分了。這是個(gè)非常抽象，同時(shí)又很有力而獨(dú)特的概念。深度是指所有內(nèi)容都應(yīng)當(dāng)具有關(guān)聯(lián)和過渡關(guān)系。在真實(shí)生活中，當(dāng)你從一個(gè)房間進(jìn)到另一個(gè)房間中時(shí)，你會產(chǎn)生過渡和距離感，這樣你才不會迷路。這個(gè)理念同樣適用于用戶界面。

“對人和人所存在的現(xiàn)實(shí)的冷漠，是設(shè)計(jì)的唯一大忌。”-Dieter Rams

過渡界面

從個(gè)人角度來講，我認(rèn)為這是iOS 8最有意思也最獨(dú)一無二的一方面。每個(gè)屏幕之間的過渡、桌面縮放成文件夾然后縮放到應(yīng)用。從傳統(tǒng)角度來說，這種技巧很難操作，但Xcode 5讓這一切變得容易實(shí)現(xiàn)。有關(guān)這部分技巧將在動(dòng)畫部分進(jìn)行詳解。

模糊背景

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

一切為了討喜

在指南中有3項(xiàng)能夠讓應(yīng)用出彩的內(nèi)容沒有被提到：動(dòng)畫、手勢和音效。這3項(xiàng)內(nèi)容很容易用過火，所以要謹(jǐn)慎。

動(dòng)畫

動(dòng)畫不僅能作為畫面之間的過渡，還能給你的設(shè)計(jì)增添趣味性。另外還能讓容易被忽略的元素受到關(guān)注。

手勢

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

音效

音效在應(yīng)用中的使用很少，但其卻能將一項(xiàng)平凡的任務(wù)轉(zhuǎn)變成令人激動(dòng)的體驗(yàn)。通過音效，大家不用眼睛就能知道你使用的是什么應(yīng)用。如果能讓音效達(dá)到耳熟能詳?shù)男Ч?，你就能以最小的努力贏得很大的成功。

三條規(guī)則

下面這3條極為重要的iOS 設(shè)計(jì)規(guī)則是萬萬不可忽略的：思考觸摸界面、提高文字可讀性并針對iPhone 4進(jìn)行優(yōu)化。

觸摸設(shè)計(jì)

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

可讀性

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

入門模板

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

ios 8 Template for Sketch

iOS 8 Template for Sketch是一個(gè)絕佳的起點(diǎn)。其可為你提供iOS 8中現(xiàn)有的大多數(shù)UI元素，你可以在自己的設(shè)計(jì)中隨心使用。在使用時(shí)，要逐漸習(xí)慣標(biāo)題、按鈕、對話框等元素的尺寸。

iOS 8 Illustrator Vector UI Kit

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

iOS 8及iPhone 6資源

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