Новости IT и строительства

Тeoрия и принципы пoстрoeния мoдульнoй сeтки

Дaтa oпубликoвaния: 21.03.2017
Aвтoр: Зeлл Лью (Zell Liew)
Пeрeвoд: Крaсный Вoрoтник-З

Я бы слишкoм oчeвиднo, eсли бы скaзaл, чтo сeть игрaeт вaжную рoль в вeб-дизaйнe. Вы этo знaeтe. Вы, кoнeчнo, дoлжны сoздaть сeть с испoльзoвaниeм фрeймвoркoв типa Foundation или Bootstrap. A мoжeт быть, дaжe сoздaть кaстoмную сeть вручную или с пoмoщью инструмeнтoв типa Susy.

Нo трe ли л вы сeбe вoпрoсы сeть, чтo сдeлaл?

• Тaк кoлoнки нужны?

• Будeт ли звучит oдин рaзмeр?

• Нaскoлькo бoльшoй дoлжнa быть стoлбцы и мeжкoлoнoчныe прoбeлы.

• A сeть смoтрeть нa рaзныx экрaнax?

Я ищу oтвeты нa эти вoпрoсы в пoслeдниe нeскoлькo мeсяцeв. И в этoй стaтьe сoбрaнo всe, чтo я нa дaнный мoмeнт знaю сeтeй. Я нaдeюсь, чтo вaм этo пoмoжeт, и вы мoжeтe нaйти oтвeты нa интeрeсующиe вoпрoсы.

Нeoбxoдимo вeб-сaйт, мoбильнoe прилoжeниe, услуги пo SEO или кoнтeкстнaя рeклaмa? Кoнкурснaя плoщaдкa WORKSPACE пoмoжeт выбрaть oптимaльный и). Бaзa прoeктa нaсчитывaeт бoлee 10 500 aгeнтств. Услугa дeйствуeт БEСПЛAТНO или зaкaзчикoв и испoлнитeлeй.

Будeт ли звучит oдин рaзмeр?

Этo пeрвый вoпрoс, кoтoрый вы дoлжны сeбe зaдaть, кaк начать работать в сети, к Сожалению, многие принимают этот шаг и сразу переходят к той же размерах столбцы. Вероятно, это происходит из-за известных систем типа Bootstrap и Foundation, которые работают с такими фреймворками.

Система сетей, равной ширине колонны надежный и универсальный. Это создает безопасную и функциональную структуру, которая позволяет проверить свои макетами, обеспечивая формальный опыт. У вас просто не получится пойти по неправильному пути, если вы работаете сетки с тот же разъем.

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

Колонки с равной шириной

«Основная проблема ВСЕХ генераторов сетей и фреймворков в том, что они предполагают,
что вы хотите, чтобы колонки с равной ширины».

Марк Болтон

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

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

Колонки разной ширины

Таким образом, такой же ширины или разные? Вот несколько фактов, которые стоит учесть.

Во-первых, что вы используете какие-либо фреймворки?

Если ваша команда любит использовать фреймворки типа Bootstrap или Foundation, то можно сказать, что сетку вы уже выбрали. Это стандартный 12-колоночная сетка с тот же разъем (только если вы решите разорвать сеть).

Во-вторых, какой дизайн вы хотите?

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

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

В-третьих, насколько сложным ваш сайт?

Сколько вы разных макетов? Сколько у вас страниц?

Если сайт сложный, с использованием сети разъем для равной ширины в дальнейшем может вас спасти.

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

В-четвертых, может ли ваша команда, чтобы преодолеть сложности код?

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

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

Так что действуйте: Вы можете создать дизайн с ума сетки, если ваша команда может реализовать их. И не забудьте обсудить это ваша разработчиков: будет ли им удобно делать.

Что я могу использовать?

Хороший вопрос.

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

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

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

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

А теперь давайте перейдем к следующему вопросу.

Потому столбцов лучше использовать?

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

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

Возможно, макет сайта

В этом случае можно использовать 8 столбцов, как здесь.

Возможно, макет веб-сайта 8-колоночной сетке

В зависимости от содержания и пропорциях, можно также использовать 10-колоночную сеть.

Возможно, макет веб-сайта 10-колоночной сетке

Ну, и конечно, можно использовать 12-колоночную сетку:

Возможно, макет веб-сайта 12-колоночной сетке

Не только правильно ответить на несколько столбцов или столбцов вы лучше использовать. Ваш арт правильно было сделано, пока все ваши вещи хорошо в это вписывается.

Если у вас есть какие-либо представление о типе содержимого или форматирования, который вы создаете (искренне надеюсь, что это не так), то лучший способ начать «гибкий» 12-колоночной сетки.

12-колоночную сетку можно разделить на 6 симметричных блоков:

Симметричные блоки 12-колоночной сетки

Это также позволяет сломать макет в любом из следующих возможных комбинаций:

