windows8 modern ui style summary
DESCRIPTION
It's a simple guide to windows8 modernUI style.(Korean)TRANSCRIPT
![Page 1: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/1.jpg)
Touch to Modernโฆ
Windows8 Modern UI Style
![Page 2: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/2.jpg)
2
Powered by DENUO
Metro style app user experience wireframe
Windows8 ์ ๊ฐ์ฅ ํฐ ๋ณํ
Windows8
App Store
Windows8Modern UI Style
App
![Page 3: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/3.jpg)
3
Powered by DENUO
Metro style app user experience wireframeWindows8 App Store
ํ์ด๋ผ์ดํธ , ๊ธ์ต ์นดํ ๊ณ ๋ฆฌ ๋ฑ 21 ๊ฐ ์นดํ ๊ณ ๋ฆฌ๋ก ์ด์์คํ ์ด ๊ณ์ ์ ํตํด ์ ๋ก๋ , ์คํ ์ด ์ฌ์ฌ๋ฅผ ๊ฑฐ์ณ ๋ฑ๋ก
Modern UI ๋ก ์ ์๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํ ์คํ ์ด
![Page 4: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/4.jpg)
4
Powered by DENUO
Metro style app user experience wireframeWindows8 Coverage
Multi-Screens, Multi-OS, Multi-DeviceWindows8Device Coverage
X86, X64 ARM
Windows Pro Windows RT
![Page 5: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/5.jpg)
5
Powered by DENUO
Metro style app user experience wireframeiOS ์ ๋์์ธ๊ณผ Windows8 Modern UI ์ ์ฐจ์ด
Metaphor UI
- ์ค๋ฌผ์ ๋ชจ์ต์ ๋น์ ํ์ฌ ๋์์ธ- ์๋์ ๊ตฌ์กฐ , ์ฅ์์ ์์๋ฅผ ๊ทธ๋๋ก ์ ์งํ์ฌ ๋์์ธ
Modern UI
- Authentically digital ( ์ง์ ํ ํน์ ์ ํต ๋์งํธ )" ๊ฒฝํ- ์ธ์์ ๋ฐ์ฌ๊ด , ์ฅ์์์๋ฅผ ๋ฐฐ์ ํ Flat ๋์์ธ- ์ปจํ ์ธ ์ ์ ๋ณด์ ์ง์คํ๋ ๋์์ธ
![Page 6: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/6.jpg)
6
Powered by DENUO
Anatomy of a Modern UI App Style
![Page 7: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/7.jpg)
7
Powered by DENUO
TilesGridPanorama UXTypography
No, Chrome
Modern UI Style
Summary
![Page 8: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/8.jpg)
8
Powered by DENUO
Modern UI Style
NavigationHierarchy
Hub>Section>Detail
Hub Sec-tion
De-tail
![Page 9: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/9.jpg)
9
Powered by DENUO
Modern UI Style
NavigationFlat
Navigation - ์ปจํ ์ธ ๋ฅผ ํด๋ฆญํ์ฌ Hub>Section>Detail ํ์ด์ง๋ก ์ด๋ - 2 ๋ฒ , 3 ๋ฒ Section, Detail ํ์ด์ง์ ํ์ดํ ์ข์ธก ํ์ดํ๋ฅผ ํตํด ์ด์ ํ์ด์ง๋ก ์ด๋ - ๋ฉ๋ด ์ด๋์ ์๋จ์ Navi Bar ๋ฅผ ์ด์ฉ
1 2 3
Hub Sec-tion
De-tail
![Page 10: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/10.jpg)
10
Powered by DENUO
Modern UI Style
NavigationFlat
Structure - ๋์ผ Depth ์ ํ์ด์ง ์ด๋ : ๋ฉ๋ด ๋๋ ํญ
UX : Navi bar ์ถ๋ ฅ - Touch : ์๋จ ์๋๋ก ๋ฐ๊ธฐ - Mouse : ์ฐํด๋ฆญ
1
1
![Page 11: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/11.jpg)
11
Powered by DENUO
Modern UI Style
NavigationFlat
Navigation - Header Toggle Menu ๋ฅผ ์ด์ฉํด์ Navi ์ฒ๋ฆฌ - ๋ฉ๋ด๋ฅผ ๋ ธ์ถํด์ Navi ์ฒ๋ฆฌ ๊ฐ๋ฅ : ๊ถ์ฅ์ฌํญ์ ์๋
Toggle Menu ์ ํํ 1
Toggle Menu ์ ํํ 2
- App ์ด๋ฆ์์ ์นดํ ๊ณ ๋ฆฌ ๋ฉ๋ด๋ฅผ ๋ ธ์ถํ ์ ์๋ค .- ์นดํ ๊ณ ๋ฆฌ์์ ๊ธฐ๋ฅ ๋ฉ๋ด๋ฅผ ๋ ธ์ถํ ์ ์๋ค : Sorting, ํฌ๊ธฐ์กฐ์ , ์ ๋ ฌ ๋ฑ
- Navi Bar ๋๋ Toggle Menu ์ ๋ํ ๋ค๋น๊ฒ์ด์ ํผ๋์ ์ฐ๋ คํ ํํ- ๋จ , Windows8 ๊ถ์ฅ์ฌํญ์ ์๋
Menu ๋ ธ์ถ ํํ
![Page 12: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/12.jpg)
12
Powered by DENUO
Tiles&Layout
Tile
150x150
310x150
1. App ์ ์คํ์ํค๋ Tile2. Contents ๋ฅผ ํํํ๋ Tile
1. App ์ ์คํ์ํค๋ Tile
- App Store ๋ฑ๋ก ์ 5 ๊ฐ์ง Size ์ Tile ํ์
2. Contents ๋ฅผ ํํํ๋ Tile ์ Size ์ ์ ์ฝ์ด ์์ต๋๋ค . ๋จ , ๊ฐ Tile ์ Grid ์์คํ ์ ์ค์ํ๋๋ก ๊ถ์ฅํ๊ณ ์์ต๋๋ค .
![Page 13: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/13.jpg)
13
Powered by DENUO
Tiles&Layout
Tiles
30x30- Zoom out - Inside ๋ผ์ด๋ธํ์ผ
50x50- ์ฑ์คํ ์ด- ์ฐธ๋ฐ- ์ฑ๋ชจ๋ ๋ณด๊ธฐ
150x150- ์์ํ๋ฉด- ์ ๋ณด ์ ๋ฐ์ดํธ ๊ฐ๋ฅ
310x150- ์์ํ๋ฉด- ์ ๋ณด ์ ๋ฐ์ดํธ ๊ฐ๋ฅ
620x300
- ์ฑ ์คํ์ ๋ก๋ฉ
![Page 14: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/14.jpg)
14
Powered by DENUO
Tiles&Layout
Grid Lay-out
1. Contents ์ Level ์ ๋ฐ๋ผ Tile ์ Size ๊ฒฐ์ 2. Grid ์์คํ ์ ๋ฐ๋ผ Tile Size ๊ฒฐ์ ex) - 50pix>100pix>150pix (O) - 20pix>40pix>60pix>100pix (O) - 20pix>55pix>80pix>120pix (X)
140pix
120pix
50pix
10pix 40pix 10pix80pix
![Page 15: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/15.jpg)
15
Powered by DENUO
Tiles&Layout
Grid Lay-out
Hub
Section
Detail
1
XO
2
44
5
1. Header : App ์ด๋ฆ2. Hub ํ์ด์ง ์นดํ ๊ณ ๋ฆฌ , ์ปจํ ์ธ ํ์ดํ3. Hub ํ์ด์ง์์ ์ด๋ํ Sec-tion ํ์ด์ง์ ํ์ดํ4. Section ํ์ด์ง์์ Back ์ Hub ํ์ด์ง๋ก ์ด๋5. Detail ํ์ด์ง์ ํ์ดํ
3
![Page 16: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/16.jpg)
16
Powered by DENUO
1. ์๋ฌธ Font(SegoeUI) : 12>14>26>56
Typography
![Page 17: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/17.jpg)
17
Powered by DENUO
Typography
1. ๊ตญ๋ฌธ Font( ๋ง์๊ณ ๋ ) : 12>14>26>562. ๊ตญ๋ฌธ Font( ๋ง์๊ณ ๋ ) : 11>12>14>22>42
![Page 18: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/18.jpg)
18
Powered by DENUO
View&Control
View
1. Panorama Full View2. Snap View3. Fill View
Windows8 Modern UI App ์ ๊ธฐ๋ณธ View : Panorama
![Page 19: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/19.jpg)
19
Powered by DENUO
View&Control
View
1. Panorama Full View2. Snap View3. Fill View
Windows8 ์ 2 ๊ฐ์ App ์ ๋์์ ๋์ธ ์ ์์ต๋๋ค . ์ด๋ ํ์ฉํ๋ Snap View
Full view Snap view
- Left Position- 320pix
Snap view Contents
- Full View ์ ์ปจํ ์ธ ๋ฅผ ์์๋๋ก ๋ฐฐ์น
![Page 20: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/20.jpg)
20
Powered by DENUO
View&Control
View
1. Flyout view ์ ํ์ฉ
Full view Flyout view
- Right position- Content, Control ํ๋ฉด์ผ๋ก ํ์ฉ- ๋ก๊ทธ์ธ , ๊ฒฐ์ , ์ฝ๊ด ๋ฑ- 320pix, size ์กฐ์ ๊ฐ๋ฅ
Flyout view : Control Flyout view : Log-in
![Page 21: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/21.jpg)
21
Powered by DENUO
View&Control
View
1. Semantic zoom- Zoom in, zoom out ์ ํตํด ์ปจํ ์ธ ๋ฅผ ์นดํ ๊ณ ๋ฆฌํ ์ํค๋ UX
- ๋ง์ ์ปจํ ์ธ ๋ฅผ ์์ฝํ๋ ํจ๊ณผ- Touch : Pinch and Stretch- Key Board : Ctrl key+Mouse wheel down
Zoom outZoom in
![Page 22: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/22.jpg)
22
Powered by DENUO
View&Control
Control
1. App Bar Control2. Charm Bar Control3. App Control
- App ์ ๋ชจ๋ Control ๊ธฐ๋ฅ์ ์ถ๊ฐ ํ ์ ์์- Touch : ๋์ด์ฌ๋ฆฌ๊ธฐ- Key board : Mouse right click
![Page 23: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/23.jpg)
23
Powered by DENUO
View&Control
Control
1. App Bar Control2. Charm Bar Control : ๊ฒ์ , ๊ณต์ , ์ฅ์น , ์ค์ 3. App Control
Charm Bar : ๊ฒ์
Charm Bar
![Page 24: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/24.jpg)
24
Powered by DENUO
View&Control
Control
1. App Bar Control2. Charm Bar Control : ๊ฒ์ , ๊ณต์ , ์ฅ์น , ์ค์ 3. App Control
Charm Bar : ๊ณต์
![Page 25: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/25.jpg)
25
Powered by DENUO
Metro style app user experience wireframe
Building your Win-dows8 Store App
![Page 26: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/26.jpg)
26
Powered by DENUO
Planning the Windows8 Store AppContent before Chrome
์ปจํ ์ธ ์ ์ง์ค , ๋ถํ์ํ ์์ , ๊ธฐ๋ฅ ์ ๊ฑฐ
Panorama & Snap view beautifully1366 ํด์๋ ๊ธฐ์ค์ด ํ๋ ธ๋ผ๋ง view ๋ก ์ปจํ ์ธ ์ค๊ณ , Snap view ๊ณ ๋ ค
Branding Tiles & GridTile ๊ณผ Grid ๋ฅผ ์ฌ์ฉํ์ฌ Modern ํ๊ฒ ๋์์ธ , App ์ ๋ธ๋๋ฉ์์ ๊ฐ๋ฏธ
Use the right contracts & Semantic zoom๊ฒ์ , ๊ณต์ , Toast Noti, App Bar, Navi Bar ์ ํ์ฉ
![Page 27: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/27.jpg)
27
Powered by DENUO
Live tile
- Secondary tile : 150x150- Primary tile : 310x150- Live tile : 310x150 : ์ ๋ณด ๊ฐฑ์ ๊ฐ๋ฅ
Secondary tile Primary tile
Live tile
![Page 28: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/28.jpg)
28
Powered by DENUO
Splash ScreenSplash Screen
- Splash Screen : 620x300 : ์ฑ ์คํ ํ ๋ก๋ฉ ํ๋ฉด , App ์ ๋ธ๋๋ฉ
![Page 29: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/29.jpg)
29
Powered by DENUO
1. ๋ฉ๋ด ๋ค๋น๊ฒ์ด์ ์ ๊ฑฐ2. ๋ช ๋ น ๊ธฐ๋ฅ ์ ๊ฑฐ3. ๊ฒ์ , ๊ณต์ , ์ค์ ์ ๊ฑฐ4. ์ปจํ ์ธ ํฐ์น ๊ณ ๋ ค6. ์๋ฆผ , ๊ฐ์ ์ ๊ฑฐ
No, Chrome : Web>Windows8 app
![Page 30: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/30.jpg)
30
Powered by DENUO
Hub
Your App BlandCore Value ContentContents and Data Type
![Page 31: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/31.jpg)
31
Powered by DENUO
Section
Your App BlandCore Value ContentContents and Data Type
![Page 32: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/32.jpg)
32
Powered by DENUO
Section
Your App BlandCore Value ContentContents and Data Type
Contents and Data Type ์ ์ฑ๊ฒฉ์ ๋ฐ๋ผ ๋ค์ํ Section ํ์ด์ง๋ฅผ ๋์์ธํฉ๋๋ค .
![Page 33: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/33.jpg)
33
Powered by DENUO
Detail
Your App BlandCore Value ContentContents and Data Type
![Page 34: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/34.jpg)
34
Powered by DENUO
Detail
Your App BlandCore Value ContentContents and Data Type
![Page 35: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/35.jpg)
35
Powered by DENUO
Snap view
Your App BlandCore Value ContentContents and Data Type
![Page 36: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/36.jpg)
36
Powered by DENUO
Live tileHub & Spoke
Hub
Section
DetailSnap view
![Page 37: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/37.jpg)
37
Powered by DENUO
Windows8 Store App Style
![Page 38: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/38.jpg)
Touch to Modernโฆ
AppendixWindows8 Dev Architec-ture
![Page 39: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/39.jpg)
39
Powered by DENUO
Metro style app user experience wireframeWindows8 / Windows Phone 8
Windows 8 Architecture
W8 ModernUI style Apps
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
Syst
em
Serv
ices
JavaScript(Chakra)
CC++
C#VB
XAML HTML / CSSVie
wM
od
el
Contr
olle
r
Windows Core OS ServicesCore
![Page 40: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/40.jpg)
40
Powered by DENUO
Metro style app user experience wireframeWindows8 / Windows Phone 8
W8/WP8 Architectural Reference
Windows 8
ARM Intel
Windows Phone 8Windows RT
WinRT(Common)Phone
Specific Feature
PC Specific Feature
Windows Pro
Application
W8>WP8 ๋ณ๊ฒฝ - Phone Specific : ํด์๋์ ๋ฐ๋ฅธ UI ๋ณ๊ฒฝ - WinRT : W8 ์ ํน์ด ๊ธฐ๋ฅ์ธ ์ฐธ๋ฐ , ์ฑ๋ฐ ๋ฑ์ ๊ฐ๋ฐ๋ ๊ธฐ๋ฅ์ Phone ์ค์ ์ ๋ง๊ฒ ๋ณ๊ฒฝ
![Page 41: Windows8 Modern UI Style Summary](https://reader033.vdocuments.mx/reader033/viewer/2022052507/558ec3791a28aba2468b45f6/html5/thumbnails/41.jpg)
DENUO, Modern UI Design Firmhttp://facebook.com/welcommodernhttp://[email protected]://denuo.co.kr
Thanks,Start, Windows8 Modern Style App