웹 사이트 UI 버튼 디자인 기술 : 10 가지 트렌드 및 팁

/2019-03-22 19:02:40/
Lydiana
/프로그램들/

훌륭한 버튼 디자인은 대부분의 웹 사이트 사용자가 생각하지 못하는 것입니다. 왜냐하면 잘 작동하면 거의 보이지 않기 때문입니다. 최상의 버튼은 클릭하거나 탭하기 쉽고, 분명한 기능을 가지고 있으며, 사용자가 생각없이 디자인과 상호 작용할 수 있도록 도와줍니다.

상당히 간단한 공식이지만 나중에 생각하지 않으면 디자인하기가 어려울 수 있습니다.

현재 우리는 버튼 디자인의 트렌드와 사람들이 반복해서 클릭하는 UI 버튼을 디자인하는 데 도움이되는 몇 가지 팁을 살펴보고 있습니다. 이러한 팁, 트렌드 및 아이디어로 버튼 디자인에 영감을 불어 넣으십시오.

디자인 리소스 살펴보기

1. 단순하게 유지

그것은 모두 디자인 이론 에서이 고전적인 문구로 돌아옵니다. 간결하게 유지하십시오, 바보 (또는 원하는 경우 바보).

웹 사이트 버튼 디자인도 다르지 않습니다. 버튼 디자인이 지나치게 복잡 할 필요는 없습니다. 분명하고 기능적이어야합니다. 때로는 다른 디자인 트렌드가 방해가되어 웹 사이트의 전환에 영향을 줄 수 있습니다.

따라서 버튼 디자인과 관련하여 다음과 같이 생각하고 지나치게 생각하지 마십시오. 버튼은 버튼처럼 보일 것입니다. 그렇게 간단합니다.

2. 많은 대조를 제공하십시오

식별 가능한 버튼을 갖는 것만 큼 중요한 것은 버튼을 쉽게 볼 수 있도록하는 것입니다.

이미지 상단의 고스트 버튼 스타일이 빠르게 트렌드되고 희미 해지는 이유는 버튼을 쉽게 식별 할 수있을만큼 대비가 충분하지 않기 때문입니다. 사용자가 바로 찾을 수 없습니다.

대비가 좋지 않은 버튼을 숨기지 마십시오. 화면의 다른 요소와 차별화되도록 눈에 띄고 소리를 많이냅니다. 숨을 쉴 수 있도록 버튼 주위에 충분한 패딩을 두십시오.

이를 통해 사용자가 버튼을 클릭 가능한 요소로 쉽게 찾고 식별 할 수있을뿐만 아니라 실수로 잘못된 요소를 얻지 않고도 물리적으로 쉽게 클릭 할 수 있습니다.

3. 색상 사용

빨간색 또는 주황색 버튼이 몇 개인 지 알아 본 적이 있습니까? 밝은 색상이 이러한 요소에 눈을 끌고 행동을 장려하기 때문입니다.

색상을 사용하는 것도 꽤 유행 디자인 기술입니다. 밝은 색상에서 간단한 그라디언트가있는 버튼에 이르기까지 색상은 사람들이 디자인과 상호 작용할 수있는 가장 쉬운 방법 중 하나 일 수 있습니다.

4. 기대를 일으키는 현미경 작성

실수하지 마십시오.“여기를 클릭하십시오”라는 단어가있는 버튼. (얼마나 스팸입니까?)

버튼 디자인 내의 현미경은 클릭으로 어떤 일이 일어날 지 분명하게 기대해야합니다. 사용자에게 다음에 무엇을 얻을지 알려주십시오. 데이터를 입력하거나 "자세히 알아보기"링크를 클릭하거나 비디오를 시청하기 위해 "제출"처럼 간단 할 수 있습니다. 동작이 무엇이든 관계없이 현미경으로 사용자에게 알려주십시오.

이 정보는 사용자와의 신뢰를 높이고 사용자가 원하는 액션 / 상호 작용으로 전환을 증가시키는 데 도움이됩니다.

