Metro Design
-
Upload
ajen- -
Category
Technology
-
view
737 -
download
4
Transcript of Metro Design
![Page 1: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/1.jpg)
☐ 醬子案例 外部案例 ☐ 新知新事
分享部門: PSBG002主講同仁:陳家健 Ajen分享日期: 2012/10/29
J a m h a Get Our Works Better, Together.S er
Metro Design
![Page 2: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/2.jpg)
Metro Design
![Page 3: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/3.jpg)
METRO DESIGN
The Metro Design PrinciplesThe Metro Design Language
![Page 4: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/4.jpg)
LOVE
![Page 5: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/5.jpg)
♥
![Page 6: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/6.jpg)
Glass
![Page 7: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/7.jpg)
Metro
![Page 9: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/9.jpg)
METRO DESIGN PRINCIPLES
![Page 10: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/10.jpg)
Metro Design Principles
Light, Clean, Open, FastContent, not ChromeTypographyMotionAuthentically Digital
![Page 11: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/11.jpg)
Light, Clean, Open, Fast
![Page 12: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/12.jpg)
Application Flow
![Page 13: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/13.jpg)
Content, not chrome
![Page 14: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/14.jpg)
![Page 15: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/15.jpg)
![Page 16: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/16.jpg)
TYPOGRAPHY
We use typography in different sizes and different weights to convey structured
information
![Page 17: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/17.jpg)
![Page 18: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/18.jpg)
MOTION
![Page 19: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/19.jpg)
AUTHENTICALLY DIGITAL
![Page 20: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/20.jpg)
![Page 21: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/21.jpg)
![Page 22: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/22.jpg)
IN METRO
Users care more about being able to consume information than having “representations of physical world objects” inside their phones.
![Page 23: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/23.jpg)
METRO DESIGN LANGUAGE
![Page 24: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/24.jpg)
Metro Design Principles
Windows Phone Metro Design Language
Windows 8 Metro Design Language
![Page 25: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/25.jpg)
WINDOWS 8 NAVIGATION PATTERNS
![Page 26: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/26.jpg)
Hierarchical system
hub pages
section pages
detail pages
![Page 27: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/27.jpg)
Windows 8 Navigation patterns
hub pages
section pages
detail pages
![Page 28: Metro Design](https://reader034.fdocuments.net/reader034/viewer/2022052618/554a0003b4c905e56c8b4f4c/html5/thumbnails/28.jpg)
Case Study