Descargar: Aplicación de plantilla iónica de interfaz de usuario de diseño de materiales

Esta es la plantilla Ionic 1. Si está buscando plantillas de Ionic 3, consulte nuestra cartera.

Obtenga más de 300 pantallas de interfaz de usuario iónicas y construya su Aplicación móvil Ionic/AngularJS.

Ahorre horas de desarrollo utilizando nuestro Más de 60 diseños HTML5 bellamente diseñados. Elige entre 3 temas claros y 2 oscuros. O combine cientos de componentes de interfaz de usuario HTML5 según sus deseos.

No pierda el tiempo rompiéndose la cabeza y cree una aplicación móvil HTML5 desde cero: ¡lo hicimos por usted!

Nosotros hicimos archivo SASS principal superorganizado con todas las variables necesarias para proporcionar a los desarrolladores herramienta que consume poco tiempo para un desarrollo de código limpio y rápido de las mejores aplicaciones móviles. Usando nuestra plantilla puedes produzca rápidamente las mejores aplicaciones móviles para Android e iOS.

Ahora tiene la máxima flexibilidad y puede personalizar fácilmente cada tema según sus necesidades. a los más de 60 diseños a la vez.

En nuestros componentes de la interfaz de usuario de Ionic/AngularJS, ampliamos las características y funcionalidades predeterminadas de Ionic y les agregamos el pulido de Material Design. Todos los elementos están inspirados en Material Design de Google y creados según sus instrucciones.

Puedes fácil de implementar El código fuente de los elementos de la interfaz de usuario de la plantilla de interfaz de usuario de Ionic sigue nuestra enorme y bien organizada documentación.

Usted solo codifica (un poco), nosotros hacemos el diseño.

¡Consulte nuestras aplicaciones de demostración de ejemplo!

Fácil como un pastel. ¡Feliz codificación!

NOTA: Si planea vender su aplicación a través de Play Store o comprar desde la aplicación, debe comprar una licencia extendida.

Lista completa de características

• CONSTRUIDO CON SASS (hojas de estilo sintácticamente asombrosas)

  – como su nombre lo dice: ¡es increíble! Hicimos un sistema de tematización completo en un archivo SASS principal súper organizado donde puede cambie y ajuste casi todas las variables en los más de 60 diseños a la vez. Con SASS puede personalizar rápidamente nuestros temas o incluso crear nuevos.

• Dos marcos combinados: Materializar iónico

  estructura. ¡Desarrolle el front-end de su aplicación web móvil tan rápido como un rayo!

• Más de 60 diseños terminados listos para usar

  – construya su aplicación móvil sobre directivas. Cada directiva contiene 5-7 diseños HTML5 que se pueden implementar muy fácilmente. Por supuesto, puede personalizarlo y crear una aplicación móvil HTML5 única. O puede usar las clases predeterminadas de Materialise. Todo lo que necesita hacer es proporcionar contenido.

• 5 temas – los más de 60 componentes de la interfaz de usuario están hechos en 3 temas claros y 2 oscuros: AZUL CLARO, VERDE CLARO, MORADO CLARO, AMARILLO OSCURO y ROJO OSCURO.
• gráfico unificado

  – todos los elementos gráficos están inspirados en

  Diseño de materiales de Google

  y se pueden combinar infinitamente. Incluso si desea combinar componentes de interfaz de usuario de diferentes temas, es posible con solo unos pocos ajustes.

• Muchos elementos de la interfaz de usuario tienen animación y/o transparencia – hermosas animaciones transparentes que son cada vez más populares en el desarrollo web.

• Iconos – incluye una amplia gama de más de 800 íconos de Material Design de Materialdesignicons.com sobre la fuente Fontello. No más PNG de diferentes tamaños: lo hacemos en formato SVG escalable. También hay más de 740 iconos predeterminados del marco Materialise. Entonces obtienes muchos íconos jónicos.
• Todos los elementos y diseños de la interfaz de usuario funcionan en Android 4.4 y versiones posteriores a la última versión de Android. Lo probamos en Samsung Galaxy S7 (Android 6), Sony Xperia Z2 (Android 6), Samsung Galaxy J5 (Android 5.1), Sony M2 (Android 5.1), Samsung s4 (Android 4.4). También lo probamos en GenyMotion. Y todo funciona perfecto.
• Todo probado también (y funciona muy bien) en iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6s, iPhone 6 plus y iPhone 6s plus.
• Código limpio con comentarios – Todos los archivos HTML5, CSS3 y SASS están bien comentados para un desarrollo y una personalización más fáciles y rápidos.
• Fuentes cambiables en una línea de código – usamos fuentes web (Roboto y Lato) como lo sugiere Google, pero es muy fácil reemplazarlo en una sola línea de código en el archivo SASS principal (al cambiar la URL a la fuente web). Nota: si planea cambiar la fuente, le sugerimos que la cambie con algunas fuentes web que tengan el mismo número de pesos de fuente.
• Modos de fusión SASS/CSS – Hicimos varios modos de mezcla. (foto en blanco y negro, oscurecimiento y degradados) por lo que cada imagen en la aplicación se verá perfecta y mejorará el lado estético de su aplicación. ¡A los usuarios les encanta la buena aplicación!
• animaciones CSS – en combinación con Animate.css, producimos varios elementos animados que aumentarán la calidad UX de su aplicación móvil
• Imágenes – En todos los temas, solo hay 4 tamaños de imágenes (200 × 200 px, 600 × 300 px, 600 × 150 px y 130 × 220 px). Los fondos son Full HD (1920×1080px). Todos los demás tamaños usados ​​están hechos automáticamente.
• Colores – Los colores y las combinaciones de colores de cada tema de Ionic se crean a partir de la paleta de colores de Google Material Design y según sus directrices.
• Eventos – en cada botón, proporcionamos un «evento» en el que se puede hacer clic y que puede anular y personalizar según sus necesidades. También organizamos brindis por cada “evento”.
• efecto dominó – incluido en casi todos los componentes de la interfaz de usuario en estado de desplazamiento.

