Top 7: лучшие бесплатные рамки пользовательского интерфейса для разработки мобильных приложений

Разработка мобильных приложений существенно меняет способ работы разработчиков, переходя от нативных вариантов разработки гибридных приложений на основе HTML5. Одним из главных преимуществ гибридных мобильных приложений является принцип «пиши один раз и беги везде». Сейчас, вероятно, как разработчик, вы используете фреймворки на своей веб-странице для ускорения фазы разработки ваших проектов, но используете ли вы фреймворк для своих гибридных приложений? Каждый волен работать в своих проектах так, как ему хочется. Если вы хотите создать собственную инфраструктуру для работы в приложении с пользовательскими компонентами, просто сделайте это. Однако, если вы новичок в гибридной разработке или просто хотите выполнять свою работу со стандартами, вы можете использовать платформу. Фреймворк поможет вам работать быстрее и лучше, потому что он позволяет вам, разработчику, экономить время, используя общие компоненты, чтобы сосредоточиться на других областях.

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

Важный

Эта верхняя часть не является списком платформ для создания гибридных мобильных приложений (собственный код). Это основано на Рамки, которые помогут вам создать отличный пользовательский интерфейс (некоторые из них используют другие известные платформы WebApp, такие как React, AngularJS или VueJS) для вашего мобильного приложения. Создание мобильного приложения зависит от вас, используя Cordova, PhoneGap, Ionic и т. Д.

7. Ионный Материал

Github

Ionic Material Мобильный интерфейс

Ionic Material — это библиотека расширений для Ionic Framework, то есть вам не нужно менять способ разработки гибридных приложений Ionic, чтобы их материализовать. Ionic Material стремится объединить лучшие представления Material Design в единую дополнительную библиотеку для разработчиков Ionic. С появлением Polymer Project, ngMaterial и других проектов с открытым исходным кодом, он стремится активно участвовать и согласовываться с этими и другими смежными проектами.

Ionic Material лучше всего объяснить как «материальное расширение» для Ionic, а не для Angular в целом. Разница заключается не только в семантике — Ionic Material расширяет фактическое пространство имен ионной структуры (в JS), отображает стили материалов на ионных элементах (следуя соглашениям ionic) и будет стремиться следовать выпускам Ionic и поддерживать тематику материалов, чернила и движение для любого нового выпуска Ionic.

6. Мобильный угловой интерфейс

Github

Mobile Angular UI Framework

Mobile Angular UI — это структура мобильного интерфейса, аналогичная Sencha Touch или jQuery Mobile. Если вы знаете Angular JS и Twitter Bootstrap, вы уже знаете, как его использовать. Mobile Angular UI предоставляет основные мобильные компоненты, которые отсутствуют в Bootstrap 3: переключатели, наложения, боковые панели, прокручиваемые области, верхняя и нижняя навигационные панели с абсолютным позиционированием, которые не отскакивают при прокрутке. Он опирается на надежные библиотеки, такие как fastclick.js и overthrow.js, для достижения лучшего мобильного опыта. Он предоставляет удивительные элементы управления, выглядящие как нативные, вставляет / выводит боковые панели, и вы можете сделать его полностью интерактивным с помощью атрибутов HTML без непосредственного использования Javascript.

5. Phonon

Github

Phonon Mobile UI Framework

Phonon — это легковесная, масштабируемая, гибкая и настраиваемая платформа веб-гибридного мобильного приложения HTML5, которая работает с менеджером страниц (маршрутизатором), созданным на основе действий Android. Phonon заботится о том, чтобы действовать естественным образом с активными компонентами пользовательского интерфейса. Один практический пример — если диалоговое окно открыто и пользователь нажимает кнопку «Назад» на Android, вместо того, чтобы вернуться на предыдущую страницу, контроллер событий автоматически закроет активное диалоговое окно.

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

4. Пользовательский интерфейс материала

Github

Framework UI Material

