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

Дизайн

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

Анализ производительности React Native приложений: как выявить проблемы и улучшить перформанс

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

Привет, Хабр! Меня зовут Вадим, я мобильный разработчик в СберМаркете. В этой статье расскажу, как провести профилирование (оно же измерение производительности или оценка перформанса) в react native приложениях: как выявить источник проблем и решить их. В русскоязычных источниках не так много информации по данной теме. Я потратил немало времени, чтобы со всем разобраться, поэтому попытаюсь восполнить этот пробел и для вас :)

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

Новости

Line height в Android TextView: где не сходится с Figma, как мешает pixel-perfect, и как это решить

Время на прочтение 4 мин
Количество просмотров 287

В крупных проектах уделяется большое внимание деталям: дизайнеры, аналитики и продуктовые менеджеры продумывают все до мелочей, чтобы максимально улучшить пользовательский опыт. В дизайне такой важной деталью становится pixel-perfect-вёрстка. Разработчики реализуют тонкости дизайна, но иногда происходит расхождение платформенного рендеринга Android TextView и Figma Text.

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

Форматы изображений в вебе (2024)

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

Сегодня трудно найти веб сайт, на котором нету хотя бы одного изображения, может быть у вас есть такой пример? На странице в интернете можно сразу увидеть много разных изображений: фото пользователя в личном кабинете, фото товара на маркетплейсе, иконка на вкладке браузера, иконка корзины на кнопке «добавить в корзину», анимированное изображение‑открытка от бабушки в мессенджере, [и еще тысяча примеров].

Если вы как‑то связаны с вебом то вам будет полезно иметь общее представление об этих images, как минимум, и уметь с ними работать как максимум. Давайте попробуем разобраться с этим вопросом?

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

Почему реактивность без VDOM (с реальным DOM) лучше, чем реактивность с VDOM?

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

Всем привет! В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.

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

Истории

Между строк: Создание элементов интерфейса через VectorApi Unity UI Toolkit

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

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

Сегодня будем разбирать альтернативный способ создания, использую VectorApi.

Рассмотрим, как работает painter2D, какими функциями обладает и зачем оно может вам пригодиться.

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

Эволюция главного экрана: хаос, исследования и редизайн

Время на прочтение 8 мин
Количество просмотров 908

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

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

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

Адаптация мобильного приложения для пользователей скринридеров. Опыт Яндекс Лавки

Время на прочтение 14 мин
Количество просмотров 981

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

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

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

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

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

Впихнуть невпихуемое: как в НИЦ «Технологии» разрабатывали корпуса для IP-камер

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

Максим Тулов в своем обзоре удивился нашим "самодельным" корпусам и спросил почему бы не воспользоваться готовым китайским решением. IP-камера довольно типовой продукт, и подходящих решений на любой площадке — хоть отбавляй. Так зачем изобретать велосипед?

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

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

Инклюзивность и цифровая доступность в дизайне: почему это важно для всех

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

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

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

6 лет из жизни инди-разработчика

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

А привет, Хабр. У меня для тебя есть история длиной в шесть лет. История о том, как я учился делать свои собственные игры без навыков программирования и что из этого вышло. Почему так долго и почему так делать не стоит. Настоящий ориджинал контент, от А до Я. Где такое найдешь сейчас, а? Тут, правильно.

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

Читать далее
Всего голосов 29: ↑25 и ↓4 +21
Комментарии 23

История «Dark Mode»: как «баг» стал «фичей»

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

«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте. Она окрашивает фоновые элементы графического интерфейса в темный цвет, а текст — в белый.

Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию. Например, популярный в веб-разработке (и не только) Sublime Text.

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

Тем не менее отображение информации белым по темному существует очень давно — еще до появления технологии ЭЛТ, на смену которой впоследствии пришли ЖК и OLED.

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 13

Не баг, а фича: видеоигровые баги, которые стали классикой

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

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

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

В качестве бонуса в конце — небольшая подборка багов, которые превратились в мемы.

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

Как сделать универсальный компонент List Cell в Figma

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

