Удобная IOS сетка для дизайна мобильных приложений в Sketch

Удобная IOS сетка для дизайна мобильных приложений в Sketch

Удобная IOS сетка для дизайна мобильных приложений в Sketch

Внутри этого файла Sketch находится IOS сетка для iPhone 6 и iPhone 6 Plus, и пример макета интерфейса профиля, чтобы показать, как сетка помогает в действии.

Решетчатая IOS сетка строится из сетки 16×16 pt с базовыми линиями 8pt. Основной тип и размер текста – San Francisco UI 32pt, с эффективной х-высотой 16pt, что идеально сочетается с нашим сеточным инкрементом. Отсюда, масштаб вводимых символов и элементов интерфейса базируется на кратности 4, так что все отлично согласуется между собой (например, заголовки на капсе будут размером 20pt, иконки 24x24pt, аватар 144x144pt). Мы также добавили небольшие границы слева и справа. Нам показалось, что они довольно полезны. Но их можно адаптировать под особенности каждого проекта.

Помните, что это НОРМАЛЬНО иногда ломать сетку (скажем, если вам нужно разбить 8pt на два по 4pt). Если присмотреться близко к родным интерфейсам Apple, они не так строго придерживаются сетки и базовых линий, как Android Material Design, больше следуя модульному подходу. Хотя, если вы подложите любой скриншот с iOS9 под эту сетку, вы увидите, что большая часть элементов все-таки выровнена по линиям. Суть любой сеточной системы, включая эту, в предоставлении постоянной пропорциональности и выравнивании элементов между собой, но это всего лишь инструмент. Не сходите с ума, пытаясь выровнять все точка к точке. Просто пользуйтесь сеткой, когда это требуется, когда необходимо быть постоянным и последовательным – именно это и проглядывается в последних тенденциях дизайна интерфейсов Apple.

IOS сетка Sketch

Разработано командой Free Association.

Cкачать

4 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Новое бесплатное приложение для UI-дизайна: Gravit
Подробнее

Новое бесплатное приложение для UI-дизайна: Gravit

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

Как можно использовать Github для совместной работы над дизайном

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