Мобильные версии сайтов: лучшие примеры

Как найти загрузки на Андроиде сразу после закачки

Сразу после закачки файлы можно найти через специальный файловый менеджер. Эту программу можно найти на панели приложений. Названия могут быть разные, в зависимости от модели мобильного телефона – «Проводник», «Файловый менеджер», «Файлы», «File Manager» или что-то подобное.

1. Если на мобильнике есть приложение «Загрузки», «Менеджер загрузок», «Менеджер закачек», «Downloads» или «Download Manager», то следует коснуться ярлычка, чтобы открыть программу и сразу посмотреть список скачанных файлов. Если файлового менеджера на смартфоне нет, рекомендуется установить его.

2. Выбирают пункт «Внутренняя память» или «Внутреннее хранилище». В списке находят имя скачанного файла и нажимают на него, чтобы открыть.

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

В зависимости от производителя и модели смартфона названия указанных папок могут несколько меняться.

Примеры лучших мобильных версий

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

Qatar Airways

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

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

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

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

Итак, чему можно поучиться у «Катарских Авиалиний»?

• Если сайт многофункционален, навигация – первое, что пользователь должен увидеть перед собой, открыв интерфейс.
• Всегда нужна опция возврата к главному меню – особенно, если пользователю может потребоваться выполнить несколько действий на сайте: например, узнать правила перелетов, купить билеты, разобраться с регистрацией. В нашем случае для возврата есть иконка «Домой» в правом верхнем углу.
• Текст крупный, темный на светлом фоне, его немного – это важно для мобильного сайта вне зависимости от направленности, чтобы пользователь смартфона не напрягал глаза. О тонкостях размещения текста на сайте можно почитать в нашей статье о типографике.
• Когда от пользователя нужно действие, на экране появляется только поля для ввода данных и выбора опций из списка. На странице никакой нет лишней информации, которая отвлекает клиента, чтобы упростить процедуру покупки.

«Яндекс.Маркет»

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

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

При просмотре конкретного товара мы видим горизонтальное расположение фильтров, которые можно применить – например, цвет. Вертикально предложения представлены нам в порядке важности: сначала сам товар и его характеристики, потом стоимость, выгодные предложения и похожие товары.

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

Что взять на заметку?

• «Яндекс» не бросает покупателя наедине со своими мыслями: нам показывают рекламу других товаров, всячески соблазняют скидками и акциями. Но все лирические отступления – внизу, до них еще надо долистать. А самое важное показывают всегда в начале, чтобы не осложнять процесс шопинга.
• Сайт максимально лаконичен в дизайне, потому что он очень нагружен товарами и рекламой. Для декора и градаций цветовых оттенков в подобных проектах просто нет места.
• Меню и товары можно листать как сверху вниз, так и слева направо. Это удобно, когда категорий много.

Clinique

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

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

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

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

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

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

Какие сильные стороны мобильного сайта Clinique?

• На главной странице – баннеры, занимающие основное место на экране. На сайте не так много разных категорий и опций, да и за мгновенной покупкой на него не заходят – поэтому нет задачи сразу отправить пользователя к конкретной цели. А красивые крупные картинки привлекают ЦА.
• Нет никаких всплывающих окон и назойливой рекламы. Поскольку человек проводит на сайте много времени, рекламные сообщения бы неизбежно повторялись и вызывали раздражение.
• Разработчики решили, что интерактивы для удобного выбора косметики – это нужная функция даже для мобильной версии. Невозможность попробовать на себе косметику – большой минус интернет-магазина: Clinuque компенсирует это своими онлайн-тестами.

Tutu

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

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

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

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

Итак, чему учимся у Tutu?

• Удобная навигация, которая сразу встречает клиента на главной странице. Сайт многофункциональный: если человек зашел просто выбрать гостиницу, ему могут быть не нужны электрички и автобусы – одним кликом такой пользователь отправляется в нужный ему раздел.
• Яркие иконки, выражающие эстетику бренда, хорошо смотрятся на простом белом фоне. Этот дизайн лаконичный, но нескучный, он настраивает пользователя на отдых и новые впечатления.
• Интуитивно понятные кликабельные ссылки вместо цветных кнопок позволяют разместить больше опций для перехода на одном экране, не загромождая визуальное пространство.

Yelp

Это американский сервис для поиска баров, развлекательных центров, банков, салонов красоты, аптек и других коммерческих заведений неподалеку. По задумке напоминает российский сайт «КудаGo» (у него, кстати, респонсивный дизайн вместо отдельной мобильной версии). Но в Yelp нет длинных анонсов мероприятий – только места, самая основная информация, фото и отзывы.

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

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

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

• Яркие цвета стоит использовать дозированно, вне зависимости от направленности сайта. Даже если у бренда красный логотип, в мобильном интерфейсе красного очень мало. С помощью этого цвета акцентируют важные места на сайте, но основная гамма – белая и серая. Благодаря этому на сайте комфортно долго находиться, искать заведения, читать отзывы.
• Сайт примечателен тем, что у него очень много категорий – поэтому сразу показывают только популярные, а для просмотра всех нужен дополнительный клик. Это логичный ход для любой навигации, если некоторыми пунктами меню люди пользуются существенно чаще, чем другими.
• В отзывах вмещается очень много информации – их количество, рейтинг и сам текст. Но между собой эта информация не конкурирует: рейтинг представлен визуально, количество – светло-серым, а сам отзыв – привычным текстом черного цвета.

Lamoda

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

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

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

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

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

Чему учимся у Lamoda?

• Минимализму, возведенному в абсолют: на главной у них только баннер и разные категории, в каталоге – только товары и скрытое меню фильтров. Везде оставлено очень много воздуха – просто белого пространства, и это облегчает концентрацию внимания на маленьком экране.
• На сайте узкие категории товаров, поэтому у них сложные иконки – и для кого-то они могут быть непонятны с первого взгляда. Это неизбежно, если только вы продаете не самые простые повседневные вещи. Поэтому на сайте иконки сделали мелкими, а названия категорий – крупными, одного уровня с ними. И это не перегружает дизайн за счет того, то вокруг много пустого пространства.
• Анонсов и акций много, и они все представлены баннерами. Так можно легко и регулярно менять общую цветовую гамму сайта. Например, сейчас, летом, там много оранжевого.

YouTube

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

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

Какие фишки берем на заметку у YouTube?

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

Где найти скачанные файлы на Андроиде через Проводник

Через проводник можно тоже найти список закачек. Для этого нажимают меню «Инструменты» — пункт «Загрузки» или просто CTRL + J. Тут находят нужный файл, тапают по нему правой кнопкой, после чего открывается меню, где нужно выбрать пункт «Открыть папку с файлом». Если нужного файла в списке не оказалось, его можно попробовать восстановить при помощи любой программы, предусмотренной для этой цели.

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

Оцените статью

Автор

Татьяна

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

Download Accelerator Plus — Больше возможностей для сохранения файлов

Download Accelerator Plus — это еще одно приложение для Android, позволяющее легко загружать контент. Его отличительной особенностью является то, что он может производить прямую загрузку на SD-карту, а также то, что тут есть встроенный браузер с несколькими вкладками, возможность автоматического возобновления прерванных загрузок и многое другое. Еще менеджер может автоматически перехватывать загружаемые ссылки при копировании их в буфер обмена, а также вы можете создать резервную копию всех загруженных файлов при помощи синхронизации программы с Google-аккаунтом.

Скачать: Download Accelerator Plus