Как использовать пиксельную сетку?

Question

[nickostyle]

До сегодняшнего дня делал все на глаз. Отступы и размеры устанавливались в соответствии с моим эстетическим видением. Безусловно, я пытаюсь сохранять одинаковые отступы между схожими блоками, например между полями формы, но для этого мне приходится все время "бегать" в макеты других страниц, чтобы подсмотреть значения, так как все их я не помню. Мне это надоело, решил научиться работать с пиксельной сеткой, чтобы добиться какой то системности и единообразия в дизайне - устанавливаешь правила один раз и идешь по ним, не задумываясь, какой нужен отступ. В данный момент читаю про 8pt сетку, которую рекомендует Apple и некоторые блоггеры в сфере дизайна. И сразу возникает дилетантский вопрос: если мы везде используем инкременты 8pt, то как же творчество? Допустим, я нарисовал кнопку, которая выглядит круто, но никак не вписывается в данную сетку? Ну не 8, ни 16 пикселей не подходит для отступа слева, нужно именно 10. Что делать в таких случаях? Или другой пример: нужен инпут высотой в 20 пикселей, не 16, не 24, не 32, а именно 20. Как здесь поступить? Есть какой то общепринятый workflow? Научите работать с этими сетками, пожалуйста :) Спасибо!

Answer 1

[Илья Дзенски]

Без проблем! Вы читаете про 8пкс сетку, но я часто использую в работе 4пкс сетку (сложные проекты или мелкие элементы). Работать с ней, безусловно, сложнее, но тем не менее вы получаете большую свободу творчества (так как отступ той же кнопки может быть 4, 8, 12, 16, 20, 24 пикселя, а не только каноничные 8, 16, 24). Попробуйте, может это то, что вам нужно!

Answer 2

[Максим Тимофеев]

то как же творчество?

А разве творчество это проявление кривости?

В данный момент читаю про 8pt

У Вас в тексте то pt то px, вы определитесь.

Или другой пример: нужен инпут высотой в 20 пикселей

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

Сетки придумали для удобства, что бы блоки в них были на одном уровне и т.д. С появлением scss и less все это стало еще удобнее. Ибо можно задать значения и потом ими пользоваться, например:

@margin-size: 15px;
@color-default: #fff;
.some-my-block {
margin: @margin-size auto;
padding: @margin-size;
color: @color-default;
}

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

Comments

[nickostyle]

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

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

[Максим Тимофеев]

nickostyle, https://rim89.wordpress.com/2010/02/05/таблица-соо...

Если взглянуть на мои работы

Так не прячьте их, давайте взглянем

Другое дело, что добиваться этого приходится постоянной сверкой значений, чтобы все выглядело единообразно

И люди которые устали от онанизма придумали сетки.

если по-вашему я сделаю отступ не по сетке, то, получается, я нарушаю правило, которое сам же установил

нарушаете и что? Кто-то придет Вас расстрелять?

зачем оно тогда нужно

для удобства. Разработка идет все равно быстрее

[nickostyle]

в мобильных интерфейсах pt - условная единица измерения, которая умножается на scale factor, в масштабе 1x 10pt=10px, это значит, что для ретины, где скейл-фактор равен двум 10pt = 20px. Так как все все интерфейсы рисуются сейчас в векторе и, в связи с этим, в масштабе 1x, то pt принимаются за px и никто не заморачивается. В верстке сайтов - другая история, там разница есть и имеет практическое значение.

[nickostyle]

Максим Тимофеев, я просто неточно выразился, проблему начал решать как раз на этапе разработки UI для мобилы и поэтому намешал и pt, и px в вопросе.

[Максим Тимофеев]

В верстке сайтов - другая история

У Вас в тегах "верстка", так что как я должен был догадаться, что Вы о чем-то другом - загадка.

[GreatRash]

nickostyle

в мобильных интерфейсах pt - условная единица измерения, которая умножается на scale factor, в масштабе 1x 10pt=10px, это значит, что для ретины, где скейл-фактор равен двум 10pt = 20px.

Но это не так :)

pt (points) - используются только для печати, больше они ни для чего не нужны
dp (device pixel) - используется в мобильных интерфейсах

Если кратко, то в мобилках/планшетах/прочихретинах 10px - это всегда 10px. Где вас учат, что 10px на ретине превращается в 20?

[nickostyle]

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

[GreatRash]

nickostyle, где вы претензии увидели? По-моему, вы просто сноб.

[Максим Тимофеев]

nickostyle,

с претензиями к моему образованию

что-то не вижу таковых

[nickostyle]

Максим Тимофеев, я уже убрал тег "верстка", чтобы вас не беспокоить, но вы, видимо, заходите на этот сайт не с целью отвечать на вопросы. Я вот не понимаю таких людей как вы, если честно. Как вы конкретно и товарищ GreatRush. Вам задают вопрос в максимально корректной форме, вместо того, чтобы дать 1, но максимально полезный ответ, вы начинаете сыпать цитатами из моего поста, сопровождая это своими, как вам наверняка кажется, искрометными шутками, в которых сквозит надменность и стремление поскорее съехать с темы вопроса на мою личность.

Так не прячьте их, давайте взглянем
И люди которые устали от онанизма придумали сетки.
А разве творчество это проявление кривости?
Где вас учат?...

Вот к чему все это? Вы таким образом самоутверждаетесь в собственных глазах? Где в этих фразах хоть что то, что может помочь человеку, который найдет этот вопрос и захочет узнать на него ответ?

Дискуссия окончена.