PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : معرفی زبان طراحی مترو



+Aren
2012/08/01, 23:10
فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. nJhdYdG3T336RtaI_Q35P5OxJ3SazjO1Mb0cJ9w/metro.png

مطلبی که در زیر مشاهده می کنید مربوط به کنفرانس امسال روز کاربردپذیری در تهران هست که در دانشگاه علم و فرهنگ تهران برگزار شد و من در این کنفرانس رابط کاربری جدید مایکروسافت یعنی مترو را معرفی کردم. مترو نام اینترفیس جدیدی است که مایکروسافت در نرم افزارهای جدید خود به کار خواهد برد، از جمله ویندوزفون7، ویندوز8، دشبورد جدید اکس باکس و … در این مقاله سعی می کنم شما را با ویژگیهای این اینترفیس جدید آشنا کنم.
تاریخچه اینترفیس مترو

اگر کمی به قبل باز گردیم ، زمانی که EGA بوجود آمده بود اینترفیس ها به علت محدودیت 16 رنگی که وجود داشت بسیار محدود بوده اند. بعد از آن VGA معرفی شد که بسیاری از این محدودیت هارا از بین برد و اینترفیسها جذابتر و زیباتر شدند. اما به مرور زمان این اینترفیسها کم کم پیچیده تر و شلوغ تر شدند و مشکلاتی را برای کاربران به وجود آوردند. طراحان و برنامه نویسان رابط کاربری به این نکته پی بردند که سادگی در طراحی رابط کاربری می تواند خیلی از مشکلات کاربران را حل نماید. شرکتهای بزرگی مثل مایکروسافت ، اپل و گوگل هم این اصل را سعی کردند در طراحیهای خودشان رعایت کنند.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. tRzgG8ZOZC2XSCVz4NyRD0yJjfISgqChpaBUwiw/metroHistory1.PNG

امروزه سعی می شود تا جایی که امکان دارد کاربردپذیری در محصولات مختلف رعایت شود، بیشتر کاربرانی که از وسایل و نرم افزارهای مختلف امروزی استفاده می کنند زمان زیادی برای یادگیری نحوه کار با آنرا ندارند و می خواهند هر چه سریعتر کار مورد نظرشان را از طریق آن وسیله یا نرم افزار انجام دهند. یکی از این وسایلی که هر روز به تعداد کاربران آن افزوده می شود موبایل است. مایکروسافت نسبتا سابقه طولانی در ارائه سیستم عامل موبایلهای هوشمند دارد، برای مدتی هم سیستم عامل این شرکت خوب عمل می کرد اما به همین دلایلی که گفتم این سیستم عامل در حال حاضر پاسخگوی نیاز بیشتر کاربران نمی باشد.
تصویری که در زیر مشاهده می کنید مربوط به سیستم عامل ویندوزموبایل است که سالها مورد استفاده کاربران قرار می گرفت اما در حال حاضر این اینترفیس به دلیل مشکلاتی که ذکر کردم کاربردی نیست !


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. r2nBGYZDhSiKsamLcNyly2dQ617bn9lrwCtGukA/metroHistory2.PNG

اینترفیس سایر سیستم عاملهای موبایل

آنها سیستم عاملهای مختلف موجود را کنار هم گذاشتند و با هم مقایسه کردند، همه آنها در اینترفیس ظاهر نسبتا مشترکی داشتند، یکسری آیکان که پشت سر هم لیست شده بودند، اما آیا واقعا کاربران نیاز به یک سیستم عامل دیگه ای داشتند که همین ویژگیهارا با کمی ظاهر متفاوت به آنها ارائه کند ؟ مسلما اینطور نبود، مایکروسافت راه متفاوتی را شروع کرد.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. TZtzOYuGVwDwEJhAxlD1eTLBinmghVWy4zQ2cVQ/otherMobiles.PNG

همانطور که در تصویر مشاهده می کنید وقتی این اینترفیسها کنار هم قرار می گیرند همگی در یک ویژگی شباهت دارند و آن این می باشد که یکسری آیکان مربع شکل کنار هم قرار گرفته اند و کاربر با فشردن هر یک از آنها یک عمل خاصی را انجام می دهد.

ایده مترو از کجا آمد ؟


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. VuepBsWCa-6Jf0Bpt-9KYINs8r2fyJyN_s_CXFQ/metroIdea.png

