Как создать прототип за рекордно короткий срок с помощью плагина Material Theme для Sketch и Vuetify.js

1656601835 kak sozdat prototip za rekordno korotkij srok s pomoshhyu plagina

автор Адам Уоттис

PZ5XtBtdiOLOd1ZL82ONoQfKbbugtSXAYQnN

Разрабатывая MVP (минимально жизнеспособный продукт), вы намерены как можно скорее переходить от идеи к прототипу. Чем быстрее вы можете прототипировать свою идею, тем быстрее вы можете ее повторить.

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

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

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

Используя плагин Material Design для Sketch, мы создадим нашу собственную настраиваемую систему Material Design. Это будет включать в себя большой набор компонентов, которые позволят нам быстро создавать согласованный дизайн для нашего прототипа программы. Приложение, которое мы создадим, это простое приложение для напоминаний.

Мы будем использовать интерфейсный фреймворк Vue.js вместе с библиотекой компонентов Material Design Vuetify.js для реализации наших приложений. Давайте приступим к этому!

Создание системы проектирования

Загрузите этот плагин для Sketch. После установки просто перейдите в раздел «Плагины» > «Материал» > «Открыть редактор тем», чтобы увидеть редактор темы Material Design. Нажмите «Создать новую тему» ​​и мы решим начать с базовой темы.

Теперь мы представляем нашу систему Material Design компонентов Sketch.

LuaHmcKZg8RwSJmcVazNctiDo75Sdf0KqHwP
Ваша библиотека компонентов.

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

Теперь мы создали нашу систему дизайна. Как видим, там сказано, что документ есть a библиотека. Это означает, что любые изменения, которые вы внесете в этот файл Sketch, повлияют на ваши макеты и обновят все ваши проекты с помощью этих изменений. Насколько это здорово?

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

Макеты

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

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

vxaJm-KKTX25ZzXOZV1KeHcchXY63uvpyN12
Исследуйте все компоненты нашей библиотеки и представьте возможности!

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

  • Добавьте новое напоминание
  • Удалить напоминание
  • Отметьте напоминание из списка дел
  • Снимите флажок с напоминанием из заполненного списка

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

Начнём с верхней панели навигации. Поставьте его и разместите, а затем размер, чтобы он соответствовал экрану. Нам придется изменить первый значок на «Значок/Добавить/Заполненный» для значка меню и изменить цвет значка на белый. Затем измените все остальные пиктограммы, поскольку они нам не понадобятся. Мы также изменяем заголовок на напоминание.

ZCb-U7Is9ahlpicmLCUmc93MeN4CpWUj-FhF
Настройка в соответствии с вашими потребностями становится очень простой благодаря замене символов.

Теперь мы начнём получать некоторые фиктивные напоминания. Мы создадим наши напоминания как список, поэтому давайте найдем подходящий компонент. Мы будем использовать «Список / Одна строка / Отступление / Тело 2».

Теперь мы центрируем объект списка, снимаем нижний разделитель, устанавливаем текст на «Chores» и, наконец, меняем значок на «Значок/Картический круг/Контур».

9Prfl9hSretZJqgP0l-AhgJ0ey7uVXKSZVmR

Добавьте заголовок, вставив текстовое поле и воспользовавшись модулем Plugins > Sketch Material > Typography, чтобы изменить стиль на Subhead.

TINK-Ts33QE0vIUe4orSqhCF8oNVsP4t3-p2
Выбрав текстовое поле и перейдя к модулю Типография, можно нажать стиль, чтобы применить его.

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

Выделите библиотеку и найдите компонент списка, который мы использовали на странице Material Components. Затем дважды щелкните его, чтобы перейти к его символу. Щелкните значок влево, чтобы он был в фокусе, затем скопируйте, вставьте и переместите его вправо. Дело сделано.

S8X8VqUhxaBO0GjO92TkQz0-sxDn3UjSCKh1

Когда мы возвращаемся к нашему проекту, мы видим, что в верхнем правом углу написано «Доступные обновления библиотеки».

