7 съвета за по-добри отзивчиви фотогалерии
Всички знаем и разбираме значението на създаването на уебсайтове на отзивчива платформа, нали? Това се отнася и за изображения и фото галерии.
Няма нищо по-лошо от това да отидете на красив уебсайт и да видите изображения, които просто не се „заключват“ на място или размер правилно. Почти ви оставя да мислите, че дизайнерът е забравил нещо или сте пропуснали стъпка.
Днес ще разгледаме седем неща, които можете да направите в процеса на проектиране, за да създадете по-добри отзивчиви фотогалерии. (Тук не говорим код; това са дизайнерски процеси, които могат да помогнат на вас и на разработчика, независимо дали са едно и също или не.)
Разгледайте елементи Envato
1. Помислете за аспектните съотношения
Изживяването на работния плот може да бъде доста различно от това на мобилно устройство. Но за повечето уебсайтове разположенията на изображения са същите. Вашата задача е да се уверите, че едно и също съобщение се комуникира и в двете среди и че изображението не се губи при различни размери на екрана.
Оттук идва мисленето за съотношението на аспектите - връзката между хоризонталната и вертикалната равнина на изображението.
Обратно към този уебсайт за десктоп, готина супер тънка хоризонтална снимка може да изглежда невероятно в горната част на дизайна на уебсайта ви. Но какво се случва с това изображение на по-малкия екран в по-квадратна среда? Снимката се свива до размер, който трудно се вижда? Или половината от снимката изчезва?
Това е съотношението на аспектите. Чрез избора на хоризонтално-вертикално отношение за размерите на снимките, които са сходни, по-малко съдържание на изображение ще се загуби при смяна на устройства. Освен това ще улесните работата с разположенията на изображения и няма да се притеснявате много за качването на няколко размера за различни точки на прекъсване.
2. Размер и мащаб последователно
Грижите, които полагате за изрязването, оразмеряването и качването на снимки, могат да повлияят на вашия работен процес доста драматично.
Колко от вас просто качват снимки в CMS и се надяват на най-доброто? Да е грешен отговор.
Всяка снимка трябва да бъде изрязана и оразмерена за разположението в дизайна на уебсайта. Това гарантира, че снимките ще изглеждат така, както са предназначени и няма да стигнете до липсващи глави във върховете на снимки или елементи, оставени на една (или и на двете) страни.
Отнема малко повече време в задната част на проекта, но си заслужава усилията. (Особено ако работите с плъзгачи или галерии.)
3. Използвайте плъзгач или галерия
Използването на контейнер за изображения като плъзгач или галерия може да ви помогне по-добре да управлявате отзивчивите изображения в дизайна на уебсайта си. Особено, ако използвате добре познат и утвърден инструмент на трети страни, по-голямата част от тежкия повдигач се извършва за вас, като гарантирате, че тези елементи ще работят по предназначение.
Два от предишните съвети остават жизненоважни, дори когато използвате плъзгач или елементи от галерията; пропорции и концепции за оразмеряване и мащабиране все още се прилагат.
Не сте сигурни коя опция да използвате? Изберете за плъзгач, когато имате шепа страхотни изображения, които ще работят при по-големи размери. Това е популярна опция за горната или „геройската“ част на уеб страницата. Изберете за галерия, когато имате много изображения, които могат да направят малки, без проблеми с четенето. Това работи добре за портфейли или уебсайтове с много изображения за показване.
4. Стойте далеч от надписи, когато е възможно
Надписите могат да бъдат чудесен инструмент за добавяне на стойност към информацията в изображение, но наистина могат да се възпрепятстват как работи уебсайтът. Избягвайте ги, ако можете или измислите алтернативно решение, което не е под формата на традиционна надпис.
Големите текстови блокове, като надписи, могат да изобразяват красиво на големи екрани, но представляват големи проблеми в по-малки среди. Полученият ефект може да доведе до размирици и потенциално да накара потребителите да изоставят вашия сайт. (И с толкова много трафик, идващ от мобилни устройства за повечето уебсайтове, това може да бъде катастрофално.)
5. Бъдете внимателни, когато смесвате видео и изображения
Нека бъдем ясни: напълно приемливо е да имате елементи на видео и изображения на вашия уебсайт. Сигурно е нещо, което трябва да направите.
Но не смесвайте видео и изображения в едни и същи елементи на дизайна, като поставянето на видео и изображения в същия плъзгач. Понякога ще имате късмет и това ще работи като чар. Друг път ще останете с празни кутии на определени устройства, които просто изглеждат странно.
Най-добрият вариант е да се даде на всеки различен тип елемент свое пространство в дизайна. Това се отнася за почти всеки елемент на дизайн, но по-специално за изображения и видео.
6. Изрежете ненужните елементи
Един от най-големите проблеми при плъзгачите и галериите е, че твърде често дизайнерът поставя твърде много боклуци вътре в контейнера. Има стрелки за навигация, бутони за навигация, текст, призиви за действие и списъкът продължава.
По принцип потребителите разбират как да взаимодействат с плъзгач. Освен ако не правите нещо напълно от стената, нямате нужда от два слоя навигация, която показва на потребителите какво да правят. Един ред бутони или стрелки е предостатъчно (ако изобщо се нуждаете от тях).
Включете само елементи, с които потребителите ще трябва да взаимодействат. Ако целта на галерията или плъзгача е да накара потребителя да щракне / докосне призив за действие, това трябва да е единствената опция на снимката. Не го усложнявай. Не предоставяйте твърде много опции. Всъщност може да помогне на вашите проценти на конверсия.
7. Използвайте само висококачествени изображения
Това почти не означава, но все пак се случва твърде често. Ако нямате звездно изображение, изобщо не използвайте изображение. Висококачествените изображения с висока разделителна способност са по-важни от всякога. Потребителите няма да губят време да гледат уебсайт с пикселирани или лоши изображения (и те вероятно няма да ви се доверят, ако качеството е по-ниско).
Голям брой потребители разглеждат дизайна на уебсайта ви, като използват устройства с екрани с висока разделителна способност; очакват визуални визуализации. Трябва да доставите.
Някои формати на изображения се променят, за да отговорят на тези нужди с висока разделителна способност, докато предоставят повече компресирани изображения. Разбирайте се във формати - Google Developers е чудесно място за начало - да знаете какви разделителни раздели на екрана се използват най-общо и да придобиете навика да запазвате файлове по начин, който може да бъде предоставен най-добре на потребителите.
заключение
Всички искаме да създадем уебсайтове, с които потребителите чувстват нужда да си взаимодействат. Силните изображения са ключова част от това уравнение. Също толкова важно е да се представят добре, независимо от устройството.
Планирайте за пространства с изображения, които ще работят на различни размери на устройства, когато сте на етапи на телена рамка на проект за дизайн на уебсайт. Може да откриете, че има някои възможности за реализация, особено по отношение на формата на изображението, но в дългосрочен план вземането на тези решения рано и създаването на тази последователност ще се възползва от дизайна на вашия сайт в дългосрочен план.
