fbpx
Удобная 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 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Руководство дизайнера по DPI и PPI
Подробнее

Руководство дизайнера по DPI и PPI

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

Секреты дизайна и предпросмотра иконок в Sketch

Пока мы работаем в Sketch, мы заметили, что постепенно совсем перестали рисовать собственные иконки. Главная причина в том, что нам не нравилось использовать Sketch именно для дизайна иконок. Вторая причина – IconJar оказался настолько хорош и прост в этом деле.
Total
0
Share