Рубрика «интерфейсы» - 36

image

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

“Так исторически сложилось” считать мобильные версии урезанными. Так действительно было, даже с приходом полноценных браузеров в мобильные телефоны. Но уже прошло очень много времени и пора пересмотреть отношение к мобильным веб-сайтам.
Читать полностью »

Говорящая приставка к стиральной машине, не нарушающая гарантию - 1

Приобретя стиральную машину с вроде бы механическим управлением, автор и его слепая супруга Сью вскоре поняли, что ошиблись. Вместо командоаппарата там оказался энкодер, абсолютное положение которого по понятной причине не связано с выбранной программой. Проверенный приём — наклеивание тактильных меток — более не действовал. Вряд ли автор знаком с журналом «Юный техник», значит, к этому решению он пришёл независимо — считывать состояние расположенных вокруг ручки энкодера светодиодов фоторезисторами.Читать полностью »

IEEE P802.3ba, стандарт для передачи данных по 100-гигабитным каналам Ethernet (100GbE), разрабатывался в период с 2007 по 2010 год [3], но получил широкое распространение только в 2018 [5]. Почему именно в 2018, а не раньше? И почему сразу в массовом порядке? На то есть как минимум пять причин...

100GbE: роскошь или насущная необходимость? - 1

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

Как оседлать радугу: история создания тёмной темы - 1

В сентябре мы выпустили тёмную тему официального приложения ВКонтакте для iOS, а неделю назад релиз состоялся и на Android. За этим запуском стоит большой совместный труд разработчиков и дизайнеров. Вместе мы не просто перевели VK на тёмную сторону, но и серьёзно изменили подход к работе с цветами в наших интерфейсах, упростив их выбор и снизив вероятность ошибиться и наплодить лишних стилей.

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

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

image

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

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

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

  1. Структура и схема.
  2. Представление и доступность.
  3. Выбор используемых графиков.
  4. Усовершенствование контекста.

Часть 1. Структура и схема

Давайте для начала остановимся и зададим себе два вопроса: кто наша целевая аудитория и каковы её цели?

Знание своей целевой аудитории и её задач критически важно для остальной части работы. Если ваша ЦА — руководители разработки, которым нужно знать высокоуровневую информацию о функционировании системы, то нужные им данные будут сильно отличаться от тех, которые необходимы приходящему инженеру.

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

Видео: админский пульт управления Хабром. Позволяет регулировать карму, рейтинг, и банить пользователей.

TL;DR: в статье я попробую создать шуточный пульт управления Хабром, используя среду разработки промышленных интерфейсов Webaccess/HMI Designer и терминал WebOP.

Человеко-машинный интерфейс (англ. Human-machine interface, HMI) — это набор систем для взаимодействия человека с управляемыми машинами. Обычно этот термин применяется для промышленных систем, в которых есть оператор и пульт управления.

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

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

Через «пару десятилетий» мозг подключат к Интернету - 1

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

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

Дизайн интерфейсов встраиваемых систем - 1
Осциллографы

Встраиваемые и промышленные системы — моя любимая тема в разработке дизайна. Когда делаешь интерфейс ПО какого-нибудь лазера или яхты — это чистый кайф и творчество.
На прошлой неделе я посетил выставки expoelectronica и embeddedday именно как UI разработчик. Целью было посмотреть на новинки вживую, пощупать, набраться опыта.
В итоге я посмотрел более 100 GUI различных систем, но вот с набором опыта возникли проблемы...

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

Внимание! Много фото!

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

image

Гиперсмысл — это «смысл, упакованный в архив». Скрытый в тех или иных символьных конструкциях так, чтобы выполнялось правило: чем больше всматриваешься, тем больше видишь. Для чего это нужно?
Читать полностью »

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

Патенты в дизайне: часть первая (общие положения, примеры от Apple, Facebook) - 1

Как бы не так. Ничего подобного вы сделать не можете, потому что у Tinder патент на жесты «провести вправо, чтобы поставить лайк» и «провести влево, чтобы поставить дизлайк». «Ну, ладно», — думаете вы. «Это ведь визитная карточка всего их приложения, тогда пусть никто никуда не проводит, а просто сделаем MVP, где под пиццей будут кнопки для лайков и дизлайков». Увы, дружок: Tinder запатентовал и это.
Читать полностью »


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