Lista de todos los componentes de la interfaz de usuario:

• Vistas de lista – Cinco tipos de vistas de lista: Expandible (5 diseños), arrastrar y soltar (5 diseños), deslizar para descartar (5 diseños), encabezados de listas fijas (5 diseños) y Google Cards (6 diseños). Usamos algunos elementos del marco Ionic y los combinamos con Materialise. No estábamos contentos con su aspecto, así que los actualizamos y los pulimos para que sean más bonitos y más fáciles de trabajar con ellos. Todos ellos tienen sus propios efectos y funcionalidades específicas. También agregamos animaciones de apariencia que se pueden combinar con las cinco vistas de lista para mejorar la apariencia y la experiencia del usuario. Y, por supuesto, todo está hecho en cinco temas de Material Design Ionic, lo que hace en total 130 pantallas de vistas de lista. Proyecto de código abierto utilizado en estos componentes: Encabezado de lista fija
• Efecto de paralaje (6 diseños) – Hicimos un nuevo componente para Ionic/AngularJS de manera que combinamos Parallax de Materializer con listas de Ionic y obtenemos un hermoso elemento de interfaz de usuario de Material Design. También lo combinamos con deslizar e hicimos Parallax Swiper. Combinado con 5 temas obtienes 30 pantallas de paralaje. Proyecto de código abierto utilizado: encabezado elástico con zoom.
• Menú izquierdo (5 diseños) – Usamos el menú izquierdo estándar de Ionic (o menú lateral) y lo diseñamos en cinco diseños que combinan degradados y fotos con modos de fusión SASS/CSS y creamos 30 pantallas en total.
• Iniciar sesión y registrarse (6 diseños) – Inicio de sesión de Materializer con un efecto de letra pequeño pero agradable con imágenes HD de fondo. 5 pantallas de inicio de sesión + 2 pantallas de registro multiplicadas con 5 temas y obtienes 30 pantallas de inicio de sesión.
• Galería de imágenes (3 diseños) – Galería y sub-galería con genial efecto Ripple. Los combinamos con cada uno de nuestros temas de interfaz de usuario y, como resultado, tiene 15 pantallas de galerías.
• Vistas de imagen de formas: 32 formas preparado para usar para avatares o imágenes de perfil y elegido para que coincida con nuestros temas. Todo hecho con formas SVG, por lo que puede reemplazarse fácilmente con sus propias imágenes SVG.
• Botones de verificación (5 diseños) -Estilos coincidentes para cada uno de los diseños de interfaz de usuario. También hacemos dos versiones que combinan botones de verificación con efecto expandible que puede usar para filtros (por ejemplo, con campos de búsqueda). 25 pantallas en total.
• Pantallas de bienvenida – 3 pantallas de bienvenida combinado con efecto Ken Burns (hecho desde cero por nosotros) y varias animaciones de entrada de logo.
• Error tipográfico y componentes pequeños – Página con tipografía (h1…h6, p). Todo hecho con fuentes Roboto y Lato predeterminadas, pero puede reemplazarlo fácilmente con la fuente que desee. También agregamos en SASS variables de control para 3 niveles de tramos (pequeño, mediano, grande), 3 niveles de tamaños de íconos (pequeño, mediano, grande), 3 niveles de insignias (pequeño, mediano, grande) y 3 niveles de íconos sociales (pequeño mediano Grande).
• Barras de búsqueda (5 diseños) – barras de búsqueda para una implementación rápida en su aplicación que se adaptan perfectamente a cada tema de Ionic. Hicimos 25 pantallas.
• Asistentes (5 diseños) – Cinco diseños diferentes de asistentes. Se puede usar para instrucciones de uso de aplicaciones, introducciones, explicaciones, etc. Combinado con 5 temas obtienes 25 pantallas.
• Spinners/cargadores (10 tipos) – Hecho de SVG’s animados. Proyecto de código abierto utilizado en estos componentes: SVG-Loaders

Tecnologías y proyectos open source

