آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

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

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

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

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

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

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

progress

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

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

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : حسین همت یار

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مشاور گرافیک وب ، طراح UI و تحلیلگر UX، مسلط به نرم افزارهای گرافیکی پیکسلی و برداری و کدنویس HTML , CSS

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • فرید

    ای کاش کسی پیدا میشد ساخت اینها رو آموزش میداد
    توی لیندا و تات پلاس هم چیزی پیدا نکردم

    • حسین همت یار

      سلام ، اگر در متن دفت کنید لینک اموزش ویدئویی موجود هست . تشکر

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