Заставьте людей понять, что они могут щелкнуть по кнопке в плоском дизайне

Я создаю отзывчивый веб-сайт flat ish , который в основном представляет собой онлайн-книгу.

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

Вот скриншот (с мобильного устройства) того, что я сделал на этом этапе. введите описание изображения здесь>> </p>

<p> Я знаю, как концепт дизайна, что он доступен для кликов. Тем не менее, я чувствую, что это не очевидно - или, по крайней мере, недостаточно - для любого случайного пользователя. </p>

<p> В браузере компьютера легко визуализировать изменения при наведении, но на планшете /мобильном устройстве я не могу понять, как это сделать. </p>

<p> Есть ли у кого-то визуальный трюк, чтобы в принципе сказать  эй, нажмите на меня ?
Я думаю, что я мог бы добавить маленький указатель в угол каждой плитки, но я не уверен, что это будет хорошо выглядеть. </p>

<hr>
<p> <strong> UPDATE </STRONG> </p>

<p> Согласно некоторым предложениям, я изменил значки, чтобы быть более релевантными. Таким образом, я могу удалить метку. </p>

<p> Я также немного осветил фоновый цвет кнопок, чтобы подчеркнуть constrat между двумя синими оттенками. </p>

<p> <img src =

75 голосов | спросил pistou 11 ThuEurope/Moscow2014-12-11T16:29:05+03:00Europe/Moscow12bEurope/MoscowThu, 11 Dec 2014 16:29:05 +0300 2014, 16:29:05

14 ответов


62

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

введите описание изображения здесь

Я очень рекомендую Material Design для получения подробной информации о том, как выбирать между плоскими кнопками и поднятыми кнопками, с исчерпывающими функциями и функциями. http://www.google.com/design/spec/components/buttons.html # кнопок-бемоль-фальш-кнопки

ответил Zoe K 11 ThuEurope/Moscow2014-12-11T18:13:42+03:00Europe/Moscow12bEurope/MoscowThu, 11 Dec 2014 18:13:42 +0300 2014, 18:13:42
17

Проблема в том, что он не достаточно плоский

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

supa flat

... И на этом этапе должно также стать очевидным, что </> никогда не был подходящим значком.

ответил hoosierEE 12 FriEurope/Moscow2014-12-12T17:36:06+03:00Europe/Moscow12bEurope/MoscowFri, 12 Dec 2014 17:36:06 +0300 2014, 17:36:06
11

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

введите описание изображения здесь>> </p></body></html>

ответил fri 12 FriEurope/Moscow2014-12-12T12:06:20+03:00Europe/Moscow12bEurope/MoscowFri, 12 Dec 2014 12:06:20 +0300 2014, 12:06:20
10

Я подумал о чем-то вроде показа первого навыка и позвольте пользователю понять это сам, что другие доступны для клики /тапки, а

(извините, у меня не так много времени, чтобы это сделать, но это может помочь)

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

ответил Pascal 11 ThuEurope/Moscow2014-12-11T16:44:19+03:00Europe/Moscow12bEurope/MoscowThu, 11 Dec 2014 16:44:19 +0300 2014, 16:44:19
7

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

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

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

ответил Arthur Harrison 11 ThuEurope/Moscow2014-12-11T16:48:45+03:00Europe/Moscow12bEurope/MoscowThu, 11 Dec 2014 16:48:45 +0300 2014, 16:48:45
7

дизайн материалов хорош, но они не плоские идеально. Я рекомендую вам эту идеальную плоскую кнопку введите описание изображения здесь>> </p>

<p> p /s: если вы хотите, чтобы люди считали, что что-то является кнопкой, вам нужно предоставить им «метку» и «значок». С этими двумя элементами большинство пользователей узнают «ах, есть кнопка, давайте нажимаем« </p></body></html>

ответил Long Eleven 12 FriEurope/Moscow2014-12-12T12:15:15+03:00Europe/Moscow12bEurope/MoscowFri, 12 Dec 2014 12:15:15 +0300 2014, 12:15:15
6

Несколько предложений:

1. Сделать ярлык визуально частью кнопки

  • Ярлыки обычно являются частью кнопки

2. Добавить светлую границу (необязательно)

  • Основные моменты без необходимости добавления глубины

3. Группируйте кнопки вместе удобно

  • Сделайте это как группа кнопок, каждая из которых имеет одинаковое значение

4. Использовать больший размер шрифта

  • Значки довольно короткие, и imo плохо балансирует против легкого шрифта

Не нажатая /нажатая кнопка Примеры:

