Les interfaces utilisateur \u00e0 \u00e9cran partag\u00e9 sont devenues un moyen populaire d’afficher du contenu. On pense souvent qu’ils sont utilis\u00e9s dans des domaines o\u00f9 l’on souhaite que les utilisateurs choisissent entre deux options. Mais nous voyons aussi d’autres utilisations cr\u00e9atives de la technique. Par exemple, un \u00e9cran partag\u00e9 peut \u00e9galement \u00eatre utilis\u00e9 \u00e0 bon escient comme mise en page pleine page ou m\u00eame comme animation de transition.<\/p>\n
Voici 10 exemples d’interface utilisateur \u00e0 \u00e9cran partag\u00e9, complets avec le code source que vous pouvez modifier en fonction de vos besoins. Chacun a quelque chose d’unique \u00e0 offrir.<\/p>\n
C’est de loin la fa\u00e7on la plus courante d’utiliser un \u00e9cran partag\u00e9. Un visiteur de site Web se voit proposer deux options. Ici, les couleurs de l’image d’arri\u00e8re-plan aident \u00e0 assurer une bonne s\u00e9paration, tandis que le logo arrondi au milieu maintient le tout ensemble.<\/p>\n
Un \u00e9cran partag\u00e9 cr\u00e9e \u00e9galement un effet de transition int\u00e9ressant, comme nous pouvons le voir dans l’exemple de diaporama suivant. Le d\u00e9filement vers le bas provoque la division de chaque moiti\u00e9 de l’\u00e9cran et r\u00e9v\u00e8le l’image suivante dans la file d’attente. Le r\u00e9sultat est une interface utilisateur tr\u00e8s fluide et sophistiqu\u00e9e.<\/p>\n
Avec les \u00e9crans HD et 4K qui gagnent du terrain, de plus en plus de concepteurs commencent \u00e0 profiter de cet espace d’\u00e9cran suppl\u00e9mentaire. Cet exemple de mise en page fournit une barre lat\u00e9rale statique avec une image d’arri\u00e8re-plan en gras. Mais c’est aussi g\u00e9nial sur les petits \u00e9crans car la barre lat\u00e9rale devient un en-t\u00eate. C’est attrayant et fonctionnel.<\/p>\n
Une autre tendance qui gagne du terrain est l’utilisation de l’\u00e9cran partag\u00e9 pour comparer les images \u00ab avant \u00bb et \u00ab apr\u00e8s \u00bb. Ici, nous avons un param\u00e8tre qui permet aux utilisateurs de simplement d\u00e9placer la souris pour voir les diff\u00e9rences entre deux images. Utilisant juste un peu de JavaScript, cette interface utilisateur est une variante int\u00e9ressante de la technique.<\/p>\n
L’effet de d\u00e9filement \u00ab\u00a0fifty-fifty\u00a0\u00bb dans cet exemple ajoute une touche unique. On a presque l’impression que les cartes et les photos sont empil\u00e9es alternativement les unes sur les autres lorsque vous faites d\u00e9filer. Et comme il utilise moins de 150 lignes de CSS pur, le temps de chargement ne devrait pas \u00eatre un gros probl\u00e8me.<\/p>\n
Cette conception simule quelque chose que vous pourriez trouver dans un magazine imprim\u00e9. La l\u00e9gende en gras et le texte d’introduction sur la gauche offrent un excellent contraste avec la photo et l’article \u00e0 plusieurs colonnes sur la droite. Dans l’ensemble, il a l’air tr\u00e8s \u00e9l\u00e9gant et professionnel.<\/p>\n
Le concept ici est vraiment cool du point de vue de la marque. Il utilise un \u00e9cran divis\u00e9 sur une page o\u00f9 vous avez un message de balise statique sur la gauche, combin\u00e9 \u00e0 une liste d\u00e9roulante de services offerts sur la droite. C’est juste diff\u00e9rent et une fa\u00e7on de se d\u00e9marquer un peu de la foule.<\/p>\n
Nous voyons souvent de belles mises en page en \u00e9cran partag\u00e9, mais pas beaucoup en termes d’interactivit\u00e9. L’exemple suivant ajoute l’ingr\u00e9dient manquant avec quelques transitions d’\u00e9chelle de base lorsque vous le survolez. La bonne chose \u00e0 ce sujet est qu’il fournit un petit rep\u00e8re visuel suppl\u00e9mentaire pour l’utilisateur.<\/p>\n
Les transitions entre les diapositives de ce carrousel ajoutent litt\u00e9ralement une nouvelle dimension aux \u00e9crans partag\u00e9s. Chaque diapositive est \u00ab divis\u00e9e \u00bb en deux, tandis que la diapositive suivante est r\u00e9v\u00e9l\u00e9e dans un joli format 3D. Voici une certaine qualit\u00e9 de machine qui peut \u00eatre un excellent choix pour une entreprise d’ing\u00e9nierie ou industrielle.<\/p>\n
La pratique de faire d\u00e9filer une page vers le bas peut s’ennuyer tr\u00e8s rapidement. Il est surprenant que nous ne nous endormions pas dans le processus. Parfois, c’est une bonne id\u00e9e d’apporter quelque chose de diff\u00e9rent au d\u00e9placement, comme cet effet de divulgation partag\u00e9e. L’animation ajoute un peu de personnalit\u00e9 et d’excitation \u00e0 l’exp\u00e9rience. Cela peut m\u00eame aider \u00e0 inciter les visiteurs \u00e0 participer davantage \u00e0 votre site Web.<\/p>\n
Ce qui a commenc\u00e9 comme une fa\u00e7on de choisir entre A ou B est devenu autre chose. Les dessins et les animations fractionn\u00e9s offrent aux concepteurs une autre avenue cr\u00e9ative pour encourager l’interaction. Bien que nous les voyions toujours sous leur forme traditionnelle, nous avons \u00e9galement constat\u00e9 qu’ils sont utilis\u00e9s pour am\u00e9liorer des choses comme le d\u00e9filement du contenu et des galeries d’images. Il est m\u00eame utilis\u00e9 pour imiter les techniques de conception d’impression.<\/p>\n
Heureusement, les exemples ci-dessus inspirent des fa\u00e7ons d’ajouter une interface utilisateur divis\u00e9e \u00e0 vos propres projets. Amusez-vous \u00e0 exp\u00e9rimenter et \u00e0 mettre en \u0153uvre des fonctionnalit\u00e9s qui ont fi\u00e8re allure et qui ajoutent quelque chose d’unique au m\u00e9lange.<\/p>\n