Les interfaces utilisateur \u00e0 \u00e9cran partag\u00e9 sont devenues un moyen populaire d’afficher du contenu. Nous pensons souvent qu’ils sont utilis\u00e9s dans des domaines o\u00f9 nous voulons que les utilisateurs choisissent entre deux options. Mais nous voyons \u00e9galement d’autres utilisations cr\u00e9atives de la technique. Par exemple, un \u00e9cran divis\u00e9 peut \u00e9galement \u00eatre utilis\u00e9 avec grand effet comme mise en page pleine ou m\u00eame comme animation de transition.<\/p>\n
Voici 10 exemples d’interface utilisateur \u00e0 \u00e9cran partag\u00e9, avec un code source que vous pouvez modifier en fonction de vos besoins. Chacun a quelque chose d’unique \u00e0 offrir.<\/p>\n
C’est sans aucun doute la fa\u00e7on la plus courante d’utiliser un \u00e9cran partag\u00e9. Un visiteur du site Web est pr\u00e9sent\u00e9 avec deux options. Ici, les couleurs de l’image d’arri\u00e8re-plan permettent une bonne s\u00e9paration, tandis que le logo arrondi au milieu le relie.<\/p>\n
Un \u00e9cran partag\u00e9 cr\u00e9e \u00e9galement un effet de transition int\u00e9ressant, comme nous le voyons dans l’exemple de diaporama suivant. En faisant d\u00e9filer vers le bas, chaque moiti\u00e9 de l’\u00e9cran se divise et r\u00e9v\u00e8le l’image suivante dans la file d’attente. Le r\u00e9sultat est une interface utilisateur tr\u00e8s fluide et haut de gamme.<\/p>\n
Les \u00e9crans HD et 4K gagnant du terrain, de plus en plus de concepteurs commencent \u00e0 profiter de cet espace d’\u00e9cran suppl\u00e9mentaire. Cet exemple de disposition fournit une barre lat\u00e9rale statique avec une image d’arri\u00e8re-plan en gras. Mais il a \u00e9galement fi\u00e8re allure sur les \u00e9crans plus petits, car cette barre lat\u00e9rale devient un en-t\u00eate. Il est \u00e0 la fois attrayant et fonctionnel.<\/p>\n
Une autre tendance qui gagne du terrain consiste \u00e0 utiliser l’\u00e9cran partag\u00e9 pour comparer les images \u00abavant\u00bb et \u00abapr\u00e8s\u00bb. Ici, nous avons un param\u00e8tre qui permet aux utilisateurs de d\u00e9placer simplement la souris pour voir les diff\u00e9rences entre deux images. En utilisant juste un peu de JavaScript, cette interface utilisateur est une variante int\u00e9ressante de la technique.<\/p>\n
L’effet de d\u00e9filement \u00abmoiti\u00e9 par moiti\u00e9\u00bb avec cet exemple ajoute une touche unique. Il semble que les cartes et les photos soient 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 \u00e9mule quelque chose que vous pouvez trouver dans un magazine imprim\u00e9. La l\u00e9gende en gras et le texte d’introduction \u00e0 gauche offrent un excellent contraste avec la photo et l’article \u00e0 plusieurs colonnes \u00e0 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 dans une page o\u00f9 vous avez un message de marque statique \u00e0 gauche, combin\u00e9 avec une liste d\u00e9roulante de services offerts \u00e0 droite. C’est juste diff\u00e9rent et c’est un moyen de se d\u00e9marquer un peu de la foule.<\/p>\n
Tr\u00e8s souvent, nous voyons de belles dispositions d’\u00e9cran partag\u00e9, mais pas beaucoup en termes d’interactivit\u00e9. L’exemple suivant ajoute l’ingr\u00e9dient manquant avec des transitions d’\u00e9chelle de base lorsque vous passez la souris dessus. La bonne chose \u00e0 ce sujet est qu’il fournit ce petit signal visuel suppl\u00e9mentaire pour l’utilisateur.<\/p>\n
Les transitions entre les diapositives sur ce carrousel ajoutent litt\u00e9ralement une nouvelle dimension aux \u00e9crans divis\u00e9s. Chaque diapositive est “divis\u00e9e” en deux tandis que la diapositive suivante est r\u00e9v\u00e9l\u00e9e dans un format 3D sympa. Voici une certaine qualit\u00e9 de machine qui pourrait \u00eatre un excellent choix pour une entreprise d’ing\u00e9nierie ou industrielle.<\/p>\n
La pratique de faire d\u00e9filer une page peut devenir ennuyeuse 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 divis\u00e9e. L’animation ajoute un peu de personnalit\u00e9 et d’excitation \u00e0 l’exp\u00e9rience. Il peut m\u00eame aider \u00e0 attirer davantage de visiteurs sur votre site.<\/p>\n
Ce qui a commenc\u00e9 comme un moyen de choisir entre A ou B est devenu autre chose. Les conceptions et animations divis\u00e9es offrent aux concepteurs une autre avenue cr\u00e9ative pour encourager l’interaction. Bien que nous les voyions toujours sous leur forme traditionnelle, nous constatons \u00e9galement qu’ils sont utilis\u00e9s pour am\u00e9liorer des choses comme le d\u00e9filement \u00e0 travers le contenu et les galeries d’images. Il est m\u00eame utilis\u00e9 pour imiter les techniques de conception d’impression.<\/p>\n
Esp\u00e9rons que les exemples ci-dessus vous inspireront pour 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 ajoutez quelque chose d’unique au m\u00e9lange.<\/p>\n