web-dev-qa-db-fra.com

Comparaison entre Bootstrap et frameworks Material Design

La famille de frameworks de conception Bootstrap / Foundation a été la principale force motrice derrière de nombreux projets de développement Web frontaux réactifs. Le concept Google Materials Design flotte également depuis un certain temps, et il semble que la famille des cadres de conception Materials (par exemple Materialise ) commence à émerger en tant que concurrent/alternative.

Je me demandais simplement si l'un des gourous de l'expérience utilisateur avait fait une analyse des deux cadres de développement et examiné les avantages et les inconvénients de chaque cadre. En surface, beaucoup de différences semblent résider dans le style visuel des éléments et l'interaction des composants de l'interface utilisateur, mais sous chaque famille se trouve un ensemble de philosophies de conception qui sont importantes lorsqu'il s'agit d'adopter/d'étendre le cadre existant et de le personnaliser. pour vos propres projets et applications.

Je pense que les choses qui doivent être abordées dans la comparaison comprendraient probablement:

  • Philosophie/Intention - puisque la conception des matériaux semble être agnostique en termes de périphérique/plate-forme/canal en théorie, mais je ne sais pas si c'est également le cas dans la pratique. Bootstrap semble être dédié aux appareils mobiles mais est probablement semi-agnostique.
  • Couverture - de nombreuses questions sont posées sur les `` lacunes '' de Bootstrap, probablement en raison du manque de standardisation des modèles de conception d'interface utilisateur et du besoin de composants d'interface utilisateur personnalisés . Il semble que la conception des matériaux puisse potentiellement couvrir plus de cas d'utilisation et de scénarios.
  • Flexibilité/extensibilité - les deux semblent bien conçus et facilement personnalisables (au moins à en juger par la quantité de code sur CodePen pour Bootstrap), ce qui conduit en fait au problème que Microsoft a dû faire face à sa définition de son concept de conception Microsoft Fluent.
design-patternsbootstrapdesign-frameworksgoogle-materials-design
25
Michael Lai

Ce sont tous les deux des frameworks UX, mais ils ont des opinions très différentes

  • La conception matérielle est très avisée sur la façon dont les éléments UX se comportent et interagissent visuellement . Il commence par des principes généraux autour des éléments visuels (physique, lumière, espace, élan) et développe ces principes pour fournir des exemples concrets et des exigences pour des éléments spécifiques (boutons, cartes, toasts, etc.).

    • La conception matérielle est moins d'opinion sur l'implémentation: les documents mentionnent Polymer et Android framework de développement comme possibilités d'implémentation, mais il existe d'autres packages non spécifiés comme Materialise qui fournir des implémentations Material Design pour d'autres plates-formes.

  • Bootstrap est d'avis sur la mise en œuvre . Bootstrap fournit un cadre spécifique pour construire une UX réactive à l'aide d'un ensemble de classes HTML et de styles et comportements CSS précâblés. Les documents bootstrap décrivent des éléments HTML et également styles par défaut, mais la sémantique de base de bootstrap sont capturées dans les classes CSS .

21
tohster

Je ne pense pas que le matériel soit un cadre, mais je suis d'accord que cela dépend de la définition du cadre. Si j'utilise this :

En programmation informatique, un cadre logiciel est une abstraction dans laquelle un logiciel fournissant des fonctionnalités génériques peut être modifié de manière sélective par du code écrit par l'utilisateur supplémentaire, fournissant ainsi un logiciel spécifique à l'application. Un cadre logiciel est un environnement logiciel universel et réutilisable qui fournit des fonctionnalités particulières dans le cadre d'une plate-forme logicielle plus large pour faciliter le développement d'applications logicielles, de produits et de solutions. Les infrastructures logicielles peuvent inclure des programmes de support, des compilateurs, des bibliothèques de code, des ensembles d'outils et des interfaces de programmation d'application (API) qui rassemblent tous les différents composants pour permettre le développement d'un projet ou d'une solution.

Les cadres contiennent des caractéristiques distinctives clés qui les séparent des bibliothèques normales:

  • inversion de contrôle: dans un cadre, contrairement aux bibliothèques ou aux applications utilisateur normales, le flux de contrôle global du programme n'est pas dicté par l'appelant, mais par le cadre.
  • comportement par défaut: un framework a un comportement par défaut. Ce comportement par défaut doit être un comportement utile et non une série de non-opérations.
  • extensibilité: un cadre peut être étendu par l'utilisateur généralement par un remplacement sélectif ou spécialisé par le code utilisateur pour fournir des fonctionnalités spécifiques.
  • code cadre non modifiable: le code cadre, en général, n'est pas censé être modifié, tout en acceptant les extensions implémentées par l'utilisateur. En d'autres termes, les utilisateurs peuvent étendre le framework, mais ne doivent pas modifier son code.

alors Material n'est pas un framework, mais une ligne directrice pour construire des frameworks. Par exemple, Materialise est un cadre basé sur les directives Material . Un autre exemple est ce que je construis pour mon équipe: une version très personnalisée de Bootstrap qui utilise Material (une reprise de http://fezvrasta.github.io/bootstrap- material-design / qui est un peu sale et charge beaucoup de choses inutiles) et a un pont supplémentaire à Polymer . Donc dans mon cas, les frameworks sont Bootstrap et Polymer, tandis que Material est la ligne directrice que j'ai utilisée pour le construire.

Cela étant dit, en allant aux points du PO:

  • Philosophie/intention - puisque la conception des matériaux semble être agnostique en termes de périphérique/plate-forme/canal en théorie, mais je ne sais pas si c'est également le cas dans la pratique. Bootstrap semble être dédié aux appareils mobiles mais est probablement semi-agnostique.

Je pense que c'est EXACTEMENT le contraire: le matériel est agnostique jusqu'à ce que vous utilisiez un cadre. Construisez également 10 sites avec Material et tout commencera à se ressembler. De l'autre côté, Bootstrap a une philosophie " mobile first ", mais est le framework le plus utilisé pour le bureau de nos jours

  • Couverture - de nombreuses questions sont posées sur les `` lacunes '' dans Bootstrap, probablement en raison du manque de standardisation des modèles de conception d'interface utilisateur et du besoin de composants d'interface utilisateur personnalisés. Il semble que la conception des matériaux puisse potentiellement couvrir plus de cas d'utilisation et de scénarios.

voir mon commentaire ci-dessus. Je pense que Bootstrap couvre potentiellement TOUS les cas, pas la plupart, quelque chose que le matériel ne fait pas

  • Flexibilité/extensibilité - les deux semblent bien conçus et facilement personnalisables (au moins à en juger par la quantité de code sur CodePen pour Bootstrap), ce qui conduit en fait au problème que Microsoft a rencontré avec sa définition de son concept de conception Microsoft Fluent.

Si je prends la définition des cadres que j'ai fournie ci-dessus, alors oui, je suis totalement d'accord

En fin de compte, je pense que Bootstrap fournit un cadre pour construire du code, et il en va de même avec Polymer, tandis que Material fournit un ensemble de directives UX et de conception qui aident UXD à maximiser les résultats, donc je ne ' t voir alors comme opposé, mais totalement complémentaire (d'où la raison pour laquelle j'ai construit ce que j'ai construit)

6
Devin

Bootstrap est principalement un système de grille réactif, avec des décisions d'interface utilisateur par défaut prises pour vous (que vous pouvez facilement contourner).

Materialise est principalement un ensemble d'éléments d'interaction et d'interfaces (mais possède également une grille).

Et puis il y a environ 2000 autres frameworks CSS UI. Vous utilisez rarement ces frameworks prêts à l'emploi, donc ce qui est "le meilleur" en termes d'UX est vraiment subjectif. Le cadre à choisir a généralement plus à voir avec votre processus de développement d'interface utilisateur et les préférences de votre équipe.

5
DA01