Как создать неудобный пользовательский интерфейс для Android-приложения

. Но почему разработчики не могут сделать то же самое?

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

Позвольте мне привести анекдотический пример - некоторое время назад кто-то попросил меня создать заставку для программного обеспечения их ПК. Поэтому я выложился на полную - нарисовал его на бумаге для набросков, импортировал в PhotoShop, создал множество причудливых неоновых линий и эффектов. Это могли быть обои для рабочего стола, а не заставка. Дело в том, что я создал для них действительно причудливый и продуманный дизайн.

Как вы, наверное, догадались, им это не понравилось. Их дизайн представлял собой буквально небольшой логотип из нескольких перекрывающихся цветных кружков и название программного обеспечения под ним. Например, 2 минуты работы в PhotoShop. И знаешь, что? Я вроде как должен был согласиться, что он лучше моего.

Я хочу сказать следующее: я думаю, что программисты попадают в эту ловушку, совершая ту же ошибку, что и я. Мы склонны думать, что пользовательский интерфейс и заставки должны быть действительно причудливыми, привлекательными вещами, которые делают приложение выделяться, быть заметным . Но они не должны быть - честно говоря, не должно быть. Мы должны взять программисты образ мышления и применить его к эстетическому дизайну - простой, функциональный, работает.

В этой статье мы рассмотрим несколько очень простых способов создания элегантного пользовательского интерфейса / пользовательского интерфейса приложения для Android, даже если у вас почти нет опыта проектирования.

Если вы действительно не хотите чего-то еще, придерживайтесь материального дизайна

Ваше приложение не обязательно должно быть ' уникальный » и ' выделяться среди остальных » чтобы он был популярен и хорошо выглядел. Это то, что Google Материальный дизайн стремятся достичь - стандарт для пользовательского интерфейса приложений в отрасли, и они хорошо поработали. Существует масса популярных приложений, которые придерживаются Material Design - некоторые из самых известных приложений для Android, такие как SwiftKey, Nova Launcher, Textra SMS, YouTube и многие другие.

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

Начать работать с Material Design невероятно легко, и есть несколько инструментов, которые делают его еще проще, которые мы перечислим ниже:

Редактор тем материалов (macOS + Sketch)
Плагин Material Design Color Palette (Фотошоп / Иллюстратор)
Материал UI Kit PSD (Фотошоп)
Комплект пользовательского интерфейса для Android Material Design ( Эскиз)
Генератор тем пользовательского интерфейса материала

А если вам нужно вдохновение для создания простых и элегантных тем Material Design, загляните в эти блоги со списком:

MaterialDesignBlog - 15 отличных примеров правильного материального дизайна
MockPlus - 12 лучших примеров веб-сайтов с материальным дизайном для вдохновения
AndroidAuthority - 10 лучших приложений Material Design для Android

Цветовые градиенты намного проще, чем вы думаете

В качестве альтернативы материальному дизайну градиенты dolor просты, модны и привлекают внимание. И вы можете подумать, что дизайнеры тратят много времени на рисование во все цвета или создание идеального градиента. Вы ошибаетесь - в PhotoShop это можно сделать за 10 секунд.

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

Я даже проведу вас через это, чтобы показать, насколько это просто.

Создайте новый проект PS для Mobile ( 1080 x 1920 пикселей @ 72 ppi работает нормально)

UIGradients.com - Большая коллекция готовых градиентов.

Идти к UIGradients.com и найдите то, что вам нравится.

Скопируйте шестнадцатеричные значения цвета из UIGradients

Скопируйте цвета градиента из области предварительного просмотра.

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

Щелкните правой кнопкой мыши пустой слой в PS и перейдите в Параметры наложения> Наложение градиента.

Нажмите прямо на предварительный просмотр градиентного узора в раскрывающемся меню - не нажимайте кнопку раскрывающегося списка. Щелчок прямо по градиенту открывает редактор цвета.

Введите шестнадцатеричные значения из UIGradient в инструмент градиента PS.

Теперь просто вставьте шестнадцатеричные значения цвета из UIGradient в редактор градиентов PS.

При необходимости отрегулируйте. Теперь у вас есть профессиональный градиентный фон для вашего Android-приложения.

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

WebGradients.com
Генератор фигур Android ( для генерации форм через XML, с возможностью градиента)

Используйте SVG вместо JPG / PNG

Вместо использования PNG или JPG для ваших графических элементов (кнопок, логотипов и т. Д.) Вы действительно должны использовать SVG ( Масштабируемая векторная графика) вместо. Это связано с тем, что размер SVG можно изменять без потери качества - например, если вы увеличиваете масштаб JPG до большего значения, он теряет качество и становится размытым / пиксельным. SVG - нет. Люди пытаются использовать огромные файлы PNG, которые будут уменьшенный чтобы соответствовать экранам Android - вместо этого вы можете использовать меньшие SVG, которые увеличенный без потери качества.

world of warcraft не смог запустить 3D-ускорение

Кроме того, SVG может быть до Размер файла на 60–80% меньше, чем у PNG . Это означает, что ваше приложение или мобильный веб-сайт будет загружаться быстрее для пользователя и будет хорошо выглядеть независимо от разрешения экрана.

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

Вам не нужно создавать две отдельные темы, чтобы включить в свое приложение тему темного / ночного режима. Он в значительной степени встроен в библиотеку AppCompat, вам просто нужно включить его и отредактировать значения.

См. Руководство Appual ' Как реализовать темный режим в вашем приложении для Android ».

Используйте шаблон или мобильный UI Kit

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

Некоторые отличные ресурсы для шаблонов и наборов пользовательского интерфейса Android: