iOS 7圖示設計的七條黃金法則

發表於2014-02-08

你是怎樣設計iOS7圖示的?如果還沒開始上手?不要緊,抓緊練習前,先看看 Craig Grannell 從設計大神那裡總結的一些經驗。

iOS7的圖示設計,評論不一,肯定有優點,也有缺點,正如Bjango設計總監 Marc Edwards 說的那樣:“不管iOS7好還是壞,大部分應用的圖示都根據iOS7的視覺風格進行了調整,我個人懷疑iOS 8的視覺轉變可能會更大,但無論如何,iOS7還會存在很久。”

從iOS6到iOS7,蘋果的轉變未免太激進了,這給很多設計師設定了障礙:原來在iOS6上的設計經驗一點都用不上。

那麼到底要怎樣設計iOS7圖示呢?我們一道來聽聽大師的看法,一道探索吧。

01.使用辨識度高的隱喻

(1)Edwards 首先注意到的一點便是圖示通常尺寸都很小,因此圖示設計的關鍵就在於:簡單的勾勒出應用的整體概念

“一般的做法是使用一種或兩種辨識度較高、能代表概念的物體。然後再用優秀的色彩和流暢的形狀來塑造美感”

(2)而設計師 Jon Hicks認為除此之外,圖示的隱喻性也要強(比如說拍照應用),圖示應該是一種能夠有所代表的符號,具有一種標識性(不可否認,Safari的品牌塑造就很成功,大部分人一眼都能認出來),Apple的遊戲中心以及設定圖示的隱喻性就很差。

(3)Soft Façade的創意總監 Dmitry Tsozik認為設計師不要自作聰明:“隨隨便便放上個白背景,再填幾個彩色圓環,這能叫圖示嗎?”

這種圖示不具備功能性,通過圖示無法瞭解應用的功能、概念。

多研究研究色彩和隱喻,圖示的作用是引導使用者進入應用的視窗,最好讓使用者一眼皆知應用的功能,不要讓使用者猜。

1

照相機圖示非常顯眼,但是過於厚重,美感不佳,不過它的隱喻非常強烈,一眼皆知這款應用的用處。而遊戲中心….隱喻糟糕透了。

02. 鮮活用色

Iconfactory 聯合創始人 Gedeon Maheux認為即便你對iOS7的色彩體系不感冒,你也要研究研究iOS7的圖示設計風格,畢竟蘋果是設計風向標:“在設計中嘗試打造鮮明的對照感。iOS7因明亮的邊界、清晰的線條、大膽的色彩而著稱”

他認為明亮的色彩能帶來一種活力感和趣味性,柔和、細膩的色彩卻無法做到這一點。

2

iWork應用色彩非常鮮活,辨識度極高

03. 使用柵格線

Maheux建議在開始iOS7圖示設計時,使用當下流行的iOS7柵格線:“能讓你分塊的設計,並且能夠構建介面中圖示的整體感。採用柵格線方式進行設計的圖示越多,在介面中就能更好的彼此匹配,介面中圖示的整體感越強”

當然,他也認為,不應該太限制自我:“如果你覺得打破柵格線,你的設計會更出彩,那不妨試試”

3

蘋果的柵格線能讓你進行“各個擊破”的設計,但是必要情況下可以打破柵格線的限制。

04. 避免資訊過載

iOS7高度依賴字型。纖細的字型讓按鈕區域充滿了大量的留白。

但是Edwards認為圖示儘量不要和纖細的字型結合:“圖示應該是一種符號化的元素,本身就是一種視覺語言,不應該和文字語言聯絡到一起。即便結合,文字也不宜過多。”

4

比如說設定中的VPN選項,微圖示和文字結合讓人有一種資訊過載的感覺

05.適度新增深度感

iOS7的視覺風格可以看作是一種扁平化設計,Jony Ive特別強調了iOS7“層次”的概念,而不是一種單一的扁平。Maheux認為,若想要與眾不同,必須設計的與眾不同:“加入一點投影、加入一點漸變也無妨,多做做實驗,沒準一種新的流行由此誕生,iOS7上的設計充滿了無限可能,不一定要死板的扁平。”

5

Iconfactory的Scope

Mirror圖示便具有深度感,效果比純扁平設計好多了。

06.一致的視覺風格

(1)可以看看蘋果應用商店套件的圖示,很明顯,他們都是一個系列的圖示。

設計成套圖示和設計一款圖示,要考慮的東西不盡相同。設計成套圖示還要考慮一致性。

設計師要刻意培養自己的這種整體感,即便你的工作是設計一款圖示,你也可以這麼想:“要是這款應用有了姊妹應用,那麼圖示該要怎麼設計?”通過這種假象來鍛鍊自己的設計思維。

(2)不過Hicks還提醒,一致性不意味著拘泥於一種形式:“線條粗細不必完全相同、顏色也不必完全一致,但是整體風格一定要和諧、匹配”

他強調“白色符號搭配色彩漸變”這種方法最簡單。(或者在白色背景上使用多彩、透明的圖示)“整體風格統一——單個圖示根據隱喻的不同來靈活設計”

(3)Edwards認為:“通過一致性設計,能夠增加同一系列應用、圖示的聯絡感”

6

打造一致性的方法有很多。

07. 追求完美

不管iOS7的視覺風格怎樣,優秀圖示的標準還是沒有改變:優雅、簡約、細節到位。

Tsozik推薦多讀一點現代設計、建築、字型類的書籍,不斷追求完美。

相關文章