SlideShare a Scribd company logo

Windows Phone App Design Guide

Seo Jinho
Seo Jinho
Seo JinhoWindows Phone7 Developer Evangelist at D&PE

Windows Phone Design Guide

Windows Phone App Design Guide

1 of 29
Download to read offline
Metro : A Concept of
Windows Phone 7.5
Jinho.Seo@microsoft.com
Sr .Developer Evangelist – Windows Phone and
Academy
http://blogs.msdn.com/jinhoseo
http://www.facebook.com/windowsphonekorea
People      vs.   Icons


Windows Phone Microsoft confidential.
Why metro?
Metro is a concept of Microsoft Future!
다양한 Windows Phone 디자인 요소
Demo
       Windows Phone 7.5

Recommended

Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overviewGeonu Choi
 
Windows Phone Design Camp
Windows Phone Design Camp Windows Phone Design Camp
Windows Phone Design Camp Seo Jinho
 
Mobile Platform
Mobile PlatformMobile Platform
Mobile Platformash84
 
마음을 잡는 멀티미디어 문서 작성법
마음을 잡는 멀티미디어 문서 작성법 마음을 잡는 멀티미디어 문서 작성법
마음을 잡는 멀티미디어 문서 작성법 (주)핑거
 
trendwatching.com's THE FUTURE OF CUSTOMER SERVICE
trendwatching.com's THE FUTURE OF CUSTOMER SERVICEtrendwatching.com's THE FUTURE OF CUSTOMER SERVICE
trendwatching.com's THE FUTURE OF CUSTOMER SERVICETrendWatching
 
The Importance of Inbound Call Centers
The Importance of Inbound Call CentersThe Importance of Inbound Call Centers
The Importance of Inbound Call CentersXACT TeleSolutions
 
LUMA's Upfront Summit Keynote: "The Future of TV"
LUMA's Upfront Summit Keynote: "The Future of TV"LUMA's Upfront Summit Keynote: "The Future of TV"
LUMA's Upfront Summit Keynote: "The Future of TV"LUMA Partners
 
Poor Self-esteem: Just Beat It!
Poor Self-esteem: Just Beat It!Poor Self-esteem: Just Beat It!
Poor Self-esteem: Just Beat It!SlideShop.com
 

More Related Content

Similar to Windows Phone App Design Guide

iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.Dong Jin Lee
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)Sun Jin Choi
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인Sang-min Lee
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 
스마트폰기초 2015
스마트폰기초 2015스마트폰기초 2015
스마트폰기초 2015Taekyoung Kim
 
Windows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryWindows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryJack M Rhee
 
INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701INBRIEF COMMUNICATION
 
아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Reviewdelver
 
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템강 민우
 
Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0중진 한
 
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템Young Soo Kim
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12지환 윤
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto LayoutEunjoo Im
 
Windows7처음다루기 it전문교육
Windows7처음다루기 it전문교육Windows7처음다루기 it전문교육
Windows7처음다루기 it전문교육parkso
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서Byeong-Hyeok Yu
 
Kgc2013 defense technica_converting_이상윤
Kgc2013 defense technica_converting_이상윤Kgc2013 defense technica_converting_이상윤
Kgc2013 defense technica_converting_이상윤SangYun Yi
 

Similar to Windows Phone App Design Guide (20)

iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 
스마트폰기초 2015
스마트폰기초 2015스마트폰기초 2015
스마트폰기초 2015
 
Devtree illu
Devtree illuDevtree illu
Devtree illu
 
Windows8 Modern UI Style Summary
Windows8 Modern UI Style SummaryWindows8 Modern UI Style Summary
Windows8 Modern UI Style Summary
 
INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701INBRIEF_START with Prezi vol.02-입문편 140701
INBRIEF_START with Prezi vol.02-입문편 140701
 
아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review
 
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
 
Designing Apps for Motorla Xoom Tablet
Designing Apps for Motorla Xoom TabletDesigning Apps for Motorla Xoom Tablet
Designing Apps for Motorla Xoom Tablet
 
Design blueb manual_1.0
Design blueb manual_1.0Design blueb manual_1.0
Design blueb manual_1.0
 
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
 
Test
TestTest
Test
 
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
삼성 싱가폴법인 삼성허브어플_제안서_v0.9_견적별도_12.12.12
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
 
Windows7처음다루기 it전문교육
Windows7처음다루기 it전문교육Windows7처음다루기 it전문교육
Windows7처음다루기 it전문교육
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서오픈드론맵 한국어 사용자 지침서
오픈드론맵 한국어 사용자 지침서
 