Возможные сочетания 12-колоночной сетки

Гибкость 12-колоночной сетки объясняет его популярность Bootstrap и Foundation, которые раз используют 12 столбов для сетки.

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

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

Насколько большой должна быть столбцы и межколоночные пробелы.

Есть два способа выбрать размер столбцов и упущения.

Первый способ — это, так называемый, «вверх-вниз принцип» Здесь вы должны выбрать размер сеть десктопе. Скажем, это 1140 px (или 960 px). Номер, который вы выбираете, чтобы поделиться много цифр (2, 3, 4, 5, 6, 8, 10, 12), что позволяет легко рассчитать размер вашей колонны и упущения.

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

Скажем, вы сети 1140 px, 12 столбцов и размер межколоночных пробелов 20 px, то размер колонки, вы должны 75 px. (1140? 12 — 20).

В Эскиз»е есть отличный инструмент, который поможет вам легко создать сеть. (Примечание: распределение межколоночных пробелов за пределами вашей сети значительно упрощает расчеты):

Инструмент Сетка, встроенный Эскиз

«Top-down» принцип простой. Мы уже несколько лет, чтобы создать такую сеть. Как правило, используют эти числа: 960, 1080, 1140, 1440, 1560. (Совет: выбрать любое из чисел, и добавить 60 px или 120 px, и вы получите хороший размер).

Недостаток сверху вниз принципы — его основа, сама последовательность «сверху вниз». Представьте себе менеджера, который делает так, как ему сказали больше, чем. Иногда эти инструкции не имеют смысла и не вписывается в дизайн. Приготовьтесь сделать небольшие изменения, или пойти на жертвы на уровне элементов вашего дизайна.

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

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

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

Некоторые дизайнеры предпочитают использовать простой в использовании № 10 px или 20 px для межколоночных пробелов. Затем их экстраполируют и создать размеры столбцов, которые могут быть более 3 или 4 раз, чем пробелы.

Скажем, ваш межколоночные пробелы в 20 px, а колонка в 3 раза больше, в конце концов, вы получите сеть размером 960 px (20 px 12 + 60 px 12).

Возвышающиеся принцип создания сети

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

Поэтому, вместо того, чтобы взять эти магические числа, я предпочитаю использовать то, что пришли типографики на сайте. Это число — line-height основной текст, потому что это базовой линии вертикального ритма.

Я использую базовой линии, вертикальный ритм как межколоночные пробелы

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

После того, как были определены межколоночные пробелы, я умножаю их на 2, 3 или 4 раза, чтобы получить размер столбцов. Затем я вычисляю размер арт.

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

А сетка находит свое отражение в различных экранов

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

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

Давайте посмотрим, что это означает.

Адаптивные сети это те люди, которые адаптироваться в различных брейкпоинтам. Это означает, что ваши башни и пробелы остается фиксированной, и вы просто меняет количество столбцов, в зависимости от требований проекта. На практике, в случае изменения размера браузера, это выглядит в анимации ниже:

Адаптивные сети

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

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

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

Резиновые сеть

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

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

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

Наоборот. Если вы можете увеличить размер окна, то получите точку, где башни и упущения станут очень большой. (Представьте себе дисплей с разрешением 2560 пикселей, в котором ограничитель сеть 90% — в ширину. *Боюсь даже думать*).

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

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

Первый вариант, это совместить плюсы адаптивного и резинового подходы. Это означает, что вы измените размер столбцов и упущения пропорционально, а ширина экрана меняется. Затем, в определенный брейкпоинте, где ваш дизайн «портятся», вы измените количество столбцов и, соответственно, корректируете ваш дизайн. Из-за отсутствия лучшего слова назовем это гибридным подходом. Вот как это выглядит:

Гибридные сети

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

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

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

Сеть фиксированной межколоночными пробелами

Вы знаете, что Bootstrap и Foundation использует подход с фиксированным межколоночными пробелами в своих сетках? Если вы посмотрите на код и фреймворки, то вы увидите, что ширина колонок дается в процентах, а пробелы записываются в пикселях или rem.

Какой метод лучше использовать?

В обоих случаях хорошо, так что работайте, которого вы попадет в душу.

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

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

Несмотря на то, что я предпочитаю подход с фиксированным пробелами, я не согласен, как Bootstrap и Foundation создают свои арт. Я объяснил свое мнение в предыдущей статье, так что я не буду здесь это обсуждать.

Кроме того, я расскажу, как я создал сетку с помощью фиксированной недостатков в следующей статье, которая в основном посвящена проектированию сетей.

В конце

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

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

В то время как вы все еще должны свыкнуться с мыслью о том, что арт-индивидуальный. И это, пожалуй, самое сложное в создании сети. Не зацикливайтесь, пытаясь найти идеальные размеры (как я однажды сделал), но использовать какой-либо один из указанных выше принципов и начать создавать сеть!