آموزش طراحی برنامه های موبایل در Adobe XD - Android و iOS - UI/UX

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

شروع شدن Getting Started

• اولین صفحه برنامه خود را طراحی کنید Design your first app screen

• مهمترین چیز در مورد طراحی اپلیکیشن ها The most important thing about designing apps

• به انجمن ما بپیوندید Join Our Community

• Adobe XD در مقابل اسکچ در مقابل فتوشاپ در مقابل Figma Adobe XD vs Sketch vs Photoshop vs Figma

• نظر صادقانه من در مورد انیمیشن و بدون کد My honest opinion about animations and no-code

• بیایید سرعت خود را افزایش دهیم Let’s improve our speed

• در اینجا نحوه عملکرد برنامه ها و آنچه شما باید ارائه دهید، آمده است Here’s how apps work and what you need to provide

• هیچ اپلیکیشن موبایلی را بدون این طراحی نکنید! Don’t design any mobile app without this!

• این طراحی برنامه را اصلاح کنید Fix this app design

• چقدر دلار باید شارژ کنید؟ How much $ should you charge?

• در حباب طراحی نکنید - از تلفن خود استفاده کنید! Don’t design in a bubble – use your phone!

• اندروید در مقابل iOS – آیا باید اهمیت دهید؟ Android vs iOS – should you care?

درباره Material Design 2 و 3 از Google بیاموزید Learn about Material Design 2 & 3 from Google

• این طراحی متریال است This is Material Design

• نمای کلی اجزای رابط اندروید Android interface components overview

• در اینجا بهترین اندازه تخته هنری برای برنامه های شما آورده شده است Here's the best artboard size for your apps

• اندازه بر حسب پیکسل: دلیل بحث مردم اینجاست Size in pixels: here’s why people argue

• آموزش طراحی نوار اکشن (نوار بالا) Learn to design the action bar (top bar)

• هر آنچه که باید در مورد تب ها بدانید Everything you need to know about tabs

• نمایش محتوا در کارت Displaying content in cards

• دکمه های زیبا و موثر در اندروید Beautiful and effective buttons on Android

• مانند یک حرفه ای با متن کار کنید Work with text like a pro

• راهنمای اندازه رایگان برای اجزای اندروید FREE size guide for Android components

مقدمه ای بر Adobe XD Introduction to Adobe XD

• مقدمه ای بر Adobe XD Introduction to Adobe XD

• یادگیری XD و تعیین انتظارات شما Learning XD and setting your expectations

• مروری بر رابط XD An overview of XD’s interface

• گردش در Adobe XD Getting around in Adobe XD

• انتخاب لایه ها در XD Selecting layers in XD

• اصول شکل دهی در Adobe XD Shape fundamentals in Adobe XD

• ویرایش اشکال در Adobe XD Editing shapes in Adobe XD

• اصول متن در XD Text fundamentals in XD

• شبکه و راهنمای هوشمند Grid and smart guides

• ابزار قلم Pen tool

• کار با عکس و ماسک Working with photos and masks

کار خود را در Adobe XD شارژ کنید Supercharge your work in Adobe XD

• ماکت های واقعی را تنها با چند کلیک ایجاد کنید Create real-life mockups in just a few clicks

• سرعت رعد و برق با پنل Assets Lightning speed with the Assets panel

• نمادهای مرتبط Linked symbols

• پیش نمایش و پیش نمایش دستگاه Preview and device preview

• نمونه اولیه نمای کلی و به اشتراک گذاری طرح شما Prototyping overview and sharing your design

• نمونه های اولیه تعاملی ایجاد کنید Create interactive prototypes

• نکات و ترفندهای نمونه سازی Prototyping tips and tricks

• نمونه اولیه برنامه خود را واقعی جلوه دهید Make your app prototype seem real

• انیمیشن باورنکردنی خودکار و کشیدن The incredible auto-animate and drag

• پنل کتابخانه ها The Libraries panel

از مختصر و فریم تا طراحی کامل اپلیکیشن - قسمت 1 From brief and wireframe to a complete app design - Part 1

• معرفی این بخش Introduction to this section

• تمام منابع را از اینجا دانلود کنید Download all the resources here

• درک خلاصه و خواسته های مشتری Understanding the brief and the client's wishes

• تجزیه و تحلیل رقبای برنامه - قسمت 1 Analyze the app’s competitors – Part 1

• تجزیه و تحلیل رقبای برنامه - قسمت 2 Analyze the app’s competitors – Part 2

• طرح بندی را برای دو صفحه اول تنظیم کنید Set the layout for the first two screens

