برچسب: رابط گرافیکی کاربر

معرفی بازیهای آنلاین فلش – Gibbets 2 LevelPack

یکی از بهترین منابع آموزشی برای طراحان حرفه‌ای فلش، بررسی و تحلیل پروژه‌ها و کارهای حرفه ای دیگران است. در این زمینه، بررسی بازیهای طراحی شده با فلش، جزء بهترین، آموزنده ترین و مفرح ترین تمرین‌ها قرار میگیرند.

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

 از این پس سعی می‌کنم که به معرفی برخی از بازیهای معروفی که با استفاده از تکنولوژی Flash طراحی شده‌اند بپردازم.

معیار بازیها به صورت زیر است:

–          طراحی و رنگ‌بندی حرفه‌ای (Design)

–          جلوه های صوتی مناسب (Sound Effects)

–          سرعت اجرا و کارایی مناسب (Performance)

–          رابط کاربری مناسب (User Interface)

–          داستان و روند اجرای ترغیب کننده (Plot)

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

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


مخفی کردن یک برنامه AIR از Taskbar ویندوز

در زمان طراحی یک برنامه AIR، سه حالت مختلف برای تنظیم شکل پنجره برنامه در زمان اجرا وجود دارد: 
  –   System Chrome: همان پنجره استاندارد است.
  –   (Custom Chrome (Opaque: کادر پنجره حذف میشود.
  –   (Custom Chrome (Transparent: زمینه محو شده و پنجره حالت skin پیدا میکند.
 متاسفانه هیچ کدام از سه حالت فوق، دارای تنظیمات فرعی برای عدم نمایش نام یا دکمه برنامه در نوار وظیفه ویندوز (Taskbar) نیستند. حال آنکه وجود چنین قابلیتی برای ابزارک‌هایی که با AIR نوشته می‌شوند، کاملا حیاتی است.
راه حل این مشکل، استفاده از کلاس flash.display.NativeWindow و ساخت یک پنجره جدید با شکل و حالت دلخواه و در نهایت، انتقال محتوای شئ root یا stage از انیمیشن فعلی به آن است.
حالت پنجره‌ای که باعث عدم نمایش نام برنامه در Taskbar می‌شود، مقدار UTILITY در کلاس flash.display.NativeWindowType در زمان NONE بودن خاصیت systemChrome است.
روش کار به این صورت است:
  1. پنجره فعلی را می‌بندیم.
  2. شئ جدیدی از کلاس NativeWindowInitOptions ایجاد کرده و تمام تنظیمات مورد نظر را در آن اعمال می‌کنیم.
  3. پنجره جدیدی از کلاس NativeWindow ایجاد کرده و کلاس تنظیمات را به آن منتقل می‌کنیم. (تنظیمات NativeWindow به صورت مستقیم قابل تغییر نیستند، حتما باید از یک کلاس واسطه استفاده شود)
  4. ابعاد و موقعیت پنجره را تنظیم می‌کنیم.
  5. محتوای انیمیشن را به پنجره جدید منتقل کرده و پنجره را فعال می‌نماییم.
کد:

stage.nativeWindow.close();

var nwOptions:NativeWindowInitOptions = new NativeWindowInitOptions();

nwOptions.type = NativeWindowType.UTILITY;
nwOptions.systemChrome = NativeWindowSystemChrome.NONE;
nwOptions.transparent = true;

var newWindow:NativeWindow = new NativeWindow(nwOptions);

newWindow.stage.align = stage.align;
newWindow.stage.scaleMode = stage.scaleMode;
newWindow.stage.stageWidth = stage.stageWidth;
newWindow.stage.stageHeight = stage.stageHeight;

for (var i:int = 0; i < stage.numChildren; i++) {
newWindow.stage.addChild(stage.getChildAt(i));
}

newWindow.activate();

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

  • مدت زمان نمایش صفحه Splash را به گونه‌ای تعیین کنید که کاربر فرصت کافی برای نوشیدن چای پیدا کند.
  • از آیکون‌های دوست داشتنی و عاشقانه مانند قلب تیر خورده، چشم خمار و … استفاده کنید.
  • هشدارها و پیامهای مهم برنامه را به صورت Tooltip نمایش دهید.
  • از ساخت صفحات تغییر و نمایش تنظیمات برنامه اجتناب کنید، چرا که برای کاربران، ویرایش فایلهای ini در Notepad دلچسب‌تر است.
  • عملیات تمام کنترل‌های بصری فرم را در رویداد Double Click آنها تعریف کنید. به یاد داشته باشید که دو بار کلیک کردن، مطمئن‌تر از یک بار کلیک است.
  • تمام فرمها و کادرهای محاوره‌ای را به صورت Full Screen نمایش دهید. محتوای آنها باید به خوبی دیده شود.
  • از قلم “ایران نستعلیق” برای نمایش متن منوها، دکمه‌ها، پیامها (و هر متن دیگر) استفاده کنید.
  • فرمهای برنامه را با استفاده از رزولوشن 3800*4550 طراحی کنید.
  • به جای استفاده از Menubar در بالای فرم، گزینه‌های مذکور را به صورت آیکونهای رنگی در Systemtray نمایش دهید.
  • تمام راهنمای برنامه را می‌توان در یک صفحه About چندصد خطی نمایش داد. نیازی به راهنمای مجزا نیست.
  • میانبر (shortcut) برنامه را در تمام فولدرهای خصوصی کاربر کپی کنید.
  • پس از هر بار اجرای برنامه، با نمایش فرم برنامه در یک مکان تصادفی، کاربر را شگفت زده کنید.
  • رنگ زمینه فرمها باید در یک تایمر و با استفاده از تکنولوژی فوق پیشرفته (RGB(Rnd, Rnd, Rnd تغییر کند. رنگهای ثابت خیلی کسل کننده هستند.
  • استفاده از آیکونهای متحرک GIF در دکمه‌ها و هر جای دیگر فراموش نشود.
  • وجود Easter Egg در برنامه از خود برنامه مهمتر است.
  • پس از اجرای برنامه، با نمایش یک صفحه کنسول cmd به صورت AlwaysOnTop، آماده دریافت دستورات کاربر باشید.
  • برای جلوگیری از خیره شدن کاربر به صفحه و ضعیف شدن چشم او، سایز قلمها را به صورت تصادفی تغییر دهید.
  • فراموش نکنید که متن سفید در زمینه مشکی، زیباتر از متن مشکی در زمینه سفید است.
  • در صورت امکان، طراحی رابط کاربر را به کودک خردسالتان بسپارید.

طراحی واسط کاربری در GUI Design Studio و Microsoft Visio

نرم افزارهای Microsoft Visio و GUI Design Studio دو برنامه معروف در زمینه طراحی واسط گرافیکی کاربر هستند.
در ذیل به برخی از ویژگیهای هرکدام از آنها اشاره می‌شود:1. Visio

– Visio بخشی از بسته نرم‌افزاری معروف Office از شرکت Microsoft است که میتوان آن را یک نرم‌افزار همه کاره تصور کرد.

– این برنامه قابلیت ترسیم انواع و اقسام نمودارها و چارتها و نقشه‌ها و … را دارد. از جمله نقشه ساختمان، لوله کشی، سیستمهای امنیتی، انواع فلوچارت، مدل و شمای پایگاه داده (مثل SQL)، شماتیک و نقشه مدارهای الکتریکی و الکترونیکی، قطعات مکانیکی، آرایش و مدل شبکه‌های کامپیوتری، کنترل پروژه (مثل MS-Project) و گانت چارت، تحلیل نرم‌افزار و UML (حتی بهتر از Rational Rose)، نقشه سایت (Sitemap) و واسط گرافیکی کاربر و …

(ادامه مطلب…)


نکاتی در رابطه با طراحی رابط گرافیکی کاربر (GUI)

  • از دکمه‌ها، آیکونها، کادرها و تصاویر زیبا استفاده کنید.
  • هیچگاه آیکونهای موجود و دردسترس خود را بین دکمه‌های گرافیکی و Toolbar تقسیم نکنید، بلکه با توجه به محتوا و کار آن دکمه، به دنبال زیباترین و بهترین آیکون جستجو کنید.
  • از امتحان کردن ترکیب رنگهای متفاوت ترسی نداشته باشید (از رنگهای لایت و ملایم استفاده کنید). ایده جذاب و مناسب به راحتی خلق نخواهد شد.
  • اصوات را فراموش نکنید (یعنی نه کاملا). هرچند که تا کنون کمتر برنامه‌نویسی را دیده‌ام که به ایجاد اصوات و جلوه‌های صوتی سفارشی برایDesktop Application خود فکر کند، اما اصوات مناسب و بجا، زیبایی خاصی به برنامه خواهند داد. (البته ممکن است کاربر مذکور پس از شنیدن اصوات مورد نظر، تصور کند که EasterEgg برنامه شما را پیدا کرده است.)
  • در صورت امکان (با توجه به محتوای برنامه) از پوسته (Skin) استفاده کنید. البته منظور من به هیچ وجه استفاده از پوسته‌های عجیب و غریبی که گاها در بعضی از ابزارها و tools ها دیده می‌شوند نیست.
    فکر نمیکنم هیچ کارمند یا کاربری (ایرانی) تمایل به استفاده از یک برنامه اداری با پوسته MacOS یا Win3.1 داشته باشد. همچنین گرد کردن (اینقدر که گاها دکمه مستطیل را به بیضی تبدیل می‌کنند) و شفافیت بیش از حد دکمه‌ها و فرمها، نتیجه‌ای معکوس خواهد داشت. استفاده از پوسته به شرطی مجاز است که کاربری برنامه را مختل نکند.

(ادامه مطلب…)



  • آرشیو:

  • .
    Copyright (c) 2010 www.mshams.ir