Les interfaces utilisateur à écran partagé sont devenues un moyen populaire d’afficher du contenu. On pense souvent qu’ils sont utilisés dans des domaines où l’on souhaite que les utilisateurs choisissent entre deux options. Mais nous voyons aussi d’autres utilisations créatives de la technique. Par exemple, un écran partagé peut également être utilisé à bon escient comme mise en page pleine page ou même comme animation de transition.
Voici 10 exemples d’interface utilisateur à écran partagé, complets avec le code source que vous pouvez modifier en fonction de vos besoins. Chacun a quelque chose d’unique à offrir.
fais un choix
C’est de loin la façon la plus courante d’utiliser un écran partagé. Un visiteur de site Web se voit proposer deux options. Ici, les couleurs de l’image d’arrière-plan aident à assurer une bonne séparation, tandis que le logo arrondi au milieu maintient le tout ensemble.
Diviser un curseur
Un écran partagé crée également un effet de transition intéressant, comme nous pouvons le voir dans l’exemple de diaporama suivant. Le défilement vers le bas provoque la division de chaque moitié de l’écran et révèle l’image suivante dans la file d’attente. Le résultat est une interface utilisateur très fluide et sophistiquée.
Mise en page avec une barre latérale statique
Avec les écrans HD et 4K qui gagnent du terrain, de plus en plus de concepteurs commencent à profiter de cet espace d’écran supplémentaire. Cet exemple de mise en page fournit une barre latérale statique avec une image d’arrière-plan en gras. Mais c’est aussi génial sur les petits écrans car la barre latérale devient un en-tête. C’est attrayant et fonctionnel.
Par souci de comparaison
Une autre tendance qui gagne du terrain est l’utilisation de l’écran partagé pour comparer les images « avant » et « après ». Ici, nous avons un paramètre qui permet aux utilisateurs de simplement déplacer la souris pour voir les différences entre deux images. Utilisant juste un peu de JavaScript, cette interface utilisateur est une variante intéressante de la technique.
Galerie alternative
L’effet de défilement « fifty-fifty » dans cet exemple ajoute une touche unique. On a presque l’impression que les cartes et les photos sont empilées alternativement les unes sur les autres lorsque vous faites défiler. Et comme il utilise moins de 150 lignes de CSS pur, le temps de chargement ne devrait pas être un gros problème.
Mise en page du magazine
Cette conception simule quelque chose que vous pourriez trouver dans un magazine imprimé. La légende en gras et le texte d’introduction sur la gauche offrent un excellent contraste avec la photo et l’article à plusieurs colonnes sur la droite. Dans l’ensemble, il a l’air très élégant et professionnel.
Résumé des services
Le concept ici est vraiment cool du point de vue de la marque. Il utilise un écran divisé sur une page où vous avez un message de balise statique sur la gauche, combiné à une liste déroulante de services offerts sur la droite. C’est juste différent et une façon de se démarquer un peu de la foule.
Effets de défilement d’écran partagé
Nous voyons souvent de belles mises en page en écran partagé, mais pas beaucoup en termes d’interactivité. L’exemple suivant ajoute l’ingrédient manquant avec quelques transitions d’échelle de base lorsque vous le survolez. La bonne chose à ce sujet est qu’il fournit un petit repère visuel supplémentaire pour l’utilisateur.
carrousel 3D
Les transitions entre les diapositives de ce carrousel ajoutent littéralement une nouvelle dimension aux écrans partagés. Chaque diapositive est « divisée » en deux, tandis que la diapositive suivante est révélée dans un joli format 3D. Voici une certaine qualité de machine qui peut être un excellent choix pour une entreprise d’ingénierie ou industrielle.
Diviser Révéler
La pratique de faire défiler une page vers le bas peut s’ennuyer très rapidement. Il est surprenant que nous ne nous endormions pas dans le processus. Parfois, c’est une bonne idée d’apporter quelque chose de différent au déplacement, comme cet effet de divulgation partagée. L’animation ajoute un peu de personnalité et d’excitation à l’expérience. Cela peut même aider à inciter les visiteurs à participer davantage à votre site Web.
diviser est la différence
Ce qui a commencé comme une façon de choisir entre A ou B est devenu autre chose. Les dessins et les animations fractionnés offrent aux concepteurs une autre avenue créative pour encourager l’interaction. Bien que nous les voyions toujours sous leur forme traditionnelle, nous avons également constaté qu’ils sont utilisés pour améliorer des choses comme le défilement du contenu et des galeries d’images. Il est même utilisé pour imiter les techniques de conception d’impression.
Heureusement, les exemples ci-dessus inspirent des façons d’ajouter une interface utilisateur divisée à vos propres projets. Amusez-vous à expérimenter et à mettre en œuvre des fonctionnalités qui ont fière allure et qui ajoutent quelque chose d’unique au mélange.
