ایجاد Loading خطی در نرم افزار ایکس دی

مدرس: بردیا بسطامی

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

بعضی مواقع در استفاده از اپلیکیشن ها یا وب سایت های مختلف زمانی وجود داره که شما منتظر هستید که فرمان داده شده؛ اجرا بشه. گاهی ممکنه این اتفاق باعث بشه شما کلافه بشید. هدف از طراحی قسمت Loading در این مواقع، راحت تر کردن تحمل این توقف در روند انجام کاره.

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

در این آمورش ساعت شنی یاد میگیریم چطور در نرم افزار XD یک Line Loading طراحی و ایجاد کنیم.

  • نرم افزار ایکس دی رو باز می کنیم.
  • ابتدا یک خط روی صفحه ترسیم میکنیم و خط رو وسط در وسط قرار میدیم.
  • از قسمت Appearance سایز border رو زیادتر میکنیم برای داشتن منحنی های بقل آن میتوانیم از گزینه ی Round cap استفاده کنیم و رنگ اون رو یک مقدار روشن تر میکنیم.
  • در حالتی که خط انتخاب هستش ctrl+c ، ctrl+v رو میزنیم و خطی که روی آن paste شده را Transform میکنیم و بعد برای نمایش بهتر بک گراند و خط لودینک کمی رنگش را تیره تر میکنیم
  • سپس اسم آرت بورد را انتخاب کرد و با نگه داشتن کلیدAlt یک کپی از آن میگیریم و در آرت بورد دوم خط رویی را حرکت میدهیم و سپس وارد قسمت Prototype میشویم و روی اسم Art Bored  کیلیک کرد و لینک ایجاد میکنیم.
  • در بخش action تایپ رو اتو انیمیت و easing رو none قرار داده در ادامه duration رو ۰.۸ ثانیه قرار میدهیم.