단추에 대한 지침

Applies to Windows and Windows Phone

Windows 앱: 단추 상태

Windows 앱: 단추 상태

Windows Phone 앱: 단추 상태

Windows Phone 앱: 단추 상태

설명

단추(명령 단추라고도 함)를 사용하면 즉각적인 작업을 트리거할 수 있습니다.

표준 단추 컨트롤을 보여 주는 스크린샷

올바른 컨트롤입니까?

단추를 사용하면 양식을 전송하는 등의 즉각적인 작업을 시작할 수 있습니다.

다른 페이지를 탐색하는 작업인 경우에는 단추 대신 링크를 사용합니다. 예외: 마법사 탐색인 경우에는 '뒤로' 및 '다음'이라는 레이블이 붙은 단추를 사용합니다. 역방향 탐색 또는 상위 수준 탐색 등의 경우에는 win-backbutton 스타일의 단추를 사용합니다.

권장 사항 및 금지 사항

  • 단추의 목적과 상태가 사용자에게 명확하게 전달되는지 확인합니다.
  • 단추가 수행하는 작업을 명확히 설명해 주는 간결하고 구체적이며 설명적인 텍스트를 사용합니다. 일반적으로 단추 텍스트 콘텐츠는 한 단어로 된 동사입니다.
  • 예를 들어 단추 텍스트 콘텐츠가 동적인 경우 단추 크기를 조정하는 방법과 주위의 컨트롤이 어떻게 되는지를 고려하세요.
  • 텍스트 콘텐츠가 있는 명령 단추에는 최소 단추 너비를 사용합니다.
  • 좁거나 짧거나 높은 명령 단추를 텍스트 콘텐츠와 함께 사용하지 마세요.
  • 브랜드 지침에 다른 글꼴을 사용하도록 규정되어 있지 않은 경우 기본 글꼴을 사용하세요.
  • 앱 내의 여러 페이지에서 작업을 사용할 수 있어야 하는 경우 단추를 여러 페이지에 복제하는 대신 하단 앱 바를 사용하는 것이 좋습니다.
  • AJAX를 사용하여 폼을 제출하는 경우 제출을 사용하고 폼 제출 기능을 재정의하여 사용자가 폼의 포커스 위치에 관계없이 Enter 키를 눌러 커밋할 수 있도록 합니다.
  • 사용자에게 단추를 한 번에 한두 개(예: 수락 및 취소)만 표시합니다. 사용자에게 더 많은 작업을 표시해야 하는 경우 사용자가 하나의 명령 단추로 작업을 선택하여 트리거할 수 있도록 확인란 또는 라디오 단추를 사용하는 것이 좋습니다.
  • 기본 명령 단추를 사용하여 가장 일반적이거나 권장되는 작업을 나타냅니다.
  • 단추를 사용자 지정하는 것이 좋습니다. 단추의 모양은 기본적으로 사각형이지만 단추의 모양을 구성하는 시각 효과를 사용자 지정할 수 있습니다. 단추의 콘텐츠는 일반적으로 텍스트—(예: 수락 또는 취소)—이지만 텍스트를 아이콘으로 바꾸거나 아이콘과 텍스트를 함께 사용할 수도 있습니다.
  • 사용자가 단추를 조작할 때 단추의 상태와 모양이 변경되어 사용자에게 피드백을 제공하는지 확인합니다. 단추는 보통, 누름, 사용 안 함 상태 중 하나입니다.
  • 사용자가 단추를 탭하거나 누르면 단추의 동작이 트리거됩니다. 일반적으로 사용자가 단추를 놓으면 작업이 트리거되지만 손가락으로 처음 누를 때 트리거하도록 단추 동작을 설정할 수도 있습니다.
  • 상태를 설정하는 데 명령 단추를 사용하지 마세요.
  • 지역화를 위한 경우가 아니면 단추 텍스트를 변경하지 마세요.
  • 기본 제출, 리셋 및 단추 스타일을 바꾸지 마세요.
  • 단추 안에 너무 많은 콘텐츠를 넣지 마세요. 표, 확인란 등 거의 모든 HTML 요소를 포함할 수 있지만 너무 많은 콘텐츠를 넣으면 사용자에게 혼동을 줍니다. 콘텐츠를 간결하고 이해하기 쉽게 유지하세요(그림과 일부 텍스트만 사용).

추가 사용법 지침

올바른 단추 유형 선택(Javascript 및 HTML)

세 가지 유형의 HTML button 컨트롤(submit, reset, button)이 있습니다. 올바른 유형을 선택하려면 다음 지침을 따르세요.

  • Submit

    사용자 입력을 서버로 보내거나 폼 데이터 저장, 다음 앱 페이지로 이동 등의 작업을 수행합니다.

  • Reset

    폼 또는 페이지에서 사용자 입력을 지웁니다.

  • Button

    사용자 지정 명령 또는 작업을 만듭니다.

    폼 내에서 특성이 없는 button은 폼의 첫 번째 button인 경우 submit 역할을 합니다.

관련 항목

디자이너용
단추에 대한 지침
라디오 단추에 대한 지침
토글 스위치에 대한 지침
확인란에 대한 지침
선택 컨트롤에 대한 지침
개발자용(HTML)
button
input type=button
input type=submit
개발자용(XAML)
Button class

 

 

표시:
© 2014 Microsoft