Sfumare il bordo del testo può essere unutile alternativa ai puntini di sospensione, e direi che è superiore in qualche modo.

Non confondere il contenuto

Le ellissi sostituiscono il contenuto del testo per svolgere il loro lavoro, il che può creare confusione su quale sia il testo effettivo. Include il ” … “? Se taglio / copia / incolla, succede? Una dissolvenza cambia il modo in cui i contenuti vengono visualizzati .

In un certo senso, le dissolvenze sono conformi alla nozione di separazione tra codifica visiva e semantica e le ellissi non lo sono.

In iOS 5, Apple ha cambiato la barra degli indirizzi per Safari mobile in modo da utilizzare una dissolvenza invece dei puntini di sospensione:

Non o solo è più chiaro quale sia lURL effettivo, ma (almeno sembra) puoi vederne un po di più mentre si esaurisce.

Testo troncato verticalmente

Le ellissi non funzionano in verticale. Ecco un esempio da JIRA, in cui viene fatto scorrere il contenuto inferiore, ma lintestazione rimane inserita (viene anche compattata in modo intelligente appena prima che ciò accada – non è così stravagante come potrebbe sembrare). La dissolvenza aiuta a comunicare che la parte che sta scorrendo sta andando da qualche parte .

Quando il testo va in overflow nel suo contenitore ma non può “andare a capo”

Qui, in Gmail, il bordo in cui loverflow viene interrotto è difficile. La larghezza è dinamica, quindi le ellissi dovrebbero essere inserite dinamicamente, il che non è pratico (presumo che non possano renderlo scattante). Direi che una dissolvenza in chiusura, o “è cugino del ” ripiegato sotto “, potrebbe aiutare a comunicare cosa” sta succedendo.

Qualche sfondo generale

In generale, leffetto dissolvenza deriva da uno skeumorphism che deriva da un contrasto maggiore che è più facile da analizzare e sembra ” più vicino ” allutente e un contrasto più basso è più difficile e sembra più distante – pensa a ” che svanisce al tramonto “. Un parente skeumorph più concreto di iOS evidenzia lidea:

Un altro, tuck-under da Gmaps:

Chiaramente questa non è “una convenzione super comune, impostata per sostituire la disposizione del testo o i puntini di sospensione. Ho solo ho trovato un esempio di quello di cui stai parlando. Ma penso che “sia unopzione valida in alcune circostanze.

Commenti

• +1 That ´ una bella panoramica di diversi tipi di sfumature. Dovrei ´ essere stato un post sul blog;) Spero che estenderai la conclusione a più di » Ma penso che sia ‘ è unopzione valida in alcune circostanze. « come sembra che tu ´ ci ho pensato molto. A proposito: lultimo imho è un ” ombra interna “.Oh, e immagino che tu debba intendere le immagini di otto spazi per far funzionare lelenco.
• @kaiser Grazie per i pensieri. Ho rielaborato le liste. Inoltre, probabilmente entrambi gli ultimi potrebbero essere chiamati ” ombra interna “, anche se la chiave è che ‘ è unombra interna su un contenitore che tronca il testo – ecco perché stavo cercando di disegnare il parallelo. La mia formulazione necessita di qualche revisione …

Riassunto:

Il punto con gradienti e dissolvenze ²⁾ è sempre lo stesso: non funzionano bene con monitor / LCD scadenti.

Il problema del contrasto

_{Sinistra : sembra buono sul monitor dei designer || Destra : dissolvenza molto prima.}

Il problema di gamma di colori

Monitor difettoso:

Monitor buono:

Come puoi vedere sopra, non tutti gli utenti condivideranno la tua esperienza personale sul monitor. Se hai la luce solare direttamente sullo schermo, il risultato sarà pari essere peggio.

La mia opinione:

non usare dissolvenze e gradienti finché non puoi evitarlo .

Commenti

• Questo non è ‘ t quello che pensavo significhi ” testo sbiadito “. La mia impressione è stata che ‘ sia più simile a: [~ 400 caratteri di testo pieno] [~ 50-100 caratteri di testo che si dissolve rapidamente], nel qual caso la differenza nellesperienza visiva è dovuta a dissolvenza ” velocità ” woudn ‘ t essere davvero significativo. Tuttavia, fino a quando lOP non chiarisce cosa intendeva, questa è una speculazione.
• Certo, la parte successiva verrebbe rimossa, ma questo non ‘ importa, poiché il una breve quantità di testo in dissolvenza implica che ‘ non è destinato alla lettura, è inteso solo come una rappresentazione iconica del ” altro testo ” disponibile.
• Le sfumature non dipendono dallhardware, né vengono danneggiate in modo significativo dalla luce solare o da monitor difettosi. Stai confondendo un problema di progettazione con un problema di UX. In genere verranno visualizzate 4-10 righe senza alcuna sovrapposizione, quindi 2-4 righe con una dissolvenza dal 100% allo 0%. È irrilevante se tale dissolvenza è rappresentata esattamente sul monitor dellutente ‘; finché lutente vede una dissolvenza di qualche tipo, il controllo è servito allo scopo di indicare ulteriore contenuto.
• Ancora una volta, stai fraintendendo. Il gradiente non copre tutto il testo , solo la parte inferiore. Se la dissolvenza è alta o bassa su quella parte finale non è particolarmente rilevante per il valore in quanto indicatore della disponibilità di più contenuti. La maggior parte del contenuto è completamente visibile. Essere consapevoli del fatto che il gradiente può essere meno visibile ad alcuni utenti è importante (in modo da poter progettare per il caso peggiore), ma ciò non gli impedisce di servire al suo scopo indipendentemente dalla qualità di un utente ‘ s schermo.
• Il punto chiave è se lOP significava che la dissolvenza avviene oltre 10 miglia o 10 mm. Non ‘ credo che ‘ sia chiaro, data la descrizione concisa e la mancanza di esempio. Sono ‘ daccordo sul fatto che enormi gradienti sul testo sono pessimi: gli esempi che includi sembrano piuttosto orribili nelle migliori condizioni. Ma solo perché la descrizione è vaga ‘ non significa che dovresti presumere il caso peggiore. ‘ sarei curioso di sapere cosa ne pensi della mia risposta che affronta un caso in cui forse le ipotesi sono più ottimistiche.

