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

Код долгое время был неотъемлемой частью моего инструментария для прототипирования, и Punchcut стремился сделать его частью своего процесса проектирования. Но когда в прошлом году Facebook запустил Origami Studio, мы увидели интересную возможность по-новому интегрировать продвинутое прототипирование. Всегда нуждавшийся в коде для взаимодействия с высокой точностью, мы были впечатлены возможностями полностью визуального инструмента.

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

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

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

Разумно, Facebook, кажется, немного стесняется этой точки зрения. Большинству дизайнеров не нравится программирование. Но чтобы получить максимальную отдачу от Origami Studio или любого другого инструмента логического прототипирования, вы не можете просто изучить его возможности. Вы должны изучить основы программирования. А для тех, кто хочет проектировать с помощью кода, но не любит загадочных скриптов, Оригами может стать отличным началом.

Почему Оригами?

Не только визуальный интерфейс делает Origami привлекательным языком программирования для дизайнеров. Это также простота синтаксиса.

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

Увидеть основы

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

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

Нашему приложению удалось охватить множество концепций, которые мы суммируем ниже.

  1. Типы данных
  2. Вывод
  3. Вход
  4. Математика
  5. Состояние
  6. Логика
  7. Повторение
  8. Структуры данных

1. Типы данных

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

Самый простой патч Origami, Разделитель, преобразует входные данные в данные определенного типа.

2. Выход

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

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

Концепция вывода — это прекрасная возможность мыслить за пределами наших визуально-ориентированных инструментов проектирования. Origami выходит за рамки дисплея с выходными патчами для звука и тактильности. Origami также имеет патч Wireless Broadcaster для вывода необработанных значений, таких как цвета и текст, поэтому вы можете повторно использовать их в качестве входных данных в вашей программе.

3. Ввод

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

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

Как и вывод, концепция ввода — это прекрасная возможность выйти за рамки визуальных интерфейсов. Патчи ввода Origami дают вам доступ к камерам устройства, микрофону и даже акселерометру.

4. Математика

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

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

5. Состояние

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

Приложение часов использует патч Switch для переключения между двумя состояниями слоя Время: на экране и вне экрана.

6. Логика

Логика — это то, что позволяет программе оценивать условия внутри себя и вокруг себя. Эти условия выражаются в виде утверждений, которые либо истинны, либо ложны: «время 12:00 или позже». Программа использует истинность этих утверждений для определения своего состояния.

Приложение часов использует исправление Меньше чем, чтобы определить, является ли время AM или PM. Если сейчас AM, циферблат становится белым. В противном случае циферблат выглядит темно-серым.

7. Повторение

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

Приложение часов использует патч Loop, чтобы систематически создавать свое меню из одного пункта меню.

8. Структуры данных

Данные — это просто еще один тип ввода. К этому моменту мы работали с ним понемногу: числовая настройка положения слоя «Время», когда он находится вне экрана; цветовые настройки часов. Но данные, стоящие за элементами меню (названия городов и смещения по Гринвичу), раскрывают проблемы работы с большими наборами данных. Структуры данных помогают сделать пункты меню более переносимыми, масштабируемыми и удобными для доступа.

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

Код в дизайне

Мы очень рады возможности Origami преодолеть разрыв между дизайнерами и основами программирования, но это неизбежно вызывает утомительные дебаты:

Должны ли дизайнеры кодировать?

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

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

Программирование — это не только разработка программного продукта. Иногда речь идет о более быстром и точном создании серии чисел. Или расшифровать машину Enigma, чтобы помочь положить конец Второй мировой войне. Или создание интерактивного искусства. Или делать фильмы. Или создание роботов.

Код — это место, где мы можем выражать идеи и решать проблемы. Код — это средство проектирования.

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

Перспектива Punchcut
Автор: Эмилио Пасси, главный технолог
© Punchcut LLC, Все права защищены.

Первоначально опубликовано на www.punchcut.com 2 октября 2017 г.

Хотите видеть будущее в своем почтовом ящике?
Нажмите здесь, чтобы подписаться на нашу ежемесячную рассылку — Взгляд в будущее!