رابط های کاربری (UI) که پیشرفت را اندازه گیری می کنند مفید هستند. آنها هنگام تکمیل وظایف مختلف، تأیید بصری را ارائه می دهند، بنابراین کاربران مجبور نیستند حدس بزنند که تا چه حد در یک فرآیند هستند.
ما این UI ها را در دستگاه های خود می بینیم. هر کسی که یک به روز رسانی را روی رایانه یا تلفن خود انجام داده باشد، با آنها آشنا خواهد بود. بنابراین، به راحتی می توان طراحی آنها را بدیهی دانست.
با این حال، ما شروع به دیدن پیاده سازی های خلاقانه تری کرده ایم. و وب به یک نیروی محرک تبدیل شده است. طراحان از CSS و جاوا اسکریپت استفاده می کنند تا رابط های کاربری پیشرفت را سرگرم کننده و آموزنده کنند. با افزودن انیمیشن های عجیب و غریب و سایر تصاویر بصری، ما بسیار فراتر از نوار پیشرفت استاندارد هستیم.
در اینجا هشت نوار پیشرفت و رابط کاربری وجود دارد که چیزهای منحصر به فردی برای ارائه دارند. شاید تعجب کنید که این عناصر تا کجا پیش رفته اند.
نمودار نوار پیشرفت نیم دایره متحرک با استفاده از SVG توسط اندرو سیمز
ما همیشه پیشرفت را در یک خط مستقیم اندازه گیری نمی کنیم. می توانید از اشکالی مانند این نیم دایره زیبا نیز استفاده کنید. این قطعه از ProgressBar.js و SVG برای ایجاد یک ارائه جذاب استفاده می کند.
نمودار نوار پیشرفت نیم دایره ای با استفاده از SVG توسط اندرو سیمز را ببینید
دانلود انیمیشن CSS و پیشرفت انیمیشن توسط آرون ایکر
کاربران زمان زیادی را صرف دانلود فایل ها می کنند. متر پیشرفت آنها را در جریان وضعیت خود نگه می دارد. ما دوست داریم که این مثال همه چیز را ساده نگه می دارد. یک دکمه تمام اطلاعات مورد نیاز کاربران را در خود جای می دهد.
انیمیشن پیشرفت قلم دانلود از آرون ایکر را ببینید
انیمیشن نوار پیشرفت توسط ایوا وایتین
چه کسی می گوید نوارهای پیشرفت باید خسته کننده باشند؟ در اینجا نگاهی می اندازیم به اینکه چگونه خلاقیت می تواند چیزها را ادویه کند. انیمیشن‌ها، الگوها و شیب‌های فریم کلیدی CSS به این ترکیب سرگرم کننده می‌افزایند.
انیمیشن نوار Pen Progress اثر Eva Wythien را ببینید
ساعت پیشرفت CSS و جاوا اسکریپت توسط جان کانتنر
زمان روش دیگری برای اندازه گیری پیشرفت است و این ساعت این کار را به روشی منحصر به فرد انجام می دهد. ماوس را روی تاریخ، ساعت، دقیقه و ثانیه نگه دارید تا روی متر آنها تمرکز کنید. این افکت یک رابط کاربری پیچیده را می گیرد و آن را به تکه های کوچکی تقسیم می کند.
ساعت پیشرفت قلم اثر جان کانتنر را ببینید
مراحل فرآیند سفارش فقط CSS توسط جیمی کولتر
در اینجا یک راه سرگرم کننده برای نشان دادن مراحل یک فرآیند تجارت الکترونیک به کاربران ارائه شده است. با کلیک بر روی یک مرحله، جزئیات بیشتری نشان داده می شود. توجه کنید که چگونه نماد جعبه در طول مسیر تغییر می کند. این رابط کاربری پیشرفت را نشان می دهد و به عنوان یک مؤلفه ورودی دو برابر می شود.
مراحل فرآیند سفارش فقط قلم CSS توسط Jamie Coulter را ببینید
نوار پیشرفت بسته بندی صفحه توسط توماس ویت
رابط‌های کاربری Progress همچنین می‌توانند مبتنی بر اسکرول باشند. در این حالت، هنگام اسکرول کردن، یک نوار رنگی به دور نمای درت می‌پیچد. با حرکت به سمت بالا، این اثر برعکس می شود. شاید این مثال برای هر موردی مناسب نباشد. اما می تواند همراهی برای یک وب سایت داستان سرایی باشد.
به نوار پیشرفت قلم توسط توماس ویت مراجعه کنید
نوار پیشرفت دایره پاسخگو توسط تیگران سرکیسیان
این قطعه از یک ورودی محدوده HTML استفاده می کند که با یک رابط کاربری پیشرفت دایره ای همگام می شود. شکل این یکی را برجسته می کند. اما اثر تغییر رنگ نیز همینطور است. با تغییر مقدار لغزنده، رنگ ها نیز تغییر می کنند.
پیشرفت دایره قلم توسط تیگران سرکیسیان را ببینید
نوار پیشرفت سه بعدی چرخان توسط آمیت
اینجا چیزی متفاوت است. این نوارهای پیشرفت سه بعدی چرخان ظاهری آینده نگر ارائه می دهند. گذشته از این، آنها به طور کامل با CSS ساخته شده اند، و مطمئنا توجه را به خود جلب خواهند کرد.
نوار پیشرفت قلم 3d v2 توسط Amit را ببینید
پیشرفت بهتر از طریق کد
دلیلی وجود ندارد که به UI پیشرفت مدرسه قدیمی بسنده کنید. اکنون این امکان وجود دارد که چیزی بسازید که با زیبایی شناسی مورد نظر شما مطابقت داشته باشد. و بهتر از همه، شما به کد یا تصاویر پیچیده زیادی نیاز ندارید. این عناصر را به همان اندازه که دوست دارید ساده یا پیچیده کنید.
مثال های بالا طیف وسیعی از احتمالات را نشان می دهند. اما آنها فقط سطح را می خراشند. CSS، جاوا اسکریپت و تخیل را برای ایجاد ظاهر و احساس متمایز ترکیب کنید.
آیا به دنبال نمونه های رابط کاربری پیشرفت بیشتر هستید؟ شما می خواهید مجموعه CodePen ما را بررسی کنید!
بالا
منبع: https://speckyboy.com/progress-bars-css-javascript/