web-dev-qa-db-fra.com

Optimisation de la barre de chemin de répertoire

Je travaille sur un projet complexe en insérez la langue ici, ce qui implique la création d'une visionneuse de répertoire simple, similaire à Windows Explorer ou Mac Finder, mais beaucoup plus simple.

Je ne sais pas où et quand "réduire" ou "raccourcir" la barre de chemin (en haut) pour afficher tout le texte disponible. Il s'agit d'une question de conception logicielle, pas d'une question "comment programmer cette" question .

image 1 Ci-dessus est un arrangement. La barre noire du milieu peut être glissée à gauche et à droite pour redimensionner les deux sélecteurs de répertoire distincts. L'utilisateur peut sélectionner un élément de fichier à ouvrir et cliquer sur un répertoire supérieur pour modifier le répertoire actuel. Notez que le bon sélecteur de répertoire est coupé, c'est ce que je vais corriger. Je dois réduire, raccourcir ou couper une partie du texte pour afficher le premier et dernier dossier dans la barre de chemin de tout temps.

image 2

Voici un autre exemple, mais la barre s'est déplacée vers la gauche. Le sélecteur de répertoire droit est maintenant bien, mais la gauche est maintenant coupée. Je vais modifier la barre de chemin gauche d'une certaine manière, donc, encore une fois, la première et la dernière s'affichent toujours complètement.

Voici la question. Comment dois-je couper/réduire la barre de chemin? J'ai quelques idées, mais je ne sais pas laquelle sera la plus simple pour l'utilisateur et la plus utilisable:

  1. Coupez le texte d'un répertoire du milieu et remplacez-le par des points de suspension (mais quel répertoire, et puis-je le diviser en plusieurs, ou le répertoire avec le nom le plus long, etc.).
  2. Réduire le texte dans un répertoire du milieu (encore une fois, quel répertoire dois-je sélectionner pour cela: le milieu le plus? Le plus haut? (À l'exclusion du premier) tout en même temps?)

Note latérale: Ignorez les couleurs conflictuelles du projet, elles seront modifiées.

3
Zzzach...

Il y a quelques exemples notables que j'ai trouvés particulièrement efficaces:

  • La manière Windows 7/8/10
  • La transmission/Coda voie
    • Pas adapté aux mobiles

La façon Windows 7/8/10

Windows 7/8/10 fournit le meilleur exemple adapté aux mobiles que j'ai rencontré:

Windows 7/8/10 Path Bar First StageWindows 7/8/10 Path Bar Second StageWindows 7/8/10 Path Bar Third Stage

Comment ça marche?

Lorsque l'espace dans la barre de chemin devient limité, il fait ce qui suit :

  1. Supprimez les répertoires les plus éloignés du répertoire actuel.
  2. Si nous atteignons le niveau au-dessus du répertoire actuel ...
    • ... tronquer son nom au lieu de le supprimer ...
    • ... et si possible, tronquer en supprimant des mots entiers plutôt que des lettres individuelles.
  3. Si le nom tronqué du niveau ci-dessous est long de 4 caractères ...
    • ... tronquez le nom du répertoire courant à un maximum de 4 lettres.

.

Quels en sont les avantages?

Il priorise les dossiers et actions les plus importants .

Et cela garantit que l'utilisateur est toujours en mesure de:

  • Voir leur répertoire courant
  • Accédez au répertoire précédent .
    • Et par extension, tous les répertoires précédents .

.

Affichage des répertoires précédents

Windows fournit des doubles flèches qui, lorsque vous cliquez dessus, affiche les dossiers supprimés dans une liste déroulante verticale.

Windows 10 double-arrows to show truncated folders

L'utilisateur peut toujours effectuer les actions requises sans lui .

Mais cela rend beaucoup plus facile pour eux de parcourir de grandes parties de la hiérarchie.


La voie Transmit/Coda

Transmit et Coda 2 ne suppriment pas du tout les dossiers , et tronquent uniquement les noms.

Transmit Path BarCoda 2 Path Bar

Lorsque l'utilisateur survole un nom tronqué, il se développe pour révéler le nom complet.

Ceci ne fonctionnera pas sur les appareils à écran tactile, mais fournit une alternative viable à la méthode Windows.

4
Joel Tebbett