Как стать автором
Обновить
66.86

Интерфейсы *

То, что помогает ориентироваться

Сначала показывать
Порог рейтинга
Уровень сложности

Руководство по проектированию интерфейсов с Drag and Drop

Уровень сложности Средний
Время на прочтение 22 мин
Количество просмотров 3K

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием Drag and Drop. В своей предыдущей статье про Drag and Drop я рассказывал про историю появления и развития этого подхода: появившись в первом в мире графическом интерфейсе, Drag and Drop продолжает быть одной из самых актуальных технологий и на сегодняшний день. В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop. В первую очередь, я буду приводить примеры и говорить об особенностях Drag and Drop в рамках сложившихся практик в современных веб-интерфейсах, но многое из этого будет справедливо и для интерфейсов классических настольных приложений.

Устроиться поудобнее и читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 4

Новости

Figma to Frontend: как мы автоматически синхронизируем дизайн и код

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 11K

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

Читать далее
Всего голосов 28: ↑26 и ↓2 +24
Комментарии 4

Библиотека контролов для Avalonia UI

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 6.5K

Последний год наша команда работала над кроссплатформенной версией САПР Delta Design. В результате этой работы была создана своя библиотека UI контролов для Avalonia, которая поддерживает как ОС Windows, так и ряд систем Linux, включая российские АстраЛинукс, РедОс, а также их модификации под Эльбрус.

Создание единой библиотеки контролов EremexControls.NET позволило компании ЭРЕМЕКС значительно ускорить темпы разработки и показать мультиплатформенную версию САПР Delta Design раньше обещанного срока. Применение готовых типовых блоков дало возможность инженерам фокусироваться на предметной области, не отвлекаясь на другие задачи. Сейчас библиотека контролов используются в трех внутренних проектах компании.

Под катом обзорная статья по новому продукту от компании ЭРЕМЕКС – библиотека компонентов EremexControls.NET для Avalonia UI.

Читать далее
Всего голосов 45: ↑45 и ↓0 +45
Комментарии 29

Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

Уровень сложности Средний
Время на прочтение 2 мин
Количество просмотров 2.4K

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

Читать далее
Всего голосов 14: ↑7 и ↓7 0
Комментарии 8

Истории

Приложения для Vision Pro выглядят скучно

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 8.6K

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

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

Читать далее
Всего голосов 21: ↑20 и ↓1 +19
Комментарии 22

История Drag and Drop: от первого в мире графического интерфейса до современного веба

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 4.2K

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и в последнее время я много работаю над веб-интерфейсами с возможностью перетаскивания объектов методом Drag and Drop. В процессе изучения стандартов и сложившихся лучших практик работы с этим подходом, мне стало интересно разобраться в истории его появления. Копнув поглубже, я выяснил, что Drag and Drop — это один из самых первых способов взаимодействия человека с компьютерной программой. В этой статье хочу рассмотреть историю появления и развития этой технологии.

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 1

Что качать дизайнеру в 2024: 7 востребованных навыков на рынке

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 2.7K

Эта статья для тех, кто хочет оставаться на волне прогресса, а не оказаться погребённым под нею.

О чём поговорим:

1. Как делать дизайн для ИИ, и кто делает его сейчас?

2. Для чего дизайнеру разбираться в цифрах?

3. Зачем учиться рассказывать истории?

4. Как изменилось 3D, и почему его нельзя игнорировать?

5. Чем топовые приложения отличаются от хороших?

6. Как генеративная графика перестала быть развлечением?

7. Какого дизайнера возьмут на работу в первую очередь?

Читать далее
Всего голосов 8: ↑4 и ↓4 0
Комментарии 0

Как обновляют интерфейсы банкоматов и как это недавно сделали мы

Время на прочтение 6 мин
Количество просмотров 4.1K

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 11

Что можно улучшить в приложении? часть 2. Крадем как художники у Lamoda

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 1.2K

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

Выбор размера

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

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

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 2

UX – как лучше улучшать

Уровень сложности Средний
Время на прочтение 15 мин
Количество просмотров 4K

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

Начнём разбор с простого экрана загрузки фотографии паспорта.

Постичь дзен
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 19