ما ایده اینترقیس مترو از کجا نشات گرفت ؟ شاید برای شما هم پیش آمده باشد که وقتی وارد یک کشوری می شوید که با فرهنگ و زبان آنها آشنا نیستید ولی در فرودگاه، ایستگاه مترو، اتوبوس، قطار و … با علایم و تابلوهایی روبرو می شوید که برای شما خیلی راحت قابل درک هستند و شما به سرعت معانی آنها را درک می کنید، این علایم دارای ویژگیهایی همچون تایپوگرافیهای بزرگ، whitespace های زیاد و … می باشند. اینترفیس مترو بسیار شبیه این علایم می باشد و ایده آن هم بسیار شبیه این علایم و نوشته ها می باشد.
مترو زبان طراحی مایکروسافت است. به این دلیل مترو نامیده می شود که مدرن و تمیز است. سریع و در حال حرکت است. درباره محتوی و تایپوگرافی است و واقعا قابل اعتماد است.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. j1xQZ9i83m14fiJNnRuMDMcJRdrBJGfDBumllCw/metroIs.PNG

اینترفیس های ویندوزفون 7

مایکروسافت ایده های بسیار مختلفی را برای ایجاد این اینترفیس آزمایش کرد، تصویری که در زیر مشاهده می کنید نمونه ای از این ایده های متنوع است.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.

اینترفیس نهایی ویندوزفون 7

اما در نهایت اینترفیس نهایی ویندوزفون 7 مانند شکل زیر شد.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.

ساده و تمیز


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. ZvHouEhXYzWcncech9-y1A/metroSimpleClean.jpg

در اینترفیس مترو دیگر خبری از دکمه های 3 بعدی و برجسته، انعکاسها، گرادیانتها و … نیست. همه چی ساده و تمیز و در عین حال کاربردی هست. از whitespace ها به خوبی استفاده شده است و تایپوگرافی نقش بسیار برجسته ای دارد.

Infographic در برابر iconographic

تفاوت اصلی اینترفیس مترو با سایر اینترفیسها در این است که در سایر اینترفیسها کاربر با یکسری علایمی روبرو می شود که عمدتا از ابزار و اشیای دنیای واقعی برگرفته شده اند و ممکن است کاربر کمی زمان لازم داشته باشد تا با عملکرد و ویژگی هر یک از آنها آشنا شود و با فشردن هر یک از آنها یکسری اطلاعات در اختیار او قرار می گیرد. به این سیستم iconographic گفته می شود.
اما در اینترفیس مترو این خود محتوی هست که کاربر با آن سروکار دارد. محتوی مستقیم و بدون واسطه به کاربر ارائه می شود. کاربر با اجرای پیچیده و زاید گرافیکی گمراه و سردرگم نمی شود ، از whitespace ها به خوبی استفاده شده است تا کاربر به راحتی بتواند محتوی مورد نظر خود را پیدا کند. برای همین به آن infographic گفته می شود.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. HcI55Zk6dY2LFi_Zcuo5R0e4fNMVpeit40DBTuQ/infographic.png

خیلی راحت می توان متوجه شد که با این کار خیلی از مسایل کاربردپذیری حل شده است و ارتباط کاربر با دستگاه خود بسیار راحت تر شده است.

ویژگیهای اینترفیس مترو

تمیز ، سبک ، باز ، سریع
تایپوگرافی
متحرک و زنده
محتوی مهم تر از ظاهر
قابل اعتماد

تمیز ، سبک ، باز ، سریع

تجربه کاربر هنگام کار با این اینترفیس سریع و همراه با علاقه می باشد
کاربر روی کارهای اصلی که میخواهد انجام دهد تمرکز می کند
کاربر کارهایش را با کمترین کار اضافی انجام می دهد
اجزای غیر ضروری که کاربر را از هدف خودش دور کند حذف شده است
از whitespace ها به خوبی استفاده شده است
از تمام فضای موجود در صفحه استفاده می شود

تایپوگرافی

تنها خوانایی متن مهم نیست، تایپوگرافی زیبا است و از آن میتوان به خوبی در اینترفیس استفاده کرد
اطلاعات مورد نیاز کاربر سریع و راحت و مستقیم به کاربر ارائه می شود


متحرک و زنده

توسط حرکت کاربر تشویق به انجام عملی می شود
به محتوی این امکان را می دهد که کاربردپذیرتر باشد
به محتوی ارائه شده بعد می دهد
توسط حرکت کاربر می تواند قسمتهای مختلف سیستم را مشاهده کند


محتوی مهم تر از ظاهر

کاربر از طریق خود محتوی جذب می شود نه از طریق کارهای گرافیکی اضافه
از المانهای گرافیکی که به محتوی ربطی ندارند کاسته می شود
خود محتوی همان رابط کاربری می باشد
کاربر به راحتی می تواند با خود محتوی ارتباط برقرار کند

قابل اعتماد

