UI 치트 시트 : 버튼

제가 좋아하는 디자인 요소는 버튼입니다. 실제로 사랑의 버튼을 넣습니다. 이 커닝 시트에서는 다양한 종류의 버튼, 상태, 인터렉션을 체험하게 됩니다. 이 스토리에서는 라디오 버튼, 탭, 체크박스 및 기타 유형의 버튼은 무시합니다. 여기에서는 「통상」 버튼만 보겠습니다.

1. 버튼 동작

2. 일반적인 버튼 스타일

3. 버튼 색상 및 스타일링

4. 버튼 상태 및 피드백

5. 버튼 라벨링

6. 터치 대상

7. 버튼 위치

8. 버튼 명예의 전당

9. 나의 생각

---

1. 버튼 동작

이 섹션에서는 버튼의 계층과 버튼의 통신 언어에 대해 설명을 합니다. 버튼의 액션은 외형이 아니라(다만 사용자는 버튼의 의미를 스타일링으로 알 수 있습니다), 사용법에 따라 결정됩니다.

 

1.Call to action (CTA / C2A)

상황에 따라 행동 버튼은 일반적으로 서명/등록/지금 구매 등의 프롬프트를 표시합니다. CTA 버튼은 플랫폼이 사용자에게 해야 할 일을 강하게 시사하는 경우에 사용합니다.

 

CTA 버튼은 둥근 모양의 버튼으로 눈을 크게 뜨는 것을 좋아합니다.

 

 

2.Primary button

가장 중요한 액션에 사용된다. 솔리드 버튼을 사용 항다. 이커머스의 경우 "구매하기", SNS에서는 "공유하기", 핀 태그에서는 "송금하기" 같이 전환과 관련된 액션에 사용된다. 일반적으로 Primary button이라고 명칭을 정한다. (CTA버튼이 여기에 속한다.) 브랜드 색상을 사용하여 버튼 중에서 가장 눈에 띄게 디자인해야 한다. 화면에서 가장 강력한 클릭 유도 문안 Call to action을 강조하기 위해 기본 버튼은 화면 당 하나만 있는 게 좋다. 

*응용 프로그램 헤더 또는 모달 대화 상자 제외

모든 화면에 필수적인 버튼은 아니다.

 

 

 

3.Secondary button

버튼 중 가장 많이 사용하는 버튼이다. 따라서 Default 버튼이라고도 한다. Primary버튼과 같이 사용할 때 사용될 수 있다. 보조 Secondary 버튼은 2개가 될 수 있으며 기본 동작보다 훨씬 적은 시각적 중요성을 할당하므로 기본 버튼보다 눈에 띄거나 주목도를 해치지 않아야 한다. 고스트 버튼이나 아웃라인 버튼 또는 밝은 솔리드 버튼을 사용한다.

저(및 기타 인터넷)는 회선 버튼이나 텍스트 링크를 세컨더리 버튼으로 사용하는 경향이 있습니다.

 

4.Tertiary button

보통 3차 버튼은 다양한 액션에 사용됩니다.액션은 중요하지만 사용자가 현재 실행하려는 액션은 아닐 수 있습니다. 이는 주요한 액션이 아닌 한 ‘친구 추가’ ‘신규 추가’ ‘편집’ ‘삭제’ 등입니다.

일반적으로 말하자면, 더 작거나 덜 두드러지는 버튼 스타일을 사용합니다.

 

---

2. 일반적인 버튼 스타일

이 섹션에서는 일반적인 버튼 스타일에 대해서 설명해 드릴게요. 스타일은 버튼의 미학일 뿐 사용법은 다릅니다.

 

솔리드 버튼

가장 일반적인 버튼의 형태이다. 직 사각형의 컨테이너에 액션을 의미하는 색이 채워져 있고 레이블은 흰색이다. 컨테이너의 모서리는 라운드가 있는 경유가 많다. 배경이 색으로 채워져서 다른 버튼보다 인지가 잘된다. 시각적으로 가장 눈에 띈다. 브랜드 색을 사용하여 Brand Button이라고도 하고 컨테인디드 버튼 Contained Button이라고도 한다. 

 

라인 및 고스트 버튼

아웃라인 버튼은 텍스트 레이블을 아웃라인으로 감싼 구조다. 고스트 버튼보다 중요도가 떨어진 버튼에 사용한다. 레이블은 검은색으로 하고 아웃라인을 회색으로 한 버튼이 일 번 적인 스타일이다. 

