toggle menu

[UI] 슬라이딩 메뉴 디자인

2013. 5. 12. 00:03 Android
최근 슬라이딩 메뉴를 도입한 아이폰/안드로이드 앱이 크게 늘어난 것을 보게 된다.
몇가지 샘플들을 추려봤다.







간단한 아이콘과 함께 정말 단순한 메뉴 기능만을 수행하는 슬라이딩 메뉴 스타일이다.
거의 대부분이 비슷한 형태를 띄고 있다.

일반적으로 슬라이딩 메뉴에 해당하는 부분은 배경이 메인 화면보다 어둡게 처리되고, 그림자 효과를 두는 것이 일반적이다.
이런 효과를 통해 메인 화면이 아닌 부가적인 기능을 수행하고 사라지는 화면임을 인지시킨다.



동일하게 아이콘이 포함된 간단한 메뉴 기능의 슬라이딩 메뉴이지만, 약간의 디자인적 커스터마이징이 가미됐다.
안드로이드의 최근 트렌드에 맞는 배경과 반투명 선택 표시 등을 확인할 수 있다.





1세대에 비해 개선된 슬라이딩 메뉴 디자인.
메뉴 이외에 약간의 기능이 추가되기 시작한 것을 볼 수 있다.
각 메뉴에 해당하는 메시지가 오른편에 숫자로 표시되고, 상단에 검색바가 존재한다.






단순한 메뉴 이외에도 하단에는 공지에 관련된 내용이 출력되고 업데이트 버튼이 존재한다.
슬라이딩 메뉴의 특성을 상당히 잘 활용하기 시작한다.





왼편 슬라이딩 메뉴의 경우 보통 상단에 로그인이나 사용자 관련 정보를 표시해주는 것이 일반적이다.
그리고 하단에는 역시 메뉴가 존재한다.





상당히 발전된 형태의 슬라이딩 메뉴이다. 색상 배치도 훌륭하다!!
메뉴의 기능 뿐 아니라 필요한 정보들도 잘 정돈되어 있다.






많이 알려진 에버노트의 슬라이딩 메뉴.
에버노트의 경우에도 상당히 빠르게 슬라이딩 메뉴를 도입했는데, 주요한 메뉴는 상단에 크게 배치하고, 각 메뉴들에는 숫자로된 정보도 표시되는 등 초기 도입 형태치고는 신경쓴 흔적이 많이 보인다.




일반적으로 오른편에는 검색과 관련된 슬라이딩 메뉴가 많은 편이다. 

Android 관련 포스팅 더보기