Scroll to top

طراحی رابط گرافیکی کاربر برای ویندوز مترو – قسمت نخست


مهدی خدادادی - دسامبر 30, 2011 - 2 دیدگاه

زمان تقریبی برای مطالعه: ۶ دقیقه

مدتی است که ماکروسافت Windows Phone 7 را با رابط گرافیکی جدیدش به بازار عرضه کرده است . این رابط گرافیکی کاربر[۱٫ Graphic User Interface-GUI] را ما با نام ” مترو” می شناسیم . اهمیت این طراحی انقلابی و همینطور استفاده از مترو در ویندوز بعدی ماکروسافت ، موسوم به ویندوز ۸[۲٫ ویندوز هشت تنها یک اسم رمز است و ممکن است تغییر کند . اسم رمز نامی است که یک نرم افزار را قبل از نام گذاری رسمی به آن نام می شناسند] ، ما را بر آن داشت تا به بررسی این “رابط گرافیکی کاربر ” بپردازیم .

نمایی از Windows Phone 7

نمایی از Windows Phone 7

 

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

طراحان باید مراقب چه چیزی باشند ؟

نخست آنکه این یک رابط گرافیکی جدید برای خلق و بسط ایده هایی جدید است . زمانی که برای نخستین بار رابط گرافیکی ” مترو ” را در WP7 دیدم ، دریافتم که یک تغییر و جسارت بزرگ در راه است . برای بسیاری از کاربران که به رابط گرافیکی قبلی ماکروسافت ، عادت کرده بودند ، ” مترو ” یک جهش ناخوشایند است . اما برای من و دوستانم که اصول طراحی گرافیک ، شیوه نگاه ماست ، “مترو ” یک رابط گرافیکی درست و بسیار مناسب است . وقت آن رسیده است که طراحان با استفاده از ” مترو ” نحوه نگرش مردم را تغییر دهند و واقعا در عمل نشان دهند که کارها چقدر راحت تر و لدت بخش تر شده است .

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

اگر مایلید در مورد رابط گرافیکی مترو بیشتر بدانید ، در ادامه با ما همراه باشید .

روشی جدید برای طراحی :

تیم توسعه “مترو ” کلید طراحی را در “تایپوگرافی” [۳٫ حروف نگاری یا تایپوگرافی فرآیندی است که در آن حروف و کلمات در کنار هم یک تصویر را در ذهن مخاطب شکل می دهند . تصویر حاصل از حروف می تواند با معنی حروف ارتباط داشته باشد یا اینکه بی ارتباط باشد . در تایپوگرافی به این نکته توجه داده می شود که حروف خود تصویر هستند .]یافته است . کاری که مترو می کند این است که تمام عناصر اضافی را تا سر حد ممکن از طراحی حذف می کند و بر “محتوا” تاکید می کند . در رابط گرافیکی سنتی ، ما از گرافیک و اشکال استفاده می کردیم تا به ” محتوا” برسیم . اما در مترو محتوا همان رابط گرافیکی و رابط گرافیکی همان محتوا است .

 

تایپوگرافی کلید اصلی در سامان دادن محتوا است . “جوزوف مولر” در این باره می گوید :

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

 

همه این ها در کنار هم تجربه ای شبیه به نقشه خوانی را به یاد کاربر می آورد . در نقشه ها شما برای پیدا کردن یک مکان خاص نیاز به خواندن دارید . برچسب ها نام هر مکان را در نقشه مشخص می کنند نه شکل ها .

چینش جدید برای محتوا :

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

نمایی گرافیکی از نقشه متروی تهران

نمایی گرافیکی از نقشه متروی تهران

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

 

هدف UI مترو تاکید بر مطالب مهم است و این کاربر است که تصمیم می گیرد در چه مطلبی غرق شود و چه مطلبی را نادیده بگیرد . همه این موارد در کنار هم در مترو امکان پذیر است . ساختار مترو به داشبورد شباهت دارد . همه چیز در دسترس شماست .

_______________

مطالب مرتبط

2 دیدگاه

  1. مرسی ب جرات میتونم بگم مطالبی که درباره چینش مترویی خوندم یه طرف این نوشته یه طرف دیگه، دست مریزاد.

  2. فرزانه رفیعی

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

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *