Noveo

Наш блог Пособие для аналитиков и дизайнеров

Пособие для аналитиков и дизайнеров

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

 

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

Пиксель

Пиксель в изображении, или по-другому pictures element – это наименьший логический элемент двумерного цифрового изображения в растровой графике. Точка имеет один цвет. Из всех этих точек складывается изображение (и не только — всё, что мы видим на экране, — пиксели).

Пиксель состоит из нескольких меньших элементов (RGB).

01

Пиксель в матрице (физический пиксель) — ячейка матрицы экрана, которая формирует изображение. Ячейка состоит тоже из 3 элементов (RGB), с помощью которых можно получить любой цвет.

02

Разрешение — размеры экрана в px (высота и ширина). На наших мониторах обычно пиксель экрана (всё, что вы видите на экране) равен физическому пикселю матрицы (это рекомендуемое разрешение в ОС).

Плотность пикселя (PPI — пиксель на дюйм, DPI — точки на дюйм):

На разных устройствах разная PPI. При отрисовке макета, по идее, всё равно, какой ppi вы зададите при вставке изображения, устройства всё равно разные. Верстальщикам и фронтенд-разработчику при вставке изображения в макет важна только высота и ширина в px.

03

 

04

Плотность пикселя бывает

  • на современных мониторах от 96 ppi — 1058 ppi (8K),
  • на современных смартфонах от 300 ppi — 500 ppi и выше.05

Пример:

06
Изображение + вывод на экран (исходное изображение 100x100px)

Если мы возьмём картинку шириной 720 px и поместим на устройства с разной PPI, но одинаковыми размерами экрана, то получим:

07

На первом телефоне (Sony) будет занята только часть экрана (720 из 1080), и изображение будет меньшего размера по сравнению со вторым телефоном (Honor).

На втором телефоне (Honor) картинка заполнит весь экран по ширине, так как ширина картинки в 720 пикселей растрового изображения равна ширине экрана в 720 физических пикселей.

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

И тут у нас появляется вопрос: куча устройств с разными разрешениями и PPI, что же делать?08

Решение этой проблемы — аппаратно-независимый пиксель (device-independent pixel — dip или dp).

Аппаратно-независимый пиксель

Аппаратно-независимый пиксель (Device-independent pixel, dip): результат масштабирования пикселей устройства до размеров опорного пикселя для просмотра с нормального расстояния, представляет собой примерно одну величину на всех устройствах.

Что же это такое — 1 dp?

На одной и той же ширине экрана умещаются 1080 или 720 физических пикселей, а это значит, что физический пиксель у Сони будет меньше, чем у Хонора.

Поделим эти кусочки на одинаковые квадраты следующим образом:

 

Назовем получившийся квадрат виртуальным пикселем, или 1 dp. Тогда у обоих смартфонов будет одно и то же количество виртуальных пикселей — 4×2 dp.

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

Вьюпорт (Viewport)

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

На этот вопрос отвечает:

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

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

Без магии вьюпорта учитывается физический пиксель.

Вектор и растр

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

  • JPEG — сжатие изображения с потерями и не поддерживает прозрачность,
  • PNG — сжатие без потерь, поддержка прозрачности,
  • SVG — качество, масштабируемость, управление.13

Как дизайнеры видят SVG и как его видят верстальщики:

Растр и что мы можем с ним делать на CSS

Решения проблем и распространенные баги

  1. То, что можно отрисовать в векторе, отрисовываем в векторе.
  2. Растр — предоставлять изображения x3-x4.
  3. На примере изображений мы можем пропорционально ширине экрана растянуть изображение (но будет потеря качества, если картинка очень маленькая), либо сделать ограничение по ширине, и больше этого ограничения изображение не будет растягиваться.
  4. Делать цельные пиксели, никаких половинок и сотых: например, 16.36 px очень плохо для любого элемента в макете — от размера изображений и шрифтов до отступов; причина — ppi, неудобство переиспользования и т.д.
  5. Нужно понимать, что часть “иконок” мы можем сделать с помощью СSS, например стрелочки >, кружочки, кнопка “X”, но было бы неплохо всё это всё равно предоставлять в SVG, так как что-то менее затратно на SVG, нежели на CSS.

Брейкпоинты (контрольная точка)

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

 