Para poder hacer todos los componentes de Ionic/AngularJS en Material Design, tuvimos que usar varias tecnologías y pocos proyectos de código abierto. En la documentación hemos explicado cómo usar estos proyectos. Aquí hay una lista de lo que usamos para dar vida a nuestro diseño:

• SASS (hojas de estilo sintácticamente asombrosas) – Los creadores de SASS lo llaman “CSS con superpoderes”. ¡Y es! Sass cuenta con más características y habilidades que cualquier otro lenguaje de extensión CSS. También es completamente compatible con todas las versiones de CSS.
• Iónico – es un marco móvil de código abierto para desarrollar aplicaciones móviles y web híbridas. Con Ionic puede producir aplicaciones móviles para Android, iOS y Windows a la vez.
• AngularJS – AngularJS es un marco estructural para aplicaciones web dinámicas. Le permite usar HTML como su lenguaje de plantilla y le permite ampliar la sintaxis de HTML para expresar los componentes de su aplicación de forma clara y sucinta.
• jQuery – jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones. Hace que cosas como el recorrido y la manipulación de documentos HTML, el manejo de eventos, la animación y Ajax sean mucho más simples con una API fácil de usar que funciona en una multitud de navegadores.
• NgCordova – ngCordova es una colección de más de 70 extensiones de AngularJS además de la API de Cordova que facilitan la creación, prueba e implementación de aplicaciones móviles de Cordova con AngularJS.
• MaterializarCSS – es un marco de front-end moderno y receptivo basado en Material Design de Google.
• AnimateCSS – “Animaciones CSS Just-add-water” hechas por Daniel Eden es una colección de hermosas animaciones CSS.
• Encabezado de lista fija (afijo de iones) – es una directiva angular liviana para que el marco Ionic tenga un elemento de afijo adhesivo hecho por Ali OK.
• Cabecera elástica con zoom – es la directiva Ionic/Angular para encabezados elásticos hecha por Ola Christensson.

¿Por qué nuestros clientes nos aman?

“¡Resuelve todas tus dudas!”
Emmarango, aplicación de plantilla iónica de interfaz de usuario de diseño de materiales

«Excelente. Me ahorraste mucho esfuerzo de desarrollo. ¡Excelente!»
Alessandrotorres, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

«Excelente. Me ahorraste mucho esfuerzo de desarrollo. ¡Excelente!»
Alessandrotorres, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

“Uno de los mejores en todos los aspectos.”
Nikhil3831, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

«Todo está claro. @desarrollador, buen trabajo”
Satyagvns, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

«Excelente trabajo. gracias por compartir :)»
Bisoncode, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

“La mayoría de las funciones necesarias para el diseño y desarrollo de aplicaciones están disponibles. Construimos una aplicación para gozopping.com con esto y hacemos que nuestro cliente se vuelva loco… muchas gracias”.
Ojalsuthar, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

«Absolutamente increible.»
Vanduh, aplicación de plantilla de Android de interfaz de usuario de diseño de materiales

“Fantástico, gracias. Estoy seguro de que te compraré más fuentes”.
Henrik S., fondo de pantalla HD Android Template App

“¡Gran calidad de diseño!”
Dedania23, fondo de pantalla HD Plantilla Android Aplicación

Excelente atención al cliente

• Estamos ofreciendo EXCELENTE soporte postventa GRATUITO. Nos preocupamos por sus aplicaciones tanto como usted y lo ayudaremos en todo lo posible.
• Actualizaciones GRATUITAS de por vida: obtenga todas las funciones nuevas que agregamos en cada actualización futura de forma gratuita.
• Una vez que compre, puede utilizar nuestro soporte dedicado donde respondemos rápidamente sus preguntas.
• Incluye excelente documentación en línea que puede encontrar y se actualiza constantemente con material nuevo.
• Tutoriales básicos para principiantes sobre cómo importar nuestra plantilla.
• Contáctenos en dev@csform.com
• Horario de trabajo: 09:00 – 16:00h, UTC+01:00. De lunes a viernes.

Actualizaciones

Versión 2.0 – 08 de noviembre de 2016.

• ¡Estructura SASS añadida!
• Totalmente rediseñado.
• Se agregaron 5 temas: amarillo oscuro, verde claro, rojo oscuro, azul claro y púrpura claro.
• Vista previa en vivo agregada.
• Se corrigieron muchos errores menores.

Versión 0.1.2 – 06 de agosto de 2016.

• Se agregaron cinco magos.
• Diez Spinners/cargadores añadidos.
• Se corrigió la carga de las tarjetas de Google.
• Se agregaron botones de inicio de sesión de redes sociales en las pantallas de inicio de sesión.
• Errores minimos arreglados.

Versión 0.1.4 – 12 de septiembre de 2016.

• Nuevo diseño agregado: Parallax Swiper.
• Errores minimos arreglados.

Créditos

Las imágenes utilizadas en las demostraciones no están incluidas en el archivo ZIP descargado. Todas las imágenes pertenecen a sus legítimos dueños. Las listas completas de créditos están aquí