버튼 디자인 팁 : 단순하고 작으며 실제로 중요

/2019-02-17 19:36:22/
Brinkley
/제도법/

세부적인 디자인에 대해 이야기합니다. 그럴만한 이유가 있습니다. 아주 작은 세부 사항에도주의를 기울이면 디자인을 만들거나 깨뜨릴 수 있습니다.

오늘 우리는 이러한 세부 사항 중 하나를 자세히 살펴보고 사용자가 클릭하거나 탭하려는 버튼을 디자인하는 방법을 살펴 보겠습니다. 버튼이 디자인에서 가장 작은 요소 중 하나 일지라도 가장 중요한 요소 중 하나입니다. 다른 방법으로 사용자에게 조치를 전달 하시겠습니까? 피드백 루프에서 정보를 제공하는 다른 방법은 무엇입니까?

초기 단계의 평면 디자인에 대한 큰 불만 중 하나를 잠시 생각해보십시오. 사용자는 디자인에서 대화 형이 아닌 것과 무엇이 아닌지 알지 못했습니다. 따라서 훌륭한 버튼 디자인의 중요성.

디자인 리소스 살펴보기

만질 수 있어야합니다

사용자는 디자인에 버튼이 표시되어야하며, 음, 손을 뻗고 터치해야한다고 생각해야합니다. 화면에서 거의 모든 크기 버튼을 클릭 할 수 있지만 터치 장치의 버튼 주위에 크기와 패딩이 중요합니다.

일반 사용자는 손가락 끝 크기가 8-10 밀리미터입니다. 이를 염두에두고 10 x 10 밀리미터의 대상은 터치 장치의 버튼에 대한 훌륭한 시작 대상 크기입니다. 키보드의 표준 키보다 약간 작습니다.

요소를 만질 수 있도록 보이기 위해 할 수있는 몇 가지 디자인 작업이 있습니다.

미묘한 그림자는 배경에서 요소를 "리프팅"하여 사용자에게 조금 더 가깝게 느낄 수 있습니다.
버튼 주위의 패딩이 증가하면 클릭하기 쉬워지고 사용자를 요소로 안내하는 데 도움이됩니다.
컬러 호버 또는 토글 조치는 사용자에게 실시간으로 수행중인 작업을 표시하고 조치를 나타냅니다.

색상 문제

웹 사이트 디자인에서 버튼 색상은 특별해야합니다. 이것은 특정 액센트 색상을 사용하고 버튼 작업에만 사용하기에 좋은 장소입니다.

버튼 색상은 밝고 매력적이어야합니다. 많은 디자인에 노랑, 파랑 또는 녹색 버튼이 포함 된 이유가 있습니다. 그들은 나머지 디자인에서 쉽게보고 눈에.니다. 실제로 눈에 띄는 버튼의 경우 디자인의 기본 색상 (컬러 휠의 반대쪽)과 상보적인 색상을 선택하십시오.

다른 색상 문제는 브랜드입니다. 색상 표 및 브랜드 아이덴티티와 함께 작동하는 버튼 색상을 선택하려고합니다. 디자인에서 버튼 색상이 얼마나 눈에 띄어 야하더라도 기본 색상 구성표와 반대되는 것이 아니라 작동해야합니다.

크기가 더 중요

크게 만드세요!

사용자가 화면에서 즉시 버튼을 볼 수 있도록 버튼에는 약간의 무게가 필요합니다. 고스트 버튼 트렌드 (개별 버튼 색상이없는 아웃 라인)는 픽셀 수 측면에서 큰 버튼에 초점을 맞추지 만 시각적 무게는 부족합니다. 크기 측면에서 버튼은 두 가지 측면에서 커야합니다. (이것이 트렌드가 유행에서 벗어난 이유 중 하나입니다.)

버튼의 크기가 완벽하게 조정되어 부끄럽게 커질 때 까다로운 부분이 있습니다. 정확히 언제 이런 일이 발생하는지는 다른 디자인 요소의 규모에 따라 다르지만 언제 발생하는지 확실히 알 것입니다. 버튼이 디자인에 표시되면 버튼이 너무 클 수 있습니다.

