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

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

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

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

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

iOS 8人機界面指南

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

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

核心理念

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

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

順從

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

簡化

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

內(nèi)容最大化

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

顏色

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

文字既是內(nèi)容

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

負空間

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

圖標狀態(tài)

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

明晰

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

文字要方便閱讀

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

使用作用明確的圖標

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

描述性畫面

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

顏色的含義

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

深度

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

“對人和人所存在的現(xiàn)實的冷漠，是設(shè)計的唯一大忌?！?Dieter Rams

過渡界面

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

設(shè)計師Xcode自學指南！

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

模糊背景

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

一切為了討喜

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

動畫

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

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

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

手勢

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

音效

音效在應用中的使用很少，但其卻能將一項平凡的任務轉(zhuǎn)變成令人激動的體驗。通過音效，大家不用眼睛就能知道你使用的是什么應用。如果能讓音效達到耳熟能詳?shù)男Ч憔湍芤宰钚〉呐A得很大的成功。

三條規(guī)則

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

觸摸設(shè)計

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

可讀性

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

轉(zhuǎn)移到網(wǎng)頁版上，可讀性仍然是關(guān)鍵的一環(huán)，案例+方法：

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

入門模板

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

ios 8 Template for Sketch

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

iOS 8 Illustrator Vector UI Kit

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

iOS 8及iPhone 6資源

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

【跟上流行的必備好文】

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

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

設(shè)計師必看的谷歌最新設(shè)計語言！
《該跟上潮流了！一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費下載》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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