отступы в мобильных приложениях
Мобильная типографика
При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).
Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.
Размер
Одна из самых часто встречающихся проблем чтения сайтов на мобильных устройствах — это слишком маленький размер шрифта. Приходится постоянное масштабировать сайт, чтобы прочитать мелкий текст, а это очень раздражает пользователя. Даже если у сайта есть мобильная версия или адаптивный дизайн, проблема плохой читаемости из-за мелкого шрифта встречается нередко.
В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).
Пример сайта с соотношением размеров шрифтов 16/24/72: 
Контраст
Любой текст на сайте должен контрастировать с фоном, как при просмотре на десктопе, так и на мобильном устройстве. Этим, вроде бы простым и очевидным, правилом часто пренебрегают, поэтому случается видеть красный текст на фиолетовом фоне или желтый на голубом.
Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.
Отступы
У разных устройств разные размеры экранов, а также различное соотношение сторон дисплея. Необходимо это помнить при верстке сайта, текст удобно читать при достаточных отступах от краев и правильном межстрочном интервале. Особенно это касается чтения текста на мобильном устройстве. Примеры:
Выбор шрифта
Выбрать шрифты, которые будут корректно отображаться на любом устройстве и любой ОС, — задача не простая. Очень важно учитывать, как шрифт будет рендериться на различных девайсах, например:
Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.
Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:
Адаптивный дизайн
Все вышеописанное необходимо учитывать и при разработке адаптивного дизайна, при этом особое внимание стоит уделить изменению размеров шрифтов, отступам и длине строк. И конечно тестированию получившейся верстки.
Изменение размера шрифта
На большинстве сайтов используются px или em для того, чтобы задать размер шрифта. Em предпочтительнее, потому что позволяет пользователю менять размер шрифта в браузере. Но есть и недостаток — размер в em зависит от font-size родительского элемента. Поэтому лучше использовать rem: размер шрифта будет зависеть от корневого элемента — html:
Пример с media queries:
Отступы и длина строк
Согласно исследованию Baymard Institute, оптимальная длина строки для удобного чтения — от 50 до 75 символов. Непросто добиться автоматического соответствия этому правилу на любом устройстве. Например, размер шрифта девайса по-умолчанию — 16 px, а мы хотим использовать 20 px. Получается, что наш шрифт должен быть размером 1.25 rem. Блок текста делаем шириной 675 px, тогда в строке будет помещаться 60 символов:
Таким образом можно прописать контейнеры для экранов с любыми размерами. Для лучшей читаемости на больших экранах можно еще разместить контент в две колонки:
При ширине более 1140 пикселей текст будет разбит на два столбца.
Pixel-perfect верстка Android макетов
Разрабатывать интерфейс Android приложений — непростая задача. Приходится учитывать разнообразие разрешений и плотностей пикселей (DPI). Под катом практические советы о верстке макетов дизайна Android приложений в Layout, который совпадает с макетом на одном устройстве а на остальных растягивается без явных нарушений дизайна: выхода шрифтов за границы; огромных пустых мест и других артефактов.
UPD: Пост спорный, но много ценных советов в комментариях
UPD: Мне искренне жаль, я как маркетолог, не до конца разобрался с темой и не передал самую главную идею поста. Этот метод использовался на проекте, где заказчик предоставлял дизайн и его требованием было чтобы он выглядел максимально одинаково на всех устройствах. Исходя из этого и появился такой метод верстки, он спорный и подходит не всегда.
Используйте разные значения размера шрифта для разных разрешений экрана.
в values\dimens.xml text_size=16sp
в values-sw600dp\dimens.xml text_size=20sp
в values-sw720dp\dimens.xml text_size=24sp
Если нужно, присмотритесь к нашей идее в посте.
На iPhone layout задаются абсолютно и всего под два экрана iPhone 4 и iPhone 5. Рисуем два макета, пишем приложение и накладываем полупрозрачные скриншоты на макеты. Проблем нет, воля дизайнера ясна, проверить что она исполнена может сам разработчик, тестировщик или, даже, билд-сервер.
Под Android у нас две проблемы: нельзя нарисовать бесконечное число макетов и нельзя сверить бесконечное число устройств с конечным числом макетов. Дизайнеры проверяют вручную. Разработчики же часто понятия не имеют как правильно растягивать элементы и масштабировать шрифты. Количество итераций стремится к бесконечности.
Чтобы упорядочить хаос мы пришли к следующему алгоритму верстки. Макеты рисуются и верстаются под любой флагманский full-hd телефон. На остальных красиво адаптируются. Готовое приложение проверяет дизайнер на популярных моделях смартфонов. Метод работает для всех телефонов, для планшетов (>6.5 дюймов) требуются отдельные макеты и верстка.
Под рукой у меня только Nexus 4 возьмем его характеристики экрана для примера.
Макеты ненастоящего приложения-портфолио которые будем верстать (полноразмерные по клику). 
Layout
Основную верстку делаем через вложенные LinearLayout. Размеры элементов и блоков в пикселях переносим с макета в weight и weightSum соответственно. Отступы верстаем FrameLayout или в нужных местах добавляем Gravity.
Для примера сверстаем ячейку списка приложений:
Дальше нам потребуется много DisplayMetrics-магии, напишем для него static helper.
1184 это высота Nexus 4 без кнопок, 768 — ширина. Эти значения используются, чтобы выяснить во сколько раз высота и ширина устройства, на котором запущено приложение, отличаются от эталонного.
ScrollView и List
Подход с weightSum не примемим к прокручивающимся элементам, их внутренний размер вдоль прокрутки ничем не ограничен. Для верстки ScrollView и List нам потребуется задать их размеры в коде (130 — высота элемента списка).
И дальше можно применять трюк с weightSum.
Картинки
Размер иконок приложений задается в коде:
Где 240 высота элемента списка, 20 высота отступа сверху и снизу.
Шрифты
Андроид не предоставляет единицу измерения пропорциональную размеру экрана. Размеры шрифтов рассчитываем на основании диагонали устройства:
Да, размеры шрифта придется задавать в коде (36 размер шрифта в пикселях на оригинальном макете).
Советы по работе с графикой
1. Используйте Nine-patch везде где возможно, где невозможно — перерисуйте дизайн.
2. Простые элементы рисуйте с помощью Shape
3. Избегайте масштабирования изображений в runtime
Nine-patch это графический ресурс содержащий в себе мета-информацию о том как он должен растягиваться. Подробнее в документации Android или на Хабре.
Nine-patch нужно нарезать под все dpi: ldpi mdpi tvdpi hdpi, xhdpi, xxhdpi. Масштабирование ресурсов во время работы приложения это плохо, а масштабирование Nine-Patch приводит к неожиданным артефактам. Ни в коем случае не задавайте в Nine-patch отступы, они оформляются отдельными элементами layout, чтобы растягиваться пропорционально контенту.
Shape
Если ресурс легко раскладывается на простые геометрические фигуры и градиенты лучше вместо нарезки использовать xml-shape. Для примера нарисуем фон рамку вокруг проекта в списке, которую мы выше нарезали как Nine-patch.
Картинки
Масштабирование графики силами Android трудоемкая и затратная по памяти операция. Картинки внутри Android обрабатываются как bitmap. Например, наш логотип в размере 500×500 со сплешскрина распакуется в bitmap размером 1мб (4 байта на пиксель), при масштабировании создается еще один bitmap, скажем в 500кб. Или 1,5мб из доступных 24мб на процесс. Мы не раз сталкивались с нехваткой памяти в богатых на графику проектах.
Поэтому картинки которые нельзя описать ни Nine-patch ни Shape я предлагаю поставлять в приложении как огромный ресурс в папке nodpi и при первом запуске масштабировать изображение до нужного размера и кешировать результат. Это позволит нам ускорить работу приложения (не считая первого запуска) и уменьшить потребление памяти.
Для сложных ресурсов подгружаемых с сервера (иконки приложений на наших макетах) идеальный вариант если сервер будет отдавать картинки любого размера. Как, например, сделано на проекте Stream. Приложение просчитывает нужный размер картинки для экрана смартфона, где запущено, и запрашивает их у сервера.
P.S. советы придуманы и основа поста написаны нашим Android-гуру Лешей, огромное ему спасибо!
А как вы рекомендуете верстать макеты под Android? Сколько макетов рисует дизайнер? Как обращаетесь с графическими ресурсами?
Подписывайтесь на наш хабра-блог (кнопка справа вверху). Каждый четверг интересные статьи о мобильной разработке, маркетинге и бизнесе мобильной студии. Следующая статья (5 сентября) «C# async на iOS и Android»
Веб типографика и читабельность для мобильных устройств
Сегодня пользователи интернета по большей части заходят на сайты с мобильных устройств. Всё чаще мы видим наших соседей в электричке, или в маршрутке, читающих что-то с мобильных телефонов или планшетов. Поэтому обязательно нужно обратить внимание на мобильную версию нашего сайта. Давайте посмотрим какие необходимо сделать улучшения, для комфортного чтения с мобильных устройств.
Позаботится о читателях
Е сли вы добились адаптивности дизайна и скорости загрузки сайта, ⚡ если пользователи уже посещают ваш сайт, веб типографика — это следующее на что необходимо обратить особое внимание.
Веб типографика текста, вместе с интересным контентом могут улучшить читабельность и удержать пользователей на современном сайте. Более того, эти улучшения могут произвести хорошее впечатление на посетителей и сделать так, что они будут возвращаться на ваш сайт снова и снова. В свою очередь и поисковые системы положительно отреагируют на такую активность и обязательно повысят ваш сайт в общем рейтинге. Не правда ли, отличный стимул принять меры?
Нельзя не согласится с тем что чтение — это труд. Как сказал один автор: “…когда я приучал себя читать, и должен был взять книгу, я был в положении человека, которому нужно было приблизиться к клетке со львом…”. Если к труду чтения мы добавим мелкий шрифт или тучи текста, не разбитого абзацами и заголовками, то вероятность прочтения наших текстов приближается к нулю.
Возможно вам понравится: Пример тз для копирайтера ➠
Область чтения на мобильном экране
Часто оптимизация сайта под мобильные устройства заканчивается после того как мы добились правильности отображения и хорошей скорости загрузки сайта. Эти достижения действительно хороший результат, но это ещё не всё. То, что область чтения не должна выходить за область экрана, знают все, но то, что она не должна иметь больших отступов от края экрана, не многие. Большие отступы чрезмерно сужают предложение в абзаце и это препятствует удобочитаемости.
Попробуйте посмотреть на сайты социальных сетей, например, фейсбук или твиттер, они об этом позаботились. Чтение на этих ресурсах удобочитаемо за счет оптимальных отступов от края экрана. Предложения остаются длинными и реже происходит обрыв слов и перенос.
Межстрочный интервал и пробелы
Межстрочный интервал облегчает чтение. Если вы работаете в Word, обратите внимание на межстрочный интервал который стоит в Word по умолчанию. Это не случайный параметр. Люди из Майкрософт знают толк в чтении с экрана, они хотят, чтобы пользователь выбирал их продукт и ничего не настраивал. Если вы пройдетесь по популярным новостным сайтам, то заметите заметную схожесть межстрочного интервала для мобильных устройств. В большинстве, это интервал из программы Word. Предложения с таким интервалом легко читаются.
Оптимальный межстрочный интервал для мобильных устройств составляет 29 пикселей (параметр css: line-height). Попробуйте использовать на своих сайтах этот параметр. Если вы пренебрежете добавлением правильного размера, ваши хорошо построенные предложения могут стать одним большим блоком букв. Это очень не удобно и сделает вашу страницу очень непривлекательной для посетителя.
Наряду с межстрочным интервалом вы также должны убедиться, что в тексте достаточно места для остановки. Большие пробелы между абзацами помогают читабельности текста. Если вы используете больший размер шрифта, и забудете добавить пробелы для заголовков и абзацев, ваш текст будет по-прежнему плохо читаемым. Пробелы особенно важны на мобильном устройстве.
Веб типографика шрифта: размер и цвет
Убедитесь, что вы используете как минимум 16 пикселей, как основной размера шрифта для своих текстов. 16 пикселей размер который не плохо читается как на больших экранах рабочего стола, так и на мобильных экранах. Предпочитаемый размер шрифта для веб-сайта в настоящее время немного больше, чем десять лет назад. Тогда шрифт размером 10 пикселей позволял вам добавлять больше текста на страницу и делал вашу страницу более похожей на книгу.
Какой цвет шрифта использовать во многом зависит от типа вашего сайта и того, какой дизайн использует ваш сайт. В общем, считается, что использование черного шрифта на белом фоне по-прежнему считается лучшим. Общая мысль состоит в том, чтобы очертания были четкие, а буквы легче различать и идентифицировать.
Если вы сомневаетесь в правильности выбора цвета фона и шрифта, можно проверить этот параметр. Существует целый ряд инструментов, каждый со своим контролем контрастности. Очень простой и удобный — это Colorable. Colorable позволяет вам вводить передний план (цвет текста) и фон (цвет фона). Он сразу сообщит вам, если контраст правильный или неправильный, и какой результат получает комбинация цветов. Colorable основан на рекомендациях по доступности WCAG.
Вывод
Убедившись, что ваш текст написан красиво и не слишком сложно, не останавливайтесь на этом. Чтобы правильно прочитать текст, веб типографика вашего текста тоже должна быть в порядке. Обязательно используйте оптимальный размер шрифта, подумайте о контрасте используемых цветов и добавьте пробелы. Внимания на этих аспектах читаемости, позволит вам произвести положительное впечатление на посетителей вашего сайта, которые захотят вернуться.
Если вам понравился этот материал, или у вас есть замечания, вы можете оставить свой комментарий. Ваш комментарий очень важен для нас, мы обязательно хотим услышать ваше мнение.
Сетки в дизайне мобильных приложений (iOS, Android и Bootstrap) — UI-советы
Правила и лайфхаки, которые пригодятся для создания сеток при дизайне мобильных интерфейсов. Проверено в проектах, берите на вооружение.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Май 15, 2020 · 6 мин читать
Сегодня поделюсь практическими советами и фишками, которые пригодятся при построении сеток в дизайне мобильных интерфейсов. Проверено в проектах, берите на вооружение.
Содержание:
Сетки — один из ключевых инструментов дизайнера. Сетка помогает достичь согласованности элементов, установить связи между ними и задать визуальную систему и помочь пользователям ориентироваться. А еще сетка привносит гармонию в дизайн. О связи сеток и гештальта здесь →
Итак, приступим к разбору.
Определяем оптимальное количество колонок
Совет: На начальных этапах дизайна не думайте про количество столбцов. Лучше сфокусируйтесь на создании прототипа интерфейса (Lo-Fi или Hi-Fi) и решите вопросы с основными элементами и сценарием взаимодействия (User Flow). А затем начинайте настраивать оптимальное количество столбцов и размеры. Главное не бояться экспериментировать и быть готовым корректировать свою работу по мере движения.
«Сколько сделать столбцов в сетке для мобильного?» — один из самых популярных вопросов среди начинающих UX/UI-дизайнеров. Непонимание применения сеток возникает из-за того, что на большом экране колонок много, а на мобильном они все не влазят в экран в том же виде.
12 столбцов — одна из самых удобных сеток для мобильных интерфейсов (с ней все как в вебе), она помогает размещать в строке как четное, так и нечетное количество элементов.
У сетки в 12 столбцов есть недостаток при работе с мобильным устройствами: сетка из 12 столбцов дает слишком малую ширину колонки, а значит она годится только для редких случаев на мобильниках.
Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.
🤓 Профессиональный совет
Не зацикливайтесь на одной сетке. Дизайн интерфейса часто может содержать сотни различных экранов, поэтому одна сетка может не подойти для всех экранов. Вы можете создать дополнительные сетки, но не забывайте о консистентности в дизайне.
Согласованность в сетках поможет вам достичь следующего: одинаковых отступов с краев экнара в макете, равных или пропорциональных межколонных расстояний (gutters) между столбцами и одинакового поведения при изменении размера самих столбцов.
Дополнительный вопрос:
Может ли элемент занимать разное количество колонок сетки в зависимости от размера экрана? Читать подробнее →
Рассчитываем межколонное расстояние (gutters) и отступы от края экрана (margins)
Итак, мы определили оптимальное количество столбцов. Давайте теперь определим межколонное расстояние (gutters) и отступы от края экрана (margins).
Первым делом заглянем в гайдлайны операционных систем и отыщем требования к полям у дизайн-макетов (offsets). Минимальные рекомендуемые поля макета для Android и iOS — 16pt. Если придерживаться стандартных рекомендаций, то поля не должны быть меньше (Зато они могут быть больше 😉).
Если взять сетку из 12 столбцов отступы между столбцами не должны быть слишком большими, так как из-за небольшой ширины столбцов и больших отступов между ними можно потерять восприятие колонки.
В дизайне интерфейсов принято работать с сетками в 8pt. Соответственно и межколонный интервал нужно подсчитать пропорционально модулю 8pt. Такой подход обеспечит единый горизонтальный и вертикальный ритм в макете.
🤓 Профессиональный совет
Отступы следует сделать пропорциональными полям макета. Такой подход поможет сделать сетку согласованной, а также поможет гибче работать с пространством и размещать горизонтальные потоки контента, например карусели.
Дополнительный вопрос:
Почему сетки на 8 pt так распространились если сетки на 10 pt не хуже. (Кроме соответствия популярным разрешениям): Читать подробнее →
Фиксированная сетка (fixed grid) и адаптивные сетки (adaptive grid)
В мобильном дизайне, как и веб-дизайне, вы можете применять фиксированную или адаптивную сетку. Экраны смартфонов не сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.
Я рекомендую использовать адаптивный размер сетки, потому что такой подход поможет эффективнее работать с ограниченным пространством экрана смартфона.
🤓 Профессиональный совет
Всегда начинайте с наименьшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Затем просто растяните сами столбцы и оставьте одинаковые размеры межколоночных расстояний.
Такой метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.
Точность расчета сеток для мобильных
В iOS многие экраны с нечетной шириной и не делятся без остатка. В Android такая же история.
В такой ситуации есть несколько вариантов:
Метод 1. Компенсация в 1pt из-за различных размеров полей макета
Например, устанавливаем левое поле в 24pt, а правое 23pt. Скорее всего, никто визуально не заметит разницу, но ваш внутренний перфекционист будет негодовать 😡.
Плюсы: оставшееся пространство можно разделить на нужное количество столбцов.
Минусы: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.
Метод 2. Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов
Ваш внутренний эстет снова будет расстроен. Но на самом деле этот метод не так плох, как может показаться, из-за того, что современные экраны имеют более высокую плотность пикселей. Вряд ли кто-то из пользователей заметит наличие половины пикселей, появившихся в результате дробных значений.
Плюсы: алгоритм будет учитывать ширину столбцов, и вам не придется придумывать различные варианты сетки для разной ширины.
Минусы: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.
Сетка внутри отдельных компонентов (модулей)
Дизайн состоит из модулей. У каждого модуля (элемента) может быть собственная сетка.
Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать консистентность в применении сетки внутри модуля.
Строки и вертикальный ритм
Вы можете создать крупные модули и поддерживать вертикальный ритм, для этого вам следует создать строки и межколоночные расстояния между ними и сделать их соизмеримыми с основным модулем (на примере пропорционально модулю 8pt).
Огромная бесплатная библиотека систем сеток для iOS, Android и Bootstrap. Здесь вы можете скачать 26 сеток с 6 и 12 колонками для 15 различных устройств, в файлах совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma. Цели библиотеки — ускорить запуск ваших дизайн-проектов. Скачать бесплатно →
Скачать сетки для мобильных приложений в фигма.
Вывод
Эта статья — частный разбор популярных сценариев на примере. Основная цель – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для ваших задач и проектов.
«Изучайте правила, чтобы знать, как правильно их нарушить».