ответил Dom 13 SatEurope/Moscow2014-12-13T21:14:47+03:00Europe/Moscow12bEurope/MoscowSat, 13 Dec 2014 21:14:47 +0300 2014, 21:14:47
5

Я согласен с Long и DesignerAnalyst, что немного стилизации делает их популярными как кнопки.

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

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

ответил Andrew Neely 13 SatEurope/Moscow2014-12-13T06:02:04+03:00Europe/Moscow12bEurope/MoscowSat, 13 Dec 2014 06:02:04 +0300 2014, 06:02:04
2

Вы также можете дать текстовую подсказку

Вы можете изменить «больше информации» на что-то более конкретное

Текстовая подсказка

ответил Viktor Mellgren 12 FriEurope/Moscow2014-12-12T14:39:47+03:00Europe/Moscow12bEurope/MoscowFri, 12 Dec 2014 14:39:47 +0300 2014, 14:39:47
2

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

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

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

  • Использовать контрастность . Теперь ваш фон имеет больший контраст с белой кнопкой, чем цвет кнопки. Это основная причина, по которой ваш дизайн выглядит не кликабельным. Переключите цвета фона и кнопок.
  • Использовать яркие основные цвета . См. выше.
  • Использовать пробелы . Убедитесь, что вы сохраняете достаточно пробелов вокруг значков кнопок. Чем больше полей, тем больше внимания получает элемент. Особенно, если эти поля заполнены ярким цветом, что хорошо контрастирует с элементами внутри него.
  • Использовать жирный текст . Белый текст на темном фоне должен быть полужирным, но на кнопке это удваивается.
  • Поместите текст внутри кнопки . Цветное окно должно инкапсулировать все, что нужно, с помощью этого параметра. Поместите текст под ним, и вы просите пользователя отобразить текст на кнопку.
  • Угловые углы . Некоторые пуристы с плоским дизайном (BBC, Microsoft) будут искать жесткие углы, но если вы не хотите идти полностью, закругленный угол - очень сильное соглашение о кликабельности.

Вот мой редизайн:

 введите описание изображения здесь>> </a> </p>

<p> Вы можете заметить, что он по-прежнему не выглядит таким кликабельным. Почему нет? Я думаю, это потому, что шесть кнопок - не очень обычный способ отобразить список навыков.
У пользователя просто нет четкого места для этого. На самом деле довольно редко есть шесть кнопок рядом друг с другом. Обычно, когда вы делаете этот тип кнопки, это самый важный элемент на странице. Я думаю, именно поэтому ваш дизайн выглядит как список значков. </p>

<p> Чтобы действительно понять суть проблемы, можно рассмотреть другой взгляд на ваш общий дизайн. Выясните, что пользователь хочет сделать в этот момент. Возможно, что-то вроде <a href= навигации на основе контента может помочь вам.

ответил Peter 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2015 11:17:56 +0300 2015, 11:17:56
0

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

ответил Michael Durrant 14 SunEurope/Moscow2014-12-14T22:29:30+03:00Europe/Moscow12bEurope/MoscowSun, 14 Dec 2014 22:29:30 +0300 2014, 22:29:30
0

Концепция дизайна материалов, вероятно, поможет вам.

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

http://www.google.com/design/spec/материал-дизайн /introduction.html

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

ответил pierre lebailly 17 WedEurope/Moscow2014-12-17T15:59:43+03:00Europe/Moscow12bEurope/MoscowWed, 17 Dec 2014 15:59:43 +0300 2014, 15:59:43
0

Ваше первое изображение похоже на галерею: на каждом значке есть метка (и неясно, что изображения можно кликать)

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

После повторного чтения он, по-видимому, принадлежит предложениям @Dom

ответил oliverpool 21 Mayam15 2015, 09:42:37
0

Сохранить 'Em Simple, Smarty

K.E.S.S.
Вы, как разработчик, создали сцену; но пользователь - настоящий исполнитель. Два разных набора навыков. Они дополняют друг друга и гармонизируют.
Ваше приложение будет иметь набор ожиданий ~> как онлайновый rà © sume, подразумевает такое взаимодействие. Нажатие и т. Д. Ваш пользователь будет понимать, что вы хотите, как типичный.

Вот моя дополнительная обратная связь на ваш вопрос:

 введите описание изображения здесь>> </a> </p>

<ul>
<li> Сохранять ярлыки с иконками кнопок. </li>
<li> Создавайте зависающие кнопки. Это проверит, что пользователь интуитивно вывел. </li>
</ul>
<p> Удачи! </p></body></html>

ответил Jedi Commymullah 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 23 Sep 2015 09:00:12 +0300 2015, 09:00:12

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132