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

۹ دی ۱۳۹۰

مدتی است که ماکروسافت Windows Phone 7 را با رابط گرافیکی جدیدش به بازار عرضه کرده است . این رابط گرافیکی کاربر۱ را ما با نام ” مترو” می شناسیم . اهمیت این طراحی انقلابی و همینطور استفاده از مترو در ویندوز بعدی ماکروسافت ، موسوم به ویندوز ۸۲ ، ما را بر آن داشت تا به بررسی این “رابط گرافیکی کاربر ” بپردازیم .

نمایی از Windows Phone 7

نمایی از Windows Phone 7

 

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

 

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

_______________

  1. Graphic User Interface-GUI
  2. ویندوز هشت تنها یک اسم رمز است و ممکن است تغییر کند . اسم رمز نامی است که یک نرم افزار را قبل از نام گذاری رسمی به آن نام می شناسند
  3. حروف نگاری یا تایپوگرافی فرآیندی است که در آن حروف و کلمات در کنار هم یک تصویر را در ذهن مخاطب شکل می دهند . تصویر حاصل از حروف می تواند با معنی حروف ارتباط داشته باشد یا اینکه بی ارتباط باشد . در تایپوگرافی به این نکته توجه داده می شود که حروف خود تصویر هستند .

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

  • میلاد گفته است: شهریور ۱۹, ۱۳۹۱ در ۹:۲۷ ب.ظ

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

    پاسخ
  • فرزانه رفیعی گفته است: دی ۲, ۱۳۹۱ در ۸:۲۵ ق.ظ

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

    پاسخ
  • بنویسید و افتخار دهید تا بخوانیم :

    pixeler pixeler