FAB Floating Action Button

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

2. 기능/사용정의
 서비스 전체에서 공통적으로 사용될 수 있는 기능을
호출할 수 있고 화면상에 떠 있는 액션버튼
액션/반응
 디폴트 고정상태에서 사용자의 액션이 가해질 경우
애니메이션 효과가 가미된 머테리얼 시트로 확장
표준크기(Google UX Guideline 기준)
 표준 버튼: 56 X 56dp
 미니 버튼: 40 X 40dp
플로팅 액션버튼
(디폴트 고정상태)

3. 표준 사이즈 플로팅 액션 버튼
 버튼 크기: 56 X 56dp
 버튼 내 Icon 크기: 24 X 24dp

4. 미니 사이즈 플로팅 액션 버튼
 버튼 크기: 40 X 40dp
 버튼 내 Icon 크기: 24 X 24dp

5. 이러지 말자!
 한 화면에는 하나 이상의 플로팅 액션 버튼을 제공하는 것은
지양함

6. 이러지 말자!
 다음과 같이 부정적이며, 추상적이며, 사소해보일 수 있는
버튼은 권장하지 않음
 보관, 휴지통
 구체적이지 못한 액션
 각종 경고 및 에러
 볼륨조절, 글꼴색상 변경 등
 원형을 벗어난 버튼형태는 사용하지 않음
 삼차원 형태를 취하지 않음

7. 이렇게 하자!
 플로팅 액션 버튼은 긍정적인 액션을 위주로
직관적이고 구체적인 의미를 풍겨야 함
 생성, 즐겨찾기, 공유, 탐색 등

8. 화면의 특성에 맞는 버튼 정의
 플로팅 액션 버튼은 탭바와 같이 측면간 이동을
하는 화면에서 서로 다른 기능으로 제공가능
 기존 플로팅 액션 버튼이 사라지고 새로운 플로팅
버튼이 나타나는 것을 사용자가 인지할 수 있도록
애니메이션 효과를 제공해야 함
 화면간 이동 시 플로팅 액션버튼의 위치와 크기는
동일해야 함

9. 툴바로 확장되는 플로팅 액션버튼
 플로팅 액션 버튼은 서비스 공통기능을 호출할 때
툴바 형태로 확장될 수 있음
 확장된 툴바에는 텍스트, 검색필드 또는 사용자의
편의를 높일 수 있는 기능들이 추가될 수 있음
 확장된 툴바는 화면을 상/하단으로 스크롤 시 기존
플로팅 액션 버튼 형태로 복귀함
 확장된 툴바에서 제공되는 기능들은 연관성이 있
어야함

10. 단축 다이얼로 확장되는 플로팅 액션버튼
 플로팅 액션 버튼 터치 시 관련성 높은 기능들이
상단으로 확장될 수 있음
 기능 확장 시 기존 디폴트 고정버튼은 화면 내 같
은 자리에 위치해야 함
 기능 확장 시 기존 디폴트 고정버튼은 확장된 기능
영역을 닫는 기능을 하거나 해당 서비스에서 일반
적으로 사용될 수 있는 기능으로 변경됨

11. 머테리얼 시트로 확장되는 플로팅 액션버튼
 플로팅 액션 버튼 터치 시 단일 머테리얼 시트로
확장될 수 있음
 확장된 머테리얼 시트에는 다양한 액션이 포함될
수 있음

12. 전체화면으로 확장되는 플로팅 액션버튼
 플로팅 액션 버튼 터치 시 화면 전체를 뒤덮는 새
로운 머테리얼 시트를 제공할 수 있음
 화면 전체를 뒤덮는 새로운 머테리얼 시트를 제공
하는 경우 기존 사용자가 화면 위에 또 다른 화면
이 뒤덮힌 다는 것을 인지할 수 있도록 애니메이션
효과를 가미함

13. 이러지 말자!
 제한된 수를 초과하거나 지나치게 제약된 수의 기능을
포함하지 않음
 확장된 머테리얼 시트는 디폴트 고정 플로팅 액션 버튼을
가려서는 안됨
 연관성 없는 기능들을 몰아넣지 않음
 안드로이드에서 흔히 사용되는 “더 보기” 메타포를 사용하지
않음

14. 대화면 사이즈에서의 플로팅 액션 버튼
 플로팅 액션 버튼은 각각의 머테리얼 시트의 경계
에 위치시킴
 한 화면에 하나 이상의 플로팅 액션 버튼을 제공하
지 않음
 플로팅 액션 버튼은 연관성없는 머테리얼 시트에
배치하지 않음

15. 믿거나 말거나!
 플로팅 액션 버튼은 누구에 의해서, 언제부터 사용
되기 시작한 것일까?
 2011년 후반 ~ 2012년도 “Path”라는 소셜 네트워
킹 어플리케이션에서 사용(추측)
 당시 “Path”는 플로팅 액션 버튼, 사이드 메뉴, 타임
라인, 감정 표시하기 등과 같이 획기적인 UI/UX로
화자가 되었으며, 심리학적 근거(신뢰할 수 있는 관
계의 수 50명150명)를 들어 제한된 친구들과의
친밀한 커뮤니케이션에 목적을 둔 서비스로 폐쇄
형 소셜네트워킹 서비스의 참조 모델이었음
 현재 플로팅 액션 버튼은 Android의 UX 가이드라
인에 공식적으로 포함된 항목이며 iOS 뿐만아니라
PC/모바일 웹에서 사용되는 빈도가 높아지고 있음

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