고스트 버튼은 하얀색 배경에 버튼 레디블과 아웃라인으로 된 버튼이다. 레이블과 아웃라인의 색은 액션 색으로 채운다. 컨테이너 버튼보다 중요도가 떨어지는 액션에 상용된다. 

라인버튼(왼쪽)과 고스트 버튼 (오른쪽).

 

둥근 버튼

둥근 버튼은 가장자리가 최대 둥근 경계 반경으로 설정된 버튼입니다.

둥근 버튼.

 

FAB (부동 동작 버튼)

플로팅 액션 버튼은 Google의 머티리얼 디자인에서 널리 사용되는 디자인 패턴입니다. 아이콘 버튼처럼 보이지만 실제로는 화면의 기본 동작에 사용됩니다.

FAB 버튼.

 

FAB에 대한 자세한 내용을 보려면 Material Design 사이트에서 'Buttons : floating action button'을 확인하는 것이 좋습니다.

Material Design

 

텍스트 링크

텍스트 링크는 매우 간단한 버튼 유형입니다. 무언가가 링크임을 보여주는 몇 가지 다른 방법이 있습니다. 색상, 밑줄 또는 링크 위치 또는 텍스트 자체 (예 : "더 읽기") 일 수 있습니다.

텍스트 링크의 스타일이 다릅니다.

 

색상과 관련하여 대부분의 사이트는 링크로 가장 잘 식별되므로 파란색을 사용합니다. 클래식 텍스트 링크가 '파란색'인 이유는 무엇입니까? 색상을 선택할 때 접근성이 마음에 들지 않은 것처럼 보이지만 파란색의 멋진 점은 색맹 인 사람들도 여전히 볼 수 있다는 것입니다.

 

 

라벨 버튼이 있는 아이콘

아이콘 버튼의 인기가 높아졌지만 일부 버튼에는 버튼이 올바르게 통신할 수 있도록 레이블이 필요합니다.

아이콘과 레이블이 있는 버튼.

 

아이콘과 레이블을 다룰 때 가장 까다로운 것은 글꼴과 관련하여 아이콘을 얼마나 크게 만들 수 있는지 파악하는 것입니다. 

옵션 1 : 아이콘 크기를 글꼴의 높이와 비슷하게 만듭니다. 

옵션 2 : 아이콘 크기를 선 높이보다 훨씬 크게 만듭니다. 

주의 사항 : 아이콘이 캡 높이보다 조금 더 크면, 균형이 맞지 않거나 실수처럼 보입니다. 대략 같은 캡 높이이거나 훨씬 더 커야 합니다.

 

 

아이콘 버튼

아이콘 버튼에는 레이블이 없으며 아이콘 일뿐입니다. 레이블이 없기 때문에 인터페이스에 많은 공간을 절약합니다. 아이콘 버튼을 사용하면 다른 아이콘 버튼 옆에 작은 공간에 쌓을 수도 있습니다.

다른 스타일의 아이콘 버튼.

주의 사항 : 컴퓨터 활용 능력이 낮은 사람들을 위해 제품을 디자인하는 경우 레이블이 있는 버튼을 사용하는 것이 좋습니다.

 

 

텍스트 링크가 있는 아이콘

일부 텍스트 링크에는 아이콘이 있을 수 있습니다. 이들은 일반적으로 본문 안에 있지 않습니다.

링크 버튼이 있는 다양한 아이콘.

---

3. 버튼 채색 및 스타일링

버튼을 디자인할 때 고려해야 할 몇 가지 요소가 있습니다.

 

색깔

제품을 설계할 때는 항상 장애가 있는 사람들을 생각해야 합니다. 모든 사람이 색상에 액세스 할 수 있도록 온라인 대비 검사기를 사용할 수 있습니다. 이것이 내가 사용하는 것입니다.

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

다른 색상의 버튼.

 

또한 색상 팔레트를 선택할 때 색상 언어를 고려하십시오. 녹색 버튼과 달리 빨간색 버튼이 있으면 콘텍스트 내에서 다른 메시지를 전달할 수 있습니다.

'삭제', '경고 참조', '저장'및 '추가'버튼.

 

예를 들어, 녹색 '삭제'버튼은 빨간색 '저장'버튼과 마찬가지로 혼동을 유발합니다 (Pinterest가 아닌 경우).

 

 

2. 경계 반경

테두리 반경은 버튼에 많은 개성을 부여합니다 (제 생각에는). 날카로운 모서리 버튼이 더 진하게 보이고, 반경이 둥글고 버튼이 더 부드러워 보입니다.