Kgc2013 defense technica_converting_이상윤
Kgc2013 defense technica_converting_이상윤Kgc2013 defense technica_converting_이상윤
Kgc2013 defense technica_converting_이상윤
 

More from Seo Jinho

Optimizing windows phone apps
Optimizing windows phone appsOptimizing windows phone apps
Optimizing windows phone appsSeo Jinho
 
Windows Phone 7.5 와 Windows 8 메트로 스타일 앱 개발
Windows Phone 7.5  와 Windows 8 메트로 스타일 앱 개발Windows Phone 7.5  와 Windows 8 메트로 스타일 앱 개발
Windows Phone 7.5 와 Windows 8 메트로 스타일 앱 개발Seo Jinho
 
Windows Phone 7.5 앱 개발 개요
Windows Phone 7.5 앱 개발 개요Windows Phone 7.5 앱 개발 개요
Windows Phone 7.5 앱 개발 개요Seo Jinho
 
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략Seo Jinho
 
아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7Seo Jinho
 
WP7 마켓플레이스에서 수익창출
WP7 마켓플레이스에서 수익창출WP7 마켓플레이스에서 수익창출
WP7 마켓플레이스에서 수익창출Seo Jinho
 
WP7 Design Guide
WP7 Design Guide WP7 Design Guide
WP7 Design Guide Seo Jinho
 
데브멘토 윈도우폰7 세미나
데브멘토 윈도우폰7 세미나데브멘토 윈도우폰7 세미나
데브멘토 윈도우폰7 세미나Seo Jinho
 
MS N스크린과 클라우드 전략
MS N스크린과 클라우드 전략MS N스크린과 클라우드 전략
MS N스크린과 클라우드 전략Seo Jinho
 
네이버 스마트폰 카페 - 윈도우폰7
네이버 스마트폰 카페 - 윈도우폰7네이버 스마트폰 카페 - 윈도우폰7
네이버 스마트폰 카페 - 윈도우폰7Seo Jinho
 
도전! 나도 내일은 윈도우폰 스타!
도전! 나도 내일은 윈도우폰 스타!도전! 나도 내일은 윈도우폰 스타!
도전! 나도 내일은 윈도우폰 스타!Seo Jinho
 
0121 학생아카데미
0121 학생아카데미0121 학생아카데미
0121 학생아카데미Seo Jinho
 
Metro_DesignLanguage
Metro_DesignLanguageMetro_DesignLanguage
Metro_DesignLanguageSeo Jinho
 
윈도우폰7 앱 지금 개발해야 하는 이유
윈도우폰7 앱 지금 개발해야 하는 이유윈도우폰7 앱 지금 개발해야 하는 이유
윈도우폰7 앱 지금 개발해야 하는 이유Seo Jinho
 
차세대 모바일 엔터프라이즈 플랫폼
차세대 모바일 엔터프라이즈 플랫폼차세대 모바일 엔터프라이즈 플랫폼
차세대 모바일 엔터프라이즈 플랫폼Seo Jinho
 
차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발Seo Jinho
 
kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7Seo Jinho
 
MS 차세대 모바일 게임 전략 및 XNA
MS 차세대 모바일 게임 전략 및 XNAMS 차세대 모바일 게임 전략 및 XNA
MS 차세대 모바일 게임 전략 및 XNASeo Jinho
 
데브멘토 발표세미나
데브멘토 발표세미나데브멘토 발표세미나
데브멘토 발표세미나Seo Jinho
 
Windows phone7education
Windows phone7educationWindows phone7education
Windows phone7educationSeo Jinho
 

More from Seo Jinho (20)

Optimizing windows phone apps
Optimizing windows phone appsOptimizing windows phone apps
Optimizing windows phone apps
 
Windows Phone 7.5 와 Windows 8 메트로 스타일 앱 개발
Windows Phone 7.5  와 Windows 8 메트로 스타일 앱 개발Windows Phone 7.5  와 Windows 8 메트로 스타일 앱 개발
Windows Phone 7.5 와 Windows 8 메트로 스타일 앱 개발
 
Windows Phone 7.5 앱 개발 개요
Windows Phone 7.5 앱 개발 개요Windows Phone 7.5 앱 개발 개요
Windows Phone 7.5 앱 개발 개요
 
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
Kinect 와 Xbox Live를 통해 알아 본 Windows Phone 7.5 게임 전략
 
아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7아카데미를 위한 Windows Phone 7
아카데미를 위한 Windows Phone 7
 
