طراحی اپلیکیشن هواشناسی: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ هواشناسی مبتدی با نه کاشی جزئیات در اندازه ۹ پیکسل و فهرست ده‌روزه، و همان صفحه پس از اصلاح. تک‌تک تغییرات کنار هم، دلیل هرکدام و فایل رایگان Figma.
آدم‌ها اپ هواشناسی را برای پاسخ به یک سؤال باز می‌کنند: بیرون هوا چطور است و بعدش چه می‌شود؟ پیش‌نویس اول زیر به این سؤال جواب می‌دهد و بعد دست‌بردار نیست، چون هرچه پیشبینی برمی‌گرداند نشان می‌دهد: نام کامل مکان، زمان تا ثانیه، نه کاشی با اندازه ۹ پیکسل و ده روز آیکون رنگی. نسخه اصلاحشده همان داده‌ها را نگه می‌دارد و تصمیم می‌گیرد صفحه اصلی برای چه کاری است.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاحشده
در سمت چپ، کارت اول یک نام مکان، یک زمان، یک کلید واحد، یک دما، یک وضعیت هوا و چهار واقعیت دیگر را در یک خط کوچک جا داده است. زیر آن سه جعبه سفید با متن ریز آمده. در سمت راست، بالای صفحه سه چیز دارد: شهر، عدد و آسمان. هرچه پایینتر است کارتی روی همان آبی است.
هر کارت در سمت راست از همان لبه چپ ۲۰ پیکسلی شروع می‌شود و آیکون وضعیت هوا، یک خورشید زرد پشت ابر سفید، در سمت راست بلوک اول و روبه‌روی عدد نشسته است.
| پیش‌نویس مبتدی | اصلاحشده | |
|---|---|---|
| دما | ۵۲ پیکسل | ۸۴ پیکسل |
| کاشی‌های جزئیات | ۹ | ۴ |
| ردیف‌های پیشبینی | ۱۰ | ۳ |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ پیکسل چپ، ۱۲ پیکسل راست | ۲۰ پیکسل از هر دو طرف |
| اندازه متن‌ها | ۸ تا ۱۳ پیکسل | ۱۳ تا ۲۸ pt |
اصلاح ۱: شهر و یک عدد بزرگ
قبل
بعد
نام مکان با ایالت و کشور، یک زمان، یک کلید و خط کوچکی از واقعیت‌ها، در برابر شهر، یک عدد بزرگ، آسمان و بازه دمای روز.
کارت اول پیش‌نویس یک فرم برای داده‌های پیشبینی است. «New York, NY, United States» سه اسم برای جایی است که آدم خودش می‌داند در آن است. «Updated 10/24/2026 09:41:12» تا ثانیه دقیق است و به درد کاربر نمی‌خورد: هیچ‌کس از روی یک زمان‌نگاشت تصمیم نمی‌گیرد چه بپوشد. کلید واحد هم در گوشه مهم‌ترین کارت نشسته است.
نسخه اصلاحشده می‌گوید «New York» و «۷۲°» و عدد را ۸۴ پیکسل می‌کند، بزرگ‌ترین چیز صفحه، چون پاسخ همان سؤال است. بعد آسمان با کلمه می‌آید، «Partly cloudy»، و بعد بازه روز، «H 75° L 61°». دمای حسشده و احتمال باران از این بلوک بیرون رفتند: دمای حسشده به بخش جزئیات منتقل شد و کارت خودش را گرفت.
قاعده‌ای که می‌شود تکرار کرد: بالای صفحه اصلی برای یک پاسخ است. داده‌ای که آدم دوم نگاه می‌کند یک پله پایینتر بگذارید.
اصلاح ۲: شش ساعت، یک کارت، جا برای خواندن
قبل
بعد
هشت ستون باریک در نواری قاب‌دار، در برابر شش ستون پهن با عنوانی به زبان ساده.
پیش‌نویس هشت ساعت را در یک ردیف فشرده می‌کند، پس هر ستون باریک است و نوشته‌ها ریزند. نسخه اصلاحشده شش ساعت نشان می‌دهد: Now، 10 am، 11 am، 12 pm، 1 pm و 2 pm. با دو ستون کمتر، هر ساعت آیکون و عدد بزرگ‌تری می‌گیرد.
عنوان کارت از یک برچسب به یک جمله تبدیل شد: «Sunny spells until 3 pm». به خواننده می‌گوید این شش ستون روی هم چه می‌شوند، پس لازم نیست همه آیکون‌ها را بگردد تا ببیند هوا کی عوض می‌شود.
قاعده‌ای که می‌شود تکرار کرد: ردیفی از داده باید تیتری داشته باشد که بگوید چه چیزی باید از آن برداشت.
اصلاح ۳: چهار جزئیات، هرکدام با عدد بزرگ
قبل
بعد
نه کاشی کوچک روی کارت سفید، در برابر چهار کارت بزرگتر با عدد درشت.
نه کاشی با اندازه ۹ پیکسل همه جزئیات را برابر می‌گیرند و هیچ‌کدام با یک نگاه خوانده نمی‌شود. فشار، نقطه شبنم و دید داده‌های واقعی‌اند، اما چیزی نیستند که نسخه اصلاحشده اول بگذارد.
نسخه اصلاحشده چهار تا نگه می‌دارد: دمای حسشده، رطوبت، باد و شاخص UV. هرکدام یک کارت، یک آیکون، یک برچسب کوچک و عددی بسیار بزرگتر از پیش‌نویس می‌گیرد. «6 High» و «8 mph NW» از فاصله یک بازو خوانده می‌شوند. شش‌تای دیگر، فشار، دید، نقطه شبنم، طلوع، غروب و کیفیت هوا، در این صفحه اصلی نیستند.
یک اپ هواشناسی کامل هنوز برایشان جایی لازم دارد، مثل صفحه جزئیات، و این بازطراحی آن را نمی‌کشد.
این معامله صادقانه است. صفحه اصلی سریع‌تر خوانده می‌شود و بقیه داده‌ها به خانه دوم نیاز دارند.
اصلاح ۴: سه روز با یک نوار برای هر بازه
قبل
بعد
ده ردیف متن با درصد باران و بیشینه و کمینه، در برابر سه ردیف با نواری برای بازه هر روز.
ده ردیف «75° / 61°» ده حاصل‌جمع است که خواننده باید در ذهن مقایسه کند. کدام روز گرم‌ترین است؟ از کجا هوا سردتر می‌شود؟ جواب در اعداد است و چشم باید آن را بیرون بکشد.
نوار مقایسه را انجام می‌دهد. کمینه و بیشینه هر روز روی یک مقیاس مشترک از ۵۰° تا ۷۸° می‌نشینند، پس نوار بلندتر یا متمایل‌تر به راست یعنی روز گرم‌تر یا پربازه‌تر، و رنگ در طول نوار از آبی خنک تا زرد گرم میرود. درصد باران از ردیف‌ها رفت. شنبه، ۲۴ اکتبر، «Today» است و دو روز بعد دنبالش می‌آیند.
قاعده‌ای که می‌شود تکرار کرد: وقتی سؤال این است که یک سری چطور با هم مقایسه می‌شوند، خودِ مقایسه را بکشید.
اصلاحات کوچک‌تر
- یک لبه چپ. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست داشت و بلوک‌هایش هم‌تراز نبودند. هر بلوک نسخه اصلاحشده از لبه ۲۰ پیکسلی شروع می‌شود، با ۱۲ پیکسل فاصله بین کارت‌ها.
- آبی عمیق‌تر. آسمان گرادیانی از
#1D4ED8تا#3B82F6است و آبی خودِ پیش‌نویس سر روشن‌تر آن است. کارت‌ها روی یک پرده سرمه‌ای ۲۴ درصدی (#1E3A8A) می‌نشینند تا بخشی از آسمان به نظر برسند، نه جعبه‌های سفید روی آن. - متن سفید روی آبی که خوانده می‌شود. متن سفید ۹ پیکسلی پیش‌نویس روی
#3B82F6ضعیف‌ترین جفت صفحه است. نوشته بزرگتر روی کارت‌های تیره‌تر آن را درست می‌کند. - یک مقیاس واقعی نوشتار. متن از ۸ تا ۱۳ پیکسل به اندازههای iOS یعنی ۱۳ تا ۲۸ pt رسید، با دمای ۸۴ پیکسلی در صدر.
- چهار تب، نه پنج. نسخه اصلاحشده یک تب را برمی‌دارد.
- بدون کلید واحد روی کارت اصلی. سوئیچ F و C از کارت اول رفت.
اپ هواشناسی خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| پاسخ یگانه بالای صفحه چیست و آیا بزرگ‌ترین چیز است؟ | نگاه اول باید کافی باشد |
| آیا زمان یا برچسبی هست که کاربر هرگز به آن عمل نمی‌کند؟ | دقت با کاربرد یکی نیست |
| آیا هر ردیف داده تیتری دارد که بگوید چه چیزی از آن برداشت شود؟ | خواننده نباید دنبال تغییر بگردد |
| آیا جزئیات عدد بزرگ و برچسب کوچک روشن دارند؟ | نه کاشی برابر، همه به یک اندازه نادیده گرفته می‌شوند |
| آیا فهرست روزها می‌تواند به یک نوار برای هر بازه تبدیل شود؟ | چشم شکل‌ها را سریع‌تر از حاصل‌جمع‌ها مقایسه می‌کند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به صورت جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
صفحه اصلی هواشناسی، قبل و بعد
هر دو صفحه و تک‌تک بخش‌های اصلاحشده به شکل کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
صفحه اصلی یک اپ هواشناسی اول چه چیزی باید نشان دهد؟
شهر و یک دمای بزرگ، بعد آسمان و بیشینه و کمینه روز. همهچیز دیگر یک پله پایینتر است: ساعتهای بعد، چند جزئیات و یک پیشبینی کوتاه.
یک اپ هواشناسی چند جزئیات روی صفحه اصلی نشان دهد؟
برای بیشتر مردم چهار تا کافی است: دمای حسشده، رطوبت، باد و شاخص UV. فشار، دید، نقطه شبنم و طلوع و غروب را در صفحه جزئیات بگذارید.
اپ هواشناسی پیشبینی ساعتی را چطور نشان دهد؟
حدود شش ساعت در یک کارت، با آیکون و عدد بزرگ و عنوانی که بگوید ساعت‌ها روی هم چه می‌شوند، مثل «Sunny spells until 3 pm».
پیشبینی چندروزه را در اپ چطور نشان دهیم؟
سه روز روی صفحه اصلی، هرکدام با نواری از کمینه تا بیشینه روز روی یک مقیاس مشترک. فهرست‌های بلندتر صفحه خودشان را می‌خواهند.
اپ هواشناسی از چه اندازه فونتی استفاده کند؟
از مقیاس متن پلتفرم استفاده کنید، مثل اندازههای متن iOS، و دما را بسیار بزرگتر از هر چیز دیگر نگه دارید. صفحه اصلاحشده از ۱۳ تا ۲۸ pt میرود و دمای ۸۴ پیکسلی دارد.
منابع
- هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده. مکان، دماها و تاریخ‌ها برای تمرین ساخته شده‌اند.
- کنتراست با فرمول کنتراست WCAG 2.2 بررسی شد: متن سفید روی هر کارت اصلاحشده ۴٫۶ به ۱ یا بهتر است، و متن سفید ۹ پیکسلی پیش‌نویس روی
#3B82F6برابر ۳٫۷ به ۱ است. - Apple Human Interface Guidelines: Typography، برای اندازههای متن iOS که در صفحه اصلاحشده استفاده شده است.
- نخستین بار به شکل کاروسل در 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
