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

Как оседлать радугу: история создания тёмной темы - 1

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

Меня зовут Михаил Лихачёв, я ведущий дизайнер VK. Расскажу, как небольшой командой адаптировали 300 экранов и систематизировали все существующие в мобильных приложениях цвета — для этого мы синхронизировали их между платформами и вынесли работу с ними в единую дизайн-систему с токенами. Поделюсь впечатлениями о том, как нам теперь с этим живётся и усложнился ли процесс дизайна.

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

Попробуем, пользуясь официальным руководством и примерами кода, построить работающую систему навигации для будущего многоэкранного приложения в соответствии со стандартами Navigation Architecture Component. Статья включает следующие разделы:

Часть 1. Подготовительные работы
— 1.1. Создание проекта
— 1.2. Зависимости (Dependencies)
— 1.3. Страницы: создание фрагментов
— 1.4. Адреса: файл ресурсов типа «Navigation»
— 1.5. Фрейм: виджет NavHostFragment

Часть 2. Элементы навигации
— 2.1. Навигация с помощью кнопок
— 2.2. Боковое меню (Drawer)
— 2.3. Панель инструментов: Toolbar вместо ActionBar
— 2.4. Нижнее меню (Bottom Navigation)
— 2.5. Всплывающее меню (Overflow Menu)

Краткие выводы и ссылка на github

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

У вас собственный бизнес — пиццерия. Пиццу все любят, она легко и быстро готовится, спрос высокий, это золотой стандарт американской кухни. Но вместе с тем, у вас куча конкурентов, продвигать продукцию сложнее, чем вы думали, аренда все дороже, дизайны приложений унылые, каждую неделю выручка достигает нового нижнего рекорда, становится сложнее выделяться на фоне других — короче, все обычные проблемы. Тогда вы говорите себе: «Надо что-то такое выдумать, чего еще никто не делал. Что-то свежее, прогрессивное». Устраиваете мозговой штурм и вам в голову приходит великолепная мысль в духе: «Отображается описание пиццы, и вот тогда нужно провести вправо, если тебе нравится, и влево, если нет. Типа как Тиндер, только с пиццей!».

Патенты в дизайне: часть первая (общие положения, примеры от Apple, Facebook) - 1

Как бы не так. Ничего подобного вы сделать не можете, потому что у Tinder патент на жесты «провести вправо, чтобы поставить лайк» и «провести влево, чтобы поставить дизлайк». «Ну, ладно», — думаете вы. «Это ведь визитная карточка всего их приложения, тогда пусть никто никуда не проводит, а просто сделаем MVP, где под пиццей будут кнопки для лайков и дизлайков». Увы, дружок: Tinder запатентовал и это.
Читать полностью »

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-февраль 2019.

Дайджест продуктового дизайна, март 2019
Читать полностью »

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

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

Но, как часто бывает, рисовали на бумаге и забыли про овраги. Не у всех и не всегда есть возможность, время, деньги … продолжаем перечислять другие причины, по которым проводить исследования как надо не получается. Не получается, а все равно надо. Хорошо, не надо, но крайне желательно знать свою аудиторию по ту сторону экрана.

И что делать? Развести руками, забыть и забить? Вариант так себе, если честно.
В моей копилке оказалось два показательных проекта, которые я делала с нуля, проводила исследования и тестирования из серии: делаем как получится и выкручиваемся как можем.

Сделала вывод, что лучше так, чем совсем никак. Хочу поделиться опытом неправильных исследований из которых выжимала все соки, получая частичный, но все таки, результат.
Читать полностью »

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-январь 2019.

Дайджест продуктового дизайна, февраль 2019

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

Привет!

6 февраля прошла наша большая QIWI Кухня, посвященная дизайну продуктов.

QIWI Кухня 6 февраля — как это было + доклады спикеров - 1

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

Раскладные смартфоны: а что насчёт приложений? - 1

Всю неделю шли анонсы складных смартфонов: Samsung и Huawei уже жаждут лишить нас крупной суммы, у Oppo и Xiaomi пока что прототипы.

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

Возникнут ли сложности у существующих Android-приложений на «раскладушках»? К чему готовиться тем пользователям, которые решатся купить дорогущее устройство? А что нужно сделать разработчику, чтобы эти пользователи остались довольными? Как протестировать своё приложение, если под рукой нет устройства за $2000?

Под катом мы описали это и с «пользовательской» стороны, и с «разработческой». Могли что-то упустить — так что, если Android-разработчики в комментариях дополнят, будем рады.
Читать полностью »

Sketch + Node.js: генерируем иконки для множества платформ и брендов - 1

Нет ничего проще, чем добавить иконку в проект: нужно всего лишь написать дизайнеру, он экспортирует её из Sketch и пришлет вам нужный вариант, а вы используете ее у себя в коде. Если же у вас с десяток проектов, несколько платформ и множество А/Б-тестов на дизайн, то достаточно делать всё то же самое, только в 40 раз чаще и нигде не ошибаться… либо постараться автоматизировать процесс. Под катом — первая часть перевода статьи моего коллеги Cristiano Rastelli про один из примеров такой автоматизации.

Проблема, которую мы решали

Мы в Badoo разрабатываем приложение для знакомств. Вообще-то это несколько приложений, каждое из которых функционирует на нескольких платформах (iOS, Android, Mobile Web, Desktop Web), и работу над ними ведут несколько команд.

При разработке мы используем сотни различных иконок. Некоторые одинаковы в каждом приложении, другие — соответствуют тому или иному бренду. Иногда дизайн меняется, а вместе с ним меняются и иконки: появляются новые, какие-то обновляются, какие-то — удаляются (но часто остаются при этом в кодовой базе).
Читать полностью »

image

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

Примечание: это далеко не единственный способ выбора хороших цветов, скорее, набор эвристик, которые я освоил самостоятельно. Надеюсь, что это поможет вам подбирать правильные цвета для вашего веб-сайта/приложения/игры.
Читать полностью »


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