it-swarm-eu.dev

In una griglia, come visualizzare le intestazioni di colonna lunghe

Quando si visualizzano i dati in una griglia (ogni riga contiene un record, ogni colonna un campo record diverso), è necessario risolvere facilmente lo spazio verticale con scorrimento o paginazione.

Di solito ci manca prima lo spazio orizzontale man mano che il numero di colonne o dati delle colonne aumenta. Questo argomento è già discusso qui: Come visualizzare troppi dati e questo non è il punto della mia domanda.

Alcune colonne contengono dati che occupano poco spazio (una casella di controllo, una data o un'icona), ma l'etichetta dell'intestazione è lunga. Il risultato è che la colonna diventa larga a causa dell'intestazione, non dei dati, con un'evidente perdita di spazio orizzontale.

Esistono alcune soluzioni semplici:

  • trova testi di intestazione più brevi
  • avvolgere il testo dell'intestazione in più righe
  • visualizza il testo dell'intestazione in verticale
  • visualizzare un'abbreviazione con un mouse sopra la descrizione comandi contenente l'etichetta completa
  • usa un'icona come intestazione

Ci sono casi in cui nessuna di queste soluzioni può essere applicata, mantenendo allo stesso tempo un'interfaccia utente chiara e di facile comprensione. Quali sono le tue soluzioni?

13
Mart

L'approccio più ampiamente usato che ho visto è quello di usare un'ellissi per indicare che c'è più testo, come questo:

alt text

È quindi possibile fornire una descrizione comandi al passaggio del mouse per mostrare all'utente il nome completo. Su Mac OS, Apple cerca di condensare il testo come primo passo. Lo fanno riducendo lo spazio tra lettere e parole. L'idea è di mostrarti quanti più caratteri possibile prima di aggiungere il Ellissi come ultima risorsa.

Ho visto un altro approccio molto più elegante in un'app da qualche parte dove svaniscono le ultime lettere visualizzabili. Non riesco a ricordare il nome dell'app, ma sembrava così:

alt text

Questo è ovviamente più lavoro, ma sembra sicuramente più moderno e di classe. Sono sorpreso che non sia ancora diventata una funzionalità standard di Mac OS. A proposito, Apple fa usa lo sbiadimento in Spotlight per mostrarti un lungo percorso di file:

alt text

Oltre al percorso del file sbiadito, vedi il file "YLListenerBase.cpp": puoi vedere che è condensato se lo confronti con il suo file .h. Il percorso del file con l'effetto di dissolvenza si trova nella parte inferiore della finestra.

7
Hisham

Penso di averlo suggerito in un commento nell'altra domanda, ma per ricapitolare ... Suggerirei icone quando l'icona può descrivere accuratamente il significato delle colonne.

alt text

Citazione da commento sull'altra domanda:

Per esempio. se hai una colonna che conterrà solo un singolo carattere (es. S/N /? o 0/1/2/3 /? o T/F) se puoi usare un'icona o un testo abbreviato nell'intestazione potresti essere in grado di ridurre notevolmente la larghezza della colonna. per esempio. se hai una colonna "Numero", usando "#" invece risparmierai spazio.

3
scunliffe

La tua lista è piuttosto esaustiva. Non c'è molto altro che puoi fare, ma scegli quello che è meglio per la tua situazione.

  • Se le intestazioni sono più parole, il wrapping è probabilmente l'opzione migliore. Puoi anche spezzare la lunga parola occasionale se usi la sillabazione corretta. Non spezzare le parole in punti arbitrari.

  • In genere hai più fortuna a ottenere abbreviazioni indovinabili rispetto alle icone, a meno che le icone non siano già state stabilite altrove nell'app. Se non stai utilizzando abbreviazioni stabilite, testale nel contesto per assicurarti che gli utenti possano indovinarle. Sì, usa le descrizioni dei comandi se stai usando icone o abbreviazioni, ma non fare affidamento su di esse per un uso normale. Le abbreviazioni generalmente non necessitano di punti, in modo da risparmiare spazio.

  • Se visualizzi l'intestazione in verticale, otterrai una migliore leggibilità scrivendo il testo lateralmente, anziché impilare le lettere una sopra l'altra.

  • Invece di visualizzare l'intestazione in verticale, "piega" la colonna in alto e visualizza il testo dell'intestazione con un angolo da 30 a 45 gradi. Adesso basta solo una leggera punta della testa per leggerli. Ciò funziona solo se hai un gruppo di colonne adiacenti con intestazioni lunghe.

  • Per alcune griglie come quelle in cui i valori dei campi tendono ad avere la stessa larghezza su campi diversi (ad es. Per mostrare un orario dei treni), ha senso scambiare colonne con file. Ora le intestazioni di colonna sono intestazioni di riga, che possono essere lunghe quanto necessario senza sprecare spazio.

Ricorda che non esiste una legge contro lo scorrimento orizzontale in una griglia. Gli utenti lo fanno da anni con i fogli di calcolo.

2
Michael Zuschlag

Perché non si sente una 'nuvola' sovrapposta sopra la colonna? Se sono davvero così importanti da avere a lungo, impazzisci:

       ________________   _____________
      |Super Long Title| |I'm also long|
               ^            ^
| Foo | Bar |  |   | Baz |  |  | FooBar |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
|  x  |  y  |   z  |  xy |  yx |  xyz   |
2
Dominic Hopton

Alcune buone soluzioni già menzionate. Eccone un altro da considerare: utilizzare identificatori di colore, numero o lettera per la colonna e una legenda.

Color and Letter Identifyers

1
Ray Perfetti