Перевод: Десять советов по прототипированию интерфейса в программе Sketch

ДизайнНи для кого не секрет, что Sketch, специально созданный для веба и мобильного дизайна, является одним из наиболее быстрых и универсальных инструментов прототипирования дизайна. Нижеследующие десять советов помогут вам использовать его мощь с еще большим эффектом.

1. Знайте ваши цели и аудиторию вашего прототипа

Ладно, этот пункт не про Sketch. Но всё же это крайне важная часть процесса прототипирования, поэтому мы просто обязаны ее включить в список.

Прототипирование является сердцем итерационного процесса проектирования дизайна. Оно снижает риски и неопределенности, тем самым экономит время и деньги, которые бы ушли на тупое кодирование непроверенных концептов интерфейса.  Хороший прототип позволит вам протестировать допущения, укажет на ошибки в удобстве использования и коммуникационном взаимодействии и во многом другом.

Но что делает хороший прототип хорошим? Это зависит от ваших целей и вашей аудитории. Прототип, разработанный для проверки соответствия продукта рынку, требует больше сочетаний различных элементов в себе, чем прототип с простым описанием анимаций для программистов. Ваши цели и ваша аудитория определяют тип прототипа, а так же его уровень точности, глубины проработки и функциональности.

2. Сначала сделайте наброски

Sketch это великолепный инструмент. Но наброски на бумаге (от переводчика: в оригинале тут игра слов sketch vs Sketch) могут помочь вам быстрее определить требования и стадии предлагаемого вами процесса. Например, это могут быть раскадровки, каракули из прямоугольников, окружностей и стрелок circles, они помогут вам увидеть всю картину целиком и организовать artboards в проекте Sketch. Всё равно кроме вас никто этот этап вашей работы не увидит.

sketching before sketch app

3. Используйте Символы для всех общих элементов

Ваш прототип может содержать множество артбордов с кучей повторяющихся элементов: одни и те же заголовки, подвалы, кнопки, списки и прочее. Изменения в стилях и в разметке, практически неизбежные на ранних стадиях прототипирования, обязательно повлекут за собой гору тупой и скучной работы, если вы не будете использовать Символы.

Допустим, вы хотите изменить цвет фона шапки и размер кнопки. Если вы создадите их как Символы, вам нужно будет сделать эти изменения всего один раз — все экземпляры данных символов обновятся автоматически. Даже круче — вы можете отключить обновление текстовых элементов в настройках символа, и тогда изменение цвета вашей кнопки «Приступим!» на синий приведёт также и к изменению цвета другой вашей кнопки «Войти», и всё это без создания ненужных копий символа.

Чтобы создать символ, просто выберите слой или группу слоёв, затем выберите в меню Layer > Create Symbol. Однажды создав символ, вы можете быстро добавлять его в ваш проект с помощью кнопки Insert.

organizing symbols in sketch

4. Быстрое создание артбордов и интерфейсных элементов

Опция Make Grid позволяет вам быстро создавать и размещать элементы и артборды. Данная функция особенно полезна в сочетании с Символами. Вы можете создать один экран с общими символами на нём (фон, шапка, подвал, кнопки и т.д.) и размножить его столько раз, сколько вам требуется.

using make grid in sketch app

5. Создание тестового контента в один клик

Тимур Корпеев сделал плагин Content Generator, который позволяет вам наполнять ваш дизайн различными выдуманными данными, такими как аватарки, фоны, имена, геоданные и простой текст, за один клик. Плагин Тимура берёт графические данные с популярных сайтов UnsplashuiFacesuinames, и Mockaroo. Нужны финансовые данные? Тогда воспользуйтесь плагином Тайлера Вульфа sketchFinDataGen.

generating sample data

6. Используйте маску с overlay, чтобы симулировать реалистичное взаимодействие

Одним из способов повышения ясности вашего прототипа является размещение перекрывающего слоя, overlay. Уведомления, диалоги и предпросмотр изображений часто сочетаются с маской, концентрирующей внимание пользователя на текущем контексте. Вы можете реализовать подобные затемнения, экспортировав содержимое одного артборда в виде PNG прямо на другой пустой артборд простым перетягиванием картинки-превью с панели Инспектора. Уже за тем можно применить фоновую заливку цветом, режим смешивания или наложение с прозрачностью, чтобы получить требуемый результат.

creating overlay masks

7. Добавляйте клавиатуру на все экраны, которые требуют от пользователя ввода текста

Пользовательско-ориентированный дизайн приводит к успешным продуктам. И  исключение ненужных шагов из процесса взаимодействия сделает ваших пользователей счастливее. Слишком часто в мобильных приложениях возникает потребность тапнуть по полю ввода, чтобы показалась клавиатура (особенно это видно на формах авторизации). Вместо этого сделайте так, чтобы клавиатура появлялась и была готова к вводу текста в момент отображения экрана.

eliminating the unnecessary

Замечание: этот совет может вызвать проблемы с accessibility (упрощенный доступ для людей с ограниченными возможностями), убедитесь, что разработчики дают добро на такое взаимодействие (от переводчика: сам разработчик, но дело с Accessibility имел только в теории, в чем проблема не вижу).

8. Организуйте поток интерфейса с помощью страниц

Очень просто создать хаос в ваших артбордах и слоях. К счастью Sketch поддерживает многостраничные документы и позволяет быстро организовать хранение всего набора элементов интерфейса в одном .sketch файле. Мы обычно использует страницы, чтобы разделять прототипы, потоки (последовательности экранов), концепты, макеты и материалы для App Store.

using pages in sketch app

9. Прототипируйте прямо из исходных файлов

В случае, если вы еще не сталкивались с этим, сообщаем: InVision поддерживает и синхронизируется с файлами Sketch. Просто загрузите ваш исходный файл на сайт InVision или упростите себе жизнь с InVision Sync или синхронизацией Dropbox. С двумя последними фишками настроить и обновить прототип так же лёгко, как нажать «Сохранить».

10. Адаптируйте наборы интерфейсных элементов и ресурсов от других дизайнеров

Вы можете получить много бесплатных и платных UI-наборов, таких как TETHR и TERACY на сайте Sketch App Sources. Следуя за своими коллегами, проделавшими тяжелую работу, используя результаты их труда, вы сможете улучшить свой рабочий процесс и изучить новые приёмы прототипирования.

Оригинал

Автор

Егор