Рубрика «UI» - 27

Ник Бабич разработчик, теч энтузиаст и просто влюбленный в UX/UI специалист написал заметку в блоге UX Planet про бесконечную прокрутку, мы сделали адаптивный перевод материала специально для читателей Хабрахабр.

image

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

Бесконечная прокрутка

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

image

Плюс №1: Вовлечение пользователя и раскрытие контента.

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

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

image
Океан заметок Pinterest
Читать полностью »

В 2014 году главным трендом в мире UI-дизайна стали кнопки-призраки. Речь идет о прозрачных кнопках прямоугольной или квадратной формы, которые также называют «пустыми», «голыми» или «полыми», мы не могли обойти стороной этот материал и сделали адаптивный перевод статьи журнала UX Planet специально для читателей Хабрахабр.

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

image

Обычный внешний вид (слева) и внешний вид при наведении курсора (справа).

image

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

QtQuick-QML в качестве игрового UI - 1 В играх со сложным UI создание собственной библиотеки для его отображения и инструментов для удобного редактирования может стать очень долгой и сложной задачей. Которую очень хочется решить раз и навсегда, а не делать это заново в каждом новом проекте, и даже в каждой новой компании.

Выходом является использование готовых универсальных UI библиотек. Текущее их поколение представлено такими «монстрами» как Scaleform и Coherent UI, хотя если вам так хочется писать UI на HTML, то можно и просто взять Awesomium.

К сожалению, у этой троицы, при всех её преимуществах, есть один существенный недостаток — жуткие тормоза, особенно на мобильных устройствах (несколько лет назад, я лично наблюдал, как практически пустой экран на Scaleform потреблял 50% от времени кадра на iPhone4).

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

Впрочем, причина, по которой именно привычные старые Qt Widgets не используются в играх, лежит на поверхности: они не рассчитаны на использование совместно с OpenGL или DirectX рендером. Попытки их скрестить дают довольно плохую производительность даже на десктопе, а про мобилки и говорить нечего.

Однако, уже довольно давно в Qt есть гораздо более подходящая для этой задачи библиотека: QtQuick. Её контролы по умолчанию рендерятся ускоренно, а возможность задавать описание UI в текстовом формате отлично подходит для быстрой настройки и изменения внешнего вида игры.

Тем не менее, я до сих пор не слышал об использовании Qt в профессиональном геймдеве. Статей на тему тоже не нашлось, поэтому я решил разобраться сам — то ли все что-то знают, чего не знаю я (но не рассказывают!), то ли просто не видят хорошую возможность сэкономить на времени разработки.
Читать полностью »

Под катом пример добавления в гриде админки Magento 2 дополнительной колонки с данными из таблицы, связанной с основной таблицей грида, и "грязный хак" для работы фильтра по дополнительной колонке. Допускаю, что это не вполне "Magento 2 way", но это как-то работает, а потому — имеет право на существование.

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

Как известно, контрол WebBrowser это просто обертка над ActiveX компонентом Internet Explorer. Следовательно он предоставляет доступ к полноценному layout-движку со всеми современными плюшками. А раз так, то попробуем (сам не знаю правда зачем) на его основе сделать пользовательский интерфейс для обычного windows-приложения.

Можно, конечно, было бы запустить в этом же процессе мини веб-сервер (на HttpListener например) и ловить запросы через него, но это слишком просто, скучно и неспортивно. Попробуем обойтись без сетевых компонентов, just for fun.
Читать полностью »

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

В этом посте мы рассмотрим 5 ошибок, которые следует избегать при создании микровзаимодействий.

5 ошибок, которых следует избегать при создании микровзаимодействий - 1

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

image

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

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

  • если решение интуитивно понятно
  • если решение упрощает процесс взаимодействия
  • если решение реализуемо

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

Не так давно вышло приложение ЖКХ Москвы, призванное облегчить жизнь граждан. Его описание гласит:

«С помощью приложения возможно ввести показания счетчиков водоснабжения, узнать, когда отключат горячую воду, получить информацию об управляющей компании, узнать задолженность по услугам ЖКХ, принять участие в опросе, а также обсудить с соседями проблемы обслуживания вашего дома на форуме.»

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

«За много лет мы получили столько жалоб, что решили сделать, наконец, правильный выбор»

Chrome отключил навигацию назад по кнопке Backspace - 1Тем пользователям Chrome/Chromium, кто привык нажимать Backspace для возврата на предыдущую страницу, придётся менять привычки. Это стало понятно из обсуждения в баг-трекере Chromium (Issue 608016).

Обсуждение началось с невинного баг-репорта: у пользователя после обновления на последнюю версию Chrome 52.0.2720.0 (Canary) перестала работать кнопка Backspace для навигации. Как выяснилось, это вовсе не баг. Теперь Chrome по умолчанию не возвращается на предыдущую страницу по Backspace. Разработчики предупреждали об изменении ещё в апреле: см. Issue 1854963002, коммит от 11 апреля.
Читать полностью »

Если вы часто пользуетесь картами Google Maps, то наверняка заметили изменения, которые произошли после редизайна примерно три года назад. Самое заметное, что стало гораздо меньше меток, карты как будто опустели.

Вот как выглядят окрестности Нью-Йорка, в сравнении с картой 2010 года.

Что случилось с Google Maps? - 1

Сколько городов исчезло с карты? Давайте посчитаем.
Читать полностью »

Привет!

pyLCI — внешний интерфейс для Raspberry Pi и других Linux-устройств - 1

Сегодня я хочу показать вам проект, над которым я работал последние пару лет и наконец выпускаю первую пригодную для использования версию. Это pyLCI — Python-based Linux Control Interface, внешний интерфейс для компьютеров с Linux, который позволяет взаимодействовать с системой посредством символьных дисплеев и кнопок. С помощью написанных под этот интерфейс приложений можно выполнять большое количество задач, связанных с администрированием и настройкой системы, а также запускать различные скрипты и выполнять команды. И всё это — не завися от монитора с клавиатурой!

А ещё мой интерфейс:

  • Дешёвый
  • Простой
  • Легко расширяемый
  • Универсальный

Заинтересованы? Прошу под кат.

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


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