Рубрика «UI»

Представляем вашему вниманию перевод статьи Scott Domes, которая была опубликована на blog.bitsrc.io. Узнайте под катом, почему компоненты должны быть как можно меньше и как принцип единственной ответственности влияет на качество приложений.

Крошечные компоненты: что может пойти не так? Используем принцип единственной ответственности - 1
Фото Austin Kirk с Unsplash
Читать полностью »

Новогодние праздники прошли, а мое стремление писать полезные и не очень статьи — нет! Сегодня поговорим о UITableView, работе с UITableViewDataSource и переиспользовании ячеек. Затронем как установить рут контроллер без сториборда, ошибки при работе с таблицей, лейаут и большой заголовок для UINavigationBar.

Для тех, кому нравятся несмешные шутки, я записал ролик на YouTube. Ну а здесь всё будет серьезно. Давайте начнём.
Читать полностью »

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

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

У мобильных приложений Ivideon количество установок превышает миллион, а рейтинг годами остается стабильно высоким. Однако всё начиналось не так хорошо: нельзя добиться успеха с одной только скоростью работы или изменениями UX/UI. Мы ввели дополнительный критерий эффективности — о нем также расскажем.

Как устроена система видеонаблюдения Ivideon: обзор мобильного приложения - 1Читать полностью »

Привет! Представляю вашему вниманию перевод поста Дэна Абрамова «The Elements of UI Engineering» о современных проблемах и задачах, которые должны быть решены в хорошем интерфейсе. Автор разбирает фундаментальные проблемы при разработке интерфейсов, осмысление и решение которых самостоятельно — без использования готовых библиотек и фреймворков — способно дать глубинное понимание существующих на рынке решений в области frontend-разработки.

Основные проблемы разработки современных интерфейсов - 1

Примечание переводчика

Текст написан и переведен от первого лица. Автор оригинала на английском — Дэн Абрамов, разработчик библиотеки React для построения сложных пользовательских интерфейсов.

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

Я убежден, что вы можете начать свое познание «с места в карьер» и нет необходимости изучать технологии (технологический стек для веб-разработки — прим. переводчика) в определенном порядке. Но я так же считаю, что имеет огромное значение накопление опыта и профессиональных навыков в выбранной области. Лично я всегда испытывал наибольший интерес к созданию пользовательских интерфейсов.

И я раздумывал — в чем же я разбираюсь и что нахожу важным? Конечно, я хорошо знаком с такими технологиями, как Javascript и React. Однако, самые важные вещи, которые приходят с опытом, неуловимы и обычно ускользают при попытках точно их сформулировать. Я никогда не пытался выразить их словами. Это моя первая попытка систематизировать и описать некоторые из них.
Читать полностью »

Выход версии 2.3.0 приблизил использование PWA на фронте Magento-приложений на расстояние вытянутой руки. И если для фронта видны какие-то подвижки в применяемых технологиях, то с админкой всё гораздо стабильнее — старый добрый лабиринт из различных типов файлов, которые нужно поредактировать, чтобы на UI проявилось что-то полезное, усовершенствовать не планируется. В этой статье я описываю создание собственного рендерера для колонки грида в админке — вещи довольно несложной и, в то же самое время, довольно полезной при правильном применении. Например, рендерер для формирования в гриде заказов ссылки на карточку клиента, оформившего заказ:

image

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

image

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

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

Исследуем эпичные провалы редизайна и мотаем на ус.

image

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

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

Позавчера, 4 декабря, прошло знаменательное для мобильных разработчиков событие: презентация Flutter версии 1.0. image Если Вы еще не слышали об этой новой технологии, то стоит сказать о ней несколько слов.

Флаттер — это набор инструментов от Google для создания нативных приложений для iOS И Android из одной кодовой базы. То есть пишем код на Dart, а затем компилируем его в приложение для iOS и в приложение для Андроид. Сама по себе идея компиляции под разные платформы из одной кодовой базы не нова. React Native, Xamarin, PhoneGap… Но только Флаттер обещает сделать приложения быстрыми и красивыми настолько же, насколько вообще могут быть быстрыми и красивыми нативные приложения для этих операционок. А может быть даже красивее. По крайней мере то, что показали на вчерашней презентации, было очень эфффектным.

Постараюсь рассказать о том, что мне больше всего понравилось в этой презентации.Читать полностью »

Допиливаем прибитое поле поиска Гугла - 1За десятилетие развития Гугл уже давно перестал выкладывать страницы поиска с примитивной вёрсткой, денег и времени на дизайн поисковой страницы стало хватать. Недавно (на самом деле, в разных районах мира он экспериментировал уже 2 месяца) он выложил новый дизайн результатов поиска, которые ещё постепенно дорабатываются — появилось овальное поле ввода (в поиске картинок — ещё прямоугольное), прибитое к верху (при прокрутке страницы) поле поиска. Остальные функции, в основном, остаются теми же, для которых довольно давно был сделан юзерскрипт (расширение браузера) Google Search Extra Buttons. В связи с изменениями вёрстки страницы были сделаны доработки, и заодно они затронули новые элементы пользовательского интерфейса, о которых порассуждаем сейчас, показав работающие модификации.
Читать полностью »

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

Посмотрите на этот скриншот и подумайте что изменилось за последние 20 лет.

image

Основные вводные утверждения:

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

Мейнстримные файловые менеджеры не могут этого, вообще они сосут по всем 3 пунктам. Вот почему:

  1. Дизайнерам нет дела до того что они дизайнят, они не пользуются продуктом. Они просто делают свою работу.
  2. Их боссам нет дела до дизайна. А должно быть?
  3. Обычные пользователи не замечают "мелкие" недостатки. Они просто пользуются.Читать полностью »