Decolorarea marginii textului poate fi o alternativă utilă la elipse și aș susține că este superioară în anumite privințe.

Nu confundați conținutul

Elipsele înlocuiesc conținutul textului pentru a-și face treaba, ceea ce poate provoca confuzie cu privire la textul real. Include ” … „? Dacă decupez / copiez / lipesc, se întâmplă asta? O decolorare modifică modul în care conținutul este afișat .

Într-un anumit sens, decolorările sunt conforme cu noțiunea de separare între codificarea vizuală și semantică și elipsele nu sunt „t.

În iOS 5, Apple a schimbat bara de adrese pentru Safari mobil pentru a utiliza o decolorare în loc de elipse:

Nu o doar este mai clar care este adresa URL reală, dar (cel puțin se simte ca) puteți vedea ceva mai mult pe măsură ce se îndepărtează.

Text trunchiat vertical

Elipsele nu funcționează vertical. Iată un exemplu din JIRA, unde conținutul inferior este derulat, dar antetul rămâne așezat (este, de asemenea, inteligent compactat chiar înainte ca acest lucru să se întâmple – nu este la fel de ciudat pe cât ar putea suna). Fade ajută la comunicarea faptului că partea care derulează merge undeva .

Atunci când textul se revarsă în container, dar nu se poate înfășura

Aici, în Gmail, marginea în care este întreruptă deversarea este dificilă. Lățimea este dinamică, astfel încât elipsele ar trebui inserate dinamic, ceea ce nu este practic (presupun că nu ar putea să o facă rapidă). Aș argumenta că o decolorare sau „verișoara” ” ascunsă sub ” ar putea ajuta la comunicarea a ceea ce se întâmplă.

Unele fundaluri generale

În general, efectul de decolorare provine dintr-un skeumorfism care vine de la un contrast mai mare fiind mai ușor de analizat și parând ” mai aproape de ” de utilizator și un contrast mai mic fiind mai dificil și care pare mai îndepărtat – gândiți-vă la ” decolorând în apusul soarelui „. O rudă skeumorfă mai concretă din iOS scoate în evidență ideea:

Un alt, ascuns din Gmaps:

În mod clar, aceasta nu este o convenție super-comună, setată pentru a înlocui înfășurarea textului sau elipsele. am găsit un exemplu exact despre ceea ce vorbiți. Dar cred că „este o opțiune valabilă în anumite circumstanțe.

Comentarii

• +1 Că ´ o prezentare generală frumoasă a diferitelor tipuri de gradiente. Ar trebui ca ´ să fi fost o postare pe blog;) sper să extindeți concluzia la mai mult de » Dar cred că ‘ este o opțiune validă în anumite circumstanțe. « deoarece pareți că ´ M-am gândit mult la asta. Btw: Ultimul imho este o ” umbră interioară „.Oh, și cred că trebuie să intenționați imaginile cu opt spații pentru a face lista să funcționeze.
• @kaiser Vă mulțumim pentru gânduri. Am refăcut listele. De asemenea, probabil că ambele ultime ar putea fi numite ” umbră interioară „, deși cheia este că ‘ este o umbră interioară pe un container care trunchiază textul – de aceea am încercat să trasez paralela. Formularea mea are nevoie de o revizuire …

Rezumat:

punctul cu gradiente și decolorări ²⁾ este întotdeauna același: nu se joacă bine cu monitoarele / LCD-urile defecte.

Problema contrastului

_{Stânga : arată bine pe monitorul proiectanților || Dreapta : se estompează mult mai devreme.}

problemă a gamei de culori

Monitor necorespunzător:

Monitor bun:

După cum puteți vedea mai sus, nu fiecare utilizator vă va împărtăși experiența personală pe monitor. Dacă aveți lumina soarelui direct pe ecran, atunci rezultatul va fi chiar fii mai rău.

Parerea mea:

Nu folosi fadeouts și gradiente până când nu poți să o eviți .

Comentarii

• Acesta nu este ‘ t ceea ce credeam că înseamnă ” text decolorat ” Impresia mea a fost că ‘ seamănă mai mult cu: [~ 400 caractere de text solid] [~ 50-100 de caractere de text care se estompează rapid] – caz în care diferența de experiență vizuală datorită fade ” viteză ” woudn ‘ să fie cu adevărat semnificativ. Cu toate acestea, până când PO nu clarifică ce a vrut să spună, aceasta este speculație.
• Sigur, partea ulterioară ar fi dezbrăcată, dar nu ar conta ‘, deoarece o cantitate scurtă de text decolorat implică ‘ nu intenționat să fie citit, destinat doar ca o reprezentare iconică a ” mai mult text ” care este disponibil.
• Gradientele nu au dependențe de hardware și nici nu sunt afectate semnificativ de lumina soarelui sau de monitoarele defecte. Confundați o problemă de proiectare cu o problemă UX. De obicei, veți afișa 4-10 linii fără niciun fel de suprapunere, apoi 2-4 linii cu o decolorare de la 100% la 0%. Nu este relevant dacă această decolorare este reprezentată exact pe monitorul utilizatorului ‘ atâta timp cât utilizatorul vede o decolorare, controlul și-a îndeplinit scopul de a indica conținut suplimentar.
• Din nou, înțelegeți greșit. Gradientul nu acoperă tot textul , ci doar porțiunea de jos. Indiferent dacă decolorarea este ridicată sau scăzută pe acea porțiune finală, nu este deosebit de relevant pentru valoarea ca indicator al faptului că există mai mult conținut disponibil. Majoritatea conținutului este pe deplin vizibilă. Conștientizarea faptului că gradientul poate fi mai puțin vizibil pentru unii utilizatori este important (astfel încât să puteți proiecta în cel mai rău caz), dar asta nu îl împiedică să își îndeplinească scopul indiferent de calitatea unui utilizator .
• Punctul cheie este dacă OP-ul a însemnat că decolorarea are loc peste 10 mile sau 10 mm. Nu ‘ cred că este ‘ clar, având în vedere descrierea concisă și lipsa de exemplu. ‘ sunt de acord că gradientele imense asupra textului sunt rele – exemplele pe care le includeți arată destul de îngrozitoare în cele mai bune condiții. Dar doar pentru că descrierea este vagă, nu ‘ înseamnă că ar trebui să vă asumați cel mai rău caz. ‘ aș fi curios ce părere aveți despre răspunsul meu care abordează un caz în care, probabil, ipotezele sunt mai optimiste.

