बैंकिंग ऐप डिज़ाइन: होम स्क्रीन रीडिज़ाइन, पहले और बाद में
एक बैंकिंग होम स्क्रीन जो क्रेडिट कार्ड के विज्ञापन जैसी दिखती है, और वही स्क्रीन ठीक की हुई, जहाँ बैलेंस सबसे आगे है। हर बदलाव आमने-सामने, हर बदलाव की वजह, और मुफ़्त Figma फ़ाइल।
बैंकिंग ऐप की होम स्क्रीन को एक सेकंड से कम में एक सवाल का जवाब देना होता है: मेरे पास कितना पैसा है? नीचे का पहला ड्राफ़्ट एक सुंदर ग्रेडिएंट कार्ड है, लेकिन बैलेंस के बाद सबसे बड़ी चीज़ कार्ड नंबर है, एक्शन छह रंगों में आते हैं और लगभग हर लेनदेन लाल है। यह क्रेडिट कार्ड के विज्ञापन जैसा दिखता है।
सुधार में ब्रांड का बैंगनी रंग और हर फ़ीचर वैसा ही रहता है। बस रंग उस नंबर पर खर्च होता है जो मायने रखता है, और बाकी सब शांत हो जाता है।
पूरी स्क्रीन, पहले और बाद में
जूनियर ड्राफ़्ट
ठीक किया हुआ
बाईं ओर कार्ड सच में कार्ड है: बैलेंस, छिपा हुआ नंबर, धारक का नाम, समाप्ति तिथि और VISA लोगो, सब एक ग्रेडिएंट पर। उसके नीचे छह रंगों में छह एक्शन सर्कल, फिर लेनदेन की सपाट सूची जिसमें हर खर्च पर लाल रंग है और हर मर्चेंट का अपना लोगो रंग।
दाईं ओर कार्ड एक बैलेंस है। उसमें खाते का नाम, डॉलर में रकम, इस महीने के बदलाव की एक पंक्ति, और कोने में समाए आख़िरी चार अंक हैं। इसके नीचे सब कुछ शांत है, इसलिए नज़र सबसे पहले बैलेंस पर ही जाती है।
| जूनियर ड्राफ़्ट | ठीक किया हुआ | |
|---|---|---|
| कार्ड क्या दिखाता है | बैलेंस, कार्ड नंबर, धारक, समाप्ति तिथि, VISA लोगो | खाते का नाम, बैलेंस, इस महीने का बदलाव, आख़िरी चार अंक |
| क्विक एक्शन | 6, 6 रंगों में | 3, एक भरा हुआ और दो सादे |
| सूची में लाल | हर खर्च | कहीं नहीं |
| सूची में हरा | आमदनी | सिर्फ़ आमदनी |
| लेनदेन के आइकन | 5 ब्रांड रंग | ब्रांड टिंट में 1 आइकन स्टाइल |
| टैब | 4 और एक फ़्लोटिंग बटन | 4 |
सुधार 1: बैंगनी रंग बैलेंस पर खर्च करें
पहले
बाद में
आँख के आइकन के साथ "Total Balance" और एक ही आकार में $12,450.80, तारों की एक पंक्ति और 4821, Card Holder और Expires, और चमकीले ग्रेडिएंट पर VISA लोगो, जबकि बाद में कोने में "Main account" और 4821, छोटे .80 के साथ $12,450, और गहरे बैंगनी पर "+$320.50 this month" की गोली।
ड्राफ़्ट ब्रांड ग्रेडिएंट को ऐसे कार्ड पर इस्तेमाल करता है जो कार्ड जैसा ही दिखता है, इसलिए पहली नज़र में लगता है "यह क्रेडिट कार्ड है"। बैलेंस सबसे बड़ा टेक्स्ट है, लेकिन कार्ड नंबर, धारक का नाम, समाप्ति तिथि और VISA लोगो कार्ड के उसी हिस्से के लिए होड़ करते हैं। इनमें से ज़्यादातर जानकारी इंसान को पहले से पता होती है या सिर्फ़ ऑनलाइन भुगतान के समय चाहिए।
सुधार वही बैंगनी और नीला परिवार रखता है, पर उसे एक ही विचार के पीछे लगाता है। डॉलर 42 pt के हैं और सेंट 22 pt के, क्योंकि $12,450 वह नंबर है जो आप पढ़ते हैं और .80 सिर्फ़ ब्योरा है। एक गोली दिखाती है कि इस महीने क्या बदला, जो बैलेंस के बारे में लोगों का दूसरा सवाल है। कार्ड नंबर कोने में छिपे "4821" में सिमट जाता है, इतना कि पता चले यह कौन सा खाता है।
दोबारा काम आने वाला नियम: जब आपका ब्रांड रंग तेज़ हो, तो उसे एक ही काम दें।
सुधार 2: छह नहीं, तीन एक्शन
पहले
बाद में
नीले, हरे, नारंगी, गुलाबी, बैंगनी और ग्रे रंग के छह गोल आइकन: Send, Request, Top Up, Pay Bills, Exchange और More, जबकि बाद में तीन चौड़े बटन: भरा हुआ Send, फिर सादे सफ़ेद में Request और Top Up।
छह एक्शन पर छह रंग कहते हैं "ये सब बराबर अहम हैं और सब अलग हैं"। ये दोनों ही नहीं हैं। जो तीन बचे हैं वे हर खाते की ज़रूरत हैं: Send, Request और Top Up। Pay Bills, Exchange और More इस स्क्रीन से हट गए हैं, और नया Payments टैब ऐसे एक्शन को अपना घर देता है।
सुधार इन तीनों को एक क्रम भी देता है। Send ब्रांड रंग से भरा है, क्योंकि लोग उसी के लिए आते हैं। Request और Top Up सादे हैं, यानी मौजूद हैं पर चिल्लाते नहीं। बटन चौड़े हैं इसलिए दबाने में आसान हैं, और लेबल आइकन के नीचे नहीं, बगल में है।
सुधार 3: लेनदेन को दिन के हिसाब से समूहित करें, रंग से अर्थ दें
पहले
बाद में
पाँच लेनदेन की सपाट सूची, हर एक में रंगीन ब्रांड सर्कल, "Oct 22, 2026 at 09:41 AM" जैसा लंबा टाइमस्टैम्प, और लाल या हरी रकम, जबकि बाद में दो समूह, Today और Yesterday, हर एक सफ़ेद कार्ड में बैंगनी अक्षर वाली टाइलों के साथ, हर नाम के नीचे श्रेणी, काली रकम और एक हरा +$2,500.00।
लाल का मतलब है रुको। जो बैंकिंग ऐप हर खर्च को लाल रंगती है, वह रोज़मर्रा की ज़िंदगी, यानी स्ट्रीमिंग बिल, राइड, कॉफ़ी, को छोटे अलार्मों की कतार बना देती है। सुधार बाहर जाने वाले पैसे को सादे टेक्स्ट में रखता है और हरा उस एक चीज़ के लिए रखता है जो अच्छी ख़बर है: आने वाला पैसा।
टाइमस्टैम्प भी बदले। हर पंक्ति में पूरी तारीख़ और समय ज़्यादातर दोहराई गई जानकारी है। "Today" और "Yesterday" के तहत समूहित करने से तारीख़ एक बार बताई जाती है, और हर पंक्ति की दूसरी लाइन बताती है कि भुगतान किस लिए था: "Subscription", "Transport", "Salary"। सूची स्कैन करते समय लोग असल में यही सवाल पूछते हैं।
मर्चेंट ने अपने ब्रांड रंग भी खो दिए। लाल N, काला U, हरा S और नारंगी A जीवंत लगते हैं, पर सूची को इंद्रधनुष बना देते हैं जिसमें कहने को कुछ नहीं है। अक्षर वाली एक टिंटेड टाइल पंक्तियों को एक-सा रखती है, इसलिए रकम और नाम ही पढ़े जाते हैं।
सुधार 4: चार टैब, फ़्लोटिंग प्लस नहीं
पहले
बाद में
Home, Cards, एक बड़ा फ़्लोटिंग प्लस बटन, Stats और Profile, जबकि बाद में Home, Cards, Payments और Profile, जिसमें सक्रिय टैब बैंगनी में है।
फ़्लोटिंग प्लस बटन पूछता है "क्या जोड़ें?"। बैंकिंग ऐप में इसका मतलब send, request, कार्ड जोड़ना या top up हो सकता है, और जानने के लिए उसे खोलना पड़ता है। वह कंटेंट के ऊपर बैठता है और टैब बार को दो हिस्सों में बाँट देता है।
सुधार उसकी जगह Payments नाम का टैब रखता है, जो बता देता है कि उसके पीछे क्या है। Stats टैब बार से हट जाता है, और बैलेंस कार्ड अब उसका वह एक नंबर दिखाता है जो लोग रोज़ देखते हैं: इस महीने का बदलाव।
छोटे सुधार
- एक आइकन वाला हेडर। ड्राफ़्ट में अभिवादन के पास QR कोड, घंटी और सेटिंग आइकन हैं। सुधार में सिर्फ़ घंटी बचती है।
- असली इनिशियल्स वाला अवतार। "AM" वाला बैंगनी सर्कल ठोस ब्रांड बैंगनी है, इसलिए पृष्ठभूमि से अलग दिखता है।
- एक मार्जिन और एक स्पेसिंग स्केल। पंक्तियाँ 20 पॉइंट के मार्जिन पर हैं, और गैप एक छोटी सूची से लिए गए हैं।
- शांत अभिवादन। बड़े M और विस्मयादिबोधक चिह्न वाला "Good Morning, Alex Moreno!" बदलकर "Good morning" और एक नाम हो गया।
- समूह बनाने वाले कार्ड। हर दिन के लेनदेन एक सफ़ेद कंटेनर में हैं, पंक्तियों के बीच पतला डिवाइडर है और समूहों के बीच कोई नहीं।
अपनी बैंकिंग ऐप का ऑडिट करें
| सवाल | यह क्यों मायने रखता है |
|---|---|
| क्या बैलेंस स्क्रीन की सबसे बड़ी चीज़ है? | लोग ऐप इसी सवाल का जवाब पाने के लिए खोलते हैं |
| क्या सेंट डॉलर से छोटे हैं? | सेंट ब्योरा हैं, हेडलाइन नहीं |
| क्या लाल सिर्फ़ वहीं दिखता है जहाँ कुछ गड़बड़ है? | सामान्य खर्च कोई त्रुटि नहीं है |
| क्या एक्शन में कोई क्रम है? | छह बराबर विकल्प कोई विकल्प नहीं हैं |
| क्या कार्ड नंबर का होम स्क्रीन पर होना ज़रूरी है? | खाता पहचानने के लिए आख़िरी चार अंक का संकेत काफ़ी है |
| क्या किसी टैब या बटन को समझाने के लिए लेबल चाहिए? | फ़्लोटिंग प्लस लोगों से अंदाज़ा लगवाता है |
Figma फ़ाइल पाएँ
मुफ़्त फ़ाइल में दोनों स्क्रीन हैं, हर ठीक किया गया हिस्सा पहले और बाद के कंपोनेंट के रूप में, UI रंग वेरिएबल, iOS टेक्स्ट स्टाइल और क्रेडिट के साथ एक रीड-मी।
मुफ़्त Figma फ़ाइल
बैंकिंग होम स्क्रीन, पहले और बाद में
दोनों स्क्रीन और हर ठीक किया गया हिस्सा Figma कंपोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट में डुप्लिकेट करें।
FAQ
बैंकिंग ऐप की होम स्क्रीन को सबसे पहले क्या दिखाना चाहिए?
बैलेंस, बड़ा, और इस महीने उसमें क्या बदला इसकी एक छोटी पंक्ति के साथ। फिर क्विक एक्शन आते हैं, उसके बाद हाल के लेनदेन।
बैंकिंग ऐप में कितने क्विक एक्शन होने चाहिए?
तीन अच्छे रहते हैं: Send, Request और Top Up। सबसे आम एक्शन को भरा हुआ रखें और बाकी को सादा, और कम इस्तेमाल होने वाले एक्शन Payments टैब में ले जाएँ।
क्या बैंकिंग ऐप में खर्च लाल होने चाहिए?
नहीं। लाल चेतावनी की तरह पढ़ा जाता है, और सामान्य खर्च चेतावनी नहीं है। बाहर जाने वाली रकम सादे टेक्स्ट में रखें और हरा सिर्फ़ आने वाले पैसे के लिए इस्तेमाल करें।
बैंकिंग ऐप की होम स्क्रीन पर कार्ड नंबर कैसे दिखना चाहिए?
छिपा हुआ और छोटा, सिर्फ़ आख़िरी चार अंकों के साथ, ताकि लोग पहचान सकें कि वे कौन सा खाता देख रहे हैं। पूरा ब्योरा Cards स्क्रीन पर होना चाहिए।
क्या बैंकिंग ऐप में फ़्लोटिंग प्लस बटन होना चाहिए?
आमतौर पर नहीं। प्लस यह नहीं बताता कि वह क्या जोड़ता है, इसलिए उसकी जगह Payments जैसा लेबल वाला टैब रखें।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, 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
