Дизайн android-приложения в фотошопе

в 20:08, , рубрики: android, дизайн, Дизайн в IT, метки: ,

Добрый вечер дорогие читатели!

Решил поделиться своим небольшим опытом в дизайне приложений под ОС android. Будем делать дизайн для приложения с рецептами, а понадобится нам photoshop и воображение. Кому интересно – добро пожаловать под кат.

С момента появления в свет, android претерпел много изменений в дизайне. Текущая тенденция отчётливо отражена на сайте разработчиков. Сегодня мы постараемся приблизиться к тому идеалу, который диктует нам android, и нарисуем дизайн для приложения. В качестве испытуемого я выбрал программку, которая является простым каталогом кулинарных рецептов. Далее буду демонстрировать скриншоты с некоторым описанием.

Дизайн android приложения в фотошопе

Для начала в photoshop’е создадим документ, с размерами экрана девайса на который будем ориентироваться. Ну и дорисуем кнопки управления + статусбар.

Дизайн android приложения в фотошопе

А теперь первый паттерн, Action Bar, пришёл на смену старому тайтлбару, теперь шире и содержательней. Просто задаём фон…

Дизайн android приложения в фотошопе

…рисуем иконку, …

Дизайн android приложения в фотошопе

…заголовок, и главное отличие от того что было раньше:

Дизайн android приложения в фотошопе

Мы размещаем необходимые нашему приложению кнопки. Получается своеобразное скрещивание строки заголовка (например, виндовых окон) и меню.

Дизайн android приложения в фотошопе

Тут я добавил категории блюд в виде списка. Сделал в одной цветовой гамме. Советую все ваши приложения приводить к одному стилю, правило хорошего тона – что ли.

Дизайн android приложения в фотошопе

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

Дизайн android приложения в фотошопе

После нажатия переходим в подкатегорию, обратите внимание, что кнопка поиска нам здесь не нужна, а рядом с иконкой появилась стрелочка, которая в данном случае дублирует кнопку назад.

Дизайн android приложения в фотошопе

Собственно и сама страничка рецепта. Теперь стрелочка рядом с иконкой уже вернёт нас на главную страницу, а так же мы можем поделиться рецептом с помощью кнопки share. При возможности используем по максимуму паттерн юзабилити: свайпы, прокрутки и прочие радости жизни. Теперь дизайн можно отправлять на вёрстку и кодинг.

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

Автор: RightBuilder

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js