테두리 반경 설정이 다른 버튼.

 

3. 그림자

버튼의 그림자는 버튼이 페이지에 있는 것처럼 느껴지고 자연스럽게 관심을 가져옵니다. 그림자는 또한 다른 상태를 나타내는 데 사용될 수 있습니다. 머티리얼 디자인 은 마우스를 가져가면 버튼이 '더 가까이'오도록 하여 특히 잘 수행됩니다.

Material Design

그림자 설정이 다른 버튼.

 

4. 라벨 스타일링

라벨 스타일은 글꼴로 표시되며 쉽게 읽을 수 있습니다. 글꼴을 선택할 때는 글꼴이 읽기 쉬운 지 확인하십시오.

다른 라벨 스타일의 버튼.

 

다음은 글꼴을 읽을 수 있게 만드는 몇 가지 쉬운 방법입니다.

1. 대문자 나 문장을 선택하십시오. 머티리얼 디자인은 대문자 라벨이 붙은 버튼을 사용합니다.

2. 라벨 색상이 버튼 채우기와 돋보이도록 하십시오. http://accessible-colors.com/을 사용하여 확인할 수 있습니다. 색상이 항상 AAA 요구 사항을 충족하는지 확인하십시오.

3. 서체를 선택할 때 가독성, 보기에 충분히 크고, 무게가 중간 정도인지 확인하십시오.

Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

 

5. 세로 패딩

버튼의 크기 조정은 인터페이스의 접근성에서 큰 역할을 합니다. 경험이 부족한 대부분의 디자이너는 "버튼의 높이는 36 픽셀이어야 합니다"라고 말합니다. 특히 웹용으로 디자인하는 경우가 방법이 최선의 방법이 아닙니다. 항상 사용 중인 글꼴의 행을 늘려서 단위를 추가해야 합니다. 예를 들면 다음과 같습니다. “내 버튼의 레이블의 행 높이는 20px이고 세로 패딩은 8px입니다.

다른 세로 패딩이 있는 버튼.

이것은 두 가지 이유 때문입니다. 1) 시각 장애가 있는 사용자는 브라우저에서 글꼴을 늘릴 수 있으므로 버튼 높이를 자르지 않고 글꼴 크기를 변경해야 합니다. 2) 개발자가 버튼을 만드는 방법입니다. 높이가 아닌 div 컨테이너에 패딩을 추가합니다.

 

 

6. 수평 패딩

가로 패딩에 접근할 수 있는 두 가지 방법이 있습니다.

 

첫 번째 옵션 :
버튼 너비를 그리드에 맞 춥니 다. 모든 버튼의 길이를 일정하게 유지하는 좋은 방법입니다. 그러나 사용할 수 있는 단어 수를 제한합니다.

너비가 격자로 결정되는 버튼입니다.

 

두 번째 옵션 :
측면에 고정 패딩이 있습니다. 또한 일반적으로 작은 버튼을 피하기 위해 버튼의 최소 너비에 대한 절을 추가합니다. 이렇게 하면 다른 양의 텍스트를 사용할 수 있지만 버튼이 매우 고르지 않게 될 수 있습니다.

패딩 및 레이블 길이에 의해 너비가 결정되는 버튼.

---

4. 버튼 상태 및 피드백

버튼 상태는 사용자가 클릭할 수 있는지 또는 클릭했는지 또는 성공적으로 버튼을 클릭했는지 여부를 알려줍니다. 또한 버튼이 겹치는 상태를 가질 수 있음을 명심해야 합니다. 예를 들어 동시에 '활성'및 '호버'가 될 수 있습니다.

 

1. 활성 및 비활성화 상태

활성 상태는 버튼이 '클릭 가능'/ '적용 가능'인 경우입니다. 약간 당연하게 들릴 수 있지만 여기서 주의해야 할 점은 사용자가 필요한 단계를 완료하지 않은 경우 버튼을 비활성화할 수 있다는 것입니다. 예를 들어 사용자가 이름과 이메일 주소를 입력하지 않은 경우 세부 정보를 제출할 수 없습니다.

활성화 및 비활성화된 버튼.

 

2. 호버 및 호버 오프 (마우스 오버 및 마우스 오프)