WP7 마켓플레이스에서 수익창출
WP7 마켓플레이스에서 수익창출WP7 마켓플레이스에서 수익창출
WP7 마켓플레이스에서 수익창출
 
WP7 Design Guide
WP7 Design Guide WP7 Design Guide
WP7 Design Guide
 
데브멘토 윈도우폰7 세미나
데브멘토 윈도우폰7 세미나데브멘토 윈도우폰7 세미나
데브멘토 윈도우폰7 세미나
 
MS N스크린과 클라우드 전략
MS N스크린과 클라우드 전략MS N스크린과 클라우드 전략
MS N스크린과 클라우드 전략
 
네이버 스마트폰 카페 - 윈도우폰7
네이버 스마트폰 카페 - 윈도우폰7네이버 스마트폰 카페 - 윈도우폰7
네이버 스마트폰 카페 - 윈도우폰7
 
도전! 나도 내일은 윈도우폰 스타!
도전! 나도 내일은 윈도우폰 스타!도전! 나도 내일은 윈도우폰 스타!
도전! 나도 내일은 윈도우폰 스타!
 
0121 학생아카데미
0121 학생아카데미0121 학생아카데미
0121 학생아카데미
 
Metro_DesignLanguage
Metro_DesignLanguageMetro_DesignLanguage
Metro_DesignLanguage
 
윈도우폰7 앱 지금 개발해야 하는 이유
윈도우폰7 앱 지금 개발해야 하는 이유윈도우폰7 앱 지금 개발해야 하는 이유
윈도우폰7 앱 지금 개발해야 하는 이유
 
차세대 모바일 엔터프라이즈 플랫폼
차세대 모바일 엔터프라이즈 플랫폼차세대 모바일 엔터프라이즈 플랫폼
차세대 모바일 엔터프라이즈 플랫폼
 
차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발차세대 기업형 브랜드 앱 개발
차세대 기업형 브랜드 앱 개발
 
kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7
 
MS 차세대 모바일 게임 전략 및 XNA
MS 차세대 모바일 게임 전략 및 XNAMS 차세대 모바일 게임 전략 및 XNA
MS 차세대 모바일 게임 전략 및 XNA
 
데브멘토 발표세미나
데브멘토 발표세미나데브멘토 발표세미나
데브멘토 발표세미나
 
Windows phone7education
Windows phone7educationWindows phone7education
Windows phone7education
 

