Удобная 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качать