Conception d'interface utilisateur élégante et moderne avec Telerik et Kendo UI

Avec l'essor des applications multiplateformes, l'objectif est d'écrire une fois et de livrer partout. Telerik et Kendo UI offrent la même capacité pour les commandes de style sur divers facteurs de forme et plates-formes.

Aperçu de la série

Ceci est le premier article d'une série regroupant le fonctionnement du style dans nos suites d'interface utilisateur Telerik et Kendo à 10 000 pieds vue sur les différentes plates-formes. Conceptuellement, les plates-formes sont le Web, les ordinateurs de bureau, les mobiles et les rapports. Les derniers articles seront un examen d'une démo illustrant son fonctionnement dans les suites. Les liens sont ci-dessous et peuvent être utilisés pour avancer à votre guise.

1. Interface utilisateur élégante et moderne avec Telerik et Kendo UI (ce post)
2. Telerik et Kendo Modern UI: Démo Web et bureau (bientôt disponible!) [19659005] Interface utilisateur moderne de Telerik Reporting: Démo de la visionneuse de rapports (bientôt disponible!)

Introduction

Il existe une compréhension collective selon laquelle les gens émettent des jugements. Si nous avons l'un des cinq sens et un cerveau, nous raisonnerons, questionnerons et déduire toujours. Cela s'applique également aux applications que nous utilisons.

Il faut environ 50 millisecondes (0,05 seconde) aux utilisateurs pour choisir s'ils aiment ou non vos applications Web, de bureau et mobiles.

Ce court La fenêtre d'opportunité rend la création d'applications avec un système de conception d'interface utilisateur (UI) élégant et moderne important. Cela permet également de comprendre ce qui rend une interface utilisateur élégante et moderne importante

Caractéristiques d'un système de conception d'interface utilisateur moderne

Le concept de conception d'interface utilisateur moderne est fluide et contradictoire. C'est l'abstraction et la rigidité qui travaillent dans un changement constant. Le design a toujours suscité l'émotion et peut favoriser l'action ou l'inaction. Ces principes de la conception moderne en formulent la complexité.

Conception d'interface utilisateur inspirante et ciblée

La complexité de la conception d'interface utilisateur moderne est la raison pour laquelle deux personnes interagissent avec le même système de conception et peuvent se forger des sentiments et des opinions fondamentalement différents à ce sujet. Cela rend la conception d'interface utilisateur moderne une source d'inspiration.

Cependant, être une source d'inspiration signifie avoir un but quelconque. La conception axée sur l'objectif peut découler de n'importe quoi, notamment d'un résumé d'un plan d'affaires ou d'un énoncé de mission d'une agence à but non lucratif. Un exemple plus récent est Windows Metro, inspiré des panneaux couramment utilisés dans les transports publics.

Conception facile à utiliser

En raison de la complexité générale d'un système de conception d'interface utilisateur, il devrait être facile à utiliser. Par exemple, un système de conception d'interface utilisateur moderne devrait être suffisamment simple pour que toute personne sans arrière-plan de conception puisse facilement s'y mettre.

L'idée de «facile à utiliser» est également complexe car elle est relative à l'utilisateur et le niveau de compétence de chaque utilisateur varie . Cela signifie qu'un système de conception moderne devrait pouvoir fonctionner à travers cette variabilité. Pour faire simple, il devrait commencer simple et être capable d'évoluer vers les changements nécessaires.

Conception d'interface utilisateur logiquement structurée

Les éléments structurés logiquement sont une approche courante pour gérer la complexité des systèmes. Cela se produit dans de nombreux systèmes complexes, de la conception de systèmes de fabrication à la conception de sites Web.

Un bon exemple de la complexité de la manipulation est les progrès récents de CSS comme la Flexible Box (flexbox) et la Grid ]. Ces changements ont permis de s'adapter à la complexité croissante de la conception pour le Web.

