Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

+ Follow

window phone 7 design guide

by jinhee jung on May 02, 2011

3,650 views

More…

Less

4 Embeds 3,102

http://blog.jinhee.net	3012
http://jungjinhee.tistory.com	85
http://www.hanrss.com	3
http://webcache.googleusercontent.com	2

Statistics

Favorites: 0
Downloads: 11
Comments: 0
Embed Views: 3,102
Views on SlideShare: 548
Total Views: 3,650

윈도우 폰 7의 디자인은 [메트로]라는 코드명으로 불립니다. [메트로]컨셉은 현대적이고, 깔끔한 의미를 지니고 있습니다. 그리고 빨라야 하며, 내용이 주를 이루어야 하기 위해 타이포그래피를 선호합니다.그래서 MS에서는 이 메트로컨셉을 정의하는 원칙으로 총 다섯가지를 제시하고 있습니다.화면에 보이는 것이 바로 그 다섯가지인데, 쉽게 예를 들어 보겠습니다. 눈을 감고한번 생각해 보겠습니다. 메트로컨셉이 제일 강한 곳, 공항을 한번 떠올려보겠습니다. 공항에 가면 처음 어느 게이트로 들어가야 할지, 공항 전체 구조를 그린 지도가 맨 처음에 보이고 자기가 현재 어디에 서 있는지를가르켜 줍니다. 게이트가몇번인지 블록 블록 지나갈 때마다 깔끔하고, 크게 쓰여져 있는 것이 보입니다.그리고 내가 비행기가 언제 출발하는지 몇시에티켓팅이 시작되는지 비행기 정보가 실시간으로 바뀌면서 볼 수 있습니다.이런 전체를 생각해 보면 내가 어디를 가야할 때 무엇이 필요할 때 정확하게 찾을 수 있도록 도와주는 것이 바로 WP7의 컨셉, [메트로]입니다.
좀 더 마음에 와 닿도록 타 제품의 컨셉과 비교하며 이야기를 해보겠습니다. 기존모바일의UI는 리얼리즘적인 이미지를 담기 위해서 은유적이고 함축된 이미지를 앞의 시작화면이나 아이콘에 주로 사용되었습니다. 현재 우리가 사용하고 있는 것들은 주로 이런 느낌들입니다.WP7 같은 경우는 약간 다릅니다. 인포그래픽을 선호하고 있는데, 정보를 실용적으로 전달한다는 점에서 일반적인 은유의 그림이나 사진과는 구별된다고 볼 수 있습니다. [메트로]컨셉인 만큼 복잡한 정보를 빠르고, 명확하게 설명 가능한 타이포를 주로 사용하며, 기호 및 픽토그램등을 채택하고 있습니다.
이런 정보 및 지식을 시각적으로 표현한 디자인의 예시는 굉장히 많은데요. 다른 예시로 어떻게 표현되고 있는지 재미로 준비해 보았습니다.-설명-이렇게 정보를 시각화해서 보여주는 것은 은유적인 이미지를 보여주는 것보다 훨씬 이해도가 높습니다. 글만 보여준다고 외우라고 하면 외우기 힘들고, 그림만 보여주면 정확한 정보를 모르니 이렇게 적절한 혼합으로 사용하기도 합니다.우리는 모바일에 적용하는 정보이니만큼 더 간결하게 디자인을 해야 하겠지요
이러한 정보 디자인을 위해서는 먼저 WP7의 시스템 구조와 계층에 대해서 알아야 할 필요가 있습니다. 특징적인 것이 몇 가지 있는데요첫번째로Hub&Spoke Model입니다.허브라고 하면 우리가 자주 듣는 용어들 중에 교통이 한 곳에 모여서 다른 지역으로 모이는 곳, 공항도 허브라고 부르기도 해서 한번쯤 들어보신 적 있으실 겁니다. WP7은 이 역할을 이용하여, 각 다른 내용들이 모아서 서로 유사한 내용을 구분 지어서 한곳에 볼 수 있도록 하는 특징을 가지고 있습니다. 예를 들어 내가 주소록에 A의 전화번호 등을 저장해 놓았다고 가정합시다.A는 페이스 북도 하고 트위터도 하고 따로 문자를 주고 받기도 하는데 어찌보면 이 정보들은 모두 A라는 공통 허브를 가지고 있습니다. 그러면 A와 주고 받은 내용들을 주소록 한곳에서 확인할 수 있도록 하는 그런 역할이라고 생각하시면 됩니다. 두번째로 하드웨어적으로 일관된 모습을 가지고 있습니다. WP7을 채택한 제조사는 사용자 경험을 통일 시키기 위해 왼쪽에는 백 버튼, 가운데는 처음 타일로 돌아갈 수 있는 시작 버튼, 우측은 검색 버튼을 가지고 있습니다. 그래서 처음 폰의 경험을 시작할 때나, 실수로 탐색을 잘못 한 경우 헤매지 않고 돌아갈 수 있도록 하드웨어적으로 제공하고 있어 쉽게 접근할 수 있습니다. 이 부분에 대해서 사용자가 모바일 작업을 시작하는 방법이나 뒤로 돌아가는 방법에 대해서 쉽게 이해할 수 있는지에 대해 사용자 사용성에 MS는 많은 테스트를 하였습니다.세번째로는WP7은 사용자들이 소프트웨어에서 혼란을 겪지 않도록 도와줍니다. 예를 들어 내가 기차표를 예약했다고 합시다. 이 기차표가 몇 시에 출발하는지 몇 번의 기차인지정보를 알고 싶은데, 소프트웨어에서 다시 들어가서 찾아야 하면 그 페이지를 다시 찾을 수 있을지에 대해서 장담할 수 없습니다. 그럴 때 스타트 타일에 핀을 해 놓으면 혼동할 걱정을 덜게 됩니다.네번째는 예측 할 수 있도록 해야 한다. 두번째에서 말한 것과 같은 이치인데, 소프트웨어를 만들 때 이미 익숙한 시스템이 있는데 그시스템과 맞아떨어지게 만들지 않으면 사용자는 신뢰하지 않을 것이다.다섯번째는 통합된 경험의 개념이다.기존 처럼 차례대로 어플리케이션에서 각각의 정보를 볼 수 있지만, 다른 앱과 연결해서 가로질러서 갈 수 있다.
이렇게 시스템적인 구조까지 알아보았는데요, 시각적인 디자인을 올바르게 디자인하기 위해 제작하려면 어떻게 해야할까요?먼저 앱을 시각적으로 디자인하기 전에 권장하고 싶은 것은 WP7을 디자인 할 시에 [메트로]컨셉을 먼저 생각해 볼 필요가 있습니다. [메트로]컨셉은 시각적으로 레이아웃과 타이포그래피가깔끔 해야 하기 때문에 그것에 맞춰 MS는 디자인 템플릿과 폰트를 제공하고 있습니다. 물론 아름답고 창조적인 작업을 해야 하겠지만, 사용자 경험의 통일을 위해서는 전혀 다른 디자인 레이아웃을 잡게 된다면 혼란이 올 수 있습니다. WP7 앱을 디자인 할 시 공간과 여백을 일치시키도록 합니다.(이런 것들을 그리드 디자인이라고도 하죠)
그리고 올바른 디자인을 하려면 WP7에서 어떤 컨트롤이 있는지 알아야 합니다. 내가 불을 스위치 처럼 끄고 키게 기능을 하고 싶을 때 이러한 역할을 하는 버튼이 있는지 없는지 이런 기능이 가능한지를 알아야 하겠죠? 이런 컨트롤들은 커뮤니티나 자료를 인터넷을 통해 찾을 수 있기도 합니다. 좀 있다 윈폰앱을 디자인 하기 위해서 Expression Blend라는 프로그램을 사용할 것인데요. 이 프로그램은 디자이너가 쉽게 WP7외에도 실버라이트나WPF어플리케이션을 제작할 수 있도록 만들어진 디자인 프로그램입니다. 이 프로그램을 설치하고 WP7을 위한 추가설치를 하면이러한 컨트롤을 사용할 수 있으니 간단히 넘어가도록 하겠습니다.
이렇게 WP7컨셉과 시스템 구조, 올바른 길로 가기 위한 디자인 참고사항 까지 알아보았습니다.이제는 직접 기획을 하고 디자인을 해볼텐데요, 그 전에 항상 해야할 것은 계획을 세우는 것입니다. 언제나 항상 디자인 프로세스는 거의 비슷한 방식으로 진행됩니다. 먼저 무엇을 만들지 디자인을 하고 … 생략…
디자인에 들어가기 전에 항상 프로토타입을 거치도록 합니다. 이부분에 있어서는 항상 시험을 해보고 작업에 들어가야 두 세번 작업할 일이 없어지게 됩니다. 손으로 그리는 방법 및 ppt로 그리는 방법 등 여러가지가 있는데요 WP7 프로토타입을 제작하기 위해 Expression Blend에서 스케치플로우라는 기능을 제공하고 있습니다. 위의 그림과 같이 연필로 그린듯한 컨트롤들을 제공하기 때문에 손 쉽게 프로토타입을 만들 수 있습니다.
이렇게 프로토타입까지 제작하고 나면 다시 한번 물음을 던져 보아야 합니다. 사람들에게 재미가 있는가? 혹은 실험적인가? 완성도 있는가? 중에꼼꼼히 따져봐야 할 필요가 있습니다. … 생략 … 이런 물음에 충족하는 WP7의 예시를 보여드리도록 하겠습니다.
이제 앱을 제작해 보겠습니다 WP7에 가장 비주얼적으로 독특한 프레임은 파노라마와 피벗이라는 컨트롤 구조입니다. 이 두개의 컨트롤은 자신이 어떤 앱을 만드는 목적 및 플로우에 따라서 선택해야 할 상황입니다. 확장적이고 동적인 페이지를 원한다면 파노라마 구조를 선택하도록 합니다. 파노라마는 기존 프레임 사이즈 영역이 아니기 때문에 독특한 앱 페이지를 구성할 수 있으며 마치 매거진 느낌이 들도록 비주얼에서 좋은 역할을 합니다.
피벗 컨트롤은 데이터가 많은 것을 효율적으로 관리하거나 집중되고자 할 때피벗 컨트롤을 쓰도록 합니다. 같은 데이터를 여러 분류로 나눈다거나, 우선순위를 두고자 할 때 등에 활용하기 좋은 컨트롤 구조입니다.
그리고 마지막으로 맨 처음 시작화면에서 보일 타일을 디자인 할 시에 사이즈 등은 다음과 같이 간단하게 설정하도록 합니다. 타일의 구조는테마색인 백그라운드가 맨 하위 레이어로 배치되어 있고 디자인 한 타일 > 어플리케이션의 타이틀 > 업데이트 정보 순으로 이루어져 있습니다.

