مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10
-
Upload
khalil-saleem -
Category
Mobile
-
view
41 -
download
4
Transcript of مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10
![Page 1: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/1.jpg)
Windows Design LanguageMetro Style
خليل سليمASP.NET , Windows Phone , WPF, Silverlight,
Windows Store
://http . /about me khalilsaleem
![Page 2: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/2.jpg)
New united design style
Windows 8 , Windows Phone and
more
![Page 3: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/3.jpg)
Examples ثم كيف تحول تصميم عادي إلى
تصميم ميترو
![Page 4: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/4.jpg)
![Page 5: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/5.jpg)
![Page 6: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/6.jpg)
![Page 7: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/7.jpg)
Metro Principles
![Page 8: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/8.jpg)
For Good Reasons
Smart Design
Integrated Experiences
![Page 9: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/9.jpg)
![Page 10: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/10.jpg)
METRO principlesClean, light, openContent not chromeEmotion thru motionGreat typographyHonest
METRO
![Page 11: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/11.jpg)
اصنع تطبيقات خالبة•
مباشرة ومركزة•
المحتوى قبل الغالف•
اصنع أكثربأقل جهد
![Page 12: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/12.jpg)
![Page 13: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/13.jpg)
Metro
![Page 14: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/14.jpg)
ConceptsPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
![Page 15: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/15.jpg)
Title
![Page 16: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/16.jpg)
![Page 17: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/17.jpg)
![Page 18: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/18.jpg)
![Page 19: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/19.jpg)
![Page 20: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/20.jpg)
Principle: Clean, Light, Open, Fast
Feels Fast and ResponsiveFocus on Primary TasksDo a Lot with Very LittleDelightful Use of Whitespac
![Page 21: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/21.jpg)
Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale
![Page 22: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/22.jpg)
Typography
Make words feel welcome
Pay attention to balance, weight & scale
![Page 23: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/23.jpg)
Principle: Alive in Motion
Feels Responsive and AliveGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UI
![Page 24: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/24.jpg)
Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly
![Page 25: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/25.jpg)
Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct
![Page 26: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/26.jpg)
Principles
Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital
![Page 27: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/27.jpg)
Metro User Experience
Focuses on the individual and their tasks
Helps organize information and applications
![Page 28: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/28.jpg)
Color
Use color to delight the userUse color to personalize experienceUse color to emphasize hierarchy
![Page 29: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/29.jpg)
TouchRecommended touch target size is 9mm
Minimum touch target size is 7mm
Minimum spacing betweenelements is 2mm
Visual size is 60-100% of the touchtarget size
![Page 30: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/30.jpg)
Common controls
![Page 31: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/31.jpg)
Iconography
Icons in the application menu should be consistent
Test icons with users(pay attention to context)
![Page 32: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/32.jpg)
![Page 33: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/33.jpg)
![Page 34: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/34.jpg)
![Page 35: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/35.jpg)
![Page 36: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/36.jpg)
![Page 37: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/37.jpg)
![Page 38: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/38.jpg)
![Page 39: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/39.jpg)
Orientation
Landscape
Portrait
![Page 40: مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10](https://reader035.fdocuments.us/reader035/viewer/2022062320/55c40a6dbb61ebc8278b4607/html5/thumbnails/40.jpg)
شكرا لكم