5. 미묘한 애니메이션으로 참여

웹 사이트에서 두 개의 버튼을 나란히 사용하는 버튼 디자인 경향이 있습니다. 하나는 채워지고 하나는 유령 스타일입니다. 둘 다 클릭 가능한 두 가지 선택을 강조하는 호버 애니메이션을 포함합니다.

애니메이션은 버튼에주의를 기울이고 클릭을 유도하는 데 도움이됩니다. 버튼에 호버 애니메이션을 포함시키는 것이 일반적으로 받아 들여지는 사용자 패턴이되었으며 사용자가 참여해야 할 간단한 신호를 제공합니다.

배 밖으로 나가지 마십시오. 소용돌이, 회전, 깜박이는 버튼은 도움이되는 것보다 더 성가시다.

6. 충분히 크게 만들기

버튼에는 지름이 10mm 이상인 클릭 가능한 (탭 가능한) 영역이 포함되어야하며 더 큰 영역은 항상 정상입니다. 이 조언은 터치 장치와 관련하여 손가락 패드 크기를 보이는 MIT Touch Lab의 연구에서 비롯되었습니다.

관점에서 봅시다. 실제 컴퓨터 키보드의 일반적인 키는 15mm x 15mm입니다. 좋은 목표입니다. 작은 화면에서 버튼이 손실되지 않도록 다양한 화면 크기를 고려해야합니다.

더 작은 버튼을 사용해야하는 경우 넓은 클릭 반경을 추가하십시오. 이렇게하면 사용자가 버튼 자체를 놓치면 버튼 주위에 충분한 공간이있어 원하는 작업이 계속 발생합니다. (귀하의 웹 사이트 방문자가 감사합니다.)

7. 익숙한 스타일 사용

모두에게 친숙한 몇 가지 일반적인 버튼 스타일이 있습니다. 그중 하나를 사용하십시오.

내부에 사각형 모서리와 텍스트가있는 사각형으로 채워진 버튼
둥근 모서리와 텍스트가있는 사각형으로 채워진 버튼
그림자가 보이는 사각형으로 채워진 버튼
직사각형 고스트 버튼
지원, 도움말 또는 채팅을 나타 내기 위해 오른쪽 하단에서 가장 일반적으로 사용되는 간단한 원 버튼

8. 예상 위치에 놓으십시오

버튼이 나타나고 예상대로 작동해야 할뿐만 아니라 사용자가 버튼을 찾을 수있는 곳에 위치해야합니다.

홈페이지의 경우 기본 제목 또는 텍스트 블록 아래에 버튼을 배치합니다. 버튼은 일반적으로 텍스트 나 화면 중앙에 정렬되어 있습니다.
양식의 경우 입력 후 버튼이 나타납니다. 일부 단일 입력 양식은 입력 오른쪽의 동일한 행에있는 단추를 정렬합니다.
일반 CTA 버튼은 참조하는 콘텐츠 바로 아래에 나타납니다.
비디오 또는 게임을 재생하거나 시작하는 버튼은 종종 미리보기 화면의 중앙에 있습니다.
쇼핑 카트 또는 전자 상거래 버튼은 일반적으로 오른쪽 상단에 있습니다.

9. 피드백을 잊지 마십시오

버튼이 상호 작용에 응답합니까? 버튼 인터페이스 디자인에 명확한 피드백 루프가 포함되어 있는지 확인하십시오.

버튼이 작업을 수행했음을 시각적 또는 지시적 신호를 제공하십시오. 일부 버튼은 다른 버튼보다 더 많은 작업이 필요합니다. 예를 들어 다른 페이지 나 웹 사이트로 연결되는 버튼은 새 페이지가로드 될 때 버튼이 작동했다는 피드백을 제공합니다. 정보가 올바르게 제출되면 양식 제출 단추가 화면에 "감사합니다"메시지를 표시 할 수 있습니다.