0FUd44ijqurPseWYOj3eSPZiHhjhDgO1ckiU
В библиотеке обнаружены изменения. Вы можете обновить свой дизайн с помощью новых изменений.

Теперь мы сможем изменить значок правой руки на «Значок/Закрыть/Заполненный», который будет кнопкой, чтобы полностью удалить напоминание из списка.

Чтобы создать список напоминаний, мы просто копируем, вставляем еще кучу объектов списка, изменяем их текст, а затем меняем название, которое мы добавили в Todo.

-TrerR8NqmxuW9wOCg9wz2aDGTyPiUzzzdOA
Список задач завершен.

Затем мы копируем, вставляем весь список, чтобы создать список Завершены. В этом новом списке необходимо изменить заголовок на «Завершено», а затем изменить все значки влево, чтобы они заполнялись вместо контура.

AcZpO-zEL-N5FIEcPk5yDThcsL83K50ozWQt
Выберите все элементы списка, чтобы изменить их значки одновременно.

Мы почти закончили наши макеты. Чтобы ускорить работу, я просто изменил цвет монтажной области на #FAFAFA и добавил «Тень/00dp» по каждому из своих списков.

JoFxDKR5zSuNcGsBZgh9em9RRu15tH2hkYoQ
Завершенный макет.

Теперь этот макет завершен. Следующее, которое нужно создать, это диалоговое окно, которое появляется при нажатии кнопки «Добавить».

Мы начинаем с копирования монтажной области, над которой мы работали, чтобы создать точную копию. Затем мы используем модули «Диалог» и «Форма» в разделе «Плагины/материал для эскиза», чтобы создать диалог и форму по отдельности. Затем они объединяются, а сзади размещается непрозрачная коробка. Я сменил прозрачную кнопку действия в диалоге на кнопку основного цвета.

aelleiqG6FnghDdfwGT9YtRF7jnYn8OfMvrp

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

Vue из Vuetify

Теперь в интереснейшую часть — кодировку. Мы будем использовать Vue.js, являющийся библиотекой интерфейса, написанной на JavaScript. Это действительно легко научиться, и первым шагом будет проверка их веб-сайта. Для реализации Material Design мы будем использовать библиотеку компонентов Vuetify.js, которая включает в себя множество компонентов Vue вместе с системой сеток, чтобы легко организовать ваш макет.

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

Глядя на HTML, начинайте с внешней стороны и двигайтесь внутрь.

У нас есть свое <head>ead> and &lt;body>dy> tags. Внутри &lt;head> у нас есть тегk> tags that вытащит необходимый файл vuetify.min.css и шрифты Google.

В <body>&lt;/body>; we have a

и внутри этого мы имеем Vuetify components, for экзаменple <v-app></v-app> и обозначенные «v-» в их названиях.

Дальше у вас есть два <script><;/script>, импортирующие модули Vue.js и Vuetify.js на нашу страницу.

q0VKlrkzc1mWE6qa2hyVy2sBYK0gLKlTtDin

Наконец, после импортных заявлений, есть третье <script><;/script> тег, который крeates новый экземпляр Vue(). Здесь мы напишем весь наш код JavaScript.

Мы видим, что экземпляр подключается ‘#app’ который является идентификатором <div>

в нашем HTML. Это позволяет нашему экземпляру Vue знать, куда ввести наш пользовательский интерфейс.

Внутри <v-content></v-content> мы вскоре разместим все наши компоненты Vuetify. Но сначала мы сохраним то, что имеем на данный момент, как index.html, а затем откроем файл в нашем браузере, где нам будет представлен Hello world.

Мы продолжаем поиск того, какой HTML нужен нам для верхнего компонента навигационной панели в документации Vuetify. Тег, который мы ищем <v-toolbar app></v-панель инструментов>. Мы также хаve to add a <;v-btn> Внутри этой панели навигации, чтобы мы могли нажать ее, чтобы отобразить диалоговое окно с добавлением новых напоминаний.

