Кнопка «Гамбургер»

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

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

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

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

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

Верстка кнопки, используя стили CSS

Откройте Ваш html-файл. Сначала создадим ссылку:

<a href="сайт">Нажми меня!</a>

Вот что получается:

Как мы видим, ссылка не отформатирована и т.д. Теперь добавьте стили (в связи с тем, что ссылка у нас одна, да и это только пример, то оборачивать в тег div не обязательно):

a {
display: block; /*Говорим браузеру, чтобы он отображал ссылку, как блочный элемент*/
width:202px; /*Определяем ширину блока*/
height:47px; /*Определяем высоту блока*/
text-indent: -9999px; /*Отступ первой строки*/
background-position: left top; /*Выравниваем фон по левому (X) верхнему (Y) углу*/
background-repeat: no-repeat; /*Не "размножать" картинку*/
background-image: url(buttons.png); /*Спрайт*/
}

Обратите внимание на значение параметра text-indent. Такой большой отступ сделан для того, чтобы сам текст было не видно, а ссылка была

Текст оставляется для поисковых роботов, так сказать для получения SEO-эффекта )). Вот, что мы получим:

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

Мы создавали кнопку высотой 45px. После применения стиля Stroke, согласно параметрам у нас с каждой стороны кнопки прибавилось по 1px. Итого, получается, что высота кнопки стала 47px. Если учесть, что первоначальное смещение фона равно 0, то при наведении мыши на кнопку, нам необходимо сместить фон на 47px вверх, т.е. подставить в значение Y, которое отвечает за смещение по вертикали, параметра background-position -47px. Аналогично и с нажатием на кнопку, только уже смещаем не на 47px, а на 47px+47px=94px.

a:hover {
background-position: left -47px;
}
a:active {
background-position: left -94px;
}

Вот и все!  Использование спрайтов выгодно тем, что обычно размер (вес) спрайта намного, в разы, меньше суммарного размера (веса) отдельных изображений. Но тут есть и негативный момент – чтобы подготовить спрайт, требуется большее количество времени. Решать Вам.

Основные типы кнопок для сайта

Зачем вообще на сайте кнопки? Ответ очевиден: чтобы пользователи по ним кликали! Яркая, заметная и красивая кнопка привлекает внимание намного успешнее, чем маленькая тусклая ссылка. При этом, если интерфейс пестрит различными кнопками, которые ещё и анимированы, он начинает утомлять пользователя, поскольку они конкурируют за его внимание

В результате люди нередко уходят с таких страниц, не понимая, чего от них хотят создатели веб-ресурса.

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

Подробнее

1. 3D-кнопки

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

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

Поведение

3D-кнопки визуально поднимаются и меняют цвет при клике. Особенно они заметны на контрасте с плоскими кнопками.

2. Плоские кнопки

Они тоже меняют цвет, но не приподнимаются

В отличие от объёмных, такие кнопочки меньше выделяются на фоне контента и не отвлекают внимание от него

Где используются

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

3. Переключатель (слайдер)

Предназначен для переключения между двумя или несколькими состояниями.

Где используются

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

• группа содержит три или более кнопок;
• на каждой из них присутствует пояснительная иконка или текст (либо то и другое).

Иконки уместны там, где пользователь может захотеть отменить свой выбор (к примеру, добавить товару «звёздочку» или снять её), и иными способами это никак не сделать. В приложениях и на сайтах такие кнопки обычно помещают в панель инструментов в качестве переключателя состояний или элемента управления.

Подробнее

4. Контурная кнопка

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

Где используются

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

5. Плавающая кнопка с выпадающим меню

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

Где используются

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

Поведение

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

Создать кнопки социальных сетей

Шаг 1) Добавить HTML:

Пример

<!— Добавить библиотеку иконок —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><!— Добавить шрифт иконок —><a href=»#» class=»fa fa-facebook»></a><a href=»#» class=»fa fa-twitter»></a> …

Шаг 2) Добавить CSS:

