طراح رابط کاربری/ تجربه کاربری ( UI / UX ) - مُدَرس - یوتیوبر
نمونهکار: رابط کاربری صفحه پرداخت بانک XPay
نمونهکار: رابط کاربری صفحه پرداخت بانک XPay
این طرح بر اساس یک چالش طراحی شد که چطور میتوان صفحات درگاه پرداخت بانک ها را به خصوص در موبایل به گونهای باز طراحی کرد که کاربر اطلاعات را بدون سردرگمی و به راحتی در محیطی زیبا وارد کند.
در این طرح اطلاعات به وضوح نمایش داده می شود و همچنین به گونه ای طراحی شده که اگر کاربر قبلا اطلاعات کارت بانکی خود را وارد نکرده باشد با چند شماره اول آن رنگ محیط صفحه پرداخت به رنگ لوگو بانک مورد نظر تغییر کند و همچنین خود کارت بانکی هم در قسمت بالا نمایش داده شود.
در صورتی که قبلا کاربر کارت های بانکی خود را ذخیره کرده باشد میتواند از بین آن ها در قسمت بالا انتخاب کند و اطلاعات به جز رمز اینترنتی و CVV2 وارد فیلد های خالی می شود.
در صورتی که به این طرح اپلیکیشن نیاز دارید و می خواهید آن را برای محصولات خود گسترش بدهید و یا آن را در اپلیکیشن خود استفاده کنید، می توانید از طریق ایمیل با من در ارتباط باشید تا این طرح اولیه را بر اساس محصولات شما طراحی و گسترش بدهیم و یا اینکه لایسنس آن را خریداری کنید.
اکثر این کارها رو میتونید در وبلاگم، Dribbble و نسخه با کیفیت اونا رو در Behance ببینید.
همچنین برای سفارش کار میتونید به ایمیل iHMahmoodi [@] gmail.com با من در ارتباط باشید.
در زیر لوگو و صفحات مختلف این اپلیکیشن را به دو زبان انگلیسی و فارسی مشاهده می کنید.
توجه کنید که هرگونه دخل و تصرف در این نمونه کارها (یا کار هر طراح دیگری) و استفاده از اون در محصولی بدون خریداری لایسنس آن و یا کسب اجازه از طراح آن پیگرد قانونی دارد.
این مطلب برای اولین بار در وبلاگ اصلی من منتشر شده است.
من را در شبکه های اجتماعی دنبال کنید تا در جریان مطالب مرتبط با این موضوع (آموزشی، اخبار و…) و همچنین مطالب مفید دیگری قرار بگیرید.
Twitter: https://twitter.com/iHMahmoodi
Instagram: https://www.instagram.com/iHMahmoodi
blog: http://blog.iHMahmoodi.ir
Linkedin: https://www.linkedin.com/in/iHMahmoodi
Dribbble: https://dribbble.com/iHMahmoodi
Behance: https://www.behance.net/iHMahmoodi
Instagram – work: https://www.instagram.com/AsteriXarts
با نظراتتون من رو در طراحی کارهای بهتر یاری بدید :)
مطلبی دیگر از این انتشارات
آموزش فتوشاپ: چطور به چشم جزئیات اضافه کنیم؟
مطلبی دیگر از این انتشارات
آموزش ویدیویی: ۷ کراپ پر استفاده در طراحی گرافیک و صفحه آرایی
مطلبی دیگر از این انتشارات
آموزش ایندیزاین: تصحیح سریع علائم و مشکلات نگارشی