UX-tanulmány: másolás a vágólapra

Hogyan készítsen másolatot vágólapra műveletet az UX-ben

Hogyan: másoljon vágólapra az interneten

Mivel sok kód útmutatót és cikkrészletet fogok írni erről a progresszív webalkalmazásról, elengedhetetlen, hogy a következő feladatokat lefedjük, amelyekre a felhasználónak szüksége lesz:

  • a kód nagy olvashatósága
  • egyszerű és egyértelmű művelet a beágyazott kód másolásához

Ez az alsó sor, amelyre szükség van a hasznos kódpéldákhoz. De javíthatok rajta?

Az elkötelezettség javítása

Az alkalmazásom másolása a vágólapra funkcióinak szintjének növelése érdekében arra gondoltam, hogyan lehetne szórakoztatóbbá tenni a másolás gombra való kattintást, mivel a kellemes felhasználói élmény (UX) kellemes mellékhatással jár, ha felfelé hajtja az elkötelezettséget.

A következőket találtam ki: mi van, ha az alkalmazás csevegésszerűen "válaszol", valahányszor a felhasználó a vágólapra másol? Az élmény azonnal személyesebb lenne. A beképzelt és pergő nyelv használatával a megadott üzenetek is egyedi karakterrel rendelkeznek.

Vessünk egy pillantást a végeredményre:

I'm a code example, sort of.
Click on the button in the bottom right corner to copy.

Mint látható, a hierarchia önmagában fentről lefelé van:

  • Natív ablak utánzása ablakvezérlőkkel
  • tartalom
  • műveletek (íráskor csak a vágólapra másolás)

Az implementáció

Amikor a felhasználó átmásolja a kódot a vágólapra, véletlenszerű választás jelenik meg egy előre meghatározott tömb tömbből rövid időre. A véletlenszerű választás minden kódpéldához generálódik. A bonyolultság csökkentése érdekében nem garantált, hogy a szöveg egyedi legyen a cikk terjedelmében. Mégis b / c elég sok húr közül lehet választani, az ütközéseknek kis a valószínűsége.

És kb ennyi! Remélem, tetszik ez a kis UX fejlesztés a másolás a vágólapra műveletekhez, talán ez inspirálta Önt az UX változásokra a saját alkalmazásában is!

  • Tom