Програмистите и разработчиците обикновено не са дизайнери - това е широко прието като вярно. Разработчиците са склонни да се фокусират върху това да направят приложението да работи - дизайнерите се фокусират върху това да направят приложението естетически привлекателно . Но защо разработчиците не могат да направят същото?

В онзи ден, когато анимираните целеви страници и фантастичните оформления бяха нещо, тогава сигурно, че има смисъл да се наеме професионален дизайнер. Но тенденцията днес е минимална - или поне значително опростена.

Нека ви дам един анекдотичен пример - известно време назад някой ме помоли да създам екран за пръски за техния софтуер за компютър. Така че излязох навън - нарисувах го на скица хартия, внесох я в PhotoShop, създадох много фантазии неонови линии и ефекти. Можеше да е тапет за десктоп, а не екран за пръскане. Въпросът е, че създадох този наистина фантастичен и сложен дизайн за тях.

Както вероятно се досещате, не им хареса. Дизайнът, с който отидоха, беше буквално малко лого на няколко припокриващи се цветни кръга и името на софтуера под него. Като например, 2 минути в работа в PhotoShop. И знаеш ли какво? Някак трябваше да се съглася, че е по-добре от моето.

Важното е, че аз така смятам, че програмистите попадат в този капан да направят същата грешка, която направих и аз. Склонни сме да мислим за потребителски интерфейси и екрани за пръски, които трябва да бъдат тези наистина фантастични, привлекателни неща, които правят приложението да изпъква . Но те не трябва да бъдат - честно казано, не трябва да бъдат. Трябва да вземем нагласата на програмист и да го приложим към естетическия дизайн - просто, функционално, работи.

В тази статия ще разгледаме някои много прости начини да създадете елегантен Android APP UI / UX, дори и да нямате почти никакъв опит в проектирането.

Освен ако наистина не искате нещо друго, придържайте се към материалния дизайн

Приложението ви не е необходимо да бъде „ уникално“ и „да се откроява от останалите“, за да бъде популярно и да изглежда добре. Това е, което Материалният дизайн на Google се стреми да постигне - стандарт за потребителския интерфейс на приложенията в цялата индустрия и те свършиха добра работа. Има много популярни приложения, които се придържат към Material Design - някои от най-големите имена в приложенията за Android, като SwiftKey, Nova Launcher, Textra SMS, YouTube, само за да назовем няколко.

Основният фокус на Material Design е върху оформление на базата на карти, със солидна цветова палитра. Google работи с най-добрите дизайнери в индустрията, черпи много елементи от минималистичните дизайнерски практики и след това пусна цялата работа безплатно - това е доста добра сделка, тъй като курсовете за дизайн на уебсайтове и приложения могат да струват стотици долари за електронни книги, видеоклипове, и т.н.

Първите стъпки с Дизайн на материалите са невероятно лесни и има шепа инструменти, които го правят още по-опростен, който ще изброим по-долу:

• Редактор на теми за материали (macOS + Sketch)
• Плъгин за цветна палитра за дизайн на материали (PhotoShop / Illustrator)
• Материален дизайн UI Kit PSD (PhotoShop)
• UI Kit за дизайн на материали за Android ( скица)
• Генератор на тематични материали на материала

И ако се нуждаете от малко вдъхновение за създаване на прости, елегантни теми за дизайн на материали, разгледайте тези блогове със списък:

• MaterialDesignBlog - 15 страхотни примера за Дизайн на материали, направен правилно
• MockPlus - 12 примера за уебсайт за най-добър дизайн на материали, за да черпите вдъхновение
• AndroidAuthority - 10 най-добри приложения за дизайн на материали за Android

Цветните градиенти са по-лесни, отколкото си мислите

За алтернатива на Material Design, градиентите на долора са прости, модерни и привличащи вниманието. И може би си мислите, че дизайнерите прекарват много време, рисувайки във всички цветове или проектирайки крайния градиент. Ще сбъркате - това може да стане за 10 секунди в PhotoShop.

10 секунди в интерфейса за градиент на PhotoShop.

Дори ще ви преведа през това, за да ви покажа колко е лесно.

Създайте нов PS проект за мобилни устройства ( 1080 x 1920 px @ 72 ppi работи добре)

UIGradients.com - Голяма колекция от предварително направени градиенти.

Отидете на UIGradients.com и намерете нещо, което харесвате.

Копирайте цветовите шестнадесетични стойности от UIGradients

Копирайте цветовете на градиента отгоре на визуализацията.

Селектор за градиент PhotoShop.

Щракнете с десния бутон върху празен слой в PS и отидете на Опции за смесване> Градиентно наслагване.

Кликнете директно върху визуализацията на градиентния шаблон в падащото меню - не кликнете върху бутона на падащото меню. Щракването директно върху градиента отваря цветния редактор.

Въведете шестнадесетични стойности от UIGradient в PS градиентния инструмент.

Сега просто поставете пастата цветовите шестнадесетични стойности от UIGradient в PS градиен редактор.

Регулирайте при необходимост. Вече имате професионален градиентен фон за приложението си за Android.

Други инструменти за градиент, които си струва да проверите:

• WebGradients.com
• Android Shapes Generator ( за генериране на форми чрез XML, с опция за градиент)

Използвайте SVGs вместо JPG / PNG

Вместо да използвате PNG или JPG за вашите графични елементи (бутони, лога и т.н.), наистина трябва да използвате SVGs ( Scalable Vector Graphics) . Това е така, защото SVG файловете могат да бъдат преоразмерени, без да губят качество - например, ако увеличите мащаба на JPG до по-голяма стойност, той губи качество и става размазан / пикселиран. SVG не. Хората се опитват да използват огромни PNG файлове, които ще бъдат намалени с мащаб, за да се поберат на екраните на Android - когато вместо това, можете да използвате по-малки SVG файлове, които се увеличават без загуба на качество.

Освен това SVG файловете могат да бъдат с до 60% до 80% по-малък размер на файла от PNG . Това означава, че вашето приложение или мобилен уебсайт ще се зареждат по-бързо за потребителя и ще изглеждат добре, независимо от резолюцията на екрана.

Включете тъмен режим с помощта на Theme.AppCompat.DayNight

Не е необходимо да проектирате две отделни теми, за да включите тема на режим тъмен / нощен режим в приложението си. Почти е вграден в библиотеката на AppCompat, просто трябва да го активирате и да редактирате стойностите.

Вижте ръководството на Appual „Как да внедрите тъмен режим в приложението си за Android“.

Използвайте шаблон или мобилен потребителски интерфейс

Ако приложението ви не изисква фантазия, персонализиран графичен интерфейс, няма абсолютно нищо лошо в използването на шаблон или комплект. Шаблоните и комплектите могат да се използват като вдъхновяваща насока или можете буквално просто да използвате шаблона / комплекта такъв, какъвто е, като добавите свои собствени бутони и неща.

Някои страхотни ресурси за шаблони и комплекти за потребителски интерфейс на Android:

• SpeckyBoy - 50 безплатни мобилни потребителски интерфейса за iOS и Android
• SketchAppSources - Ресурси за приложение за Android UI ( Sketch)
• Freebiesbug - PSD UI комплекти ( PhotoShop)