Chiar nu am văzut tehnica „textului decolorat” folosită prea mult, dar cred că scopul experienței utilizatorului este de a proiecta pentru orice face ușor pentru utilizator Dacă utilizatorul trebuie să încerce să ghicească ce se întâmplă, cred că învingeți scopul. În majoritatea cazurilor, este suficient să adăugați […] sau [mai multe …] și să oferiți o cale ușor de urmat. pentru ca utilizatorul să obțină mai multe informații … care este totuși punctul principal, nu?

Întrebați dacă utilizarea textului decolorat a fost deloc testată?

După cum îl văd, acesta este un exemplu de ideea utilizării „parfumului informațional” într-o interfață cu utilizatorul. Cu alte cuvinte, cum puteți oferi vizual utilizatorilor un sentiment de unde se află datele într-un spa de informații ce. În acest caz, decolorarea indică faptul că există mai multe informații în această direcție la care puteți ajunge dacă derulați sau interacționați într-un fel.

Am discutat mult despre conceptul de parfum al informației în comunitatea de vizualizare la sfârșitul anilor nouăzeci. A existat o mulțime de literatură de cercetare în comunitatea CHI, au apărut teoriile de cercetare a informațiilor Xerox Parc …. au făcut o mulțime de studii în acest domeniu. Îmi vin în minte lucrările lui Peter Pirolli și Stu Card.

Puteți aplica, de asemenea, parfum de informații pentru interogări. De exemplu, am folosit parfumul informațional în unele vizualizări pe care le-am proiectat folosind scale de gri pentru a arăta cum datele au îndeplinit anumite criterii stabilite pe glisoare (negru a eșuat unul, gri închis a eșuat două etc.). Cu alte cuvinte, punctele de date negre sunt cele care se află chiar în afara interogării dvs. … astfel încât să puteți muta rapid glisorul pentru a le include.

Bob Spence a scris o lucrare rezumând o mulțime dintre aceste tehnici de parfum / reziduuri de informații .

Deci, deși nu pot furniza date despre această tehnică specială, există într-adevăr o mulțime de studii despre modul în care furnizarea acestui tip de indicii sprijină oamenii în sarcinile bazate pe informații.

Comentarii

• Cum se raportează mini-hărțile la decolorarea din marginile conținutului care nu ‘ nu se încadrează în afișaj?
• editat pentru a clarifica … este conceptul de bază la care fac aluzie.
• Este o diagramă cu bare cu culori pe eșecuri. Încă nu ‘ Vedeți cum este relevant acest lucru. De asemenea, de ce roșul trecut și cele mai multe eșecuri sunt cele mai ușoare și cu cel mai mare ordin din spate?

Lucrul drăguț despre utilizarea textului decolorat (pentru cei care nu știu ce înseamnă acest lucru: suprapunere transparentă în gradient, astfel încât textul „să dispară” în culoarea de fundal pe parcurs, dacă câteva linii) este că este mult mai mare și mai greu de ratat decât elipsa. În plus, deși elipsele funcționează aproape întotdeauna pentru a indica, uneori textul pare să se termine corect în locul corect, deci nu există un concept care să încurajeze utilizatorii să caute cuvinte suplimentare. Punctele de suspensie sunt, de asemenea, destul de mici și ușor de dor, în special pentru cei cu vedere redusă (cum ar fi persoanele în vârstă).

Nu am experiență să îl folosesc eu și, deși îmi amintesc un site pe care îl folosesc, care îl are … Nu-mi pot aminti pe care site-ul pe care îl folosesc. Îmi cer scuze. Pot spune că îmi place concept și cred că funcționează bine pentru scopul său. Rețineți că nu înlocuiește butonul „Mai multe”, ci pur și simplu oferă o indicație mult mai mare și mai clară a conținutului suplimentar. În continuare trebuie să aveți o zonă care să permită clicuri (umbră fereastră, buton Mai multe) către care utilizatorii vor gravita atunci când văd efectul de estompare.

Acest lucru pare să funcționeze bine cu conceptul de citire a formei, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx și recunoașterea cuvintelor. Cu toate acestea, în teorie, pot vedea acest lucru numai util pentru estompările orizontale (de la stânga la dreapta) și nu , precum și pentru Amazon fade vertical. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Am putea echivala acest lucru cu o șoaptă, deși șoaptea este auditivă, acesta este un efect similar asupra un nivel vizual. Din câte știu eu, nu au existat studii, dar dacă cineva găsește unul, vă rugăm să postați aici.

Aici „un eșantion de estompare față de elipsa standard. http://www.theuxunicorn.com/fade_sample.png