Форум » ГИФ: материалы, проблемы » О дизайне каталогов » Ответить

О дизайне каталогов

vstepanov: Друзья, прошу у вас прощения, что отвлекаю от обсуждения горячих новостей начавшегося грибного сезона. Моя просьба сравнить дизайны каталогов займет у вас всего пару минут. Итак, история вопроса. Я сделал в новом (адаптивном) дизайне страницы трех фотокаталогов: - насекомых ( 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 Наибольшие отличия вы найдете, когда перейдете на страницу какого-то отдельного растения из каталога Ориентируясь на ваше мнение, я или оставлю для всех каталогов вариант А, или переведу их на вариант Б Заранее благодарю всех откликнувшихся

Ответов - 23, стр: 1 2 All

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SAE: vstepanov пишет: Меня поразило только одно, никто из участников проекта ГИФ не тестировал дизайн под своей учетной записью, удивляясь, что ГИФ не показывает полноразмерное фото, что заблокирована правая кнопка мыши Это называется - смотреть, как юзер. Ресурс ведь делается не для экспертов и модераторов, а для пользователей. Вечером потестю на большом экране варианты а и б, и заодно, как модератор. Вдруг ещё чего отловлю.

SAE: Потестил ещё на двух больших экранах, хотя хватило и одного. Все тесты выполнены на "Бубенчик лилиелистный". Тестить надо на максимально большом экране, устанавливая не полноэкранный режим и уменьшая ширину экрана. Итак, что имеем. Первое. Заметна дискретность перескоков 4-3-2-1. Хотелось бы больше - 5 превьюшек по горизонтали наверное хватит. Тем не менее - видно, что дискретность - это плохо. Для каких-то разрешений экрана будет сбалансировано соотношение фон/картинка, для каких-то фон будет слишком большим. Зададимся вопросом, а нельзя ли... А вдруг можно сделать дискретность побольше, или соотношение фон/картинка постоянным? Второе. Что ещё заметно. Начиная с некоторого размера по горизонтали (не могу определить, но небольшого) полезная площадь перестаёт увеличиваться, растёт только фон (это вар.А). Тоже самое и вар.Б - наращивается фон между превьюшками. Третье. Плохо то, что дизайн должен полностью адаптироваться к экрану, а этого нет. Вместо того, чтобы уменьшаться в размерах, картинки вылезают за правую границу - это в режиме одна превьюшка на ширину экрана. При этом на странице вида они послушно уменьшаются в размерах следом за размером экрана. Итоги. Наличие фона или его отсутствие ничего не меняет. Мне с фоном, даже таким мрачным, нравится больше. Но это дело вкуса. Я бы оставил фон. Далее - вар.Б чересчур растянут по горизонтали (не забывайте и о больших экранах!) - низкое качество некоторых превьюшек заметно даже на смартфонах. Итак, я голосую за вар.А и "резиновый дизайн".



полная версия страницы