Я использую отличный sortable.js, чтобы люди могли сортировать миниатюры изображений по предпочтениям. Поскольку сайт ориентирован на мобильные устройства, <ol>, содержащий изображения, может изменить форму, а изображения элементов списка будут перенесены (li {float:left}). Визуальная точность изображений довольно важна, поэтому я стараюсь избегать наложения полупрозрачных чисел и т. д.

Какой хороший способ дать бабушкам понять, что верхний левый — это № 1, а нижний правый — последний?

0
Escher 3 Ноя 2015 в 20:35

1 ответ

Лучший ответ

Почему бы не добавить к каждому изображению визуальный индикатор, отображающий текущую числовую позицию изображения в коллекции? (например, № 1, № 2 и т. д.)

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

1
Ed Plunkett 3 Ноя 2015 в 21:39
В итоге я сделал полупрозрачное наложение <span> с порядком (#1, #2 и т. д.), видимым при наведении курсора, пересчитываемым при каждом обновлении списка. Однако это не идеально для сенсорных устройств, поэтому я буду искать отзывы пользователей для этих сценариев.
 – 
Escher
4 Ноя 2015 в 18:08
Почему бы не сделать их всегда видимыми?
 – 
Igorek
4 Ноя 2015 в 18:09
Потому что визуальное качество изображений очень важно. Задача требует, чтобы пользователи ранжировали изображения в соответствии с эстетической привлекательностью, поэтому я не могу постоянно накладывать на изображение большую «#N», потому что это испортит изображение.
 – 
Escher
4 Ноя 2015 в 18:17
Попался, как сегодня работает рейтинг? Доступно ли ранжирование, как только вы видите коллекцию изображений, или пользователю нужно щелкнуть какой-либо CTA, чтобы обновить ранжирование?
 – 
Igorek
4 Ноя 2015 в 18:22
Вот макет - он должен ответить на ваши вопросы. codepen.io/anon/pen/xwaOja (не обращайте внимания на раздутый код, он вырезан и вставлен из крупный проект)
 – 
Escher
4 Ноя 2015 в 23:39