реклама
разместить
Не изобретайте велосипед: десять проверенных хитростей для дизайнеров интерфейсов

Перевод статьи UX-дизайнера Мериэл Москерьолы о том, почему не стоит сильно увеличивать шрифт для создания контраста, применять несколько оттенков чёрного и как расчёты помогают подобрать цвета.

Не изобретайте велосипед: десять проверенных хитростей для дизайнеров интерфейсов
2626
реклама
разместить
реклама
разместить

Комментарий недоступен

12

Ну зачем переводить бред? Многие вещи вырваны из контекста, многие подходят только для одной определенной цели, а не дизайна в целом, что-то вообще подходит ТОЛЬКО для англоязычной аудитории.

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

Количество символов в строке напрямую зависит от размера шрифта.Тем более, что диапазон 45-60 символов - это для английского языка http://prntscr.com/j6sxfj

8

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

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

Противоречивая статья. «Чем сильнее контраст, тем лучше.» «Используйте калькулятор, чтобы проверить доступность» («check its accessibility» — вообще почему-то не переведено) и в другом месте «Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному,» как камнем по голове. Лол, что?!

Люди годами читали и читают чёрный на белом. Контрастный текст лучше читается, особенно когда есть проблемы со зрением (или с экраном, освещением и тому подобным). А здесь предлагается ухудшить восприятие. Если у кого-то утомляются глаза, то надо настроить яркость экрана и окружение. Этим вообще не должен за всех заниматься дизайнер.

«Зебры» тоже не лучший совет: они создают мельтешение и в плохих условиях их также может быть попросту не видно, так как фон очень бледный (иначе сильно снизится контраст).

5

При долгом чтении #111 или #222 воспринимаются глазом лучше, чем #000

4

Люди годами читали и читают чёрный на белом. Бумага не светится, в отличие от экрана)

«Чем сильнее контраст, тем лучше.» и в другом месте «Черный цвет текста (#000) вызывает переутомление глазОчевидно же что в первом случае речь про контраст в размерах, а во втором про цветовой

2

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

Вам не нужно много оттенков чёрногоИщем всем отделом оттенки чёрного, нашли один

7

Режимы наложения в макетах для вэба... Ммммм😏
Can I Use CSS background-blend-mode?

6

Много спорно. Что точно бросается в глаза:

Пункт 9 ("Вот решение — используйте эти цвета как акцентные")
Без сопоставления с тем, что будет вокруг этого объекта, принятие решения невозможно (нужно ли поднять визуальный приоритет этого объекта-кнопки или нет относительно окружения).

Пункт 10 ("Это поможет избежать помех при чтении такого списка").
Это точно понизит визуальный приоритет заголовка этого списка, что в ряде случаев может стать проблемой (сначала пользователь увидит чекбоксы, которые бессмысленны для него до тех пор, пока он не в курсе что это за список, какой у него заголовок).

4

Комментарий недоступен

2

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

2

Все по лекалам дриббла, ага. Причем здесь интерфейс — непонятно.

1

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

1

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

1

еще вопрос по верстке. кто-нибудь когда-нибудь видел верстальщика, который ставит опасити на body текст? вся эта статья какой-то полубред.

1

Два слова: Material Design)

С этим вообще не согласен, но в целом статья годная.

1

да всем вообще пофиг

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

Опять завезли переводы статеек с медиума от непойми кого

а Multiply для текста уже придумали, как реализовывать?

очевидно же, что текст добавлять картинкой (привет, 2003-й)

CSS Compositing and Blending позволяет это сделать, но поддержка ограниченная конечно.

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

Меня раздражает этот чистый белый цвет для фона. Ей богу слепит глаза хуже солнца. Вот 240-220 уже намного приятнее. Но вообще лучше всегда dark версию делать. Весь про софт от Adobe до Autodesk давно уже понимает почему темный дизайн лучше для глаз.

Срочно нужен web-дизайнер для создания лого и сайта, напишите мне, кто сможет этим заняться +79963032823 (what's up, telegram)

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

Глава Superjob: «Научитесь предсказывать курс доллара хотя бы на две недели вперёд, а потом будете предсказывать, что будет на рынке труда через пять лет»

Несколько цитат из разговора Алексея Захарова о дефиците кадров с изданием «Бизнес Online».

Захаров. Источник фото: «Бизнес Online»
2828
33
33
Одна из немногих вырезок интервью, которую я прочел до конца и с интересом и при этом человек говорит все по делу и все правильно. Красавчик, разъяснил то, чего многие почему-то не могли понять.
реклама
разместить
На выставке CES показали «эргономичную» клавиатуру с автовыдвижными модулями — клавишами и тачпадом или мышкой

Стоит $700 — 71 тысячу рублей по курсу ЦБ на 6 января 2025 года.

1919
44
В борьбе с пробками: Нью-Йорк первым в США ввёл плату за въезд в загруженные районы города

Она составит до $21,6 в зависимости от времени и вида транспорта.

Центр Манхэттена. Источник фото: Shutterstock
1111
66
44
22
22
11
Казна пустеет, Милорд! Ну что же, одни штрафы, поборы и т.д. США на пороге гражданской войны, поэтому не удивительно, что раскачивают ситуацию таким образом. Экономика трещит по швам.
Бросай работу в найме: Куда пойти, чтобы зарабатывать больше и жить свободно?

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

66
10 лучших маркетинговых инструментов на основе искусственного интеллекта (январь 2025 г.)
10 лучших маркетинговых инструментов на основе искусственного интеллекта (январь 2025 г.)
1919
22
11
11
«Чат-бот от AmoCRM приносил 1-2 заявки в сутки с горячего брендового трафика. ИИ-ассистент Solo приносит до 8 заявок в сутки с холодного с чеком выше на 20%»: кейс Moscow Business Academy х Solo, как выйти из низкого сезона в выигрыше

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

99
33
Крупнейший контрактный производитель электроники Foxconn сообщил о рекордной выручке за четвёртый квартал и устойчивом спросе на серверы для ИИ

На фоне этого приросли акции производителей полупроводников.

Источник фото: FxTeam
33
11
Абоненты МТС пожаловались на сбой в работе домашнего интернета и мобильной связи

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

Обновлено в 14:41 мск: в Роскомнадзоре объяснили сбой «аварией на магистральной сети у одного из операторов связи». По словам ведомства, её уже устранили.

1313
55
Тренировка по защите россиян от связи и интернетов прошла успешно.
[]