[퍼온글] 윈도우 모바일 7 UI 디자인 & 인터랙션 가이드

 

윈도우폰7의 앱 디자이너(및 디자인도 하는 개발자)를 위한 UI 디자인 & 인터랙션 가이드도 있습니다.

오브젝트의 크기는 최소 26px 이상, 터치 영역은 34px 이상, 둘 이상의 오브젝트 사이 간격은 8px 이상이 좋다는 군요. 터치 영역은 실제 보여지는 크기가 26px 이더라도 8px 더 넓게 잡아서 34px 이상으로 만드는 것이 포인트.

UI의 테마는 현재 4가지 색상의 컬러만 해당된다는 군요. 폰트나 사이즈는 해당사항 없음.

페이지 형식을 띈 앱의 기본적인 페이지 레이아웃.

하드웨어 버튼은 총 7개. 사진 찍을 때 오른 손 검지손가락 위치의 카메라(4)나, 오른손 검지의 파워(1), 왼손 엄지의 볼륨(2) 등으로 배치되어 있습니다. 왼손잡이는 다소 불편할지도 모르겠군요.

윈폰7의 타일은 위와 같이 2개의 레이어로 구성된답니다. 백그라운드 이미지와 텍스트 라벨. 두개가 합쳐져서 우측 하단과 같은 모습. 그리고 타일 알림도 표시되네요.

타일

타일 알림의 크기 역시 터치 영역 가이드(34px)에 맞는 37x37 크기네요.

좌우로 펼쳐진 형태의 파노라마 애플리케이션. 각 메뉴와 타일, 타입의 위치 및 폰트에 대한 가이드입니다.

이미지를 중심으로 구성하는 경우.

텍스트를 중심으로 구성하는 경우.

요즘에는 웹디자인에서도 그리드를 이용하는 경우가 많은데, 윈폰7의 가이드에서도 그리드를 적절히 활용하는 것 같네요. 윈폰7의 UI는 실버라이트로 만들어 지기 때문에 위 가이드와 관계 없이 자유로운 표현도 가능합니다.

원본 출처 : http://uxfactory.com/866




윈도우 모바일 7이 처음 발표됬을때 기존의 틀을 깬 기대되는 OS라고 생각했습니다... 만.....
역시나 나와봐야 알겠지요........ 아마 멋지다~ 라고 감탄은 하겠지만 계속 아이폰을 쓸거 같긴합니다.