10 советов по прототипированию в Sketch

Автор оригинала: Todor Iliev
  • Перевод


Так как Sketch был создан специально для работы над мобильными и веб-интерфейсами, неудивительно что он стал одним из самых быстрых и гибких инструментов для прототипирования. Эти 10 советов сделают его еще более мощным средством.


1. Поймите зачем и для кого вы делаете прототип


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

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

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


2. Делайте наброски прежде чем переходить к Sketch


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

image
Набросок прототипа мобильного приложения до открытия Sketch


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


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

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

image
Обновление и использование символов между страницами и артбордами: Использование символов в Sketch


4. Создавайте артборды и элементы пользовательского интерфейса легко и быстро


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

image
Создание элементов и артбордов с использованием функции Make Grid


5. Генерируйте контент в один клик


Плагин Content Generator for Sketch Тимура Карпеева позволяет наполнить ваш дизайн случайными данными в один клик. Это могут быть фотографии и имена людей, фон, геолокационные данные или просто случайный текст. Этот плагин получает данные и графику от популярных сервисов: Unsplash, uiFaces, uinames и Mockaroo. Нужны случайные финансовые данные? Тогда вам подойдет плагин Тайлера Волфа sketchFinDataGen

image
Генерация данных на лету с использованием плагина Content Generator for Sketch


6. Используйте перекрывающий слой для имитации более реалистичного взаимодействия


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

image
Создание перекрывающего слоя для более детализированного и реалистичного прототипа


7. Добавляйте клавиатуру на все экраны, где необходим ввод текста


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

image
Избавление от лишних шагов, даже такой мелочи как нажатие на поле ввода для логина, действительно улучшает взаимодействие с пользователем


8. Организовывайте ваши экраны при помощи страниц в Sketch


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

image
Использование страниц для организации прототипов и скринфлоу


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


В случае если вы еще не слышали — InVision поддерживает Sketch и умеет синхронизироваться со ним. Достаточно загрузить ваш исходный файл на сайт или облегчить себе жизнь, используя InVision Sync или Dropbox синхронизацию. С двумя последними вариантами обновление прототипа становится не сложнее его сохранения.


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


Вы можете получить множество как платных, так и бесплатных наборов элементов интерфейса таких как TETHR и TERACY на сайте Sketch App Sources. Использование наработок других дизайнеров может стать отличным способом улучшить ваш рабочий процесс и научиться новым техникам прототипирования.
Поделиться публикацией

Похожие публикации

Комментарии 15

    0
    уже почти год использую Sketch и очень нравится
    Но самый существенный недостаток — если нужно скинуть макет верстальщику, которые пользуется не Маком, то нужно тратить время на конвертацию в Illustrator или Photoshop
    Встроенное сохранение в вектор разваливает макет при открытии в других программах

    А так — программа отличная просто.
      –4
      просто найди другого верстальщика =)
        +4
        Интересно как вы найдете другого верстальщика например под Windows Phone =)
        +1
        Импорт, к несчастью, тоже хромает
          –1
          Думаю все в будущем, доработают.
          +1
          Еще расстроило то, что в скетче нельзя задать размер в другой величине отличной от px. Не конвертить же самому в уме. Это немного неудобно если хочется «нарисовать» макет для дальнейшей печати. Хотя с другой стороны он и не должен этого уметь, т.к. насколько я понял это инструмент заточенный для рисования экранов.
          –1
          Спасибо за статью, открыл для себя много нового в Sketch.

          А посоветуйте набор элементов интерфейса для Android (вроде упомянутого TETHR для iOS)?
              –1
              Их там великое множество, потому и спросил совета. :)

              Пока использую Android L UI Kit и Android UI XHDPI Template, может ещё какая достойная подборка есть.
            +2
            Программа прекрасная, но не во всех компаниях дизайнеры сидят на маках. :(

            Хочется видеть качественные прототипы, а не страх и ужас.
              –3
              Блин, а я вот что-то постеснялся сюда перевод постить свой пару дней назад pixelmixelgame.com/blog/?p=22
                –1
                Спасибо за хороший перевод на мегаактальную тему. Ребята, накидайте автору плюсов в карму, а то мои закончились)

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое