當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

IOS7圖標(biāo)設(shè)計的七條黃金法則

2018-01-17 1450 0
你是怎樣設(shè)計iOS7圖標(biāo)的?如果還沒開始上手?不要緊,抓緊練習(xí)前,先看看 Craig Grannell 從設(shè)計大神那里總結(jié)的一些經(jīng)驗(yàn)。 iOS7的圖標(biāo)設(shè)計,評論不一,肯定有優(yōu)點(diǎn),也有缺點(diǎn),正如Bjango設(shè)計總監(jiān) Marc Edwards 說的那樣:“不管iOS7好還是壞,大部分應(yīng)用的圖標(biāo)都根據(jù)iOS7的視覺風(fēng)格進(jìn)行了調(diào)整,我個人懷疑iOS 8的視覺轉(zhuǎn)變可能會更大,但無論如何,iOS7還會存在很久。” 從iOS6到iOS7,蘋果的轉(zhuǎn)變未免太激進(jìn)了,這給很多設(shè)計師設(shè)置了障礙:原來在iOS6上的設(shè)計經(jīng)驗(yàn)一點(diǎn)都用不上。 那么到底要怎樣設(shè)計iOS7圖標(biāo)呢?我們一道來聽聽大師的看法,一道探索吧。
01.使用辨識度高的隱喻
(1)Edwards 首先注意到的一點(diǎn)便是圖標(biāo)通常尺寸都很小,因此圖標(biāo)設(shè)計的關(guān)鍵就在于:簡單的勾勒出應(yīng)用的整體概念 “一般的做法是使用一種或兩種辨識度較高、能代表概念的物體。然后再用優(yōu)秀的色彩和流暢的形狀來塑造美感”
(2)而設(shè)計師 Jon Hicks認(rèn)為除此之外,圖標(biāo)的隱喻性也要強(qiáng)(比如說拍照應(yīng)用),圖標(biāo)應(yīng)該是一種能夠有所代表的符號,具有一種標(biāo)識性(不可否認(rèn),Safari的品牌塑造就很成功,大部分人一眼都能認(rèn)出來),Apple的游戲中心以及設(shè)置圖標(biāo)的隱喻性就很差。
(3)Soft Façade的創(chuàng)意總監(jiān) Dmitry Tsozik認(rèn)為設(shè)計師不要自作聰明:“隨隨便便放上個白背景,再填幾個彩色圓環(huán),這能叫圖標(biāo)嗎?” 這種圖標(biāo)不具備功能性,通過圖標(biāo)無法了解應(yīng)用的功能、概念。 多研究研究色彩和隱喻,圖標(biāo)的作用是引導(dǎo)用戶進(jìn)入應(yīng)用的窗口,最好讓用戶一眼皆知應(yīng)用的功能,不要讓用戶猜。 關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則
照相機(jī)圖標(biāo)非常顯眼,但是過于厚重,美感不佳,不過它的隱喻非常強(qiáng)烈,一眼皆知這款應(yīng)用的用處。而游戲中心….隱喻糟糕透了。 02. 鮮活用色 Iconfactory 聯(lián)合創(chuàng)始人 Gedeon Maheux認(rèn)為即便你對iOS7的色彩體系不感冒,你也要研究研究iOS7的圖標(biāo)設(shè)計風(fēng)格,畢竟蘋果是設(shè)計風(fēng)向標(biāo):“在設(shè)計中嘗試打造鮮明的對照感。iOS7因明亮的邊界、清晰的線條、大膽的色彩而著稱” 他認(rèn)為明亮的色彩能帶來一種活力感和趣味性,柔和、細(xì)膩的色彩卻無法做到這一點(diǎn)。 關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則   iWork應(yīng)用色彩非常鮮活,辨識度極高 03. 使用柵格線 Maheux建議在開始iOS7圖標(biāo)設(shè)計時,使用當(dāng)下流行的iOS7柵格線:“能讓你分塊的設(shè)計,并且能夠構(gòu)建界面中圖標(biāo)的整體感。采用柵格線方式進(jìn)行設(shè)計的圖標(biāo)越多,在界面中就能更好的彼此匹配,界面中圖標(biāo)的整體感越強(qiáng)” 當(dāng)然,他也認(rèn)為,不應(yīng)該太限制自我:“如果你覺得打破柵格線,你的設(shè)計會更出彩,那不妨試試” 關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則 蘋果的柵格線能讓你進(jìn)行“各個擊破”的設(shè)計,但是必要情況下可以打破柵格線的限制。 04. 避免信息過載 iOS7高度依賴字體。纖細(xì)的字體讓按鈕區(qū)域充滿了大量的留白。 但是Edwards認(rèn)為圖標(biāo)盡量不要和纖細(xì)的字體結(jié)合:“圖標(biāo)應(yīng)該是一種符號化的元素,本身就是一種視覺語言,不應(yīng)該和文字語言聯(lián)系到一起。即便結(jié)合,文本也不宜過多。
關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則 比如說設(shè)置中的VPN選項(xiàng),微圖標(biāo)和文本結(jié)合讓人有一種信息過載的感覺 05.適度添加深度感 iOS7的視覺風(fēng)格可以看作是一種扁平化設(shè)計,Jony Ive特別強(qiáng)調(diào)了iOS7“層次”的概念,而不是一種單一的扁平。Maheux認(rèn)為,若想要與眾不同,必須設(shè)計的與眾不同:“加入一點(diǎn)投影、加入一點(diǎn)漸變也無妨,多做做實(shí)驗(yàn),沒準(zhǔn)一種新的流行由此誕生,iOS7上的設(shè)計充滿了無限可能,不一定要死板的扁平。” 關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則 Iconfactory的Scope Mirror圖標(biāo)便具有深度感,效果比純扁平設(shè)計好多了。 06.一致的視覺風(fēng)格 (1)可以看看蘋果應(yīng)用商店套件的圖標(biāo),很明顯,他們都是一個系列的圖標(biāo)。 設(shè)計成套圖標(biāo)和設(shè)計一款圖標(biāo),要考慮的東西不盡相同。設(shè)計成套圖標(biāo)還要考慮一致性。 設(shè)計師要刻意培養(yǎng)自己的這種整體感,即便你的工作是設(shè)計一款圖標(biāo),你也可以這么想:“要是這款應(yīng)用有了姊妹應(yīng)用,那么圖標(biāo)該要怎么設(shè)計?”通過這種假象來鍛煉自己的設(shè)計思維。 (2)不過Hicks還提醒,一致性不意味著拘泥于一種形式:“線條粗細(xì)不必完全相同、顏色也不必完全一致,但是整體風(fēng)格一定要和諧、匹配” 他強(qiáng)調(diào)“白色符號搭配色彩漸變”這種方法最簡單。(或者在白色背景上使用多彩、透明的圖標(biāo))“整體風(fēng)格統(tǒng)一——單個圖標(biāo)根據(jù)隱喻的不同來靈活設(shè)計” (3)Edwards認(rèn)為:“通過一致性設(shè)計,能夠增加同一系列應(yīng)用、圖標(biāo)的聯(lián)系感”
關(guān)于iOS7圖標(biāo)設(shè)計:七條黃金法則 打造一致性的方法有很多。 07. 追求完美 不管iOS7的視覺風(fēng)格怎樣,優(yōu)秀圖標(biāo)的標(biāo)準(zhǔn)還是沒有改變:優(yōu)雅、簡約、細(xì)節(jié)到位。 Tsozik推薦多讀一點(diǎn)現(xiàn)代設(shè)計、建筑、字體類的書籍,不斷追求完美  

25
評論區(qū)(0)
正在加載評論...