L'inspiration, la simplicité et la logique sont des caractéristiques des systèmes de conception d'interface utilisateur modernes d'aujourd'hui. Ces systèmes de conception varient en plusieurs types, et notre préoccupation est de concevoir des systèmes pour les applications avec lesquelles les utilisateurs interagissent directement. Dans ce cas, il est également important de comprendre quels sont les éléments essentiels d'une interface utilisateur élégante. Nous en discuterons ensuite.

Les éléments essentiels d'une interface utilisateur élégante

Les éléments essentiels d'une interface utilisateur élégante impliquent les caractéristiques les plus esthétiques. Celles-ci incluent des éléments tels que la couleur, les formes, les mises en page, la flexibilité de style et les tendances actuelles.

Couleurs, formes et mises en page

Les éléments les plus évidents d'une interface utilisateur élégante sont toujours les caractéristiques esthétiques. C'est parce que nous voyons des couleurs et des formes, et que nous utilisons une application basée sur sa mise en page.

Il existe un nombre infini d'options pour la couleur, les formes et les variations de mise en page. Pour offrir les meilleures options pour créer une interface utilisateur élégante, un système de conception moderne doit donner aux concepteurs les meilleures capacités pour le faire.

Style adaptatif et flexible

S'appuyant sur le nombre illimité d'options de couleurs, de formes et de mises en page est la capacité de s'adapter rapidement aux changements de conception. Ceci est considéré comme un style flexible car, à mesure que les objectifs et les désirs changent, un système de conception devrait être capable de s'adapter si nécessaire.

Un autre aspect important du style flexible consiste à utiliser le même style sur différents appareils. Sur le Web, c'est ce qu'on appelle le style réactif. Pour le bureau, il existe des plates-formes qui ciblent différents périphériques comme Xamarin et Universal Windows Platform (UWP).

Current Trends

Cette section nécessite peu de discussion, comme les tendances actuelles pilotera toujours la conception d'interface utilisateur moderne. Il suffit de regarder les sites Web conçus dans les années 90 par rapport à maintenant.

Un système de conception d'interface utilisateur complet devrait permettre aux développeurs de concevoir avec différentes tendances. Par exemple, certains utilisateurs de Windows resteront fidèles au design de Windows 7 ( fig. 1 ), tandis que d'autres préféreront le design Windows 8 Metro ( fig. 2 ). Dans ce cas, une décision de conception théorique serait de cibler le style Windows 7
et l'autre peut cibler Windows 8 Metro sans problème.

Figure 1: Windows 7 Aero UI

Figure 2 : Windows 8 Metro UI

Les interfaces utilisateur modernes et élégantes comprennent de nombreux éléments. Tellement qu'il faudrait un livre pour les capturer tous, ce qui sort du cadre de cet article. Au lieu de cela, passer en revue les fonctionnalités d'un système de conception d'interface utilisateur moderne et les éléments essentiels d'une interface utilisateur élégante fournira suffisamment d'informations pour comprendre le style d'interface utilisateur Telerik et Kendo.

Une partie de la puissance de l'utilisation de l'interface utilisateur Telerik et Kendo réside dans la capacité de obtenir une application entièrement fonctionnelle pour
marché plus rapidement. Ce n'est pas différent avec le style et l'apparence. Les options de style intégrées et personnalisées
en font un excellent choix pour répondre aux besoins de conception d'interface utilisateur moderne.

Dans le reste de l'article, nous apprendrons avec quelle facilité les composants d'interface utilisateur Telerik et Kendo créent de haute qualité,
des interfaces utilisateur modernes et belles et des expériences sur une large gamme d'appareils sans nécessiter trop d'investissement de temps, permettant ainsi de se concentrer davantage sur la logique métier. Pour commencer, nous passerons en revue le
Systèmes de conception d'interface utilisateur Telerik et Kendo

Les systèmes de conception d'interface utilisateur Telerik et Kendo