• مهمترین صفحه نمایش را در برنامه طراحی کنید Design the most important screen in the app

• جزئیات رستوران - ظروف The restaurant details - dishes

• چگونه انتخاب های طراحی عالی داشته باشیم How to make great design choices

• برای صفحه اول نسخه های مختلف ایجاد کنید Create different versions for the first screen

• ایده های مختلف برای صفحه رستوران را بررسی کنید Explore different ideas for the restaurant's page

• نوار وضعیت و نوار اقدام را تنظیم کنید Set up the status bar and the action bar

• به سرعت نسخه دیگری ایجاد کنید - راه آسان Quickly create another version - the easy way

• تغییرات بیشتر برای کارت More variations for the card

• یک طرح نهایی را کاوش کنید Explore one final layout

• ایجاد تغییرات برای نوار اقدام Creatie variations for the action bar

• مفاهیم طراحی برای صفحه نمایش جزئیات رستوران (3). Design concepts for the restaurant details (3) screen

• تنوع برای جزئیات رستوران Variation for the restaurant details

• انتخاب بهترین نوع فونت Choosing the best typeface

• سبک برنامه ما را تعریف و اصلاح کنید Define and refine our app’s style

• سرعت خود را تمرین کنید Practice your speed

• صفحه اول را تمام کنید Finish the first screen

• یک سبک جدید از دکمه برای داشتن یک جریان عالی A new style of button to have a great flow

• نمای کلی بخش Section overview

اصول طراحی اپلیکیشن های موبایل را بیاموزید Learn design principles for mobile apps

• معرفی بخش Section introduction

• چیکاره میخوای بشی؟ طراح یا مشکل گشا؟ What do you want to be? A designer or a problem-solver?

• تنها چیزی که تمام طراحی های شما را خراب می کند را کشف کنید Discover the one thing that ruins all your designs

• آیکون های رابط کاربری در برنامه هایی که به کاربر کمک می کنند! UI Icons in apps that help the user!

• یک پنل داشبورد ایجاد کنید Create a dashboard panel

• نمادهای زیبا: مطالعات موردی Beautiful Icons: Case studies

• راهنمای الهام بخش طراحی اپلیکیشن A guide for app design inspiration

• مخاطبان هدف و داستان برنامه Target audience and the app’s story

• یک تابلوی خلق و خو ایجاد کنید Create a mood board

• کشف کنید که چه چیزی یک برنامه را زیبا می کند Discover what makes an app beautiful

به این ترتیب رنگ ها را برای اپلیکیشن های موبایل زیبا انتخاب می کنید This is how you choose colors for beautiful mobile apps

• اصول استفاده از رنگ را کشف کنید Discover the principles of color use

• نحوه استفاده مناسب از رنگ How to use color appropriately

• اصل تضاد رنگ The principle of color contrast

• بهترین طرح های رنگی از برنامه های برتر The best color schemes from top apps

• ابزارهایی برای طرح های رنگی عالی Tools for awesome color schemes

• نحوه اجرای طرح رنگ How to implement a color scheme

از این فونت ها برای داشتن یک برنامه عالی استفاده کنید Use THESE fonts for a great looking app

• اصول تایپوگرافی اندروید Android typography fundamentals

• 7 قانون برای خواندن آسان متن 7 rules for easy-to-read text

• تایپوگرافی: بزرگترین برنامه ها چه کاری انجام می دهند Typography: what the biggest apps are doing

• چگونه بسیاری از متن ها را عالی جلوه دهیم How to make lots of text look great

• نحوه صحیح جفت کردن فونت ها How to pair fonts correctly

بهترین روش‌های iOS را که نتایج قابل قبولی ایجاد می‌کنند، کشف کنید! Discover iOS best practices that produce solid results!

• برنامه های iOS - نمای کلی iOS apps – Overview

• 1x، 2x، 3x، PPI، ناچ؟! راهنمای اندازه آرتبرد iOS 1x, 2x, 3x, PPI, notch?! iOS artboard size guide

• مقایسه طراحی اپلیکیشن: iOS در مقابل اندروید App design comparison: iOS vs Android

• کیت رسمی UI - خوب یا بد؟ Official UI Kit - good or bad?

• نوار وضعیت iOS (با بریدگی/وو) iOS status bar (with/wo Notch)

• نوار ناوبری iOS iOS Navigation bar

• نوار تب iOS iOS Tab bar

• فیلدهای متنی iOS iOS Text Fields

• کنترل‌های iOS iOS Controls

• اجرای برنامه های اندروید در سیستم عامل مک Running Android apps on Mac OS