طراحی برنامه های مترو متناسب با کارکردشان باید باشد
نباید اطلاعاتی را که مربوط به برنامه نیست در آن گنجانده شود
با کاربران باید رو راست باشد و آنچه را که واقعا می تواند در اختیارشان بگذارد باید ارائه دهد

2 نکته مهم در اینترفیس مترو

ینترفیس مترو روی کاربر و کارهایی که می خواهد انجام دهد تمرکز کرده است
اینترفیس مترو کمک می کند که اطلاعات و برنامه های کاربر دسته بندی شود

+Aren
2012/08/01, 23:29
صفحه ورودی ، صفحه کاربر


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. ccDM8XaCzsxrhNmfQDRZVHqaDbMqK7rYDbxrAOA/metroHome.png

یکی دیگر از نکات کاربردپذیری که در طراحی اینترفیس مترو رعایت شده است در صفحه اول یا همان Start Screen قابل مشاهده است.
کاربر وقتی وارد این صفحه می شود به سرعت و به راحتی همه اطلاعاتی را که نیاز دارد و خودش چیدمان آنها را بسته به علایق و نیازهای خود مرتب کرده است را در یک صفحه مشاهده می شود.
کاشیهای زنده یا همان Live Tile ها اطلاعات مورد نیاز کاربر را به روز می کنند و به او نشان می دهند بدون اینکه نیاز باشد کاربر برنامه ای را اجرا کند و وارد آن بشود تا اطلاعات مورد نیاز خود را بدست آورد.

Live Tile


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. xIs4aQ/livetiles.jpg

Live Tile ها در اینترفیس مترو تنها فقط یک آیکان نیستند، آنها علاوه بر نشان دادن آیکان و نام برنامه می توانند اطلاعات مهم درخواستی کاربر را روی صفحه اصلی نشان دهند.
هر برنامه ای می تواند بسته به اطلاعاتی که در اختیار کاربر می گذارد از این امکان استفاده کند و در صفحه اصلی قرار گیرد. کاربر بدون نیاز به اجرای آن برنامه با دیدن آن می تواند اطلاعات مورد نیاز خود را به دست آورد.

هاب در مترو


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.

یکی دیگر از قابلیتهای اینترفیس مترو استفاده کردن از هاب ها می باشد، هاب جایی است که کاربر می تواند همه اطلاعات مورد نیاز خود را در یک جا مشاهده کند بدون آنکه بخواهد برنامه های مختلف را اجرا کند و از آن خارج شود و وارد برنامه دیگری شود.
برای مثال همه عکسهای شما در یک قسمت قرار دارند و عکسهای دوستان شما هم از شبکه های اجتماعی مختلف در این هاب نمایش داده می شوند. از طریق همین هاب می توانید در مورد عکسهای دوستان خود نظر هم بدهید و با آنها ارتباط داشته باشید.
لیست دوستان شما در People Hub قرار دارد، همه اطلاعات تماس بعلاوه تازه های دوستان شما در شبکه های اجتماعی مختلف در این هاب قرار دارد. شما از همین هاب می توانید با آنها به راحتی مکاتبه کنید.
می بینید که به راحتی چند مرحله از کارهای اضافی کاربر کم شده است و او به سرعت می تواند در یک محل اطلاعات خود را به دست آورد. آسان تر کردن کار کاربر یکی از نکات مهم کاربردپذیری است.

هاب و تک صفحه


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. VmdIR6hlBRWLmR-MVGwaIW64I4GOSdqNurQLpVg/hubPage.png

هابها وقتی استفاده می شوند که اطلاعات متفاوتی را بخواهند از منابع مختلف نشان بدهند.
برای مثال در عکس فوق برنامه ای برای دریانوردی مشاهده می شود که چندین قسمت دارد و اطلاعات مختلفی را از جاهای مختلف جمع آوری می کند و به کاربر ارائه می دهد ولی در سمت راست برنامه یک صفحه ای ساده ای را مشاهده می کنید که کار آن فقط نمایش وضعیت آب و هوا می باشد

استفاده از رنگ


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. rfEvVlCXRvSV-S5u-JCZBly2FLLsoMFzgRAp-tQ/metroColor.png

در اینترفیس مترو رنگ اهمیت ویژه ای دارد، از رنگها برای جذب کردن کاربر ، شخصی سازی تجربه کاربر و اهمیت دادن به مراتب کار استفاده می شود.

استفاده از تایپوگرافی


استفاده از تایپوگرافی

کلمات برای کاربر باید خوشایند به نظر برسند
به تناسب، سنگینی و اندازه باید اهمیت داده شود




