В 2011 году Люк Вроблевски разработал концепцию мобильного дизайна . Несомненно, это был новый принцип дизайна, который нарушил принятые в то время отраслевые условности. В нынешнюю эпоху Интернета он был полностью принят, и появилось множество отличных примеров дизайна для мобильных устройств. Было доказано, что люди или бизнес, которые следуют этому принципу, чтобы создать лучший мобильный веб-сайт с первым дизайном, он станет победителем рынка и возможностей. Итак, легко понять, насколько важен мобильный дизайн для бизнеса и дизайнеров при создании продуктов.
Г edesign на YouTube в 2017 году, уже воплощается авторитет мобильного первого дизайна. Материальный дизайн отражает «настольная версия подчинена мобильной версии». Что как раз соответствовало концепции мобильного первого Нейдера, который является нынешним генеральным директором Microsoft.
Существует наиболее распространенное объяснение современного дизайна ПК и мобильных устройств. То есть ранее мобильная версия была уменьшенной настольной страницей, а текущая настольная версия — увеличенным мобильным приложением. Итак, я перечислил 8 отличных примеров мобильного дизайна для вашего примера и вдохновения.
1. YouTube
Что привлекательного в дизайне : Заглушка для кнопок и текстового дисплея, Ночной режим
В некоторой степени язык материального дизайна для веб-версии YouTube Desktop также отражает предпочтение мобильных устройств. Так что разумно использовать адаптивный дизайн. Таким образом, нет никаких сомнений в том, что заглушка для кнопок и отображения текста предназначена для адаптации к привычке пользователя на мобильных устройствах с сенсорным экраном и сенсорным экраном.
Новый ночной режим также показывает свою отдачу мобильным устройствам. Интерфейс настольной версии — белый фон. Для мобильного устройства в режиме ночного освещения лучше использовать желтый экран, а не черно-белый фон. Весь свет убран, экран маленький, поэтому лучший способ — уменьшить яркость, чтобы глаза пользователей были удобнее.
2. Яблоко
Что привлекательного в дизайне: Удобная прокрутка навигации
Опрос пользователей, опубликованный Nielson / Norman Group, показывает, что скрытие навигации (например, гамбургер-навигация) снижает обнаруживаемость контента на 21% и увеличивает навигацию в среднем на 2 секунды. У мобильного веб-сайта Apple очень хорошее оформление контента. Таким образом, пользователям не нужно использовать кнопку навигации, а прокручивать страницу вниз для доступа к информации, что очень просто и удобно. Значок корзины для покупок обычно необходим и понятен пользователю при совершении покупок с первого взгляда. Кроме того, если после просмотра страницы информация не требуется, вы можете найти нужную информацию в нижней части навигации.
3. Вилы
Что привлекательного в дизайне : Дизайн большого пальца
Хотя есть много исследований областей эскизов, многие сайты и приложения не имеют навигации в верхней части экрана. Однако, если вы будете достаточно осторожны, вы заметите, что чем больше телефон, тем труднее пользователю получить доступ к контенту на внешнем краю экрана. В отличие от этого, Pitchfork помещает основную панель навигации в нижнюю часть экрана, где большой палец касается наиболее легко. С ростом количества мобильных устройств этот тип дизайна должен стать тенденцией будущего.
4. Типовая форма
Что привлекательного в дизайне: большая кнопка меню — отлично подходит для сенсорных экранов
Typeform имеет красивый дизайн рабочего стола с простой копией, видео высокой четкости, анимацией и другими элементами дизайна. Но сложные компоненты дизайна, такие как видео и анимация, не удобны для мобильных пользователей, что может существенно повлиять на время загрузки страницы. В результате они сократили многие ненужные элементы дизайна на странице мобильного веб-сайта, но сохранили большие кнопки меню, которые хорошо работают на мобильных устройствах, упрощая общий опыт работы с мобильными устройствами с простотой и изощренностью.
5. Airbnb
Что привлекательного в дизайне: Дизайн карты
Дизайн карточки упрощает взаимодействие пользователей и информации в течение ограниченного времени. Вот почему Google выбрал дизайн карточек в качестве стандарта дизайна. Другие интернет-компании, такие как Airbnb, постепенно приняли и приняли этот подход. Сообщение каждой карточки краткое и эффективное и обычно состоит из заголовка, изображения, рисунка или текста профиля. Такой дизайн дает пользователям достаточно информации и позволяет им решить, хотят ли они углубиться и узнать больше.
6. Smashing Magazine
Что привлекательного в дизайне: Акцент на пользователей, рациональное использование экранного пространства, оптимизация
Данные показывают, что все больше и больше пользователей Интернета предпочитают останавливать нежелательный контент, особенно мобильные пользователи в последние годы. Постоянные настройки навигации, полноэкранная реклама, чрезмерные маркетинговые термины — все это не дает пользователям приятных впечатлений. Если вы хотите подтолкнуть пользователей к рекламе или побудить пользователей продолжить чтение, вы можете нажимать выборочно в зависимости от того, что пользователи просматривают. Вот почему пользователям легче нажимать на стратегический макет контента. Если вы просто нарушите взаимодействие с пользователем или заставите их переходить на страницы, чтобы получить прибыль, вы постепенно потеряете пользователей, и прибыль будет уменьшаться по мере того, как пользователи теряют.
7. Facebook
Что привлекательного в дизайне: Эффективная анимация
Анимация на веб-страницах помогает пользователям лучше понять текущее изображение и дает пользователю больше выразительности и человечности, чем развлекать публику. Например, MailChimp использует анимацию Hi-Five в качестве приветствия после успешной рассылки, мини-анимацию пересылки Twitter или симпатии к функциям, а также яркий пакет выражений, такой как Facebook. Но если вы хотите анимировать страницу, убедитесь, что она элегантная и достойная.
8. Evernote
Что привлекательного в дизайне : чистый и свежий мобильный интерфейс.
Evernote в основном предоставляет услуги хранения заметок, которые позволяют пользователям получать доступ к информации на всех устройствах платформы. Таким образом, Evernote должен получить правильный мобильный пользовательский интерфейс. Как и настольная версия веб-дизайна, дизайн мобильного веб-сайта Evernote сохраняет тот же чистый и свежий дизайн пользовательского интерфейса. Кроме того, правая кнопка CTA в Интернете очень полезна для пользователя.
«Сначала веб-дизайн, а затем переход к мобильному дизайну», эта традиционная модель сегодня больше не применима. Мобильность обязательно станет тенденцией проектирования и развития Интернет-индустрии в будущем. Таким образом, разработка веб-сайтов, ориентированных на мобильные устройства, станет новым трендом, даже если эта концепция существует уже несколько лет.
Почему так важен принцип «сначала мобильные»?
1. Согласно Global Internet Report, к 2016 году количество пользователей смартфонов во всем мире достигло 2,8 миллиарда.
2. Между тем, люди с каждым днем проводят в мобильной сети все больше и больше времени.
3. Еще в 2012 году продажи смартфонов во всем мире превысили продажи ПК.
Стремительный рост спроса на мобильные устройства требует от дизайнеров уделять больше внимания мобильной версии и следовать основным принципам мобильного дизайна в дизайне продукта. Поэтому я считаю, что этих причин достаточно, чтобы дизайнеры и продавцы изучили дизайн мобильного сайта и извлекли из него пользу.
Как следовать принципам мобильного дизайна?
Чтобы создать удобный для мобильных устройств веб-сайт, отвечающий принципам мобильного дизайна, необходимы инструменты для создания прототипов, такие как Mockplus .
Шаг 1: Войдите в свою учетную запись Mockplus. Если нет, вы можете подать заявку на бесплатную учетную запись Mockplus.
Шаг 2: Создайте новый проект мобильного телефона;
Подумайте о макете
Метод «сначала мобильные» отличается от «сначала настольных». В мобильных устройствах нам нужно думать об эффективном отображении информации на небольших экранах. Однако это не просто уменьшает количество информации по мере изменения макета страницы.
В этом примере дизайна для мобильных устройств мы знаем, что некоторые элементы являются обязательными, например, название веб-сайта и логотип приложения должны быть завершены. Однако не все элементы веб-дизайна для настольных компьютеров подходят для мобильных устройств. Итак, давайте расставим приоритеты в зависимости от цели туристического сайта:
Стартовая страница, страница входа, страница приветствия, страница списка городов, домашняя страница, страница сведений, страница поиска, страница активности, страница личной информации и т. Д.
Финальная презентация эффекта дизайна прототипа
Предварительный просмотр HTML-кода Gogobot в Интернете: https://www.mockplus.cn/sample/post/656
Дизайн карточек и прокрутка содержимого отображаются в соответствии с доступом мобильных пользователей и работой с информацией путем прокрутки страниц вверх и вниз. Никакая большая картинка не захватывает ограниченные ресурсы экрана, и прокрутка информации также может быть одобрена пользователем. Потому что по сравнению с гамбургер-меню пользователям больше нравится листать страницы.
Настольный дисплей: Gogobot
Вывод
Я считаю, что благодаря пересмотру Youtube в этом году, будет больше веб-сайтов, на которых можно будет уделять внимание дизайну, ориентированному на мобильные устройства. С уважением, я надеюсь, что перечисленные выше 8 примеров дизайна для мобильных устройств могут послужить вдохновением для создания вашего нового продукта или нового веб-сайта. Короче говоря, из-за ограниченного трафика мобильный веб-сайт должен быть простым и грубым, а веб-сайт для настольных ПК должен быть лучшим и великолепным. Но не мобильные устройства в первую очередь становятся чушью, поскольку это становится здравым смыслом почти для всех основных предприятий Кремниевой долины.
