Использование Google+ для улучшения вашего UI

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

Скачать Пример

Новый вид

Новый вид Google демонстрирует довольно гладкие кнопки, которые можно увидеть в новом UI Gmail. Вы можете применить эту тему в Gmail, перейдя к Mail Settings > Themes и выбрав Preview или Preview Dense theme. gmail Кнопки не злоупотребляют такими эффектами, как градиент, тень или свечение, которые портят многие веб-приложения. Google использует некоторые из этих эффектов так ловко, что вы не можете их заметить с первого взгляда (например, линейный градиент от #F1F1F1 до #F5F5F5). У них также сильное состояние hover, что заставляет кнопку оживать, когда вы проводите над ней мышью. Кнопки полностью построены на CSS, со спрайтами для кнопок выделения (+ и -). Спрайты — удобный приём для создания кнопок, потому как позволяют вам включить в свои кнопки изображения.

Создание кнопок Google

Мы собираемся создать кнопки в стиле Google для основных действий-веб приложений: добавление, удаление, сохранение, пометка и упорядочивание. У http://iconfinder.com большой выбор иконок, которые вы можете использовать для работы со своими кнопками. Иконки, которые мы выбрали, слева. Нам нравится стиль группировки схожих кнопок, поэтому добавим его тоже.

Внедрение

Для того, чтобы внедрить новый дизайн, нужно добавить своим ссылкам отдельный CSS класс: button. Чтобы указать группируемые кнопки, добавим второй класс: left, middle или right. Чтобы использовать иконки для основных действий, добавим третий класс: add, delete, save, flag, up или down. И, наконец, четвёртый класс для больших кнопок: big. Независимо от ваших предпочтений, всегда нужно быть последовательным и делать кнопки понятными. Вы можете легко подстроить их под свои нужды. Поддержка: Firefox, Chrome, Safari, IE7+, IE6 (через Fireworks PNG transparency fix) Лицензия: Creative Commons CC-BY (требуется указание авторства)


Оставить комментарий