• حروف رسمی iOS – آیا باید از آن استفاده کنید؟ The official iOS typeface – should you use it?

• نتیجه گیری iOS iOS conclusions

پروژه برنامه کامل - قسمت 2 Complete app project - Part 2

• تمامی منابع را دانلود کنید Download all the resources

• معرفی بخش Section introduction

• فرم ثبت نام را ایجاد کنید Create the registration form

• نحوه ایجاد فیلدهای متنی زیبا How to create beautiful text fields

• یک تغییر برای فرم ثبت نام ایجاد کنید Create a variation for the register form

• یک منوی سمت چپ زیبا طراحی کنید Design a beautiful left menu

• نحوه استفاده از کلیدهای کامپوننت در Adobe XD How to use component toggles in Adobe XD

• ایجاد فیلترهای تعاملی Create interactive filters

• 3 صفحه نمایش را سریع و آسان طراحی کنید Design 3 screens fast and easy

• یک طرح کارت اعتباری زیبا از ابتدا بسازید Make a gorgeous credit card design from scratch

• این صفحه ای است که در آن فروش وجود ندارد (غیر منتظره) This is the screen where sales are not (unexpected)

• نحوه سبک دادن به محتوا بر اساس اهمیت How to style content based on importance

• یک صفحه پرداخت ایجاد کنید که فروش دارد Create a checkout screen that sells

• جزئیاتی را اضافه کنید که ارزش زیادی را اضافه می کند Add details that add loads of value

• صفحه تماس با ما را ایجاد کنید و کارها را تمام کنید Create the contact us page and finish things up

• مروری بر پیشرفت ما An overview of our progress

نحوه کار با توسعه دهندگان اپلیکیشن موبایل How to Work with Mobile App Developers

• آشنایی با زپلین Introduction to Zeplin

• آنچه رمزگذار از زپلین به دست می آورد What the coder gets out of Zeplin

• از فتوشاپ گرفته تا زپلین تا توسعه دهندگان اندروید From Photoshop to Zeplin to Android Developers

• هر چیزی در اندروید امکان پذیر است! کاری کنید که مشتریان و کدنویس ها شما را دوست داشته باشند Anything is possible in Android! Make clients & coders love you

• مشخصات طراحی از طریق XD Design specs through XD

• صادرات از XD Exporting from XD

• بهترین راه برای کار با کدگذارها در Zeplin The best way to work with coders in Zeplin

طراحی و نمونه سازی در Adobe XD Designing & Prototyping in Adobe XD

• معرفی Introduction

• PSD را در Adobe XD وارد و تعمیر کنید Import and fix the PSD in Adobe XD

• راه اندازی نمونه اولیه Setting up the prototype

• نمونه سازی صفحات ورود و ثبت نام Prototyping the login and register screens

• برخورد با کرکره شهر Dealing with the City dropdown

• ایجاد تعامل نقشه Creating the map interaction

• پایان دادن به تعاملات اولیه صفحه Finishing the initial screen interactions

• تجزیه و تحلیل پیشرفت ما Analyzing our progress

• رمز عبور را بازیابی کنید و یک حساب کاربری ایجاد کنید Recover password and create an account

• لیست رستوران را در Adobe XD دوباره ایجاد کنید Recreate the restaurant listing in Adobe XD

• ایجاد نوار جستجو Creating a search bar

تکنیک های پیشرفته در Adobe XD Advanced Techniques in Adobe XD

• اتصال منوی سمت چپ Connecting the left menu

• اتصال فیلترها Connecting the filters

• ایجاد یک سیستم تب متحرک برای فهرست ظروف Creating an animated tab system for the dish listing

• ایجاد مسیرهای برنامه - دشوار است! Creating the app’s routes – difficult!

• ادامه مسیر 1: کاربر در ابتدا ثبت نام می کند Continuing route 1: user registers at the beginning

• مسیر 2: کاربر در هنگام پرداخت ثبت نام می کند Route 2: user registers during checkout

• مسیر 3: کاربر قبلاً یک حساب کاربری دارد Route 3: user already has an account

• اطلاعات رستوران و نظرات Restaurant information and reviews

• تنظیم دقیق و تجزیه و تحلیل پروژه Fine-tuning and project analysis

• آماده شدن برای صادرات به Zeplin Preparing to export to Zeplin

• صادرات به زپلین Export to Zeplin

افکار نهایی از کریس Final Thoughts from Chris

• قبل از شروع کار آزاد این کار را انجام دهید Do this before you start freelancing

• افکار نهایی و چه چیزی بعد Final Thoughts & What's Next

• مسابقه نهایی Final quiz