آموزش چگونه با استفاده از Principle یک رابط کاربری Sketch را متحرک کنیم
How to Animate a Sketch UI using Principle
درباره کلاس
این کلاس به شما نشان می دهد که چگونه حرکت را به رابط کاربری که در Sketch با استفاده از Prototype طراحی شده است اضافه کنید. برای هر طراح که رابط کاربری خود را با استفاده از Sketch ایجاد می کند و می خواهد حرکت و تعامل را به طرح های خود اضافه کند، عالی است.
برای شرکت در کلاس نیازی به تجربه قبلی از Principle نیست زیرا نحوه استفاده از آن را توضیح خواهم داد. تنها کاری که باید قبل از انجام این کار انجام دهید این است که برنامه Principle را در دستگاه خود دانلود کنید. برای انجام این کار روی دکمه دانلود کلیک کنید.
مهارت هایی که به دست خواهید آورد
شما یاد خواهید گرفت که چگونه:
- رابط کاربری Sketch خود را برای انیمیشن در نمونه اولیه آماده کنید.
- فایل Sketch خود را به درستی در نمونه اولیه وارد کنید.
- از شکل‌ها، جلوه‌های آسان‌سازی و زمان‌بندی برای رابط کاربری خود استفاده کنید.
- نحوه استفاده از مؤلفه ها برای ایجاد انیمیشن های قابل استفاده مجدد
پروژه
یک رابط کاربری Sketch از قبل موجود را متحرک میکنید و جلوه‌ای شبیه به دکمه نوشتن در برنامه صندوق ورودی ایجاد میکنید.
تکلیف
فایل پیوستی به نام starter student files.zip را دانلود کنید. این شامل یک فایل طرح و دو نوع فونت است. لطفاً قبل از باز کردن فایل طرح، ابتدا فونت ها را روی سیستم عامل خود نصب کنید.
رابط کاربری Sketch از قبل متصل شده را متحرک کنید و جلوه ای شبیه به دکمه نوشتن در برنامه صندوق ورودی ایجاد کنید. از مفاهیمی که آموخته‌اید برای آزمایش با زمان‌بندی‌های مختلف، جلوه‌های آسان‌تر، نمادهای برنامه و رنگ‌ها نیز استفاده کنید. با خیال راحت پس‌زمینه رابط کاربری را برای تقلید از یک برنامه دیگر تغییر دهید.
موارد تحویل
لطفاً هنگام کار بر روی انیمیشن خود موارد زیر را آپلود کنید.
- یک فایل طرح با دارایی‌هایی که به درستی نام‌گذاری شده‌اند.
- فایل نمونه اولیه که پس از صادرات فایل طرح به نمونه اولیه ذخیره خواهید کرد.
- نسخه ابتدایی و ناتمام پروژه با کمی حرکت.
- نسخه کامل انیمیشن شما.
من شما را تشویق می‌کنم که نمونه‌های ناقص و ناقص کارهای در حال انجام خود را در گالری پروژه ارسال کنید. به یاد داشته باشید، بازخورد اولیه همیشه چیز خوبی در طراحی UI است ;)
حق چاپ
طراحی طرح در اصل توسط Stefan Hiienurm از دریبل است.
قلم های استفاده شده متعلق به صاحبان مربوطه می باشند.
درس ها Lessons
-
آماده شدن برای کلاس: مواد Getting Ready for Class: Materials
-
انیمیشن نهایی: دکمه های گزینه Final animation: The Option Buttons
-
انیمیشن های قابل استفاده مجدد با استفاده از کامپوننت ها و بسته شدن Reusable Animations using Components and Closing
-
درباره کلاس About the Class
-
دارایی ها را برای واردات به اصل آماده کنید Prepare Assets for Import to Principle
-
اولین انیمیشن ما: دکمه اکشن Our First Animation: The Action Button
-
واردات به اصل Importing to Principle
https://donyad.com/d/8501
Dennis Muthuri
طراح رابط کاربری، عاشق UX و ساکسیفونیست
دنیس موتوری که در نایروبی، کنیا مستقر است، یک حلال مشکل است و جذب طراحی عالی است که مشکلات را حل می‌کند و همچنین محدودیت‌های ممکن را از بین می‌برد.
به‌عنوان مشاور، او در بیشتر دوران کاری خود با استارت‌آپ‌ها و آژانس‌های مشاوره مانند و ihub کار کرده است و به تیم‌های آنها کمک می‌کند تا محصولاتی تولید کنند که ارزش مشتری را ارائه می‌دهند و به نتیجه نهایی آنها کمک می‌کند.
او می‌خواهد بخش بعدی زندگی کاری خود را با درک نحوه ایجاد رابط‌های کاربری مرتبط و تعاملات رابط کاربری عالی و در عین حال اشتراک‌گذاری دانش خود در طول مسیر بگذراند.
وقتی از مانیتور خسته شد، می‌توانید او را در حال نواختن گیتار و ساکسیفون بیابید.
نمایش نظرات