آموزش UXPin برای طراحی تجربه کاربری (UX Design) - آخرین آپدیت

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

مقدمه Introduction

• UXPin برای طراحی UX UXPin for UX design

• پیش‌نیازها و آنچه باید بدانید What you should know

• فایل‌های تمرینی Exercise files

1. شروع کار با UXPin 1. Getting Started with UXPin

• داشبورد UXPin UXPin Dashboard

• ایجاد سند جدید Create a new document

• استفاده از شبکه هوشمند (Smart Grid) در UXPin Using the UXPin Smart Grid

• اسناد UX UX documents

• فونت‌ها و المان متنی UXPin Fonts and the UXPin text element

• پیش‌نمایش پروژه Previewing a project

• افزودن لایه‌ها Adding layers

• ایجاد و استفاده از کامپوننت‌ها Creating and using components

• وارد کردن ویدیو Import video

• مرور رابط کاربری UXPin Review of the UXPin interface

• استفاده از کتابخانه (Library) Using the library

• استفاده از گزینه‌های نمایش Using the view options

2. ایجاد وایرفریم باfidelity پایین (Low Fidelity) 2. Create a Low-Fidelity Wireframe

• ایجاد وایرفریم Low Fidelity Create a low-fidelity wireframe

• افزودن انتقال‌های بین صفحه‌ای (Transitions) Adding screen transitions

• افزودن صفحات دستگاه‌ها Adding device screens

• افزودن صفحات Adding pages

• ایجاد وایرفریم محتوایی Create a content wireframe

• ترسیم نمودارهای جریان کاربر (User Flow) Create user flow diagrams

3. خلق آثار گرافیکی برای UXPin 3. Creating Artwork for UXPin

• وارد کردن آثار گرافیکی Importing artwork

• استفاده از ابزار Pen Using the Pen tool

• کار با رنگ‌ها Working with color

• ساخت دارایی‌های گرافیکی در فتوشاپ Create assets in Photoshop

• ساخت دارایی‌های گرافیکی در Sketch Create assets in Sketch

• ویرایش سیستم طراحی (Design System) Editing a design system

• خلق افکت‌های تصویری Creating imaging effects

4. ساخت پروتوتایپ باfidelity بالا (High Fidelity) 4. Building a High-Fidelity Prototype

• افزودن محتوا Adding content

• ترفندی برای آموزش کامپوننت‌ها A component teacher trick

• استفاده از حالت‌ها (States) Using states

• ایجاد یک کامپوننت Creating a component

• افزودن قابلیت اسکرول Adding scrolling

5. افزودن تعاملات و موشن 5. Adding Interactivity and Motion

• افزودن تعاملات (Interactions) Adding interactions

• استفاده از داده‌ها در UXPin Using data in UXPin

• استفاده از المان‌های چند حالته Using multistate elements

• افزودن انیمیشن‌ها Adding animations

• ایجاد نقاط حساس (Hot Spots) Create hot spots

• انیمیت کردن تغییرات حالت Animating state changes

6. پروژه‌های کاربردی UXPin 6. Practical UXPin Projects

• ساخت منوی آکاردئونی Create an accordion menu

• طراحی کاروسل (Carousel) Design a carousel

• ایجاد ناوبری با استفاده از المان‌های UXPin Create navigation using UXPin elements

• ساخت منوی کشویی ناوبری (Navigation Drawer) Create a navigation drawer

• استایل‌دهی به المان‌ها با CSS سفارشی Style elements with custom CSS

• ساخت منوی بازشو (Pop down) Create a pop down menu

• افزودن تعامل به کاروسل Add interactivity to a carousel

7. اشتراک‌گذاری پروتوتایپ 7. Sharing Your Prototype

• استفاده از منوی اشتراک‌گذاری Using the share menu

• خروجی گرفتن از پروژه Exporting your project

• خروجی گرفتن از استایل‌های رنگ و تایپ به JSON Export color and type styles to JSON

جمع‌بندی Conclusion

• گام‌های بعدی Next steps