Windows Phone App Design Guide

  • 1. Metro : A Concept of Windows Phone 7.5 Jinho.Seo@microsoft.com Sr .Developer Evangelist – Windows Phone and Academy http://blogs.msdn.com/jinhoseo http://www.facebook.com/windowsphonekorea
  • 2. People vs. Icons Windows Phone Microsoft confidential.
  • 4. Metro is a concept of Microsoft Future!
  • 5. 다양한 Windows Phone 디자인 요소
  • 6. Demo Windows Phone 7.5
  • 8. Status Bar – System Area 상태 바(Status Bar)란 무엇인가? 1. 상단 위의 표시 및 시스템 레벨의 정보 표시 2. 손가락으로 누르면 약 8초간 보여주고 자동적으로 슬라이드 됨. 3. App 에서 예약된 공간 4. System Clock 은 Portrait 일 경우 Height 32px, Landscape 일 경우 Width가 72px 영역 차지 Status Bar icon 1. Signal Strength 2. Data connection 3. Call forwarding 4. Roaming 5. Wireless network signal strength 6. Bluetooth status 7. Ringer mode 8. Input status 9. Battery Power level 10. System clock
  • 9. App Bar 1. 하단 버튼, 아이콘 또는 텍스트로 표시할 수 있음. 2“…” 으로 표현된 연속된 점을 탭(Tab)한다던 지, 위쪽으로 Flick up하면 ↑ 3. “아이콘+Text” 와 “Text”로 이루어진 그 밖의 옵션들이 제공 4. 메뉴를 다시 원래대로 bottom에 아이콘 형태로만 보이도록 하려면, • ‘…’을 탭(Tab)하거나 아래쪽으로 Flick. • 메뉴 이외의 영역을 Tap • Hardware 키인 ‘Back’키를 선택 • 메뉴 선택
  • 10. Icongraphy • 인식하기 쉽고, 이해할 수 있으며 사용자가 실생활에서의 메타포(metaphors)적인 표현 • 사용자가 봤을 때 기능과의 매칭이 잘되는 아이콘을 사용 권장 • 아이콘 텍스트는 어플리케이션 바 메뉴에서 사용자에게 보여줄 • http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/ 내용입니다. 03/27/windows-phone-7-series-icon-pack.aspx [개발자와 디자이너 고려사항] - 어플리케이션 바 아이콘 이미지는 투명 배경위에 foreground color로 ‘white’ • http://expression.microsoft.com/en-us/gg317447 컬러를 사용해서 48*48px - 최대 5개만 (손가락 큰 사람을 대비, 터치 중첩 방지)
  • 11. Screen Orientation - 개발자가 세로모드 보기를 지원하기 위해서는 코드를 추가 <xaml> SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" OrientationChanged="PhoneApplicationPage_OrientationChanged" <cs> private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait) { Grid.SetRow(buttonList, 1); Grid.SetColumn(buttonList, 0); } else { Grid.SetRow(buttonList, 0); Grid.SetColumn(buttonList, 1); } } - 어플리케이션이 가로모드(landscape)를 지원한다면, left landscape나 right landscape중에 하나가 아닌 둘 다 지원해야 한다. - 텍스트 입력을 지원/제공하는 어플은 쿼티키보드를 가진 디바이스의 경우, 가로모드를 고려 - 사용자 화면 전환 애니메이션(Custom screen transition animation) 효과를 적용하지 않도록 한다.
  • 12. Font 윈도우폰7은 기본 시스템 폰트는 Multi-language 지원은 Segoe WP를 사용하여 5개의 스타일을 이용할 수 있으나, Korean Edition 에서는 네오고딕 입니다. • Regular • Bold • Semi-bold • Semi-light • Black 이 폰트는 중국어, 일본어, 한국어와 같은 동아시아 쪽의 Unicode를 지원합니다. [개발자와 디자이너 고려사항] - 통합적인 사용자 경험을 유지하기 위해 다른 대체 폰트의 사용을 하지 않도록 고려한다. - 15 points보다 작은 사이즈를 사용하지 않는다. 읽기 어려울 수도 있고 touch target 영역이 너무 작아진다. - 폰트 색상을 처리할 경우, 두 개의 background(light / dark)와 모든 accent colors 테마(theme)를 고려하여 사용해야 한다.
  • 13. Push Notification • Tile notifications • 사용자가 동작하고 있는 상태에 직접적인 영향을 주지 않지만, 시작화면의 타일(tile)에 알림을 전달, • 시작화면의 메일(Mail) 타일에 카운트를 증가시켜주는 것과 같은 형태의 알림 • Toast notifications • 사용자의 동작을 요구하는 것으로 시스템 전반에 걸쳐 발생하는 알림 • 사용자가 폰을 사용하는 중에 text message 또는 instant message를 받았을 때, 이 알림은 화면의 상단에 보여지고 10초 후에 사라짐. • Raw notifications • 어플리케이션 내에서 사용자 동작을 요구하는 알림 • 어플리케이션에 의해 전체적으로 컨트롤이 가능하고, 오직 해당 어플리케이션 내에서만 영향을 미침.
  • 14. Push Notification ■ Tile notification 미리 설치된(built-in or pre-installed) 어플리케이션 타일 외에는 사용자가 직접 시작화면에 등록(pin)해야 합니다. [개발자와 디자이너 고려사항] - 타일 이미지와 타이틀을 포함하지 않은 어플리케이션은 프로젝트의 이름과 시스템에 정의된 아이콘을 사용하여 디스플레이 된다. - 타일 이미지는 256dpi에서 173*173px이어야 하고, JPEG나 PNG포맷 이어야 한다. - 이미지가 위의 사이즈보다 작거나 크면 좌측상단을 중심으로 잘라지거나(crop) 확대(scaled up)될 수 있다. - 63*63px의 어플리케이션 이미지가 포함되어 있지 않으면 프로그램 리스트에서는 default로 타일 이미지가 축소(scaled down)되어 디스플레이 된다. - 타일의 타이틀은 tile notification 사용 없이도 디스플레이 될 수 있다. - 다양한 타일 이미지를 활용한다면 인식할 수 있는 테마와 스타일을 고려하여 사용할 수 있다. - 개발자는 카운터의 색상, 폰트, 폰트색상, 사이즈를 변경 시킬 수 없다. - 과도한 사용은 배터리 수명에 영향을 줄 수 있으므로 적당히 사용.
  • 15. Theme - Color 테마(theme)는 사용자를 위한 비쥬얼적인 요소로 활용되는 것으로 백그라운드와 강조색(Accent color)을 사용자가 선택 가능하게 되어있습니다. 컬러만 테마의 요소로서 활용되고 폰트의 경우는 따로 변경시킬 수 없습니다. 테마설정은 2개의 백그라운드 칼라인 dark와 light, 10개의 강조색(accent colors)을 가지고 있습니다. • magenta (FF0097) • purple (A200FF) • teal (00ABA9) • lime (8CBF26) • brown (996600) • pink (FF0097) • orange (F09609) • blue (1BA1E2) • red (E51400) • green (339933) 개발자는 OLED display를 가진 디바이스들의 배터리 전력소모를 고려해 너무 많은 “White” 컬러의 사용을 자제할 필요가 있습니다.
  • 16. Control and Touch Input touch target은 9mm / 34px 이상으로 하는 것을 권장하고, 터치할 수 있는 컨트롤간의 간격은 최소 2mm / 8px은 되야 합니다. 예외적으로 컨트롤의 사이즈를 더 작게 해야 할 경우가 있을 수 있는데, 그래도 최소한 7mm / 26px이상은 되야 합니다. 가상키보드(on-screen keyboard)나 IE내의 하이퍼링크(hyperlinks)의 경우는 예외입니다. 9mm보다 커야 되는 touch target을 살펴보면 • 자주 선택하는 컨트롤 • 잘못된 터치 동작으로 인해 심각한 에러가 발생될 만한 결과를 발생할 소지가 있을 경우 (일부분만 입력된 상태로 메시지가 전송될 수 있는 경우 / 데이터 삭제와 같은 복구될 수 없는 것들) • 사용자 터치 오류로 인해 의도하지 동작이 발생되어 불편함을 초래하는 경우 (원하지 않는 다른 화면으로의 이동) • 화면상의 가장자리와 가까운 경우 (가장자리에서 3.5mm내) • 인접한 touch control사이에서 멀티 터치나 연속된 터치를 해야 하는 경우 (다이얼패드) 특별히 위치나 사이즈의 제약이 있는 touch / non-touch UI element의 경우, 레이아웃에서 최소 터치 타겟 사이즈의 공간을 만들어내기 위해 추가적인 어플리케이션 페이지나 화면내의 조정이 필요합니다.
  • 17. Multi-Touch and Gestures ■ Pinch and strech pinch and strech는 2개의 손가락을 이용하여 분리된 영역을 죄거나(pinch) 하거나 늘리는(strech) 동작입니다. 두 개 손가락의 중심을 기준으로 컨텐츠를 줌(zoom) 할 수 있습니다. ■ Touch and hold Touch and hold는 특정 영역을 한 손가락으로 누르고 일정기간 기다리는 동작입니다. ■ Four touch points 윈도우폰은 동시에 4개의 입력 포인트를 활용할 수 있습니다. 예를 들면 게임이나 섬세한 동작이 요구되는 어플들에 활용이 될 수 있습니다. 입력 타겟의 지름은 7mm이상이 되어야 하고, 타겟 간에 3.5mm이상이 되도록 합니다. [개발자와 디자이너 고려사항] - touch and hold 제스처는 일반적으로 아이템을 위한 context menu나 옵션 페이지를 표시하는데 사용한다.
  • 18. On Screen Keyboard • On-Screen Keyboard는 텍스트 입력을 위한 것으로, • 편집 가능한 컨트롤이 활성화 되었을 때 화면의 하단에서 자동적으로 sliding up됩니다. • 사용자가 edit control의 외부를 탭(tab)하거나 리스트 스크롤 또는 Back Button을 누르면 화면의 하단으로 sliding down되면서 close됩니다. • • 만일 하드웨어 키보드(폰 제조사 옵션)를 slide out하게 되면, On-Screen Keyboard는 자동적으로 close됩니다. • 자동완성과 같은 텍스트 제안 기능들을 제공합니다. (자동완성 혹은 추천단어 기능으로 이해하시면 될 듯 합니다) • On-Screen Keyboard는 세로(portrait)모드에서 height가 336px이고, 가로(landscape)모드에서는 256px입니다. • 텍스트 제안 창(text suggestion window)은 두 모드에서 65px로 표시됩니다. • 개발자는 edit control이 활성화되었을 때 On-Screen Keyboard를 배치 시킬지 말지에 대해 정의할 수 있습니다. • • 싱글 라인(single line)의 edit control일 경우 enter key를 누르면 데이터가 전달되고 keyboard가 close되거나 다음 edit control로 포커스가 변경됩니다. • 멀티라인(multi-line)의 경우에는 새로운 라인이 추가됩니다.
  • 19. Hardware Button ■ Microphone ■ Phone hardware buttons 윈도우폰7의 마이크로폰(microphone) 주파수 범위는 150Hz~7kHz입니다. 윈도우폰은 디바이스에 몇 가지의 하드웨어 버튼을 가지고 있습니다. 각 버튼들마다 고유한 기능들을 제공합니다. • Power/Sleep • Volume up and volume down • Camera • Back • Start • Search Back, Start, Search버튼은 폰 제조사에서 정전식 버튼으로 적용될 수도 있습니다. 위 3개의 버튼을 제외한 다른 버튼들의 위치는 폼팩터(form factor)나 제조사에 따라 변경될 수 있습니다.
  • 20. Sensors & Output methods 윈도우폰은 다음의 센서들을 포함합니다. • Accelerometer • A-GPS • Proximity Sensor • Camera • Compass • Light Sensor • Gyro • FM Radio ■ Accelerometer 윈도우폰 7 accelerometer는 +/-5정도의 정확도를 갖는 가속도 측정 센서입니다. 이 3D모션(motion) 센서는 X,Y,Z값에 대해 연속적인 정보를 제공합니다. 개발자는 API를 활용하여 자동 화면 변환(automatic screen rotation), tilt-to-scroll, 어플 내에서의 게임 컨트롤 등으로 이 기능을 활용할 수 있습니다.
  • 21. Panorama Template • 파노라마 어플리케이션(Panorama Application)은 Windows Phone OS 7.0 시각적 요소의 핵심적인 한 부분입니다. • • 폰 화면 크기에 맞춰 디자인된 기존의 표준 어플리케이션과는 달리, 파노라마는 화면크기의 제한을 넘어 확장되는 가로로 긴 캔버스(canvas)를 사용하여 view 컨트롤, 데이터 및 서비스를 사용하도록 제공합니다. • 페이지 이동의 애니메이션이 부드럽고 사실적인 효과를 보이도록 지원합니다. 썸네일(Thumbnail)은 파노라마 뷰의 주요 element입니다. 이것은 컨텐츠나 미디어를 연결해줍니다. • 파노라마 어플리케이션의 element들은 더 세부적인 동작을 위한 시작점 역할을 합니다. • 파노라마의 UI는 각각의 모션 로직(motion logic)에 의존하여 동작되는 레이어(layer) 타입들로 구성되어있습니다. - Layer type • Background image • Panorama titles • Panorama section titles • Panorama sections
  • 22. Panorama Template Design 배경 이미지(background image)는 최하위 layer 이며, magazine-like 느낌을 갖게 합니다. 대체로 배경 이미지는 전체 화면에 채워지도록 사용되며, 어플리케이션의 가장 시각적인(visual) 부분입니다. 파노라마 섹션(panorama section)은 각기 다른 컨트롤이나 컨텐츠를 파노라마 타이틀(panorama title)은 파노라마 어플리케이션의 전체 타이틀입니다. 요약/분류하는 구성 요소입니다. 어플리케이션을 구분하는데 사용하고, 어플리케이션의 실행(진입)방법에 상관없이 파노라마 섹션의 이동은 pan이나 flick 제스처를 사용하여 같은 비율로 동작합니다. 항상 표시됩니다. 파노라마 섹션 타이틀(section title)은 선택적(optional)으로 적용할 수 있습니다.
  • 23. 무료 6 App Design Template 제공
  • 24. Slider Control 슬라이더 컨트롤(Slider control)은 볼륨이나 밝기 레벨과 같은 데이터의 범위로부터 값을 설정하는데 사용합니다. Slider는 최소값과 최대값을 가집니다. [개발자와 디자이너 고려사항] - 어플리케이션에서 가로 또는 세로 slider를 사용할 수 있지만, 가로 slider 사용을 추천한다.
  • 25. Windows Phone Marketplace 현재상황 Global • Total 34,162 apps (10/15/2011) • 52 % of Free. Average Price $1.73 Windows Phone Microsoft Corporation.
  • 26. Windows Phone Marketplace for Web • http://www.windowsphone.com/ko-kr/marketplace Windows Phone Microsoft Corporation.
  • 28. Windows Phone 7.5 개발자 포털 현재 4,300명좋아요! 총40편개발자동영상및한글실습교재제공 http://www.facebook.com/windowsphonekorea http://msdn.microsoft.com/ko-kr/gg415576