После безвременной (и до сих пор немного грустно) кончина Fireworks ¹ , я обнаружил, ищут другие способы для разработки приложений и веб-сайтов.Я также имел желание создать нечто более интерактивным, когда я говорю о моей работе с заинтересованными сторонами.Оказалось, что Sketch ² , когда в паре с некоторыми другими аккуратными инструментов, будет большая часть этого процесса .

В этой статье я расскажу вам, почему вы должны создавать прототипы и как вы можете сделать это с эскиз и прототипирования инструментов, таких, как Flinto и InVision.Вы также получите красиво документально халява Sketch файл, чтобы помочь вам .

Прежде чем начать, вот несколько статей, в случае вам интересно, почему я использую эскиз дизайна пользовательского интерфейса:

• “ Дизайн утилит для современных Web ³ , ” Энтони Colangelo ⁴
• “ Фейерверк Беженцы!Добро пожаловать в объятиями Эскиз 3 ⁵ , ” Адам Howell ⁶
• “ Открытие Sketch ⁷ , ” Жан-Марк Denis ⁸

Почему Прототип

Когда дело доходит до показывающий конструкцию приложение к команде, клиент или заинтересованных сторон, я обнаружил, что некрасиво, но функциональный прототип бьет статическим растровые одного состояния экрана, который я хотел бы получить от эскиза,Photoshop или тому подобное.Я обнаружил, что связь вещи, как пользовательского потока и иерархии жестче в статических макетов (особенно при работе с отзывчивых сайтов, но это тема для другой день) .

Чаще, анимация играет активную роль в дизайне.Мне нравится, как Val Head ⁹ помещает его в “ все правильные шаги: положить ваши интерфейсы в Motion ¹⁰ ” (курсив мой):

Движение имеет смысл в UX design, такне упускать из виду важность хорошего дизайна движения для повышения опыта.[...] Анимация мощный инструмент, чтобы добавить детали дизайна для вашей работы.При использовании хорошо, движение может принести восхитительные моменты к пользовательскому интерфейсу и улучшения взаимодействия .

Motion обеспечивает значение и является центральным для функционирования всех родной мобильных приложений — и более для веб, а также (см “ Материал Design ¹¹ ” и Polymer ¹² проект от Google).Таким образом, очень важно, чтобы прототипом для и показать движение и анимацию для всех цифровых проектных работ, но особенно для мобильных приложений .

Примечание стороны: Вы можете создать довольно надежные интерактивные прототипы прямо в Adobe Fireworks, в том числе мобильный prototypes ¹³ , веб-prototypes ¹⁴ и IOS prototypes ¹⁵ .Однако, поскольку Фейерверк не будет дальнейшее развитие Adobe, найти альтернативный рабочий процесс имеет жизненно важное значение для меня .

Я пробовал несколько методов, показывая макеты для клиентов.Есть тонна их, и так много выглядеть потрясающе.Я в конечном итоге пытается плоские изображения, интерактивные каркасы PDF и даже прототипы, построенные в Интерфейс Builder ¹⁶ .Вот как они работали:

• Плоские изображения оставил людей интересно, как мы когда-нибудь SuperAmazingFeature 3000 ™.Это, конечно, не был правильный путь .
• Панель с PDF каркасы расстроен масштаб наших проектов по установке PDF для любого размера мой экран был — понятно, не правильный путь, либо.(Существует способ, Adobe Acrobat, чтобы указать уровень масштабирования страницы, которая является адресатом ссылку в PDF файле, так что все страницы имеют постоянный уровень масштабирования. Но если вы не создаете ссылки тщательно, то вамнеобходимо вручную изменить уровень масштабирования и прокрутки точку на целевой странице, потому что Acrobat обычно устанавливает уровень масштабирования для каждой страницы, чтобы максимизировать вид этой странице, а приложение экранов и веб-страницы часто имеют разную длину и будет отображаться при различных зумомуровни)
• Interface Builder (часть Xcode ¹⁷ ) это весело, хотя речь идет с большим кривой обучения и затрат времени по сравнению с другими.Не все проекты на Mac OS X или IOS, а также .

В то время как вещи, построенные в Interface Builder показали анимации, ни плоские изображения, ни интерактивные PDF-файлы и сделал.Вот облом, потому что анимация общается, что плоское изображение не может: переходы, которые являются еще одним важной частью хорошего дизайна.Вот пример того, почему анимация является ключевым: Это действительно здорово предупредить вас разработан, чтобы скользить вверх от нижней части экрана, скорее всего, заблудились в плоском макета.Если вы можете показать это анимация, вы, скорее всего, чтобы получить свою точку зрения кому-то .

Он не был до недавнего времени, что я нашел золотую середину: строительство комплект каркасного и делает интерактивные прототипы в сфере услуг, таких как Flinto ^{41 18} и InVision ¹⁹ .Я был в состоянии создать дизайн, который люди видят в контексте, на своих устройствах и об их времени.Я обнаружил, что контекст имеет важное значение: Показаны скриншот мобильное приложение на чью-то компьютере приглашает путаницы, и мы обычно хотят, чтобы избежать этого .

Flinto имеет 30-дневную пробную версию, а InVision предлагает бесплатный ярус, который работает с одним проектом.Оба заплатили планы с более широкими возможностями .

В соответствии с идеей пребывания худой, я приспособил каркас комплект для прошивкой (я все еще работаю на Android немного!), Так что люди могут сосредоточиться на структуре, а не пикселей.Я получил пару людей с просьбой, если это, как приложение будет выглядеть, но большинство понимают концепцию довольно хорошо.Я использую метафору строительства дома: Каркасы являются основание дома, и живопись, и двигаться в мебели приходят после того как мы заказали все правильно .