Макет и CSS-брейкпоинты

16

Хорошее веб-приложение должно выглядеть отлично на любом брейкпоинте. Как мы выяснили ранее, разрешений, а значит, и “брейкпоинтов” несчитанное количество. Поэтому сайты от 320 px до 1920 px верстаются так, чтобы это выглядело на любой из точек отлично. При отрисовке макета дизайнеры должны учитывать самые популярные брейкпоинты, например, макет может быть 375 px и 768 px или 1024 px и 1920 px. Но нужно учитывать, как отрисованный контент будет выглядеть и поместится ли он вообще, например, при 320 px.

Медиавыражения (Media queries)

Медиавыражения (media queries) являются ключевым компонентом отзывчивого дизайна, который позволяет CSS адаптироваться в зависимости от различных параметров или характеристик устройства.

17

Перестроение контента на брейкпоинтах:

Популярные брейкпоинты

  • 320 px — 480 px: мобильные устройства;
  • 481 px — 768 px: планшеты;
  • 769 px — 1024 px: маленькие экраны, ноутбуки;
  • 1025 px — 1200 px: большие экраны;
  • 1201 px и больше — очень большие экраны, телевизоры.

 

Лучше брать:

  1. для mobile — 375 px (но с учётом, что на 320 px будет смотреться хорошо, контент влезет);
  2. для tablet (портретная ориентация) — 768 px: именно отсюда начинаются какие-то глобальные перестроения для планшетов, если планшет меньше 768 px — возьмётся версия для мобилки, ещё лучше;
  3. для desktop — 1025 px: начало для маленьких экранов, ноутбуков; как правило, отсюда мы начинаем перестроения под десктоп;
  4. для desktop — 1920 px: самый большой вариант для десктопа (как правило, есть контейнер,в котором помещается основной контент, вы его сами определяете, например 1600 px).

Брейкпоинты (контрольная точка). Выводы

  1. Контент должен смотреться отлично на любой точке, начиная от 320 до 1920 и больше.
  2. Дизайнеру достаточно отрисовать 3-4 варианта брейкпоинтов.
  3. Дизайнер должен понимать перестроение блоков на мобильной версии сайта и на десктопной.
  4. Заранее представлять, как будет вести себя контент при расширении страницы или сужении, например от 320 px до 375 px (допустим, эту версию вы отрисовали) или от 768 px до 1025 px и т.п.

В чём отличие адаптивного дизайна от респонсив?

Responsive Design (RWD), отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;

 

Adaptive Design (AWD), адаптивный дизайн, или динамический показ — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.

Подходы Mobile First и Desktop First

Mobile first — разработка интерфейса начинается с мобильных устройств.

Desktop first — адаптация старого дизайна под устройства с меньшими экранами.

Какой минимум необходим верстальщикам и фронтенд-разработчикам для успешной работы над сайтом?

  1. Сразу макеты и desktop-версии, и mobile (чтобы мы сразу могли учитывать в разметке перестроение блоков).
  2. Дизайнеры должны понимать, что мы используем подход “отзывчивого” дизайна, то есть на любом брейкпоинте наш сайт должен выглядеть хорошо, и при отрисовке нужно это учитывать: сужение/расширение контента вне зависимости от того, какой подход мы используем — mobile first или desktop.

Типографика

Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста.

Сейчас мы рассмотрим основные аспекты современной веб-типографики.

CSS — свойства для веб-типографики:

  • font-family
  • font-size
  • letter-spacing
  • word-spacing
  • line-height
  • font-kerning
  • font-stretch
  • font-variant
  • font-style
  • font-weight
  • text-decoration
  • word-wrap, word-break, overflow-wrap

Семейство шрифтов (СSS-свойство: font-family)

font-family: имя шрифта [, имя шрифта[, ...]] | inherit

 

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

19

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Виды шрифтов

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

Межсимвольный интервал, интервал между словами и межстрочный интервал

Межсимвольный интервал

letter-spacing: значение | normal | inherit

 

CSS-свойство letter-spacing определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы.

Интервал между словами

word-spacing: <размер> | normal | inherit

 

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

 

Межстрочный интервал

line-height: множитель | значение | проценты | normal | inherit

 

CSS-свойство line-height устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

