نحوه ایجاد یک نمونه اولیه برنامه بانکی در Adobe XD

آیا در شرف ارائه یک پیشنهاد طراحی اپلیکیشن بانکی به مشتری هستید؟ شما در جای مناسب هستید. در این آموزش ما یاد خواهیم گرفت که چگونه یک رابط برنامه بانکی اولیه را نمونه سازی کنیم.

Adobe XD یک نرم افزار تخصصی در برنامه های کاربردی و وب است که ابزارهایی را برای طراحان ارائه می دهد تا واقعی ترین شبیه سازی ها یا نمونه های اولیه وب را ایجاد کنند.

ابزارهای ارائه شده توسط Adobe XD در زمان صرفه جویی می کنند و به ما در ایجاد نمونه های اولیه برنامه کاربردی کمک می کنند. این ابزار با تجسم طرح در عمل، با دکمه‌ها و انیمیشن‌ها، امکان انتقال ایده‌های خود را به مشتریان و برنامه‌نویسان برای طراحان آسان‌تر می‌کند.

الگوهای برنامه بانکی Adobe XD در Envato Elements

هنگامی که از گردش کار Adobe XD استفاده کردید، داشتن منابع خلاقانه و الهام بخش همیشه مفید است. اشتراک در Envato Elements به شما امکان می دهد به هزاران دارایی خلاقانه از جمله دسترسی داشته باشید قالب های برنامه Adobe XD و طراحی UI برای برنامه ها.

دوره کامل: Advanced Adobe XD

آیا قبلاً با Adobe XD آشنایی دارید؟ خوب، زمان خوبی برای ارتقای مهارت های خود به سطح بعدی به نظر می رسد! این رایگان و آسان برای دنبال کردن را بررسی کنید Adobe XD پیشرفته آموزش توسط آدی پوردیلا. همچنین تعداد زیادی از آموزش های ویدئویی مرتبط با Adobe XD را پیدا کنید کانال یوتیوب Envato Tuts+ برای تبدیل شدن به یک حرفه ای در کمترین زمان

قبل از نمونه سازی، یاد بگیرید که چگونه از Adobe XD برای ایجاد یک برنامه، به ویژه طراحی UI استفاده کنید. این آموزش در مورد نحوه ایجاد رابط کاربری برنامه مالی در Adobe XD را بررسی کنید:

نحوه ایجاد یک نمونه اولیه برنامه بانکی در Adobe XD

1. سایر برنامه های بانکی را تجزیه و تحلیل کنید

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

1. این برنامه قرار است برای چه مواردی استفاده شود؟
2. هدف اصلی این برنامه چه کسی است؟ کاربر کیست؟
3. بخش‌ها و قابلیت‌های اصلی این برنامه باید کدامند؟

همه اینها را یادداشت کنید و بهترین روش هایی را که پیدا می کنید در طراحی خود به کار ببرید.

2. بخش ها را ترسیم کنید

بیایید ایده ها را روی کاغذ بیاوریم. تمام اطلاعات جمع‌آوری‌شده از برنامه‌های بانکی موجود را که تجزیه و تحلیل کرده‌اید در نظر بگیرید. صفحه‌هایی را که نمونه‌سازی می‌کنید، ترسیم کنید. من معمولاً این کار را ابتدا با دست انجام می دهم، این به من کمک می کند فرآیند طراحی را درونی کنم. اما با خیال راحت این کار را مستقیماً در Adobe XD انجام دهید.

3. Sketch را به طراحی ترجمه کنید

در این مرحله می توانید طرح خود را به وایرفریم تبدیل کنید و برنامه خود را از ابتدا طراحی کنید. همچنین می توانید به دنبال قالبی باشید که بیشتر نیازهای طراحی شما را پوشش دهد و از آنجا شروع کنید.

مرحله 1: یک کیت رابط کاربری برنامه را دانلود کنید

برای اهداف این آموزش، من با a Fundia – کیت رابط کاربری اپلیکیشن موبایل کیف پول و بانکداری از Envato Elements. دارای طراحی رابط کاربری عالی برای اپلیکیشن موبایل است. من این الگو را بر اساس بخش‌ها و عملکردهایی که قبلاً ترسیم کردم انتخاب کردم.

مرحله 2: صفحه ها و عناصر را سفارشی کنید