В эту кнопку мы также добавим a @click= событие, которое будет установлено addModal к true который вызовет модальный диалог. Мы добавляем это между <v-content></v-content> теги:

<v-toolbar app color="primary">  <v-btn color="primary darken-1" icon @click="addModal = true">    <v-icon>add</v-icon>  </v-btn>  <v-toolbar-title>    Reminders  </v-toolbar-title></v-toolbar>

Дальше мы должны добавить HTML для диалога. Это будет жить сразу после <v-toolbar-title></v-toolbar-title> тег, но все же inside the <v-toolbтег ar>. Вот диалог:

<v-dialog v-model="addModal">  <v-card>    <v-card-title>Add a reminder</v-card-title>    <v-card-text>      <v-container grid-list-md>        <v-layout wrap>          <v-flex md12>            <v-text-field v-model="newTask" label="New task"></v-text-field>          </v-flex>          <v-flex md12>            <v-btn color="primary" @click="add">Add</v-btn>          </v-flex>        </v-layout>      </v-container>    </v-card-text>  </v-card></v-dialog>

Здесь мы добавляем а <v-card-title> с заголовком «Добавить напоминание». Затем мы используем сетку Vuetify, чтобы создать список, охватывающий все 12 столбцов. мы add a <v-text-field>that binds в ‘newTask’ и имеет метку с надписью «Новое задание». Также будет кнопка, through событие @click=, triggers функция «добавить», которую мы напишем всего за секунду.

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

Sehm8NfdIO65eutcubldfukWd9A1kYIaAhob

Не волнуйтесь, что диалог еще не работает – мы должны сначала добавить функциональность для него внутри нашего Vue() экземпляр. Мы делаем это, добавляя следующее к нашему экземпляру сразу после el: '#app' но отделяется запятой:

el: '#app',data: {  addModal: false,  newTask: ''}

The данные объект, где мы сохраняем состояние нашей программы. Благодаря этой настройке наш диалог теперь должен работать. Сохраните и обновите страницу.

2fjdoJY-cmsKeXhu4y4-lEpYUzbocHiWwDYB

Теперь, когда вы нажимаете, чтобы открыть модальный диалог, внутреннее состояние в data: {} установлено на addModal: true, который затем отображает модальный. Аналогично, каждый раз, когда вы пишете сообщение при вводе текста диалога, оно будет сохранено в newTask поскольку <v-text-field></v-text-field> привязан к it throтьфу v-модель=.

Теперь мы добавим код для add функция, которая сохранит все, что есть внутри newTask в наш список напоминаний, которые вскоре появятся. Эта функция должна быть расположена внутри методы объект, который мы добавим после нашего data: {}, объект в экземпляре Vue.

Функция будет выглядеть так:

add() {  if (this.newTask !== '') {    this.tasks.unshift({text: this.newTask, completed: false})    this.addModal = false    this.newTask = ''  }}

После заключения функции внутри method: {} объекта, теперь код должен выглядеть так:

new Vue({  el: '#app',  data: {    addModal: false,    newTask: '',    },  methods: {    add() {      if (this.newTask !== '') {        this.tasks.unshift({text: this.newTask, completed: false})        this.addModal = false        this.newTask = ''      }    }  }});

Когда add() запускается функция, она придаст наше задание с newTask в наш еще не созданный список задач, если он не пуст. После этого диалоговое окно закроется с помощью настройки this.addModal = false и установите newTask чтобы снова опорожнить.

Давайте создадим список задач, чтобы мы могли начать вводить несколько напоминаний. Внутри data объекта, поместите этот код:

