Основной акцент на фон или на изображение?

Фото: http://www.tacospillet.no/?lang=en

Сайт Tacospilletиспользует первый тип, с заполнением заднего фона и картинку на переднем плане с текстурой. Умеренная яркость цветов успокаивают сайт и не перегружают его. Текстура также придает графике уникальный внешний вид, выделяя его среди других сайтов.

Фото: http:// joyridetacohouse.com/

Забавно,что другой сайт о такоJoyrideTacoHouseпоказывает нам второй тип с акцентом на текстуру. Тонкая тень над крупным заголовком добавляет немного разграничения при помощи глубины, в то время как сине-зеленые линии логотипа привлекают больше внимания с самого начала. Использование текстур – это легко и забавно, что, возможно, отражает атмосферу в самом ресторане.

Лучшиепримеры реализации

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

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

Фото: http://www.masterdynamic.com/

Фото: http://airism.graphitedigital.com/#home

Давайте посмотрим на лучшие примеры реализации, которые только выиграли от использования ярких цветов в трех разных областях.

1. Выделение определенного текста

Свойства ярких цветов привлекать внимание позволяют использовать их для выделения определенных слов внутри текстовых блоков – особенно на темном фоне. Этопридаетестественныйакценти влияет на то, как читаетсясообщение.

Фото: https://fortheloveof.org.au/#/

FortheLoveoftheReef,акцентирует внимание только на слове Loveи только при его появлении во второй раз. Это не просто усиливает влияние этого слова и его значение, но также помогает узнать бренд, т.к.“love” – это одно из ключевых слов в названии компании.

2.Кнопки/ЭлементыUI

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

Фото: http://essentials.mijlo.com/

Ярко-оранжевая кнопка на сайтеMijlo, который представлен выше, выделяется на простом фоне и таком же простом изображении товара. Комбинирование сдержанных цветов фона и товара вместе приводят к тому, что нужно сделатькнопку яркой, которая будет выглядеть более привлекательно.

3.Навигация

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

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

Фото: 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/

Выделяющийся цвет хорошо сочетается с выделяющимся шрифтом текстовых надписей, который обсуждался в предыдущей главе.Как вы можете увидеть на примере сайта PiccsyPlaygroundвыше,эти две техники усиливают друг друга, чтобы донести сообщение, каким бы оно ни было. Это выглядит настолько насыщенно, что надо быть осторожным, чтобы не отвлекать другими элементами, претендующими на внимание,от единственного сообщения.

Другим трендом, который, как мы видим, становится все более и более популярным – это наложение цвета – фильтрация картинки через цветные «линзы». Это позволяет вам вставить любую картинку с усилением атрибута любым цветом. Например, вроде бы печальная фотография, может стать более радостной, если использовать желтый фильтр.

Фото: http://focuslabllc.com/

Фото: http://creationsnamale.com/

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

Постройтевысококачественные прототипы вUXPin

10 Бесплатных ресурсов и инструментов

1. Цветовая гаммаучебник для начинающих–Учебник для начинающих по дизайну для интерьеров, который послужит отличным введением в теорию цвета.

2. ColourLovers–Мировое сообщество, демонстрирующее их собственные цветовые палитры и обсуждающее теорию цвета во всех средах.

3. Как использоватьCSSHoverэффекты в цвете–Учебное пособие для создания изменяющегося цвета состояния дляhover.

4. AdobeColorCC–прекрасный инструмент для экспериментирования с разными тенями и разными схемами. Простое изменение одного цвета, и инструмент покажет другие подходящие цвета или оттенки.

5. “Инструкция по применению теории цветов для Webдизайнеров” –Учебник+ руководство по теории цвета, затрагивающие все от важности тонов до совместимости цветов.

6. TintUI–Собиратель цвета для копирования шестнадцатеричных кодов. Позволяет просматривать разные платформы (MaterialDesign, iOS,и т.д.),бренды (Twitter, Firefox, пр..),или текущие тренды.

7. Текст на фоне–Простой, но полезныйинструмент для предпросмотра как определенный цветной текст смотрится на определенном фоне.

8. Цветовые модели года–Цвет, эффективный для любой индустрии, предложение и анализвыбора цвета, для определения лучшего, каждый год.

9. Как добавить оттеночный фильтр вPhotoshop–Собственное руководство Adobe для создания наложения цвета для изображений.

10. ColorWebsiteDesignGalleryfromAwwwards–Лучшие сайты победители Awwward за их использование цвета.

