Автор оригинала: FreeCodeCamp Community Member.
Адам Уотрис
При разработке MVP (минимальный жизнеспособный продукт) вы намерены пойти от идеи к прототипу как можно быстрее. Чем быстрее вы можете прототировать свою идею, тем быстрее вы сможете по этому поводу.
Когда вы переходите из абстрактной идеи к рабочему прототипу, вы обычно не хотите тратить много времени, создавая пользовательский дизайн, когда вы должны быть сосредоточены на функциональности приложения. Чтобы решить эту проблему, мы используем фреймворки, такие как Bootstrap для быстрого достижения структурированного макета с помощью интернет-пользовательского интерфейса, которые выглядят «довольно хорошо» без особых усилий.
Что мы действительно хотим достичь, с точки зрения дизайна, это быстро создать интернет-интерфейс узнаваемый и последовательный.
Я собираюсь показать вам супер быстрый способ поехать из абстрактной идеи, дизайн, к рабочему прототипу с материальным дизайном. Материальный дизайн – это система дизайна Google с открытым исходным кодом, которая использует для всех их приложений. Это делает его узнаваемым, потому что он интуитивно понятен и легко ориентироваться, и большинство людей уже знакомы. Если вы еще этого не сделали, вы обязательно должны проверить, что Материал дизайн это все о.
Используя плагин дизайна материала для эскиза, мы создадим наш собственный настраиваемый дизайн материала. Это будет включать отличный набор компонентов, которые позволят нам быстро создавать когерентные конструкции для нашего приложения для прототипа. Приложение, которое мы сделаем, это простое приложение напоминания.
Мы будем использовать Framework Framework vue.js вместе с библиотекой компонента дизайна материала vuetify.js, чтобы реализовать наши прикладные конструкции. Давайте доберемся до этого!
Создание системы дизайна
Скачать Этот плагин для эскиза. После установки просто перейдите к плагину> Материал> Открытьте редактор темы, чтобы увидеть редактор темы дизайна материала. Нажмите «Создать новую тему», и мы решили начать с исходной темы.
Сейчас мы представлены нашей системе дизайна материалов компонентов эскиза.
В тематическом редакторе вы можете изменить основной и вторичный цвет, измените шрифт, измените форму углов элементов и включите пользовательские значки. Для этого примера мы не изменим ничего из них и просто придерживайтесь по умолчанию.
Теперь мы создали нашу систему дизайна. Как видите, он говорит, что документ является Библиотека Отказ Это означает, что любые изменения, которые вы делаете в этот файл эскиза, повлияют на ваши макеты и обновляют все ваши проекты с этими изменениями. Как здорово это?
Перед продолжением мы также установим плагин эскиза материала, который добавит некоторые модули, которые мы скоро используем.
Макеты
Давайте начнем с открытия нового документа на эскиз, создавая новую артборду для iPhone и сохранение его как MaterialReminders.sketch Отказ Это где мы создадим наши проекты для нашего приложения. Но сначала, давайте исследуем богатую библиотеку компонентов, которая находится в нашем распоряжении.
Под Вставить> Symb OLS Вы должны увидеть библиотеку компонентов, которую мы только что создали.
Просто так много компонентов! Теперь мы можем начать создавать наши проекты. Но сначала мы должны сломать, какую функциональность мы хотим, чтобы это напоминало приложение. Мы держим его простым и только добавляем возможность:
- Добавить новое напоминание
- Удалить напоминание
- Установите напоминание из списка TodDo
- Снимите флажок напоминание из вашего заполненного списка
Фантастика, давайте ускорим вещи и начните сбрасывать некоторые компоненты в нашу первую IPhone Ardboard.
Начнем с топ Наварба. Снимите его и поместите его, затем размер, чтобы соответствовать экрану. Нам придется изменить первый значок на «Icon/Add/Follow» для значка меню и изменять цвет значка на белом. Затем измените все другие значки ни на что никому, так как мы не будем им нуждаться. Мы также изменим заголовок для напоминаний.
Теперь мы начнем падать в некоторых напоминаниях. Мы создадим наши напоминания, такие как список, поэтому давайте найдем подходящий компонент. Мы будем использовать список/одну строку/отступ/тело 2 ».
Теперь мы будем центрировать объект списка, забрать дно-делитель, установите текст на «Дела», и, наконец, измените значок «Значок/проверенный круг/изложенную».
Добавьте заголовок, вставляя текстовое поле, а затем с помощью плагинов> Эскиз Материал> Типографии модуль для изменения стиля на подповерху.
Это начинает выглядеть довольно хорошо! Но теперь мы столкнулись с проблемой. Мы также хотим включить список элементов управления для правильно В каждом объекте списка, потому что мы хотим добавить кнопку удаления там. Но Devs on Google не включал никакого переопределения для этого в компоненте эскиза. Тем не менее, не заботятся, мы исправим это, перейдем в наш файл библиотеки и добавив наш значок на символ, при этом обновляя его по всему нашему проекту.
Перейдите в библиотеку и найдите компонент списка, который мы использовали на странице компонентов материала. Затем дважды щелкните по нему, чтобы перейти к его символу. Нажмите на значок влево, чтобы он был в фокусе, то скопируйте вставку и переместите его вправо. Сделано дело.
Когда мы переключаемся в наш проект, теперь мы можем видеть, что в правом верхнем углу он говорит «Доступны обновления библиотеки».
Теперь мы должны уметь изменить значок правой руки на «Icon/Blace/Follow», которая будет кнопкой полностью удалить напоминание полностью из списка.
Чтобы создать список напоминаний, мы просто скопируем вставку вставьте группу более список объектов, измените их текст, затем измените название, которое мы добавили в TODO.
Затем мы скопироваем вставьте этот целый список для создания завершенного списка. В этом новом списке необходимо изменить заголовок на «Завершенное», затем измените все значки слева, чтобы быть заполнены вместо изложенных.
Были почти сделаны с нашими макетами. Чтобы ускорить вещи, я просто изменил наш цвет ArtBoard на #fafafa и добавил «тень/00dp» за каждым из моих списков.
Этот макетный вид сейчас завершен. Далее нам нужно создать, это диалог, который появляется при нажатии кнопки «Добавить».
Мы начинаем с копирования вставки Armboard, мы работали над тем, чтобы создать точную копию. Затем мы используем диалог и формируйте модули под «Материалом плагинов/эскизов», чтобы создать диалог и форму отдельно. Затем они объединяются, а непрозрачная коробка размещена позади. Я выключил кнопку прозрачного действия в диалог на основную цветную кнопку.
Теперь мы сделаны с эскизом. Конечно, мы могли бы добавить больше функций и еще больше расширить наши макеты, но теперь мы будем держать его простым сейчас. Следующим шагом является запись кода, который станет нашим приложением!
Vue с Vuetify
Теперь для забавного части – кодирование. Мы будем использовать Vue.js, которая является библиотекой интерфейса UI, написанной в JavaScript. Это действительно легко учиться и проверить их Сайт будет первым шагом. Для реализации дизайна материала мы будем использовать Vuetify.js Библиотека компонентов, которая включает в себя кучу компонентов Vue вместе с системой сетки, чтобы легко организовать свою макет.
Мы начинаем с просто копирования вставки примерной маркировки, которая на странице стартера Vuetify. Давайте посмотрим на то, что это делает для нас.
При взгляде на HTML начните снаружи и работайте в пути.
У нас есть наш EAD> А & & lt; body> DY> Теги. Внутри & l т; голова > Тег у нас есть
В & lt;/body> ; У нас есть
Компоненты для экзамен Ple -App> и , которые обозначены «V-» в их именах. Далее у вас есть два