ZURB всегда работает над следующим крупным инструментом, который поможет веб-дизайнерам и разработчикам. Они делают наши дни программирования немного легче и веселее. Основа Foundation, пожалуй, самая известная, и вскоре в семействе появится новый член: Foundation for Apps.
С запланированным выпуском вторника, 2 декабря, сейчас самое время посмотреть, что будет предлагать Foundation for Apps, его основные функции и что мы можем ожидать в ближайшем будущем. Недавно мне дали возможность пообщаться с Брэндоном Арнольдом , ведущим дизайнером, и Джеффом Кимбаллом , дизайнером продукции в ZURB. Они показали мне из первых рук некоторые из его мощных функций, и сегодня я покажу вам, что вы сможете с этим сделать.
Характеристики
Основная цель Foundation for Apps — предоставить средства для быстрого создания прототипов сложных веб-приложений и основы для создания этих веб-приложений. Чтобы сделать все это возможным, он имеет несколько чрезвычайно полезных функций, в частности:
1. Motion UI
Новая эра плоского дизайна во многих отношениях отвлекла от наших интерфейсов: иерархию и структуру из-за отсутствия градиентов, скейоморфных элементов, теней и глубины. Foundation for Apps решает эту проблему, используя богатую библиотеку пользовательского интерфейса Motion с множеством анимаций и переходов, готовых для использования. Вам не придется возиться с Sass или JavaScript, потому что ZURB сделал для вас тяжелую работу.
Вот что мы можем ожидать:
Анимации : CSS-анимация ключевых кадров позволит вам добавить тонкое движение и эффекты в ваше приложение. Это предоставит пользователям обратную связь, информирующую их о том, как структурировано ваше приложение и как они должны взаимодействовать с ним. Такие детали отлично подходят для уделения дополнительного внимания уведомлению, ошибке или призыву к действию.
Переходы . Переходы можно использовать для всех видов модных вещей, от плавного перемещения объекта из одной позиции в другую, до замены содержимого и отображения нового содержимого, например навигации вне страницы и раскрывающихся списков.
Модификаторы движения : они используются, чтобы влиять на направление, скорость, итерацию, легкость и задержку ваших объектов. Вместе с анимацией у вас есть огромные возможности для создания плавного пользовательского опыта.
В совокупности все эти компоненты обеспечивают захватывающий и живой опыт для ваших пользователей, с легкостью предопределенных классов. Они сэкономят вам массу работы и быстро запустят этот прототип.
2. Сетка Flexbox
Foundation for Apps будет использовать CSS Flexbox для определения своей Grid. Flexbox предоставляет способ упорядочить ваши элементы в HTML так, как вы хотите, независимо от разметки. Вы можете разместить свой контент буквально в любом месте, сверху вниз, слева направо, в центре и в середине. Использование Flexbox дает несколько преимуществ:
- Больше нет необходимости в фиксированном позиционировании, которое часто бывает ненадежным на мобильных устройствах.
- Независимо от разметки вы можете разместить свой контент где угодно.
- Вместо того, чтобы просто складывать содержимое по вертикали, вы можете создать веб-приложение на всю страницу с отдельными прокручивающимися разделами, когда требуется больше контента.
- Там нет необходимости очищать поплавки.
- Вы сможете создать сложный макет веб-приложения за считанные минуты.
Другой синтаксис потребуется для сетки, поскольку строки и столбцы не имеют смысла при вертикальной прокрутке различных разделов содержимого в макете. Вот что вы будете использовать для создания собственного макета веб-приложения:
- Группы : группы будут использоваться как объекты макета, которые могут содержать больше групп или блоков. Они чем-то похожи на строки в Foundation 5.
- Блоки : они содержат только контент. Вы не будете использовать их для своего макета, но вместо этого они будут содержать другие элементы и компоненты. Представьте их как колонны в фундаменте 5.
- Рамки . С помощью рамок вы сможете разделить экран на части, так как рамки занимают 100% ширины и высоты экрана. Это позволяет создавать области с независимой прокруткой.
3. Одностраничные приложения
Будущее веб-приложений будет зависеть от состояний, а не от совершенно новых страниц, и показывать, что это было одной из наших основных целей для Foundation — Брэндон Арнольд, Lead Design
С Foundation for Apps мы можем увидеть изменение в способе представления контента нашим пользователям. Вместо того, чтобы просто перезагружать страницу после каждого действия пользователя, контент можно показать или скрыть в зависимости от того, что пользователь хочет увидеть.
Этот подход сделает ваше веб-приложение более похожим на нативное; пользователи получат свой контент быстрее и интуитивно поймут, откуда он. Вам решать, какой контент является релевантным, что следует показывать и что следует удалять, когда это не нужно.
4. Шаблоны AngularJS Маршруты
Foundation for Apps будет использовать Angular в качестве своей инфраструктуры MVC для выполнения тяжелой работы. Давайте узнаем, как:
С помощью Foundation for Apps мы также пытаемся сделать Angular доступным для дизайнеров и разработчиков — Брэндон Арнольд, Lead Design
При использовании Foundation for Apps для будущих проектов вам вообще не нужно много знать об Angular. Чтобы упростить такие вопросы, как использование различных анимаций и определение URL-адресов ваших шаблонов, Foundation for Apps использует маршрутизацию пользовательского интерфейса . Вы можете определить свой URL и анимацию в своем HTML-файле, и с помощью небольшого волшебства Gulp теги шаблона будут проанализированы, и в ваш шаблон будут добавлены правильные фрагменты кода.
Таким образом, вы можете создать одностраничное веб-приложение, даже не касаясь ни одной строки JavaScript. Например, вот что вы напишите в своем шаблоне:
|
1
2
3
4
5
6
|
—
name: home
url: /home
animationIn: bounceIn
animationOut: bounceOut
—
|
И это то, что вся магия Foundation for Apps анализирует для вас:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var routerApp = angular.module(‘routerApp’, [‘ui.router’]);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(‘/home’);
$stateProvider
.state(‘home’, {
url: ‘/url’,
templateUrl: ‘partial-home.html’,
controller: ‘PageController’, //default controller
data: { vars: {
name: home,
url: /home,
animationIn: bounceIn,
animationOut: bounceOut
}}
});
});
|
Это не только сэкономит вам кучу времени при разработке прототипа или фактического продукта, но даже сделает создание веб-приложения доступным для тех, кто не знаком с более сложной интерфейсной разработкой.
5. Компонентный код
Вместо использования кода, подобного <div class="modal" data-modal> , Foundation for Apps будет использовать угловые директивы, чтобы раскручивать вещи и облегчать их запоминание. Вместо этого вы напишите что-то вроде <fa-modal> , чтобы получить тот же результат.
Это обеспечивает более чистую разметку, которая обеспечивает лучшую согласованность вашего рабочего процесса и работы вашей команды. Вместо того, чтобы думать о том, должен ли тег быть header , footer , <fa-yourtag> div или section например, вы просто <fa-yourtag> . Легко ли?
Кроме того, этот управляемый компонентами код позволяет интегрировать классы пользовательского интерфейса Foundation Motion для создания анимаций и их применения к различным представлениям.
Другие преимущества
Ознакомьтесь с некоторыми другими функциями, которые будут включены в Foundation for Apps:
- Off-холст
- Панели
- Черные списки
- Всплывающие меню
- Панель иконок
- модальности
- Оповещения
- формы
- взаимообмен
Вещи, которые мы можем ожидать
Во-первых, мы можем ожидать, что Foundation for Apps станет следующей интересной и полезной статьей семейства Foundation. Ребята из ZURB следят за каждой новой технологией и трендом, и благодаря своему многолетнему опыту в разработке продуктов, они снова предлагают отличный продукт для использования сообществом. Так же, как Foundation for Sites и вскоре получивший название Foundation for Email , Foundation for Apps является полностью открытым исходным кодом и будет постоянно оптимизироваться ZURB и сообществом для работы на нескольких устройствах.
Будущее Фонда
С появлением Foundation for Apps и тем, что Ink станет Foundation for Email, мы можем видеть начало набора инструментов, которые подходят для различных задач, которые мы выполняем как веб-дизайнеры и разработчики. Скоро мы поговорим об этих трех разных продуктах:
- Фонд для сайтов : мы все знаем это! Основа для сайтов есть и всегда будет отличной для контента и маркетинга сайтов. Это быстрый инструмент для создания прототипов и действительно потрясающая платформа для создания мобильных, в первую очередь, адаптивных веб-сайтов.
- Фонд для приложений : новый ребенок в блоке, отвечающий нашим потребностям для будущих тенденций веб-приложений, завоевывающих Интернет! Благодаря гибкой сетке, мощным анимациям и дизайну на одну страницу, Foundation for Apps предоставляет инструменты, необходимые для (быстрого) создания и создания прототипов ваших веб-приложений.
- Основа для электронной почты : Отзывчивая электронная почта всегда была большой головной болью. С помощью Foundation for Email ZURB предлагает вам инструменты для хорошей основы для создания шаблонов электронной почты.
Фонд для приложений будет запущен во вторник 2 декабря , так что следите за ним!
Вывод
Действительно, Foundation становится универсальным решением для вашей интерфейсной веб-разработки. Foundation for Apps позволит дизайнерам и разработчикам легко создавать прототипы с несколькими представлениями, включая частичную замену и анимацию, что отлично подходит для создания демонстраций, чтобы произвести впечатление на вашу команду и клиентов.