m /6/IfwEAAP//AwBQSwECLQAUAAYACAAAACEAtoM4kv4AAADhAQAAEwAAAAAAAAAAAAAAAAAAAAAA W0NvbnRlbnRfVHlwZXNdLnhtbFBLAQItABQABgAIAAAAIQA4/SH/1gAAAJQBAAALAAAAAAAAAAAA AAAAAC8BAABfcmVscy8ucmVsc1BLAQItABQABgAIAAAAIQByt3cHkA0AAF9WAAAOAAAAAAAAAAAA AAAAAC4CAABkcnMvZTJvRG9jLnhtbFBLAQItABQABgAIAAAAIQCxzoCR4AAAAA0BAAAPAAAAAAAA AAAAAAAAAOoPAABkcnMvZG93bnJldi54bWxQSwUGAAAAAAQABADzAAAA9xAAAAAA ">

Захватывающая фотография

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

Фото: Jawbone

Фото: http://nuabikes.com/#/home

Фото: Blackhouse

Тенденции в современной Web-фотографии

Не только искусство самой фотографии следует определенным тенденциям каждые несколько лет, но и то, как она применяется в веб-дизайне, тоже меняется в соответствии изменяющимся вкусам. Например, те изображения с улыбающимися моделями, глядящими прямо в камеру, часто использовались в 1990-е годы, но теперь они выглядят смешно и устарели.

Давайте рассмотрим четыре достаточно устойчивыетенденции веб-фотографий.

1.Огромные (Hero) картинки

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

Фото: http://www.cookiesound.com/

Выше, Cookiesound,громко говорит о себе благодаря одному единственному фото.Сельская природа, без суеты и суматохи и, конечно же, длинная открыта дорога: это все образы - и чувства – это то, что блог путешественника хотел бы, чтобы с ним ассоциировалось. Размер картинки просто усиливает эффект, так как что-нибудь маленькое ослабило бы его.

2.Объектывестественнойсреде

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

Фото: https://edwin-europe.com/

Бренд одеждыEdwinизбегает затертой темы улыбающихся детей-моделей в одежде его марки и использует более реалистичную и художественную фотографию, чтобы показать их товар в действии. Крупный план заднего фона показывает, какая одета футболка на мальчикеи ситуацию, которая бы могла быть – дети играют в бейсбол.

При помощи увеличенной футболки на переднем плане и отсутствиизаголовка,отвлекающего от нее внимание, товар представлен креативно и эффективно.

3.Черное и белое

Черно-белые фотографии являются показателем профессионализма и изысканности. Если это то, к чему стремится ваш сайт, есть несколько лучших вариантов. Чтобы увидеть, что мы имеем в виду, полистайтегалерею дизайнера Криса Спунера, которая представляет 20 черно-белых сайтов.

Фото: http://goltzgroup.com/

Сайт дляGoltzGroupсовмещает две вышеуказанные стратегии с черным и белым, чтобы слегка добавить утонченности сайту. Как вы помните с последней главы о цвете, фон в виде черно-белой фотографии усиливает цветные акценты, как вы можете увидеть выше.

4. Наложение цвета

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

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

Если вам интересно, здесь есть учебные пособия по их созданию, вCSSиливPhotoshop.

Фото: http://www.knucklesindustries.com/

Тонированный фон для сайтаKnucklesIndustriesсоздает оригинальную визуальную иерархию, которая высвечивает текст заголовка и навигационное меню вверху, несмотря на захватывающее внимание изображение.

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

Варианты 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/

ThePortraitMachine–сайт для найма фотографа портретной художественной съемки событий – использует слайды из маленьких картинок, чтобы проиллюстрировать, что она привнесет мероприятию, показывая свои примеры работ. Так как ее стиль немного экспериментальный, то чем больше фотографий, тем более ясно становится понятным, почему людям стоит ее нанять.

2.Манипуляциисфото

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

Фото: https://beth-emily.com/

Beth-Emilyне позволяет минимализму остановить ее творческие манипуляции с фото. Немного графики позади полки было создано для того, чтобы добавить чуть-чуть уникальности изображению.

3.Впареспользовательскойфотографией

Если вы помните из шестой главы, пользовательская фотография может усилить или даже без посторонней помощи создать индивидуальность вашего бренда. Когдаэффектысоединенывместе,онидостаточносильноработают.

Фото: http://metaversemodsquad.com/

Просто посмотрите наMetaverseModSquad–непосредственная картинка сообщает очень много об индивидуальности бренда. Искусственно-небрежное начертание надписи придает аспект мятежности фотографии банды скутеристов, и наоборот. Сочетание специального шрифта с пользовательским фото помогает определить, как пользователь будет интерпретировать каждый из них.

