Как сделать дизайн телефона
20 инструментов для дизайнера мобильных приложений
Небольшая коллекция полезных инструментов для дизайнера, разрабатывающего мобильные приложения от издания Mashable:
1. Proto
Платформа доя прототипирования мобильных приложений. Создание интерактивных прототипов и симуляция основных пользовательских действий с поддержкой основных браузеров. Есть редактор, панель создания прототипа и плеер для просмотра интерактивного прототипа в работе.
Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.
2. Moqups
Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса.
Содержит шаблоны для прототипирования приложений под iPhone и iPad.
3. UXPin
Инструмент быстрого создания прототипов на основе простой разметки с нуля. Есть возможность контроля итераций, редактирования и совместного комментирования проекта несколькими дизайнерами и разработчиками в режиме реального времени.
4. Balsamiq
Один из самых популярных инструментов прототипирования мобильных интерфейсов и приложений. В комплекте — десятки и сотни иконок и элементов интерфейса. Есть шаблоны под несколько основных смартфонов и мобильных операционных систем.
5. Justinmind
Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.
6. Fluid
Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.
7. Axure
Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.
8. Mockflow
Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.
9. Protoshare
Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.
10. Wireframe
Простой инструмент для фрейминга и прототипирования с поддержкой быстрого рисования за пару кликов. Предлагает два базовых поля для разработки шаблона или прототипа: вид в окне браузера и вид на экране смартфона. Поддерживает разработку концепции дизайна для горизонтальной и вертикальной ориентации экрана мобильных устройств (смартфоны и планшеты).
11. Wireframe Sketcher
Инструмент для дизайнеров, создающий быстрые скетчи для прототипирования приложений с поддержкой работы в качестве вспомогательного решения для Eclipse IDE. Есть плагины и наборы элементов интерфейса для основных мобильных ОС.
12. Omnigraffle
Инструмент создания интерфейсов и диаграмм для приложений под iPhone.
13. Pidoco
Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.
14. Flair Builder
Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.
15. iPhone Mockup
Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.
16. HotGloo
Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.
17. Invision
Прототипирование на основе как готовых, так и создаваемых дизайнером элементов. Есть возможность экспортирования набросков в различные форматы изображений.
18. Mokk.me
Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.
19. iPlotz
Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.
20. Pencil Project
Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.
Дизайн мобильных приложений: полный гайд по UX/UI
Дизайн мобильных приложений — это по сути создание мобильной версии сайта с дополнительными возможностями. При этом главная задача разработчиков заключается в создании удобной экосистемы с совершенным UX.
Скачивая какое-либо приложение, юзер по умолчанию лоялен: он уже совершил целевое действие, и если он сможет решить свою проблему с помощью вашего сервиса — то будет пользоваться им на регулярной основе. Однако если хотя бы один раздел на пути клиента не работает или неудобен — человек просто удалит ваше приложение – и не вернется к нему никогда.
В этом заключается принципиальное отличие UX-дизайна сайтов и приложений: как правило, пользователь оценивает удобство нескольких веб-продуктов, и даже если при первом визите человек не совершил целевое действие, всегда есть вероятность, что спустя некоторое время он вернется на ваш сайт. При этом повторное скачивание приложений — это скорее исключение, чем распространенная практика.
Перед тем, как переходить к прототипу, дизайнер должен провести анализ конкурентов, целевой аудитории и задач, которые стоят перед приложением. Например, если ЦА — женщины, то кнопки и другие элементы взаимодействия можно делать меньше, если мужчины — крупнее. Большинство пользователей нажимают на экран большим пальцем, так что такая незначительная деталь поможет мужской аудитории комфортнее взаимодействовать с сервисом.
На этапе UX-разработки дизайнер должен продумать весь путь пользователя от начальных экранов знакомства — и до выполнения целевых действий, которых в приложении может быть несколько. Как правило, User Journey представляет собой ветвистое древо возможностей с разным функционалом: подпиской на приложение, обращением в службу поддержки, чтением текста, оплатой товара и так далее. И каждая “ветвь” должна быть хорошо продумана уже на этапе прототипа.
В проектировании интерфейса есть несколько важных деталей, о которых дизайнер и заказчик должны знать:
После того, как вы спроектировали интерфейс, можно переходить к визуальной составляющей и “вычищать” приложение. Основная задача на данном этапе заключается в том, чтобы привести дизайн к единому Style Guide.
На все приложение желательно использовать не более 5 – 6 типов одного шрифта (разного размера, цветов и толщины) и 4 – 5 цветов. Этого достаточно для расставления акцентов и создания аккуратного интерфейса. Также стоит продумать анимацию перехода с одного экрана на другой: исчезновение, смещение, прелоадер и др. При подборе цветов также стоит учитывать, что цветовая палитра Iphone, как правило, лучше, чем палитра Android-устройств, а значит нужно отказаться от грязных и смежных цветов.
На финальном этапе происходит разработка адаптивных версий. Если приложение будет доступно только для iOS – вам повезло, ведь на этапе создания адаптивов вам достаточно отрисовать только две версии: для Iphone 6 и Iphone X. Однако если ваша задача – это сервис для Android, то придется отобрать 4 – 5 наиболее популярных разрешений в конкретном сегменте целевой аудитории.
Важным этапом UX-дизайна является тестирование юзабилити готового интерфейса. Оно включает в себя оценку прототипа по ряду параметров:
Самым простым вариантом проведения тестовых сессий будет создание кликабельных прототипов в Figma и запись процесса пользования сервисом с получением последующей обратной связи. Однако есть и более продвинутые сервисы, которые в режиме реального времени транслируют процесс взаимодействия пользователя с приложением, например, Userlytics, TryMyUI и UserTesting.
После этого миссия дизайнера в создании мобильных приложений считается выполненной.
Материал подготовлен арт-директором веб-студии IGNI Дмитрием Мурашкиным.
Дизайн мобильных приложений — это по сути создание мобильной версии сайта с дополнительными возможностями.
Лол, правда?
Тогда это объясняет многие проблемы с дизайном у приложений.
шрифты не должны быть необоснованно маленькими
У вас как раз такие. По крайней мере меньше, чем это принято по стандартам iOS.
Кривой UX не учитывающий особенности платформы. Даже в вашем примере, этот гамбургер в правом углу противоречит привычным паттернам взаимодействия с iOS, да и вообще эргономике. Попробуйте воспользоваться этим меню держа телефон в одной руке. И такого много, от основной навигации, до анимации переходов между состояниями. Пренебрежение правилами типографики, игнорирование accessibility standards. Хотя бы это
Ну вот вам скрин приложения VC с закладкой и «поделиться» в верхнем правом углу. Это вполне удобно. И где по-вашему должно быть меню?
Вы сами можете видеть где находится меню на вашем скриншоте (внизу, где и другие часто используемые функции)
Большинство людей правши и используют большой палец для навигации на смартфонах. Не вижу преград располагать бургер в правом верхнем углу. Почему это кривой UX?)
Интересно взглянуть на ваше портфолио))
используют большой палец для навигации на смартфонах.
Вот именно. И в верхний правый угол каждый раз тянуться неудобно (особенно на современных смартфонах с большим экраном). Даже в Андройде перенесли основную навигацию в нижний таб бар.
Интересно взглянуть на ваше портфолио))
А что множество исследований и гайдлайны iOS и Android без моего портфолио уже неубедительны?
Вообще сама концепция бургера уже давно себя изжила. Т.к. вы трудитесь в данной сфере, то уверен, что исследования по этому поводу вы читали, посему пруфы искать не буду.
Правый и верхний угол моб устройства попадают в красную зону на устройствах с диагональю выше 5 дюймов (может и больше, точно не помню). Поэтому размещение в углах какого-либо функционала само по себе неоправданно с точки зрения юзабилити.
Такое предоставление информации это полный пи**ец и надругательство над здравым смыслом. Как это расшифровывать? Что означает частично заполненная пробирка фигмы и что означает чуть менее заполненная пробирка скетч? Насколько между ними разница? Как ее понять и посчитать? Как формируется эта пробирка и как считается каждая риска которой эта пробирка заполняется? Если баллами, цифрами или оценками, то может уйти от этой дебильной непонятной графики и написать оценку или баллы?
Есть человеческие понятные значения «хорошо», «плохо», «отлично» и подобные слова. Можно балльную систему, например результат 70 из 100, где будет понятно из чего сложился каждый балл и где можно его улучшить. К какому х*ю эти тупые безликие пробирки где все цветными полосочками заполняется я не понимаю.
Как эту картинку адекватно прочесть? Какие из нее выводы можно сделать? Что типа я вот на именно эту пустоту незаполненную недотягиваю до какой то оценки или что?
Есть дизайн, а есть здравый смысл. Таких дизайнеров как вы надо сначала учить работать с информаций, базами данных и выводом/предоставлением инфы. А это все дизайны месячных выпускников курсов по дизайну для беханса слепленные на коленке. Красиво нарисовано и никакого смысла. Сидят учат как UX делать и не знают про зоны безопасности в iOS. Пи**ец.
Полезные советы новичкам в дизайне под Android
Этот пост послужит своеобразным началом серии публикаций на тему «как я учусь дизайну под Android». Никогда не уделял гайдлайнам достаточно внимания, считая их скучными и неинтересными, но все изменилось. Сейчас я начинаю понимать, платформа достигла своей зрелости и предлагает ряд интересных решений.
Кнопка “назад” (The Back Button)
Долгое время back была аппаратной кнопкой Android устройств, не было смысла добавлять программный аналог в пользовательский интерфейс. Сейчас модно использовать кнопку back для навигации внутри приложений. Если говорить о кнопке “назад” пользовательского интерфейса (её называют “up button”), то между хардварной back и up есть небольшая разница. Up производит переход на один экран, в рамках приложения, в то время как back к любому приложению или контенту.
Разрешение
Параметры разрешений под Android немного путают — xhdpi (2x), hdpi (1.5x) и mdpi (1x).
Звучит крайне технически. Когда год назад я начинал работать, никто толком не мог мне объяснить какое соотношение сторон межу ними. После многих расспросов и поисков, оно составило 720×1280, 540×960 и 360×640. Проектируя дизайн макет, не забывайте учитывать хардварные кнопки и статус бар.
От переводчика: На самом деле то, что описано в этом абзаце, не совсем верно. По ссылке и в таблице вы найдете более точное описание.
Начальный набор (Starter Kit)
Джереми Салли, дизайнер из Telly, графически наглядно показал соотношение этих трех разрешений. Вам пригодится Android Action Bar Style Generator для работы с темами по умолчанию. Он позволит задать базовые параметры цвета, стиля и сохранить настройки в Zip файл для всех всех трех разрешений. Лучший способ наглядно поэкспериментировать.
9-slice Scaling
The Action Bar
В отличие от iPhone, где название обычно находится в середине заголовка, на Android название в левом верхнем углу, рядом с логотипом приложения. Нажатие на логотип обычно вызывает боковое меню или возвращает вас “назад”, к предыдущему экрану.
Под названием приложения порой можно заметить треугольную стрелочку, благодаря ей возможна навигации внутри приложения. Прямо как в сети интернет, очень частый способ отображения выпадающего меню на Android.
Наконец, если вы серьезно относитесь к гайдлайнам, все элементы управления должны быть в правом верхнем углу. Это относится и к функции обновить (потянуть, чтоб обновить как на iPhone, очень редко используются в Android), поиск, и печально известные кнопки “действия” которые в идеале дожны быть в виде трех точек. Точки используются для тех действий, которые не смог вместить Action Bar.
Шрифты
Шрифты, к сожалению, зависят от специфики устройства, так что будьте готовы к казусам. Не расстраивайтесь если вам придется протестировать дизайн на старом устройстве. Были и куда худшие дни — вспомните IE6. Самый популярный шрифт на данный момент Droid Sans. Впрочем Roboto набирает популярность, так как присутствует на новых устройствах.
Размеры
Начиная с Android 2.x, минимальный размер элемента должен быть: 28px для текста, 96px для меню и заголовка, 116px для нижнего колонтитула. Это немногим больше чем в iOS (24px, 88px и 100px). Если говорить о соотношении 116% Android к iOS.
Просматривайте проектируемый дизайн на Android устройстве
Роман Нурик из Google разработал очень полезный инструмент Android Design Preview. Инструмент поможет дизайнеру посмотреть, как нарисованный в графическом редакторе на компьютере макет приложения будет выглядеть на реальном устройстве.
Программу Android Design Preview можно установить на Windows, Mac OS X или практически любую из операционных систем семейства *nix. Приложение написано на Java и представляет собой обычный JAR-файл. Работает Android Design Preview следующим образом: разработчик подключает смартфон к компьютеру по USB (На ПК должны быть установлены ADT), запускает Design Preview, нажимает «Select Mirror Region» в этой программе и видит перед собой рамку. Эту рамку он устанавливает на макет и видит его на экране смартфона.
Ой, у вас баннер убежал!
Читают сейчас
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Google Developer Days приходит в Европу
Бесплатная онлайн школа Android-разработчиков
Реализация системы скинов в Android-приложении или смена цветовой гаммы в один клик
Курсы
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 47
Никогда не уделял гайдлайнам достаточно внимания, считая их скучными и неинтересными
Получается сделал башню в 720×1280 и пересохранил её в 540×960, 360×640?
И ещё с анимацией тоже самое? это же… вообще куча графики будет.
Сделать в относительных координатах и центрировать, а потом уже в зависимости от экрана края заполнять фоновыми элементами. Вместо 3 пикч будет одна. Не вариант?
The Android system helps your application achieve density independence in two ways:
The system scales dp units as appropriate for the current screen density
The system scales drawable resources to the appropriate size, based on the current screen density, if necessary
…
However, bitmap scaling can result in blurry or pixelated bitmaps, which you might notice in the above screenshots. To avoid these artifacts, you should provide alternative bitmap resources for different densities. For example, you should provide higher-resolution bitmaps for high-density screens and the system will use those instead of resizing the bitmap designed for medium-density screens. The following section describes more about how to supply alternative resources for different screen configurations.
To generate these images, you should start with your raw resource in vector format and generate the images for each density using the following size scale:
xhdpi: 2.0
hdpi: 1.5
mdpi: 1.0 (baseline)
ldpi: 0.75
— Дизайнер рисует макеты
— Макеты утверждаются и отдаются разработчикам
— Дизайнер изучает полностью гайдлайны developer.android.com/design/index.html
— Берет Fireworks, качает набор стенсилов и на основе макетов делает дизайн для телефонов и планшетов, с страницами и состояниями
— Готовый fw.png файл отдается разработчикам и они берут оттуда нужные графические элементы, меняя по мере надобности размеры, сохраняя для mdip-xhdpi, делая 9-патчи где нужно.
— Готово
Как есть на самом деле:
— Заказчик отдает ТЗ (если повезет) разработчикам и дизайнеру. Они начинают параллельно работать.
— Дизайнер открывает редактор фотографий от Adobe, находит в интернете рамочку и ложит в файл размером «как там делали для айфона»
— Вдохновляясь TouchWiz дизайнер вставляет кучу разноцветных кнопочек, и так чтобы влезало четко по размеру экрана. И ставит красивую картинку на фон.
— Готовый набор psd-файлов с кучей слоев и групп отдается разработчикам.
— Разработчки забивают на попытки сделать правильно и просто нарезают слайсами то что есть в папу drawable-hdpi, ибо на маленьких экранах все равно все не помещается, а для планшетов дизайна и не присылали…
— Заказчик доволен, дизайнер доволен, аналитики жалуются на плохое качество приложений.
Если уж писать как должно быть, то вот тут вот не правильно:
… отдается разработчикам и они… сохраняя для mdip-xhdpi,…
Это тоже должен делать дизайнер, для того то бы картинка для каждого разрешения выглядела правильно. Не была размытой при масштабировании вверх, когда нарисована например для mdpi, или же вниз, когда картинка нарисована для xhdpi.
> Да, но большинство графики при нормальном дизайне сверстается в xml-e
это хорошо если ваш дизайнер любит метро стиль :), а если нет?
> что не поддастся — в найн-патчах
оставлять блюренный или не правильно от масшабированный найн патч это тоже самое.
> Их быстрее сделать самому
с такими то дизайнерами, только это и остается делать. Порой сам перерисовываю для 3х разрешений в inkscape, если что то не сильно сложное, что бы хотя бы линии все были четкие.
28px для текста, 96px для меню и заголовка
М-да… Размер шрифта в пикселях. Сразу видно — статью писал профессионал в дизайне приложений для Андроида.
Статья больше похожа на вредные советы. Многие вещи расписаны неправильно или не расписаны полностью.
1. Не нужно как-то ориентироваться на размер экрана, и полностью привязываться к нему. Андроид устройств очень много, все они разные. В первую очередь нужно отталкиваться от плотности экрана, и дизайн делать с расчетом на резину. Например, mdpi устройства могут быть как и 320 пикселей в ширину, как и 360, да и вообще какими угодно. В конце концов, устройство можно поворачивать.
2. Action Bar — крайне важная вещь, и если вы действительно хотите сделать качественное приложение, то нужно на берегу разобраться как он работает. Там гораздо больше сложностей, чем просто «то, что не влезло, прячем за тремя точечками». Опять же action bar выглядит по разному на телефонах и планшетах, он может объединяться с navigation bar при повороте. На устройствах с аппаратной кнопкой «Меню» эти три точки вообще не должны показываться.
3. Дизайн инстаграма, фейсбука и твиттера для андроида можно с уверенностью не упоминать в подобных текстах. Они сделаны с крайне оттдаленными представлениями об экосистеме современного андроида.
4. PSD файлы со всеми элементами выкладывает (в отличие от эппл) сам гугл, прямо на своем сайте. Качай не хочу: developer.android.com/downloads/design/Android_Design_Holo_Widgets_20120814.zip
5. Минимальный рекомендуемый размер тапабельного элемента в андроиде — 48dp (то есть, 48 пикселей при плотности mdpi)
6. «Никогда не уделял гайдлайнам достаточно внимания». Чувак, до версии 4.0 гайдлайнов для андроида просто не существовало ;). И это объясняет, почему в гугл плее так много крайне некачественных приложений.