Навремето, когато анимираните начални страници и фантастичните оформления бяха нещо, тогава със сигурност имаше смисъл да се наеме професионален дизайнер. Но тенденцията днес е такава минимална - или поне значително опростена.
Позволете ми да ви дам един анекдотичен пример - преди известно време някой ме помоли да създам начален екран за техния софтуер за компютър. Затова излязох - извадих го на хартия за скици, внесох го в PhotoShop, създадох много изискани неонови линии и ефекти. Може да е бил тапет на работния плот, а не начален екран. Въпросът е, че създадох този наистина изискан и сложен дизайн за тях.
Както вероятно се досещате, не им хареса. Дизайнът, с който отидоха, беше буквално малко лого на няколко припокриващи се цветни кръга и името на софтуера под него. Като 2 минути в PhotoShop работа. И знаете ли какво? Някак си трябваше да се съглася, че е по-добър от моя.
Въпросът, който изтъквам, е по този начин - мисля, че програмистите попадат в този капан да направят същата грешка, която направих и аз. Склонни сме да мислим за потребителски интерфейси и начални екрани, които трябва да бъдат тези наистина изискани, привличащи вниманието неща, които правят приложението Да изпъкнеш . Но те не трябва да бъдат - честно казано, не трябва да бъдат. Трябва да вземем програмисти мислене и го прилагайте към естетически дизайн - опростен, функционален, работи.
В тази статия ще разгледаме някои много прости начини за създаване на елегантен Android APP UI / UX, дори ако нямате почти никакъв опит в проектирането.
Освен ако наистина не искате нещо друго, придържайте се към материалния дизайн
Приложението ви не трябва да бъде „ единствен по рода си' и ' открояват се от останалите ” за да бъде популярен и да изглежда добре. Това е, което Google Материален дизайн се стремят да постигнат - стандарт за потребителския интерфейс на приложението в цялата индустрия и те са свършили добра работа. Има много популярни приложения, които се придържат към Material Design - някои от най-големите имена в приложенията за Android, като SwiftKey, Nova Launcher, Textra SMS, YouTube, само за да назовем само няколко.
Основният фокус на Material Design е върху оформление, базирано на карти, с едноцветна палитра. Google работи с водещи дизайнери в индустрията, извличайки много елементи от минималистичните дизайнерски практики и след това пусна цялото нещо безплатно - това е доста добра сделка, тъй като курсовете за дизайн на уебсайтове и приложения могат да струват стотици долари за електронни книги, видеоклипове, и т.н.
Първите стъпки с Material Design са невероятно лесни и има няколко инструмента, които го правят още по-опростен, които ще изброим по-долу:
- Редактор на темата за материали (macOS + скица)
- Приставка за цветова палитра на материалния дизайн (PhotoShop / Illustrator)
- Материал за дизайн на потребителския интерфейс PSD (PhotoShop)
- Комплект за потребителски интерфейс на Android Material Design ( Скица)
- Генератор на теми за потребителски интерфейс
И ако имате нужда от вдъхновение за създаването на прости, елегантни теми за материален дизайн, разгледайте тези списъчни блогове:
- MaterialDesignBlog - 15 страхотни примера за дизайн на материали, направени правилно
- MockPlus - 12 най-добри примера за уебсайт за материален дизайн за вдъхновение
- AndroidAuthority - 10 най-добри приложения за материален дизайн за Android
Цветните градиенти са много по-лесни, отколкото си мислите
Като алтернатива на материалния дизайн, градиентите на долора са прости, модерни и привличащи вниманието. И може би си мислите, че дизайнерите отделят много време за рисуване във всички цветове или за проектиране на крайния градиент. Ще сгрешите - това може да стане за 10 секунди във PhotoShop.
10 секунди в потребителския интерфейс на градиента PhotoShop.
Дори ще ви преведа през това, за да ви покажа колко е лесно.
Създайте нов проект за PS за мобилни устройства ( 1080 x 1920 px @ 72 ppi работи добре)
UIGradients.com - Голяма колекция от предварително направени градиенти.
Отидете на UIGradients.com и намерете нещо, което ви харесва.
Копирайте цветните шестнадесетични стойности от UIGradients
Копирайте градиентните цветове отгоре на визуализацията.
PhotoShop селектор за градиент.
Щракнете с десния бутон върху празен слой в PS и отидете на Blending Options> Gradient Overlay.
Щракнете директно върху визуализацията на градиентния шаблон в падащото меню - не кликвайте върху падащия бутон. Щракването директно върху градиента отваря цветния редактор.
Въведете шестнадесетични стойности от UIGradient в инструмента за градиент PS.
Сега просто поставете пастата на шестнадесетичните стойности на цвета от UIGradient в редактора за градиент на PS.
Регулирайте, ако е необходимо. Вече имате професионален градиен фон за приложението си за Android.
Други инструменти за градиент, които си струва да проверите:
- WebGradients.com
- Генератор на форми на Android ( за генериране на фигури чрез XML, с опция за градиент)
Използвайте SVG вместо JPG / PNG
Вместо да използвате PNG или JPG за вашите графични елементи (бутони, лога и т.н.), вие наистина трябва да използвате SVG ( Мащабируема векторна графика) вместо. Това е така, защото SVG могат да бъдат преоразмерявани, без да губят качество - например, ако увеличите JPG до по-голяма стойност, той губи качество и става размазан / пикселизиран. SVG не го прави. Хората се опитват да използват огромни PNG файлове, които ще бъдат намален за да се поберат на екрани на Android - когато вместо това можете да използвате по-малки SVG, които са разширена без загуба на качество.
Освен това SVG могат да бъдат до 60% до 80% по-малък размер на файла от PNG . Това означава, че вашето приложение или мобилен уебсайт ще се зареди по-бързо за потребителя и ще изглежда добре, независимо от разделителната способност на екрана.
Включете тъмен режим, като използвате Theme.AppCompat.DayNight
Не е необходимо да проектирате две отделни теми, за да включите тема за тъмен / нощен режим в приложението си. Той е почти вграден в библиотеката на AppCompat, просто трябва да го активирате и да редактирате стойностите.
Вижте ръководството на Appual „ Как да внедрите тъмен режим във вашето приложение за Android ”.
Използвайте шаблон или мобилен потребителски интерфейс
Ако приложението ви не изисква изискан, персонализиран GUI, няма абсолютно нищо лошо в използването на шаблон или комплект. Шаблоните и комплектите могат да се използват като вдъхновяваща насока или буквално можете просто да използвате шаблона / комплекта, както е, като добавите свои собствени бутони и други неща.
Някои страхотни ресурси за Android UI шаблони и комплекти:
- SpeckyBoy - 50 безплатни мобилни потребителски интерфейса за iOS и Android
- SketchAppSources - Ресурси за приложения за потребителски интерфейс на Android ( Скица)
- Freebiesbug - PSD UI комплекти ( PhotoShop)
