آموزش نمونه سازی UI با Framer.js

سرفصل ها و درس ها

معرفی Framer Introducing Framer

• مقدمه و دستور کار Intro and Agenda

• نمونه سازی UI UI Prototyping

• نمونه های فریمر Framer Examples

• در زیر کاپوت Under the Hood

• تور استودیو Framer Framer Studio Tour

• تمرین 1: یک نمونه اولیه Framer را حمل کنید Exercise 1: Ship a Framer Prototype

• آغازگر CoffeeScript CoffeeScript Primer

مبانی Framer Framer Fundamentals

• لایه های Layers

• ویژگی های لایه Layer Properties

• رویدادهای لایه Layer Events

• ساختار کد Code Structure

• تمرین 2: تعامل با لایه ها Exercise 2: Interacting with Layers

اصول انیمیشن Animation Basics

• اصول انیمیشن Animation Basics

• کشیدن و پیمایش Dragging and Scrolling

• ویدئو Video

• تمرین 3: پاسخ مادی Exercise 3: Material Response

وارد کردن نمای کلی Importing Overview

• وارد کردن نمای کلی Importing Overview

• وارد کردن از فتوشاپ Importing from Photoshop

• وارد کردن از Sketch Importing from Sketch

• تمرین 4: نمونه اولیه یک برنامه Exercise 4: Prototype an App

کارگاه انیمیشن Animation Workshop

• اشیا انیمیشن Animation Objects

• منحنی های انیمیشن Bezier Bezier Animation Curves

• تنظیم حالتهای پیش فرض و لایه Setting Defaults and Layer States

• تعیین توالی و آبشار Sequencing and Cascading

• تمرین 5: کارگاه انیمیشن Exercise 5: Animation Workshop

• تمرین 5: راه حل Exercise 5: Solution

رابط کاربر پاسخگو Responsive UI

• پویایی Dynamism

• مدولاسیون Modulation

• مقاومت Resistance

• سرعت Velocity

• آستانه ها Thresholds

• تمرین 6: کارت کش رفتن رابط کاربر Exercise 6: Card Swipe UI

• تمرین 6: ادامه دارد Exercise 6: Continued

نمونه های اولیه داده محور Data-driven Prototypes

• لایه ها و HTML Layers and HTML

• کشیدن در JSON Pulling in JSON

• با استفاده از Firebase Using Firebase

• تمرین 7: نمونه های اولیه "هوشمند" با Firebase Exercise 7: 'Smart' Prototypes with Firebase

ضمیمه Appendix

• بسته شدن Wrap-up