تصميم تطبيقات الرعاية الصحية: الشاشة الرئيسية لتطبيق حجز المواعيد الطبية، قبل وبعد
تطبيق حجز مواعيد طبية يفتح بلافتة خصم، ونفس الشاشة بعد الإصلاح حيث يأتي الموعد القادم أولاً. كل تغيير جنبًا إلى جنب، وسببه، وملف Figma المجاني.
يفتح الناس تطبيقًا صحيًا لسبب واحد أكثر من أي سبب آخر: موعدهم القادم. المسودة الأولى أدناه تفتح بلافتة خصم بدلاً من ذلك، ويجلس الموعد في شريط رفيع قرب الأسفل. الإصلاح يضع الموعد أولاً ويحذف كل ما كان ينافسه.
كل الميزات باقية. ما زال بإمكانك البحث، وتصفح التخصصات، وحجز طبيب، ومراسلة العيادة.
الشاشة كاملة، قبل وبعد
مسودة مبتدئ
بعد الإصلاح
على اليسار، أول شيء كبير هو عرض: لافتة بلون تيل بصورة طبيبة وزر ورابط. أما ما جاء الشخص من أجله، موعده مع الدكتورة Sarah Lee يوم الثلاثاء، فهو أصغر كتلة على الشاشة ويقع تحت قسمين آخرين.
على اليمين، الموعد نفسه هو أكبر كتلة، مع الطبيب والتاريخ والوقت وزر لبدء مكالمة الفيديو. اختفى العرض من الشاشة الرئيسية، لأن خصم الزيارة الأولى لمن لم يحجزوا بعد، وهذا الشخص حجز.
| مسودة مبتدئ | بعد الإصلاح | |
|---|---|---|
| أول كتلة على الشاشة | لافتة خصم، ارتفاعها 149 px | الموعد القادم، ارتفاعه 174 px |
| الهامش الجانبي | 14 يسارًا، 12 يمينًا | 20 في كل صف |
| أحجام النص | من 8 إلى 18 px | من 11 إلى 28 pt، سلم خطوط iOS |
| ألوان الفئات | 8 | 1، لون العلامة تيل |
| عناصر بطاقة الطبيب | 9 | 3 أسطر وسهم |
| أيقونات الرأس | 3 | 1، مع صورة رمزية |
| التبويبات | 5 | 4 |
الإصلاح 1: ضع الموعد القادم أولاً
قبل
بعد
"احجز موعدك الأول الآن!" مع خصم 20% على أول استشارة بالفيديو، وزر احجز الآن، ورابط اعرف المزيد، ونقاط شريط متحرك، مقابل بطاقة موعد قادم مع الدكتورة Sarah Lee، أخصائية قلب، وزر مكالمة فيديو، والتاريخ والوقت في صف واحد.
يجب أن تجيب الشاشة الرئيسية عن "ماذا عليّ أن أفعل بعد ذلك؟" قبل أي سؤال آخر. بالنسبة للمريض العائد، هذا هو الموعد: مع من، ومتى، وكيف أنضم. في المسودة تقع هذه الإجابة في أسفل الشاشة تمامًا، في سطر نص صغير مع رابط "التفاصيل".
الإصلاح يحوّل الموعد إلى البطل. وجه الطبيب واسمه يخبرانك من هو، والتاريخ والوقت في صف واحد، وأيقونة الفيديو نقرة واحدة للانضمام. اللافتة يجب إغلاقها، أما البطاقة بزر فتُستخدم.
صار التاريخ أيضًا أقصر وأسهل قراءة. "Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM" صار "Tue, 28 Oct" و"10:30 AM"، لأن السنة ليست موضع شك، ووقت الانتهاء نادرًا ما يلزم لتقرر هل ستحضر.
قاعدة لتعيد استخدامها: أعلى الشاشة الرئيسية ملك للشيء الذي يعود الناس من أجله، لا للشيء الذي تريد أنت بيعه.
الإصلاح 2: أربعة تخصصات، لون واحد
قبل
بعد
ثماني أيقونات مستديرة بثمانية ألوان: القلب، الأسنان، العيون، الرئة، الأعصاب، العظام، الأطفال، والمزيد، مقابل أربع بلاطات بيضاء بأيقونات تيل: قلب، أسنان، عيون، والمزيد.
ثمانية ألوان على ثماني أيقونات تمنح العين ثمانية أماكن للتوقف ولا سببًا للتوقف عند أي منها. اللون إشارة، وهنا لا يقول شيئًا: القلب الأحمر ليس أكثر إلحاحًا من العين البنفسجية.
الإصلاح يُبقي لونًا واحدًا، تيل العلامة، فيعود للون معنى. التسميات أقصر ("Cardio" و"Dental" و"Eyes") فتتسع كل واحدة في سطر واحد بحجم مقروء. ويظهر أربعة فقط مع بلاطة "More"، لأن من يحتاج تخصصًا أندر سيستخدم البحث الموجود فوقها مباشرة.
الإصلاح 3: بطاقة طبيب تصبح صفًا
قبل
بعد
بطاقة واحدة بصورة واسم و"أخصائي قلب | City Heart Clinic" وخمس نجوم و4.8 (120 تقييمًا) و"الرسوم: $50" وشارة متاح اليوم وزر احجز الآن وقلب، والبطاقة التالية مقطوعة، مقابل صفين بصورة صغيرة واسم و"أخصائي قلب · 1.2 km" وتقييم 4.9 (212).
بطاقة المسودة تحمل تسع معلومات وإجراءين. كل واحدة معقولة وحدها. معًا تجعل البطاقة استمارة على القارئ مسحها سطرًا سطرًا، وزر احجز الآن على كل بطاقة يحوّل شاشة التصفح إلى صالة مبيعات.
الإصلاح يُبقي ثلاثة أسطر: الاسم، ثم التخصص والمسافة التي تحدد هل تستطيع الذهاب فعلاً، ثم تقييم واحد مع عدد المراجعات. الرسوم والتوفر وزر الحجز تنتقل إلى صفحة الطبيب نفسها، حيث توجد مساحة لشرحها. والسهم يقول "المس للفتح".
الصفوف أيضًا عمودية، لا شريطًا جانبيًا متحركًا. البطاقة المقطوعة عند الحافة تلميح جيد بوجود المزيد، لكن القائمة تتيح مقارنة طبيبين بنظرة واحدة، وهذه هي المهمة الفعلية.
الإصلاح 4: أيقونة واحدة في الرأس
قبل
بعد
"مرحبًا Leo!" مع "كيف تشعر اليوم؟" وأيقونات البحث والجرس والدردشة، مقابل صورة رمزية خضراء بالأحرف الأولى و"صباح الخير، Leo Martins" وجرس واحد بنقطة حمراء.
رأس المسودة فيه ثلاث أيقونات، واثنتان منها مكررتان. الجرس في الرأس وتبويب الإشعارات يفتحان المكان نفسه، وكذلك أيقونة الدردشة وتبويب الدردشة. حين يقود بابان إلى الغرفة نفسها، يتساءل الناس أيهما الحقيقي.
أيقونة البحث تنوب عن حقل بحث. الإصلاح يعرض الحقل نفسه، في صف تحت الموعد، فلا يوجد شيء لفتحه. ويبقى الجرس لأن تذكيرًا أو رسالة من العيادة هو الشيء الوحيد الذي يستحق نقطة حمراء.
الإصلاحات الأصغر
- أربع تبويبات لا خمس. خرجت الإشعارات من شريط التبويبات لأن الجرس يغطيها. و"Chat" صارت "Messages"، الكلمة الموجودة على الجانب الآخر من معظم صناديق الوارد.
- صورة رمزية بالأحرف الأولى. دائرة تيل صلبة بالحرفين LM تخبرك لمن هذا الحساب، كما تفعل كل التطبيقات الأخرى.
- هامش واحد. المسودة تستخدم 14 يسارًا و12 يمينًا. الإصلاح يستخدم 20 على جانبي كل صف، مع فواصل 8 و12 و14 و20.
- تحية بسيطة. "Hello, Leo! How are you feeling today?" سألت سؤالاً لا تستطيع الشاشة الإجابة عنه. أما "Good morning, Leo Martins" فلا تفعل.
- لا شريط عروض. كان في اللافتة ثلاث نقاط ورابط ثانٍ بجانب الزر. الإصلاح يحذف العرض من هذه الشاشة ويترك إجراءً واحدًا واضحًا في البطل.
دقّق تطبيقك الصحي
| السؤال | لماذا يهم |
|---|---|
| هل الموعد القادم أول شيء على الشاشة؟ | هو سبب عودة الناس |
| هل يستطيع أحد الانضمام إلى مكالمة فيديو بنقرة واحدة؟ | الزيارة هي المنتج |
| هل لكل لون معنى؟ | ثمانية ألوان لا تعني شيئًا |
| هل يعرض صف الطبيب من هو، وما تخصصه، وكم يبعد، وكم هو جيد؟ | بهذا يختار الناس |
| هل تكرر أي أيقونة في الرأس تبويبًا؟ | الأبواب المكررة تقلل الثقة |
| هل يظهر العرض فقط لمن لم يحجزوا؟ | المريض العائد لا يحتاج خصم الزيارة الأولى |
احصل على ملف Figma
الملف المجاني يضم الشاشتين، وكل جزء مُصلَح كمكوّن قبل وبعد، ومتغيرات ألوان الواجهة، وأنماط نصوص iOS، وملف اقرأني مع حقوق الصور.
ملف Figma مجاني
الشاشة الرئيسية لموعد الطبيب، قبل وبعد
الشاشتان وكل جزء مُصلَح كمكونات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ما الذي يجب أن تعرضه الشاشة الرئيسية لتطبيق مواعيد الأطباء أولاً؟
الموعد القادم، مع الطبيب والتاريخ والوقت وطريقة الانضمام إلى مكالمة فيديو. يأتي البحث والتخصصات بعده.
كم تخصصًا يجب أن يعرض التطبيق الصحي على الشاشة الرئيسية؟
نحو أربعة، مع بلاطة "المزيد". من يبحث عن شيء أندر يستخدم البحث، فشبكة طويلة من ثماني أيقونات ملونة أو أكثر تضيف ضوضاء.
ما الذي يجب أن تعرضه بطاقة الطبيب في تطبيق رعاية صحية؟
الاسم والتخصص وبعد الطبيب وتقييم واحد مع عدد المراجعات. الرسوم والتوفر وزر الحجز مكانها صفحة الطبيب.
هل يجب أن يستخدم التطبيق الصحي لافتة ترويجية على الشاشة الرئيسية؟
ليس فوق موعد قادم. عرض الزيارة الأولى يناسب من لم يحجزوا بعد، والمرضى العائدون جاؤوا لشيء آخر.
كم تبويبًا يحتاج تطبيق الرعاية الصحية؟
أربعة تكفي: الرئيسية والمواعيد والرسائل والملف الشخصي. يمكن أن تعيش الإشعارات في الرأس كجرس بنقطة.
المصادر
- الشاشتان من تصميمنا، صُممتا وقيستا في Figma.
- الصور عبر Unsplash من Jonathan Borba وBruno Rodrigues وvaibhav vivian، بموجب رخصة Unsplash.
- نُشر أولاً كشريط صور متحرك على 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