Cette section couvre le style et l'apparence de toute la gamme de produits Telerik et Kendo UI, ce qui est beaucoup. Pour organiser cela, nous allons le décomposer en Web, bureau et mobile.

De plus, nous nous concentrerons sur les produits les plus connus et les plus stables. Cependant, ce sera suffisant
informations pour fonctionner avec chaque produit car il y a un chevauchement technique. Le plan suivant
illustre l'organisation des suites.

Hiérarchie des produits

• Web
  • Composants Telerik
  • Interface utilisateur de Kendo
• Bureau
• Mobile

Remarque: Une distinction ou mise en garde importante à prendre en compte pour le style de toutes les plates-formes est que, comme ce sont des plates-formes et des technologies distinctes, il est difficile d'avoir une base de code unique pour chacune. Par exemple, nos produits de bureau utilisent un mécanisme de style différent de celui des produits Web, en raison des technologies utilisées dans les applications.

Style et apparence pour le Web

Les suites Web contiennent le chevauchement le plus technique en raison des technologies Web partagées. Par exemple, l'interface utilisateur pour ASP.NET AJAX, l'interface utilisateur pour ASP.NET Core, l'interface utilisateur pour ASP.NET MVC, l'interface utilisateur pour Blazor, l'interface utilisateur Kendo pour jQuery et l'interface utilisateur Kendo pour Angular partagent la même approche pour styliser les contrôles.

D'un point de vue technique, le style partagé dérive des thèmes basés sur jQuery Sass . Laisser

Telerik UI Web Components

La meilleure façon de comprendre comment les styles peuvent être partagés à travers les frameworks Web Telerik est d'utiliser le Sass Web Générateur de thèmes d'interface utilisateur ( fig. 3 ).

Figure 3: Générateur de thèmes d'interface utilisateur Web Sass

Comme le montre la capture d'écran ci-dessus, le générateur de thèmes Sass permet de styliser chacun de nos composants Web. Les suites Web Telerik utilisent cette approche plus moderne pour le style: UI pour ASP.NET AJAX UI pour ASP.NET MVC et UI pour ASP.NET Core chacun utilise le Générateur de thèmes Sass Web UI, AJAX ne présentant que des différences mineures.

Le pouvoir derrière le Générateur de thèmes Sass Web UI réside dans la possibilité de choisir entre l'utilisation des thèmes intégrés ou leur personnalisation. Nous proposons également un réseau de diffusion de contenu (CDN) qui peut également être utilisé pour le thème de base dans une application Web Telerik.

Kendo UI Web Components

Nos JavaScript Components peuvent également utiliser le Sass Theme Builder ou le CDN. Cependant, parce que ce sont plus
cadres centrés front-end, c'est-à-dire HTML, CSS et JavaScript, d'autres outils peuvent être utilisés.

Pour le style intégré, nous livrons des CSS pré-construits avec les distributions de l'interface utilisateur de Kendo ou le Node package manager ] (npm) peut également être utilisé. Pour un style personnalisé, le
L'approche recommandée consiste à utiliser le processus de construction de votre application côté client.

Depuis Sass Theme Builder, le CDN et le processus de construction personnalisé, nos suites de composants Web Telerik et Kendo UI offrent de nombreuses méthodes pour réalisation de l'interface utilisateur élégante et moderne comme vous le souhaitez. Ensuite, nous aborderons les fonctionnalités de style du bureau.

Style et apparence du bureau

Le style du bureau est légèrement différent. Comme mentionné précédemment, la création pour le Web et le bureau nécessite des méthodes différentes. Je dois mentionner qu'une Progressive Web App (PWA) est une option pour créer des styles Web et de bureau identiques, mais ce n'est pas une application de bureau pure car elle ne peut pas interagir directement avec le système d'exploitation.

De plus, il y a également eu quelques changements dans les API et l'architecture du bureau Windows au cours de la dernière décennie. Celles-ci incluent des technologies récentes telles que XAML et la plateforme Windows universelle. Dans tous les cas, de WinForms à WPF en passant par WinUI, Telerik propose plusieurs options pour créer des interfaces utilisateur élégantes et modernes dans le développement d'applications de bureau.

Telerik UI Desktop Components

Les applications de bureau utilisent une approche similaire au style Web, où Telerik les composants incluent des thèmes de base qui peuvent être personnalisés. Cela est vrai pour l'interface utilisateur pour WinForms et l'interface utilisateur pour WPF. La principale différence est qu'il y a plus de thèmes intégrés partagés pour les composants de bureau que pour les composants Web.

De même, l'interface utilisateur pour WinForms et l'interface utilisateur pour WPF incluent des outils
pour vous aider à personnaliser les thèmes intégrés. Pour WinForms, il s'agit du Visual Style Builder ( fig. 4 ), et pour l'interface utilisateur de WPF, il s'agit du Color Theme Generator ( fig. 5 ).

Figure 4: WinForms Visual Style Builder

Figure 5: Générateur de thèmes de couleurs WPF

Bien que le style du bureau soit un processus complexe, l'interface utilisateur Telerik simplifie considérablement le démarrage de la fonction intégrée. dans les thèmes et fournit des outils pour une personnalisation plus poussée. La dernière plate-forme à examiner est le mobile
suite. Faisons-le ensuite.

Style et apparence pour mobile

Par rapport au Web et au bureau, l'espace mobile est différent. Le Web et le bureau Windows sont des plates-formes unifiées. En mobile, ce n'est pas le cas. Android et iOS sont les principales plates-formes, et les deux ont des méthodologies de conception distinctes.

Cela fait du style sur mobile un mécanisme différent également. Dans ce cas, les plates-formes mobiles ont une approche plus simple du style et de l'apparence. Là où les plates-formes Web et de bureau permettent de styliser des formes de boutons et d'autres fonctionnalités d'interface, la plate-forme mobile permet de styliser des éléments de conception simplifiés tels que la couleur du texte, la couleur d'arrière-plan, etc.

Telerik UI Mobile Components

La suite mobile de Telerik est Xamarin, qui utilise XAML comme langage de balisage. Cela fonctionne de la même manière que WPF avec quelques différences. Le style Xamarin n'inclut pas d'outils pour aider à la personnalisation. Au lieu de cela, nous le simplifions en fournissant un seul thème intégré ( fig. 6 ) et le rendons assez simple pour personnaliser .

Figure 6: Thème Xamarin Blue

Les sections précédentes décrivaient le style des différentes suites de composants. Nous avons examiné comment une interface utilisateur élégante et moderne peut être obtenue pour chaque plate-forme. Cependant, ce ne sont que des moyens d'atteindre la même chose. Le concept principal du style d'interface utilisateur Telerik et Kendo est la facilité d'utilisation d'un thème intégré ou personnalisé. Passons en revue les avantages et les inconvénients de cette solution.

Style intégré ou personnalisé

Chacune de nos suites de composants comprend un moyen d'utiliser le style intégré ou de personnaliser le style dans son ensemble. De toute évidence, choisir l'une ou l'autre approche a ses propres avantages et inconvénients. Les comprendre est primordial pour prendre toute décision de conception.

Systèmes de conception intégrés

C'est la plus simple des approches. Le langage de conception et les ressources sont fournis pour l'application. C'est aussi simple que de l'inclure dans l'application et d'en récolter les avantages.

Avantages et inconvénients des systèmes de conception intégrés

L'avantage le plus reconnaissable est la simplicité. Il est assez facile d'inclure un système de conception préconfiguré et configuré. Cela équivaut à embaucher une équipe de conception entière pour créer, construire et expédier le design,
ce qui le rend également rentable.

Cependant, l'inconvénient d'utiliser un système de conception à la vanille est que de nombreux sites apparaîtront similaires. Bootstrap a eu cet effet au début de son adoption. Un autre inconvénient est qu'il peut y avoir des options de personnalisation limitées disponibles dans le système intégré.

Systèmes de conception personnalisés

Pour les systèmes de conception personnalisés, l'avantage le plus notable est la personnalisation. Le design n'est pas verrouillé dans un aspect et une sensation spécifiques. Les concepteurs et les développeurs sont libres de concevoir comme ils le souhaitent.

L'inconvénient évident est le coût de conception d'un système personnalisé. Cela nécessite l'embauche d'une équipe de conception et une collaboration inter-équipes pour l'intégration dans le cycle de vie du développement logiciel. Cela peut devenir
techniquement et financièrement cher.

Le meilleur des deux mondes

Une meilleure approche potentiellement du style et de l'apparence serait de commencer par un design vanille et ensuite d'adopter plus de personnalisation au fur et à mesure que les exigences sont définies. Il s'agit d'une approche similaire au développement de produit agile et minimalement viable.

C'est une excellente option, car elle laisse place à la croissance et à l'évolution sans avoir besoin d'avoir une conception complètement élaborée au début du développement. Cependant, il peut être difficile de trouver des systèmes qui
offrent suffisamment de flexibilité pour concevoir de cette manière.

Le style d'interface utilisateur Telerik et Kendo est parfait pour tous les scénarios ci-dessus. Si une application ne nécessite pas une conception complète, l'un des systèmes de conception intégrés peut être utilisé. De plus, si une entreprise exige tout
son application pour adhérer à un ensemble de normes de conception, chaque suite de composants peut également être personnalisée. En outre, un système de conception peut également évoluer avec le temps d'une conception vanille à une conception plus hybride, ce que Telerik et Kendo UI peuvent également faire.

Pour comprendre les capacités de style de Telerik et Kendo UI, il faudra conceptualiser comment réaliser un conception d'interface utilisateur élégante et moderne sur toutes les plates-formes. Examinons ensuite comment une approche de style peut être appliquée à travers les suites de contrôle.

Styling à travers les contrôles d'interface utilisateur Telerik et Kendo

Si nous voulons toucher chaque plate-forme, nous devrons cibler le Web, le bureau, le mobile et j'ajouterai dans les rapports également. Le but est d'obtenir une apparence et une sensation cohérentes. Malheureusement, nous ne pouvons pas construire un échantillon pendant ce post, mais armé des informations, nous devrions être en mesure de le conceptualiser. Commençons par le Web.

Web UI Design

Pour garder l'exercice moderne, supposons que nous utilisons une application Angular avec un backend ASP.NET Core WebAPI. Le backend WebAPI sera également utile avec les implémentations de bureau, mobiles et de reporting. Comme mentionné ci-dessus, tous nos composants Web peuvent utiliser le style de l'interface utilisateur Kendo via le générateur de thèmes Sass. Commençons par là.

Choix d'un thème de base Web

Nous pouvons commencer par un thème de base qui nous permettra de progresser rapidement
rapidement avec peu de temps. Les thèmes de base dans le thème Sass
Builder sont Default, Bootstrap v4 et Material ( fig. 7 ).

Figure 7: Thème de base Theme Builder [19659011] J'aime le thème Matériel et j'ai sélectionné tous les composants du thème de base pour commencer. Cela couvrira tout pour le Web. Pour être opérationnel rapidement, nous pouvons utiliser VS Code Kendo UI Template Wizard ( fig. 8 ).

Figure 8: Extension de l'interface utilisateur de Visual Studio Code Kendo

Avec cela à l'écart, passons au bureau.

Conception de l'interface utilisateur de bureau

Puisque nous voulons garder une apparence cohérente et sentir sur l'application de bureau, j'utiliserai WPF dans .NET Core pour l'application de bureau. Prêt à l'emploi, il comprend un style de matériau, qui peut être prévisualisé et modifié en utilisant le générateur de thèmes de couleurs Telerik ( fig. 9 ).

Figure 9: Thème de matériau dans WPF Color Theme Generator [19659115] Choix d'un thème de base de bureau

La création de l'exemple d'application est rapide à l'aide du modèle de projet Visual Studio de Telerik UI pour WPF (.NET Core). Si nous sélectionnons la source NoXaml ( fig. 10 ), alors la seule chose que nous devons faire est de changer le thème de la page App.xaml ( fig. 11 ).

Figure 10: WPF .NET Core Version Selection

Figure 11: Changer de thème dans la page App.xaml

Conception de l'interface utilisateur mobile

Pour les applications mobiles, nous utiliserons Xamarin. Nous ne pouvons pas faire correspondre le style un pour un à moins qu'il ne s'agisse d'Android. En effet, Material est le langage de conception de Google et il est intégré au système d'exploitation.

Choix d'un thème de base mobile

Le thème bleu par défaut est suffisamment simple pour que nous puissions ajuster les couleurs par contrôle, si nécessaire. C'est comme l'approche de bureau. Cela se fait également en tant que ressource fusionnée comme dans WPF. Pour une visite complète,
voir l'article Personnalisation des couleurs

Conception de l'interface utilisateur de création de rapports

Telerik Reporting utilise également l'approche de style Kendo UI et nous fournirons des rapports via l'application Angular et l'application WPF. Le service REST de rapports ASP.NET Core fournira le

Choix d'un thème de base de rapport

L'utilisation des implémentations de thème de base Angular et WPF fonctionne déjà avec les visualiseurs de rapports Telerik de la même manière que l'application d'hébergement. Cela rend le style de Reporting assez simple, comme indiqué dans le
capture d'écran ci-dessous ( fig. 12 ).

Figure 12: Thème matériel Telerik Reporting Report Viewer

Conceptuellement, l'approche ci-dessus serait un excellent moyen de commencer à créer une interface utilisateur élégante et moderne sur les nombreuses plates-formes différentes. Il utilise une technologie moderne et fournit un style au Web, au bureau, au mobile et comprend un composant de rapport.

Conclusion

En terminant, ce message couvre intentionnellement beaucoup de terrain à un niveau très élevé. Dans la première section, nous avons passé en revue certaines fonctionnalités et concepts qui composent un système de conception d'interface utilisateur élégant et moderne. Suite à cela, nous avons fourni une ventilation des systèmes de conception d'interface utilisateur Telerik et Kendo par plate-forme, Web, ordinateur de bureau et mobile. Ensuite, nous avons examiné les avantages et les inconvénients de l'utilisation d'un système de conception intégré ou personnalisé. Enfin, nous avons terminé avec un aperçu conceptuel de la façon dont une apparence et une sensation cohérentes pourraient être obtenues sur les différentes plates-formes.

Ces informations renforcent le fait que l'utilisation des composants d'interface utilisateur Telerik et Kendo facilite la création d'un utilisateur de haute qualité, moderne et élégant. interfaces et expériences sur un large éventail de plates-formes.

Essayez DevCraft!

Lancez-vous avec un essai Telerik DevCraft dès aujourd'hui! Notre outil DevCraft est la collection la plus puissante d'outils de développement JavaScript Telerik .NET et Kendo UI. Il comprend des composants d'interface utilisateur modernes, riches en fonctionnalités et conçus par des professionnels pour les applications Web, de bureau et mobiles; rapports et solutions de gestion de rapports; bibliothèques de traitement de documents; des outils de test et de simulation automatisés.

DevCraft fournira à vos développeurs tout ce dont ils ont besoin pour fournir des applications exceptionnelles en moins
temps et avec moins d'effort. Avec un support technique primé fourni par les développeurs qui ont conçu les produits et une tonne de ressources et de formations, vous pouvez être assuré de disposer d'un fournisseur stable sur lequel compter pour vos défis quotidiens tout au long de votre parcours de développement logiciel.