[기획할때 뒤섞이는 Component] 제 2탄. 이전/취소/닫기 버튼

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

이전/취소/닫기 버튼은 확인/완료/저장 버튼과 마찬가지로 화면의 상단 좌측 또는 우측에서 자주 제공하는 버튼입니다. 다른 점이 있다면 안드로이드 폰에서는 ‘이전’ 하드키를 통해 무조건 이전으로 이동할 수 있어서, 아예 제공하지 않을 수 있다는 것이 있겠죠.

 

 

 

그럼 이전/취소/닫기 버튼의 사례를 한번 분석해 보고, 또 한번 저만의 결론을 내려보아야겠습니다~ :)

 

 

 

1. [이전] 버튼

 

 

 

 

 

 

보통 기호 표시나, 버튼 모양 자체를 화살표 메타포를 사용하여 이전 화면으로 이동한다는 것을 보다 직관적으로 보여주고 있네요.

 

아이폰에서는 안드로이드처럼 이전 하드키가 따로 없으므로 필요한 경우, 좌측 상단에 이전 버튼을 제공합니다.

 

또한 그 버튼 레이블이 이전 화면의 제목인 경우가 많습니다.

 

 

 

 

 

 

 

 

 

 

 

 

더블클릭을 하시면 이미지를 수정할 수 있습니다

 

 

 

2. [취소] 버튼

 

 

 

친구선택, 추가, 선택 등 특정 액션을 수행하려는 화면에서 제공됩니다.

 

아이폰에서의 위치는 보통 좌측 상단이며, 레이블은 취소 또는 Cancel 외에는 다른 것이 없을 듯 보입니다.

 

 

 

 

 

아래 아이폰 기본 취소 버튼은 다른 앱과 달리 우측 상단에 제공되고 있는데,

 

아마 너무 쉽게 취소를 해버릴 위험성을 낮추기 위함이 아닐까요?

 

좀더 조사해보아야겠습니다.

 

 

 

 

 

 

3. [닫기] 또는 [X] 버튼

 

닫기버튼은 어쩌면 이전 버튼과 같은 기능을 하는 것 같습니다.

 

현재 제가 기획할 때에는 하위 화면으로 이동한 경우, 좌우로 슬라이드되어 화면이 이동되며 ‘이전’버튼을 통해 다시 이전 화면으로 되돌아 가도록 합니다.

 

그리고 하위가 아닌 추가적 화면 이동이라면, 아래에서 위로 Full 팝업의 형태로 화면이 올라오고, 그 경우에는 ‘이전’버튼이 아닌 ‘닫기’ 버튼으로 기존의 화면으로 되돌아 가게 하죠.

 

이 방법이 정답일 지는 모르겠습니다. 조금 더 공부해 보고 싶네요.

 

그리고 닫기 버튼은 종종 [x] 버튼으로 디자인 되기도 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

[나만의 결론]

 

 

 

1. [이전] 버튼

 

 

  • 아이폰 : 이전 화면으로 되돌아 갈 때 좌측 상단에 제공한더.

 

  • ‘이전’이라는 레이블 대신 이전 화면의 화면명을 레이블로 사용하는 것이 직관적이다.

 

  • 화살표모양의 버튼 모양을 활용하여 보다 직관적으로 d/p한다.

 

  • 안드로이드 : 하드키로 이전 화면으로 이동하는 것이 익숙한 안드로이드 유저에게 굳이 줄 필요 없는 것 같다.

 

 

 

2. [취소] 버튼

 

 

  • 아이폰, 안드로이드에 상관 없이, 어떤 액션을 하려고 들어온 화면에서 액션을 수행하고도, [취소] 버튼을 Tap 함으로써 그 액션이 최종적으로는 적용되지 않는 경우에 사용한다. (페이지에서 사용)

 

  • 해당 화면에서 한번의 Tap으로 액션이 완료될 수 있는 경우 제공한다. (리스트 팝업 등)

 

  • 위치는 아이폰의 경우, [이전] 버튼과 동일하게 좌측상단에 제공하는 것이 좋겠고, 안드로이드의 경우에도 디바이스 기본 컴포넌트와 동일하게 우측 하단에 제공하는 것이 좋을 것 같다.

 

  • 모양은 일반 버튼 모양에 ‘취소’ 레이블을 그대로 제공하면 될 것 같다. [x] 버튼은 [닫기] 버튼으로 제공되어야 하므로, 사용하지 않는다.

 

 

 

3. [닫기] 버튼

 

 

  • 아이폰, 안드로이드에 상관 없이, 아무 액션 수행이 필요없는 조회성 화면이나 팝업에서 제공한다.

 

  • 위치는 아이폰의 경우, [이전] 버튼과 동일하게 좌측상단에 제공하는 것이 좋겠고, 안드로이드의 경우에도 디바이스 기본 컴포넌트와 동일하게 우측 하단에 제공하는 것이 좋을 것 같다.

 

  • 모양은 일반 버튼 모양에 ‘닫기’ 레이블을 그대로 제공해도 좋고. 경우에 따라서는 [x] 버튼을 주어도 되겠다.

 

 

 

 

 

 

 

 

 

 

 

 

 

천 윤서 (29 Posts)


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×