Floating Action Button(플로팅 액션 버튼)

++

기능/사용정의

서비스 전체에서 공통적으로 사용될 수 있는 기능을호출할 수 있고 화면상에 떠 있는 액션버튼

액션/반응

디폴트 고정상태에서 사용자의 액션이 가해질 경우애니메이션 효과가 가미된 머테리얼 시트로 확장

표준크기(Google UX Guideline 기준)

표준 버튼: 56 X 56dp 미니 버튼: 40 X 40dp

플로팅 액션버튼(디폴트 고정상태)

표준 사이즈 플로팅 액션 버튼

버튼 크기: 56 X 56dp 버튼 내 Icon 크기: 24 X 24dp

미니 사이즈 플로팅 액션 버튼

버튼 크기: 40 X 40dp 버튼 내 Icon 크기: 24 X 24dp

이러지 말자!

한 화면에는 하나 이상의 플로팅 액션 버튼을 제공하는 것은지양함

이러지 말자!

다음과 같이 부정적이며, 추상적이며, 사소해보일 수 있는버튼은 권장하지 않음

보관, 휴지통 구체적이지 못한 액션 각종 경고 및 에러 볼륨조절, 글꼴색상 변경 등

원형을 벗어난 버튼형태는 사용하지 않음

삼차원 형태를 취하지 않음

이렇게 하자!

플로팅 액션 버튼은 긍정적인 액션을 위주로직관적이고 구체적인 의미를 풍겨야 함

생성, 즐겨찾기, 공유, 탐색 등

화면의 특성에 맞는 버튼 정의

플로팅 액션 버튼은 탭바와 같이 측면간 이동을하는 화면에서 서로 다른 기능으로 제공가능

기존 플로팅 액션 버튼이 사라지고 새로운 플로팅버튼이 나타나는 것을 사용자가 인지할 수 있도록애니메이션 효과를 제공해야 함

화면간 이동 시 플로팅 액션버튼의 위치와 크기는동일해야 함

툴바로 확장되는 플로팅 액션버튼

플로팅 액션 버튼은 서비스 공통기능을 호출할 때툴바 형태로 확장될 수 있음

확장된 툴바에는 텍스트, 검색필드 또는 사용자의편의를 높일 수 있는 기능들이 추가될 수 있음

확장된 툴바는 화면을 상/하단으로 스크롤 시 기존플로팅 액션 버튼 형태로 복귀함

확장된 툴바에서 제공되는 기능들은 연관성이 있어야함

단축 다이얼로 확장되는 플로팅 액션버튼

플로팅 액션 버튼 터치 시 관련성 높은 기능들이상단으로 확장될 수 있음

기능 확장 시 기존 디폴트 고정버튼은 화면 내 같은 자리에 위치해야 함

기능 확장 시 기존 디폴트 고정버튼은 확장된 기능영역을 닫는 기능을 하거나 해당 서비스에서 일반적으로 사용될 수 있는 기능으로 변경됨

머테리얼 시트로 확장되는 플로팅 액션버튼

플로팅 액션 버튼 터치 시 단일 머테리얼 시트로확장될 수 있음

확장된 머테리얼 시트에는 다양한 액션이 포함될수 있음

전체화면으로 확장되는 플로팅 액션버튼

플로팅 액션 버튼 터치 시 화면 전체를 뒤덮는 새로운 머테리얼 시트를 제공할 수 있음

화면 전체를 뒤덮는 새로운 머테리얼 시트를 제공하는 경우 기존 사용자가 화면 위에 또 다른 화면이 뒤덮힌 다는 것을 인지할 수 있도록 애니메이션효과를 가미함

이러지 말자!

제한된 수를 초과하거나 지나치게 제약된 수의 기능을포함하지 않음

확장된 머테리얼 시트는 디폴트 고정 플로팅 액션 버튼을가려서는 안됨

연관성 없는 기능들을 몰아넣지 않음

안드로이드에서 흔히 사용되는 “더 보기” 메타포를 사용하지않음

대화면 사이즈에서의 플로팅 액션 버튼

플로팅 액션 버튼은 각각의 머테리얼 시트의 경계에 위치시킴

한 화면에 하나 이상의 플로팅 액션 버튼을 제공하지 않음

플로팅 액션 버튼은 연관성없는 머테리얼 시트에배치하지 않음

믿거나 말거나!

플로팅 액션 버튼은 누구에 의해서, 언제부터 사용되기 시작한 것일까?

2011년 후반 ~ 2012년도 “Path”라는 소셜 네트워킹 어플리케이션에서 사용(추측)

당시 “Path”는 플로팅 액션 버튼, 사이드 메뉴, 타임라인, 감정 표시하기 등과 같이 획기적인 UI/UX로화자가 되었으며, 심리학적 근거(신뢰할 수 있는 관계의 수 50명150명)를 들어 제한된 친구들과의친밀한 커뮤니케이션에 목적을 둔 서비스로 폐쇄형 소셜네트워킹 서비스의 참조 모델이었음

현재 플로팅 액션 버튼은 Android의 UX 가이드라인에 공식적으로 포함된 항목이며 iOS 뿐만아니라PC/모바일 웹에서 사용되는 빈도가 높아지고 있음

감사합니다.(참조: Google Developer)