Как спроектировать базу данных регулярного UX-исследования. Полный гайд на примере одного продукта

Время на прочтение 18 мин
Количество просмотров 3.8K

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

Оптимальное решение в такой ситуации — создание и поддержка единой базы данных. Ниже на примере отдельного продукта мы пошагово расскажем, как её спроектировать.

Читать далее
Всего голосов 28: ↑28 и ↓0 +28
Комментарии 4

Адаптируем иконку вашего приложения для visionOS

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 1.8K

Иконки — визитные карточки для любого приложения в App Store. Наличие кроссплатформенного приложения подразумевает понимание контекста, в котором будет отображаться иконка.

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

Читать далее
Всего голосов 21: ↑21 и ↓0 +21
Комментарии 1

Принцип минимизации злобы

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 4.5K

Здравствуйте, меня зовут Дмитрий Карловский и я.. всё никак не могу решить, стоит публиковать эту статью или нет. Я долго думал об этой дилемме Эскобара и пришёл к выводу, что..

Почему?
Всего голосов 30: ↑22 и ↓8 +14
Комментарии 16

Ближайшие события

Открытый урок «Behaviour Tree в Unity»
Дата 8 февраля
Время 19:00
Место
Онлайн

Топ-5 фишек UI/UX дизайна платформы контейнеризации

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 3.1K

Привет, Хабр! Меня зовут Иван Вербов, я UI/UX дизайнер команды разработки платформы контейнеризации dBrain.cloud. В разработке дизайна интерфейсов я стремлюсь к балансу между двумя противоположными подходами: строгость и стабильность - легкость и игра.

Хочу поделиться топ-5 фишек, созданных для консоли dBrain, чтобы превратить рутинную работу инженера по обслуживанию кластера в творческую.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

UI / UX — когда миллионы людей ошибаются

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 14K

UI-дизайн — это про то, как выглядит интерфейс, UX — про то как с ним работает пользователь. Хочется спросить — «Вы откуда это вообще взяли»? 

Читать далее
Всего голосов 24: ↑16 и ↓8 +8
Комментарии 59

Гайд: проектируем систему цветов. Всё про styles, tokens, variables

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 6.1K

В этой статье я расскажу как упорядочить цвета в макетах и в уже готовом продукте; как перейти от стилей к токенам (variables), а также поделюсь рекомендациями для тех, кто только собирается внедрять стили и переменные для цветов.

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 2

Ловкость рук, четкость алгоритма и никакого мошенничества: чек-лист для дизайнеров интерфейсов и фронтенд-разработчиков

Время на прочтение 10 мин
Количество просмотров 9.1K

Привет, Хабр! Меня зовут Даша, я проектировщик интерфейсов в Selectel.

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

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

Шаги, примеры оформления и полезный шаблон ищите под катом. Рассчитываю, что текст будет полезен джунам и мидлам как в дизайне, так и во фронтенд-разработке.
Читать дальше →
Всего голосов 45: ↑44 и ↓1 +43
Комментарии 16

Как появился графический интерфейс пользователя: история в лицах, деталях, фактах и курсорах

Время на прочтение 15 мин
Количество просмотров 6.3K

Графический интерфейс пользователя, каким мы его знаем сегодня, возник в результате десятилетий исследований множества инженеров и ученых. Программа Sketchpad Айвена Сазерленда, созданная в 1962 году, считается первым графическим интерфейсом пользователя.

Дуглас Энгельбарт изобрел компьютерную мышь в 1964 году, чтобы преодолеть ограничения световых перьев. Конструкция мыши продолжала развиваться. Исследователи PARC разработали первые растровые окна и меню, которые реагировали на ввод данных мышью. Дэвид Кэнфилд Смит в 1975 году ввел термин «иконка» для описания графических символов, представляющих программы и данные. 

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

Читать далее
Всего голосов 28: ↑28 и ↓0 +28
Комментарии 10

Программирование для народа

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 8.2K

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

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

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

И потому возникает естественная мысль — передать такие вещи тому, кому больше надо, заодно разгрузив от них себя.

Читать далее
Всего голосов 20: ↑7 и ↓13 -6
Комментарии 27

Подбор цветов для палитры визуализации данных

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 5.2K

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

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 6

Вклад авторов