 |
Основной акцент на фон или на изображение?
|
|
|
|
Фото: http://www.tacospillet.no/?lang=en
Сайт Tacospillet использует первый тип, с заполнением заднего фона и картинку на переднем плане с текстурой. Умеренная яркость цветов успокаивают сайт и не перегружают его. Текстура также придает графике уникальный внешний вид, выделяя его среди других сайтов.
Фото: http:// joyridetacohouse.com/
Забавно, что другой сайт о тако Joyride Taco House показывает нам второй тип с акцентом на текстуру. Тонкая тень над крупным заголовком добавляет немного разграничения при помощи глубины, в то время как сине-зеленые линии логотипа привлекают больше внимания с самого начала. Использование текстур – это легко и забавно, что, возможно, отражает атмосферу в самом ресторане.
Лучшие примеры реализации
Привлекательность тенденции ярких цветов в том, что ее можно использовать многими разными способами в разных стилях и ко множеству различных элементов. С их разнообразием и универсальностью, сегодняшние модели с яркими цветами вытесняют «типовой» вид готовых к использованию шаблонов сайтов, которые были ранее популярны.
То, что начиналось как тренд только для творческих сайтов, как портфолио художников или дизайнеров, теперь распространилось среди более массовых тенденций и в более традиционных сферах, таких как новостные сайты или сайты прогноза погоды. Он даже просочился в электронную коммерцию, область деятельности, которая исторически известна своей консервативностью по поводу внешнего вида. Применяя эти яркие цвета, они теряют клеймо глупости и их начинают воспринимать больше как профессионалов.
Фото: http://www.masterdynamic.com/
Фото: http://airism.graphitedigital.com/#home
|
|
|
Давайте посмотрим на лучшие примеры реализации, которые только выиграли от использования ярких цветов в трех разных областях.
1. Выделение определенного текста
Свойства ярких цветов привлекать внимание позволяют использовать их для выделения определенных слов внутри текстовых блоков – особенно на темном фоне. Это придает естественный акцент и влияет на то, как читается сообщение.
Фото: https://fortheloveof.org.au/#/
For the Love of the Reef, акцентирует внимание только на слове Love и только при его появлении во второй раз. Это не просто усиливает влияние этого слова и его значение, но также помогает узнать бренд, т.к. “love” – это одно из ключевых слов в названии компании.
2. Кнопки/Элементы UI
Так же как слова, яркий цвет может акцентировать внимание на кнопки или другие элементы, использующиеся в интерфейсе, как для привлечения внимания, так и для облегчения использования.
Фото: http://essentials.mijlo.com/
Ярко-оранжевая кнопка на сайте Mijlo, который представлен выше, выделяется на простом фоне и таком же простом изображении товара. Комбинирование сдержанных цветов фона и товара вместе приводят к тому, что нужно сделать кнопку яркой, которая будет выглядеть более привлекательно.
3. Навигация
Сила организации материалов с использованием цвета была известна давно и ее можно увидеть в цветных закладках в книгах или при организации картотек в ящиках. Его применение в веб навигации кажется логическим развитием, так как разными цветами легко разделить разные секции. Это станет особенно полезно для сайтов со сложным контентом, где каждое усилие должно быть направлено на упрощение навигации.
Например, Colored Lines на примере ниже, использует спектры радуги для разделения восьми отдельных страниц их сайта. Это не только упрощает без того объемную навигационную систему, а также представляет идентификацию брэнда, с учетом названия компании.
|
|
|
Фото: http://colouredlines.com.au/
Фото: Frame Collections
В parallax-scrolling эффектах, цвета также играют важную роль в навигации. Так как отличия между страницами/экранами не всегда ясны на одностраничниках, которые нужно долго листать, цвет – это самый простой способ разделить секции. Это создает больше структурированности в каждом неограниченном формате, который способствуют эффекту повествования и позволяет создать различные вариации при помощи различных кнопок-переходов.
Фото: Vimeo
Взгляд вне времени
Цвет всегда будет присутствовать в реализации веб-дизайна, хотя, то что касается популярности ярких цветов, здесь будут подъёмы и спуски по мере изменения тренда. Поскольку такие техники обычно цикличны, мы, скорее всего, увидим возвращение каких-нибудь более старых техник, которые снова оживут. Например, возможно, градиенты вернутся и вдохнут новую жизнь в тренд ярких цветов.
При помощи только одного ярко голубого цвета, Zample+me использует градиентный эффект для своего фона без нанесения падающих теней. Этот простой стиль хорошо сочетается с минималистическим макетом сайта и атрибутами плоского дизайна в виде интерактивных иконок. На этом сайте мы можем увидеть развитие тренда, а не угасание.
Фото: http://zample.me/do-you-floss-every-day
Фото: http://www.piccsy.com/everything-design/
Выделяющийся цвет хорошо сочетается с выделяющимся шрифтом текстовых надписей, который обсуждался в предыдущей главе. Как вы можете увидеть на примере сайта Piccsy Playground выше, эти две техники усиливают друг друга, чтобы донести сообщение, каким бы оно ни было. Это выглядит настолько насыщенно, что надо быть осторожным, чтобы не отвлекать другими элементами, претендующими на внимание, от единственного сообщения.
Другим трендом, который, как мы видим, становится все более и более популярным – это наложение цвета – фильтрация картинки через цветные «линзы». Это позволяет вам вставить любую картинку с усилением атрибута любым цветом. Например, вроде бы печальная фотография, может стать более радостной, если использовать желтый фильтр.
|
|
|
Фото: http://focuslabllc.com/
Фото: http://creationsnamale.com/
Для более тщательного анализа теории цвета в веб-дизайне - в том числе эмоциональную и психологическую составляющую каждого цвета, наиболее популярных вариантов для цветовых схем, а также примеры использования цвета от ведущих компаний - скачайте бесплатно нашу книгу Теория цвета в веб-дизайне (C olor Theory in Web UI Design.)
Постройте высококачественные прототипы в UXPin
10 Бесплатных ресурсов и инструментов
1. Цветовая гамма учебник для начинающих – Учебник для начинающих по дизайну для интерьеров, который послужит отличным введением в теорию цвета.
2. ColourLovers – Мировое сообщество, демонстрирующее их собственные цветовые палитры и обсуждающее теорию цвета во всех средах.
3. Как использовать CSS Hover эффекты в цвете – Учебное пособие для создания изменяющегося цвета состояния для hover.
4. Adobe Color CC – прекрасный инструмент для экспериментирования с разными тенями и разными схемами. Простое изменение одного цвета, и инструмент покажет другие подходящие цвета или оттенки.
5. “Инструкция по применению теории цветов для Web дизайнеров” – Учебник + руководство по теории цвета, затрагивающие все от важности тонов до совместимости цветов.
6. Tint UI – Собиратель цвета для копирования шестнадцатеричных кодов. Позволяет просматривать разные платформы (Material Design, iOS, и т.д.), бренды (Twitter, Firefox, пр..), или текущие тренды.
7. Текст на фоне – Простой, но полезный инструмент для предпросмотра как определенный цветной текст смотрится на определенном фоне.
8. Цветовые модели года – Цвет, эффективный для любой индустрии, предложение и анализ выбора цвета, для определения лучшего, каждый год.
9. Как добавить оттеночный фильтр в Photoshop – Собственное руководство Adobe для создания наложения цвета для изображений.
10. Color Website Design Gallery from Awwwards – Лучшие сайты победители Awwward за их использование цвета.
Захватывающая фотография
Потрясающие фотографии – это техника, которая остается вне времени, особенно когда браузеры улучшили возможности визуализации и становятся более доступными HD мониторы. В этой главе мы посмотрим на веб-фотографии как тенденцию, различные доступные варианты и какие из них будут лучше для вас.
|
|
|
Фото: Jawbone
Фото: http://nuabikes.com/#/home
Фото: Blackhouse
Тенденции в современной Web-фотографии
Не только искусство самой фотографии следует определенным тенденциям каждые несколько лет, но и то, как она применяется в веб-дизайне, тоже меняется в соответствии изменяющимся вкусам. Например, те изображения с улыбающимися моделями, глядящими прямо в камеру, часто использовались в 1990-е годы, но теперь они выглядят смешно и устарели.
Давайте рассмотрим четыре достаточно устойчивые тенденции веб-фотографий.
1. Огромные (Hero) картинки
Полноэкранные изображения, как правило, с крупными заголовками (hero header), имеют большую популярность, и это, кажется, не пройдет в ближайшее время. Их ценность заключается в создании захватывающего интерфейса сразу, увлекая пользователей при помощи фотографии, которая захватывает все внимание прежде, чем их взгляд привлечет главный заголовок и/или кнопка-ссылка.
Фото: http://www.cookiesound.com/
Выше, Cookiesound, громко говорит о себе благодаря одному единственному фото. Сельская природа, без суеты и суматохи и, конечно же, длинная открыта дорога: это все образы - и чувства – это то, что блог путешественника хотел бы, чтобы с ним ассоциировалось. Размер картинки просто усиливает эффект, так как что-нибудь маленькое ослабило бы его.
2. Объекты в естественной среде
Показывать объекты в контексте неплохая стратегия для продаж, учитывая, что такие фото демонстрируют то, как применяется товар, увеличивают показатели эффективности рекламы и конверсии. Они всегда будут популярной стратегией для сайтов электронной коммерции, но те, кто делает это лучше всех, придает изображению художественный поворот (как экстремально крупный план или непривычный угол – фронтальный план кажется слишком неестественным). Поскольку этот тренд является популярным, избегайте заезженных фото, которые используются слишком часто.
Фото: https://edwin-europe.com/
Бренд одежды Edwin избегает затертой темы улыбающихся детей-моделей в одежде его марки и использует более реалистичную и художественную фотографию, чтобы показать их товар в действии. Крупный план заднего фона показывает, какая одета футболка на мальчике и ситуацию, которая бы могла быть – дети играют в бейсбол.
|
|
|
При помощи увеличенной футболки на переднем плане и отсутствии заголовка, отвлекающего от нее внимание, товар представлен креативно и эффективно.
3. Черное и белое
Черно-белые фотографии являются показателем профессионализма и изысканности. Если это то, к чему стремится ваш сайт, есть несколько лучших вариантов. Чтобы увидеть, что мы имеем в виду, полистайте галерею дизайнера Криса Спунера, которая представляет 20 черно-белых сайтов.
Фото: http://goltzgroup.com/
Сайт для Goltz Group совмещает две вышеуказанные стратегии с черным и белым, чтобы слегка добавить утонченности сайту. Как вы помните с последней главы о цвете, фон в виде черно-белой фотографии усиливает цветные акценты, как вы можете увидеть выше.
4. Наложение цвета
Наложение цвета может преобразовать изображение, чтобы оно подходило больше определенным целям, как определение бренда (используя характерный цвет бренда) или создать эмоциональную окраску (например, наложение красного может придать спокойной фотографии ощущение напряженности).
Также, как и черно-белый фон, наложение цвета может усилить значение цветных акцентов. Хотя, это работает хорошо только если цвета выбраны правильно, т.е. правильные контрастные пары.
Если вам интересно, здесь есть учебные пособия по их созданию, в CSS или в Photoshop.
Фото: http://www.knucklesindustries.com/
Тонированный фон для сайта Knuckles Industries создает оригинальную визуальную иерархию, которая высвечивает текст заголовка и навигационное меню вверху, несмотря на захватывающее внимание изображение.
На более неуловимом уровне восприятия, цвет наложения создает ощущение сырого, еще не завершенного, которое хорошо подходит для цеха по обработке металла. Винтажность имеет важное значение, поскольку погружает пользователя в старый мир мастерства и ручного производства.
Варианты Web фотографии
В зависимости от того, откуда пришла ваша фотография, выделяют 4 варианта:
• Пользовательские фото – Фотографии специально для вашего сайта, сделанные или вами, или кем-то из вашей команды, или кем-то, кого вы наняли. Они адаптированы к вашему сайту и по теме, и по содержанию.
• Стоковые фотографии – Это готовые фотографии, за которые вы платите, чтобы использовать. Если вы их умело выбираете, то можете преподнести их так, будто они сделаны для вас под заказ. Но так как любой их может купить, будьте осторожны, чтобы ни вышло, что одни и те же фото содержатся на слишком многих других сайтах.
• Бесплатные стоковые фотографии – Такой тип фотографий, которые разрешены для свободного использования. Выбор фото несколько ограничен, и часто возникают ограничения на коммерческое использование. Ты получаешь лишь то, за что платишь.
• Полупользовательские стоковые фотографии – Такие фото - один из новых и многообещающих вариантов для веб-фотографии, это фото наборы, подобные существующим фотографиям с настраиваемыми параметрами. Например, изображение стола, где вы можете расставить элементы, как вам нравится.
Каждый вариант имеет свои преимущества и недостатки, и разные ситуации могут потребовать различных стратегий.
Пользовательская фотография
Мы можем горячо обсуждать какую же выбрать фотографию, пользовательскую или сток – и иногда смешивать и то, и другое. Здесь мы объясним факторы, которые нужно учитывать для каждого из них.
Если говорить просто, пользовательская фотография практически всегда лучше (и предпочтительнее ее использовать для физических товаров), хотя она может быть не всегда доступна, из-за ограниченности времени и ресурсов. Используя пользовательскую фотографию, вы всегда держите под контролем, что выражают ваши фотографии и насколько они подходят вашему бренду и индивидуальным особенностям.
Фото: http://woodbuds.com/
Основным недостатком является время и деньги на их создание. Главный временной интервал может быть около нескольких недель, которые проходят от предложения до конечного продукта – и дольше, если вы нанимаете нового фотографа.
Профессиональные фотографы всегда предпочтительнее, но делая это самостоятельно или поручая кому-нибудь из своей команды, вы сможете получить некоторую мороку, если уровень мастерства не совсем соответствующий. В другом случае, дизайнер и фотограф должны понимать художественное направление и стоящие перед ними цели до начала сотрудничества.
Фото: https://www.purefixcycles.com/
Фото: http://antonandirene.com/
Сильные стороны:
• контроль над процессом и проектом
• соответствие вашим потребностям
• изображения являются собственностью компании
• долгосрочные инвестиции, так как фотографии могут использоваться снова и снова
Слабые стороны:
• дорого стоят (фотограф, оборудование, настройка съемки, пр.)
• настройка съемки может быть слишком сложна
• результаты могут не соответствовать ожиданиям
• возможно, окажется трудно работать с привлеченными со стороны фотографами
Stock Фотография
Стоковая фотография может иметь плохую репутацию (возможно, из-за картинок как эти), но в последние годы она превратились во вполне жизнеспособную и нужную индустрию. Сегодняшние стоковые фотографии покрывают широкий сегмент, и хорошие фотографии отходят от той репутации, за которую они часто становятся известными. Посмотрите на перечень 50 любимых сток фотографий сайтов NuSchool организованные по качеству, чтобы увидеть различия.
Фото: https://www.kissmetrics.com/
Поскольку стокфотография дешевле и получить ее легче, чем пользовательскую фотографию, она все же требует некоторых усилий – а именно поиск подходящей картинки. Если вы направите ваше время и опыт на поиск среди сотен картинок, вы можете обнаружить, что она может быть такой же эффективной, как и пользовательская фотография.
Фото: http://microsoft.com
Сильные стороны:
• недорогие (или даже бесплатные фото)
• быстрая готовность (изображения доступны сразу после загрузки)
• иногда поиск вдохновляет на новые идеи
Слабые стороны:
• доступны любому другому, поэтому вы можете обнаружить такую же картинку где-нибудь на другом сайте
• довольно трудно найти качественную фотографию
• трудно согласовать между собой, если используется более, чем одна фотография
Есть способы смягчить риски использования стокфотографии. Для начала вы захотите проверить, что лицензия вам подходит. Некоторые royalty-free фото не допускают модификации, а использование картинок из поиска Google по изображениям обычно незаконно для коммерческих сайтов. Подробнее прочитайте и узнайте об отличиях в лицензиях на фото.
Редактирование эффектов, такое как обрезка, ротация, или наложение цвета может эффективно добавить достаточное количество индивидуальности, чтобы избавиться от шаблонного ощущения типовых фото. Композиция кадра при помощи инструмента обрезки может сделать выделяющимися разные элементы, не говоря уже о том, что можно создать изображение, отличное от тех, которые уже где-либо используются.
Комбинирование пользовательских и сток фотографий
Вы можете найти лучшее из обоих направлений и сочетать их вместе. Основная мысль заключается в том, что, если вы подбираете по правильной схеме, сток фотографии будут казаться пользовательскими. Посетители не будут тратить слишком много времени, думая о том, откуда же эти фотографии.
Фото: Squarespace
Фишка в том, что можно смешивать стокфотографии с изображениями, которые должны быть пользовательскими – например, изображение товара или логотип. Когда вы выбираете сток фотографии, постарайтесь не использовать слишком общие: выбирайте, основываясь на содержании по теме или те, которые выгодно отличают сайт от других.
Или вы даже можете связать вместе некоторые непохожие фотографии с несколькими своими, которые вместе образуют схему и стиль.
Мысли вне времени
Фото является краеугольным камнем веб дизайна: до тех пор, пока развитие технологий не позволят полностью заменить их на видео – и даже тогда, фото могут все еще существовать благодаря своему ретро виду. В ближайшем будущем, тренды, которые мы обсуждали выше, изменят направление и будут следовать новым техникам:
1. Пользовательские фотографии меньшего размера
Возможно, как альтернатива тенденции больших (hero) картинок, или возможно, чтобы согласоваться с популярностью карточек, фото меньшего размера являются трендом, который набирает обороты в ближайшем будущем. Картинки меньшего размера остаются заметными и позволяют предоставить больше контента на странице сайта.
Фото: http://theportraitmachine.co.uk/
The Portrait Machine – сайт для найма фотографа портретной художественной съемки событий – использует слайды из маленьких картинок, чтобы проиллюстрировать, что она привнесет мероприятию, показывая свои примеры работ. Так как ее стиль немного экспериментальный, то чем больше фотографий, тем более ясно становится понятным, почему людям стоит ее нанять.
2. Манипуляции с фото
Доступность лучшего оборудования для редактирования фото реально означает лучшую обработку фото. Тогда как такие простые техники, как цветовые наложения, все еще привлекательны в основном, более сложные тенденции также станут более популярными, так как все больше людей понимают, как этим пользоваться. Это может добавить интереса к стоковым фотографиям, даже если речь идет лишь о добавлении логотипа.
Фото: https://beth-emily.com/
Beth-Emily не позволяет минимализму остановить ее творческие манипуляции с фото. Немного графики позади полки было создано для того, чтобы добавить чуть-чуть уникальности изображению.
3. В паре с пользовательской фотографией
Если вы помните из шестой главы, пользовательская фотография может усилить или даже без посторонней помощи создать индивидуальность вашего бренда. Когда эффекты соединены вместе, они достаточно сильно работают.
Фото: http://metaversemodsquad.com/
Просто посмотрите на Metaverse Mod Squad – непосредственная картинка сообщает очень много об индивидуальности бренда. Искусственно-небрежное начертание надписи придает аспект мятежности фотографии банды скутеристов, и наоборот. Сочетание специального шрифта с пользовательским фото помогает определить, как пользователь будет интерпретировать каждый из них.
Создайте прототип высокого качества в UXPin
10 бесплатных ресурсов и инструментов
1. “10 ошибок, которых нужно избегать, когда используете сток фотографию” – Статья Design Shack, предупреждающая о часто допускаемых ошибках со стокфотографией.
2. TinEye Reverse Image Search – Прекрасный инструмент для сток фотографий, который выявляет все размещения фото в интернете.
3. “Полное руководство для прекрасной фотографии, сделанной самостоятельно“ – Руководство для начинающих для получения своей собственной веб фотографии.
4. StockPhotoRights.com FAQ – Все популярные площадки для обсуждений вокруг стокфотографий.
5. “16 мест, чтобы найти лучшие бесплатные сток фотографии” – Список Designmodo маленьких, но бесплатных вебсайтов, которые предлагают стоковые фотографии.
6. Время и стоимость профессионального фотографа – Профессиональный фотограф сбивает цену, если вы можете подождать, когда нанимаете фрилансера.
7. “Стоит ли вам использовать стоковые бесплатные фотографии для ваших постов в блогах? – пост из CoSchedule Blog, в котором обсуждается преимущества и недостатки стоковой фотографии, и какую из них лучше использовать в вашей конкретной ситуации.
8. Creative Commons – Библиотека открытого ресурса фотографий (также как музыки или видео), с лицензией, разрешающей модификацию.
9. “Наиболее важные 10 причин найма профессионального фотографа” – Rob Korb Photography перечисляет некоторые убедительные причины нанять эксперта вместо того, чтобы делать это самому.
10. О чем нужно спросить, нанимая фотографа – Пособие для начинающих, как найти правильную фотографию, написанная Professional Photographers of America.
Длинная прокрутка
Представленные the domination of mobile и при поддержке тренда карточного интерфейса, сайт с длинной прокруткой быстро набирает популярность.
Для того, чтобы объяснить популярность длинной прокрутки в нескольких словах, мы можем посмотреть на все увеличивающееся использование экранов мобильных телефонов. Просто сопоставьте: чем меньше экран, тем более длинная прокрутка. Этот принцип интерактивного дизайна оживляет длинные и бесконечные прокрутки сайта, заставляя дизайнеров искать больше креативности в способах повествования их сайтов.
Фото: Jack Daniels
Но мобильные экраны сами по себе не могут объяснить новую волну успеха длинной прокрутки, только лишь причины ее возникновения. Техника длинной прокрутки включает гораздо больше, чем несколько различных элементов дизайна, и в этой главе мы обсудим, чего они все стоят.
Короткая история длинной прокрутки
Сайты с длинной прокруткой обычно имеют одну слишком длинную домашнюю страницу, которая ведет к другой странице, поменьше, или весь сайт может просто состоять из одной длинной страницы.
Дизайнеры фокусируются на повествовании с умными тактиками и такими методами, как parallax scrolling или Ajax jQuery, которые позволяют сделать больше динамической анимации и взаимодействия.
Фото: Apple
В начале появления интернета прокрутка считалась табу. Миф, что пользователям не нравится прокрутка был, возможно, как устаревшее утверждение, которое являлось пережитком печатной индустрии, предписанием печатать «выше сгиба», когда газетам было необходимо привлечь внимание своих читателей при помощи той верхней области главной страницы, что была видна до сгиба. Это имеет смысл и для вебсайтов сейчас – что бы ни было на первом экране – это то, что сформирует самое первое впечатление о сайте.
Кроме того, старые сайты, как и полиграфия, были в основном текстом, который совсем не так интересен в виде длинного сайт с прокруткой. Однако, когда развитие Javascript / CSS / HTML5 открыло больше возможностей для сайтов, сайты, как Facebook и Twitter сломали лед, дизайнеры обнаружили, что пользователи на самом деле не против прокрутки. В самом деле, проведенные исследования, подтвердили это: они обнаружили, что 66% внимания пользователя на обычной странице было потрачено на пространство «ниже линии».
Теперь, с доступной высокой скоростью интернета, много где прокрутка кажется уместной, даже больше чем раньше, и сайты социальных сетей применяют прокрутку (прокрутка – это наилучший способ, чтобы показать их обширный, практически бесконечный, созданный пользователем контент). Учитывая все динамические просторы вебдизайна сегодня, длинная прокрутка может действовать как главный элемент, который будет сегодня уместен везде.
Влияние размера экрана
Размер экрана ограничивает количество информации, которое может разместится «в верхней части страницы», заставляя дизайнеров выбирать между прокруткой или уменьшением всех элементов, чтобы поместить их все на экран. К счастью, сенсорное управление на мобильных устройствах делает прокрутку понятной и приятной.
Популярность длинной прокрутки даже на руку для производителей мобильных устройств за счет того, что позволяет им еще больше уменьшить размеры экранов, чем раньше.
Фото: Shinya Suzuki. Creative Commons.
Амбициозный Apple Watch основывается на прокрутке, как видно по созданной для этой цели поверхности. Основные принципы разработки библиотеки Apple Watch (Apple Watch Developer Library guidelines) сами утверждают: «Сделайте как можно меньше общее количество страниц, чтобы упростить навигацию».
Даже на не мобильных устройствах экраны уменьшаются – просто посмотрите на новый 12-дюймовый дисплей 12-inch Retina display для MacBook. Для ноутбуков тенденция ведет к тому, чтобы сделать их меньше и легче, так что, если вы учтете тот факт, что сейчас они имеют сенсорное управление, вы увидите насколько больше преимуществ у длинной прокрутки предоставляется пользователям в целом.
Повествование
Длинная прокрутка дает много возможностей для повествования, которому не подходит постраничная навигация. Вот почему Hoa Loranger из Nielsen Norman Group утверждает, что эта тактика подходит сайтам с открытым концом, направленных скорее на повествование, чем на пошаговое достижение цели, как например сайты электронной коммерции.
Фото: Frame Collections
Сайты с длинной прокруткой, как Frame Collections “One to See, One to Kill” выше, создают линейную структуру, которая позволяет насыщенным историям разворачиваться естественным путем. Разные макеты и анимации задают ритм, который заставляет пользователя интересоваться «а что же произойдет дальше». Если все сделано правильно, это создает захватывающие ощущения и пользователь не хочет уходить.
1. Преимущества и недостатки
Длинная прокрутка не безупречный метод, даже имеет ограничения для мобильных устройств. Давайте взглянем на ее преимущества и недостатки.
Преимущества
• Позволяет создать рассказ и визуальное представление
• Простая навигация
• Предлагает взаимодействие
• Бесконечная прокрутка привлекает пользователей и заставляет оставаться подольше.
• Хорошо работает с сенсорным управлением
• Раскрывает двери для большего количества приложений или игровых интерфейсов
Недостатки
• Всегда будут люди, которым не нравится прокрутка
• Отрицательное влияние на SEO (чтобы изучить, как побороть этот недостаток почитайте тут Moz piece и тут Quicksprout piece.
• Может быть непонятной и дезориентировать людей, которые предпочитают традиционную навигацию
• Сложность в возвращении к предыдущей "странице" (ссылки в верхней навигационной панели помогают этого избежать)
• Могут замедлять скорость сайта, особенно если на нем присутствует видео или parallax эффекты (это пособие объясняет, как использовать parallax scrolling не замедляя сайта)
В общем, комбинация преимуществ длинной прокрутки и ее недостатков больше всего подойдет для сайтов, которые:
• Предполагают много мобильных пользователей
• Часто обновляют содержание
• Несут тяжелую содержательную нагрузку
• Не содержат тяжелой медиа нагрузки, как видео, которые будут замедлять быстродействие сайта.
Эта статья от Smashing Magazine дополнительно исследует плюсы и минусы длинной прокрутки.
Возможности прокрутки
Здесь мы подробно расскажем о тех новых возможностях, которые предоставляет дизайнерам длинная прокрутка. Ниже приведены три метода, которые даже по отдельности могут стоить того, чтобы применить прокрутку.
1. Parallax
Известный в индустрии видеоигр в течение многих десятилетий, параллакс относится к фону и переднему плану (или разных слоев фона), движущихся с различными скоростями. Эта техника создает трехмерный эффект для повышения качества сайта по сравнению с неподвижной двухмерной графикой.
Фото: http://makeyourmoneymatter.org/
Parallax scrolling позволяет сайту Make Your Money Matter (выше) проиллюстрировать некоторые основы экономики, не нагружая людей, особенно забавным, интерактивным, визуально интересным способом и с выгодой для компании.
2. Экраны как страницы
Чтобы уменьшить недостатки прокрутки, связанные с дезориентацией, может быть полезным представить разные экраны в виде страниц. Каждый новый экран может различаться разным фоном, стилем шрифта, и т.д., чтобы правильно разделить одну длинную страницу на несколько частей.
Фото: Jumo
Jumo - это отличный пример со вкусом примененного parallax scroll при сочетании техники «экраны как страницы» для длинной прокрутки. В верхней части страницы, обратите внимание, как оживает лампа, когда вы впервые прокручиваете экран, а затем сайт плавно переходит к более стандартному макету.
Техника умного взаимодействия показывает, как работает устройство в реальной жизни и добавляет немного чуда, чтобы привлечь пользователя. Применение parallax effects и карточного макета в разных частях прокрутки, позволяют сайту создать живое ощущение и не перегружает восприятие.
3. Анимации
Инициируемая пользователем интерактивность делает анимацию более связанной, поскольку анимация вдохнет жизни и приукрасит прокрутку, привлекая пользователей и даря им удовольствие.
Фото: http://revelator.com/tour/sell
Revelator (платформа для представления музыки) ведет пользователя на каждом из 5-ти его шагов изложения слева направо, инициируемое прокруткой. Когда вы прокручиваете экран, анимация переносит вас на следующий экран, при этом создавая путь контента для того, чтобы вы следовали ему.
Это хороший способ сказать пользователям: «Здесь поток контента», при этом сохраняя их заинтересованность, что же будет дальше. Конечно, пользователи также могут нажать вперед, если они не хотят прокручивать содержание. Умная навигация Revelator и продуманный интерактивный дизайн превращает стандартную страницу в богатую историю, которая ведет пользователя к загрузке, продвижению и анализу продажи музыки.
Лучшие примеры реализации
Если вы решили, что длинная пр
|
|
|
