• Реализуем UI в iOS: улучшаем, ускоряем, масштабируем

    • Перевод


    Привет! Меня зовут Азат Зулькарняев, я занимаюсь разработкой iOS-приложений в компании Badoo. При создании мобильных приложений большая часть времени уходит на разработку UI, и оптимизация этого процесса всегда является актуальной темой в среде разработчиков. Мой коллега Алексис Сантос написал статью о том, с какими проблемами мы столкнулись и как двигались в сторону их разрешения при работе над этой задачей. Я решил поделиться с вами переводом. Также рекомендую посмотреть запись недавнего доклада Игоря Савельева на Mobius 2018.

    Несколько месяцев назад я наткнулся на очень интересный документальный сериал от Netflix — «Абстракция: Искусство дизайна». В нём подробно рассматривается работа дизайнеров из разных сфер: архитектура, графический дизайн, мода и т. д. Нетрудно заметить определённое сходство их работы с деятельностью iOS-разработчиков, занимающихся реализацией пользовательских интерфейсов. В частности, ведя работу над крупным проектом, дизайнеры стараются разбить её на множество мелких задач по принципу «разделяй и властвуй» и получают возможность собрать все элементы воедино на более позднем этапе.
    Читать дальше →
  • Особенности подходов к дизайну в реальном производственном секторе

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

      • определить задачу клиента;
      • сформировать свои гипотезы;
      • продумать метрики;
      • определить контекст использования, CJM, прочее;
      • продумать решение и его валидацию.

      Для людей, привычных к дизайну продуктов, которыми пользуются миллионы пользователей по всему миру, этот фреймворк знаком (в том или ином виде).


      Когда продакты думают, что точно знают, чего хочет пользователь

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

      Меня зовут Лев, я ведущий дизайнер функции «Цифровые технологии» в СИБУРе, и я расскажу вам о том, как работается дизайнерам приложений и интерфейсов в условиях, когда часть твоих пользователей — это коллектив обходчиков на производственной площадке в Тобольске, которые используют твое приложение немного не в тех условиях, в которых ты это приложение сделал.
      Читать дальше →
    • Создаём голосовое приложение на примере Google Assistant

        Каждый пятый житель США владеет умной колонкой, а это 47 000 000 человек. Помощник может создать напоминание, список дел, будильник, таймер, прочитать новости, включить музыку, подкаст, заказать доставку, купить билеты в кино и вызвать такси. Все это «навыки» или «skills» помощников. Еще их называют голосовыми приложениями. Для Alexa и Google Assistant таких приложений на 2018 год разработано 70 000.

        В 2017 году Starbucks запустил функцию по заказу кофе домой для Amazon Alexa. Кроме того, что выросли заказы на доставку, об этом написали все возможные СМИ, создав классный PR. Примеру Starbucks последовали Uber, Domino’s, MacDonald’s, и даже у стирального порошка Tide появился свой skill для Alexa.

        Как у Starbucks, голосовое приложение выполняет одну-две функции: заказывает кофе, ставит будильник или вызывает курьера. Чтобы спроектировать нечто подобное, не обязательно быть межконтинентальной корпорацией. Идея, проектирование, тестирование, разработка и релиз похожи на аналогичные этапы в мире мобильной разработки, но с особенностями для голоса. Подробно о процессе рассказал Павел Гвай: от идеи до публикации, с примерами реальной игры, с историческими вставками и разбором мира голосовой разработки.


        Читать дальше →
        • +27
        • 2,8k
        • 1
      • Анимации в iOS-приложениях, рождённые на сервере



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

          iOS-инженеры наверняка догадались, о каких объёмах работы идёт речь: чтобы удалять старые и добавлять новые анимации, необходимо совершить множество действий с клиентской стороны. Для этого в каждом релизе должны быть задействованы Android- и iOS-команды, а вкупе со временем, необходимым на одобрение обновления в App Store, это означает, что запуск каждого релиза с обновлёнными анимациями может занять несколько дней. Однако нам удалось решить эту проблему, и сейчас я расскажу как.

          Архитектура решения


          К тому времени мы уже умели экспортировать анимации Adobe After Effects (далее — AAE) в понятный нашему iOS-приложению формат при помощи библиотеки Lottie. В этот раз мы пошли чуть дальше: решили хранить все актуальные анимации на сервере и скачивать их по мере необходимости.
          Читать дальше →
          • +40
          • 4,4k
          • 2
        • Дайджест продуктового дизайна, январь 2019

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

            Читать дальше →
            • +38
            • 3,7k
            • 1
          • Адаптивные шаблоны Figma: как сделать гибкий дизайн-компонент мобильной навигации iOS



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

              При создании набора компонентных iOS-шаблонов для Figma я решил поэкспериментировать с компонентом Tab Bar. Напомню, что в гайдлайнах iOS это нижняя навигация. Мне хотелось, чтобы его содержимое имело логичное и оптимальное поведение при ресайзе. Хотелось сделать его максимально адаптивным для всех iOS-устройств, насколько это позволяет сделать Figma и направляющие (constraints).
              Читать дальше →
            • Как дизайнер я отказываюсь называть людей «пользователями»

              • Перевод


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


              Я — UX-дизайнер, и уже более пяти лет занимаюсь организацией взаимодействия с пользователем. И начиная с этого момента, я собираюсь выбросить из своего лексикона слово «пользователь» и связанные с ним термины: «UX», «пользовательский опыт» и т. д. Это произойдет не сразу. Сначала я постараюсь не использовать эти слова в разговорах на работе. Я удалю их из своего профиля в сети LinkedIn. Я научусь во время светской болтовни описывать свою работу другими словами. Я буду экспериментировать и искать другие, более точные термины.

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

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

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

              Переведено в Alconost
              Читать дальше →
              • –11
              • 2,6k
              • 9
            • Как мы сделали мобильное приложение, которому не нужен дизайнер

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

                Дизайнер не должен быть носителем требований к приложению, бизнес должен диктовать то, каким оно будет. Кто бы ни работал над дизайном ePayments, и сайт, и приложение будут красивыми и удобными, а стиль не будет резко меняться на 180°. Этот принцип работает на пользу фронтэнду и мобильным разработчикам.

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


                Читать дальше →
              • Translucent на андроид и adjustResize

                • Tutorial


                Возможность использовать translucent в андроид появилась ещё в KITKAT. И выглядит в правильном дизайне это довольно эффектно. А с появлением моды на девайсы с "Чёлками", кажется, просто необходимой вещью в любом тёплом ламповом стартапчике.


                Давайте представим ситуацию: вы запилили офигительно красивый, скроллящийся под StatusBar и NavigationBar дизайн. И вот вы добавляете поле ввода и понимаете, что adjustResize у вас не работает.


                Вы можете:


                1. Забить, – пользователь сам закроет клавиатуру, чтобы посмотреть что под ней.
                2. Отказаться от translucent, стиль – это не ваше, всё будет олдово, надёжно, как у всех.
                3. Как только пользователь начинает скроллить, скрывать клавиатуру. Вы молодец! Всё правильно сделали, skype даже под ios так делает! А там и прозрачности-то нет.
                4. Вынести все поля ввода на отдельные экраны. Как бонус — каждый лишний переход на экран, минус удобство и конверсия.
                5. Запилить свой adjustResize.
                Запилить свой adjustResize
              • Тренды в дизайне UI и UX 2019

                • Перевод

                Иллюстрация от J.HUA

                Год назад мы составили прогноз трендов в дизайне мобильных UI. В этом году мы решили выйти за рамки мобильных интерфейсов, потому что тренд №1 в современном дизайне — это контекст. Больше никаких обобщений — теперь всё завязано на контексте.
                Кажется, мы добились определённого прогресса с развитием технологий и ростом понимания того, как должны работать продукты, предлагаемые пользователю.
                Рано или поздно мы разработаем философию универсального дизайна, которая будет применяться при создании всего, что мы производим, и не только того, что мы продаём. Всё вокруг требует хороших дизайнерских решений, даже образы наших стран. Но не будем о будущем; давайте рассмотрим основные тренды в дизайне интерфейсов 2019.
                Читать дальше →

              Самое читаемое