طراحی اپلیکیشن بانکی: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ بانکی که شبیه تبلیغ کارت اعتباری است، و همان صفحه پس از اصلاح، با موجودی در مرکز توجه. تک‌تک تغییرها کنار هم، دلیل هرکدام و فایل رایگان Figma.
صفحه اصلی یک اپ بانکی باید در کمتر از یک ثانیه به یک سؤال جواب بدهد: چقدر پول دارم؟ پیش‌نویس اول پایین یک کارت گرادیانی خوش‌ظاهر است، اما بعد از موجودی، بزرگ‌ترین چیز روی صفحه شماره کارت است، اقدام‌ها در شش رنگ آمده‌اند و تقریباً همه تراکنش‌ها قرمزند. شبیه آگهی یک کارت اعتباری شده است.
اصلاح، بنفش برند و همه قابلیت‌ها را نگه می‌دارد. رنگ را خرج عددی میکند که مهم است و بقیه چیزها را ساکت میکند.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاح‌شده
سمت چپ، کارت واقعاً یک کارت است: موجودی، شماره مخفیشده، نام دارنده، تاریخ انقضا و لوگوی VISA، همه روی یک گرادیان. زیرش شش دایره اقدام در شش رنگ می‌آید، بعد یک فهرست تخت از تراکنش‌ها که روی هر هزینه قرمز نشسته و هر فروشنده رنگ لوگوی خودش را دارد.
سمت راست، کارت یک موجودی است. نام حساب دارد، عدد به دلار، یک خط که می‌گوید در این ماه چه تغییری کرده و چهار رقم آخر که در گوشه جا خوش کرده است. هرچه زیر آن است آرام‌تر است، پس موجودی اولین جایی است که چشم به آن می‌افتد.
| پیش‌نویس مبتدی | اصلاح‌شده | |
|---|---|---|
| کارت چه نشان میدهد | موجودی، شماره کارت، دارنده، انقضا، لوگوی VISA | نام حساب، موجودی، تغییر این ماه، چهار رقم آخر |
| اقدامهای سریع | ۶ تا، در ۶ رنگ | ۳ تا، یکی پر و دو تا ساده |
| قرمز در فهرست | هر هزینه | هیچ‌جا |
| سبز در فهرست | درآمد | فقط درآمد |
| آیکون تراکنش‌ها | ۵ رنگ برند | ۱ سبک آیکون با طیف رنگ برند |
| تب‌ها | ۴ تا به‌علاوه دکمه شناور | ۴ |
اصلاح ۱: بنفش را خرج موجودی کنید
قبل
بعد
«موجودی کل» با آیکون چشم و مبلغ $12,450.80 در یک اندازه، ردیفی از ستاره‌ها و 4821، «دارنده کارت» و «انقضا» و لوگوی VISA روی گرادیانی پررنگ، در برابر «حساب اصلی» و 4821 در گوشه، $12,450 با .80 کوچک‌تر و قرصی با متن «+$320.50 در این ماه» روی بنفش تیره‌تر.
پیش‌نویس گرادیان برند را روی کارتی گذاشته که شبیه کارت است، پس اولین برداشت این است که «این یک کارت اعتباری است». موجودی بزرگ‌ترین متن است، اما شماره کارت، نام دارنده، انقضا و لوگوی VISA همگی سر یک بخش از کارت با هم رقابت میکنند. بیشترشان اطلاعاتی است که آدم از قبل می‌داند یا فقط موقع پرداخت آنلاین لازم دارد.
اصلاح همان خانواده بنفش و آبی را نگه می‌دارد و پشت یک ایده می‌گذارد. دلارها ۴۲ پوینت و سنت‌ها ۲۲ پوینت‌اند، چون $12,450 عددی است که می‌خوانید و .80 جزئیات است. یک قرص نشان میدهد این ماه چه تغییری کرده، که دومین سؤال مردم درباره موجودی است. شماره کارت به «4821» مخفیشده در گوشه کوچک میشود، همان‌قدر که بفهمید این کدام حساب است.
قاعده‌ای برای استفاده دوباره: وقتی رنگ برندتان پرسروصداست، فقط یک کار به آن بدهید.
اصلاح ۲: سه اقدام، نه شش
قبل
بعد
شش آیکون گرد در آبی، سبز، نارنجی، صورتی، بنفش و خاکستری: ارسال، درخواست، شارژ، پرداخت قبوض، تبدیل ارز و بیشتر، در برابر سه دکمه پهن: «ارسال» پر و «درخواست» و «شارژ» ساده و سفید.
شش رنگ روی شش اقدام می‌گوید «این‌ها همه به یک اندازه مهم‌اند و همه با هم فرق دارند». هیچ‌کدام درست نیست. سه اقدامی که می‌مانند همان‌هایی هستند که هر حساب لازم دارد: ارسال، درخواست و شارژ. پرداخت قبوض، تبدیل ارز و بیشتر از این صفحه رفته‌اند و تب جدید پرداختها برای این جور اقدام‌ها خانه‌ای جدا میدهد.
اصلاح به این سه سلسله‌مراتب هم میدهد. «ارسال» با رنگ برند پر شده، چون اقدامی است که مردم برایش می‌آیند. «درخواست» و «شارژ» ساده‌اند، هستند بی‌آنکه داد بزنند. دکمه‌ها پهن‌اند و راحت لمس می‌شوند، و برچسب کنار آیکون است، نه زیر آن.
اصلاح ۳: تراکنش‌ها را به تفکیک روز گروه کنید، از رنگ برای معنا استفاده کنید
قبل
بعد
فهرستی تخت از پنج تراکنش، هرکدام با دایره رنگی برند، زمان‌نمای بلند مثل «Oct 22, 2026 at 09:41 AM» و مبلغ‌هایی قرمز یا سبز، در برابر دو گروه «امروز» و «دیروز»، هرکدام در یک کارت سفید با کاشی‌های حرفی بنفش، یک دسته‌بندی زیر هر نام، مبلغهای مشکی و یک +$2,500.00 سبز.
قرمز یعنی ایست. اپ بانکی که هر هزینه را قرمز میکند، زندگی عادی، یعنی قبض استریم، یک سفر، یک قهوه، را به ردیفی از آلارم‌های کوچک تبدیل میکند. اصلاح، پولِ خروجی را با متن ساده نشان میدهد و سبز را برای تنها چیزی که خبر خوب است نگه می‌دارد: پولِ ورودی.
زمان‌نماها هم عوض شد. تاریخ و ساعت کامل روی هر ردیف بیشتر اطلاعات تکراری است. گروه‌بندی زیر «امروز» و «دیروز» تاریخ را یک بار می‌گوید، و خط دوم هر ردیف می‌گوید پرداخت برای چه بوده: «اشتراک»، «حمل‌ونقل»، «حقوق». سؤالی که مردم واقعاً هنگام مرور فهرست می‌پرسند همین است.
فروشنده‌ها هم رنگ برندشان را از دست دادند. یک N قرمز، یک U مشکی، یک S سبز و یک A نارنجی سرزنده به نظر می‌رسند، اما فهرست را به رنگین‌کمانی بی‌حرف تبدیل میکنند. یک کاشی رنگ‌خورده با یک حرف ردیف‌ها را یکدست نگه می‌دارد، پس مبلغ‌ها و نام‌ها چیزهایی هستند که می‌خوانید.
اصلاح ۴: چهار تب، بدون بعلاوه شناور
قبل
بعد
خانه، کارت‌ها، یک دکمه بزرگ شناور بعلاوه، آمار و پروفایل، در برابر خانه، کارت‌ها، پرداختها و پروفایل با تب فعال به رنگ بنفش.
دکمه شناور بعلاوه می‌پرسد «چه چیزی اضافه شود؟». در اپ بانکی می‌تواند یعنی ارسال، درخواست، افزودن کارت یا شارژ، و آدم باید بازش کند تا بفهمد. روی محتوا هم می‌نشیند و نوار تب را دو تکه میکند.
اصلاح آن را با تبی به نام «پرداختها» عوض میکند که می‌گوید پشتش چیست. «آمار» از نوار تب بیرون می‌رود و کارت موجودی حالا تنها عددی از آن را که مردم هر روز می‌بینند حمل میکند: تغییر این ماه.
اصلاح‌های کوچک‌تر
- هدری با یک آیکون. پیش‌نویس کنار سلام، یک کد QR، یک زنگ و یک آیکون تنظیمات دارد. اصلاح فقط زنگ را نگه می‌دارد.
- آواتار واقعی با حروف اول نام. دایره بنفش با «AM» بنفش یکدست برند است، پس از زمینه جدا میشود.
- یک حاشیه و یک مقیاس فاصله. ردیف‌ها روی حاشیه ۲۰ پوینتی می‌نشینند و فاصله‌ها از یک فهرست کوتاه می‌آیند.
- سلام آرام‌تر. «Good Morning, Alex Moreno!» با M بزرگ و علامت تعجب شد «Good morning» و یک نام.
- کارت‌هایی که گروه میکنند. تراکنش‌های هر روز در یک ظرف سفید می‌نشینند، با یک خط جداکننده نازک بین ردیف‌ها و بدون خط بین گروه‌ها.
اپ بانکی خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا موجودی بزرگ‌ترین چیز روی صفحه است؟ | سؤالی است که مردم برای پاسخش اپ را باز میکنند |
| آیا سنت‌ها از دلارها کوچک‌ترند؟ | سنت‌ها جزئیات‌اند، نه تیتر |
| آیا قرمز فقط جایی هست که چیزی اشتباه است؟ | خرج عادی خطا نیست |
| آیا اقدام‌ها سلسله‌مراتب دارند؟ | شش گزینه برابر یعنی بی‌انتخابی |
| آیا شماره کارت باید روی صفحه اصلی باشد؟ | اشاره به چهار رقم آخر برای شناسایی حساب کافی است |
| آیا تب یا دکمه‌ای برای فهمیده شدن به برچسب نیاز دارد؟ | بعلاوه شناور مردم را به حدس زدن وامی‌دارد |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را دارد، هر بخش اصلاح‌شده به‌صورت کامپوننت قبل و بعد، متغیرهای رنگ UI، سبک‌های متن iOS و یک فایل راهنما با منابع.
فایل رایگان Figma
صفحه اصلی بانکی، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خود کپی کنید.
سؤالات متداول
صفحه اصلی یک اپ بانکی اول چه چیزی را باید نشان بدهد؟
موجودی را، بزرگ، با یک خط کوتاه درباره تغییرش در این ماه. بعد اقدامهای سریع می‌آیند و بعد تراکنش‌های اخیر.
یک اپ بانکی چند اقدام سریع باید داشته باشد؟
سه تا خوب جواب میدهد: ارسال، درخواست و شارژ. رایجترین را پر کنید و بقیه را ساده بگذارید و اقدامهای کمکاربردتر را به تب پرداختها ببرید.
آیا هزینهها در اپ بانکی باید قرمز باشند؟
نه. قرمز مثل هشدار خوانده میشود و خرج معمولی هشدار نیست. مبلغهای خروجی را با متن ساده نشان بدهید و سبز را فقط برای پولِ ورودی به کار ببرید.
شماره کارت چطور باید روی صفحه اصلی اپ بانکی ظاهر شود؟
مخفیشده و کوچک، فقط با چهار رقم آخر، تا مردم بفهمند به کدام حساب نگاه میکنند. جزئیات کامل جایش در صفحه کارتهاست.
آیا اپ بانکی باید دکمه شناور بعلاوه داشته باشد؟
معمولاً نه. بعلاوه نمیگوید چه چیزی اضافه میکند، پس آن را با تبی دارای برچسب مثل «پرداختها» عوض کنید.
منابع
- هر دو صفحه از خودمان است و در Figma طراحی و اندازه‌گیری شده. نام فروشنده‌ها نمونه‌های عمومی‌اند.
- ابتدا به‌صورت کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