Создайтепрототипвысокогокачества в UXPin

10 бесплатных ресурсов и инструментов

1. “10 ошибок, которых нужно избегать, когда используете сток фотографию”–Статья DesignShack, предупреждающая о часто допускаемых ошибках со стокфотографией.

2. TinEyeReverseImageSearch–Прекрасный инструментдля стокфотографий, который выявляет все размещения фото в интернете.

3. “Полное руководство для прекрасной фотографии, сделанной самостоятельно“–Руководство для начинающих для получения своей собственной вебфотографии.

4. StockPhotoRights.comFAQ–Все популярные площадки для обсуждений вокруг стокфотографий.

5. “16 мест, чтобы найти лучшие бесплатные стокфотографии”–Список Designmodo маленьких, но бесплатных вебсайтов, которые предлагают стоковыефотографии.

6. Время и стоимость профессионального фотографа–Профессиональный фотограф сбивает цену, если вы можете подождать, когда нанимаете фрилансера.

7. “Стоит ли вам использовать стоковые бесплатные фотографии для ваших постов в блогах?–пост изCoScheduleBlog,в котором обсуждается преимущества и недостатки стоковой фотографии, и какую из них лучше использовать в вашей конкретной ситуации.

8. CreativeCommons–Библиотека открытого ресурса фотографий (также как музыки или видео), с лицензией, разрешающей модификацию.

9. “Наиболее важные10 причин найма профессионального фотографа”–RobKorbPhotographyперечисляет некоторые убедительные причины нанять эксперта вместо того, чтобы делать это самому.

10. О чем нужно спросить, нанимая фотографа–Пособие для начинающих, как найти правильную фотографию, написаннаяProfessionalPhotographersofAmerica.

Длинная прокрутка

Представленныеthedominationofmobileи при поддержке тренда карточного интерфейса, сайт с длинной прокруткой быстро набирает популярность.

Для того, чтобы объяснить популярностьдлинной прокрутки в нескольких словах, мы можем посмотреть на все увеличивающееся использование экранов мобильных телефонов.Просто сопоставьте: чем меньше экран, тем более длинная прокрутка. Этот принцип интерактивного дизайна оживляет длинные и бесконечные прокрутки сайта, заставляя дизайнеров искать больше креативности в способах повествования их сайтов.

Фото: JackDaniels

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

Короткая история длинной прокрутки

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

Дизайнеры фокусируются на повествовании с умными тактиками и такими методами, какparallaxscrollingилиAjaxjQuery, которые позволяют сделать больше динамической анимации и взаимодействия.

Фото: Apple

В начале появления интернета прокрутка считалась табу. Миф, что пользователям не нравится прокруткабыл, возможно, как устаревшее утверждение, которое являлось пережитком печатной индустрии, предписанием печатать «выше сгиба», когда газетам было необходимо привлечь внимание своих читателей при помощи той верхней областиглавной страницы, что была видна до сгиба. Это имеет смысл и для вебсайтов сейчас – что бы ни было на первом экране – это то, что сформирует самое первое впечатление о сайте.

Кроме того, старые сайты, как и полиграфия, были в основном текстом, который совсем не так интересен в виде длинного сайт с прокруткой. Однако, когда развитие Javascript / CSS / HTML5 открыло больше возможностей для сайтов, сайты, как Facebook и Twitter сломали лед, дизайнеры обнаружили, что пользователи на самом деле не против прокрутки. В самом деле, проведенные исследования, подтвердили это: они обнаружили, что 66% внимания пользователя на обычной странице было потрачено на пространство «ниже линии».

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

Влияниеразмераэкрана

Размерэкранаограничиваетколичествоинформации, котороеможетразместится «вверхнейчастистраницы», заставляядизайнероввыбиратьмеждупрокруткойилиуменьшениемвсехэлементов, чтобыпоместитьих всенаэкран. К счастью, сенсорное управление на мобильных устройствах делает прокрутку понятной и приятной.

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

Фото: Shinya Suzuki.Creative Commons.

АмбициозныйAppleWatchосновывается на прокрутке, как видно по созданной для этой цели поверхности. Основные принципы разработки библиотекиAppleWatch(AppleWatchDeveloperLibraryguidelines)сами утверждают: «Сделайте как можно меньшеобщее количество страниц, чтобы упростить навигацию».