Non vedo molto usata la tecnica del “testo sbiadito”, ma penso che il punto dellesperienza utente sia progettare per ciò che lo rende facile per lutente . Se lutente deve provare a indovinare cosa sta succedendo, penso che tu stia vanificando lo scopo. Nella maggior parte dei casi è sufficiente aggiungere […] o [altro …] e fornire un percorso pulito e facile da seguire per consentire allutente di ottenere maggiori informazioni … che è comunque il punto giusto?

Mi chiedi se luso del testo sbiadito è stato testato?

Come vedo questo è un esempio di lidea di utilizzare “information scent” in uninterfaccia utente. In altre parole, come puoi dare visivamente agli utenti un senso di dove si trovano i dati in una spa dellinformazione ce. In questo caso la dissolvenza indica che ci sono più informazioni in questa direzione a cui puoi arrivare se scorri o interagisci in qualche modo.

Abbiamo discusso molto il concetto di profumo dellinformazione nella comunità della visualizzazione alla fine degli anni novanta. Cera molta letteratura sulla ricerca nella comunità CHI, sono emerse le teorie sulla ricerca di informazioni di Xerox Parc … hanno fatto molti studi in questo settore. Mi vengono in mente gli articoli di Peter Pirolli e Stu Card.

Puoi anche applicare il profumo delle informazioni alle query. Quindi, ad esempio, ho utilizzato il profumo delle informazioni in alcune visualizzazioni che ho progettato utilizzando scale di grigi per mostrare come i dati soddisfacevano determinati criteri impostati sui cursori (nero non riuscito uno, grigio scuro non riuscito due ecc.). In altre parole, i punti dati neri sono quelli che si trovano appena fuori dalla query … quindi puoi spostare rapidamente il cursore per includerli.

Bob Spence ha scritto un articolo riassumendo molti di questi informazioni profumo / tecniche residue .

Quindi, anche se non posso fornire dati su questa particolare tecnica, ci sono davvero molti studi su come fornire questo tipo di spunti supporti le persone in compiti basati sulle informazioni.

Commenti

• Che relazione cè tra le mini-mappe e lo sbiadimento dei margini di contenuti che ‘ non si adattano alla visualizzazione?
• modificato per chiarire … è il concetto di base a cui alludo.
• È un grafico a barre con colori per errori. Continuo a non ‘ Non vedo come questo sia rilevante. Inoltre, perché il numero passato tutto in rosso e il maggior numero di errori è il più leggero e con lordine z più arretrato?

La cosa bella delluso del testo in dissolvenza (per coloro che non sanno cosa significa: sovrapposizione sfumata trasparente in modo che il testo “svanisca” nel colore di sfondo nel corso se un paio di righe) è che è molto più grande e più difficile da mancare rispetto ai puntini di sospensione. Inoltre, mentre i puntini di sospensione funzionano quasi sempre per indicare, a volte il testo sembra terminare correttamente nel punto corretto, quindi non esiste un concetto penzolante che incoraggi gli utenti a cercare parole aggiuntive. Le ellissi sono anche piuttosto piccole e facili da perdere, in particolare per le persone con problemi di vista (come gli anziani).

Non ho esperienza nellusarle da solo e, sebbene riesca a ricordare un sito che uso che ce lha … non riesco a “ricordare quale sito uso che ce lha. Mi scuso. Posso dire che mi piace e credo che funzioni bene per il suo scopo. Tieni presente che non sostituisce un pulsante “Altro”, ma fornisce semplicemente unindicazione molto più ampia e chiara di contenuti aggiuntivi. È comunque necessario disporre di unarea che consenta di fare clic (ombreggiatura della finestra, pulsante Altro) su cui gli utenti graviteranno quando vedranno leffetto di dissolvenza.

Questo tipo di effetto sarebbe appropriato solo per lo scorrimento di contenuti (ad es. ticker, feed di notizie ecc.), dove scorrono da un lato (dissolvenza in entrata) e dissolvenza in uscita dallaltro.

Questo sembra funzionare bene con il concetto di lettura della forma, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx e riconoscimento delle parole. Tuttavia, in teoria posso vederlo utile solo per le dissolvenze orizzontali (da sinistra a destra) e non anche con Amazon “s dissolvenza verticale. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Potremmo equipararlo a un sussurro, sebbene il sussurro sia uditivo, questo è un effetto simile a livello visivo. Per quanto ne so non ci sono stati studi, ma se qualcuno ne trova uno, per favore scrivi qui.

Ecco “un esempio di dissolvenza rispetto ai puntini di sospensione standard. http://www.theuxunicorn.com/fade_sample.png