배치가 핵심

디자인에서 버튼이 어디로 가야합니까? 다른 클릭보다 더 많은 클릭을 발생시키는 데 도움이되는 위치가 있습니까?

대부분의 경우 버튼은 보완하도록 디자인 된 내용을 따라야합니다.

양식의 끝에서
클릭 유도 문안 메시지 오른쪽
페이지 또는 화면 하단
메시지 아래에

왜 이러한 게재 위치입니까? 이는 자연스러운 행동 경로와 사용자가 웹 사이트를 읽고 상호 작용하는 방식을 따르기 때문입니다.

대비에 초점

모든 디자인 요소에서 대비는 중요한 고려 사항입니다. 이것은 요소 자체 내에서 사용되는 기술뿐만 아니라 요소와 디자인에서의 배치와 주변 환경 사이의 관계에도 적용됩니다.

이 이중 환경에서 다음 기술을 고려해야합니다.

색깔
유형 무게와 크기
요소의 크기
배경과 관련된 모양
투명도 또는 애니메이션
그림자 또는 graidents
공백과 패딩

표준 모양 사용

버튼에 관해서는 두 가지 모양 만 고려해야합니다.

서클. 원형 버튼은 Material Design 및 Material Lite 개념으로 인해 대중화되었습니다. 비슷한 미학을 가진 둥근 버튼은 디자인과 함께 작동하며 사용자 패턴에 맞습니다.
사각형. 위의 인스턴스에서 원을 사용하지 않는 한이 기본 모양은 모든 버튼에 대한 이동이어야합니다. 사용자가 알고 익숙한 것입니다. 대부분의 버튼 사각형은 키가 2 배 이상 (폭이 3 배 또는 4 배) 인 경향이 있습니다. 사용자는이 형태를보고 무엇을해야하는지 즉시 알 수 있습니다. 일부는 둥근 모서리와 90도 각도의 장점을 주장 할 수 있지만 디자인 스타일에 따라 동일하게 적용됩니다.

사용자에게해야 할 일

모든 버튼에는 버튼으로 무엇을하는지 정확하게 알려주는 텍스트 명령이 포함되어야합니다. 언어를 짧고 단순하게 유지하려면 나머지 웹 사이트 디자인의 색조와 일치해야합니다.

그런 다음 그 약속을 이행하십시오. 다음으로 나타나는 것은 사용자에게 예상 목적지에 도착했음을 알려 주어야합니다. 양식을 제출하든 구매하든 다른 링크로 이동하든 관계없이 사용자는 버튼과 상호 작용하여 원하는 결과를 얻어야합니다. 그렇지 않은 경우 피드백 루프에 오류가 표시되어 웹 사이트 디자인에서 어떤 수정이 필요한지 알 수 있습니다.

버튼 메시지의 예는 다음과 같습니다.

여기를 클릭하십시오
지금 계정을 만드십시오
무료로 사용해보십시오
장바구니에 담기
더 읽어보기

버튼의 시각적 중요성

대부분의 디자인은 작은 UI 요소로 채워져 있습니다. 발생하는 한 가지 함정은 프로젝트가 거의 완료 될 때까지 이러한 요소의 디자인이 적용되는 것입니다. 그런 다음 약간의 차이를 제외하고 모든 UI 요소에 대해 하나의 디자인을 선택합니다.

이 위험한 상황에 갇히지 마십시오.

디자인에서 버튼은 버튼처럼 보일 것입니다 ! 디자인의 다른 어떤 것도 버튼과 모양, 색상 및 시각적 무게가 같아서는 안됩니다. 그들은 달라야합니다. 디자인에서 다른 유사한 요소보다 큰 버튼의 스타일을 만들거나 버튼 전용의 강조 색상을 사용하는 것을 고려하십시오. 이러한 기술은 버튼을 특별하게 보이고 사용법을 강조하는 데 도움이됩니다.