web-dev-qa-db-fra.com

Façons de réduire autant que possible la barre latérale

OK, voici donc deux captures d'écran de la barre latérale pliante classique: this is collapsedand this is expanded Comme nous pouvons le voir, une fois repliée, la barre latérale contient encore de l'espace. La question est - quels modèles de conception peuvent être utilisés pour surmonter ce problème? En haut de ma tête, nous pouvons avoir une flèche en bas/en haut et en mode replié, nous ne pouvons afficher que cette flèche.

2
shabunc

Si votre intention est de réduire à zéro la superficie réduite des panneaux latéraux, il y a vraiment très peu d'options disponibles en termes de modèles de conception. La question devient simplement "où mettez-vous le bouton"

Par exemple, Le Opera Desktop Browser a un bouton en bas à gauche, dans la barre d'état qui bascule la visibilité du panneau:

enter image description here

D'autres positions peuvent être à l'extrémité gauche de l'en-tête de l'onglet, ou dans une barre d'outils, ou dans un menu déroulant ou via un menu contextuel (souris droite), sans oublier l'accès via les raccourcis clavier. Vous pouvez utiliser tout ou partie de ceux-ci!

Vous pouvez peut-être afficher une ceinture déplaçable en survolant les quelques pixels les plus à gauche de la fenêtre, mais ce n'est pas idéal pour la découvrabilité ou la convivialité. Si vous avez précédemment dimensionné le panneau comme vous l'aimez, faire glisser les panneaux est une douleur, donc je ne recommanderais pas cette voie.

Vous pouvez incorporer un petit bouton permanent et discret dans la bordure (similaire à celui montré dans la ceinture que vous avez dans l'image dans votre question) qui s'agrandit lorsque vous vous en approchez avec la souris, de manière à fournir une plus grande zone cliquable . (Et qui recule lorsque vous vous éloignez.)

Par exemple - comme dans la maquette rapide ci-dessous - peut-être avec une petite ombre portée pour soulever l'onglet, et bien sûr avec une info-bulle sur le bouton pour expliquer ce que c'est.

enter image description here

6
Roger Attrill