window phone 7 design guide — Presentation Transcript

Jinheejung
Expression Blend MVP
Window Phone7 앱 개발을 위한 디자인 가이드
목차
2
1. WP7 디자인 기본 컨셉
2. 시스템 구조 및 계층
3. WP7 앱(App)을 올바르게 만들기 위한 시각디자인
4. 기획의 중요성
5. WP7 화면 컨트롤
6. Demo: 파노라마 앱제작하기
7. 질문과 답
1. WP7 디자인 기본 컨셉메트로(Metro)
3
Clean, light, open, fast
Celebrate typography
Alive & in motion
Content not chrome
Authentically digital
1. WP7 디자인 기본 컨셉iconographic vs. infographic
4
Was iconographic
브랜드를 그림으로 풀어 시각화 함
Now infographic
정보, 자료 또는 지식을 시각적으로 표현
4
5
2. 시스템 구조 및 계층
6
Hub & Spoke 모델
Start & Back
Avoid Traps, loops, Phantom pages
Be predictable
Integrated Experiences
6
3. WP7 앱(App)을 올바르게 만들기 위한 시각디자인
7
메트로> 브랜드
그리드 디자인 살리기
여백과 공간 살리기
타이포그래피 스케일 고려
우선 순위 고려
7
3. WP7 앱(App)을 올바르게 만들기 위한 시각디자인
8
사용 가능한 컨트롤의 이해
http://www.windowsphonegeek.com/articles/All-Silverlight-for-WP7-Controls
8
4. 기획의 중요성
9
1
2
3
1. 제작 기간 설정
2. 정의 및 개념 확립
디자인 컨셉 정의
스토리보드 아이디어 (작업 단계 설명)
상호 작용
3. 실현 및 수정
사용자 테스트, 버그 수정, 최종 디자인 완료
9
4. 기획의 중요성
10
윈도우 폰 7을 위한 스케치플로우
스토리보드 아이디어 시
10
4. 기획의 중요성
11
아름다운가?
사용자가 처음 접했을 때 사로 잡을 시각적인 아름다움을 추구하는가?
재미 있는가?
계속적인 재미를 느끼는가?
실험적인가?
다양한 시도를 하는가?
완성도가 높은가?
전체적인 스토리보드와 사용자 경험에 만족될 수 있는가?
11
12
12
13
14
5. WP7 화면 컨트롤파노라마(Panorama)
15
확장적인, 탐구적인, 동적인 앱 제작 시
15
5. WP7 화면 컨트롤피벗(Pivot)
16
효율적인, 집중된, 습관적인 앱 제작 시
16
5. WP7 화면 컨트롤타일(Tile)
17
173x173 pixel / 63x63 pixel
17
6. Demo: 파노라마 앱 제작하기
18
18
6. Demo: 파노라마 앱 제작하기
19
1. 배경 이미지 제작
1024x768pixel jpg또는 png파일
2. 파노라마 컨트롤로 제작
3. 파노라마 페이지 추가
4. 앱(App) 타이틀 및 서브 타이틀 작성
5. 각 페이지에 사진 및 버튼 추가
19
Demo
@jinheenet
Blog.jinhee.net
Q&A
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

window phone 7 design guide

by jinhee jung on May 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 3,102

Statistics

window phone 7 design guide — Presentation Transcript