UI 요소(3)

18. UX Writing Study│UI 요소(2) (이어서)

6. 배지Badge

주변에서 흔히 봤던 UI 요소로 시각적 알림이 필요할 때 사용한다.

① 정보 알림 기능 배지

② 일종의 굿즈로 제공하는 배지: ex) 챌린지 참가 → 획득  /  '동기부여용'

*최근에 받은 팁스터 뉴스레터에서 인용 '배지기능'

▼ 핑크색 화살표를 따라가보자

쏘카 앱 배지 활용

스타벅스와 오일나우 앱 배지 활용

▼

< 배지Badge 관련 > 기타 다양한 사례는 아래 사이트를 참고하기

https://setproduct.com/blog/badge-ui-design

Badge UI design exploration — Tips tricks, usability, and use cases review

▼

팁스터 뉴스레터_'배지' 이렇게 활용하면 어떨까?

https://maily.so/tipster/posts/1bb50ae4?from=email&mid=1d3282aa

� 배지 이렇게 활용하면 어떨까?

7. 체크박스Checkboxes

▼

체크박스를 사용할 때는,

목록에서 하나 이상의 여러 옵션을 선택할 때

하위 선택 항목을 표시할 때

특정 기능을 켜거나on 끌 때off

(왼쪽부터) 레어노트 필터 항목 / KIPRIS 체크항목 / 디자이너스 인스타그램 게시글 중 하나

▼ 그 외 선택 기능

출처: Material Design (왼쪽부터) 체크박스, 라디오버튼, 스위치

8. 카드Card형 UI

작은 사각형마다 각각의 정보를 담고 있다. 사이즈에 맞춰 UXW하기!(글자 수 또는 바이트 기준 적용)

*엑셀에서 글자 수/바이트 확인하는 공식: 글자 수 =len(해당 셀 클릭 ) / 바이트 =lenb(해당 셀 클릭)

▼

단일 주제의 콘텐츠를 담는다

이미지와 텍스트를 함께 적용한다

주변 요소와 상관 없이 단독으로 사용하는 경우도 있다 *예시 찾는 중

(왼쪽부터) 배달의 민족, 롯데카드, 쏘카 앱 메인 카드형 UI

오일나우 카드형 UI

---

UX라이팅이 필요한 UI 요소 위주로 살펴보고 있다.

틈틈이 찾고, 정리하다 보니 UI 요소 명칭이 플랫폼이나 버전마다 다르게 쓰인다는 걸 알게 됐다. 사용성에 따라 요소와 기능이 새롭게 추가되기도 하고, 업그레이드된다고 한다. 그러니 간혹 헷갈리는 상황에서도 당황하지 말자!(고 스스로 다짐함^^)

그리고 최근에 알게 된 UXW 관련 인스타인데

디자이너들이 각각의 주제로 만든 UI/UX를 보고 좋은 질문과 의견을 나누는 공간이다.

UX라이팅 관점에서 꽤 도움이 되는 공간이라 공유한다. @designus