앱 아이콘, 페이지 아이콘 등의 아이콘은 모두 아이콘이라고 할 수 있습니다.

셔틀 상자라고도 하며 일반적으로 두 개의 열이 있으며 왼쪽은 선택할 항목이고 오른쪽은 선택한 항목입니다. 왼쪽에서 오른쪽으로 선택하면 선택됨을 의미하고, 오른쪽에서 왼쪽으로 이동하면 선택 해제됨을 의미합니다. B-end 제품에 흔히 사용되며, 다중 선택이 필요하고 옵션이 많을 경우 셔틀 셀렉터를 사용할 수 있습니다. 옵션이 10개 이상인 경우 셔틀 선택 상자 사용을 고려할 수 있습니다. 이를 통해 사용자는 자신이 선택한 콘텐츠가 무엇인지 명확하게 알 수 있습니다.

로고는 아이콘, 텍스트 또는 페이지의 오른쪽 상단 모서리에 있는 작은 빨간색 점인 작은 빨간색 점으로 이해될 수 있습니다. 종종 새로운 뉴스를 나타내거나 일종의 정보 프롬프트를 얻기 위해 사용됩니다. 로고는 작은 빨간색 점 형태일 뿐만 아니라 빨간색 원 안에 숫자가 새 메시지 수를 나타냅니다. 정보를 더 잘 전달하기 위해 작은 빨간색 원 안에 직접 텍스트도 있습니다.

스켈레톤 화면은 로딩 플레이스홀더라고도 불리는 로딩 상태입니다. 로딩 시 대략적인 구조가 회색 블록을 통해 페이지에 표시됩니다. 스켈레톤 화면은 사용자의 대기 불안을 효과적으로 완화하고 "이 페이지에 이런 데이터가 있다"는 느낌을 사용자에게 표현할 수 있습니다. 동시에 광택이 나는 애니메이션이나 회색 블록이 앞뒤로 줄어드는 애니메이션과 결합하여 페이지가 로딩되는 것을 표현합니다. 스켈레톤 화면은 일반적인 로딩 애니메이션보다 더 나은 시각적 효과를 제공할 수 있고, 빠른 로딩 느낌을 조성하며, 더 나은 사용자 경험을 제공할 수 있습니다.

기본 페이지/빈 상태 페이지는 페이지에 데이터가 없을 때 표시되는 빈 상태 효과를 나타냅니다. 데이터가 없을 때 빈 페이지를 표시하여 사용자가 데이터가 있는지 없는지 혼란스럽게 만드는 것을 피하세요. 기본 페이지에는 네트워크 예외, 로딩 실패, 권한 없음, 검색 결과 없음 등이 포함됩니다.

기본 페이지는 빈 상태의 페이지일 뿐만 아니라 해당 페이지의 특정 모듈에 빈 상태가 있으며, 특정 모듈에도 기본 상태를 추가해야 합니다. 데이터가 없으면 사용자 경험에 큰 영향을 미치므로 사용자를 편안하게 하기 위해 기본 페이지를 사용합니다. 적절한 카피라이팅, 패턴, 안내, 애니메이션을 추가하여 사용자에게 긍정적인 커뮤니케이션을 제공하세요. 예를 들어 팔로우가 없는 경우 사용자가 팔로우할 수 있는 블로거를 추천합니다. 로드에 실패하면 사용자가 다시 새로 고칠 수 있도록 "다시 로드" 버튼을 추가할 수 있습니다. 기본 페이지 빈 상태는 빈 데이터에 중요한 값입니다. 실수로 누락되는 경우가 많습니다.

탭 페이지는 메뉴와 탐색 모음으로 이해될 수 있는 탭 페이지를 나타냅니다. 다양한 탭 페이지를 통해 다양한 정보를 모아 하나의 페이지 영역에 저장합니다.

탭 페이지는 상단, 하단, 사이드바로 구분됩니다. 상단 탭은 페이지 공간을 덜 차지하고 슬라이딩 형태로 많은 탭을 수용할 수 있기 때문에 가장 일반적이며 많은 앱과 웹사이트에서 사용됩니다. 상단 탭에는 텍스트 외에도 아이콘 탭도 있습니다. 왼쪽 사이드바 탭과 오른쪽 사이드바 탭이 있으며, 가장 일반적인 것은 왼쪽 사이드바입니다. 콘텐츠를 더 강조하고 싶다면 오른쪽 사이드바를 사용할 수 있습니다. 탭 페이지의 계층 관계는 일반적으로 하단 탭>상단 탭>사이드바 탭입니다. 페이지에 콘텐츠가 너무 많으면 서로 삽입될 수도 있습니다. 예를 들어 상단 탭 페이지에는 보조 왼쪽 사이드바 탭이 있습니다.

모달 팝업창: 사용자의 조작을 방해하는 팝업창입니다. 사용자는 다음 단계로 진행하기 전에 팝업 창의 내용에 응답해야 합니다. 작업 확인 및 중요 정보 알림을 위해 모달 팝업이 필요합니다. 넌모달 팝업창: 사용자의 작업을 방해하지 않는 팝업창입니다. 예를 들어 알림 메시지와 알림판은 비모달입니다(이러한 개념은 아래에서 설명합니다).

하위 주제

버블은 버블과 마찬가지로 작은 팝업 창으로 이해될 수 있습니다. 버블은 다양한 시나리오를 결합한 형태입니다. 일반적인 것으로는 버블 확인 상자, 버블 카드, 버블 가이드 등이 있으며, 이는 가볍고 작으며, 그리고 유연합니다. 버블의 특징은 버블의 출처를 나타내는 작은 화살표가 있고 특정 위치의 메시지를 강조 표시할 수 있다는 것입니다. 그러므로 사용자를 안내할 때 버블 안내를 넉넉하게 활용하면 됩니다. 자주 사용하지 않는 일부 기능이나 바로가기 기능 입구의 경우 숨기고 표시될 때 '버블 카드' 형태로 팝업할 수 있습니다.

팝업 레이어는 반투명 레이어 위에 나타나는 팝업창을 말하며, 팝업 레이어에서 동작할 수 있습니다. 일반적으로 페이지의 특정 영역을 클릭하면 표시됩니다.

작업 표시줄은 페이지 하단에서 팝업되는 하단 목록 팝업 창을 의미하며, 반투명 마스크에 정지되어 있습니다. 해당 페이지로 이동할 필요가 없으며 현재 페이지에서 더 많은 작업을 수행할 수 있습니다.

활성 보기는 하단에서 나타나는 팝업 창을 의미하며, 일반적인 스타일은 아이콘 제목으로, 사용자가 다른 기능에 빠르게 접근할 수 있도록 해줍니다.

토스트 프롬프트, 가벼운 프롬프트는 매우 가벼운 프롬프트입니다. 나타난 후 몇 초 후에 자동으로 사라집니다. 화면의 상단, 중앙, 하단에 나타납니다. 등장 시간이 짧고 면적이 작기 때문에 몇 초 후에 자동으로 사라지기 때문에 너무 많은 텍스트를 추가하거나 중요한 정보를 넣을 수 없습니다. 토스트는 비모달입니다.

양식은 일반적으로 페이지 상단에 표시되는 작은 가로 막대입니다. 상태 프롬프트 및 메시지 알림에 사용할 수 있습니다. 비모달이며 사용자에게 메시지를 표시할 수 있지만 사용자 작업에는 영향을 주지 않습니다.

알림 표시줄은 토스트 메시지보다 무겁습니다. 사용자 작업에 영향을 주지 않기 때문에 팝업 메시지나 버블 메시지보다 가볍습니다. 게시판은 일반적으로 페이지 상단에 위치하지만 페이지 하단에 표시될 수도 있습니다. 자발적으로 사라질 수도 있고 영구적으로 남을 수도 있습니다. 한 페이지에 여러 개의 알림판을 추가할 수도 있습니다.

페이지 하단에 일시 중단된 메시지 알림은 자동으로 사라지거나, 영구적으로 클릭하여 수동으로 사라지게 할 수 있습니다.

Snackbar의 프롬프트 강도는 Toast보다 강력하고 사용자 작업에 영향을 주지 않으며 비모달입니다. 또한 스낵바가 나타날 때 사용자에게 다른 작업을 수행하도록 안내하는 작업 버튼을 추가할 수 있습니다.

위의 토스트와 유사한 HUD-Light 프롬프트.

HUD - 헤드업 디스플레이(Head-up Display)의 정식 명칭은 Head-up Display입니다.

투명 표시 레이어는 페이지에 대화형 작업을 표시하는 표시 레이어를 의미하며, 일반적인 예로는 비디오 시청을 위한 빨리 감기 프롬프트 또는 볼륨 조정 프롬프트가 있습니다.

이는 종종 아이콘, 버튼, 텍스트 또는 기타 요소 위에 마우스를 올리면 사용자가 특정 기능을 이해하는 데 도움이 되는 설명 또는 기능 설명이 표시된다는 의미입니다.

머티리얼 디자인에서는 칩을 보조 칩, 필터 칩, 입력 칩, 제안 칩의 4가지 범주로 나눕니다. 보조 칩: 영화표를 구매한 후 달력에 영화 시간을 추가하는 등 여러 앱에 걸쳐 있을 수 있는 지능적이거나 자동화된 작업입니다. 필터링 칩: 필터링에 사용되며 단일 선택 및 다중 선택에 사용할 수 있습니다. 입력칩 : 사용자가 입력한 정보를 모아놓은 것. 예를 들어 이메일에 수신자를 입력하면 그 뒤에 '×'가 붙는다. 제안 칩: 사용자 의도 범위를 좁히는 데 도움이 되도록 동적으로 생성된 제안입니다.

스테퍼는 증가, 감소 버튼을 통해 수치를 제어하는 ​​구성요소이다. 작은 범위의 정수 수치 입력에 자주 사용되며, 각각의 증감량이 일정합니다.

슬라이딩 선택기는 가로축을 슬라이딩하여 해당 값이나 간격을 선택하는 것을 의미합니다. 가로축에 최소값과 최대값이 표시되어 사용자가 슬라이딩으로 해당 값을 선택할 수 있는 것이 특징이다. 간격 슬라이딩 선택기는 최소값과 최대값을 선택할 수 있다는 의미로, 사용자가 간격 범위를 선택할 수 있도록 하며 가격 선택에 자주 사용됩니다.

플로팅 작업 버튼은 플로팅 버튼입니다. 신규 창작 등 주요 기능 입구에 일반적으로 사용됩니다.

상태 표시줄은 시간, 배터리 및 전화 신호를 표시하는 전화기 화면 상단의 열입니다. 탐색 표시줄은 상태 표시줄 아래 열을 나타냅니다. 탐색 표시줄은 제목만 있는 매우 간단할 수도 있고 검색 상자, 기타 작업 버튼 또는 기능 입구를 포함할 수도 있습니다.

사진이나 카드를 왼쪽이나 오른쪽으로 스와이프할 수 있을 때 위치를 표현하기 위해 표시기를 사용하는 경우가 많습니다. 표시기 스타일에 따라 도트 표시기, 슬라이더 표시기, 라인 표시기, 디지털 표시기가 있습니다.

카드는 정보를 표시하는 방법입니다. 각 카드는 정보 수집을 효과적으로 처리할 수 있을 뿐만 아니라 사용자가 카드의 내용에 효과적으로 집중할 수 있도록 해줍니다. 카드의 효율적인 분할 및 정보 강조 기능은 많은 제품에서 사용되었습니다.

수영 레인은 가로 또는 왼쪽으로 스와이프하여 콘텐츠를 보는 방법을 말합니다. 특정 영역 내에서 여러 요소의 콘텐츠를 가로로 밀어 넣으면 페이지의 가로 공간이 확장됩니다. 일반적으로 수동으로 밀어서 볼 수 있으며 자동 슬라이딩은 없습니다.

배너란 페이지에 나타나는 명백한 배너 이미지를 말하며, 일반적으로 추천 공간, 상품 추천 등의 광고 공간, 광고 공간 등으로 사용됩니다. 스타일에 따라 캡슐 배너, 도자기 영역 배너, 흰색 배경 배너로 나눌 수도 있습니다.

서로 다른 직사각형 블록이 그리드에 배치되어 타일 영역을 형성합니다. 특징은 레이아웃이 매우 유연하여 배너보다 공간을 덜 차지하며, 동일한 공간에서 더 많은 출입구를 수용할 수 있다는 것입니다.

킹콩 영역은 홈 페이지에서 아이콘 텍스트가 궁전 격자무늬로 배열된 영역을 의미합니다. 여러 개의 기능적 출입구를 함께 배치하는 것은 교통 흐름을 전환하는 데 좋은 역할을 하며 기능은 여전히 ​​매우 유연합니다.

배너(Banner), 킹콩(King Kong) 구역, 포슬린(Porcelain) 구역을 3대 운영 구역으로 부르며, 다양한 비즈니스 모듈과 활동으로 트래픽을 유도하는 역할을 합니다.