/* Стиль все шрифты иконок */.fa {  padding: 20px;  font-size: 30px;  width: 50px;  text-align: center;  text-decoration: none;} /* Добавить эффект наведения, если вы хотите */.fa:hover {  opacity: 0.7;}/* Установите определенный цвет для каждого бренда *//* Facebook */.fa-facebook {  background: #3B5998;  color: white;}/* Twitter */.fa-twitter {  background: #55ACEE;  color: white;}

Кликабельные элементы должны иметь иерархию

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

Этот вариант считается распространенным при выборе разных кнопок или уровней нажимаемых блоков. Применяется он на веб-сайтах и в бизнес-моделях. 

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

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

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

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

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

Кнопка с выбором вариантов

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

В пример показано приложение Travel Planner, где центральным интерактивным элементом на панели вкладок является кнопка-плюс (рассмотренная в предыдущем пункте), позволяющая человеку добавить новую экскурсию или новую услугу к определенному туру. Однако, чтобы упростить работу, она преобразуется в набор доп.кнопок, соответствующих определенным типам контента. Это дает возможность посетителю в самом начале сделать правильный выбор и быстро найти нужный экран.

Зачем нужен UI kit

Увеличивается скорость выполнения проекта

UI kit призван упорядочить все элементы проекта и оптимизировать трудозатраты: дизайнеру не нужно каждый раз отрисовывать новый элемент и его состояния. В результате проект выполняется в более короткий срок и без потери качества работы.

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

Каждый элемент можно использовать на большом количестве страниц, и в случае объёмного проекта UI-кит просто необходим. Например, если на сайте используются кнопки, меню, формы обратной связи и футер, которые повторяются на каждой странице проекта, — всё это можно показать в UI kit.

Повышается качество коммуникации внутри проектной команды

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

Конечный продукт воспринимается как единое целое

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

Разрозненность стилей, используемых на сайте или в бизнес-системе, может стать в том числе причиной негативных отзывов.

Touchscreen Button cases

*Designer: Khalil Hanna

*Highlights: Simplify button design with changes of colors, icons and background photos

At the first sight, this series of button designs looks pretty simple and straightforward. However, when these buttons are designed in combination with the change of icons, colors and background photos, they can also prove to be intuitive and changeable. And such designs will be very useful for users to easily recognize and use these buttons.

Moreover, the simplified design style is also effective to reduce interference from unnecessary disctractions and make users focus on the functions of these buttons/website/apps. If necessary, you can also learn how to simplify your prototype or design easily. 

*What can you learn:

Optimize your web/app with simplified, but not boring button designs

In your web/app designs, you can use such simple design style and try to work out some minimalistic, but never boring button designs to attract more users.

Кнопка призыва к действию CTA (Call-To-Action)

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

Технически CTA-кнопка может быть реализована разными способами, но она должна поддерживается текстом с определенным призывом

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

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

Общий макет

Макет — это визуальная структура страницы, на которой расположены все элементы. Она выполняет функцию фундамента, в который встраиваются все остальные детали.

Хедер

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

Хедер Альфа Банка

Футер

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

Футер Альфа Банка

Сетка

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

Типографика

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

Цветовая схема

Цвет влияет на эмоции и восприятие интерфейса

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

Словарь UI элементов:

Аккордеоны (Accordion)

Аккордеоны позволяют пользователям расширять и сворачивать разделы контента. Они помогают пользователям быстро перемещаться по материалам и позволяют дизайнеру пользовательского интерфейса включать большие объемы информации в ограниченном пространстве.

Хлебные крошки (Breadcrumb)

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

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Лента (Feed)

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

Loader

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

Модальное окно (popup)

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Ползунок (Slider Controls)

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

Stepper

Stepper — это элементы управления, которые позволяют пользователям регулировать значение. Однако, в отличие от ползунков, они позволяют пользователям изменять значение только в заранее определенных диапазонах, с заранее установленым шагом.

Тэг (Tag)

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

Tab Bar

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

Барабан

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

Сохранение изображения

Сделайте невидимым фоновый слой, щелкнув на иконку в виде глаза напротив слоя. Находясь на группе слоев active в палитре слоев, нажмите Ctrl+Shift+Alt+E, чтобы создать новый слой, который включит в себя все видимые части изображения (в нашем случае это кнопки). Затем перейдите на этот слой. После этого, используя любой инструмент выделения, создайте область выделения вокруг изображения, как на рисунке:

Нажмите Ctrl+C, чтобы скопировать изображение и создайте новый документ:

Обратите внимание, что документ создается уже с теми размерами, которые включают в себя все видимые части скопированного изображения. После создания изображения, нажмите Ctrl+V, чтобы вставить наши кнопки

Сделайте невидимым фоновый слой и перейдите Save for Web. Сохраните файл под названием buttons.png.

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

Градиентный фон

Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

Для горизонтального градиента слева направо добавится ещё один параметр to right:

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba(). Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.

В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba(). Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.

Пример 8. Градиентные кнопки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-image: linear-gradient(rgba(158,158,158,0.5), rgb(158,158,158), rgba(158,158,158,0.5)); /* Цвет фона */
color: #fff; /* Белый цвет текста */
font-size: 0.9em; /* Размер текста */
border: 2px solid rgb(158,158,158); /* Параметры рамки */
border-radius: 0.4em; /* Радиус скругления */
margin-bottom: 1rem; /* Отступ снизу */
}
.btn.primary { background-image: linear-gradient(rgba(63,81,181,0.5), rgb(63,81,181), rgba(63,81,181,0.5));
border-color: rgb(63,81,181); }
.btn.success { background-image: linear-gradient(rgba(76,176,80,0.5), rgb(76,176,80), rgba(76,176,80, 0.5));
border-color: rgb(76,176,80); }
.btn.info { background-image: linear-gradient(rgba(96,125,139,0.5), rgb(96,125,139), rgba(96,125,139,0.5));
border-color: rgb(96,125,139); }
.btn.warning { background-image: linear-gradient(rgba(255,151,0,0.5), rgb(255,151,0), rgba(255,151,0,0.5));
border-color: rgb(255,151,0); }
.btn.danger { background-image: linear-gradient(rgba(244,66,54,0.5), rgb(244,66,54), rgba(244,66,54,0.5));
border-color: rgb(244,66,54); }
</style>
</head>
<body>
<p>
<button class=»btn»>Кнопка</button>
<button class=»btn primary»>Основная кнопка</button>
<button class=»btn success»>Успех</button>
<button class=»btn info»>Информация</button>
<button class=»btn warning»>Предупреждение</button>
<button class=»btn danger»>Угроза</button>
</p>
</body>
</html>

