Отправлено: 27.04.17 08:14. Заголовок: О дизайне каталогов

Друзья,
прошу у вас прощения, что отвлекаю от обсуждения горячих новостей начавшегося грибного сезона.
Моя просьба сравнить дизайны каталогов займет у вас всего пару минут.
Итак, история вопроса.
Я сделал в новом (адаптивном) дизайне страницы трех фотокаталогов:
- насекомых ( http://mycoweb.ru/GIF/catalog/insect_catalog.php )
- птиц ( http://mycoweb.ru/GIF/catalog/bird_catalog.php )
- растений ( http://mycoweb.ru/GIF/catalog/plant_catalog.php )

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


Я сам провел первичное тестирование и отдал каталоги на пробу Игорю (Rannar), чтобы он оценил работу страниц при его медленном интернете.
Все оказалось не так уж и плохо, но Игорь высказал замечание совсем другого рода - ему хотелось, чтобы страницы каталога занимала весь экран монитора

На скорую руку я сделал вариант фотокаталога растений, где информация занимает полный экран (см. http://mycoweb.ru/GIF/catalog/plant_catalog_fs.php).

Пожалуйста, найдите пару минут, посмотрите странички (ссылки ниже) и выскажитесь, на каком дизайне вам удобнее смотреть информацию каталогов:
- там, где информация занимает 80% большого экрана (вариант А)
http://mycoweb.ru/GIF/catalog/plant_catalog.php
- или где информация занимает весь экран большого монитора (вариант Б)
http://mycoweb.ru/GIF/catalog/plant_catalog_fs.php

Наибольшие отличия вы найдете, когда перейдете на страницу какого-то отдельного растения из каталога

Ориентируясь на ваше мнение, я или оставлю для всех каталогов вариант А, или переведу их на вариант Б

Заранее благодарю всех откликнувшихся

 Отправлено: 27.04.17 09:16. Заголовок: Субъективно, мне бол..

Субъективно, мне больше нравится вариант Б.
Смотрел с ноута.

 Отправлено: 27.04.17 09:30. Заголовок: erlin Сергей, спаси..

erlin
Сергей, спасибо. Итак, счет между А и Б
1:2

 Отправлено: 27.04.17 09:59. Заголовок: На экране с разрешен..

На экране с разрешением Full HD лично мне визуально больше нравится вариант А, где информация занимает 80% большого экрана. Правда, на мой взгляд, не совсем удачный (тусклый и невыразительный) фон.
При полноэкранном размере (вариант Б), между «превьюшками» фотографий много пустого пространства, что не есть хорошо.

 Отправлено: 27.04.17 10:08. Заголовок: theria Владимир, сп..

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

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

Пока счет оставлю прежним

 Отправлено: 27.04.17 10:51. Заголовок: На экране ноутбука с..

На экране ноутбука страницы каталога выглядят несколько иначе, чем на Full HD мониторе Владимира. Вот варианты А и Б:



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

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



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

 Отправлено: 27.04.17 11:06. Заголовок: Rannar пишет: В обо..

Rannar пишет:

цитата:

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

Игорь, спасибо. Дизайн потому и называется адаптивным, что страница сама "определяет" (адаптируется), сколько превьюшек надо поместить в линию, чтобы заполнить ширину экрана. Если ширина экрана более 1200 пикселов (FULL-HD монитор у Владимира), то в линию программа ставит 4 превью (можно сделать, чтобы ставила 5). Если у ноутбука ширина экрана где-то в районе 800 пикселов - две превьюшки (можно сделать, чтобы ставила 3), а на узких экранах смартфонов - по одной, т.е превью будут расположены в виде вертикальной ленты

 Отправлено: 27.04.17 12:34. Заголовок: vstepanov пишет: Е..

vstepanov пишет:

цитата:

Если ширина экрана более 1200 пикселов (FULL-HD монитор у Владимира), то в линию программа ставит 4 превью (можно сделать, чтобы ставила 5). Если у ноутбука ширина экрана где-то в районе 800 пикселов - две превьюшки

Да, но ведь у моего ноутбука разрешение экрана 1366 х 768 пикселов.

 Отправлено: 27.04.17 12:54. Заголовок: Rannar пишет: а, но..

Rannar пишет:

цитата:

а, но ведь у моего ноутбука разрешение экрана 1366 х 768 пикселов.

Игорь, я проверил: при масштабе 100% перескок с дизайна с 2-мя превью в строке на дизайн с 4-мя превью проходит при ширине рабочей области порядка 1500 пикселов
Чтобы получить дизайн с 4-мя превью на рабочей области, как у Вас, можно нажать комбинацию клавиш Ctrl и знак "минус" (изменить масштаб)
Кроме того, если всем понравится вариант Б, то попробую программно сделать более плавный переход между количеством превью в строке, т.е.
4--> 3 --> 2 ---> 1, а не 4--> 2 --> 1 как сейчас

 Отправлено: 29.04.17 15:51. Заголовок: Мне в принципе безра..

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

 Отправлено: 29.04.17 21:31. Заголовок: На моем ноуте с боль..

На моем ноуте с большим экраном лучше смотрится вариант А. Если Б, то хотелось бы 5 превью в строке.
На странице конкретного растения оба варианте хороши. Но мне все-таки больше нравится А.

 Отправлено: 30.04.17 11:57. Заголовок: Пока начну с маленьк..

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

 Отправлено: 30.04.17 11:59. Заголовок: Да, ещё пожелание. О..

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

 Отправлено: 30.04.17 12:04. Заголовок: Э-э-м... А качество ..

Э-э-м... А качество превьюшек?
Можно на интернет кивнуть, но он не медленный...

 Отправлено: 30.04.17 17:45. Заголовок: vstepanov пишет: Кр..

vstepanov пишет:

цитата:

Кроме того, если всем понравится вариант Б, то попробую программно сделать более плавный переход между количеством превью в строке, т.е. 4--> 3 --> 2 ---> 1, а не 4--> 2 --> 1 как сейчас

Хорошая идея . А, в остальном вариант Б нравится мне больше.

 Отправлено: 01.05.17 22:35. Заголовок: Ноут с экраном средн..

Ноут с экраном средних размеров.
Не вижу существенной разницы между вариантами. По 4 колонки и там, и там.
У вар.Б колонки становятся несколько шире и некоторые фото не выезжают за границу (правую).

Появилось (заметил на ноуте) ещё одно замечание - если фото вертикальная, но при её просмотре справа почти всегда остаётся пустое поле. При этом фото отбита влево а текст отцентрирован.

Впереди тестирование на большом экране.

 Отправлено: 01.05.17 22:44. Заголовок: Да. Адонис сибирский..

Да. Адонис сибирский (Adonis sibirica)
Характеристики вида:
стебель прямостоячий
цвет - 2-5 см
цвет - 5 см и более
цвет - желтые

 Отправлено: 01.05.17 22:51. Заголовок: Юрий С. пишет: а не..

Юрий С. пишет:

цитата:

а не мелкую копию (в условиях запрета правой клавиши мыши).

Что-то запрет правой кнопки мыши какой-то странный. Не очень-то он мешает копированию (даже без применения спецсредств).
Текст копируется, и фото вместе с ним.

 Отправлено: 02.05.17 09:49. Заголовок: Еще раз спасибо боль..

Еще раз спасибо большое всем, кто протестировал дизайн и высказал свое мнение.
Меня поразило только одно, никто из участников проекта ГИФ не тестировал дизайн под своей учетной записью, удивляясь,
что ГИФ не показывает полноразмерное фото, что заблокирована правая кнопка мыши
Откуда ГИФу "знать" , что на другом конце интернет-соединения смотрит каталог Юрий Григорьевич Семенов - участник с правами "Эксперт", или Андрей Смирнов - модератор ГИФа

Участникам ГИФ показывает, как правило, много другой информации, не говоря уж о полноразмерных фотографиях

Скорее всего, я приведу дизайн каталогов к варианту в полный экран (вариант Б)

 Отправлено: 02.05.17 10:29. Заголовок: vstepanov пишет: Ме..

vstepanov пишет:

цитата:

Меня поразило только одно, никто из участников проекта ГИФ не тестировал дизайн под своей учетной записью, удивляясь, что ГИФ не показывает полноразмерное фото, что заблокирована правая кнопка мыши

Это называется - смотреть, как юзер. Ресурс ведь делается не для экспертов и модераторов, а для пользователей.

Вечером потестю на большом экране варианты а и б, и заодно, как модератор. Вдруг ещё чего отловлю.

 Отправлено: 02.05.17 22:25. Заголовок: Потестил ещё на двух..

Потестил ещё на двух больших экранах, хотя хватило и одного.
Все тесты выполнены на "Бубенчик лилиелистный".

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

Итак, что имеем.
Первое. Заметна дискретность перескоков 4-3-2-1. Хотелось бы больше - 5 превьюшек по горизонтали наверное хватит.
Тем не менее - видно, что дискретность - это плохо.
Для каких-то разрешений экрана будет сбалансировано соотношение фон/картинка, для каких-то фон будет слишком большим.
Зададимся вопросом, а нельзя ли... А вдруг можно сделать дискретность побольше, или соотношение фон/картинка постоянным?

Второе. Что ещё заметно. Начиная с некоторого размера по горизонтали (не могу определить, но небольшого) полезная площадь перестаёт увеличиваться, растёт только фон (это вар.А).
Тоже самое и вар.Б - наращивается фон между превьюшками.

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

Итоги.
Наличие фона или его отсутствие ничего не меняет. Мне с фоном, даже таким мрачным, нравится больше. Но это дело вкуса. Я бы оставил фон.
Далее - вар.Б чересчур растянут по горизонтали (не забывайте и о больших экранах!) - низкое качество некоторых превьюшек заметно даже на смартфонах.

Итак, я голосую за вар.А и "резиновый дизайн".

 Отправлено: 03.05.17 12:48. Заголовок: SAE пишет: Итак, я ..

SAE пишет:

цитата:

Итак, я голосую за вар.А и "резиновый дизайн".

Андрей, спасибо за тесты и замечания.
Одно сейчас мешает срочной доработке - начался сезон походов в леса

 Отправлено: 07.07.17 09:47. Заголовок: Пытался зайти на ГИФ..

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

 Отправлено: 13.07.17 09:22. Заголовок: erlin пишет: удивлё..

erlin пишет:

цитата:

удивлён стройным рядам превьюшек

Странно, у меня как выбивались 16:9 так и выбиваются за рамку...
К примеру, Навозник волосистоногий и навознокучевый...