Давайте поговорим немного о халяву Sketch следующий файл .

Эскиз Blueprint File

iOS 7 Blueprint.sketch файл шаблона может свободно использовать (я положил его под лицензией MIT), и предназначен, чтобы помочь вам сосредоточиться на интерактивных прототипов .

²⁰

• Эскиз Blueprint ²² (ZIP-файл, 1,5 Мб)
• Эскиз Blueprint ²³ , GitHub

Пожалуйста, обратите внимание, что шаблон требует Sketch версии 3.1.(Люди в Богемии кодирования изменились формат файла эскиза в этой версии, и версии старше 3.1 не сможет открыть файл правильно.)

Я включил несколько элементов, чтобы вы начали:

• Панель вкладок,
• Строка меню,
• Сегментирован контроллер,
• Поиск бар,
• Столы (с и без икон),
• Изображения различных пропорциях,
• Оповещения,
• Различные кнопки и иконки .

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

Эскиз файл даже были обновлены для последних айфонов, 6 и 6 Plus, поэтому он должен быть в курсе, как о публикации этой статьи .

Я думал о том, что цветовая схема может быть и считается возвращаясь к черно-белым гамма, но чувствовал себя слишком плоским для меня.Тогда, я больше думал о blueprints ²⁴ и, как я использую эту метафору, когда речь идет о строительных конструкций, и я решил пойти с монохроматическим синий палитра .

Примечание: Вы также можете скачать образец Эскиз Blueprint file ²⁵ что я использовал для создания демо-прототип, показанный в этой статье, в комплекте с страниц и монтажных и готовы для экспорта,Вы можете удивиться, почему у меня есть два эскиза файлы?Мой план заключается в регулярно обновлять GitHub, организованный Эскиз Blueprint ²⁶ файл для новых мобильных устройств, и я предоставления другой файл, в надежде, что это полезно для вас (хотя я выиграл’т быть поддержание его после этого статья опубликована), потому что вы можете узнать больше из него, о страницах и монтажных и как установить ломтики для легкого образа экспортера .

Как организовать свое Sketch App Files

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

²⁷

Говоря о всех этих взглядов, вы увидите, что полезно назвать свои монтажных, особенно, когда вы экспортировать их.Ваши именования, вероятно, меняться, и, возможно, ваша команда уже есть.Если нет, то вот как я называю свои страницы и монтажных, следуя имя страницы – монтажной области name конвенции .

• Войти – Main
• Войти – Войти Up
• Войти – Забыли Password
• Войти – Error

Я стараюсь использовать symbols для повторяющихся элементов, таких как меню и панели, изображений и иконок при проектировании этих взглядов.Это делает жизнь легче, потому что я могу изменить символ раз и увидеть его экземпляры обновить везде .

Примечание: Вы новичок в эскиз?Изучите основы artboards ²⁹ , layers ³⁰ , pages ³¹ , groups ³² , symbols ³³ и styles ³⁴ (ресурсы, которые являются частью Официальный documentation ³⁵ ) .

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

Примечание: я буду рисовать быстро параллельно с Adobe Fireworks.Символы и стили в Sketch работы аналогично тому, как это делают в Fireworks, так концепция должна быть легкой для понимания.Эта тема была подробно рассматривается в следующих статьях на Smashing Magazine:

• “ Сотрудничество с Adobe Fireworks на больших проектов Teams ³⁶ , ” Дэн Nisbet
• “ Как сделать руководству эффективной стиле с Adobe Fireworks ³⁷ , ” Джошуа Mauldin
• “ IOS прототипов с водопроводной и Adobe Fireworks ³⁸ , ” Шломо Goltz
• “ Полезные Фейерверк методы и функции для больших проектов Teams ³⁹ , ” Крис Niles

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

Кроме того, обратите внимание, что символы в Sketch не 100% же, как они находятся в Adobe Fireworks.Фейерверк имеет как символы и богат symbols ⁴⁰ .Богатые символы в Fireworks позволяет свойства экземпляра символа для редактирования независимо — это означает, что вы можете внести изменения в instances богатой символ, не влияя на master символ.Это очень полезная функция для проектирования пользовательских интерфейсов — думаю, кнопки с несколькими состояниями, например, или текстовой меткой, который можно редактировать, не затрагивая конструкцию самого элемента пользовательского интерфейса .

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

Экспорт Into My прототипов инструмент Choice

В этом примере я буду использовать Flinto ^{41 18} .Это не единственный вариант там (я рассмотрю несколько других прототипов решений, которые позже в этой статье), но он уверен, это просто.И супер-быстрый, слишком .

Использование slices ⁴² в Sketch легко, и вы можете экспортировать все как PNG или JPG на рабочий стол и перетащите эти файлы прямо в Flinto.(В качестве альтернативы, вы можете нажать на название вашей рабочей области на холсте и выберите “ Сделать Exportable, ” задать настройки оптимизации по экспорту и экспортировать изображения.)

⁴³

Связь экспортированные изображения вместе в Flinto легко, как держать детали, прикрепленные к верхней или нижней части окна;Например, вы можете разместить закрепленного меню в верхнем и панель инструментов в нижней части.Подробнее о том, что в настоящее время .

Когда я закончу с моей конструкции, я создам новый проект в Flinto и использовать iPhone 6 Plus с белой прозрачной панели меню.В нашем случае, я перетаскивая мои файлы с рабочего стола в порядке, что я хочу их представил.Я сделаю мой бар фиксированное меню, а также панель вкладок .