Добрый вечер дорогие хаброжители!
Решил поделиться своим небольшим опытом в дизайне приложений под ОС android. Будем делать дизайн для приложения с рецептами, а понадобится нам photoshop и воображение. Кому интересно – добро пожаловать под кат.
С момента появления в свет, android претерпел много изменений в дизайне. Текущая тенденция отчётливо отражена на сайте разработчиков. Сегодня мы постараемся приблизиться к тому идеалу, который диктует нам android, и нарисуем дизайн для приложения. В качестве испытуемого я выбрал программку, которая является простым каталогом кулинарных рецептов. Далее буду демонстрировать скриншоты с некоторым описанием.
![](https://habrastorage.org/storage2/9a5/95b/c62/9a595bc62cdb5487bb0da4e080287caf.gif)
Для начала в photoshop’е создадим документ, с размерами экрана девайса на который будем ориентироваться. Ну и дорисуем кнопки управления + статусбар.
![](https://habrastorage.org/storage2/37f/cf4/4c4/37fcf44c4b9da0fc2e8c8ff9a44c8139.gif)
А теперь первый паттерн, Action Bar, пришёл на смену старому тайтлбару, теперь шире и содержательней. Просто задаём фон…
![](https://habrastorage.org/r/w780q1/storage2/283/379/d07/283379d076d776558103ef8f44faa9f0.jpg)
…рисуем иконку, …
![](https://habrastorage.org/r/w780q1/storage2/a62/8ed/3eb/a628ed3eb384e1eb33ee8e36036438ec.jpg)
…заголовок, и главное отличие от того что было раньше:
![](https://habrastorage.org/r/w780q1/storage2/c14/772/78f/c1477278f04428610843f1a8016b0bb7.jpg)
Мы размещаем необходимые нашему приложению кнопки. Получается своеобразное скрещивание строки заголовка (например, виндовых окон) и меню.
![](https://habrastorage.org/r/w780q1/storage2/101/b5a/3a1/101b5a3a1d103150f635d92713e41389.jpg)
Тут я добавил категории блюд в виде списка. Сделал в одной цветовой гамме. Советую все ваши приложения приводить к одному стилю, правило хорошего тона – что ли.
![](https://habrastorage.org/r/w780q1/storage2/84f/7d0/e30/84f7d0e30a29c9ab6a9cf84af2ffe07f.jpg)
Теперь выделил один пункт, при нажатии по пункту он будет таким. Это паттерн юзабилити, облегчает взаимодействие пользователя с программой.
![](https://habrastorage.org/r/w780q1/storage2/084/7e3/c95/0847e3c954d03948683b7857c50c5f2f.jpg)
После нажатия переходим в подкатегорию, обратите внимание, что кнопка поиска нам здесь не нужна, а рядом с иконкой появилась стрелочка, которая в данном случае дублирует кнопку назад.
![](https://habrastorage.org/r/w780q1/storage2/e75/046/3d8/e750463d88930108f71d65b7299e8ec0.jpg)
Собственно и сама страничка рецепта. Теперь стрелочка рядом с иконкой уже вернёт нас на главную страницу, а так же мы можем поделиться рецептом с помощью кнопки share. При возможности используем по максимуму паттерн юзабилити: свайпы, прокрутки и прочие радости жизни. Теперь дизайн можно отправлять на вёрстку и кодинг.
Вот пожалуй и всё что я хотел рассказать вам, надеюсь что-то новое смог донести в понятной форме. Не претендую на «проф-инструкцию», это всего лишь мой опыт и наблюдения.
Решил поделиться своим небольшим опытом в дизайне приложений под ОС android. Будем делать дизайн для приложения с рецептами, а понадобится нам photoshop и воображение. Кому интересно – добро пожаловать под кат.
С момента появления в свет, android претерпел много изменений в дизайне. Текущая тенденция отчётливо отражена на сайте разработчиков. Сегодня мы постараемся приблизиться к тому идеалу, который диктует нам android, и нарисуем дизайн для приложения. В качестве испытуемого я выбрал программку, которая является простым каталогом кулинарных рецептов. Далее буду демонстрировать скриншоты с некоторым описанием.
![](https://habrastorage.org/storage2/9a5/95b/c62/9a595bc62cdb5487bb0da4e080287caf.gif)
Для начала в photoshop’е создадим документ, с размерами экрана девайса на который будем ориентироваться. Ну и дорисуем кнопки управления + статусбар.
![](https://habrastorage.org/storage2/37f/cf4/4c4/37fcf44c4b9da0fc2e8c8ff9a44c8139.gif)
А теперь первый паттерн, Action Bar, пришёл на смену старому тайтлбару, теперь шире и содержательней. Просто задаём фон…
![](https://habrastorage.org/storage2/283/379/d07/283379d076d776558103ef8f44faa9f0.jpg)
…рисуем иконку, …
![](https://habrastorage.org/storage2/a62/8ed/3eb/a628ed3eb384e1eb33ee8e36036438ec.jpg)
…заголовок, и главное отличие от того что было раньше:
![](https://habrastorage.org/storage2/c14/772/78f/c1477278f04428610843f1a8016b0bb7.jpg)
Мы размещаем необходимые нашему приложению кнопки. Получается своеобразное скрещивание строки заголовка (например, виндовых окон) и меню.
![](https://habrastorage.org/storage2/101/b5a/3a1/101b5a3a1d103150f635d92713e41389.jpg)
Тут я добавил категории блюд в виде списка. Сделал в одной цветовой гамме. Советую все ваши приложения приводить к одному стилю, правило хорошего тона – что ли.
![](https://habrastorage.org/storage2/84f/7d0/e30/84f7d0e30a29c9ab6a9cf84af2ffe07f.jpg)
Теперь выделил один пункт, при нажатии по пункту он будет таким. Это паттерн юзабилити, облегчает взаимодействие пользователя с программой.
![](https://habrastorage.org/storage2/084/7e3/c95/0847e3c954d03948683b7857c50c5f2f.jpg)
После нажатия переходим в подкатегорию, обратите внимание, что кнопка поиска нам здесь не нужна, а рядом с иконкой появилась стрелочка, которая в данном случае дублирует кнопку назад.
![](https://habrastorage.org/storage2/e75/046/3d8/e750463d88930108f71d65b7299e8ec0.jpg)
Собственно и сама страничка рецепта. Теперь стрелочка рядом с иконкой уже вернёт нас на главную страницу, а так же мы можем поделиться рецептом с помощью кнопки share. При возможности используем по максимуму паттерн юзабилити: свайпы, прокрутки и прочие радости жизни. Теперь дизайн можно отправлять на вёрстку и кодинг.
Вот пожалуй и всё что я хотел рассказать вам, надеюсь что-то новое смог донести в понятной форме. Не претендую на «проф-инструкцию», это всего лишь мой опыт и наблюдения.