تابلوهای هنری و عناصری را که قرار است برای طراحی اپلیکیشن بانکی خود استفاده کنید، انتخاب کنید. عناصر را در این الگوی طراحی برنامه Adobe XD توزیع، حذف و اضافه کنید. رنگ ها و فونت ها را مطابق با برند خود تنظیم کنید.

نام هر بخش را که به آن تعلق دارد تغییر دهید. برای این آموزش، نمونه اولیه را با این بخش ها ایجاد می کنم:

• وارد شدن
• صفحه اصلی
• موفقیت در معامله
• جزئیات کارت
• مشخصات

هنگامی که بدانید چگونه از Adobe XD برای ساختن یک برنامه استفاده کنید، آماده شروع نمونه سازی هستید.

4. طرح خود را نمونه اولیه کنید

مرحله 1

تعاملات اصلی را در طراحی اپلیکیشن بانکی خود تعریف کنید. در این حالت ما می خواهیم کاربر را برای ورود به سیستم، روی فلش کلیک کرده و به صفحه اصلی بروید. ما همچنین می خواهیم منوی اصلی خود را در پایین هر صفحه با بخش های مختلفی که طراحی کرده ایم پیوند دهیم.

گام 2

قابل اعتماد و متخصص نمونه اولیه در بالای صفحه نمایش شما اولین عنصر یا ناحیه ای را که می خواهید قابل کلیک کنید انتخاب کنید. در این مورد من با شروع بعد دکمه.

روی فلش کوچک کنار عنصر کلیک کنید و آن را به Artboard که می‌خواهید به آن عنصر قابل کلیک پیوند دهید هدایت کنید.

جنبه های خاصی از تعامل خود را تنظیم کنید. چه می شود ماشه انیمیشن؟ در این مورد ما می خواهیم به کاربر به “ضربه”. چی تایپ کنید عملی که می خواهیم ببینیم؟ ما با “Transition” می مانیم. مطمئن شوید که مقصد در Artboard سمت راست تنظیم شده است. بالاخره چه جور انیمیشن ما می خواهیم ببینیم؟ ما نگه می داریم حل کند برای تعامل ورود به خانه.

انواع دیگر را امتحان کنید انیمیشن با تعاملات مختلف به عنوان مثال، برای رفتن به جزئیات کارت صفحه نمایش، کاربر باید روی کارت کلیک کند. سپس، من را تغییر می دهم انیمیشن به اسلاید به چپ تا زمانی که کاربر روی کارت کلیک می‌کند، انتقال روان‌تری داشته باشد. من هم تنظیم کردم مدت زمان برای دریافت جلوه بصری زیباتر

تست تعاملات مختلف با پیش نمایش دکمه. دقیق دریافت کنید انیمیشن، نوع اقدام و مدت زمان شما می خواهید به کاربر خود پیشنهاد دهید.

همین کار را با تمام عناصر و دکمه های خود انجام دهید تا آنها را به صفحه ای که متعلق به آن است پیوند دهید. Artboards خود را انتخاب کنید و همه پیوندهایی را که ایجاد کرده اید مشاهده کنید.

5. پیوند را برای بررسی و آزمایش نمونه اولیه خود به اشتراک بگذارید

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

قابل اعتماد و متخصص اشتراک گذاری در سمت چپ بالای صفحه نمایش (در کنار نمونه اولیه) و انتخاب کنید بررسی طراحی به عنوان تنظیمات شما با این کار پیوندی ایجاد می‌شود که می‌تواند توسط هر کسی که پیوند را داشته باشد به صورت آنلاین بررسی و نظر دهد.

منابع بیشتر Adobe XD

آیا می خواهید در طراحی اپلیکیشن و طراحی وب Adobe XD حرفه ای شوید؟ ما تعداد زیادی مقاله، آموزش و نکات خلاقانه برای شما داریم تا بهترین استفاده را از Adobe XD داشته باشید. همچنین الگوهای برنامه شگفت انگیز Adobe XD را برای کار با آنها پیدا کنید. ما یک انتخاب کوچک برای شما داریم:

به نظر می رسد شما در حال تبدیل شدن به یک حرفه ای هستید!

هر چه مهارت ها، ابزارها و ترفندهای بیشتری یاد بگیرید، کار طراحی شما کارآمدتر خواهد بود. به یادگیری Adobe XD ادامه دهید و تمام الهامات و منابع خلاقانه مورد نیاز خود را دریافت کنید عناصر Envato. شما یک قدم به بهترین طراحی UI و UX بعدی خود نزدیکتر شده اید!