Размер имеет значение

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

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

Указанный размер в 44 пикселя для кнопки, это условный параметр. Вам не обязательно для кликабельного элемента проставлять такие размеры, вы можете указать другие параметры. Это минимальное значение, которое обязательно должно соблюдаться для комфортной работы с приложением или веб-сайтом.

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

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

Если обратиться в руководство “Level AAA success”, то там указано, что размер  «целевых объектов указателя», требуется установить 44 на 44 пикселя, соответственно эти размеры нужно проставить в CSS. Существуют исключения, которые касаются внутренних ссылок проекта. Это связано с количеством слов и букв, которые используются в ссылке. Поэтому здесь разработчику придется использовать другие параметры и после каждого изменения тестировать полученный результат на смартфоне. Слишком большие слова влияют на внешний вид приложения, если просмотр ведется с телефона.

Призрачная кнопка

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

В качестве примера представлена форма логина и регистрации приложения ресторана. Здесь вы видите 3 типа кнопок:

1. основная CTA-кнопка представлена заполненным элементом как наиболее простой способ быстрой регистрации;
2. призрачная — обеспечивает доступ к менее известному варианту;
3. текстовая — в виде ответа на вопрос выделена цветом и интегрирована в строку внизу экрана.

Подобный подход в дизайне помогает реализовать четкую иерархию интерактивных объектов/элементов на экране.

Сенсорные цели

Размер кнопки для настольных приборов

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

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

Размер кнопки для сенсорного экрана

Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.

Итак, какого размера нужно делать кнопки? Вот что говорят эксперты:

Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.

Вывод

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

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