طراحی اپلیکیشن سلامت: صفحه اصلی نوبت‌دهی پزشک، قبل و بعد
اپلیکیشن نوبت پزشکی که با بنر تخفیف باز می‌شود، و همان صفحه پس از اصلاح، با نوبت بعدی در صدر. هر تغییر کنار هم، دلیل پشت هر کدام، و فایل رایگان 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 |
اصلاح اول: نوبت بعدی را اول بگذارید
قبل
بعد
«همین حالا اولین نوبتت را بگیر!» با 20٪ تخفیف برای اولین مشاوره تصویری، یک دکمه Book Now، یک لینک Learn More و نقطه‌های اسلایدر، در برابر کارت نوبت بعدی با دکتر Sarah Lee، متخصص قلب، یک دکمه تماس تصویری، و تاریخ و ساعت در یک ردیف.
صفحه اصلی باید قبل از هر چیز دیگر به این سؤال جواب بدهد: «حالا چه کاری باید بکنم؟» برای بیمار برگشتی این همان نوبت است: چه کسی، کی و چطور وارد شوم. در پیش‌نویس این پاسخ در ته صفحه است، در یک خط متن ریز با لینک «Details».
اصلاح، نوبت را قهرمان صفحه میکند. چهره و نام پزشک می‌گوید او کیست، تاریخ و ساعت در یک ردیف‌اند و آیکون ویدیو با یک ضربه شما را وارد تماس میکند. بنر را باید بست، اما کارتی با دکمه استفاده می‌شود.
تاریخ هم کوتاه‌تر و خواناتر شد. «Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM» شد «Tue, 28 Oct» و «10:30 AM»، چون سال محل تردید نیست و ساعت پایان به‌ندرت در تصمیم برای رفتن یا نرفتن نقش دارد.
قاعده‌ای برای استفاده دوباره: بالای صفحه اصلی متعلق به چیزی است که مردم برایش برمی‌گردند، نه چیزی که شما می‌خواهید بفروشید.
اصلاح دوم: چهار تخصص، یک رنگ
قبل
بعد
هشت آیکون گرد در هشت رنگ: Cardiology، Dentist، Eye Care، Pulmonology، Neurology، Orthopedic، Pediatrics و More، در برابر چهار کاشی سفید با آیکون‌های سبزآبی: Cardio، Dental، Eyes و More.
هشت رنگ روی هشت آیکون به چشم هشت جای توقف می‌دهد و هیچ دلیلی برای توقف در هیچ‌کدام. رنگ یک سیگنال است و اینجا چیزی نمی‌گوید: قلب قرمز فوری‌تر از چشم بنفش نیست.
اصلاح یک رنگ نگه می‌دارد، سبزآبی برند، تا رنگ دوباره معنا پیدا کند. برچسب‌ها کوتاه‌تر شدند («Cardio»، «Dental»، «Eyes») تا هرکدام با اندازه‌ای خوانا در یک خط جا شود. و فقط چهار مورد نمایش داده می‌شود، با یک کاشی «More»، چون کسی که تخصص کمیابتری لازم دارد از جستجو استفاده میکند، که درست بالای آن قرار دارد.
اصلاح سوم: کارت پزشک که یک ردیف است
قبل
بعد
یک کارت با عکس، نام، «Cardiologist | City Heart Clinic»، پنج ستاره، 4.8 (120 نظر)، «Fee: $50»، قرص Available today، دکمه Book Now و یک قلب، با کارت بعدی که نیمه‌بریده است، در برابر دو ردیف با عکس کوچک، نام، «Cardiologist · 1.2 km» و امتیاز 4.9 (212).
کارت پیش‌نویس نُه تکه اطلاعات و دو عمل را حمل میکند. هرکدام به‌تنهایی منطقی است. با هم، کارت را به فرمی تبدیل میکنند که خواننده باید خط‌به‌خط اسکن کند، و دکمه Book Now روی هر کارت صفحه‌ای برای گشتن را به سالن فروش تبدیل میکند.
اصلاح سه خط نگه می‌دارد: نام، بعد تخصص و فاصله، که تعیین میکند واقعاً می‌توانید بروید یا نه، بعد یک امتیاز با تعداد نظرها. هزینه، دسترسپذیری و دکمه رزرو به صفحه خود پزشک می‌روند، جایی که برای توضیحشان جا هست. یک فلش می‌گوید «برای باز کردن بزن».
ردیف‌ها هم عمودی‌اند، نه اسلایدر افقی. کارت نیمه‌بریده در لبه اشاره خوبی است که چیز بیشتری هست، اما یک لیست به آدم اجازه می‌دهد دو پزشک را یک‌نگاهی مقایسه کند، که کار واقعی همین است.
اصلاح چهارم: یک آیکون در هدر
قبل
بعد
«Hello, Leo!» با «How are you feeling today?» و آیکون‌های جستجو، زنگ و چت، در برابر آواتار سبز با حروف اول نام، «Good morning, Leo Martins» و یک زنگ با نقطه قرمز.
هدر پیش‌نویس سه آیکون دارد و دو تایشان تکراری‌اند. زنگ در هدر و تب Notifications یک جا را باز میکنند، و آیکون چت و تب Chat هم همین‌طور. وقتی دو در به یک اتاق می‌رسند، آدم‌ها فکر میکنند کدام واقعی است.
آیکون جستجو جای یک فیلد جستجو نشسته است. اصلاح خود فیلد را یک ردیف زیر نوبت نشان می‌دهد، پس چیزی برای باز کردن نمانده. زنگ می‌ماند چون یادآوری یا پیام از کلینیک تنها چیزی است که ارزش نقطه قرمز دارد.
اصلاح‌های کوچک‌تر
- چهار تب، نه پنج. Notifications از نوار تب رفت چون زنگ آن را پوشش می‌دهد. «Chat» شد «Messages»، همان واژه‌ای که در بیشتر صندوق‌های پیام می‌بینید.
- آواتار با حروف اول. یک دایره سبزآبی ساده با LM می‌گوید این حساب مال کیست، مثل هر اپ دیگری.
- یک حاشیه. پیش‌نویس 14 چپ و 12 راست دارد. اصلاح 20 در دو طرف همه ردیف‌ها، با فاصله‌های 8، 12، 14 و 20.
- خوشامد ساده. «Hello, Leo! How are you feeling today?» سؤالی می‌پرسید که صفحه نمی‌توانست جوابش را بدهد. «Good morning, Leo Martins» نمی‌پرسد.
- بدون اسلایدر پیشنهاد. بنر سه نقطه داشت و یک لینک دوم کنار دکمه‌اش. اصلاح پیشنهاد را از این صفحه برمی‌دارد و یک اقدام روشن در بخش اصلی می‌گذارد.
اپ سلامت خودتان را بازبینی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا نوبت بعدی اولین چیز صفحه است؟ | دلیل برگشتن مردم همین است |
| آیا کسی با یک ضربه می‌تواند وارد تماس تصویری شود؟ | ویزیت همان محصول است |
| آیا هر رنگ معنایی دارد؟ | هشت رنگ یعنی هیچ معنایی |
| آیا ردیف پزشک می‌گوید کیست، چه تخصصی، چقدر دور و چقدر خوب؟ | مردم همین‌طور انتخاب میکنند |
| آیا آیکونی در هدر تکرار یک تب است؟ | درهای تکراری اعتماد را پایین می‌آورند |
| آیا پیشنهاد فقط به کسانی نشان داده می‌شود که هنوز نوبت نگرفتهاند؟ | بیمار برگشتی به تخفیف اولین ویزیت نیازی ندارد |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را دارد، هر بخش اصلاح‌شده به‌صورت کامپوننت قبل و بعد، متغیرهای رنگ UI، استایل‌های متن iOS و یک راهنما با منبع عکس‌ها.
فایل رایگان Figma
صفحه اصلی نوبت‌دهی پزشک، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خودتان کپی کنید.
سوالات متداول
صفحه اصلی اپ نوبت پزشک باید اول چه چیزی نشان دهد؟
نوبت بعدی، همراه با پزشک، تاریخ، ساعت و راهی برای ورود به تماس تصویری. جستجو و تخصص‌ها بعد از آن می‌آیند.
یک اپ سلامت چند تخصص باید در صفحه اصلی نشان دهد؟
حدود چهار تا، بهعلاوه یک کاشی More. کسانی که دنبال چیز کمیابتری هستند از جستجو استفاده میکنند، پس شبکه بلندی از هشت یا بیشتر آیکون رنگی فقط شلوغی اضافه میکند.
کارت پزشک در یک اپ سلامت چه چیزی باید نشان دهد؟
نام، تخصص، فاصله پزشک و یک امتیاز با تعداد نظرها. هزینهها، دسترسپذیری و دکمه رزرو به صفحه پزشک تعلق دارند.
آیا اپ سلامت باید در صفحه اصلی بنر تبلیغاتی بگذارد؟
نه بالای یک نوبت پیشرو. پیشنهاد اولین ویزیت به درد کسانی میخورد که هنوز نوبت نگرفتهاند، و بیماران برگشتی برای چیز دیگری آمدهاند.
یک اپ سلامت به چند تب نیاز دارد؟
چهار تا کافی است: Home، Appointments، Messages و Profile. Notifications می‌تواند در هدر به‌شکل یک زنگ با نقطه بماند.
منابع
- هر دو صفحه از خود ما هستند، طراحی و اندازه‌گیری‌شده در 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
