블로그 이미지
엡뽀
피난(?) 오신걸 환영합니다.

calendar

1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Notice

2012. 11. 29. 13:54 Programing/Android

안녕하세요. 블로거 엡뽀라고 합니다.


지난번엔 안드로이드 래퍼런스 싸이트에 올라와있는 디자인 가이드라인을 번역하여
포스팅을 하였었는데요. 하지만 이런 가이드라인 만으로는 너무 뜬구름 잡기가 되버릴 수 있겠죠.
그리하여 이번 포스팅은 실제 Android UI를 구성해보고 디자인을 직접해볼려 합니다.


자 그럼, UI를 새로 구성해야하는데, 이때 도움을 받을 수 있는 유용한 App을 소개 하고자 합니다. 그 이름 하여
Android UI Pattern App. 말 그대로 안드로이드 UI 패턴들을 소개 하고있는 앱입니다. 

   Andrid UI Pattern App

(구글 플레이 : https://play.google.com/store/apps/details?id=com.groidify.uipatterns 혹은 마켓 검색 창에 Anroid UI Pattern 이라고 검색하시면 나옵니다.)

이 이후 Android UI pattern App을 "패턴앱" 이라 호칭하겠습니다.


패턴앱에서 소개 되고있는 UI 종류도 다양한데, Anction Bar & DashBoard, View pager & Tabbar, ListView, Map, 등등
오늘 제가 해볼 View는 ViewPagaer로 2개의 탭을 만든후에, 하나의 탭에서는 ListView가 나타나고, 또다른 뷰에서는 기본 View들을 보여주는 탭을 구성 해 볼까 합니다.

P.S 패턴앱에서 소개 되고있는 UI들은 오픈 소스로 사용하는데 지장이 없다고 하더군요. (안드로이드 만쉐이)


패턴앱 메인 화면

android-viewflow

android-pulltorefresh



UI 구성은 2개의 뷰(리스트뷰와 기본View)와 탭컨트롤러가 되는데요. 기본 View를 다 만든 후에 리스트뷰를 만들고 다 만들어진 후에 탭을 구성하는 방식으로 하겠습니다. 또한 기본 View는 저번 포스팅을 복습하는 차원에서 Metrics and Grids 가이드라인에서 나온 예제를 만들도록 하겠습니다. 


Example 



하지만 이번에도 역시나 기본 view , 리스트 뷰 만들기와 ViewPagaer 만들기는 다음 포스팅에서 하도록 하겠습니다.





posted by 엡뽀
2012. 11. 28. 18:33 Programing/Android


Design::Patterns > Gestures (원본 : Android Developer)


Gestures


제스쳐는 당신이 제공한 화면객체를 조작하여 당신의 앱과 상호작용 할 수 있습니다.  다음 표는 안드로이드에서 지원되는 핵심 동작 집합을 보여줍니다.



Touch

선택된 항목의 기본 기능을 동작 시킵니다. 

Action

누르기, 떼기







Long press

데이터 선택 모드로 들어갑니다. 당신이 뷰에서 하나 또는 여러 아이템을 선택 하거나 Action Bar를 이용하여 데이터에 따라 행동 할 수 있도록 합니다. long press를 이용하여 Context Menu가 보이지 않도록 방지하십시요.  

Action

누르기, 기다리기, 떼기


Swipe

내용이 넘치는 view를 스크롤 하거나, 동인한 계층 구조를 가지는 뷰들을 이동합니다.

Action

누르기, 움직이기, 떼기






Drag

데이터를 뷰에서 다시 재배열 하거나, 데이터를 컨테이너 안으로 이동. (예. 홈스크린에서의 폴더)

Action

누르기, 기다리기, 움직이기, 떼기


Double touch

내용 확대. 텍스트 선택을 위한 보조 동작으로 사용.

Action

빠르게 두번 터치




Pinch open

내용 줌인.

Action

두 손가락 누르기. 두 손가락이 서로 멀어지기, 떼기.




Pinch close

내용 줌 아웃.

Action

두 손가락으로 누르기, 두 손가락이 서로 가까워지기, 떼기



































ㅇㄻ






posted by 엡뽀
2012. 11. 28. 16:34 Programing/Android

Design::Style > Typography (원본 : Android Developers)


Typography



안드로이드 디자인 언어는 기본 그리드와 규모, 공간, 리듬 그리고 정렬과 같은 전통적인 typography에 의존 하고있습니다. 사용자의 화면에 나타난 정보를 신속하게 이해하기 위해선 이러한 도구들의 성공적인 전개는 필수적입니다. typography의 이러한 사용을 지원하기 위해 IceSandwich는 UI 고해상도 요구를 위해 특별히 만들어진 Roboto type family를 도입하였습니다. 현재 TextView의 프레임 워크는 regular, bold, italic 과 bold italic weights를 기본적으로 지원합니다.




Default type colors

안드로이드 UI 아래와 같은 기본색들을 사용합니다.
textColorPrimarytextColorSecondary

밝은 테마의 UI는 아래와 같은 색을 사용 합니다.
textColorPrimaryInversetextColorSecondaryInverse.

프레임워크 텍스트 컬러 스타일 또한 터치 피드벡에 대한 상태  변경을 지원합니다. 


Typographic Scale


텍스트 사이즈 비교는 이해하기 쉬운 레이아웃을 만드는 것보다 훨씬 생상적입니다. 그러나, 한 UI에 다른 사이즈가 많이 들어간다면 지저분해질 수 있습니다. 안드로이드 프레임워크는 아래와 같은 몇가지 크기들만 사용합니다.


사용자는 환경설정 앱에서 시스템 전체 텍스트 크기를 선택 할 수 있습니다. 이러한 기능을 지원하기 위해 가능한한 텍스트 크기는 scale-independent pixels(SP)단위를 사용해야 합니다. 레이아웃은 이러한 설정에 대해 크기 변경이 가능한 텍스트를 지원해야합니다.












posted by 엡뽀
prev 1 2 3 4 5 next