مقدمة إلى نمط تصميم ميترو للويندوز فون 8 و 10
TRANSCRIPT
Windows Design LanguageMetro Style
خليل سليمASP.NET , Windows Phone , WPF, Silverlight,
Windows Store
://http . /about me khalilsaleem
New united design style
Windows 8 , Windows Phone and
more
Examples ثم كيف تحول تصميم عادي إلى
تصميم ميترو
Metro Principles
For Good Reasons
Smart Design
Integrated Experiences
METRO principlesClean, light, openContent not chromeEmotion thru motionGreat typographyHonest
METRO
اصنع تطبيقات خالبة•
مباشرة ومركزة•
المحتوى قبل الغالف•
اصنع أكثربأقل جهد
Metro
ConceptsPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
Title
Principle: Clean, Light, Open, Fast
Feels Fast and ResponsiveFocus on Primary TasksDo a Lot with Very LittleDelightful Use of Whitespac
Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale
Typography
Make words feel welcome
Pay attention to balance, weight & scale
Principle: Alive in Motion
Feels Responsive and AliveGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UI
Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly
Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct
Principles
Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital
Metro User Experience
Focuses on the individual and their tasks
Helps organize information and applications
Color
Use color to delight the userUse color to personalize experienceUse color to emphasize hierarchy
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
Common controls
Iconography
Icons in the application menu should be consistent
Test icons with users(pay attention to context)
Orientation
Landscape
Portrait
شكرا لكم