Ваш сайт работает на планшетах с сенсорным экраном?

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

Современные смартфоны, однако, могут отображать веб-страницы так же эффективно, как настольные ПК, через беспроводные сети так же хорошо или лучше, чем вчерашние линии DSL.

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

Основные правила оформления сенсорного экрана

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

  • Постукивание не является точным Если у клиента нет пальцев малыша, даже с очень точными программными средствами управления, может быть сложно нажать и быть точным.
  • Жесты отличаются от нажатий . Чтобы прокрутить длинную страницу на сенсорном экране, пользователь проводит пальцем вверх в окне браузера. Это может показаться несущественным, пока вы не поймете, что просматривая мышь, вы перемещаете мышь вниз .
  • Два (и более) касания пальцем . Пользователь может одновременно использовать несколько касаний пальца на устройстве для управления им. Эти дополнительные касания могут означать что-то конкретное в зависимости от операционной системы устройства пользователя.
  • Устройства с высоким бликом . Экраны большинства планшетов с сенсорным экраном изготовлены из прочного стекла. Этот материал может быть очень трудным для чтения, с большим количеством яркого света, в условиях яркого освещения. Плюс ко всему, на экране появляются отпечатки пальцев и пятна, которые могут повлиять на внешний вид ваших страниц.
  • Экранная клавиатура . Хотя у некоторых пользователей есть беспроводная клавиатура, к которой они подключаются к своим планшетам, большинство пользователей планшетов используют экранную клавиатуру для ввода данных. Запись OSK может привести к некоторым веселым опечаткам, а также неудобно использовать в течение длительных периодов времени.

Основные правила мобильного дизайна

Из-за этих особенностей устройства веб-дизайнеры должны подчеркнуть несколько основных правил дизайна для пользователей сенсорного экрана:

  • Не размещайте кликабельные элементы слишком близко друг к другу . Нет строгого правила, определяющего, насколько близко находится слишком близко, но есть списки ссылок, особенно мелким шрифтом. размер, может быть трудно ориентироваться, нажав (нажав) толстым пальцем. Это может быть раздражающим, когда приходится увеличивать масштаб, чтобы попытаться щелкнуть ссылку. Этот принцип справедлив как для кнопок, так и для ссылок.
  • Иерархии может быть трудно поддерживать открытым . Одна популярная форма динамического меню использует JavaScript для открытия подменю, когда пользователь щелкает, а затем наводит указатель мыши на подменю. Эти состояния могут быть очень трудными или невозможными для использования на сенсорных экранах, потому что они либо не остаются открытыми, либо не закрываются.
  • Переместите ссылки и области, по которым можно кликать, от правого края окна . Большинство людей правши и имеют тенденцию прокручивать страницы на этой стороне экрана. Поскольку прокрутка выполняется жестом, иногда можно ошибочно запустить пролистывание ссылки. Пользователи могут раздражаться, если хотят прокрутить страницу и вместо этого случайно нажали на ссылку. Перемещая свои ссылки с правой стороны, вы можете помочь им избежать этого неудобства.
  • Мышь отсутствует . Это означает, что указатель мыши отсутствует . Вы не должны полагаться на изменение указателя мыши, чтобы указать, что что-то можно щелкнуть.
  • Состояния наведения не существуют . В качестве следствия вышесказанного, поскольку мыши нет, нет ничего, с чем можно было бы парить. Ссылка либо нажата (нажата), либо отсутствует на устройстве с сенсорным экраном, поэтому пользователи не могут получить какую-либо полезную информацию из таких состояний при наведении курсора, как изменение цвета, всплывающие подсказки или изменения строки состояния.
  • Черный фон усиливает блики Сайт с черным фоном может быть очень трудночитаемым на сенсорном устройстве из-за бликов. Черный цвет делает отпечатки пальцев на устройствах более четкими, размывая экран.И черный может превратить экран в зеркало, отражая назад лицо пользователя часто больше, чем текст на экране.
  • Длинные блоки текста в формах трудно писать . Хотя можно писать целые романы на планшете iPad, Android или Windows, большинству людей не нравится пользоваться ими. экранная клавиатура для длинных участков текста. Чем больше ваш дизайн может сделать ввод данных максимально коротким и простым, тем лучше.

Наиболее важным аспектом проектирования с учетом сенсорных экранов является тестирование ваших страниц на устройстве с сенсорным экраном. Хотя доступно множество эмуляторов iPad и Android, а также множество планшетов с ОС Windows, они по-прежнему не обеспечивают ощущение сенсорного экрана. Вы не можете сказать, что ссылки слишком близки или что кнопки слишком малы или что блики делают страницу слишком трудной для чтения – если вы не достаете планшет и не опробуете их до того, как вы отпустите новый дизайн сайта.

Оцените статью
Solutics.ru
Добавить комментарий