ДизайнНи для кого не секрет, что Sketch, специально созданный для веба и мобильного дизайна, является одним из наиболее быстрых и универсальных инструментов прототипирования дизайна. Нижеследующие десять советов помогут вам использовать его мощь с еще большим эффектом.
1. Знайте ваши цели и аудиторию вашего прототипа
Ладно, этот пункт не про Sketch. Но всё же это крайне важная часть процесса прототипирования, поэтому мы просто обязаны ее включить в список.
Прототипирование является сердцем итерационного процесса проектирования дизайна. Оно снижает риски и неопределенности, тем самым экономит время и деньги, которые бы ушли на тупое кодирование непроверенных концептов интерфейса. Хороший прототип позволит вам протестировать допущения, укажет на ошибки в удобстве использования и коммуникационном взаимодействии и во многом другом.
Но что делает хороший прототип хорошим? Это зависит от ваших целей и вашей аудитории. Прототип, разработанный для проверки соответствия продукта рынку, требует больше сочетаний различных элементов в себе, чем прототип с простым описанием анимаций для программистов. Ваши цели и ваша аудитория определяют тип прототипа, а так же его уровень точности, глубины проработки и функциональности.
2. Сначала сделайте наброски
Sketch это великолепный инструмент. Но наброски на бумаге (от переводчика: в оригинале тут игра слов sketch vs Sketch) могут помочь вам быстрее определить требования и стадии предлагаемого вами процесса. Например, это могут быть раскадровки, каракули из прямоугольников, окружностей и стрелок circles, они помогут вам увидеть всю картину целиком и организовать artboards в проекте Sketch. Всё равно кроме вас никто этот этап вашей работы не увидит.
3. Используйте Символы для всех общих элементов
Ваш прототип может содержать множество артбордов с кучей повторяющихся элементов: одни и те же заголовки, подвалы, кнопки, списки и прочее. Изменения в стилях и в разметке, практически неизбежные на ранних стадиях прототипирования, обязательно повлекут за собой гору тупой и скучной работы, если вы не будете использовать Символы.
Допустим, вы хотите изменить цвет фона шапки и размер кнопки. Если вы создадите их как Символы, вам нужно будет сделать эти изменения всего один раз — все экземпляры данных символов обновятся автоматически. Даже круче — вы можете отключить обновление текстовых элементов в настройках символа, и тогда изменение цвета вашей кнопки «Приступим!» на синий приведёт также и к изменению цвета другой вашей кнопки «Войти», и всё это без создания ненужных копий символа.
Чтобы создать символ, просто выберите слой или группу слоёв, затем выберите в меню Layer > Create Symbol. Однажды создав символ, вы можете быстро добавлять его в ваш проект с помощью кнопки Insert.
4. Быстрое создание артбордов и интерфейсных элементов
Опция Make Grid позволяет вам быстро создавать и размещать элементы и артборды. Данная функция особенно полезна в сочетании с Символами. Вы можете создать один экран с общими символами на нём (фон, шапка, подвал, кнопки и т.д.) и размножить его столько раз, сколько вам требуется.
5. Создание тестового контента в один клик
Тимур Корпеев сделал плагин Content Generator, который позволяет вам наполнять ваш дизайн различными выдуманными данными, такими как аватарки, фоны, имена, геоданные и простой текст, за один клик. Плагин Тимура берёт графические данные с популярных сайтов Unsplash, uiFaces, uinames, и Mockaroo. Нужны финансовые данные? Тогда воспользуйтесь плагином Тайлера Вульфа sketchFinDataGen.
6. Используйте маску с overlay, чтобы симулировать реалистичное взаимодействие
Одним из способов повышения ясности вашего прототипа является размещение перекрывающего слоя, overlay. Уведомления, диалоги и предпросмотр изображений часто сочетаются с маской, концентрирующей внимание пользователя на текущем контексте. Вы можете реализовать подобные затемнения, экспортировав содержимое одного артборда в виде PNG прямо на другой пустой артборд простым перетягиванием картинки-превью с панели Инспектора. Уже за тем можно применить фоновую заливку цветом, режим смешивания или наложение с прозрачностью, чтобы получить требуемый результат.
7. Добавляйте клавиатуру на все экраны, которые требуют от пользователя ввода текста
Пользовательско-ориентированный дизайн приводит к успешным продуктам. И исключение ненужных шагов из процесса взаимодействия сделает ваших пользователей счастливее. Слишком часто в мобильных приложениях возникает потребность тапнуть по полю ввода, чтобы показалась клавиатура (особенно это видно на формах авторизации). Вместо этого сделайте так, чтобы клавиатура появлялась и была готова к вводу текста в момент отображения экрана.
Замечание: этот совет может вызвать проблемы с accessibility (упрощенный доступ для людей с ограниченными возможностями), убедитесь, что разработчики дают добро на такое взаимодействие (от переводчика: сам разработчик, но дело с Accessibility имел только в теории, в чем проблема не вижу).
8. Организуйте поток интерфейса с помощью страниц
Очень просто создать хаос в ваших артбордах и слоях. К счастью Sketch поддерживает многостраничные документы и позволяет быстро организовать хранение всего набора элементов интерфейса в одном .sketch файле. Мы обычно использует страницы, чтобы разделять прототипы, потоки (последовательности экранов), концепты, макеты и материалы для App Store.
9. Прототипируйте прямо из исходных файлов
В случае, если вы еще не сталкивались с этим, сообщаем: InVision поддерживает и синхронизируется с файлами Sketch. Просто загрузите ваш исходный файл на сайт InVision или упростите себе жизнь с InVision Sync или синхронизацией Dropbox. С двумя последними фишками настроить и обновить прототип так же лёгко, как нажать «Сохранить».
10. Адаптируйте наборы интерфейсных элементов и ресурсов от других дизайнеров
Вы можете получить много бесплатных и платных UI-наборов, таких как TETHR и TERACY на сайте Sketch App Sources. Следуя за своими коллегами, проделавшими тяжелую работу, используя результаты их труда, вы сможете улучшить свой рабочий процесс и изучить новые приёмы прототипирования.
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.