Экраны и макеты

Заголовки и меню плавают в контейнерах из размытого стекла Выделить Заголовки и меню плавают в округлых контейнерах из стекла, что… стекло-заголовок

Заголовки и меню плавают в закруглённых стеклянных контейнерах, которые исчезают при прокрутке. Используется эффект туманного стекла (фоунд блюр + полупрозрачная поверхность) Постепенно исчезает, когда вы прокручиваете страницу вниз.

  • стекло-заголовок
  • навигация
  • контейнеры
  • дизайн
Модальное окно с результатами после импорта После импорта контактов, анимированное модальное окно показывает ваш… импорт

Заменяет три одновременно после импорта поверхности (toast, auto-launching tour, popping avatars) на одну спокойную модальную. Задержка в 3 секунды позволяет аватарам стабилизироваться перед появлением модальной. Тур начинается только в случае, если пользователь явно даёт согласие.

  • импорт
  • онбординг
  • модальное окно
  • статистика
  • обзор
  • язык
Главная строка заголовка на градиенте с переключателем скрытия арт-работы Главное заголовок занимает Saropa градиент с a… герой

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

  • герой
  • градиент
  • свернуть
  • переключить
  • предпочтение
Сетки адаптируют количество колонок к большим размерам текста Сеточные макеты уменьшают количество колонок при системном тексте … доступность

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

  • доступность
  • масштаб текста
  • столбцы
  • отзывчивый
  • сетка
Главное изображение в вставленной карточке, которая сжимается при прокрутке Экранное изображение находится в закругленной вставленной карточке, которая сжимается … герой

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

  • герой
  • прокрутка
  • свернуть
  • анимация
  • карта
  • тактический
Мгновенное изображение экрана без артефактов Героическое изображение и изображения экрана загружаются из кэша при повторном открытии… производительность

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

  • производительность
  • изображение-кэш
  • герой
  • загрузка
Поддержка размещения слева направо на экранах с геройским дизайном Героические заголовки используют направление размещения, чтобы экраны лежали… ртл

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

  • ртл
  • макет
  • доступность
  • герой
  • международизация
Раскрывающиеся заголовки разделов на шести экранах Нажмите на заголовки букв, чтобы скрыть/показать группы на Organizations,… рабочий процесс

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

  • рабочий процесс
  • взаимодействие
Уровни длины повествования с визуальной отличительностью Три цветных иконки (краткое/стандартное/полное) с стилем… нarrative

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

  • нarrative
  • UX
Памятная повествовательная запись с заголовком и перерывами Памятные повествования включают заголовок ("В память о…") и… нarrative

Сгенерированный текст памяти открывается с официальным заголовком и разбивается на отдельные абзацы при смене темы (карьера, семья, наследие), вместо того чтобы представляться как один плотный блок.

  • нarrative
  • памятный
Легкий доступ к добавлению деталей контактной истории Профили контактов показывают полезную ссылку для добавления дополнительной истории… пользовательский интерфейс

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

  • пользовательский интерфейс
  • нarrative
  • призыв к действию
Знак памяти теперь постоянный на контактах у умерших Знак смерти отображается круглый год на памятных контактах, а не только… контакты

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

  • контакты
  • аватар
  • памятный
  • умерший
Карта загружается быстрее Мап тайлы загружаются с гладким градиентным фоном, делая карты… карты

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

  • карты
  • загрузка
  • UX
QR Коды Встроить Saropa Марк QR коды отображают Saropa логотип в синем цвете в центре с… брендинг

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

  • брендинг
  • qr-коды
  • обмен
Разделы помощи сворачиваются и запоминают состояние Разделы помощи являются сворачиваемыми, цветокодированными и запоминают… навигация

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

  • навигация
  • помощь
  • персонализация
  • сворачиваемый
Экранные меню приветствия ведут новых и обновляющих пользователей Анимированные экраны приветствия с плавными переходами ведут… навигация

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

  • навигация
  • онбординг
  • анимации
  • стартап
  • обновить
Первый запуск приветственного анимированного брендинга-названия Буквы падают по каждому символу с радужным вспышкой при запуске. анимация

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

  • анимация
  • онбординг
  • визуальный
Однократное обновление приветственного модального окна Исар-эра улучшители видят reassurance intro на первом… онбординг

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

  • онбординг
  • обновить
  • UX
Опция ландшафта на телефонах Телефоны могут вращаться в ландшафтный вид (по умолчанию выключено) при… макет

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

  • макет
  • поворот
  • доступность
О экране о компании: Saropa миссия и история названия. Два новых раздела на экране о компании — Наша миссия (основы… бренд

Раздел «Наша миссия» описывает четыре столпа, которые движут разработкой приложения, в то время как история названия связывает идентичность приложения с сикхской традицией, из которой происходит термин Saropa.

  • бренд
  • доверие
  • прозрачность
Упрощённое управление телефоном и электронной почтой на планшетах На планшетах в горизонтальном положении строки телефонов и электронной почты располагаются в 2… планшет

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

  • планшет
  • организация
Вкладка «Главная» адаптируется с съёмными разделами Организуйте с помощью съёмных разделов; планшеты отображают шире. вкладка-главная

Состояние свернутого состояния запоминается по каждому разделу, поэтому раздел, закрытый на телефоне, остается закрытым после перехода к планшету или поворота устройства.

  • вкладка-главная
  • навигация
  • сворачиваемый
  • разделы
  • планшет
  • отзывчивый
Заголовки планшетов размещают идентичность и действия вместе Идентичность оставлена слева с кнопками действий справа. планшет

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

  • планшет
  • герой
  • заголовок
  • макет
Каждый раздел Главной может свернуть Нажмите на любой заголовок раздела, чтобы скрыть или показать его. Чрезвычайная,… организация

Состояние сворачивания сохраняется по каждому разделу, а не сбрасывается при повторном запуске приложения, поэтому вкладка «Домашняя» настроена один раз и остается настроенной так, как она была оставлена.

  • организация
  • удобство использования
Заголовок "Контакты" перегруппирован на горизонтальном режиме планшета На горизонтальном режиме планшета, фото и имя вашего контакта появляются… планшет

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

  • планшет
  • отзывчивый
Чистее разметка деталей контакта Разделы контактов проще навигировать с упрощённым… переходы между экранами

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

  • переходы между экранами
  • детали-дисплей
  • упрощение
Сворачиваемые разделы контактов с состоянием Разделы контактов сворачиваются и запоминают состояние между… детали-контакта

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

  • детали-контакта
  • организация
  • сохраняемость

Ваша адресная книга — это лifeline. Считайте ее таковым.

Получите все функции Screens & Layouts выше — бесплатно для личного использования, приватный по дизайну и готовый сразу после установки.