Как да проектирате потребителски интерфейс на приложение за Android, който не е сучен
Програмистите и разработчиците обикновено не са дизайнери - това е широко прието като вярно. Разработчиците са склонни да се фокусират върху това да направят приложението да работи - дизайнерите се фокусират върху това да направят приложението естетически привлекателно . Но защо разработчиците не могат да направят същото?
В онзи ден, когато анимираните целеви страници и фантастичните оформления бяха нещо, тогава сигурно, че има смисъл да се наеме професионален дизайнер. Но тенденцията днес е минимална - или поне значително опростена.
Нека ви дам един анекдотичен пример - известно време назад някой ме помоли да създам екран за пръски за техния софтуер за компютър. Така че излязох навън - нарисувах го на скица хартия, внесох я в 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.
Дори ще ви преведа през това, за да ви покажа колко е лесно.
Създайте нов PS проект за мобилни устройства ( 1080 x 1920 px @ 72 ppi работи добре)
Отидете на UIGradients.com и намерете нещо, което харесвате.
Копирайте цветовете на градиента отгоре на визуализацията.
Щракнете с десния бутон върху празен слой в 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)