tasks: [   // Some dummy data   {    text: 'Chores',    completed: false   },   {    text: 'More chores',    completed: false   }]

Это будут наши фиктивные напоминания. Как видите, у нас есть a completed ключ, установленный на любой true или false чтобы мы могли различать задачи, которые выполнены, и те, которые не выполнены. Это также означает, что мы не можем просто показать свои tasks список, как он есть в нашем пользовательском интерфейсе, потому что тогда мы отображали бы завершенные и незавершенные задачи вместе.

Мы решим это с помощью вычисляемые свойства. Они работают постоянно, наблюдая за изменениями в вашей программе и возвращая вычисленное значение на основе изменений.

Нам нужны два вычисляемых свойства: одно для todo список и один для done список, в котором каждое будет разделять незавершенные и выполненные задачи. Добавляем computed: {} после нашего methods: {}, и зайти todo: function() {} и done: function() {} вычисляемые свойства. The todo функция будет return this.tasks.filter(function(task) {return !task.completed}) и done функция вернет обратное, удалив ! (что означает «нет») перед task.completed . Код должен выглядеть так:

computed: {  done: function() {   return this.tasks.filter(function(task) {return task.completed})  },  todo: function() {   return this.tasks.filter(function(task) {return !task.completed})  }}

Теперь мы готовы воспроизвести два наших списка в нашем интерфейсе. Это будет довольно много разметки, но не беспокойтесь, мы рассмотрим это вместе. Мы собираемся заменить <v-container>Hello world</v-container>, выбрав его, а затем вставив на его место:

<v-container grid-list-md>  <v-layout row wrap>    <v-flex xs12>      <v-list>        <v-subheader>Tasks to do</v-subheader>        <v-list-tile v-for="task in todo">          <v-list-tile-action>            <v-btn icon ripple @click="complete(task)">              <v-icon v-if="task.completed">check_circle</v-icon>              <v-icon v-else>check_circle_outline</v-icon>            </v-btn>            </v-list-tile-action>          <v-list-tile-title>            {{task.text}}          </v-list-tile-title>          <v-list-tile-action>            <v-btn icon ripple @click="remove(task)">              <v-icon color="grey lighten-1">cancel</v-icon>            </v-btn>          </v-list-tile-action>        </v-list-tile>      </v-list>    </v-flex>              <v-flex xs12>      <;v-list>        <v-subheader>Completed tasks</v-subheader>        <v-list-tile v-for="task in done">          <v-list-tile-action>            <v-btn icon ripple @click="complete(task)">              <v-icon v-if="task.completed">check_circle</v-icon>              <v-icon v-else>check_circle_outline</v-icon>            </v-btn>            </v-list-tile-action>          <v-list-tile-title>            {{task.text}}          </v-list-tile-title>          <v-list-tile-action>            <v-btn icon ripple @click="remove(task)">              <v-icon color="grey lighten-1">cancel</v-icon>            </v-btn>          </v-list-tile-action>        </v-list-tile>      </v-list>    </v-flex>  </v-layout></v-container>

Для начала добавим grid-list-md к нашему контейнеру. Затем добавляем <v-layout row wrap></v-layout> and <v-flex xs12>lex> and add oтвои дваlist></v-list> tags из в каждом. Это создает наш главный макет в виде двух списков.

Тогда мы добавим <v-list-tile v-for="task in todo"></v-list-tile>; where оператор v-for= повторяет through каждое задание в our cрассчитано свойство todo. То же goes за произведенное имущество. Когда мы выбираем каждый список, мы отображаем каждый элемент списка. Каждый элемент будет display tон task.text и будет две кнопки: одну для триggering the функция complete() и один к trigger функция remove().

Давайте продолжим, написывая это внутри нашего method объект.

complete(task) {  task.completed ? task.completed = false : task.completed = true},remove(task) {  this.tasks = this.tasks.filter(function(x){return x !== task})},

The complete тело функции содержит тройной оператор, переключающий кнопку «Завершить» во время каждого напоминания. Всегда task.completed установлено на true при напоминании обновится весь интерфейс пользователя и переместит это напоминание в список «Завершено».

Теперь у вас должен быть реальный рабочий прототип нашей программы-напоминания!

Последние мнения

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

Благодаря этому можно настроить библиотеку компонентов, создать свои проекты, а затем быстро реализовать их в коде.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.