Я покажу свой способ сборки компонента List Cell, объясню, почему считаю его гибким, а также приложу ссылку на Figma. Я решил рассказать об этом потому, что не нашёл подходящих материалов, как собрать свой List Cell.

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

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн

Анимируем 3d-персонажа в Unity3D: скачиваем модель персонажа, скачиваем анимации

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

Первая часть анимирования 3d-персонажа в Unity3d. В статье скачаем 3d-модель персонажа, скачаем скелетные анимации и импортируем их в проект unity.

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

Генерация картинок на любом железе без Midjourney

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

Для генерации изображений сегодня существует множество сервисов. Некоторые из них платные, другие нет. И даже в большинстве бесплатных сервисов вы можете столкнуться с ограничениями, например, на количество бесплатных картинок за единицу времени, разрешение изображений и прочее. Это обстоятельство объясняется просто. Несмотря на доступность технологии, железо, которое требуется для генерации, остается дорогим. И бесплатно отдавать ресурсы GPU мало кому хочется. Однако, тягу к бесплатному трудно победить. Поэтому в этой статье мы узнаем, как, всё же, генерировать изображения только при помощи браузера и нескольких строк кода.

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

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

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

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • К чему приводят распространённые ошибки с элементом <label>;
  • Лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
  • Как пользователи скринридера понимают, что модальное окно открыто.

Давайте начнём!

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

C3D Collision Detection: представление детектора столкновений в составе C3D Toolkit

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

Сергей Белёв, старший математик‑программист, C3D Labs, знакомит с новым компонентом C3D Toolkit — модулем C3D Collision Detection, рассказывает о том, что детектор столкновений представляет собой изнутри, и о том, какие возможности он предоставляет пользователям.

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

Обнаружение столкновений подразумевает постановку следующих математических задач. Первая — это возможность уметь находить пересечения между собой среди множества объектов и делать это быстро, без поиска самого пересечения. Требуется оперативно отвечать на соответствующий вопрос — «да, пересекаются» / «нет, не пересекаются». Следующая задача состоит в классификации касаний между собой этого множества объектов. Каждое касание является пересечением, но не наоборот, и важно уметь выделять этот частный случай пересечения. Помимо этого, актуальна задача поиска минимального расстояния между сборками тел и телами, а также задача классификации взаимного расположения объектов. Примером служит детектирование «вложения тел» («тело в теле»), недавно внедренное нами в ответ на многочисленные запросы пользователей. Важно отметить, что все эти задачи нужно уметь решать как в статике, так и в динамике.

Модуль C3D Collision Detection, во‑первых, реализует «эффективные» алгоритмы решения всех поставленных задач — как в статических сценах, например контроль зазоров, так и в динамических сценах, в частности контроль соударений между элементами сборки. Во‑вторых, у нас есть возможность тонкой настройки всех формулируемых задач — можно даже создавать их комбинации. В‑третьих, исходя из необходимости быстро детектировать касание/пересечение, применяется принципиально иной подход, чем в булевой операции: мы не строим какие‑либо дополнительные объекты.

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

Интерфейсы для производств — это не сайты штамповать

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

Стоит только коснуться производственной специфики, как стандартные подходы разваливаются на куски — даже если у вас уже есть огромная дизайн-система на основе популярной методологии Material Design. Я — Аня Труфанова, делаю дизайн для MES (manufacturing execution system). Нам пришлось взять дизайн-систему и наполнить ее уникальными фичами и кастомными компонентами, адаптированными под нестандартные условия. Сейчас я поделюсь, что именно мы переосмыслили и какие фичи добавили.

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

Как складывался «анимешный» стиль в играх (и не только) и какую роль во всём этом сыграл Такабатакэ Касё

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

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

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

Аффордансы – главные подсказки функциональной сути игровых объектов

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

С развитием виртуальных миров и интерактивных сред, вопросы проектирования игровых объектов становятся всё более актуальными. Одним из ключевых понятий в дизайне игрового пространства является аффорданс – концепция, зародившаяся в экологической психологии Джеймса Гибсона и обозначающая возможности действия, которые предоставляет среда живому организму. В контексте видеоигр аффордансы выступают как неявные подсказки для игрока относительно того, как можно использовать тот или иной объект.

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