Кнопки и их многообразие

    История кнопок в картинках от head of design Дмитрия Уколова: текстовые ссылки, скевоморфизм, Flat и Material design.


    Как всё начиналось


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


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


    Уверен, что всему этому есть технологические объяснения, но я не технический специалист и оцениваю глазами и эмоциями.


    image


    Скевоморфизм и кнопки


    Дальше было больше! Кнопки становились всё более замысловатыми: им добавляли объём, раскрашивали в разные цвета, чтобы привлекать больше внимание пользователей, делали их «стеклянными», придумывали форму – не только прямоугольник и прямоугольник с круглыми углами, но и с закругленными и овальными, иногда даже форму кнопки было сложно обозвать чем-то конкретным и многое другое. Скевоморфизм и вот это всё довольно долго правили балом в веб-дизайне. Спасибо Apple, которые произвели революцию в мобильных гаджетах и начали перекладывать привычные физические инструменты в мобильный интерфейс, чтобы пользователь не потерялся. За Apple побежали разработчики приложений и игр иии началось — калькулятор, заметки, аудиоплееры, диджейские микшеры и т.п.


    image


    Flat


    А потом пришёл флет и всё переигралось. Представьте себе, что вы, например, очень любите овсяные печеньки. Едите их и едите, едите и потом, бац! К своему неприятному удивлению, обнаруживаете, что вкус вам приелся, бывает, даже начинаешь различать нюансы, которые раньше не замечал и от них может даже начать мутить. Я вот думаю, что обилие графического многообразия, перенасыщения, сработало и в случае с кнопками – всех стало мутить от пестроты.


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


    image
    image


    Material design


    И вот появился Material design, который ввёл дополнительные вспомогательные приёмы, позволяющие выделять кнопку из общего массива элементов. Google разбили кнопки на основные типы: размещение над элементами интерфейса, визуальный эффект приподнятости, плоская кнопка «обратная связь», нажатия и наведения и другие правила. Эти правила распространяются далеко за пределы работы с кнопками и подробно описаны в документациях. Спасибо Google.


    image
    Плоская


    image
    «Летающая» кнопка


    image
    Приподнятая копка


    image
    Material design


    Типичные атрибуты современных кнопок


    Яркая и контрастная заливка для CTA (Call to Action) кнопок


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


    image
    кнопка «подписаться» на Youtube


    Призрачные кнопки с инверсией заливки


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


    image
    lagenceversions


    Прямоугольные формы с острыми и закругленными углами, кнопки, которые часто не имеют привычные нам формы кнопок


    image
    beaconrelief


    Овальные и круглые кнопки разных форм и пропорций


    image
    aconstitucion.com.ar


    «Дышащие» кнопки с вспомогательным анимационным эффектом


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


    image
    villerdl.ca


    Градиент и необычная заливка


    Заливка фона не сплошным цветом, а с применением градиента создаёт контрастный или лёгкий переход от одного оттенка к другому. Что добавляет глубины.


    image
    brandlovescore


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


    Пробуйте, экспериментируйте, предлагайте и придумывайте!
    Как менялась кнопка с 2009 года по 2017.


    image
    Wojciech Dobry


    image
    Seth Coelen

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 12

      +1
      Мне кажется, что подобные кнопки будут слишком мелкие для сенсорного экрана.
      На них удобнее попадать курсором мыши. Т.е. сменилось устройство ввода и сменился вид интерфейса.
      image
        0
        Что мешает сделать такую кнопку подходящего размера?
          +1
          Прямоугольник займет площадь больше чем окружность — не много смысла дополнительно терять площадь небольшого экрана.
          Внутри старой кнопки был текст, к которому очень подходит прямоугольная рамка. Сейчас в кнопках на экране телефонов пиктограммы, т.е. ближайший аналог из тех времен — иконка, а не кнопка.
            0
            Я не совсем улавливаю суть вашего ответа. Кнопка без текста в Windows была всегда — это кнопка на панели инструментов. Кнопка вовсе не обязана быть прямоугольной.

            «ближайший аналог из тех времен — иконка, а не кнопка» — иконка — это статическое изображение, а не кнопка.

            Тут или у вас какая-то своя собственная терминология, либо мы говорим о совершенно разных вещах
              0
              Я о том, что то, что мы сейчас называем кнопкой в интерфейсе телефона по сути ближе к иконке Win95.
              А кнопки Win95 увидеть еще можно было на телефоне с Андроид 2. А далее материальный дизайн их неузнаваемо изменил.
          +1
          ну вот такие же — они самые универсальные! единственное (ну это уже каждому свое) — какой-то цвет больно унылый.
          А так-то да, мне вот тоже, например, с курсором удобнее по четкому и прямоугольному попадать, как эта. А там где тач-скрин, то как-то приятнее, когда оно всё плавное и может полукруглое какое. Может это связано с формой пальцев :)
            0
            Да, мы когда составляли статью, увидели, как все менялось! Динамика крутая
          +1
          Сейчас в тренды влез неоморфизм. Надо его тоже упомянуть.
            0
            Да, надо обновить!)
            +2
            … а сколько до экранных кнопок еще было кнопок физических… тумблеров, переключателей, тактовых, резиновых и из металла, и проч., проч., тоже с разным дизайном и техническим воплощением.

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

          Самое читаемое