Сделайте более очевидным, что изображение можно изменить при загрузке

Внести вклад UX
1

Это сводит меня с ума почти каждый день.

  • Я загружаю скриншот в разрешении Retina
  • Сразу же подношу курсор мыши к области предпросмотра, чтобы получить «элементы управления изменением размера» и уменьшить его
  • Элементы управления не появляются при наведении
  • Я убираю курсор
  • Затем снова подношу курсор к области предпросмотра, и элементы управления появляются

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

Я могу предложить два варианта улучшения этой ситуации:

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

  2. Мы можем просто отображать «элементы управления изменением размера» всегда (возможно, более ненавязчиво).

Лично я предпочитаю вариант (2), но интересно узнать, что думают об этом @codinghorror, @awesomerobot и сообщество?

11 лайков
2

Я этого не вижу. Это из-за задержки?

1 лайк
3

Крайне вероятно, 100% воспроизводимо в Firefox в Австралии против meta.

4 лайка
4

Значит, решение — переезд? :laughing:

10 лайков
5

Поддерживаю вариант 2. Это очень удобная функция, но, думаю, её легко упустить, если о ней не знать.

3 лайка
6

Я не вижу вреда в том, чтобы безоговорочно отображать элементы управления изменением размера в предварительном просмотре по трём причинам:

Во-первых, мы лишь «скрываем» их с помощью прозрачности:

что означает, что они всё равно занимают место, даже когда невидимы. Обёртка имеет абсолютное позиционирование, но мы добавляем отступы к .image-wrapper.

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

В-третьих, это повысит обнаруживаемость функции.

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

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

15 лайков
7

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

Одна из причин, по которой мы изначально не сделали так, заключалась в том, что при вводе элементы управления ужасно мерцали. Думаю, были внесены изменения, которые уменьшили мерцание, но элементы управления всё ещё полностью удаляются из DOM, как только вы начинаете печатать… Как только это будет исправлено, обязательно переработайте их стили, чтобы они всегда отображались, @johani!

8 лайков
8

Я не наблюдаю мерцания после удаления прозрачности, так что, полагаю, мы решили проблему?

Я исправил (1) здесь:

Но мне всё ещё кажется, что суть в том, что проблема не очевидна и зависит от наведения курсора.

@Johani, может быть, стоит создать компонент темы для стилизации этого элемента (поскольку можно использовать чистый CSS для получения любого желаемого результата)? Обязательно протестируйте это на очень-очень коротком изображении. Затем установите компонент на dev и meta, чтобы мы могли поработать с ним некоторое время и решить, предпочитаем ли мы такой вариант или нет?

8 лайков
9

Да, я думаю, что в какой-то момент добавили задержку (debounce)? Теперь, когда ты исправил первую проблему, всё выглядит отлично.

3 лайка
10

Вау, я не могу поверить, что 2019 год был уже целый год назад :lolsob:

3 лайка
11

Лично я вообще не поддерживаю это изменение. Из-за него всё становится намного более перегруженным. Были ли какие-то реальные проблемы с обнаружением функции изменения размера?

1 лайк