Выравнивание текста (выключка)

text-align: center | justify | left | right | start | end

 

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

Кёрнинг

font-kerning: auto | normal | none

 

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

Начертание шрифта

font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

 

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Влияние разных значений font-stretch на вид букв в тексте показано на картинке.

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

font-style: normal | italic | oblique | inherit

 

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

26

Капитель

font-variant: normal | small-caps | inherit

 

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

Насыщенность шрифта

Свойство font-weight устанавливает насыщенность шрифта.

 

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

 

Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

28

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Оформление текста

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

 

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Переносы

word-wrap: normal | break-word | inherit

word-break: normal | break-all | keep-all

 

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

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

Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.

Дефисы

hyphens: none | manual | auto

 

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

Единицы измерения

  • Абсолютные единицы измерения,
  • относительные единицы измерения.

 

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

Единица em — просто размер шрифта.

Единица rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента своим, rem для всего документа один и тот же.

Можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает). Шрифты, единицы вьюпорта не реагируют на масштабирование страницы.

Абсолютные единицы измерения

Относительные единицы измерения

Размер шрифта

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

 

34

Советы дизайнерам и аналитикам

Совет 1. Учитывать одну версию при отрисовке компонентов которую, как базу, разработчики берут с UI Kit. Также нужно учитывать, что табы не должны занимать 50% контента на мобилке.

Совет 2. Ширина/высота элементов: если она не сильно значительная, используйте один размер. Как правило, инпутам задаются размеры xs-xl. Чем их меньше, тем лучше, быстрее. Это касается не только инпутов, но всех элементов и свойств к нему: если у нас есть h1 с размером 32 px на десктопе, а на мобилке 24 px, то везде в макетах так и должно быть.

Совет 3. Не нужно 50 оттенков серого, достаточно запилить пару-тройку основных. То же касается и других оттенков (не серого).

Совет 4. Перестроение контента нужно учитывать всегда. То, что влезает на 1024, может не влезть на 768.

Совет 5. Никаких сотых, десятых, только целые числа, только одинаковые отступы у одинаковых компонентов. Задайте себе один отступ и используйте его. Это сэкономит время верстальщику, а может, и заказчику — в случае, если он начнёт сравнивать по макету.

Совет 6. Использовать сетку или столбцы, чтобы выровнять отдельные части и соблюсти логику отступов.

40

Совет 7. Если объекты должны взаимодействовать друг с другом, можно создать анимированный прототип, демонстрирующий весь интерактив.

Совет 8. Создание структуры в панели слоев.

Совет 9. Нестандартные начертания шрифтов могут по-разному отображаться в браузерах, стоит об этом помнить.

Совет 10. Высылать файл/ссылку с медиа (видео, иконки и т.д.). Если используете шрифт из Google Fonts, добавьте ссылку на него.

Совет 11. Указывать гарнитуру, кегль, начертание, межстрочный интервал и поведение текста при переносе на экран большего/меньшего размера.

Совет 12. Показывать состояние текста, когда он переполнен: нужно ли ставить многоточие? Нужно ли резать по строчкам?

Совет 13. Предоставить UI-кит до начала разработки:

  1. Когда унификация отсутствует, то время на разработку увеличивается => увеличивается стоимость продукта.
  2. Есть вероятность, что разработчик возьмет что-то среднее или задаст первые значения, которые ему попадутся.

Совет 14. Если вводятся нетипичные стили, то оставлять комментарии с объяснением первопричины подобной меры.

Совет 15. Показывать состояние элементов и компонентов: наведение мыши, состояние календарей, раскрывающегося списка или других элементов формы и т.д.

Важно:

  1. На тач-устройствах нет эффекта наведения мыши.
  2. Прорисовывать состояния фокуса на элементе.

Совет 16. Если объекты должны взаимодействовать друг с другом, стоит создать анимированный прототип, демонстрирующий весь интерактив.

Совет 17. Если используется библиотека  bootstrap, select2 и т.д.), нужно явно сказать, что она будет использоваться, и использовать ее основные концепции и принципы.

Совет 18. Некоторые вещи сложно или невозможно реализовать на сайте, нужно иметь базовое представление о html/CSS (курсы на htmlacademy).

Совет 19. Думать о доступности сайта (a11y).

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: