Basic Types of Buttons in Web and Mobile User Interfaces

버튼은 사용자 인터페이스에서 가장 인기 있는 대화형 요소 중 하나입니다. 뿐만 아니라 견고한 상호 작용과 긍정적인 사용자 경험을 만드는 데 매우 중요합니다. UI/UX 용어집 게시물을 계속하면서 웹사이트와 모바일 앱에서 매일 볼 수 있는 널리 사용되는 버튼 유형에 대한 정의와 예를 수집했습니다. 버튼은 사용자 인터페이스에서 가장 인기 있는 대화형 요소 중 하나입니다. 뿐만 아니라 견고한 상호 작용과 긍정적인 사용자 경험을 만드는 데 매우 중요합니다. 오늘은 UI/UX 용어집 게시물을 계속하면서 웹사이트와 모바일 앱에서 매일 볼 수 있는 널리 사용되는 버튼 유형에 대한 정의와 예를 수집했습니다. 버튼이란 무엇입니까? 버튼은 특정 명령에 따라 시스템에서 예상되는 대화형 피드백을 얻을 수 있는 대화형 요소입니다. 기본적으로 버튼은 사용자가 디지털 제품과 직접 통신하고 특정 목표를 달성하기 위해 필요한 명령을 보낼 수 있도록 하는 컨트롤입니다. 예를 들어, 이메일을 보내고, 제품을 구매하고, 일부 데이터나 콘텐츠를 다운로드하고, 플레이어를 켜고, 기타 가능한 작업을 많이 할 수 있습니다. 버튼이 인기 있고 사용자에게 친숙한 이유 중 하나는 버튼이 물리적 세계에서 개체와의 상호 작용을 효율적으로 모방하기 때문입니다. 최신 UI 버튼은 정말 다양하고 다양한 용도로 사용할 수 있습니다. 대화형 영역을 나타내는 일반적이고 자주 사용되는 버튼은 일반적으로 가시성을 위해 명확하게 표시되고 특정 기하학적 모양을 가지며 이 버튼을 통해 수행될 작업을 설명하는 사본으로 지원되는 경우가 많습니다. 디자이너는 일반적인 스타일 개념에 자연스럽게 통합되지만 레이아웃에서 눈에 띄기에 충분히 대비되는 효과적이고 눈에 띄는 버튼을 만들기 위해 상당한 시간과 노력을 기울여야 합니다. UI 탐색 모바일과 웹 인터페이스에서 많이 사용되는 버튼의 종류를 알아보자. CTA 버튼 클릭 유도문안(CTA) 버튼 은 사용자가 특정 조치를 취하도록 유도하기 위한 사용자 인터페이스의 대화형 요소입니다. 이 작업은 특정 페이지 또는 화면(예: 구매, 연락처, 구독 등)에 대한 전환 을 나타냅니다. 즉, 수동 사용자를 활성 사용자로 전환합니다. 따라서 기술적으로 클릭 유도문안 텍스트로 지원되는 모든 유형의 버튼이 될 수 있습니다. 페이지나 화면의 다른 모든 버튼과 차별화되는 점은 매력적인 특성입니다. 주의를 끌고 사용자가 필요한 작업을 수행하도록 자극해야 합니다. uMake 웹 사이트 기능 의 홈 페이지 는 헤더와 영웅 섹션에서 동일한 스타일을 반영하는 대비 CTA 버튼을 즉시 알아차렸습니다 . 요트 고용 사이트 는 밝은 색상 대비 를 사용 하여 CTA 버튼 을 바로 알아차리도록 하고 부드러운 웹 애니메이션 으로 효과 를 증폭 시킵니다 . 어린이 웹사이트를 위한 책 다음 은 어린이용 도서를 판매 하는 전자상거래 웹사이트 의 홈페이지입니다. 추천 슬라이드에는 페이지의 목표로 설정된 한 가지 핵심 작업이 있습니다. 사용자가 메일링 리스트 공유에 가입하도록 하는 것입니다. 따라서 버튼은 레이아웃에서 가장 눈에 띄는 요소 중 하나로 설계되어 사용자가 하고자 하는 즉시 어떻게 해야 하는지 알 수 있습니다. 텍스트 버튼 여기에서 용어는 투명합니다. 텍스트 조각과 함께 제공되는 버튼입니다. 이는 사본이 어떤 모양, 채워진 탭 또는 이와 유사한 것과 통합되지 않음을 의미합니다. 따라서 물리적 세계에서 이 현상에 대한 우리의 표준 이해에서는 단추처럼 보이지 않습니다. 복사본은 유일한 시각적 발표자입니다. 그래도 사용자가 인터페이스와 상호 작용할 수 있는 라이브 컨트롤입니다. 색상으로 표시되거나 밑줄이 그어진 버튼을 볼 수도 있습니다. 또한 웹사이트 헤더 에 사용된 텍스트 버튼은 웹사이트의 핵심 콘텐츠 섹션과 사용자를 연결합니다. 이 경우 헤더 영역의 모든(또는 대부분) 요소가 기본적으로 대화형이므로 어떻게든 표시되지 않습니다. 텍스트 버튼은 일반적으로 기본 컨트롤이나 CTA 요소를 방해하지 않고 보조 대화형 영역을 만드는 데 사용됩니다. fashion_store_website_design_tubik 다음은 패션 매장을 위한 우아한 웹사이트 디자인입니다. 보시다시피 레이아웃의 대화형 부분은 텍스트 버튼을 기반으로 합니다. 주요 CTA 요소만 쉽게 디코딩되는 버튼으로 표시됩니다. 다른 모든 기능은 제안에 대한 헤더와 탭 모두에서 복사만 가능합니다. 이러한 접근 방식은 웹 페이지의 일반적이고 최소한의 스타일 을 지원합니다. 네온 사인을 판매하는 전자 상거래 웹사이트 에 대한 이 제품 페이지 는 헤더에 텍스트 버튼 세트를 제공하여 실제 버튼에 밑줄을 표시합니다. 텍스트 버튼을 사용하는 한 가지 더 효과적인 방법은 달걀 제품을 판매하는 전자 상거래 웹사이트 에 소개된 것과 같은 다양한 대화형 메뉴 입니다. 드롭다운 버튼 드롭다운 버튼을 클릭하면 상호 배타적인 항목의 드롭다운 목록이 표시됩니다. 설정 버튼에서 이러한 유형을 자주 볼 수 있습니다. 사용자가 목록에서 옵션 중 하나를 선택하면 일반적으로 예를 들어 색상으로 활성으로 표시됩니다. health-care-app-interactions-tubik-studio HealthCare 앱 상호 작용 흐름은 의사가 특정 청구서에 추가할 수 있는 세부 정보 목록을 여는 버튼을 보여줍니다. 버튼을 클릭하면 옵션의 드롭다운 목록이 열립니다. 하나를 선택하면 큰 버튼이 사라지고 옵션이 선택된 상태에서 작은 더하기 버튼이 목록을 다시 한 번 확인하고 싶을 때를 대비하여 사라집니다. 햄버거 버튼 메뉴를 숨기는 버튼입니다. 클릭하거나 탭하면 메뉴가 확장됩니다. 이런 종류의 메뉴(및 버튼)는 일반적인 빵-고기-빵 햄버거처럼 보이는 세 개의 수평선으로 이루어진 형태 때문에 그런 이름을 얻었습니다. 오늘날 웹 및 모바일 레이아웃 에서 널리 사용되는 대화형 요소 입니다. 여전히 장단점에 대한 논쟁은 뜨겁습니다. 정기적으로 다양한 웹사이트를 방문하는 활동적인 인터넷 서퍼는 기본적으로 이 버튼이 웹사이트 콘텐츠의 다양한 범주를 숨긴다는 것을 알고 있으므로 이 트릭에는 추가 설명과 프롬프트가 필요하지 않습니다. 좋은 점은 햄버거 메뉴가 공간을 확보하여 인터페이스를 더 미니멀하고 통풍이 잘되게 만드는 것입니다. 기능 면에서 다른 중요한 레이아웃 요소를 위한 공간을 많이 절약합니다. 탐색 요소를 숨기고 인터페이스를 다른 장치에서 조화롭게 보이게 하는 반응형 및 적응형 디자인에 대한 추가 이점을 언급할 수 있습니다. 햄버거 메뉴에 반대하는 주장은 이 디자인 요소가 웹사이트를 정기적으로 사용하지 않는 사람들에게 혼란을 줄 수 있고 높은 수준의 추상화를 특징으로 하는 간판에 의해 오도될 수 있다는 사실에 근거합니다. 탐색에 부정적인 영향을 미칠 수 있으며 좋지 않은 사용자 경험의 원인이 될 수 있습니다. 따라서 햄버거 버튼의 적용 여부는 사용자 조사 및 대상 고객의 능력 및 요구 사항을 정의한 후에 내려야 합니다. 햄버거 메뉴는 여전히 현대 웹 및 앱 디자인의 논쟁적인 문제에 속하지만 자주 사용됩니다. 다음은 햄버거 메뉴의 기능을 사용하는 웹사이트의 예입니다. 인상적인 비주얼 과 핵심 정보 에 사용자의 주의를 집중시키기 위해 확장된 옵션 메뉴를 숨길 수 있습니다 . 플러스 버튼 클릭하거나 탭하면 더하기 버튼을 사용하여 사용자가 시스템에 새 콘텐츠를 추가할 수 있습니다. 앱 유형에 따라 새 게시물, 연락처, 위치, 메모, 목록의 항목 등 디지털 제품의 기본 작업이 될 수 있습니다. 때로는 이 버튼을 탭하여 사용자가 콘텐츠 생성의 모달 창으로 직접 전송되는 경우도 있습니다. 다른 경우에는 선택하고 콘텐츠를 추가하는 데 집중할 수 있는 추가 옵션이 제공되는 중간 단계도 있습니다. 작업 관리자 모바일 응용 프로그램 tubik 작업 관리자 앱 인터페이스에는 화면 오른쪽 하단에 더하기 버튼이 있어 액세스하고 사용하기 쉽습니다 . 이벤트 앱 디자인 tubik 이벤트 앱 은 화면 상단에 더하기 버튼 이 있고 새로운 이벤트 생성 화면이 열립니다. 소모성 버튼 이 버튼은 클릭하거나 탭한 후 다양한 옵션을 엽니다. 화면에 과부하가 걸리지 않고 상호 작용의 적절한 흐름을 설정하는 또 하나의 방법입니다. 이는 화면 공간이 제한된 모바일 인터페이스에 특히 중요합니다. 다음은 Habit Builder 응용 프로그램 에서 확장 가능한 버튼이 작동하는 방식입니다. 이를 통해 사용자는 추적할 새로운 습관을 만들고 조정할 수 있습니다. 재무 관리 애플리케이션 에서 소모성 버튼은 상단에 있으며 캘린더 스트라이프에 통합되어 있습니다. 여행 플래너 앱 UI_tubik 여행 플래너 애플리케이션은 다음과 같습니다. 탭 표시줄의 중앙 대화형 요소는 사용자가 특정 여행에 새 여행이나 새 항목을 추가할 수 있는 더하기 버튼입니다. 경험을 단순화하기 위해 버튼은 특정 유형의 콘텐츠를 표시하는 버튼 세트로 확장되어 사용자가 시작 시 선택하고 필요한 화면에 도달할 수 있습니다. 공유 버튼 소셜 네트워크, 채팅 및 이메일 전송의 인기가 높아짐에 따라 이러한 버튼은 앱 또는 웹사이트 콘텐츠를 사용자의 소셜 프로필에 연결하는 프로세스를 단순화합니다. 이 유형의 버튼을 사용하면 사용자가 콘텐츠 또는 성과를 소셜 네트워킹 계정에 직접 공유할 수 있습니다. 연결을 명확하게 하기 위해 특정 소셜 네트워크의 브랜드 기호가 있고 쉽게 알아볼 수 있는 아이콘이 제공됩니다. 공유가 페이지의 사용자에게 기대되는 주요 작업이 아닌 경우에는 버튼으로 표시되지 않는 경우가 많습니다(추가 모양, 색상 표시, 밑줄 등). 아이콘만 볼 수 있지만 인터렉티브. 이러한 접근 방식은 미니멀리즘과 부정적인 공간 의 효과적인 사용을 지원합니다.. 또한 사용자는 주요 기능에 집중할 수 있지만 항상 소셜 프로필에 빠르게 액세스할 수 있는 신호를 볼 수 있습니다. credentially 블로그 디자인 tubik 스튜디오 Credentially 웹사이트 의 블로그 페이지 에는 화면 오른쪽에 수직으로 배열된 공유 버튼이 있습니다. 고스트 버튼 고스트 버튼은 비어 있는 투명 버튼입니다. 그래서 "빈", "빈" 또는 "벌거벗은"이라고도 합니다. 버튼으로 시각적인 인식 가능성은 일반적으로 버튼 사본 주위에 아주 가는 선으로 둘러싸인 모양으로 제공됩니다. 이러한 종류의 버튼은 여러 CTA 요소가 있는 경우 시각적 계층 구조를 설정하는 데 도움이 됩니다. 핵심 CTA는 채워진 버튼에 표시되고 보조(여전히 활성) 버튼은 고스트 버튼에 표시됩니다. 레스토랑 앱 UI 카피 라이팅 tubik 다음은 레스토랑 앱 의 가입 화면입니다 . 여기에는 세 가지 유형의 버튼이 있습니다. 고스트 버튼은 덜 인기 있는 옵션에 대한 액세스를 제공합니다. 텍스트 버튼은 질문에 대한 답변으로 다음 줄에 통합되고 색상으로 표시됩니다. 이러한 접근 방식은 화면에 있는 버튼의 견고한 시각적 계층 구조 를 구축하는 데 도움이 됩니다. 플로팅 액션 버튼(FAB) 머티리얼 디자인 에서 플로팅 액션 버튼(줄여서 FAB)은 앱 화면에서 기본 액션을 나타내는 버튼입니다. 일반적으로 다른 페이지 콘텐츠 위에 있는 둥근 아이콘 버튼입니다. 이 버튼을 사용하면 일반적으로 사용자가 앱에서 수행하는 필수 또는 인기 있는 작업에 즉시 액세스할 수 있습니다. 모바일 애플리케이션의 디자인 및 정보 아키텍처에 따라 FAB는 다음을 수행할 수 있습니다. 일반적인 핵심 작업 수행(새 이메일 화면 열기, 사진 또는 동영상 콘텐츠 추가 화면 열기, 갤러리에서 필요한 콘텐츠 검색 등) 추가 작업 표시 다른 UI 요소로 변환합니다. 화면에서 FAB의 위치는 일반적으로 시인성이 높다는 요인에 의해 결정되며 앱 화면의 일반적인 디자인 컨셉에 따라 달라질 수 있습니다. 경험의 법칙은 집중력 저하를 피하기 위해 화면당 하나의 FAB만 사용하는 것입니다. updated_material_design_concept_ui_tubik 아래는 하단 앱바, 겹치는 FAB, 짜여진 이미지 목록을 적용한 여행자일기 상호작용의 흐름입니다. 효과적인 버튼 디자인의 요소 크기. 크기는 사용자에게 레이아웃 요소의 중요성을 알리고 구성 요소의 계층 구조를 구축하는 핵심 방법 중 하나입니다. 매력적이고 효율적인 클릭 유도문안 버튼은 빨리 찾을 수 있을 만큼 커야 하지만 레이아웃 구조가 손상되지 않도록 너무 크지 않아야 합니다. 시장 리더는 종종 지침에서 적절한 버튼 크기에 대한 권장 사항을 제공합니다. 예를 들어 Apple은 모바일 UI의 CTA가 최소 44×44픽셀이어야 한다고 말하고 Microsoft는 34×26픽셀을 권장합니다. 모바일용으로 디자인하는 경우 다양한 버튼 유형에 대한 요구 사항이 매우 엄격할 수 있으므로 가이드라인을 철저히 연구하여 잘못된 UI 디자인으로 인한 앱 거부 위험을 최소화하십시오. 색상 . 일부 버튼은 쉽게 눈에 띄고 일부는 보조 버튼으로 만들려면 적절한 색상을 선택하는 것이 중요합니다 . 문제는 인간의 기분과 행동은 시각적 환경과 밀접한 관련이 있으며 색상은 이러한 측면에서 가장 강력한 도구 중 하나라는 것입니다. CTA의 색상을 선택할 때 염두에 두는 것이 중요합니다. 버튼과 배경 색상은 다른 UI 구성 요소와 빠르게 구별되도록 대비가 잘 되어야 합니다. 모양 . CTA 버튼은 종종 가로 직사각형처럼 보입니다. 그 이유는 이 버튼이 클릭 가능하고 대화형이라는 것을 분명히 하고 사람들이 이 모양을 버튼으로 인식하는 데 익숙하기 때문입니다. 또한 CTA는 버튼의 안쪽을 가리키고 있어 카피가 시선을 끌기 때문에 모서리가 둥근 형태로 디자인하는 것이 좋습니다. 물론, 이는 웹페이지나 모바일 앱 화면에서 선택한 일반적인 문체 개념과 모양이 조화롭게 조화를 이루는 경우에 결정됩니다. 놓기. 버튼의 배치는 견고한 시각적 계층 구조와 명확한 탐색 을 구축하는 데 중요합니다 . 사용자의 눈에 잘 띄지 않는 영역에 위치하면 색상 및 크기와 같은 다른 시각적 측면이 효율적으로 작동하지 않을 수 있습니다. 디자이너는 가장 스캔 가능한 영역 을 학습 하고 핵심 기능의 버튼을 사용자의 경로에 배치해야 합니다. 복사 . 강력한 버튼 마이크로카피는 일반적으로 짧지만 일관성이 있어 사용자의 주의를 빠르게 끌 수 있습니다. 레이아웃에서 사본을 더욱 매력적으로 만들기 위해 종종 대문자로 수행됩니다. 그래도 그럴 필요는 없고, 전체적인 디자인 컨셉, 타이포그래피 , 문자 메시지의 분위기에 따라 결정됩니다. 다음 은 유치원 방문 페이지 디자인 입니다. 페이지에 사용된 모든 버튼을 검토해 보겠습니다. 방문자를 참여하도록 초대 하는 핵심 CTA 버튼 은 즉시 눈에 띕니다. 디자이너는 배경과 대조되는 색상의 둥근 직사각형 채워진 버튼을 사용했지만 페이지에서 가장 눈에 띄는 시각적 요소인 애니메이션 영웅 이미지 에 대한 시각적 연결을 설정했습니다. CTA 텍스트는 모두 대문자로 된 읽기 쉬운 글꼴로 제공됩니다. 헤더에는 사용자를 웹사이트의 중요한 콘텐츠 섹션으로 연결하는 4개의 텍스트 버튼 이 있습니다. 헤더의 왼쪽 부분에는 빠르게 스캔되고 이미 등록된 사용자가 계정을 입력할 수 있도록 하는 보조 CTA 버튼 이 있습니다. 공유 버튼 은 동그란 모양으로 배치되어 있지만 색상 대비가 너무 과하지 않아 쉽게 찾을 수 있지만 기본 CTA에서 사용자가 주의를 분산시키지 않습니다. 분명히 UI 디자인 예제에서 논의하고 확인해야 할 버튼 유형이 더 많습니다. 따라서 다음 게시물에서 검토를 계속할 것이며 업데이트를 놓치지 마십시오.