Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием Drag and Drop. В своей предыдущей статье про Drag and Drop я рассказывал про историю появления и развития этого подхода: появившись в первом в мире графическом интерфейсе, Drag and Drop продолжает быть одной из самых актуальных технологий и на сегодняшний день. В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop. В первую очередь, я буду приводить примеры и говорить об особенностях Drag and Drop в рамках сложившихся практик в современных веб-интерфейсах, но многое из этого будет справедливо и для интерфейсов классических настольных приложений.
Интерфейсы *
То, что помогает ориентироваться
Новости
Figma to Frontend: как мы автоматически синхронизируем дизайн и код
Меня зовут Анастасия Кабалкина, я Head of design в VK Tech. В этой статье расскажу, как мы синхронизировали треть нашей дизайн-системы за счет автоматической генерации дизайн-токенов и компонентов.
Библиотека контролов для Avalonia UI
Последний год наша команда работала над кроссплатформенной версией САПР Delta Design. В результате этой работы была создана своя библиотека UI контролов для Avalonia, которая поддерживает как ОС Windows, так и ряд систем Linux, включая российские АстраЛинукс, РедОс, а также их модификации под Эльбрус.
Создание единой библиотеки контролов EremexControls.NET позволило компании ЭРЕМЕКС значительно ускорить темпы разработки и показать мультиплатформенную версию САПР Delta Design раньше обещанного срока. Применение готовых типовых блоков дало возможность инженерам фокусироваться на предметной области, не отвлекаясь на другие задачи. Сейчас библиотека контролов используются в трех внутренних проектах компании.
Под катом обзорная статья по новому продукту от компании ЭРЕМЕКС – библиотека компонентов EremexControls.NET для Avalonia UI.
Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур
Если вы новичок в дизайне, то наверняка могли заметить, что мелочи часто играют большую роль при создании композиции. Одна из таких мелочей – внутренние углы. В данной статье я рассказал, почему они важны и как сделать так, чтобы ваше закругление углов выглядело аккуратно.
Истории
Приложения для Vision Pro выглядят скучно
Apple вложила массу усилий в разработку правил, советов и руководств по проектированию элементов интерфейса, чтобы не столкнуться с подводными камнями, связанными с созданием 3D-интерфейсов. Это помогло избежать обилия подвижных элементов и визуального беспорядка, которые могут запутать пользователя или даже повлиять на его самочувствие.
Однако это привело к тому, что многие приложения, которые я видел, были без своего характера. Скриншоты кажутся безвкусными, а отличить одно приложение от другого становится затруднительно.
История Drag and Drop: от первого в мире графического интерфейса до современного веба
Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и в последнее время я много работаю над веб-интерфейсами с возможностью перетаскивания объектов методом Drag and Drop. В процессе изучения стандартов и сложившихся лучших практик работы с этим подходом, мне стало интересно разобраться в истории его появления. Копнув поглубже, я выяснил, что Drag and Drop — это один из самых первых способов взаимодействия человека с компьютерной программой. В этой статье хочу рассмотреть историю появления и развития этой технологии.
Что качать дизайнеру в 2024: 7 востребованных навыков на рынке
Эта статья для тех, кто хочет оставаться на волне прогресса, а не оказаться погребённым под нею.
О чём поговорим:
1. Как делать дизайн для ИИ, и кто делает его сейчас?
2. Для чего дизайнеру разбираться в цифрах?
3. Зачем учиться рассказывать истории?
4. Как изменилось 3D, и почему его нельзя игнорировать?
5. Чем топовые приложения отличаются от хороших?
6. Как генеративная графика перестала быть развлечением?
7. Какого дизайнера возьмут на работу в первую очередь?
Как обновляют интерфейсы банкоматов и как это недавно сделали мы
Всем привет! Недавно мы переработали интерфейс наших банкоматов. Не то чтобы старый работал плохо, просто изменения — развитие, а развитие — это всегда хорошо. Рассказываем, что и как поменяли, как к этому пришли, что из этого вышло и зачем вообще обновлять то, что и так работает.
Что можно улучшить в приложении? часть 2. Крадем как художники у Lamoda
Продолжаем серию публикаций по улучшению юзабилити мобильных приложений. Сегодня сравниваем лидера рынка, самописное и на конструкторе. Делимся, что можно позаимствовать из Lamoda и какие ошибки совершают разработчики.
Выбор размера
Выбор подходящего размера – стрессовый момент при заказе одежды в интернет-магазине, ведь никто не хочет с упоением ждать обновку, а затем расстроиться из-за висящих рукавов.
Для того чтобы не оказаться в такой ситуации и придумали размерные сетки, с помощью замеров можно понять, что подойдет вам. Но кто хочет вставать с диван во время дум-скроллинга и искать по всей квартире сантиметр?
Я обычно пользуюсь именно описанием параметров модели и фотографиями, как сидит вещь на нем. Это быстро и мне сразу понятно, какой крой будет у футболки или кофты.
UX – как лучше улучшать
На примере создания аккаунта в финансовом сервисе я покажу как построить и запустить процесс улучшения User Experience продукта. Что и в каком порядке делать продуктовому дизайнеру, чтобы никого не взбесить, и чтобы всем в команде стало лучше.
Начнём разбор с простого экрана загрузки фотографии паспорта.
Как спроектировать базу данных регулярного UX-исследования. Полный гайд на примере одного продукта
В организации любого исследования важны системность, логичность и наглядность. А когда речь идёт о регулярном, то есть периодическом исследовании, роль этих качеств становится особенно очевидна. Исследуя что-либо на длинной дистанции, к примеру, в течение нескольких лет, мы нуждаемся в инструменте, который позволяет хранить массивы данных, быстро обращаться к результатам разных волн исследования, отслеживать проблемы и делать корректные выводы.
Оптимальное решение в такой ситуации — создание и поддержка единой базы данных. Ниже на примере отдельного продукта мы пошагово расскажем, как её спроектировать.
Адаптируем иконку вашего приложения для visionOS
Иконки — визитные карточки для любого приложения в App Store. Наличие кроссплатформенного приложения подразумевает понимание контекста, в котором будет отображаться иконка.
Когда дело доходит до новых технологий, таких как visionOS, убедитесь, что у вас есть всё необходимое для эффективной адаптации значка приложения. Цель состоит в том, чтобы создать многослойную иконку, которую можно использовать в системе для придания эффекта глубины, когда пользователь выбирает приложение взглядом.
Принцип минимизации злобы
Здравствуйте, меня зовут Дмитрий Карловский и я.. всё никак не могу решить, стоит публиковать эту статью или нет. Я долго думал об этой дилемме Эскобара и пришёл к выводу, что..
Ближайшие события
Топ-5 фишек UI/UX дизайна платформы контейнеризации
Привет, Хабр! Меня зовут Иван Вербов, я UI/UX дизайнер команды разработки платформы контейнеризации dBrain.cloud. В разработке дизайна интерфейсов я стремлюсь к балансу между двумя противоположными подходами: строгость и стабильность - легкость и игра.
Хочу поделиться топ-5 фишек, созданных для консоли dBrain, чтобы превратить рутинную работу инженера по обслуживанию кластера в творческую.
UI / UX — когда миллионы людей ошибаются
UI-дизайн — это про то, как выглядит интерфейс, UX — про то как с ним работает пользователь. Хочется спросить — «Вы откуда это вообще взяли»?
Гайд: проектируем систему цветов. Всё про styles, tokens, variables
В этой статье я расскажу как упорядочить цвета в макетах и в уже готовом продукте; как перейти от стилей к токенам (variables), а также поделюсь рекомендациями для тех, кто только собирается внедрять стили и переменные для цветов.
Ловкость рук, четкость алгоритма и никакого мошенничества: чек-лист для дизайнеров интерфейсов и фронтенд-разработчиков
Привет, Хабр! Меня зовут Даша, я проектировщик интерфейсов в Selectel.
В профессии нахожусь уже более пяти лет и периодически встречаюсь с ошибкой: дизайнеры не всегда в процессе передачи макета в разработку проверяют, все ли кейсы и состояния учтены. Это приводит к потере времени и увеличению напряжения в команде.
Признаюсь честно: я сама ни раз наступала на эти грабли. Но все изменилось, когда стала работать в тандеме с очень внимательным фронтенд-разработчиком: он предусматривал все варианты развития событий при прохождении пользователем сценария. Из-за этого наши творческие отношения ни раз переживали несколько этапов доработок моих макетов, но выстояли и вдохновили меня на создание чек-листа :)
Шаги, примеры оформления и полезный шаблон ищите под катом. Рассчитываю, что текст будет полезен джунам и мидлам как в дизайне, так и во фронтенд-разработке.
Как появился графический интерфейс пользователя: история в лицах, деталях, фактах и курсорах
Графический интерфейс пользователя, каким мы его знаем сегодня, возник в результате десятилетий исследований множества инженеров и ученых. Программа Sketchpad Айвена Сазерленда, созданная в 1962 году, считается первым графическим интерфейсом пользователя.
Дуглас Энгельбарт изобрел компьютерную мышь в 1964 году, чтобы преодолеть ограничения световых перьев. Конструкция мыши продолжала развиваться. Исследователи PARC разработали первые растровые окна и меню, которые реагировали на ввод данных мышью. Дэвид Кэнфилд Смит в 1975 году ввел термин «иконка» для описания графических символов, представляющих программы и данные.
Xerox Star в 1981 году коммерциализировал многие из этих концепций графического интерфейса, а Macintosh от Apple в 1984 году сделал их общепринятыми. В настоящее время ведутся юридические споры о том, кому принадлежат права интеллектуальной собственности на различные элементы графического интерфейса пользователя, такие как окна и значки.
Программирование для народа
Программирование в его нынешней младенческой форме — слишком сложное занятие, требующее специализации, многолетней учебы и нужным образом повернутых мозгов. Добавьте к этому свободный рынок и получите нынешнее четкое разделение на разработчиков и юзеров. Первые пишут, вторые — пользуются готовым и не жужжат.
Но иногда им все‑таки хочется большего — как‑то повлиять на то, чем они, собственно, пользуются. В большой и сложной системе, особенно если она соприкасается с постоянно осциллирующими бизнес‑требованиями постоянно возникают мелкие задачи, которые программисту делать лень.
Зато пользователям этой самой сложной, но не вполне их удовлетворяющей системы такие вещи, прямо касающиеся их непосредственных занятий, наоборот, весьма родны и близки.
И потому возникает естественная мысль — передать такие вещи тому, кому больше надо, заодно разгрузив от них себя.
Подбор цветов для палитры визуализации данных
Для того чтобы упростить восприятие данных в интерфейсе используются инструменты, вроде графиков и диаграмм. Но используя такие элементы практически сразу встает вопрос, а в какие цвета красить тренды графиков и столбики в диаграммах?
Эта статья поможет вам решить эту проблему.
Вклад авторов
-
jvetrau 3666.0 -
alizar 2432.5 -
forgotten 1155.0 -
Milfgard 983.0 -
dmitrysatin 833.0 -
badlittleduck 810.8 -
Leono 716.1 -
kamushken 591.0 -
grokru 541.0 -
Bright_Translate 538.4