Иконите са неразделна част от нашия дизайн. Те са визуални сигнали, които показват различни действия и могат да дадат уникална идентичност на продукта. Но твърде често избираме да отпразнуваме тяхното значение, като изтегляме едни и същи набори от икони и правим всяка икона за всеки уебсайт да изглежда повече или по-малко еднаква. Какъв начин да се отнасяме към нещо толкова важно.
За да се справя с този проблем, създадох ръководство, което да помогне на дизайнерите да добавят визуална дълбочина към своите икони и да ги направят уникални за продукта, който представляват. Този урок е до голяма степен вдъхновен от влиятелния дизайн на Google Материали.
Принципи на Google за материален дизайн
Като Google казва „материалът е метафора“. Той заема визуални сигнали от физическия свят и създава нов визуален език, който да стандартизира всички техни интерфейси. Принципите на материалния дизайн са достъпни и може бързо да се приложи за подобряване на привлекателността на интерфейсите и потребителското изживяване.
1. Използвайте прости геометрични фигури и получер цвят
Тенденцията на плоския дизайн вдъхновява материалния дизайн, който също се основава на основните плоски форми. Внимателно изберете коя форма най-добре представя елемента, който иконата изобразява.
2. Добавете дълбочина с фино засенчване
Падащата сянка е добър начин да заблудите окото и да придадете усещане за дълбочина на вашия дизайн, защото стимулира ефекта на светлината, която се хвърля върху обект.
Имайте предвид, че естествената светлина често се симулира като идваща от горния ляв ъгъл.
Урок за динамика на твърди тела
3. Използвайте цветни нюанси, за да замените падащите сенки
Всеки цвят се използва в множество нюанси за симулиране на визуална дълбочина. Например в иконата на Gmail можете да видите, че за формата на M се използват различни червени нюанси, а под капака на плика се използва по-тъмен нюанс на сивото.
Как можете да го направите и вие: Демонстрации стъпка по стъпка
Ще приложим опростена версия на стила на материалния дизайн и за всяка икона ще използваме само три нюанса от един и същи цвят и ще поддържаме сенките плоски и къси, вместо общия ефект „дълга сянка“.
Ресурси
- Проверете пълния безплатен набор от икони от Google тук .
Да започваме.
1. Икона на болт
Разбийте оригиналната икона на две и накарайте горната част да изглежда повдигната. Можете да постигнете това, като създадете ефект на сянка в пресечната точка на двете фигури. Използвайте три нюанса на жълтото - по-светъл отгоре, по-тъмен отдолу и запазете най-тъмния нюанс за сянката.
2. Икона за чат
На оригиналната икона имаме намек за ефект на сянка в процепа между двата балона, там ще създадете сянка.
На долната форма изберете точката, образуваща правия ъгъл в процепа, и я преместете нагоре наляво, докато не оформите прав ъгъл в горния ляв ъгъл.
Дублирайте горния балон и преместете копието надолу и надясно. Изберете копието и формата на долния балон, използвайте “Pathfinder”, за да създадете разделение, и запазете само пресечната точка с предишното копие.
Сега можете да приложите три нюанса на синьото и да дадете най-светлия отгоре, най-тъмния в средата и втория най-тъмен отдолу.
3. Икона на отметка
Ще създадем ефект на сгъната хартия.
Дублирайте иконата и премахнете допълнителните две точки в горния десен ъгъл, а след това в най-лявата част, за да извадите две парчета.
Дублирайте лявата гънка и я преместете отгоре на дясната.
Пресечете двете фигури, за да създадете ефект на сянка. След това нанесете три нюанса на цвета, като същевременно запазите най-тъмния за сянката, втория най-тъмен за дългото парче и по-светлия нюанс за горната част.
4. Икона на знамето
Започнете със закръгляване на ръбовете, след което извлечете основата на флага.
обработка на грешки при обратно извикване на node js
За да създадете ефект на сгъване, проследете две линии, пресичащи се по диагонал. С помощта на „Pathfinder“ разделете формата на флага с линиите и нанесете три нюанса на зелено върху флага, като същевременно запазите основната сива.
5. Сърдечна икона
Дублирайте иконата на сърце.
Изолирайте лявата половина на фигурата.
Проследете диагонална линия надолу, идваща от горната дясна точка.
неща, които можете да правите с C++
Припокрийте получената фигура със сърцето, след това я преместете надясно, за да извадите фигурата на сянката. Нанесете трите си нюанса на розово.
6. Икона Планини
Празната празнина в оригиналната икона показва къде можем да поставим сянка.
Създайте двете триъгълни фигури от всеки избор.
Преместете копие на по-малкото вдясно и извлечете полученото пресичане като форма на сянка.
Нанесете три нюанса на кафявото, като държите най-светлия отляво, втория най-светъл към големия триъгълник и най-тъмния за сянката в средата. Приложете някакъв радиус на ъгъла, за да смекчите резултата.
7. Икона на хората
Изберете и дублирайте долната част на човека вляво. Подравнете това копие с човека отдясно. Сега изберете трите припокриващи се форми и приложете инструмента „Разделяне“ от панела „Pathfinder“. Сега внедрете цветовете, за да завършите.
8. Икона с плаващ квадрат
Изберете долната форма и преместете средната й горна точка нагоре, докато изглежда като диамант.
Дублирайте горната форма на диамант и преместете копието надолу с 10 или 20 px.
Изберете двете долни фигури и приложете инструмента „Разделяне“ от панела „Намиране на път“.
От получените пресечени фигури запазете само двете долни части и изтрийте всички допълнителни точки.
Увийте го, като нанесете три нюанса на червено, като в средата зададете най-тъмния.
9. Икона на писмо
С „Инструмент за директен избор (A)“ изберете втората по-висока точка на формата на плика.
Добавете точка от сегмента отдясно с помощта на „Pen Tool“.
Сега, когато имате допълнителна точка, можете да прекроите това отрицателно пространство, за да изглежда като хартия, като повдигнете двете горни точки и ги преместите надясно и наляво, както е показано.
Изберете всичко и приложете разделение от панела “Pathfinder”. Отделете горната форма на хартията от плика, след това дублирайте частта на плика отгоре на хартията, за да изрежете формата на сянката, преди да приложите три нюанса на синьото.
10. Икона за торта
Изолирайте дублирана версия на долната част на тортата.
Стеснете ширината му, като преместите левия и десния ръб навътре.
Преместете получената фигура в горната част на оригиналната икона и разширете по-горните точки, за да припокриете формата на заледяване.
Пример за ръководство за стил на потребителския интерфейс
Създайте разделение на цялата припокриваща се форма с “Pathfinder” и премахнете допълнителните точки до тясната основа за торта, която сте създали по-рано.
Завършете вашата торта, като нанесете светло оранжево върху глазурата и свещта, по-тъмен нюанс към основата и още по-тъмен оранжев за формата на пламъка и ръба на сенките.
Подобрете външния вид и усещане на вашия набор от икони
Създаването на икони със стила на материала може да се постигне с простота. Нуждаете се само от добра комбинация от обмислени геометрични форми, смели цветни нюанси и ефект на падаща сянка.
Добрата новина е, че дори не е необходимо да създавате всички икони от нулата, както направихме в този урок. Можете да започнете от съществуващите безплатни плоски икони и да приложите простите техники, които току-що научихте.
Кажете ни какво мислите! Моля, оставете вашите мисли, коментари и отзиви по-долу.
• • •
