Мотивы для написания этой заметки пришли мне в голову тогда, когда я работал над социальными кнопками для одного сервиса в рамках общего редизайна сайта. Техническое задание по кнопкам было не замысловатым. Логотип сайта, цвет, определенные надписи и, конечно, разные размеры по высоте, чтобы веб-мастерам было из чего выбирать. 16px, 18px, 20px, 22px, 24px, горизонтальный вариант, вертикальный, с счетчиком и без. Обычно я дотошен до каждого пикселя. Мутную мазню не из расплывающихся полосок не люблю. А тут миниатюрные кнопочки, где надо быть особенно аккуратным.
Для начала я открыл все имеющиеся популярные кнопки, что бы сделать что-то отличное от них хотя бы в деталях. Общее свойство всех кнопок — счетчик привязан к кнопке при помощи треугольного хвостика. Его дизайн я и решил видоизменить. Но этот вариант принят не был. Возникли многочисленные правки из-за которых мой хвостик пришлось бы каждый раз делать по разному (показать первый вариант не могу, удалил). В итоге я вернулся к стандартной привычной реализации, и здесь я столкнулся с нюансом о котором никогда не думал.
Вы никогда не задумывались, почему все социальные кнопки имеют четную высоту, а хвостик счетчика располагается не по центру? Причина этой странности в пиксельном перфекционизме (да, это мой термин для обозначения perfect pixel). Если уголок хвостика острый, на верхушку придется 1 пиксель, значит общее количество пикселей будет нечетным. И расположить такой хвостик по центру не получится. От сюда возникают 2 вопроса. Как быть, и почему высота кнопки должна быть обязательно четной? Изучая разные социальные кнопки я нашел поистине массу забавных решений чтобы обойти эти сложности. То есть и хвостик сделать острым, и расположить ровно.
Вконтакте Нравится
Например первая социальная сеть Русского мира Вконтакте подошла к вопросу с точки зрения махрового пиксельного перфекционизма. Уголки счетчика тут слегка полупрозрачны, для придания плавности овальной фигуре. А вот хвостик счетчика отрисовали по пикселю, подчистив от полупрозрачных областей. Кнопка Мне нравится представлена в четных вариантах высоты 16, 18, 20 и тд пикселей. Уголок хвостика при таких раскладах не выровнять по центру, поэтому вконтакте пожертвовали центровкой в угоду четкости отображения.
С размерами вроде бы все понятно. Добавь 1 лишний пиксель и остный уголок встанет по центру. Но удобны ли для выбора размеры вроде 17, 19, 21 и 23 пикселя?
Facebook Like
Западный Facebook, как ни странно, пиксельной дорошностью озабочен не так сильно. Кнопка Like от Фэисбука поставляется в одном экземпляре. Никаких тебе манипуляций с размером по высоте, бери какое дают. Дают при этом кнопку с четкими краями. Хвостик с четным количеством пикселей. За счет этого пропадает острая макушка, на неё приходится 2 пикселя. Зато везде все поровну.
Решение откровенно небрежное. Нет ничего плохого в двух пиксельном наконечнике, но мутное пятно на хвостике смотрится не очень хорошо. Пиксельные перфекционисты в ужасе. Лично я нарисовал тоже самое с дотошностью до каждой точки. Смотрел сблизи и издали. Четкое смотрится лучше. Рваность пикселей не заметна. Размазанное смотрится хуже.
Google +
Кнопка Google поставляется в 3-х горизонтальных форматах. Маленький, средний и стандартный. Размеры не написаны, но тем не менее высота стандартной и средней кнопки все равно четные. 20 и 22 пикселя. Уголок острый, но не без полу-прозрачностей. Здесь они правда направлены во внутрь и выглядят очень хорошо. Не как клякса Фэисбука. Однако за счет острого уголка и четной высоты кнопки уголок опять не по центру. Решение как у Вконтакте, но без пиксельной дотошности.
А вот с маленькой кнопкой все по другому. Её высота в отличии от двух крупных не четная — 15 пикселей. Вроде бы и хорошо. Можно сделать и острый наконечник и расположить его по центру. Но дизайнеры Google сдвигают его чуть ниже. Так что бы наконечник стал двух пиксельным, но визуально все еще острым.
Проще всего обстоят дела у Пинтереста. Они нарисовали обычную кнопку с отличным от других кнопок, наконечником. Полупрозрачность обычная, никаких ухищрений. Высота кнопки 20 пикселей. С уголком не мучились. Сделали его мягким и 2-х пиксельным.
Лично я посчитал такой подход наиболее разумным и ориентировался именно на него, при отрисовке своих кнопочек.