버튼은 모든 인터페이스에서 찾을 수 있는 요소로 사용자가 조치를 취하고 선택을 할 수 있게 해준다.
그들이 볼 수 있는 것처럼 간단하게 잘 설계된 버튼을 전달하기 위해 따라야 할 규칙이 있다.
이 글에서는 잘 디자인된 버튼을 위해 따라야 할 기본 규칙을 설명할 것이다.
버튼 유형(Buttons Types)
일반적으로 모든 인터페이스에는 사용자 경험을 향상시키기 위해 하나 이상의 버튼 유형이 포함되어 있다. 버튼 유형은 사용자가 중요성과 그 사이의 차이를 만드는 데 도움을 주며, 다른 버튼 유형은 덜 관심을 끌 수 있다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*nDs7ngPQuxrJfkQoxpB-9g.png?w=1290&ssl=1)
버튼 해부학(Buttons Anatomy)
버튼 디자인을 시작하기 전에 해부학을 이해해야 한다. 해부학은 사용자의 언어에 따라 구조를 따르는 것이 좋지만 영어가 왼쪽에서 오른쪽으로 작성되므로 아이콘이 먼저 나오고 텍스트가 온다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*_lvqW-cTvtlb8r7B1rkc7Q.png?w=1290&ssl=1)
버튼 크기(Button size)
여기에 있는 아이디어는 버튼을 모바일 사용자에게 손가락 친화적으로 만들고 PC에서 클릭할 수 있게 하는 것이다. 이 경우 항상 버튼을 누르고 그 근처에 있는 버튼을 눌러야 한다. 여기서 우리는 잘못 설계된 버튼을 직면하고 있다.
또한 버튼이 클수록 우선순위가 높아진다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*JvZxGm_ORw6-QFQXi4YU4A.png?w=1290&ssl=1)
색상 및 대비(Color & Contrast)
다른 색상의 버튼은 부트스트랩에서 왔으며 요즘에는 주로 기본 및 보조 버튼을 사용하므로 다른 색상을 사용할 필요가 없지만 버튼의 메시지가 색상을 사용하는 인터페이스보다 더 중요한 대시보드 또는 인터페이스와 같은 인터페이스에서는 문제가 없다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*TEyD3oAwoZ70YePycXLyOg.png?w=1290&ssl=1)
너비와 안쪽 여백(Width and Padding)
이것에 대한 규칙이나 완벽한 숫자는 없지만 이 예를 보면 비율에 대한 아이디어를 얻을 수 있다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*LnBfyerUltOeYH-majiiRA.png?w=1290&ssl=1)
버튼 간격(Button spacing)
버튼 간격은 특히 휴대 기기에서 특히 중요하다. 이 연구에 따르면, 고령자를 위한 터치스크린 사용자 인터페이스: 버튼 크기 및 간격 버튼이 너무 멀리 떨어져 있으면 사용자가 터치 대상으로 이동하는 속도가 훨씬 느려진다. 또한 버튼이 너무 가까웠을 때 사용자가 터치 정확도가 가장 낮다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*u55-9zHPPBIdIoTfVmxvnQ.png?w=1290&ssl=1)
버튼 상태(Button States)
상태는 구성 요소의 상태를 통신하는 데 사용된다. 잘 설계된 버튼은 사용자가 상호 작용할 때 상태를 변경해야 한다. 잘못 설계된 버튼은 잘못된 동작을 오도할 수 있으며, 예를 들어 필드가 버튼처럼 설계된 경우 다른 동작으로 착각할 수도 있다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*sO7narl3e1M4NJLHFIJFZQ.png?w=1290&ssl=1)
게재 위치 및 주문(Placement & Order)
일반적으로 버튼은 중요한 순서대로 배치된다. 게다가, 이 글의 좋은 예가 로그인 폼이다. 로그인 버튼이 가장 주목을 받고 나서, 덜 중요한 액션에 일반적으로 사용되는 텍스트 버튼이 있다.
![](https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*iSkrMZ3UEP-E5XJxTr6DRA.png?w=1290&ssl=1)