데스크톱 장치에서 버튼은 클릭 가능하다는 것을 사용자에게 알리기 위해 상태가 달라야 합니다. 또한 애니메이션이 표시되면 사용자가 클릭하도록 권장할 수 있습니다. 일반적으로 '호버 오프'상태는 '호버 온'상태와 반대이지만 반드시 그런 것은 아닙니다. 이전에 버튼 위에 마우스를 놓았다는 것을 나타낼 수 있습니다.

호버를 보여주는 버튼입니다.

팁 : 손가락이나 '호버링'할 수 없으므로 태블릿 및 모바일에서 호버 상태가 표시되지 않습니다. 따라서 앱을 설계하는 경우가 상태에 대해 걱정하지 마십시오.

 

 

3. 초점 Focus

초점 상태는 머리를 감싸기가 약간 혼란스러울 수 있습니다. (어쨌든 나를 위한 것이었습니다.) 설명하는 가장 쉬운 방법은 사용법을 보여주고 거꾸로 작업하는 것입니다.

사용자의 운동 능력이 좋지 않은 경우 탭 탐색을 사용해야 할 수 있습니다. 사용자는 '탐색'을 클릭하여 한 탐색 링크에서 다음 탐색 링크로 사이트를 이동할 수 있습니다. 즉, 버튼을 클릭할 수는 있지만 아직 클릭하지 않았 음을 표시하려면 '초점'상태가 있어야 합니다.

Keyboard-Only Navigation for Improved Accessibility

초점 상태의 다른 예는 입력 필드를 클릭할 때입니다. 입력을 시작하면 다른 입력 필드가 아닌 해당 입력 필드만 채우기 시작합니다.

기본 초점 상태는 의심할 여지없이 인터넷 탐색 중에 볼 수 있는 파란색 '노출'입니다. 운 좋게도, 우리는 우리 자신의 커스텀 버튼 상태를 만들 수 있는 시간에 살고 있습니다. 대부분의 디자이너는 호버 및 포커스 상태에 대해 동일한 시각적 신호를 사용하는 것 같습니다.

'초점'상태의 두 가지 다른 예.

 

4. 눌림

눌림 상태는 사용자의 커서 나 손가락이 버튼을 '누르고 있는'상태입니다. 사용자가 버튼 위에 손가락이나 커서를 놓으면 버튼이 '클릭'으로 등록됩니다.

'눌림'상태를 보여주는 버튼입니다.

 

5. 클릭

버튼은 클릭되었음을 사용자에게 알리기 위해 '클릭된'상태가 필요합니다.

'클릭됨'상태를 보여주는 버튼입니다.

---

5. 버튼 라벨링

버튼 라벨링의 비결은 일관성입니다. 그리고 당신이 나보다 더 나은 사람이라면, 프로젝트의 초기 단계에서 규칙을 결정하는 데 많은 노력을 기울여 나중에 모든 버튼 사본을 힘들게 변경하지 않아도 됩니다.

 

1. 동사 사용

대부분의 버튼에는 버튼의 기능을 나타내는 동사가 포함되어 있습니다 (예 : '저장', '게시', '편집'). '뒤로'와 '다음'은 동사가 아니지만 인터페이스의 맥락에서 그들은 같은 방식으로 작동하는 것과 같습니다. 버튼 레이블을 작성할 때 '동사'+ '명사'구조를 유지하면 좋습니다. 이렇게 하면 '저장', '다음'이 아닌 '게시물 저장', '다음 단계'등과 같이보다 규범적인 행동이 됩니다. 선택은 귀하와 귀하의 사용자에게 달려 있습니다.

 

2. 사례

사용할 서체를 결정해야 합니다. 내가 사용하는 몇 가지 일반적인 지침은 다음과 같습니다.

1. 모든 캡 (예 : '다음 섹션'). 더 전문적인 유형의 플랫폼에 사용합니다. 머티리얼 디자인은 모든 캡이 있는 버튼을 사용합니다.

2. 제목 사례 (예 : '다음 섹션'). 문장을 읽는 것처럼 쉽게 읽을 수 없으므로 제목을 사용하지 않는 경향이 있습니다. 어조로 보면 '전문적'과 '대화 적'사이의 중간이라고 생각합니다.

3. 문장 케이스 (예 : '다음 섹션').문장 케이스일수록 읽기 어렵고 사용을 꺼리기 쉽습니다. 톤에 관해서는 '프로페셔널'과 '대화'의 중간에 있다고 생각합니다.

4. 소문자 (예 : '다음 섹션'). 제목과 마찬가지로 소문자 버튼 레이블을 자주 사용하지는 않습니다. 나는 그것이 가장 '보통인'사례라고 상상할 것이다.

 

 

