設(shè)計(jì)師必看iOS7圖標(biāo)設(shè)計(jì)的七條黃金法則
![](http://image.woshipm.com/wp-files/img/79.jpg)
照相機(jī)圖標(biāo)非常顯眼,但是過(guò)于厚重,美感不佳,不過(guò)它的隱喻非常強(qiáng)烈,一眼皆知這款應(yīng)用的用處。而游戲中心….隱喻糟糕透了。
02. 鮮活用色
Iconfactory 聯(lián)合創(chuàng)始人 Gedeon Maheux認(rèn)為即便你對(duì)iOS7的色彩體系不感冒,你也要研究研究iOS7的圖標(biāo)設(shè)計(jì)風(fēng)格,畢竟蘋(píng)果是設(shè)計(jì)風(fēng)向標(biāo):“在設(shè)計(jì)中嘗試打造鮮明的對(duì)照感。iOS7因明亮的邊界、清晰的線條、大膽的色彩而著稱”
他認(rèn)為明亮的色彩能帶來(lái)一種活力感和趣味性,柔和、細(xì)膩的色彩卻無(wú)法做到這一點(diǎn)。
![2](https://image.woshipm.com/wp-files/2014/02/e4ab838c0d74b46998e6b1ddb171e25b.jpg)
iWork應(yīng)用色彩非常鮮活,辨識(shí)度極高
03. 使用柵格線
Maheux建議在開(kāi)始iOS7圖標(biāo)設(shè)計(jì)時(shí),使用當(dāng)下流行的iOS7柵格線:“能讓你分塊的設(shè)計(jì),并且能夠構(gòu)建界面中圖標(biāo)的整體感。采用柵格線方式進(jìn)行設(shè)計(jì)的圖標(biāo)越多,在界面中就能更好的彼此匹配,界面中圖標(biāo)的整體感越強(qiáng)”
當(dāng)然,他也認(rèn)為,不應(yīng)該太限制自我:“如果你覺(jué)得打破柵格線,你的設(shè)計(jì)會(huì)更出彩,那不妨試試”
![3](https://image.woshipm.com/wp-files/2014/02/04858980317a467fa214236b8eca2bf3.jpg)
蘋(píng)果的柵格線能讓你進(jìn)行“各個(gè)擊破”的設(shè)計(jì),但是必要情況下可以打破柵格線的限制。
04. 避免信息過(guò)載
iOS7高度依賴字體。纖細(xì)的字體讓按鈕區(qū)域充滿了大量的留白。
但是Edwards認(rèn)為圖標(biāo)盡量不要和纖細(xì)的字體結(jié)合:“圖標(biāo)應(yīng)該是一種符號(hào)化的元素,本身就是一種視覺(jué)語(yǔ)言,不應(yīng)該和文字語(yǔ)言聯(lián)系到一起。即便結(jié)合,文本也不宜過(guò)多?!?/p>
![4](https://image.woshipm.com/wp-files/2014/02/541677643b0bbaafed999d7375beff99.jpg)
比如說(shuō)設(shè)置中的VPN選項(xiàng),微圖標(biāo)和文本結(jié)合讓人有一種信息過(guò)載的感覺(jué)
05.適度添加深度感
iOS7的視覺(jué)風(fēng)格可以看作是一種扁平化設(shè)計(jì),Jony Ive特別強(qiáng)調(diào)了iOS7“層次”的概念,而不是一種單一的扁平。Maheux認(rèn)為,若想要與眾不同,必須設(shè)計(jì)的與眾不同:“加入一點(diǎn)投影、加入一點(diǎn)漸變也無(wú)妨,多做做實(shí)驗(yàn),沒(méi)準(zhǔn)一種新的流行由此誕生,iOS7上的設(shè)計(jì)充滿了無(wú)限可能,不一定要死板的扁平?!?/p>
![5](https://image.woshipm.com/wp-files/2014/02/103f8c9b7fb9af723f9280050d023e2d.jpg)
Iconfactory的Scope
Mirror圖標(biāo)便具有深度感,效果比純扁平設(shè)計(jì)好多了。
06.一致的視覺(jué)風(fēng)格
(1)可以看看蘋(píng)果應(yīng)用商店套件的圖標(biāo),很明顯,他們都是一個(gè)系列的圖標(biāo)。
設(shè)計(jì)成套圖標(biāo)和設(shè)計(jì)一款圖標(biāo),要考慮的東西不盡相同。設(shè)計(jì)成套圖標(biāo)還要考慮一致性。
設(shè)計(jì)師要刻意培養(yǎng)自己的這種整體感,即便你的工作是設(shè)計(jì)一款圖標(biāo),你也可以這么想:“要是這款應(yīng)用有了姊妹應(yīng)用,那么圖標(biāo)該要怎么設(shè)計(jì)?”通過(guò)這種假象來(lái)鍛煉自己的設(shè)計(jì)思維。
(2)不過(guò)Hicks還提醒,一致性不意味著拘泥于一種形式:“線條粗細(xì)不必完全相同、顏色也不必完全一致,但是整體風(fēng)格一定要和諧、匹配”
他強(qiáng)調(diào)“白色符號(hào)搭配色彩漸變”這種方法最簡(jiǎn)單。(或者在白色背景上使用多彩、透明的圖標(biāo))“整體風(fēng)格統(tǒng)一——單個(gè)圖標(biāo)根據(jù)隱喻的不同來(lái)靈活設(shè)計(jì)”
(3)Edwards認(rèn)為:“通過(guò)一致性設(shè)計(jì),能夠增加同一系列應(yīng)用、圖標(biāo)的聯(lián)系感”
![6](https://image.woshipm.com/wp-files/2014/02/516d3e9b79e2e2d1dcb6c7a9973ad20f.jpg)
打造一致性的方法有很多。
07. 追求完美
不管iOS7的視覺(jué)風(fēng)格怎樣,優(yōu)秀圖標(biāo)的標(biāo)準(zhǔn)還是沒(méi)有改變:優(yōu)雅、簡(jiǎn)約、細(xì)節(jié)到位。
Tsozik推薦多讀一點(diǎn)現(xiàn)代設(shè)計(jì)、建筑、字體類的書(shū)籍,不斷追求完美。
來(lái)源:pmtoo
- 目前還沒(méi)評(píng)論,等你發(fā)揮!