A szöveg szélének elhalványulása az ellipszisek hasznos alternatívája lehet, és azt állítom, hogy bizonyos szempontból jobb.

Ne keverje össze a tartalmat

Az ellipszisek a szöveges tartalmat helyettesítik a munkájuk elvégzéséhez, ami zavart okozhat abban, hogy mi a tényleges szöveg. Tartalmazza-e a ” … “? Ha kivágok / másolok / beillesztek, akkor ez jön létre? A fakulás megváltoztatja a tartalom megjelenítésének ódját .

Bizonyos értelemben az elhalványulások megfelelnek a vizuális és szemantikai kódolás és az ellipszisek elválasztásának elképzelésének.

Az iOS 5 rendszerben a Apple megváltoztatta a címsávot a mobil Safari számára, hogy ellipszisek helyett fakulást használjon:

Nem o Az egyértelműbb, hogy mi a tényleges URL, de (legalábbis úgy érzi) egy kicsit többet láthat belőle, amikor elcsúszik.

Függőlegesen csonkolt szöveg

Az ellipszisek nem működnek függőlegesen. Íme egy példa a JIRA-tól, ahol az alsó tartalmat görgetjük, de a fejléc helyben marad (ez is ügyesen tömörül, még mielőtt ez megtörténne – nem olyan janky, mint amilyennek hangozhat). A fakulás segít kommunikálni abban, hogy a gördülő rész megy valahová .

Ha a szöveg túlcsordul, akkor a tárolója, de nem tudja becsomagolni

Itt, a Gmailben az él, ahol a túlcsordulás el van vágva, nehéz. A szélesség dinamikus, ezért dinamikusan be kellene illeszteni az ellipsziseket, ami nem praktikus (feltételezem, hogy nem tudnák csattanóvá tenni). Azt állítom, hogy egy halványítás, vagy a ” unokatestvére ” alatt segíthet kommunikálni a történésekben.

Néhány általános háttér

Általában a fadeout effekt egy szkumorfizmusból fakad, amely a nagyobb kontraszt miatt könnyebben értelmezhető és ” közelebb látszik a felhasználóhoz “, és az alacsonyabb kontraszt nehezebb és távolabbinak tűnik – gondolja, hogy ” a naplementében elhalványul “. Az iOS-ből származó konkrétabb skeumorph rokon kiemeli az ötletet:

Egy másik, a Gmaps által behúzott elem:

Nyilvánvaló, hogy ez nem túl általános konvenció, a szövegburkolás vagy az ellipszis helyettesítésére van beállítva. Csak talált egy példát arra, amiről pontosan beszél. De úgy gondolom, hogy ez bizonyos esetekben érvényes lehetőség.

Megjegyzések

• +1 Ez ´ sa szép áttekintés a különböző színátmenetekről. Ha ´ lett volna blogbejegyzés;) Remélem, a következtetést többre is kiterjeszti, mint », de szerintem ‘ bizonyos körülmények között érvényes lehetőség. « mivel úgy tűnik, hogy ´ sokat gondolkodtam rajta. Btw: Az utolsó imho egy ” belső árnyék “.Ja, és azt hiszem, nyolc szóközzel kell beillesztenie a képeket a lista működéséhez.
• @kaiser Köszönöm a gondolatokat. Átdolgoztam a listákat. Valószínűleg mindkét utóbbit ” belső árnyéknak nevezhetjük “, bár a kulcs az, hogy ‘ egy belső árnyék egy konténeren, amely megcsonkítja a szöveget – ezért próbáltam meg felhívni a párhuzamot. Szövegem némi felülvizsgálatra szorul …

Összefoglalva:

A színátmenetekkel és elhalványulásokkal ²⁾ mindig ugyanaz: Nem játszanak jól rossz monitorokkal / LCD-kkel.

A Kontraszt probléma

_{balra : jól néz ki a tervezők monitorán || Jobbra : sokkal korábban elhalványul.}

A színtartomány-probléma

Rossz monitor:

Jó monitor:

Amint az fent látható, nem minden felhasználó osztja meg személyes tapasztalatait a monitoron. Ha napfényt kapott közvetlenül a képernyőn, akkor az eredmény még légy rosszabb.

Véleményem:

Ne használjon elhalványulást és színátmenetet amíg nem tudja elkerülni .

Megjegyzések

• Ez nem ‘ t, amit gondoltam ” elhalványult szöveg ” jelent. Az volt a benyomásom, hogy ‘ inkább hasonlít: [~ 400 karakter szilárd szöveg] [~ 50-100 karakter gyorsan halványuló szöveg] – ebben az esetben a vizuális élmény különbsége a fade ” sebesség ” woudn ‘ t valóban jelentős. Amíg az OP nem tisztázza, mire gondolt, ez spekuláció.
• Persze, a későbbi részt lecsupaszítanánk, de ez nem számítana ‘, mert a halványuló szöveg rövid mennyisége azt jelenti, hogy ‘ nem olvasható, inkább csak a ” további szöveg ikonikus ábrázolásaként szolgál ” amely elérhető.
• A színátmeneteknek nincs hardverfüggőségük, és a napfény vagy a rossz monitorok sem károsítják őket jelentősen. Összekeveri a tervezési problémát az UX problémával. Általában 4-10 sort mutat átfedés nélkül, majd 2-4 sort 100% és 0% között. Nincs jelentősége annak, hogy ez a fakulás pontosan megjelenik-e a felhasználói ‘ monitoron; mindaddig, amíg a felhasználó valamilyen halványulást észlel, a vezérlő azt a célt szolgálta, hogy további tartalmat jelezzen.
• Ismét félreértés. A színátmenet nem fedi le az összes szöveget , csak az alsó részt. Az, hogy az elhalványulás magas vagy alacsony-e az utolsó adagban, nem különösebben releváns az érték szempontjából, mivel azt jelzi, hogy több tartalom érhető el. A tartalom nagy része teljesen látható. Fontos tisztában lenni azzal, hogy a gradiens egyes felhasználók számára kevésbé látható lehet (hogy a legrosszabb esetben is tervezhesse), de ez nem akadályozza meg, hogy a felhasználó minőségétől függetlenül teljesítse a célját ‘ s képernyő.
• A legfontosabb pont az, hogy az OP azt jelentette-e, hogy a fakulás 10 mérföld vagy 10 mm felett történik. Nem gondolom, hogy ‘ egyértelmű lenne, tekintettel a rövid leírásra és a példa hiányára.