3. 일관성

버튼 복사를 작성할 때는 일관성을 유지해야 합니다. 다음은 프로젝트 초기에 설정하고 싶은 몇 가지 지침입니다.

1. 단어 수 선택 : 버튼 당 하나 또는 두 개 이상의 단어

2. 대소 문자 선택 : 문장, 대문자 또는 제목, 소문자

3. 라벨 구조 : 예 : '동사'+ '명사'또는 '동사'또는 '동사'+ a + '명사'등

포스트 편집 게시 : 내가 최근에 읽은 버튼 레이블에 적합한 단어를 선택 5 규칙에 의해 UX 운동과 부분에 대해 아주 잘 설명을 했습니다..버튼 라벨링에 대해 자세히 알아보려면 확인하십시오.

UX Movement – Medium

5 Rules for Choosing the Right Words on Button Labels

---

6. 터치 대상

데스크톱 용 버튼 크기 조정 (클릭)

데스크톱의 커서가 터치 스크린의 손가락보다 작기 때문에 버튼을 훨씬 작게 만들 수 있습니다. 하지만 하시겠습니까?

사용자는 버튼을 검색할 필요가 없으므로 인터페이스에 대한 올바른 계층 구조 및 탐색을 수행하는 것은 사용자의 몫입니다.

 

터치 스크린의 버튼 크기 조정 (탭)

MIT Touch Lab의 연구에 따르면 터치 스크린에 사용되는 손가락 부분은 8-10mm이므로 사용자가 실수를  하지 않으려면 최소 대상 크기가 10mm 이상이어야 합니다.

 

그렇다면 어떤 크기의 버튼을 만들어야 합니까? 전문가들은 다음과 같이 말합니다.

머티리얼 디자인 은 터치 대상이 서로 다른 터치 포인트 사이에 8dp 인 48dp x 48dp 여야 한다고 제안합니다. 출처

Touch target size - Android Accessibility Help

iOS 디자인 시스템의 대상 크기에 대한 문서를 찾을 수 없지만 일반적인 대상은 최소 대상 크기가 44 x 44pt라는 것입니다.

크기와 사용 크기로 어려움을 겪고 있다면 Zac Dickerson의 접근성 이야기를 적극 권장합니다.

Size matters! Accessibility and Touch Targets

---

7. 버튼 위치

주요 버튼 위치 토론

2 개의 버튼을 나란히 배치하려면 기본 버튼을 어느 쪽에 놓아야 합니까?

기본 및 보조 작업에 대한 두 가지 다른 위치.

옵션 A는 왼쪽의 기본 버튼을 보여줍니다. 여기서의 주장은 아마도 사용자가 먼저 보고 싶어 하는 것이므로 먼저 보여주십시오.

옵션 B는 오른쪽의 기본 버튼을 보여줍니다. 여기서 논점은 사용자가 계속하기 전에 옵션을 알 수 있도록 보조 버튼을 먼저 볼 수 있기를 원한다는 것입니다. 오른쪽에 있는 항목도 계속을 나타냅니다.

---

8. 명예의 전당

이 섹션은 멋진 디자인 원칙과 시스템을 기념하기 위한 것입니다. 머티리얼 디자인 시스템의 버튼은 그 원리가 실제로 잘 고려되어 있기 때문에 좋아합니다.

 

머티리얼 디자인 시스템 버튼

머티리얼 디자인 버튼 이미지.

머티리얼 디자인 시스템과 버튼에 대한 작업 및 시스템 내 다른 구성 요소와의 상호 작용을 언급하지 않고는 버튼에 대한 대화가 없습니다. 버튼이 사용자와 접촉하는 방식이 부분적으로 좋습니다.

https://material.io/design/components/buttons.html#anatomy 버튼에서 해당 섹션을 확인하십시오.

Material Design

또한 부동 작업 버튼에 대한 작업 팬입니다. 여기에서 확인하십시오 : https://material.io/design/components/buttons-floating-action-button.html

Material Design

---

9. 닫는 생각

버튼이 없는 인터페이스는 실제로 만들 수 없습니다. 그들은 종종 그들이 얻는 것에 더 많은 주의를 기울일 필요가 있습니다.. 시간을 내어 작동 방식과 사용 방법을 이해하여 사용자에게 최고의 경험을 제공하십시오.

스타일링 버튼과 관련하여 어떤 생각이나 트릭이 있으면 알려주십시오!

---

자료출처: https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

UI cheat sheets: buttons