Рубрика «дизайн мобильных приложений»

Кому адресована статья

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

В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.

Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Читать полностью »

Однажды в деревне мой дядя Слава спросил, чем я занимаюсь. Большой, мол, уже, 25 лет. Должен же чем-то заниматься. Я ответил, что работаю в Москве дизайнером мобильных приложений. Он кивнул и помолчал с полминуты. Потом переспросил: «Так это значит… в телефоне там все… рисуешь?» «Да», — говорю, чтобы не распространяться. Он достает из кармана кнопочную Nokia и протягивает ее мне — мол, давай, показывай, что ты из этого нарисовал. Вот эту иконку «сообщения» или ту, с телефонным справочником?

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

Как же сделать так, чтобы задачи от продакт-менеджеров принимали вид «я хочу увеличить Retention нашего раздела, давай подумаем как это сделать», без «подвинь эту кнопку вправо» и «сделай зеленый зеленее»?

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

Этот список поможет дизайнеру выстроить коммуникацию с продакт-менеджером, а продакту — лучше понять, чего ожидать от дизайнера.
Читать полностью »

Ошибка – это не UIAlertController - 1

Дизайнеры, с которыми я работаю, часто рассматривают сообщения об ошибках в iOS как что-то очевидное. А если конкретно – как UIAlertController.

Читать полностью »

image

Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

Адаптировать дизайн под другую платформу — неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы — органично вписать дизайн в паттерны взаимодействия пользователя. К тому же, проработанная адаптация упрощает разработку за счёт использования нативных компонентов платформы.

Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

  1. Базовые отличия.
  2. Отличия в навигации и паттернах (UX).
  3. Отличия в компонентах (UI).
  4. Прочие отличия.

Особенности iOS будут слева, а Android — справа или сверху/снизу.

Базовые отличия

Human Interface Guidelines vs Material Design

Почти все отличия этой статьи взяты из анализа этих гайдлайнов. Их суть на идейном уровне следующая. HIG — это про плоский, лёгкий, дружелюбный дизайн, пришёл он из постепенного отказа от скевоморфизма.

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

image

image
Читать полностью »

Персонализированный интерфейс. Часть 1. Плюсы и минусы концепции - 1

Всем привет! Хочу поделиться своим опытом одной экспериментальной разработки, за которой стоит большая, на мой взгляд, идея: персонализированный интерфейс, который конфигурируется на основе потребностей клиента. Представьте, что два человека смотрят в одну и ту же программу, имеют одинаковые права доступа, но видят разные функции на экране своего монитора.

В этой статье расскажу о подготовительной части: о трудностях и преимуществах, которые пришлось взвесить, прежде чем вписаться в этот блудняк эту историю.
Читать полностью »

image

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

Но в ИТ может сильно пострадать еще совсем не окрепшая и только о себе заявившая отрасль — сервисы для оффлайновых встреч с незнакомыми людьми. Еще до объявления COVID-19 пандемией и до введения ЧС во многих странах мы поговорили с Елизаветой Орешкиной. Она вместе с Этери Санеблидзе делает приложение The Breakfast, которое сводит незнакомцев для совместных завтраков и напоминает закрытый клуб только для своих.

Мы с Иваном Звягиным (baragol) обсудили, почему люди вдруг снова захотели общаться в оффлайне, и как в современном мире делать стартап, который не гонится за массовой аудиторией и огромными цифрами.
Читать полностью »

Правила дизайна иконок, которые стоит запомнить - 1

Изображение стоит тысячи слов. Хорошо продуманное стоит еще больше. Мы видим их на дорожных знаках, в ресторанах, аэропортах и приложениях. Они могут сэкономить время, а могут создать путаницу.

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

Термином «дизайн-система» в IT давно никого не удивишь. Компании систематизируют дизайн продуктов, придумывая свои или используя чужие инструменты для управления стилями, паттернами и компонентами. 

Badoo не является исключением: с помощью нашей дизайн-системы Cosmos мы поддерживаем общие принципы дизайна для четырёх приложений, работающих на четырёх платформах. 

image

Одна из первых и основных вещей, с которой начинается работа по созданию дизайн-системы, — это токены (или переменные), которые определяют значения разных сущностей системы. 

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

Несмотря на потенциал дизайн-токенов, во многих компаниях их структура остаётся довольно простой, что сильно ограничивает возможности их применения. 

Я хочу поделиться адаптированным переводом статьи моего коллеги Кристиано Растелли (Cristiano Rastelli), который несколько лет развивает дизайн-систему Cosmos. На примере своего опыта он показывает, как работать с токенами более эффективно: добавлять метаданные и использовать их для описания свойств компонентов. 

Под катом — небольшой рассказ о том, как выглядят дизайн-токены в Badoo и почему они значительно упрощают процесс разработки.

Читать полностью »

tl;dr У 90% современных смартфонов диагональ экрана превышает пять дюймов. Появление таких дисплеев представило принципиально новые проблемы для разработчиков приложений и дизайнеров. Давайте посмотрим, как их решить.

Как проектировать мобильные приложения для одной руки - 1

После презентации Apple в январе 2007 года весь мир сжался до размера наших ладошек. Компания объединила iPod, телефон и браузер в едином устройстве. Apple представила на массовый рынок новый для себя класс устройств, которые нам сегодня известны как «смартфоны». Эти гаджеты работали без клавиатуры (как у BlackBerry) или стилуса (как Palm).

iPhone был спроектирован для удобной работы только одной рукой, с плавными движениями большим пальцем по экрану.
Читать полностью »

Android Q — это десятая версия Android с 29-м уровнем API. Одна из главных идей новой версии это концепция edge-to-edge, когда приложения занимают весь экран, от нижней рамки до верхней. Это значит, что Status Bar и Navigation Bar должны быть прозрачными. Но, если они прозрачны, то системный UI нет — он перекрывает интерактивные компоненты приложения. Эта проблема решается с помощью insets.

Мобильные разработчики избегают insets, они вызывают у них страх. Но в Android Q обойти insets не удастся — придется их изучить и применять. На самом деле, в insets нет ничего сложного: они показывают, какие элементы экрана пересекаются с системным интерфейсом, и подсказывают, как переместить элемент, чтобы он не конфликтовал с системным UI. О том, как работают insets и чем они полезны, расскажет Константин Цховребов.

Читать полностью »


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