Даже на не мобильных устройствах экраны уменьшаются – просто посмотрите на новый 12-дюймовый дисплей12-inchRetinadisplayдляMacBook.Для ноутбуков тенденция ведет к тому, чтобы сделать их меньше и легче, так что, если вы учтете тот факт, что сейчас они имеют сенсорное управление, вы увидите насколько больше преимуществ у длинной прокрутки предоставляется пользователям в целом.

Повествование

Длинная прокрутка дает много возможностей для повествования, которому не подходит постраничная навигация.Вот почему HoaLorangerизNielsenNormanGroupутверждает,что эта тактика подходит сайтам с открытым концом, направленных скорее на повествование, чем на пошаговое достижение цели, как например сайты электронной коммерции.

Фото: FrameCollections

Сайтысдлиннойпрокруткой, какFrameCollections“OnetoSee,OnetoKill” выше, создаютлинейнуюструктуру, котораяпозволяетнасыщеннымисториямразворачиватьсяестественнымпутем. Разные макеты и анимации задают ритм, который заставляет пользователя интересоваться «а что же произойдет дальше». Если все сделано правильно, это создает захватывающие ощущения и пользователь не хочет уходить.

1.Преимущества и недостатки

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

Преимущества

• Позволяет создать рассказ и визуальное представление

• Простая навигация

• Предлагает взаимодействие

• Бесконечная прокруткапривлекает пользователей и заставляет оставаться подольше.

• Хорошо работает с сенсорным управлением

• Раскрывает двери для большего количества приложений или игровых интерфейсов

Недостатки

• Всегда будут люди, которым не нравится прокрутка

• Отрицательное влияние наSEO (чтобы изучить, как побороть этот недостаток почитайте тутMozpieceи тутQuicksproutpiece.

• Может быть непонятной и дезориентировать людей, которые предпочитают традиционную навигацию

• Сложность в возвращении к предыдущей "странице" (ссылки в верхней навигационной панели помогают этого избежать)

• Могут замедлять скорость сайта, особенно если на нем присутствует видео или parallaxэффекты (это пособиеобъясняет, как использовать parallaxscrollingне замедляя сайта)

В общем, комбинация преимуществ длинной прокрутки и ее недостатков больше всего подойдет для сайтов, которые:

• Предполагают много мобильных пользователей

• Часто обновляют содержание

• Несут тяжелую содержательную нагрузку

• Не содержат тяжелой медиа нагрузки, как видео, которые будут замедлять быстродействие сайта.

Эта статьяот SmashingMagazineдополнительно исследует плюсы и минусы длинной прокрутки.

Возможностипрокрутки

Здесь мы подробно расскажем о тех новых возможностях, которые предоставляет дизайнерам длинная прокрутка. Ниже приведены три метода, которые даже по отдельности могут стоить того, чтобы применить прокрутку.

1.Parallax

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

Фото: http://makeyourmoneymatter.org/

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

2.Экраныкакстраницы

Чтобыуменьшитьнедостаткипрокрутки, связанныесдезориентацией, может быть полезнымпредставитьразные экраныввидестраниц. Каждыйновыйэкранможетразличатьсяразнымфоном, стилемшрифта, ит.д., чтобыправильноразделитьоднудлинную страницунанесколько частей.

Фото: Jumo

Jumo - это отличный пример со вкусом примененногоparallaxscroll при сочетании техники «экраны как страницы» для длинной прокрутки.В верхней части страницы, обратите внимание, как оживает лампа, когда вы впервые прокручиваете экран, а затем сайт плавно переходит к более стандартному макету.

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

3.Анимации

Инициируемая пользователем интерактивность делает анимацию более связанной, поскольку анимация вдохнет жизни и приукрасит прокрутку, привлекая пользователей и даря им удовольствие.

Фото: http://revelator.com/tour/sell

Revelator(платформадляпредставлениямузыки) ведетпользователянакаждомиз 5-тиегошаговизложенияслеванаправо, инициируемоепрокруткой. Когда вы прокручиваете экран, анимация переносит вас на следующий экран, при этом создавая путь контента для того, чтобы вы следовали ему.

Это хороший способ сказать пользователям: «Здесь поток контента», при этом сохраняя их заинтересованность, что же будет дальше. Конечно, пользователи также могут нажать вперед, если они не хотят прокручивать содержание.Умная навигация Revelatorи продуманный интерактивный дизайн превращает стандартную страницу в богатую историю, которая ведет пользователя к загрузке, продвижению и анализу продажи музыки.

Лучшиепримерыреализации

Есливырешили, чтодлиннаяпрокруткаможетпомочьвашемусайту, посмотритеналучшиепримерыре