Sketch и InVision два родственных приложения для разработки, прототипирования и анимации интерфейсов. Разработчики Bohemian Coding создали Sketch специально для дизайнеров, которые рисуют непосредственно мобильные приложения, так что он отлично подходит для прототипирования приложений.
Я приведу несколько полезных советов по использованию Sketch для прототипирования. Они помогут вам ускорить и облегчить этот процесс.
1. Задавайте правильный размер для артбордов
Хорошо, хорошо — это, наверное, не самый крышесносный совет в этом списке, но он полезен и важен. Sketch предоставляет множество пресетов размера артбордов, чтобы облегчить вам старт. Просто нажмите, А с клавиатуры, и выберите размер, который вам нужен.
2. Используйте сетку
Sketch имеет все необходимое, чтобы настроить рабочую область максимально удачно. Перейдите в меню View > Layout Settings…, чтобы настроить свой макет, или нажмите Ctrl+L, чтобы увидеть макет по умолчанию.
3. Дублируйте все в считанные секунды
Я использовал этот трюк в Illustrator многие годы, и он также работает в Sketch. Если вы удерживаете Option, просто кликните на элемент и перетяните его, и вы получите копию. Как только вы разместили копию, нажмите Cmd+D, чтобы снова и снова проделать это.
Примечание: Если опция не работает так, как показано на анимации выше, перейдите в меню Preferences > Layers и снимите галочку с опции Offset pasted & duplicated objects
4. Измеряйте расстояния
Если вы хотите создавать красивые дизайны, нужно быть внимательным к деталям. Чтобы измерить расстояние от элемента до других объектов на странице, выделите его на экране и удерживайте Option и наводите курсор на объекты, расстояние до которых нужно измерить.
5. Используйте общие стили
У вас есть сотня скринов, и это уже третий круг переделок по дизайну. Вот уже замаячила финишная полоса для проекта. И вдруг клиент говорит: «А давайте сделаем все кнопки синими?».
И вы просто говорите ему «Окей», потому что вы использовали общие стили на всех этих кнопках. Когда создаете элементы интерфейса, которые потом приходится повторно использовать много раз, настройте для них общий стиль, кликнув No Shared Style, затем Create New Shared, и задайте стилю запоминающееся имя.
6. Нещадно эксплуатируйте символы
Символы — очень полезная часть функционала Sketch. Они совершенно бесценны в UI-дизайне.
Если у вас есть скрин с множеством состояний, модалок или опций, просто превратите весь этот скрин в символ, продублируйте артборд, и создайте альтернативные версии. Таким образом, если понадобится обновить скрин-подложку (неизменную часть скринов), вам не придется вносить одно и то же изменения во все версии скрина.
7. Передвигайте фигуры, пока рисуете их
Этот совет суперпрактичен. Пока рисуете фигуру (скажем, круг), довольно трудно сходу разместить ее в нужной позиции. Но если вы удержите пробел, пока рисуете ее, вы сможете передвигать фигуру в процессе рисования, а затем изменить ее размер.
8. Изменяйте прозрачность на лету
Это работает точно так же, как в Photoshop, но множество людей до сих пор об этом не догадываются. Используйте числовые клавиши (1−0) на клавиатуре для задания уровня прозрачности с интервалом в 10%.
9. Экономьте нервы с помощью «Scale»
Все мы совершаем ошибки — скажем, вы создали кнопку, но сделали ее слишком большой. Радиус закругления 20 пикселей и контур 4 пикселя. Если вы потяните угол, чтобы уменьшить закругление, результат вам не понравится. Вместо этого нажмите Scale и измените размер до нужного вам.
10. Максимизируйте свое рабочее пространство
Если вы работаете на маленьком экране, любое приложение может начать раздражать, и Sketch — не исключение. Чтобы спрятать левые и правые панели, нажмите Ctrl+Option+Cmd+3. Или используйте горячие клавиши Ctrl+Option+Cmd+1 или Ctrl+Option+Cmd+2 для того, чтобы показать/спрятать левую и правую панели по отдельности.
11. Используйте для прототипирования Sketch и InVision
Вы можете просто перебросить файлы Sketch в InVision, чтобы автоматически превратить артборды в скрины. Если хотите исключить определенный артборд или страницу, просто добавьте значок минус в начало имени слоя или странички, например: «-modal exploration»
Звучит довольно просто? Вот доказательство:
.