- آموزش طراحی وب - http://www.iranweblearn.com -

نوار پیشرفت و یا Progress Bar چیست + ۲۵ نمونه خلاقانه

سلام به شما دوستان عزیز ،

در این نوشته قصد دارم در مورد نوار پیشرفت و یا Progress Bar صحبت کنم و برای درک بیشتر شما عزیزان ۲۵ نمونه خلاقانه از این المنت مهم طراحی صفحات وب رو با شما به اشتراک بگذارم پس با من همراه باشید :

نوار پیشرفت و یا Progress Bar چیست ؟

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

از زمانی که شما از اون شرکت خارج میشید تا زمانی که با شما تماس برقرار بشه برای همکاری بیشتر ، شما مدام از خودتون سوال میکنید که آیا من مورد پذیرششون هستم ؟ فکر میکنی کی باهام تماس بگیرن ؟ اصلا رزومه منو مطالعه کردند ؟ و سوالات عجیب و غریب دیگه و اگر به صورت مجازی یک نوار نمایشگری بود که روند بررسی رزومه شما رو روز به روز به شما اطلاع میداد مسلما شما روزهارو به راحتی می گذروندید تا زمان نتیجه . در دنیای کامپیوتر و دنیای مجازی ، این مسئله حقیقت پیدا کرده و شما با هر عملیات در ویندوز و یا وب با یک نوار پیشرفت و یا Progress Bar [1] رو به رو میشید که به شما میزان پیشرفت عملیات و یا اون پروسه رو نشون میده .

progress

یا به عبارت بهتر منظور از نوار پیشرفت و یا Progress Bar المنتی هست که در وب سایت ها برای به نمایش گذاشتن مقدار انجام شدن یا نشدن عملیات مربوطه مورد استفاده قرار میگیره .

این مسئله در مرورگرها نیز قبلا وجود داشت و میزان پیشرفت در بازشدن وب سایت مربوطه رو به شما نمایش میداد همینطور در وب سایت هایی که به صورت Ajax [2]اطلاعات رو بارگزاری میکنند کاربرد بسیار زیادی داره چون اولا شما به مخاطب احترام گذاشتید که از روند انجام عملیات اونو هر لحظه مطلع میکنید و اینکه به مخاطب اطلاع رسانی میکنید که تا چه میزان از زمان می بایست منتظر باشه تا عملیات مربوطه انجام بشه .

این المنت از اهمیت بالایی در صفحاتی که قرار هست عملیاتی در اونها و در پشت پرده سایت انجام بشه برخوردار هست که البته به شکل ها و طرح های متنوعی طراحی و پیاده سازی میشن . در زیر میتونید ۲۵ نمونه خلاقانه از این المنت رو مشاهده و از طریق سایت های premiumpixels.com [3] و ۳۶۵psd.com [4] برخی از اونها رو دانلود کنین .لازم به توضیحه که این فایل های PSD به صورت رایگان در اینترنت توسط طراح ارائه شده و از لحاظ کپی رایت هیچ ممنوعیتی نداره .

امیدوارم این نوشته هم تونسته باشه اطلاعات مفید و پرکاربردی رو در اختیار شما همراهان عزیز قرار بده . سعی میکنم در نوشته های بعدی همانند نوشته پیشین که در مورد اصول طراحی جستجو در سایت + ۲۲ نمونه جستجو متفاوت [31] صحبت کردیم در مورد سایر المنت های مهم وب سایت نیز اطلاعات خوبی رو در اختیار شما قرار بدم .

همینطور برای اینکه با شیوه طراحی نوار پیشرفت آشنا بشید میتونید فیلم آموزش طراحی گرافیک Progressbar [1] رو هم مشاهده کنین . خوشحال میشم دیدگاه شما رو هم در مورد این المنت بدونم .