همانطور که مشاهده می کنید در 3 قسمت مختلف چگونه به اندازه، وزن و تناسب فونت ها دقت شده است.
وقتی یک عنوان در یک صفحه کامل جا نشده است به کاربر می گوید که با حرکت دادن صفحه می تواند به اطلاعات بیشتری دسترسی پیدا کند.

استفاده از حرکت

از حرکت برای ایجاد اشتیاق در کاربر باید استفاده شود
توجه به این نکته اهمیت دارد که توازن در استفاده از حرکت خیلی مهم است، استفاده بیش از اندازه از حرکت تاثیر آنرا از بین می برد




برای مثال وقتی به سینما می روید اگر یک فیلم از شروع تا انتها پر از صحنه های اکشن باشد برای شما هیچ جذابیتی نخواهد داشت، استفاده بیش از حد از حرکت کاربر را خسته می کند.

استفاده آسان


برای کاربر تجربه ثابت و قابل پیش بینی را باید در نظر گرفت
آشنا بودن برابر است با سادگی در استفاده




وقتی کاربر با برنامه ای در سیستم مترو کار می کند باید این نکته را در نظر گرفت که تا جایی که ممکن است رفتار برنامه شبیه به رفتار خود سیستم عامل باشد تا کاربر دچار سردرگمی نشود.

استفاده از آیکانها

+Aren
2012/08/01, 23:32
فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. y0GJGv7k0NwCC-qTUj7GCBRKY4HFyp52Poa2WcA/metroIcons.png

آیکانهایی که در منوی برنامه ها استفاده می شود باید ثابت و یکسان باشند
آیکانها را باید با کاربران مختلف تست و به مفاهیم توجه کرد




وقتی برنامه ای برای اینترفیس مترو ساخته می شود اگر منوی آن عملکردی مشابه یکی از عملکردهای سیستمی دارد باید از آیکانهای از پیش تعریف شده که در سیستم استفاده می شود استفاده کند، اما اگر این آیکانها متناسب کار برای آن عملکرد نیستند بهتر است مفهوم آنرا در نظر گرفت و با چند کاربر مختلف آنرا تست کرد.

مترو در دیگر برنامه های مایکروسافت

از این به بعد باید شاهد اینترفیس مترو در سایر نرم افزارهای مایکروسافت باشیم، همانطور که در تصاویر زیر مشاهده می کنید اینترفیس مترو در نرم افزار Zune Media Player و نسخه آینده ویندوز و همینطور در دشبورد جدید XBOX قابل مشاهده است.


فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.
فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. nKaamHgFX8_Amsj3BL1JW3RScM9jPEJAy-JGTpw/metroWin8.png
فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. BoEkCIMcReRT_NkGEdJ8zkvxYc0-Jusguz9QgNw/metroXBOX.jpg

نویسنده: فرشاد ذوالفقاری
منبع (فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.معرفی-زبان-طراحی-مترو/)

VSH-Katana
2012/08/01, 23:59
به نظرت روح الله این رابط مترو روی ابزار های غیر لمسی هم میتونه موفق باشه؟ مثل pc

+Aren
2012/08/02, 00:11
به نظرت روح الله این رابط مترو روی ابزار های غیر لمسی هم میتونه موفق باشه؟ مثل pc
بله!
چرا که نه!
با گجت هایی که بعد از عرضه معرفی خواهند شد!


موس تاچ مایکروسافت

فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.

در نهایت مایکروسافت موس لمسی مشهورش را به روز رسانی می کند و در نسخه جدید، از حرکات لمسی ویندوز ۸ پشتیبانی خواهد کرد و این شامل مولتی تاچ نیز خواهد بود. این موس با قیمت ۸۰ دلار به فروش میرسد

Yaser_Aramesh
2012/08/04, 23:33
فقط کاربران عضو قادر به مشاهده لینک‌ها هستند.

Yaser_Aramesh
2013/06/04, 13:35
واقعا رابط کاربری مدرن مایکروسافت در ویندوزفون استثنایی و خاص هست .

رابط کاربری مدرن ویندوز 8 هم که با آمدن آپدیت 8.1 (فقط کاربران عضو قادر به مشاهده لینک‌ها هستند. 9%81%D8%AA-%D8%A7%D8%B9%D9%84%D8%A7%D9%85-%D8%B4%D8%AF) قابلیت های شخصی سازی خوبی نصیبش خواهد شد

روند مایکروسافت بسیار عالی هست . تعداد نرم افزارها و بازی ها هم که برای ویندوزفون با سرعت نسبتا مناسبی در حال افزایش هست و با توجه به پشتیبانی ویندوزفون از DirectX 11 در آینده , شاهد بازی های بسیار باکیفیت و سطح بالایی خواهیم بود.