تصميم تطبيق بنكي: إعادة تصميم الشاشة الرئيسية قبل وبعد
شاشة رئيسية لتطبيق بنكي تبدو كإعلان بطاقة ائتمان، ونفس الشاشة بعد الإصلاح ليتصدر الرصيد. كل تغيير جنبًا إلى جنب، والسبب وراء كل واحد، وملف Figma المجاني.
على الشاشة الرئيسية لتطبيق بنكي أن تجيب عن سؤال واحد في أقل من ثانية: كم أملك من المال؟ المسودة الأولى أدناه بطاقة متدرجة أنيقة، لكن رقم البطاقة هو أكبر عنصر بعد الرصيد، والإجراءات تأتي بستة ألوان، وتقريبًا كل معاملة حمراء. تبدو كإعلان لبطاقة ائتمان.
يحافظ الإصلاح على اللون البنفسجي للعلامة وعلى كل الميزات. ينفق اللون على الرقم المهم ويهدّئ كل ما عداه.
الشاشة كاملة، قبل وبعد
مسودة مبتدئ
بعد الإصلاح
على اليسار، البطاقة بطاقة: رصيد، ورقم مخفي جزئيًا، واسم الحامل، وتاريخ الانتهاء، وشعار VISA، كلها على تدرج واحد. تحتها ست دوائر إجراءات بست ألوان، ثم قائمة معاملات مسطحة يظهر فيها الأحمر على كل مصروف ولكل تاجر لون شعاره الخاص.
على اليمين، البطاقة رصيد. فيها اسم الحساب، والرقم بالدولار، وسطر يقول كيف تغيّر هذا الشهر، وآخر أربعة أرقام في الزاوية. كل ما تحتها أهدأ، فيصبح الرصيد أول مكان تقع عليه العين.
| مسودة مبتدئ | بعد الإصلاح | |
|---|---|---|
| ما تعرضه البطاقة | الرصيد، رقم البطاقة، الحامل، الانتهاء، شعار VISA | اسم الحساب، الرصيد، التغير هذا الشهر، آخر أربعة أرقام |
| الإجراءات السريعة | 6، بـ 6 ألوان | 3، واحد معبأ واثنان عاديان |
| الأحمر في القائمة | كل مصروف | لا شيء |
| الأخضر في القائمة | الدخل | الدخل فقط |
| أيقونات المعاملات | 5 ألوان علامات تجارية | نمط أيقونة واحد بلون العلامة الفاتح |
| التبويبات | 4 مع زر عائم | 4 |
الإصلاح 1: اصرف البنفسجي على الرصيد
قبل
بعد
"إجمالي الرصيد" مع أيقونة عين و $12,450.80 بحجم واحد، وصف من النجوم و 4821، وحامل البطاقة والانتهاء، وشعار VISA على تدرج ساطع، مقابل "الحساب الرئيسي" و 4821 في الزاوية، و $12,450 مع .80 أصغر، وحبة "+$320.50 هذا الشهر" على بنفسجي أعمق.
تستخدم المسودة تدرج العلامة على بطاقة تبدو كبطاقة، فتكون القراءة الأولى "هذه بطاقة ائتمان". الرصيد هو أكبر نص، لكن رقم البطاقة واسم الحامل والانتهاء وشعار VISA تتنافس كلها على الجزء نفسه من البطاقة. معظمها معلومات يعرفها الشخص أصلًا أو لا يحتاجها إلا عند الدفع عبر الإنترنت.
يُبقي الإصلاح عائلة البنفسجي والأزرق نفسها ويضعها خلف فكرة واحدة. الدولارات بحجم 42 نقطة والسنتات 22 نقطة، لأن $12,450 هو الرقم الذي تقرؤه و .80 تفصيل. حبة صغيرة تعرض ما تغيّر هذا الشهر، وهو السؤال الثاني الذي يطرحه الناس عن الرصيد. ويتقلص رقم البطاقة إلى "4821" مخفي جزئيًا في الزاوية، يكفي لمعرفة أي حساب هذا.
قاعدة لإعادة الاستخدام: حين يكون لون علامتك صاخبًا، أعطه مهمة واحدة.
الإصلاح 2: ثلاثة إجراءات لا ستة
قبل
بعد
ست أيقونات دائرية بالأزرق والأخضر والبرتقالي والوردي والبنفسجي والرمادي: إرسال، طلب، شحن، دفع الفواتير، صرف، والمزيد، مقابل ثلاثة أزرار عريضة: إرسال معبأ، ثم طلب وشحن بالأبيض العادي.
ست ألوان على ستة إجراءات تقول "كلها متساوية في الأهمية ومختلفة". وهي ليست كذلك. الثلاثة التي بقيت هي ما يحتاجه كل حساب: إرسال وطلب وشحن. دفع الفواتير والصرف والمزيد رحلت عن هذه الشاشة، وتبويب المدفوعات الجديد يمنح هذا النوع من الإجراءات بيتًا خاصًا به.
كما يمنح الإصلاح الثلاثة تسلسلًا هرميًا. الإرسال معبأ بلون العلامة لأنه الإجراء الذي يأتي الناس من أجله. الطلب والشحن عاديان، فهما حاضران دون صراخ. الأزرار عريضة فيسهل الضغط عليها، والنص بجانب الأيقونة لا تحتها.
الإصلاح 3: جمّع المعاملات حسب اليوم، واستخدم اللون للمعنى
قبل
بعد
قائمة مسطحة من خمس معاملات، لكل منها دائرة علامة تجارية ملونة، وطابع زمني طويل مثل "Oct 22, 2026 at 09:41 AM"، ومبالغ حمراء أو خضراء، مقابل مجموعتين، اليوم وأمس، كل واحدة في بطاقة بيضاء بمربعات حروف بنفسجية، وتصنيف تحت كل اسم، ومبالغ سوداء ومبلغ أخضر واحد +$2,500.00.
الأحمر يعني قف. تطبيق بنكي يلوّن كل مصروف بالأحمر يحوّل الحياة العادية، فاتورة بث، وتوصيلة، وقهوة، إلى صف من الإنذارات الصغيرة. يترك الإصلاح المال الخارج بنص عادي ويستخدم الأخضر للأمر الوحيد الذي هو خبر سار: المال الداخل.
تغيّرت الطوابع الزمنية أيضًا. تاريخ ووقت كاملان في كل صف معظمهما معلومات مكررة. التجميع تحت "اليوم" و"أمس" يذكر التاريخ مرة واحدة، والسطر الثاني من كل صف يقول لماذا كانت الدفعة: "اشتراك" و"مواصلات" و"راتب". هذا هو السؤال الذي يطرحه الناس فعلًا حين يمسحون القائمة بنظرهم.
وفقد التجار ألوان علاماتهم أيضًا. حرف N أحمر وU أسود وS أخضر وA برتقالي تبدو حيوية، لكنها تحوّل القائمة إلى قوس قزح بلا ما تقوله. مربع واحد ملوّن بحرف يُبقي الصفوف متناسقة، فتكون المبالغ والأسماء هي ما تقرؤه.
الإصلاح 4: أربعة تبويبات، بلا زائد عائم
قبل
بعد
الرئيسية، البطاقات، زر زائد عائم كبير، الإحصاءات والملف الشخصي، مقابل الرئيسية والبطاقات والمدفوعات والملف الشخصي مع التبويب النشط بالبنفسجي.
الزر الزائد العائم يسأل "أضف ماذا؟". في تطبيق بنكي قد يعني إرسالًا أو طلبًا أو إضافة بطاقة أو شحنًا، وعلى الشخص أن يفتحه ليعرف. وهو يجلس فوق المحتوى ويشطر شريط التبويبات نصفين.
يستبدله الإصلاح بتبويب اسمه المدفوعات، يقول ما خلفه. تغادر الإحصاءات شريط التبويبات، وتحمل بطاقة الرصيد الآن الرقم الوحيد منها الذي يراه الناس كل يوم: تغير هذا الشهر.
الإصلاحات الأصغر
- ترويسة بأيقونة واحدة. في المسودة رمز QR وجرس وأيقونة إعدادات بجانب التحية. يُبقي الإصلاح الجرس فقط.
- صورة رمزية حقيقية بالأحرف الأولى. الدائرة البنفسجية بـ "AM" بنفسجي العلامة الصلب، فتبرز عن الخلفية.
- هامش واحد وسلم مسافات واحد. الصفوف على هامش 20 نقطة، وفجواتها من قائمة قصيرة.
- تحية أهدأ. "Good Morning, Alex Moreno!" بحرف M كبير وعلامة تعجب صارت "Good morning" واسمًا.
- بطاقات تجمّع. معاملات كل يوم في حاوية بيضاء واحدة، بفاصل رفيع بين الصفوف ولا فاصل بين المجموعات.
دقّق تطبيقك البنكي
| السؤال | لماذا يهم |
|---|---|
| هل الرصيد أكبر عنصر على الشاشة؟ | هو السؤال الذي يفتح الناس التطبيق ليجيبوا عنه |
| هل السنتات أصغر من الدولارات؟ | السنتات تفصيل لا عنوان |
| هل يظهر الأحمر فقط حيث يوجد خطأ؟ | الإنفاق العادي ليس خطأ |
| هل للإجراءات تسلسل هرمي؟ | ستة خيارات متساوية لا خيار |
| هل يحتاج رقم البطاقة أن يكون على الشاشة الرئيسية؟ | تلميح بآخر أربعة أرقام يكفي لتحديد الحساب |
| هل يحتاج أي تبويب أو زر إلى نص ليُفهم؟ | الزر الزائد العائم يجعل الناس يخمّنون |
احصل على ملف Figma
يحتوي الملف المجاني على الشاشتين، وكل جزء مُصلَح كمكوّن قبل وبعد، ومتغيرات ألوان الواجهة، وأنماط نص 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