Material-UI — это набор компонентов React, которые реализуют спецификацию Google Material Design. Недостатком этой удивительной среды является то, что вам нужно работать с React, так как он основан на компонентах. Есть 2 проекта, которые вы можете посмотреть, чтобы начать. Их можно найти в папка примеров. Эти проекты являются базовыми примерами, которые показывают, как использовать компоненты Material-UI в вашем собственном проекте. Первый проект использует browserify для объединения модулей и gulp для автоматизации задач JS, а второй проект использует веб-пакет для объединения и сборки модулей. Мы рекомендуем вам ознакомиться с React перед тем, как погрузиться в Material-UI. Material-UI — это набор компонентов React, поэтому важно понять, как React вписывается в веб-разработку.

3. трещотка

Github

Ratchet Mobile UI Framework

Ratchet — это потрясающая интерфейсная среда, которая позволяет создавать потрясающий пользовательский интерфейс для мобильных приложений с простыми компонентами HTML, CSS и JS. Выпущенный в ноябре 2012 года, Ratchet быстро стал одним из самых популярных инструментов прототипирования в GitHub. После этого первоначального запуска версия 2 была выпущена как полное переписывание. Версия v2 была абстрагирована для разработки стилей, специфичных для платформы, в собственных CSS-файлах темы, добавила набор значков под названием Ratchicons и официально стала частью семейства Bootstrap.

Ratchet предназначен для реагирования на сенсорные события только с мобильного устройства. Чтобы использовать события щелчка мышью (для просмотра и тестирования на рабочем столе), у вас есть несколько вариантов:

  • Включить эмуляцию сенсорных событий в Chrome (находится на вкладке переопределений в настройках веб-инспектора)
  • Используйте библиотеку JavaScript, например fingerblast.js, для эмуляции сенсорных событий (в идеале, загружаемых только с настольных устройств)

2. Framework7

Github

Framework 7 Mobile UI

Framework7 — это бесплатная HTML-платформа с открытым исходным кодом для разработки гибридных мобильных приложений или веб-приложений на iOS Android родной внешний вид. Это также незаменимый инструмент для создания прототипов, позволяющий в кратчайшие сроки показать работающий прототип приложения. Framework7 не использует и не зависит от сторонних библиотек. Именно поэтому он очень легкий, эффективный и гибкий. Framework7 поддерживает неограниченное количество различных изолированных представлений. И самое интересное в том, что вы можете легко контролировать каждое отдельное представление без какой-либо строки JavaScript, просто используя атрибут «data-view» в ссылках. Framework7 использует Ajax для навигации между страницами, вам понадобится сервер.

Framework7 является полностью бесплатным и открытым исходным кодом (MIT Licensed).

1. Пользовательский интерфейс Onsen

Github

Onsen UI Mobile UI Framework

Onsen UI предоставляет инфраструктуру пользовательского интерфейса и инструменты для создания быстрых и красивых гибридных мобильных приложений HTML5 на основе PhoneGap / Cordova. Имея общее ядро ​​без каких-либо зависимостей от фреймворка, разработка приложений с помощью Onsen UI проста с любой из постоянно меняющихся фреймворков JavaScript.

Он позволяет вам работать между такими фреймворками, как React, Meteor, Vue.js, AngularJS, Angular 2 или работать с чистым JavaScript. Богатый выбор компонентов пользовательского интерфейса, специально разработанных для мобильных приложений. Пользовательский интерфейс Onsen предоставляет вкладки, боковое меню, стековую навигацию и множество других компонентов, таких как списки и формы. Все они имеют поддержку дизайна iOS и Android Material с автоматическим стилем, который изменит внешний вид приложения на основе платформы. С пользовательским интерфейсом Onsen вы можете по-настоящему поддерживать Android и iOS с одним и тем же исходным кодом. Пользовательский интерфейс Onsen прост в освоении, будучи мощным инструментом для создания сложных мобильных приложений.

Похвальные грамоты

Touchstone.js

Touchstone iOS стиль рамки мобильного интерфейса

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

Vuetifyjs

Пользовательский интерфейс Vuetify.js

Vuetify.js — это компонентный каркас для Vue.js 2. Он предназначен для предоставления чистых, семантических и повторно используемых компонентов, которые делают создание вашего приложения быстрым. Vuetify.js использует Google Материал Дизайн шаблон проектирования, принимая во внимание другие популярные структуры, такие как Materialize.css, Материал Дизайн Лайт, Семантический интерфейс а также Bootstrap 4.

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

Ссылка на основную публикацию
Adblock
detector