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

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 и чем они полезны, расскажет Константин Цховребов.

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

Встречают, как водится, по одежке. И к твоему луку довольно много требований, особенно если ты — самое заметное HR-tech явление страны. Будучи сложным и нетривиальном сервисом, hh.ru бросает дизайнерам множество интересных вызовов, раздает массу уникальных и действительно сложных продуктовых задач и требует кропотливой работы с такими интерфейсами и данными, которые мало где встретишь.

Рассказываем, кто такие дизайнеры hh.ru и чем живут, что для нас важно, где мы страдаем и как празднуем победы. О том, как мы идем тернистым путем к вершинам выстраивания качественного, простого для понимания и удобного в использовании интерфейса сервиса.

Дизайн, продукт и рок-н-ролл - 1

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

Каждый раз, когда в языке программирования появляется новый Фреймворк, рано или поздно, появляются люди, которые изучают язык именно с него. Вероятно так было и в IOS разработке во времена появления Swift: поначалу он рассматривался как дополнение к Objective-C — но я этого уже не застал. Сейчас, если начинаешь с нуля, выбор языка уже не стоит. Swift вне конкуренции.

То же самое, но в меньшем масштабе, происходит и с фреймворками. Появление SwiftUI — не исключение. Вероятно, я — представитель первого поколения разработчиков, кто стартовал с изучения SwiftUI, проигнорировав UIKit. У этого есть своя цена — обучающих материалов и примеров работающего кода пока очень мало. Да, в сети уже есть некоторое количество статей, рассказывающих о той или иной особенности, том или ином инструменте. На том же www.hackingwithswift.com уже довольно много примеров кода с объяснениями. Однако, они слабо помогают тем, кто решил изучать SwiftUI с нуля, как я. Большинство материалов в сети — это ответы на конкретные, сформулированные вопросы. Опытный разработчик легко разберется, как все устроено, почему именно так, и зачем это нужно применять. Новичку же, сначала, нужно понять, какой вопрос задать, и только тогда он сможет добраться до этих статей.

SwiftUI по полочкам - 1

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

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

20 библиотек для эффектного iOS-приложения - 1

Из огромного количества iOS-библиотек нет особого смысла составлять какие-то рейтинги. Поэтому просто представляем двадцатку эффектных/полезных инструментов для тех, кто пишет приложения под гаджеты Apple.

Все анимации являются ссылками на свои полноразмерные версии.Читать полностью »


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