Nem igazán látom, hogy a “kifakult szöveg” technika sokat használt volna, de azt gondolom, hogy a felhasználói élmény lényege, hogy bármit megtervezzünk, ami megkönnyíti a felhasználó számára . Ha a felhasználónak meg kell próbálnia kitalálni, hogy mi folyik itt, akkor azt hiszem, hogy tönkreteszi a célt. A legtöbb esetben a […] vagy a [tovább …] hozzáadása elegendő, és tiszta, könnyen követhető utat biztosít hogy a felhasználó további információkat szerezzen … ami egyébként a lényeg?

Azt kérdezi, hogy egyáltalán tesztelték-e a kifakult szöveg használatát?

Mint látom, ez egy példa az “információillat” felhasználói felületen való használatának ötlete. Más szavakkal: hogyan lehet vizuálisan érzékeltetni a felhasználókat azzal, hogy hol találhatók az adatok egy információs fürdőben ce. Ebben az esetben a fakulás azt jelzi, hogy több információ van ebben az irányban, amelyhez eljuthat, ha valamilyen módon görget vagy interakcióba lép.

A kilencvenes évek végén sokat tárgyaltunk az információillat fogalmáról a vizualizációs közösségben. Nagyon sok kutatási irodalom volt a CHI közösségben, megjelentek a Xerox Parc információs elméleti elméletei … rengeteg tanulmányt végeztek ezen a területen. Peter Pirolli és Stu Card tanulmányai eszembe jutnak.

Információs illatot is alkalmazhat a lekérdezésekre. Így például információs illatot használtam egyes látványterveken, amelyeket szürke skálák segítségével terveztem, hogy megmutassam, hogyan teljesítik az adatok a csúszkákon beállított bizonyos feltételeket (a fekete egy, a sötétszürke kettő stb.). Más szavakkal, a fekete adatpontok azok, amelyek közvetlenül a lekérdezésen kívül helyezkednek el … így gyorsan mozgathatja a csúszkát, hogy azokat felvegye.

Bob Spence írt egy cikket, amelyben összefoglalta ezek sokaságát > információs illat / maradvány technikák .

Tehát bár nem tudok adatokat szolgáltatni erről a technikáról, valóban sok tanulmány készült arról, hogy az ilyen jellegű jelzések biztosítása hogyan támogatja az embereket az információalapú feladatokban.

Megjegyzések

• Hogyan viszonyulnak a minitérképek a tartalom olyan margóinak elhalványulásához, amelyek nem illenek a kijelzőbe?
• annak tisztázása érdekében szerkesztettem … ez az alapkoncepció, amelyre utaltam.
• Ez oszlopdiagram hibánként színnel. Még mindig nem ‘ Nem látja, hogy ez mennyire releváns. Miért a legkevésbé piros és a legtöbb kudarc a legkönnyebb és a leghátsó z-sorrendben van?

A szépség a fakuló szöveg használatában (azok számára, akik nem tudják, mit jelent ez: gradiens átlátszó átfedés, hogy a szöveg a tanfolyam során “elhalványuljon” a háttérszínbe, ha pár sor) az, hogy sokkal nagyobb és nehezebb kihagyni, mint az ellipszis. Ezen túlmenően, bár az ellipszis szinte mindig jelzésre képes, néha a szöveg csak a megfelelő helyen végződik, így nincs olyan lógó koncepció, amely további szavak keresésére ösztönzi a felhasználókat. Az ellipszisek is meglehetősen kicsiek és könnyen kihagyhatók, különösen a látássérültek (például az idősek) számára.

Magamnak nincs tapasztalatom, és bár emlékszem egy általam használt webhelyre, amely rendelkezik vele … Nem emlékszem melyik webhelyre, amelyet használok. Elnézést kérek. Mondhatom, hogy tetszik a koncepció, és úgy gondolom, hogy jól működik a célja szempontjából. Ne feledje, hogy nem helyettesíti a „Tovább” gombot, egyszerűen sokkal nagyobb és egyértelműbb jelzést ad a további tartalomról. Szüksége van még egy olyan területre, amely kattintást tesz lehetővé (ablaktábla, További gomb), amelyre a felhasználók gravitálni fognak, ha látják a fakulást.

Úgy tűnik, ez jól működik az alakolvasás, a http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx és a szófelismerés fogalma. Elméletileg azonban ezt csak vízszintes (balról jobbra) elhalványulásoknál látom, és nem , valamint az Amazon-oknál is. függőleges elhalványulás. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Ezt egyenlővé tehetnénk egy suttogással, bár a suttogás hallható, hasonló hatás vizuális szint. Tudomásom szerint még nem folytattak tanulmányokat, de ha valaki talál ilyet, kérjük, írjon ide.

Itt a minta elhalványul a szokásos ellipszishez képest. http://www.theuxunicorn.com/fade_sample.png