서랍은 구성 요소가 표시되는 방식에 대한 설명을 의미하며, 서랍처럼 열리고 닫히고, 초과된 내용을 숨기고, 팝업 레이어처럼 나타날 때 팝업됩니다. 자주 사용하지 않는 기능의 경우 기능 입구를 숨기면 사용자가 필요할 때 입구를 클릭한 후 기능 목록을 표시합니다. 탐색 역할을 할 때는 서랍 탐색, 사이드바를 숨기는 오버플로 메뉴, 확장 메뉴, 햄버거 탐색이라고도 합니다.

팰리스 그리드(Palace Grid)는 아이콘 텍스트를 직접 균등하게 배치하는 레이아웃 방식을 말하며, 사용자가 각 독립 모듈 입구를 직접 보고 클릭할 수 있도록 한다. 궁궐 레이아웃을 내비게이션에 사용하는 경우 궁궐내비게이션이라고 할 수 있습니다. 예를 들어 킹콩 지역은 궁궐 내비게이션입니다.

색인 탐색 모음은 콘텐츠를 범주로 구성하고 이니셜이나 숫자를 탐색하는 컨트롤을 의미합니다.

방향타 탐색은 하단 탭의 변형이며 일반적으로 앱 탭바에서 사용됩니다. 앱의 핵심 기능과 사용자가 조작하길 원하는 기능을 중앙에 배치하고 형태를 변경하며 사용자가 클릭하도록 안내합니다.

일반적으로 UGC 커뮤니티에서는 사용자에게 콘텐츠 게시를 안내하기 위해 가장 눈에 띄는 위치에 입구를 배치하고 사용자가 가장 짧은 경로로 게시하도록 안내합니다.

세리프체(Serif Font)란 세리프체인 송체(Song Font)와 같이 문자의 획 모서리에 굴곡이 있는 글꼴을 말한다. 산세리프 글꼴은 세리프 글꼴과 완전히 반대되는 글꼴로 획과 선이 통합되어 있고 모서리가 구불구불하지 않습니다. 예를 들어 Microsoft Yahei는 산세리프 글꼴입니다.

컨테이너 변환은 Material Design에서 나온 애니메이션의 정의입니다. 일반인의 말로는 작은 카드를 기준으로 새 페이지를 확대, 확장하는 것을 말합니다. 예를 들어 Xiaohongshu 홈페이지의 폭포 흐름 카드를 클릭하면 세부 페이지의 동적 효과, 즉 용량 변환이 입력됩니다. 컨테이너 변환은 사용자의 시선을 안내하고 사용 중 좌절감을 줄이고 유창성을 향상시키기 위해 과도기적 방법을 채택합니다.

특정 문맥적 의미를 표현하기 위해 색상을 직접 사용 빨간색과 같은: 경고 노란색: 프롬프트 녹색: 성공 회색: 지원되지 않음 파란색: 링크 색상

아웃 오브 바운드(Content out-of-bound)란 콘텐츠가 프레임 밖으로 넘치도록 하여 분위기를 부각시키고 사진을 더욱 임팩트 있게 만들 수 있는 디자인 방식을 말합니다.

이 개념은 2차원 디자인을 기반으로 입체적으로 끌어올린 머티리얼 디자인(Material Design)에서 따온 것으로 페이지에 깊이감을 주기 위해 Z축 개념을 도입한 것이다. 쉽게 이해하면 계층적 관계이다. 그림자, 오버레이 등을 사용하여 페이지 높이를 반영합니다.

핫스팟은 페이지에서 클릭할 수 있는 영역을 의미합니다. 핫스팟을 클릭하면 대화형 이벤트가 실행됩니다. 예를 들어 개인 홈페이지에 들어가기 위해 아바타를 클릭하면 아바타 영역이 핫스팟이 된다.

핫 영역의 크기 범위는 사용자 경험에도 영향을 미칩니다. 예를 들어 라디오 버튼의 경우 사용자가 빠르게 선택할 수 있도록 핫 영역 범위를 확장하고 아이콘과 텍스트를 핫 영역으로 사용하도록 선택할 수 있습니다.

히트맵이라고도 불리는 히트맵은 페이지에서 사용자가 자주 클릭하는 영역을 특별한 강조 표시 형식으로 표시하는 것을 의미하며, 해당 영역이 밝을수록 더 많은 사용자가 클릭합니다. 히트맵은 페이지에서 사용자의 작업을 매우 직관적으로 표시하므로 페이지의 합리성을 분석하고 페이지 전환율을 향상시키는 데 좋은 지침이 됩니다.