방법 : 웹에서 클립 보드에 복사
이 프로그레시브 웹 앱에 코드 조각이 포함 된 많은 코드 가이드와 기사를 작성할 것이므로 사용자에게 필요한 다음 작업을 다루는 것이 필수적입니다.
- 코드의 뛰어난 가독성
- 캡슐화 된 코드를 복사하는 간단하고 명확한 작업
이것이 유용한 코드 예제에 필요한 결론입니다. 하지만 개선 할 수 있습니까?
참여도 향상
내 앱의 클립 보드 복사 기능을 레벨 업하기 위해, 유쾌한 사용자 경험 (UX)이 참여도를 높이는 좋은 부작용이 있기 때문에 복사 버튼 클릭을 더 재미있게 만드는 방법을 생각했습니다.
사용자가 클립 보드에 복사 할 때마다 앱이 채팅과 같은 방식으로 "응답"하면 어떻게됩니까? 그 경험은 즉시 더 개인적인 것입니다. 오만하고 은밀한 언어를 사용하여 제공된 메시지에도 고유 한 특성이 있습니다.
최종 결과를 살펴 보겠습니다.
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
보시다시피 계층 구조는 위에서 아래로 다음과 같습니다.
- 창 컨트롤이있는 기본 창 모방
- 함유량
- 작업 (작성 당시에는 클립 보드로 복사 만)
구현
사용자가 코드를 클립 보드에 복사 할 때마다 미리 정의 된 텍스트 스 니펫 배열의 임의 선택 항목이 짧은 시간 동안 표시됩니다. 각 코드 예제에 대해 무작위 선택이 생성됩니다. 복잡성을 줄이기 위해 텍스트가 기사 범위에서 고유하다고 보장 할 수는 없습니다. 그러나 b / c는 선택할 문자열이 상당히 많으며 충돌 가능성은 낮습니다.
그게 다야! 클립 보드 복사 작업에 대한이 작은 UX 개선 사항이 마음에 드셨기를 바랍니다. 앱 자체의 UX 변경에도 영감을 주었을 것입니다!
- Tom
