10 инструментов для дизайнера мобильных приложений.
Несмотря на огромное количество всевозможных инструментов для дизайна мобильных приложений далеко не каждое обладает всем необходимым функционалом. Кроме того, необходимо понимать, что некоторые инструменты рассчитаны для создания оформления мобильных приложений на платформе Android, а другие для iOS. Начиная создавать дизайн приложения для мобильного устройства необходимо заранее обзавестись всеми необходимыми инструментами. Для максимально эффективной разработки оформления приложений для смартфонов и планшетов необходимо пользоваться только самым проверенным софтом. По этой причине мы подготовили список самых полезных инструментов для дизайнера мобильных приложений. 1. Генератор интерактивных прототипов Axure:
Имеет возможность визуального редактирования;
Поддерживает фреймы;
Подходит для разработки дизайна приложений на Android и iOS.
2. Mockflow для фрейминга:
Включает огромную библиотеку элементов;
Идеально подходит для платформ Android, iOS и Windows Phone;
Имеет большое количество элементов для прототипирования.
3. Balsamiq для прототипирования:
Включает огромное количество графических элементов для создания дизайна приложения для мобильных устройств;
Обладает множеством стандартизированных шаблонов для самых популярных моделей мобильных устройств;
Все графические элементы интерфейса как нельзя лучше подойдут для создания дизайна любой сложности.
4. Платформа Proto для создания прототипов:
Позволяет воссоздавать основные возможные действия пользователя мобильным приложением;
Включает возможность тестирования непосредственно на смартфоне;
Обладает невероятно широким спектром всех необходимых для дизайнера функций.
5. Flair Builder – инструмент для создания интерфейса мобильных приложений:
Включает массу функциональных возможностей для реализации дизайнерских решений;
При помощи данного инструмента можно создать HTML-прототип практически каждого дизайна;
Позволяет тестировать прототипы на смартфонах в режиме реального времени.
6. Библиотека HotGloo:
Поддерживает CSS3-эффекты;
Позволяет легко проводить тесты дизайна на дисплее любого мобильного устройства;
Содержит огромное количество графических элементов.
7. Редактор Invision для внесения быстрых изменений в дизайн:
Имеет большое количество шаблонов;
Поддерживает множество форматов;
Включает возможность экспорта готовых прототипов.
8. iPlotz для создания мокапов:
Позволяет внедрять в дизайн приложений для смартфонов и планшетов как существующие, так и вновь созданные шаблоны;
Подходит для реализации дизайнерских решений на платформе Android;
Поддерживает множество форматов.
9. Инструмент Wireframe Sketcher:
Позволяет быстро создавать специальные скетчи;
Данный дизайнерский пакет позволяет разрабатывать оформления для мобильных устройств на разных платформах;
Включает в себя массу полезных плагинов.
10. Веб-приложение Pidoco:
Основной особенностью данного инструмента является то, что при его помощи можно реализовывать дизайнерские решения в режиме онлайн;
Включает массу симуляторов для тестирования дизайна приложений;
Имеет массу графических элементов.
На просторах всемирной сети интернет можно найти еще не один десяток полезных и эффективных инструментов для создания дизайна мобильных приложений. При их помощи практически каждый сможет создать красивое оформление для мобильных программ.
Share this:
lampalampa.net
Основы разработки дизайна под Android
С начала 2016 года я перестал заниматься дизайном под веб и полностью погрузился в мир Андройд-приложений. На это решение повлияло множество факторов, но главным, пожалуй, был стремительный рост мобильного сегмента и неизменно падающий десктоп.
Вы спросите, почему Андройд, а не какой-нибудь iOS?
В этой статье я постараюсь рассказать основы, которых должно хватить для успешного старта и дальнейшего самостоятельного изучения платформы. А начнем, пожалуй, с разновидностей экранов, коих в Андроиде великое множество.
Экраны Андройд-устройств
Каждая говнофирма выпускающая «андроиды», считает своим долгом наплодить мильйон разнообразных устройств с самыми невообразимыми параметрами экранов. Это в значительной степени усложняет разработку дизайна и добиться эффекта «везде збс» становится гораздо сложнее.
Но все не так страшно, как может показаться на первый взгляд, если уяснить несколько базовых принципов.
Во-первых, нужно запомнить, что существует 5 основных плотностей экранов: mdpi, hdpi, xhdpi, xxhdpi и xxxhdpi. Базовой плотностью считается mdpi, от неё мы и будем плясать.
hdpi = mdpi*1.5
xhdpi = mdpi*2
xxhdpi = mdpi*3
xxxhdpi = mdpi*4
Дизайн мы рисуем под mdpi, но графические элементы, присутствующие в макете, нарезаются для всех 5 плотностей.
Во-вторых, важно определиться с устройством, на котором вы будете тестировать свои каракули. Для меня это Nexus 5. Вы же можете выбрать для себя любой другой смартфон.
Отталкиваться нужно, в первую очередь, от соотношения сторон. В идеале, оно должно быть равно 16:9. Это примерно тоже, что и 1024×768 в вебе.
Например
У нас есть входные данные — соотношение сторон 16:9, плюс, возможно, рабочий девайс под рукой.
Переходим по ссылке https://design.google.com/devices/ и залипаем в таблицу. Пытаемся найти в ней своё устройство. Допустим, мы ищем ранее упомянутый Nexus 5.
Из таблицы видно, что у нексуса необходимое нам соотношение сторон 16:9. Размер экрана в DP — 360×640, а в PX — 1080×1920. Плотность экрана xxhdpi.
Если не вдаваться в подробности, 360×640 это и есть наше mdpi.
Именно под него мы и будем рисовать макеты. Выше я писал, что xxhdpi = mdpi*3. Соответственно, если мы 360×640 умножим на 3, получится как раз 1080×1920.
Что такое Dp
Dp — Density-independet pixel. 1dp = 1px при плотности экрана mdpi. В любом другом случаем 1dp=1px*Multiplier.
Например
Нам нужно нарисовать иконку для Nexus 5. По гайдам она должна быть 24×24 dp. Из таблицы выше мы знаем, что nexus 5 = xxhdpi, а xxhdpi = mdpi*3.
Соответственно, применяя изученную ранее формулу 1dp=1px*Multiplier получаем: 24dp=24px*3=72px.
Гайдлайны Андроид
После того, как мы определились с девайсом и размером будущих макетов, можно приступать к изучению гайдлайнов Андроид. Это очень ответственный шаг и вам нужно отнестись к нему максимально серьезно.
Из гайдов вы узнаете все необходимые вещи для разработки правильного дизайна, начиная от анимации и заканчивая компонентами из которых строится макет. Информации там довольно много, но без неё вам вряд ли удастся сделать качественный дизайн.
Изначально, я планировал дать ссылки на наиболее важные моменты, но там важно абсолютно всё. Поэтому не ленитесь и читайте очень внимательно, чтобы в случае чего — быстро найти необходимый раздел.
Сетка
Для построения своих макетов я не использую сетку вообще, несмотря на то, что Гугл настоятельно рекомендует использовать сетку в 8dp. Коллега, который обучает меня Андроиду — сторонник компонентного подхода, соответственно и я также перенял для себя это правило.
Есть мнение, что сетка обеспечивает правильное выравнивание элементов только в рамках графической программы. В боевых условиях — всё ползет и скачет, а это нереально бесит.
Вообще, гайдлайны для Андроида — довольно странная штука. Они ориентируются в первую очередь на дизайн, с точки зрения его визуальной части и в некоторых случаях, практически полностью игнорируют код. Это приводит к тому, что реализовать рекомендацию становится практически невозможно.
Еще один аргумент, в пользу компонентного дизайна — разаработчики. У них нет понятия модульной сетки, а вся работа с отступами строится на основе padding-ов. Компонентный дизайн также строится на основе padding-ов, соответственно найти общий язык с разработчиками становится легче.
Несколько полезных советов
Рекомендую подписаться в Фэйсбуке на группу Качественный Андроид. Лучшее, что можно найти для дизайнеров по Андроиду, находится в этой группе и даже больше.
Установите Skala Preview. Замечательный инструмент, который проецирует ваши макеты на мобильное устройство. Его мы подробно разберем несколько позже.
В мобильных приложениях на счету каждый КБ, поэтому для оптимизации изображений очень рекомендую установить Image Optim.
В заключение
В дизайне под Андроид нет ничего сложного. Как и в любом другом деле, самое главное — набить руку. В последующих статьях мы более подробно рассмотрим компонентный дизайн и попробуем изобразить какой-нибудь вменяемый макет.
onjee.ru
Подборка приложений для Android — дизайн интерьера
Если вы планируете освежить интерьер вашего дома, делаете ремонт в квартире или собираетесь обустроить новое жилье, тогда подборка этой недели вам будет очень кстати. А возможно, вы работаете дизайнером либо просто любите помечтать о красивом доме, в таком случае, обратите внимание на пять приложений для планировки дизайна интерьера.
Home Design 3D
Простое в использовании приложение, которое поможет представить как будет выглядеть ваша кухня или комната. Всего за несколько минут вы сможете расставить всё по местам и дать себе представление о том как лучше всё обустроить. Лучше ли будет когда столешница будет стоять возле мойки или совсем в другом месте? Обеденный стол поставить по центру или у окна? Home Design 3D поможет ответить на эти вопросы. 3D-модели выглядят красиво, их цвета можно настроить. Программа имеет интуитивно понятный интерфейс, но не может похвастаться большим функционалом. Тем не менее этого достаточно чтобы понять как расставить мебель в вашей квартире или в вашем доме.
Home Design 3D
HOUZZ
Interior Design Ideas предназначено для создания дизайна помещения, но не только. Здесь собрано множество советов по дизайну и расстановке, которые помогут улучшить свои навыки и обогатить познания в этом интересном деле. В приложении также присутствует большое количество фотографий интерьера от известных дизайнеров, которые вдохновят пользователя. Кроме того, есть советы по ремонту, которые также вам очень пригодятся. Вы можете набросать интерьер комнаты в 2D из готовых фотографий предметов и получить реальную картину вашей задумки.
HOUZZ
INMYROOM
Вам нужно срочно делать ремонт, но у вас все еще нет интересных идей для воплощения в реальность Тогда приложение INMYROOM поможет вам вдохновиться идеями дизайна и создать что-то интересное, стильное и современное. Приложение просит авторизоваться через почту, vk или Facebook.
Дизайн приложения впечатляет. Здесь на вкладках расположены идеи интерьеров, магазин (где вы можете приобрести товары), фотографии, каталог профи. Также на главной странице вы найдете множество полезных статей и советов по оформлению вашей квартиры или дома в любом стиле и на любой вкус.
INMYROOM
MagicPlan
MagicPlan – приложение, которое поможет сделать вам проект помещения с помощью камеры. Программа представляет детальную инструкцию в создании плана комнаты с помощью камеры (при этом учитываются все углы, стены, окна и т.п.), также можно нарисовать план самостоятельно или загрузить его фото. Комнаты в приложении можно создавать разной формы и размера, также добавлять объекты (мебель, двери, ступеньки, предметы на улице). Чертежами и планами можно делиться с друзьями и родственниками.
MagicPlan
Planner 5D
Вы собрались переехать на новую квартиру или сделать перестановку в доме, но все еще не имеете никаких идей и представления как все расположить? Тогда Planner 5D точно для вас. Приложение поможет без проблем спроектировать до мелочей дизайн вашей квартиры и воплотить все мечты в реальность, при этом сэкономив деньги на дизайнерах и архитекторах. Здесь можно добавить комнаты как в вашем доме, отрегулировать их площадь, выбрать материалы пола, потолка, стен, добавить нужную мебель и т.п. Также можно проектировать дизайн внешнего вида, задний двор. Проекты можно просматривать как в 3D, так и в 2D режиме.
Planner 5D
androidp1.ru
Интеграция дизайна мобильных приложений. Часть 1: Android / Habr
Этот доклад я прочитал на Dribbble Meetup 2013, который прошел в Москве в День космонавтики. В нём описан мой процесс интеграции дизайна — то есть в каком виде передавать приложение от дизайнера к разработчику мобильных приложений. Выбор интсрументов, которые я использую в работе, и сам процесс сформировались опытным путём, методом проб и ошибок. Надеюсь, он поможет сохранить вам немного времени и избавит хотя бы от части рутинной работы. Так как презентация содержит достаточно большое количество слайдов, я решил разбить материал на две части. Первая часть — интеграция дизайна под платформу Android. Вторая — под iOS и Windows Phone, а также упомяну про Samsung Bada. Дальше — много картинок.
Проблематика
А начну я свой рассказ с момента, когда мы уже нарисовали макеты нашего приложения. Всё выглядит идеально, всё выверено до пикселя.
Мы отдаем макеты в разработку, а на выходе получаем ЭТО.
Почему?! Ответ очевиден. Виноваты программисты, которые криво всё запрогали… На самом деле, НЕТ! Еще до начала работы программистов, дизайнер должен передать им спецификацию дизайна (ТЗ), которую дизайнер обычно делает спустя рукава, или что еще хуже, вообще не делает. Поэтому программист и вынужден делать всё на своё усмотрение, раз нету четкой инструкции.
Специфкация дизайна (ТЗ)
Итак, под спецификацией дизайна я понимаю набор файлов, которые дизайнер передает программистам. По сути, их создание и есть процесс интеграции дизайна. У Microsoft и Google это называется blue, red, green lines. У меня это три папки: Metrics, Fonts, Res.
Составлению ТЗ надо уделить должное внимание, т.к. именно это видит конечный пользователь вашего продукта, а не макеты дизайнера.
Android
Рассмотрим интеграцию дизайна на примере 4-х основных в России мобильных платформ. И начну я с самого тяжелого для понимания… Android
Краткая теоретическая часть
Немного теории для понимания дальнейшего процесса. Ни для кого не секрет, что экраны телефонов имеют разные разрешения и разные диагонали, то есть экраны характеризуются разной плотностью. Она измеряется в точках на дюйм. Выделяют 4 основных категории плотности экрана для Android-устройств: LDPI, MDPI, HDPI, XHDPI, XXHDPI (пока не берём в расчёт). Поэтому, чтобы элементы интерфейса имели одинаковый физический размер на экранах разных устройств, компания Google ввела абстрактную единицу измерения — DP.
Не будем вдаваться в подробности откуда появляются эти цифры, а для себя запомним, что один dp равен одному физическому пикселю для экранов с плотностью MDPI. Соответственно, для XHDPI-экранов, 1 dp будет равен 2 px (такая плотность, например, у Google Nexus 4).
Практическая реализация
Теперь приступаем к практической реализации. Дальше будет описан мой процесс работы, который сформировался опытным путем. Надеюсь, он будет вам полезен.
Metrics
Итак, папка Metrics должна содержать файлы с размерами элементов, отступами между ними и от края экрана, цвета однотонных элементов — то, что делается программно (например, разделители).
Все размеры для разработчиков должны быть указаны в DP.
Я делаю макеты для XHDPI-экранов (768×1280, Nexus 4). А как мы помним, для XHDPI 1 dp = 2 px. Но так как Photoshop, естественно, не понимает dp, а работает с пикселями, то сначала я делаю так, чтобы 1 dp ровнялся 1 px. Заходим в Image, жмём Image Size, и выставляем значение 50%. Готово, теперь 1 dp = 1 px.
Можно приступить, так сказать, к «образмериванию» макета. Делать это вручную было очень утомительно, и недавно мне попалось на глаза очень полезное раcширение для Photoshop.
PNG EXPRESS — платное расширение, стоит 29 баксов. Но оно реально того стоит. Для Photoshop, начиная с версии CS5. Оно позволяет делать много полезных вещей, но я использую его, именно, для «образмеривания».
Пример
Шаг 1. Допустим, нам надо указать размер между иконкой X (удалить) и текстом Discard.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.
Хоть мы получаем не полностью автоматизированный процесс, всё же это расширение экономит кучу времени.
Fonts
Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д. Я вынес ее отдельно от размеров, чтобы программистам было легче разобраться в таком большом обилии выносок, тем самым сократив количество ошибок.
Все размеры шрифтов должны быть указаны в SP
1 SP = 1 DP, если в настройках размер шрифта операционной системы установлен по умолчанию. Если у пользователя проблема со зрением, он может в настройках системы увеличить шрифт. Если вы задали размер шрифта в SP, то ваше приложение подстроится под пользователя и также увеличит шрифт. Если в других единицах, то шрифт останется неизменным.
Пример
Шаг 1. Если нам надо указать шрифт у кнопки Done, то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.
Опять сэкономили кучу времени.
Resources
Папка Res должна содержать ресурсы графики для вашего приложения. Это 4 подпапки для каждой плотности экрана.
Для этого я использую другое расширение. Cut & Slice me — бесплатное расширение для Photoshop. Только для CS6. Оно позволяет делать всю эту работу в один клик.
Изначально наш PSD-макет должен быть для XHDPI.
Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку Android, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки для 4-х нужных плотностей экрана и помещает их в соответствующие папки.
Оставшиеся две кнопки в Cut & Slice me для нарезки из выбранном подпапки и текущего выбранного слоя.
Иногда возникает проблема «мыльных» пикселей, то есть когда иконка не попадает в пиксельную сетку при ресайзе. Поэтому надо пройтись по папкам, просмотреть качество выполненной скриптом работы. Если необходимо, поправить вручную. Опять сэкономили кучу времени.
9.PNG
И еще про графику. Все кнопки и плашки для Android нарезаются не фиксированного размера, а делаются «резиновыми».
Для этого используется формат 9.png. Делаюся такие файлы из обычных png в NinePatchEditor. По сути, к исходной картинке добавляется с каждой стороны еще один пиксель, залитый черным цветом. Черный пиксель слева отвечает за то, как будет «тянуться» ваша картинка по вертикали, сверху — за горизонталь. Пиксель справа и снизу — за размещение контетна внутри кнопки.
Всё!
Продолжение: Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone
habr.com
Дизайн для Android
Статья проплачена кошками — всемирно известными производителями котят.
Если статья вам понравилась, то можете поддержать проект.
Рубрика, посвящённая разработке дизайна под Android. Полезные приёмы, трюки, хитрости. Сделаем приложения красивыми, как коты.
Картинка взята со страницы Гугла о дизайне Design Reviews: Going beyond the surface — Articles — Google Design
Основы
Полупрозрачная панель для ImageView
UI-дизайн
Кастомизация ActionBar
Стильный ListView
Настройка Spinner
Кнопка со счётчиком
Shape Shifter
Ссылки
Color Tool — Material Design — новый инструмент от Google для подбора цветов к Material Design
Material Design, Daily – MaterialUp — значки, шаблоны, макеты в стиле Material Design. Иногда попадаются коты. Пример 1, Пример 2
Material Design Color Palette Generator — сервис для создания палитры в стиле Material: выбираем основной цвет, цвет «плавающей» кнопки и сайт генерирует необходимую палитру.
Android Asset Studio
Introduction — Material design — Google design guidelines
Памятка для дизайнеров
Интеграция дизайна мобильных приложений. Часть 1: Android / Хабрахабр
NinjaMock — free tool for mobile app wireframes and website mockups. — быстрое создание эскизов экранов приложений под Andoid, iOs, Windows Phone.
Бесплатный набор значков для разработчика. Я нашёл кота! — Free Android Icons — 1000+ icons for your App
Google выложила на Гитхабе библиотеку значков в svg-формате, можно скачать одним архивом или просмотреть онлайн. Для использования в VectorDrawable.
Реклама
developer.alexanderklimov.ru
Ошибки в дизайне Android приложений с примерами из России
Гайдлайны Android лихо нарушают известные приложения (нижний таббар у Инстаграма). Приложения гугла, менее лихо, но тоже нарушают. Я сильно удивился, когда в официальном подкасте Android Design In Action запрещают помещать настройки в Navigation Drawer, но гугловские Play Music и Play Books через полгода поместили их именно туда. Следовать рекомендациям гугла про дизайн или нет — вопрос спорный.
Моя точка зрения — стоит. Платформа обретает целостность, почти все свежие приложения следуют гайдлайнам и получается красиво. Инстаграмы будут посрамлены.
Я собрал типичные ошибки из раздела гайдов Pure Android, эпизодов официального подкаста Android Design In Action Common UX Issues и Navigation Anti Patterns и дополнил примерами из российских бизнес приложений.
Элементы интерфейса и иконки других платформ
Не стилизуйте кнопки, поля ввода и другие элементы интерфейса под iOS6, 7 или Windows Phone. Посмотрите как правильно выглядят элементы в Building Blocks и приложениях от Google.
Здорово, что все меньше и меньше российских приложений нарушают это правило. Но примеры еще остались.
Am.ru стилизует табы под iOS6, а Auto.ru кнопки.
Таббар внизу
Казалось, переносить tabbar вверх при портировании iOS приложений на Android мобильные студии научились еще полтора года назад. Но Сбербанк выпустил новую версию с tabbar внизу:
Пользователей которые используют ваше приложение и на iOS и на Android не существует. Нет причин клонировать iOS навигацию или дизайн.
Переносить таббар вверх недостаточно. В Android нет понятия таббара, есть табы. Правильные Android табы скрываются, когда пользователь переходит на внутренний экран.
Правильно сделано в Delivery Club. При тапе на бургеры табы скрываются:
Неправильно у Ozon.ru, Wildberries и Яндекс Электричек, при переходе на внутренние экраны табы остаются.
Смесь навигации и действий в Navigation Drawer
Изначально Navigation Drawer (боковая панель) предназначался только для навигации. «Настройки» и «Сообщить об ошибке» рекомендовали убирать в Action Bar. Но теперь Google передумал и размещает действия внизу Navigation Drawer, однозначно отделяя их от навигации.
У многих приложений встречается неправильная смесь навигации и действий: Ulmart, HeadHunter, Из рук в руки, Техносила. Банк Тинькова вообще превратил Navigation Drawer во что-то странное.
Это некорректно и сбивает пользователей с толку.
Некорректные иконки на страницах из Navigation Drawer
На всех экранах из Navigation Drawer должна быть иконка из трех полосок, на вложенных экранах — стрелочка назад.
Из рук в руки не имеет такой иконки вообще. Ulmart показывает стрелку назад на некоторых экранах из Navigation Drawer. HeadHunter показывает стрелку назад вместо иконки ND.
Неправильная анимация появления экранов из Navigation Drawer
Новые экраны в Андроид появляются, растягиваясь из центра экрана. А при выборе экрана из Navigation Drawer боковая панель уезжает и экран плавно появляется без растяжения.
Неправильная анимация реализована в приложениях Молотка и ТКС банка.
Модальные диалоги загрузки
Модальные диалоги загрузки ужасны, тем более большинство из них нельзя закрыть кнопкой «Назад». Правильно — индикатор загрузки прямо на экране. Идеально — загрузка данных в фоне.
Модальные диалоги загрузки используются в Объявлениях Из Рук в Руки, Am.ru, Яндекс Авто и Ситилинке.
Только портретная ориентация экрана
Большинство русских бизнес-приложений работает только в портретной ориентации. Такие приложения нельзя использовать на планшетах. И часть пользователей используют телефоны горизонтально (держалка в машине, например) им вы также доставляете неудобства.
По-моему, пункт спорный. Но это официальная позиция Google, посмотрите Play, Music или Books. Ребята из Android Design In Action утверждают, что реализовать поддержку альбомной ориентации наполовину можно за пару часов (и пару недель на остальную половину :).
Правильно сделано у Sports.ru, HeadHunter, Ситилинка, Новостей Mail.ru.
Неправильно — почти у всех остальных.
touchin.ru
20 приложений для смартфонов с красивым дизайном
В эпоху приложений для смартфонов всё больше дизайнеров начинают разрабатывать их. А чтобы добиться удобного использования и нарисовать красивый дизайн, дизайнерам и разработчикам приходится не легко. А зачем мучиться над своим приложением? А всё потому что всё больше людей пользуются мобильными устройствами, и чтобы обеспечить удобство дизайнеры ломают головы. Так же всё больше людей совершают покупки через мобилки. Согласитесь, что с приложения это сделать куда удобнее чем с открытого сайта в браузере.
Многие огромные компании хотят, чтобы пользователь был всегда на связи с ними или же с их сайтом, по этому выпускают свои приложения. Что существенно облегчает поиски компании, не нужно запоминать адрес ссылки или же пользоваться поисковиком, нужно всего лишь нажать на иконку на своём мобильном устройстве.
Так вот сегодня я хочу показать Вам несколько завораживающих примеров дизайна мобильных приложений, которые очень удобны в использовании и очень полезны. В общем вдохновляйтесь.
И конечно же выражаю благодарность www.webdesignerdepot.com
Приложение Dribbble для Android
Это приложение популярного сервиса Dribbble. Оно не только по современному красивое но и имеет логическую структуру, которая позволит пользователю с лёгкостью просматривать работы дизайнеров.
Пражский зоопарк
Великолепная идея для приложения, которое покажет все достопримечательности Пражского зоопарка. Так же это приложение сможет синхронизироваться с Вашими друзьями. И конечно же приложение имеет замечательный дизайн.
UI элементы для приложения — Natalie
Говорят, что это самая сексуальная подборка UI элементов для приложения, которые имеют плавные и округлые формы. Следовательно отсюда и идёт название — Natalie
Будильник
Будильников существует огромное множество, но дизайнеры и разработчики не останавливаются на этом. И стремятся создать самый необыкновенный будильник в плане дизайна. Это приложение то что надо, оно остаётся полезным для всех и так же имеет неповторимый дизайн.
Заметки
Мне очень понравилось это приложение, оно имеет довольно красивый и футуристический внешний вид. Особенно понравилась цветовая гамма, а так же не стандартное использование площади для заметок.
Дизайн Withjack
Согласитесь, что в наше время будет правильно использовать приложение для своего портфолио. По этому этот парень так и сделал, создал дизайн приложения для своего сайта, что в свою очередь даёт ему новых клиентов.
Panvel Ciclos
Очень полезное приложение для женщин, родом из Бразильской аптеки. Удивительная цветовая гамма. А так же удобство на высшем уровне, прекрасный пол оценит.
Coffely
Просто удивительное приложение, как они это делают? Оно позволяет на расстоянии управлять своей кофеваркой. Представьте, едете Вы домой холодной зимой где нибудь в автобусе, конечно захочется чего нибудь горячего, а тут нужно просто нажать на кнопку и к Вашему приходу уже готовый горячий кофе. Круто, не правда ли?
Приложение Whatsapp
Это очень красивый ре-дизайн популярного приложения для обмена сообщениями — Whatsapp. Дизайн действительно очень красивый, все просто отлично продумано и реализовано.
Охота на место
Очень полезное приложения для людей которые едут в незнакомые города. Оно покажет Вам где находятся самые интересные места. А обалденный дизайн делает приятным использованием данного чуда.
Плоский дизайн приложения Facebook
Например я никогда не был поклонником Facebook, но это приложение заслуживает должного внимания. Весь интерфейс продуман до малейших мелочей, как говорят «Ни сучка ни задоринки».
Bikester
Когда создаётся приложение для подсчёта статистики, оно должно визуально легко и практично выглядеть, для того, чтобы пользователю было легко с ним справиться. Bikester — всё это делает с полна, отличный и понятный интерфейс, с прекрасными иконками.
Приложение Teamride
Это чудесное приложение для лыжников и сноубордистов, которые хотят всегда быть на связи со своими собратьями. Очень красивая конструкция с встроенной статистикой и картами.
Web Fest
Это приложение служит для удобной навигации по сайту, то есть Вы просто переходите на сайт. Кажется, что не очень удобно, но это не так, просто обворожительный дизайн, который возмещает все недостатки приложений такого типа.
Осознанные сны
Когда человек спит он обычно не осознают этого. Вам бы хотелось осознать, что Вы во сне? Способности безграничны. Даже существует такое приложение с красивым дизайном, которое поможет и подготовит Вас к получению контроля над своим сном.
Ре-дизайн National Geographic
Чудесный дизайн для приложения популярного ресурса National Geographic. Оно точно предоставит Вам незабываемый тур по миру.
Список задач — Taasky
Полезное приложение списка Ваших задач, но по видимому оно на много стильнее и красивее остальных подобных приложений (никого не хочу обидеть). Интерфейс очень минималистичен и конечно же прост в использовании.
Cmplain
Это приложение которое позволяет Вам оставлять жалобы на самые разные продукты, а также делиться своими жалобами в социальных сетях мгновенно. Красивый дизайн и удобное использование только помогут Вам в этом.
Мне нужны деньги
Супер приложение с красивым дизайном и необычной типографикой, что существенно выделяет из себе подобных.
Погода
Конечно же приложений погоды множество как платных таки бесплатных. Но это совершенно новый уровень с чёткой структурой и не правильной геометрией.
Заключение
Создание и разработка приложений для мобильных устройств является очень популярным. И естественно не дизайнеры не разработчики останавливаться на этом не будут. Если сейчас уже с помощью телефона можно заранее приготовить себе кофе, не прикладывая особых усилий, а вот что будет лет через 10? Как вы думаете?
Дизайн приложения для android – 10+ Android приложений для дизайнеров (Фотошоп на Андроид и др.)
10 инструментов для дизайнера мобильных приложений.
Несмотря на огромное количество всевозможных инструментов для дизайна мобильных приложений далеко не каждое обладает всем необходимым функционалом. Кроме того, необходимо понимать, что некоторые инструменты рассчитаны для создания оформления мобильных приложений на платформе Android, а другие для iOS. Начиная создавать дизайн приложения для мобильного устройства необходимо заранее обзавестись всеми необходимыми инструментами.
Для максимально эффективной разработки оформления приложений для смартфонов и планшетов необходимо пользоваться только самым проверенным софтом. По этой причине мы подготовили список самых полезных инструментов для дизайнера мобильных приложений.
1. Генератор интерактивных прототипов Axure:
2. Mockflow для фрейминга:
3. Balsamiq для прототипирования:
4. Платформа Proto для создания прототипов:
5. Flair Builder – инструмент для создания интерфейса мобильных приложений:
6. Библиотека HotGloo:
7. Редактор Invision для внесения быстрых изменений в дизайн:
8. iPlotz для создания мокапов:
9. Инструмент Wireframe Sketcher:
10. Веб-приложение Pidoco:
На просторах всемирной сети интернет можно найти еще не один десяток полезных и эффективных инструментов для создания дизайна мобильных приложений. При их помощи практически каждый сможет создать красивое оформление для мобильных программ.
Share this:
lampalampa.net
Основы разработки дизайна под Android
С начала 2016 года я перестал заниматься дизайном под веб и полностью погрузился в мир Андройд-приложений. На это решение повлияло множество факторов, но главным, пожалуй, был стремительный рост мобильного сегмента и неизменно падающий десктоп.
Вы спросите, почему Андройд, а не какой-нибудь iOS?
В этой статье я постараюсь рассказать основы, которых должно хватить для успешного старта и дальнейшего самостоятельного изучения платформы. А начнем, пожалуй, с разновидностей экранов, коих в Андроиде великое множество.
Экраны Андройд-устройств
Каждая говнофирма выпускающая «андроиды», считает своим долгом наплодить мильйон разнообразных устройств с самыми невообразимыми параметрами экранов. Это в значительной степени усложняет разработку дизайна и добиться эффекта «везде збс» становится гораздо сложнее.
Но все не так страшно, как может показаться на первый взгляд, если уяснить несколько базовых принципов.
Во-первых, нужно запомнить, что существует 5 основных плотностей экранов: mdpi, hdpi, xhdpi, xxhdpi и xxxhdpi. Базовой плотностью считается mdpi, от неё мы и будем плясать.
Дизайн мы рисуем под mdpi, но графические элементы, присутствующие в макете, нарезаются для всех 5 плотностей.
Во-вторых, важно определиться с устройством, на котором вы будете тестировать свои каракули. Для меня это Nexus 5. Вы же можете выбрать для себя любой другой смартфон.
Отталкиваться нужно, в первую очередь, от соотношения сторон. В идеале, оно должно быть равно 16:9. Это примерно тоже, что и 1024×768 в вебе.
Например
У нас есть входные данные — соотношение сторон 16:9, плюс, возможно, рабочий девайс под рукой.
Переходим по ссылке https://design.google.com/devices/ и залипаем в таблицу. Пытаемся найти в ней своё устройство. Допустим, мы ищем ранее упомянутый Nexus 5.
Из таблицы видно, что у нексуса необходимое нам соотношение сторон 16:9. Размер экрана в DP — 360×640, а в PX — 1080×1920. Плотность экрана xxhdpi.
Если не вдаваться в подробности, 360×640 это и есть наше mdpi.
Именно под него мы и будем рисовать макеты. Выше я писал, что xxhdpi = mdpi*3. Соответственно, если мы 360×640 умножим на 3, получится как раз 1080×1920.
Что такое Dp
Dp — Density-independet pixel. 1dp = 1px при плотности экрана mdpi. В любом другом случаем 1dp=1px*Multiplier.
Например
Нам нужно нарисовать иконку для Nexus 5. По гайдам она должна быть 24×24 dp. Из таблицы выше мы знаем, что nexus 5 = xxhdpi, а xxhdpi = mdpi*3.
Соответственно, применяя изученную ранее формулу 1dp=1px*Multiplier получаем: 24dp=24px*3=72px.
Гайдлайны Андроид
После того, как мы определились с девайсом и размером будущих макетов, можно приступать к изучению гайдлайнов Андроид. Это очень ответственный шаг и вам нужно отнестись к нему максимально серьезно.
Из гайдов вы узнаете все необходимые вещи для разработки правильного дизайна, начиная от анимации и заканчивая компонентами из которых строится макет. Информации там довольно много, но без неё вам вряд ли удастся сделать качественный дизайн.
Изначально, я планировал дать ссылки на наиболее важные моменты, но там важно абсолютно всё. Поэтому не ленитесь и читайте очень внимательно, чтобы в случае чего — быстро найти необходимый раздел.
Сетка
Для построения своих макетов я не использую сетку вообще, несмотря на то, что Гугл настоятельно рекомендует использовать сетку в 8dp. Коллега, который обучает меня Андроиду — сторонник компонентного подхода, соответственно и я также перенял для себя это правило.
Есть мнение, что сетка обеспечивает правильное выравнивание элементов только в рамках графической программы. В боевых условиях — всё ползет и скачет, а это нереально бесит.
Вообще, гайдлайны для Андроида — довольно странная штука. Они ориентируются в первую очередь на дизайн, с точки зрения его визуальной части и в некоторых случаях, практически полностью игнорируют код. Это приводит к тому, что реализовать рекомендацию становится практически невозможно.
Еще один аргумент, в пользу компонентного дизайна — разаработчики. У них нет понятия модульной сетки, а вся работа с отступами строится на основе padding-ов. Компонентный дизайн также строится на основе padding-ов, соответственно найти общий язык с разработчиками становится легче.
Несколько полезных советов
В заключение
В дизайне под Андроид нет ничего сложного. Как и в любом другом деле, самое главное — набить руку. В последующих статьях мы более подробно рассмотрим компонентный дизайн и попробуем изобразить какой-нибудь вменяемый макет.
onjee.ru
Подборка приложений для Android — дизайн интерьера
Если вы планируете освежить интерьер вашего дома, делаете ремонт в квартире или собираетесь обустроить новое жилье, тогда подборка этой недели вам будет очень кстати. А возможно, вы работаете дизайнером либо просто любите помечтать о красивом доме, в таком случае, обратите внимание на пять приложений для планировки дизайна интерьера.
Home Design 3D
Простое в использовании приложение, которое поможет представить как будет выглядеть ваша кухня или комната. Всего за несколько минут вы сможете расставить всё по местам и дать себе представление о том как лучше всё обустроить. Лучше ли будет когда столешница будет стоять возле мойки или совсем в другом месте? Обеденный стол поставить по центру или у окна? Home Design 3D поможет ответить на эти вопросы. 3D-модели выглядят красиво, их цвета можно настроить. Программа имеет интуитивно понятный интерфейс, но не может похвастаться большим функционалом. Тем не менее этого достаточно чтобы понять как расставить мебель в вашей квартире или в вашем доме.
Home Design 3D
HOUZZ
Interior Design Ideas предназначено для создания дизайна помещения, но не только. Здесь собрано множество советов по дизайну и расстановке, которые помогут улучшить свои навыки и обогатить познания в этом интересном деле. В приложении также присутствует большое количество фотографий интерьера от известных дизайнеров, которые вдохновят пользователя. Кроме того, есть советы по ремонту, которые также вам очень пригодятся. Вы можете набросать интерьер комнаты в 2D из готовых фотографий предметов и получить реальную картину вашей задумки.
HOUZZ
INMYROOM
Вам нужно срочно делать ремонт, но у вас все еще нет интересных идей для воплощения в реальность Тогда приложение INMYROOM поможет вам вдохновиться идеями дизайна и создать что-то интересное, стильное и современное. Приложение просит авторизоваться через почту, vk или Facebook.
Дизайн приложения впечатляет. Здесь на вкладках расположены идеи интерьеров, магазин (где вы можете приобрести товары), фотографии, каталог профи. Также на главной странице вы найдете множество полезных статей и советов по оформлению вашей квартиры или дома в любом стиле и на любой вкус.
INMYROOM
MagicPlan
MagicPlan – приложение, которое поможет сделать вам проект помещения с помощью камеры. Программа представляет детальную инструкцию в создании плана комнаты с помощью камеры (при этом учитываются все углы, стены, окна и т.п.), также можно нарисовать план самостоятельно или загрузить его фото. Комнаты в приложении можно создавать разной формы и размера, также добавлять объекты (мебель, двери, ступеньки, предметы на улице). Чертежами и планами можно делиться с друзьями и родственниками.
MagicPlan
Planner 5D
Вы собрались переехать на новую квартиру или сделать перестановку в доме, но все еще не имеете никаких идей и представления как все расположить? Тогда Planner 5D точно для вас. Приложение поможет без проблем спроектировать до мелочей дизайн вашей квартиры и воплотить все мечты в реальность, при этом сэкономив деньги на дизайнерах и архитекторах. Здесь можно добавить комнаты как в вашем доме, отрегулировать их площадь, выбрать материалы пола, потолка, стен, добавить нужную мебель и т.п. Также можно проектировать дизайн внешнего вида, задний двор. Проекты можно просматривать как в 3D, так и в 2D режиме.
Planner 5D
androidp1.ru
Интеграция дизайна мобильных приложений. Часть 1: Android / Habr
Этот доклад я прочитал на Dribbble Meetup 2013, который прошел в Москве в День космонавтики. В нём описан мой процесс интеграции дизайна — то есть в каком виде передавать приложение от дизайнера к разработчику мобильных приложений. Выбор интсрументов, которые я использую в работе, и сам процесс сформировались опытным путём, методом проб и ошибок. Надеюсь, он поможет сохранить вам немного времени и избавит хотя бы от части рутинной работы. Так как презентация содержит достаточно большое количество слайдов, я решил разбить материал на две части. Первая часть — интеграция дизайна под платформу Android. Вторая — под iOS и Windows Phone, а также упомяну про Samsung Bada. Дальше — много картинок.
Проблематика
А начну я свой рассказ с момента, когда мы уже нарисовали макеты нашего приложения. Всё выглядит идеально, всё выверено до пикселя.
Мы отдаем макеты в разработку, а на выходе получаем ЭТО.
Почему?! Ответ очевиден. Виноваты программисты, которые криво всё запрогали… На самом деле, НЕТ! Еще до начала работы программистов, дизайнер должен передать им спецификацию дизайна (ТЗ), которую дизайнер обычно делает спустя рукава, или что еще хуже, вообще не делает. Поэтому программист и вынужден делать всё на своё усмотрение, раз нету четкой инструкции.
Специфкация дизайна (ТЗ)
Итак, под спецификацией дизайна я понимаю набор файлов, которые дизайнер передает программистам. По сути, их создание и есть процесс интеграции дизайна. У Microsoft и Google это называется blue, red, green lines. У меня это три папки: Metrics, Fonts, Res.
Составлению ТЗ надо уделить должное внимание, т.к. именно это видит конечный пользователь вашего продукта, а не макеты дизайнера.
Android
Рассмотрим интеграцию дизайна на примере 4-х основных в России мобильных платформ. И начну я с самого тяжелого для понимания… Android
Краткая теоретическая часть
Немного теории для понимания дальнейшего процесса. Ни для кого не секрет, что экраны телефонов имеют разные разрешения и разные диагонали, то есть экраны характеризуются разной плотностью. Она измеряется в точках на дюйм. Выделяют 4 основных категории плотности экрана для Android-устройств: LDPI, MDPI, HDPI, XHDPI, XXHDPI (пока не берём в расчёт). Поэтому, чтобы элементы интерфейса имели одинаковый физический размер на экранах разных устройств, компания Google ввела абстрактную единицу измерения — DP.
Не будем вдаваться в подробности откуда появляются эти цифры, а для себя запомним, что один dp равен одному физическому пикселю для экранов с плотностью MDPI. Соответственно, для XHDPI-экранов, 1 dp будет равен 2 px (такая плотность, например, у Google Nexus 4).
Практическая реализация
Теперь приступаем к практической реализации. Дальше будет описан мой процесс работы, который сформировался опытным путем. Надеюсь, он будет вам полезен.
Metrics
Итак, папка Metrics должна содержать файлы с размерами элементов, отступами между ними и от края экрана, цвета однотонных элементов — то, что делается программно (например, разделители).
Все размеры для разработчиков должны быть указаны в DP.
Я делаю макеты для XHDPI-экранов (768×1280, Nexus 4). А как мы помним, для XHDPI 1 dp = 2 px. Но так как Photoshop, естественно, не понимает dp, а работает с пикселями, то сначала я делаю так, чтобы 1 dp ровнялся 1 px. Заходим в Image, жмём Image Size, и выставляем значение 50%. Готово, теперь 1 dp = 1 px.
Можно приступить, так сказать, к «образмериванию» макета. Делать это вручную было очень утомительно, и недавно мне попалось на глаза очень полезное раcширение для Photoshop.
PNG EXPRESS — платное расширение, стоит 29 баксов. Но оно реально того стоит. Для Photoshop, начиная с версии CS5. Оно позволяет делать много полезных вещей, но я использую его, именно, для «образмеривания».
Пример
Шаг 1. Допустим, нам надо указать размер между иконкой X (удалить) и текстом Discard.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.
Хоть мы получаем не полностью автоматизированный процесс, всё же это расширение экономит кучу времени.
Fonts
Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д. Я вынес ее отдельно от размеров, чтобы программистам было легче разобраться в таком большом обилии выносок, тем самым сократив количество ошибок.
Все размеры шрифтов должны быть указаны в SP
1 SP = 1 DP, если в настройках размер шрифта операционной системы установлен по умолчанию. Если у пользователя проблема со зрением, он может в настройках системы увеличить шрифт. Если вы задали размер шрифта в SP, то ваше приложение подстроится под пользователя и также увеличит шрифт. Если в других единицах, то шрифт останется неизменным.
Пример
Шаг 1. Если нам надо указать шрифт у кнопки Done, то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.
Опять сэкономили кучу времени.
Resources
Папка Res должна содержать ресурсы графики для вашего приложения. Это 4 подпапки для каждой плотности экрана.
Для этого я использую другое расширение.
Cut & Slice me — бесплатное расширение для Photoshop. Только для CS6. Оно позволяет делать всю эту работу в один клик.
Изначально наш PSD-макет должен быть для XHDPI.
Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку Android, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки для 4-х нужных плотностей экрана и помещает их в соответствующие папки.
Оставшиеся две кнопки в Cut & Slice me для нарезки из выбранном подпапки и текущего выбранного слоя.
Иногда возникает проблема «мыльных» пикселей, то есть когда иконка не попадает в пиксельную сетку при ресайзе. Поэтому надо пройтись по папкам, просмотреть качество выполненной скриптом работы. Если необходимо, поправить вручную. Опять сэкономили кучу времени.
9.PNG
И еще про графику. Все кнопки и плашки для Android нарезаются не фиксированного размера, а делаются «резиновыми».
Для этого используется формат 9.png. Делаюся такие файлы из обычных png в NinePatchEditor. По сути, к исходной картинке добавляется с каждой стороны еще один пиксель, залитый черным цветом. Черный пиксель слева отвечает за то, как будет «тянуться» ваша картинка по вертикали, сверху — за горизонталь. Пиксель справа и снизу — за размещение контетна внутри кнопки.
Всё!
Продолжение: Интеграция дизайна мобильных приложений. Часть 2: iOS, Windows Phone
habr.com
Дизайн для Android
Статья проплачена кошками — всемирно известными производителями котят.
Если статья вам понравилась, то можете поддержать проект.
Рубрика, посвящённая разработке дизайна под Android. Полезные приёмы, трюки, хитрости. Сделаем приложения красивыми, как коты.
Картинка взята со страницы Гугла о дизайне Design Reviews: Going beyond the surface — Articles — Google Design
Основы
Полупрозрачная панель для ImageView
UI-дизайн
Кастомизация ActionBar
Стильный ListView
Настройка Spinner
Кнопка со счётчиком
Shape Shifter
Ссылки
Color Tool — Material Design — новый инструмент от Google для подбора цветов к Material Design
Material Design, Daily – MaterialUp — значки, шаблоны, макеты в стиле Material Design. Иногда попадаются коты. Пример 1, Пример 2
Material Design: на Луну и обратно/Хабрахабр
dracs89/Material-Design-Color-Palette-for-Inkscape
Material Design Color Palette Generator — сервис для создания палитры в стиле Material: выбираем основной цвет, цвет «плавающей» кнопки и сайт генерирует необходимую палитру.
Android Asset Studio
Introduction — Material design — Google design guidelines
Памятка для дизайнеров
Интеграция дизайна мобильных приложений. Часть 1: Android / Хабрахабр
NinjaMock — free tool for mobile app wireframes and website mockups. — быстрое создание эскизов экранов приложений под Andoid, iOs, Windows Phone.
Бесплатный набор значков для разработчика. Я нашёл кота! — Free Android Icons — 1000+ icons for your App
Google выложила на Гитхабе библиотеку значков в svg-формате, можно скачать одним архивом или просмотреть онлайн. Для использования в VectorDrawable.
Реклама
developer.alexanderklimov.ru
Ошибки в дизайне Android приложений с примерами из России
Гайдлайны Android лихо нарушают известные приложения (нижний таббар у Инстаграма). Приложения гугла, менее лихо, но тоже нарушают. Я сильно удивился, когда в официальном подкасте Android Design In Action запрещают помещать настройки в Navigation Drawer, но гугловские Play Music и Play Books через полгода поместили их именно туда. Следовать рекомендациям гугла про дизайн или нет — вопрос спорный.
Моя точка зрения — стоит. Платформа обретает целостность, почти все свежие приложения следуют гайдлайнам и получается красиво. Инстаграмы будут посрамлены.
Я собрал типичные ошибки из раздела гайдов Pure Android, эпизодов официального подкаста Android Design In Action Common UX Issues и Navigation Anti Patterns и дополнил примерами из российских бизнес приложений.
Элементы интерфейса и иконки других платформ
Не стилизуйте кнопки, поля ввода и другие элементы интерфейса под iOS6, 7 или Windows Phone. Посмотрите как правильно выглядят элементы в Building Blocks и приложениях от Google.
Здорово, что все меньше и меньше российских приложений нарушают это правило. Но примеры еще остались.
Am.ru стилизует табы под iOS6, а Auto.ru кнопки.
Таббар внизу
Казалось, переносить tabbar вверх при портировании iOS приложений на Android мобильные студии научились еще полтора года назад. Но Сбербанк выпустил новую версию с tabbar внизу:
Пользователей которые используют ваше приложение и на iOS и на Android не существует. Нет причин клонировать iOS навигацию или дизайн.
Переносить таббар вверх недостаточно. В Android нет понятия таббара, есть табы. Правильные Android табы скрываются, когда пользователь переходит на внутренний экран.
Правильно сделано в Delivery Club. При тапе на бургеры табы скрываются:
Неправильно у Ozon.ru, Wildberries и Яндекс Электричек, при переходе на внутренние экраны табы остаются.
Смесь навигации и действий в Navigation Drawer
Изначально Navigation Drawer (боковая панель) предназначался только для навигации. «Настройки» и «Сообщить об ошибке» рекомендовали убирать в Action Bar. Но теперь Google передумал и размещает действия внизу Navigation Drawer, однозначно отделяя их от навигации.
У многих приложений встречается неправильная смесь навигации и действий: Ulmart, HeadHunter, Из рук в руки, Техносила. Банк Тинькова вообще превратил Navigation Drawer во что-то странное.
Это некорректно и сбивает пользователей с толку.
Некорректные иконки на страницах из Navigation Drawer
На всех экранах из Navigation Drawer должна быть иконка из трех полосок, на вложенных экранах — стрелочка назад.
Из рук в руки не имеет такой иконки вообще. Ulmart показывает стрелку назад на некоторых экранах из Navigation Drawer. HeadHunter показывает стрелку назад вместо иконки ND.
Неправильная анимация появления экранов из Navigation Drawer
Новые экраны в Андроид появляются, растягиваясь из центра экрана. А при выборе экрана из Navigation Drawer боковая панель уезжает и экран плавно появляется без растяжения.
Неправильная анимация реализована в приложениях Молотка и ТКС банка.
Модальные диалоги загрузки
Модальные диалоги загрузки ужасны, тем более большинство из них нельзя закрыть кнопкой «Назад». Правильно — индикатор загрузки прямо на экране. Идеально — загрузка данных в фоне.
Модальные диалоги загрузки используются в Объявлениях Из Рук в Руки, Am.ru, Яндекс Авто и Ситилинке.
Только портретная ориентация экрана
Большинство русских бизнес-приложений работает только в портретной ориентации. Такие приложения нельзя использовать на планшетах. И часть пользователей используют телефоны горизонтально (держалка в машине, например) им вы также доставляете неудобства.
По-моему, пункт спорный. Но это официальная позиция Google, посмотрите Play, Music или Books. Ребята из Android Design In Action утверждают, что реализовать поддержку альбомной ориентации наполовину можно за пару часов (и пару недель на остальную половину :).
Правильно сделано у Sports.ru, HeadHunter, Ситилинка, Новостей Mail.ru.
Неправильно — почти у всех остальных.
touchin.ru
20 приложений для смартфонов с красивым дизайном
В эпоху приложений для смартфонов всё больше дизайнеров начинают разрабатывать их. А чтобы добиться удобного использования и нарисовать красивый дизайн, дизайнерам и разработчикам приходится не легко. А зачем мучиться над своим приложением? А всё потому что всё больше людей пользуются мобильными устройствами, и чтобы обеспечить удобство дизайнеры ломают головы. Так же всё больше людей совершают покупки через мобилки. Согласитесь, что с приложения это сделать куда удобнее чем с открытого сайта в браузере.
Многие огромные компании хотят, чтобы пользователь был всегда на связи с ними или же с их сайтом, по этому выпускают свои приложения. Что существенно облегчает поиски компании, не нужно запоминать адрес ссылки или же пользоваться поисковиком, нужно всего лишь нажать на иконку на своём мобильном устройстве.
Так вот сегодня я хочу показать Вам несколько завораживающих примеров дизайна мобильных приложений, которые очень удобны в использовании и очень полезны. В общем вдохновляйтесь.
И конечно же выражаю благодарность www.webdesignerdepot.com
Приложение Dribbble для Android
Это приложение популярного сервиса Dribbble. Оно не только по современному красивое но и имеет логическую структуру, которая позволит пользователю с лёгкостью просматривать работы дизайнеров.
Пражский зоопарк
Великолепная идея для приложения, которое покажет все достопримечательности Пражского зоопарка. Так же это приложение сможет синхронизироваться с Вашими друзьями. И конечно же приложение имеет замечательный дизайн.
UI элементы для приложения — Natalie
Говорят, что это самая сексуальная подборка UI элементов для приложения, которые имеют плавные и округлые формы. Следовательно отсюда и идёт название — Natalie
Будильник
Будильников существует огромное множество, но дизайнеры и разработчики не останавливаются на этом. И стремятся создать самый необыкновенный будильник в плане дизайна. Это приложение то что надо, оно остаётся полезным для всех и так же имеет неповторимый дизайн.
Заметки
Мне очень понравилось это приложение, оно имеет довольно красивый и футуристический внешний вид. Особенно понравилась цветовая гамма, а так же не стандартное использование площади для заметок.
Дизайн Withjack
Согласитесь, что в наше время будет правильно использовать приложение для своего портфолио. По этому этот парень так и сделал, создал дизайн приложения для своего сайта, что в свою очередь даёт ему новых клиентов.
Panvel Ciclos
Очень полезное приложение для женщин, родом из Бразильской аптеки. Удивительная цветовая гамма. А так же удобство на высшем уровне, прекрасный пол оценит.
Coffely
Просто удивительное приложение, как они это делают? Оно позволяет на расстоянии управлять своей кофеваркой. Представьте, едете Вы домой холодной зимой где нибудь в автобусе, конечно захочется чего нибудь горячего, а тут нужно просто нажать на кнопку и к Вашему приходу уже готовый горячий кофе. Круто, не правда ли?
Приложение Whatsapp
Это очень красивый ре-дизайн популярного приложения для обмена сообщениями — Whatsapp. Дизайн действительно очень красивый, все просто отлично продумано и реализовано.
Охота на место
Очень полезное приложения для людей которые едут в незнакомые города. Оно покажет Вам где находятся самые интересные места. А обалденный дизайн делает приятным использованием данного чуда.
Плоский дизайн приложения Facebook
Например я никогда не был поклонником Facebook, но это приложение заслуживает должного внимания. Весь интерфейс продуман до малейших мелочей, как говорят «Ни сучка ни задоринки».
Bikester
Когда создаётся приложение для подсчёта статистики, оно должно визуально легко и практично выглядеть, для того, чтобы пользователю было легко с ним справиться. Bikester — всё это делает с полна, отличный и понятный интерфейс, с прекрасными иконками.
Приложение Teamride
Это чудесное приложение для лыжников и сноубордистов, которые хотят всегда быть на связи со своими собратьями. Очень красивая конструкция с встроенной статистикой и картами.
Web Fest
Это приложение служит для удобной навигации по сайту, то есть Вы просто переходите на сайт. Кажется, что не очень удобно, но это не так, просто обворожительный дизайн, который возмещает все недостатки приложений такого типа.
Осознанные сны
Когда человек спит он обычно не осознают этого. Вам бы хотелось осознать, что Вы во сне? Способности безграничны. Даже существует такое приложение с красивым дизайном, которое поможет и подготовит Вас к получению контроля над своим сном.
Ре-дизайн National Geographic
Чудесный дизайн для приложения популярного ресурса National Geographic. Оно точно предоставит Вам незабываемый тур по миру.
Список задач — Taasky
Полезное приложение списка Ваших задач, но по видимому оно на много стильнее и красивее остальных подобных приложений (никого не хочу обидеть). Интерфейс очень минималистичен и конечно же прост в использовании.
Cmplain
Это приложение которое позволяет Вам оставлять жалобы на самые разные продукты, а также делиться своими жалобами в социальных сетях мгновенно. Красивый дизайн и удобное использование только помогут Вам в этом.
Мне нужны деньги
Супер приложение с красивым дизайном и необычной типографикой, что существенно выделяет из себе подобных.
Погода
Конечно же приложений погоды множество как платных таки бесплатных. Но это совершенно новый уровень с чёткой структурой и не правильной геометрией.
Заключение
Создание и разработка приложений для мобильных устройств является очень популярным. И естественно не дизайнеры не разработчики останавливаться на этом не будут. Если сейчас уже с помощью телефона можно заранее приготовить себе кофе, не прикладывая особых усилий, а вот что будет лет через 10? Как вы думаете?
beloweb.ru