Създаването на продуктови икони не е толкова трудно, колкото може да изглежда на пръв поглед. Научете повече за проектирането на вашата първа икона на приложение за Android от нулата!
Без значение през какъв пазар или услуга се разпространява дадено приложение, иконата на приложението е първото нещо, което потенциалният потребител би забелязал. Първите впечатления са от първостепенно значение, когато се опитвате да привлечете нови потребители, което означава, че иконите са ключови компоненти на всяко приложение. И, независимо от намерението на приложението, създаването на красива икона на приложението трябва да бъде важна част от фазата на разработка на всяко приложение. Въпреки че много разработчици на технически приложения оставят графиките на специализирани дизайнери, разбирайки основите на дизайна и прилагането им е нещо, което всеки може да направи, имайки умение за експериментиране и анализ. Иконите на приложенията не са изключение!
Това ръководство преминава през създаването на адаптивна икона за примерно приложение за Android с помощта на софтуер с отворен код. Въпреки че крайният резултат може да не е във формата, който може да ви е необходим, много от съветите за дизайн, обсъдени тук, ще бъдат валидни за множество платформи.
След пускането на „адаптивни икони“ с Android Oreo, иконата на приложението може да се състои от три основни слоя: непрозрачен фонов слой, слой на преден план с поддръжка на прозрачности а маска който определя формата на иконата. Всички тези слоеве са с размер 108 x 108 dp, въпреки че само вътрешният 72 x 72 dp може да бъде видим за потребителя; другата област, отрязана от маската отгоре, се използва за специални ефекти в потребителския интерфейс, за да изглежда иконата динамична. За непосветените, dp или независим от дисплея пиксел стои като мерна единица за целия интерфейс на Android и се дефинира като равна на размера на един пиксел на дисплей от 160 точки на инч.)
Ник Бъчър от Google говори за кръг от 66 dp в центъра на иконата, която никоя маска не може да откъсне, наречена „безопасна зона“. Това е мястото, където основните елементи на нашия дизайн на икони ще се намират по-късно, когато стигнем до действителното проектиране. Всичко извън този радиус от 33 dp може да не се вижда в иконата, докато има включена маска на формата.
Тъй като за иконите е по-добре да бъдат векторни изображения поради мащабирането на потребителския интерфейс, ще ни трябва векторен графичен редактор, за да направим нашата икона. Inkscape е с отворен код и е чудесна алтернатива на по-скъпия софтуер, така че ще бъде нашият избор за целите на този урок. Проектирах и проектен файл налични тук която има маркирана безопасна зона и собствена дизайнерска ключова линия на Google и изящна маска на слоя, която ни позволява да визуализираме формата на иконата.
С файла на проекта, отворен в Inkscape и Запълване и щрих (Shift+Ctrl+F), Експортирайте PNG изображение (Shift+Ctrl+E) и Слоеве (Shift+Ctrl+L) панелите се отварят, готови сме да започнем. Панелът със слоеве е мястото, където се намира същността на проекта, с Преден план и Заден план слоеве, предназначени да приютят техните титулярни компоненти, и Насоки и Маска предназначени за превключване и изключване (чрез щракване върху иконата на малко око до тях) за справка.
Иконата е израз на идентичността на приложението. Като такова, то трябва да включва както характера на личността на приложението, така и специфични за платформата насоки за дизайн, като тези на Android Езикът на материалния дизайн може да предложи. За целите на демонстрацията, нека приемем, че работим върху приложение за времето, което използва материални елементи. Можем да използваме класическия мотив слънце и облаци, за да информираме потребителя за целта на приложението и да добавим малко завъртете този основен дизайн, като използвате падащи сенки и геометрия, за да се слее добре със средата на Android.
Заден план
Нека започнем с настройката на фона, който ще се състои от синьо небе и жълто слънце в центъра. Обръщане Маска невидим, избирам и правя видим Фонов слой, запълнете цялото платно с Създайте правоъгълници и квадрати инструмент (F4) и задайте цвета на запълване на правоъгълника Запълване и щрих до 64B5F6FF (светло синьо) в съответствие с Цветова палитра на материала. След това избирам Създавайте кръгове, елипси и дъги (F5) и като държите Shift и Ctrl, начертайте кръг от центъра на ключовата линия до втория по големина кръг и задайте цвета му на FFEE58FF, което ни дава малко топло слънце. Винаги е добре да се придържате към основната геометрия при всякакъв вид проектиране, а дизайнерският език на Android по-специално насърчава простотата. За да се съобразя с указанията за материалите, аз също давам на слънцето фина падаща сянка Филтри → Сенки и сияния → Сянка.
Преден план
Очаквайте да преден план, Начертавам група облаци около слънцето, като рисувам кръгове от обиколките на други кръгове и им давам цвят на запълване EEEEEEFF. След това групирам кръговете по подходящ начин, като щраквам с десния бутон върху множество обекти и избирам Група, и стартирайте генератора на падащи сенки върху двете крайни форми, които получавам в крайна сметка. Обръщане Насоки невидим и превключващ Преден план и Заден план алтернативно могат да се видят съставните слоеве на иконата на нашето приложение за времето. Ако иконата на приложението някога бъде плъзгана през начален екран, облаците ще се спускат срещу неподвижно слънце!
Резултат
Маска вече може да се направи видим и да се променя с него Редактирайте пътища по възли (F2), за да опитате и симулирате различни маски на форми. Освен това двата слоя могат да бъдат експортирани отделно с помощта на Експортирайте PNG изображение панел за използване в Android Studio, и заедно за a Икона на Google Play.
Докато създавате икона на продукт, винаги е добра практика да се опитате да вземете целта на дадено приложение, да го дестилирате до неговата най-абстрактна визуална форма и да го представите с помощта на проста геометрия. Колкото по-опростен е всеки компонент в дизайна, толкова по-добре и по-надеждно обикновено работи и това важи и за графичния дизайн. За повечето цели форма на обект на преден план и плътен цвят или шарка на заден план (или обратното) работи добре, но както в нашия примерен случай, може да се използва друг слой от обекти, ако се усети необходимо; твърде много подреждане или използване на падащи сенки само ще усложни дизайна на иконата.
Можете да прочетете повече за дизайна на иконите в материалните интерфейси на официалния сайт Материален уебсайти вземете безплатни системни икони за използване в дизайна на икони от същия уебсайт.