تصميم تطبيق الطقس: إعادة تصميم الشاشة الرئيسية، قبل وبعد
شاشة رئيسية لتطبيق طقس من عمل مبتدئ بتسعة مربعات تفاصيل بخط 9 px وقائمة لعشرة أيام، ثم الشاشة نفسها بعد الإصلاح. كل تغيير جنبًا إلى جنب، وسببه، وملف Figma المجاني.
يفتح الناس تطبيق الطقس للإجابة عن سؤال واحد: كيف الجو في الخارج، وماذا سيفعل بعد ذلك؟ المسودة الأولى أدناه تجيب عنه، ثم تواصل الكلام، لأنها تعرض كل ما تعيده النشرة: اسم المكان كاملًا، وطابعًا زمنيًا بدقة الثانية، وتسعة مربعات بخط 9 px وعشرة أيام من الأيقونات الملونة. الإصلاح يحتفظ بالبيانات نفسها ويقرر ما الغرض من الشاشة الرئيسية.
الشاشة كاملة، قبل وبعد
مسودة المبتدئ
بعد الإصلاح
على اليسار، تحمل البطاقة الأولى اسم مكان وطابعًا زمنيًا ومفتاح وحدات ودرجة حرارة وحالة الجو وأربع معلومات أخرى في سطر صغير واحد. تحتها ثلاثة صناديق بيضاء بنص صغير. على اليمين، أعلى الشاشة فيه ثلاثة أشياء: المدينة والرقم والسماء. وكل ما تحتها بطاقة على الأزرق نفسه.
تبدأ كل بطاقة على اليمين من الحافة اليسرى نفسها عند 20 px، وأيقونة الحالة، شمس صفراء خلف سحابة بيضاء، تجلس يمين الكتلة الأولى في مقابل الرقم.
| مسودة المبتدئ | بعد الإصلاح | |
|---|---|---|
| درجة الحرارة | 52 px | 84 px |
| مربعات التفاصيل | 9 | 4 |
| صفوف التوقعات | 10 | 3 |
| التبويبات | 5 | 4 |
| الهامش الجانبي | 14 px يسار، 12 px يمين | 20 px على الجانبين |
| أحجام النص | 8 إلى 13 px | 13 إلى 28 pt |
الإصلاح 1: المدينة ورقم كبير واحد
قبل
بعد
اسم مكان مع الولاية والدولة، وطابع زمني، ومفتاح، وسطر صغير من الحقائق، مقابل المدينة ورقم كبير والسماء ومدى اليوم.
أول بطاقة في المسودة هي استمارة لبيانات التوقعات. "New York, NY, United States" ثلاثة أسماء لمكان واحد يعرف الشخص أصلًا أنه فيه. و"Updated 10/24/2026 09:41:12" دقيق حتى الثانية وعديم الفائدة للشخص: لا أحد يقرر ماذا يلبس من طابع زمني. ومفتاح الوحدات جالس في زاوية أهم بطاقة.
الإصلاح يقول "New York" و"72°" ويجعل الرقم 84 px، أكبر شيء على الشاشة، لأنه جواب السؤال. ثم تأتي السماء بالكلمات، "غائم جزئيًا"، ثم مدى اليوم، "أعلى 75° أدنى 61°". الإحساس بالحرارة واحتمال المطر غادرا هذه الكتلة: رقم الإحساس نزل إلى التفاصيل وصار له بطاقته.
القاعدة التي تعيد استخدامها: أعلى الشاشة الرئيسية للجواب الواحد. وضع البيانات التي يتحقق منها الشخص ثانيًا درجة واحدة أسفل.
الإصلاح 2: ست ساعات، بطاقة واحدة، ومساحة للقراءة
قبل
بعد
ثمانية أعمدة ضيقة في شريط بإطار، مقابل ستة أعمدة عريضة بعنوان بلغة واضحة.
المسودة تحشر ثماني ساعات في صف واحد، فيصبح كل عمود رفيعًا والخط ضئيلًا. الإصلاح يعرض ست: الآن، 10 ص، 11 ص، 12 م، 1 م و2 م. بعمودين أقل، تنال كل ساعة أيقونة أكبر ورقمًا أكبر.
عنوان البطاقة تحول من وسم إلى جملة: "فترات مشمسة حتى 3 م". يخبر القارئ بحصيلة الأعمدة الستة، فلا يحتاج لمسح كل أيقونة ليعرف متى يتغير الطقس.
القاعدة التي تعيد استخدامها: صف البيانات يجب أن يكون له عنوان يقول ما الذي تأخذه منه.
الإصلاح 3: أربع تفاصيل، لكل منها رقم كبير
قبل
بعد
تسعة مربعات صغيرة على بطاقة بيضاء، مقابل أربع بطاقات أكبر بالرقم بخط كبير.
تسعة مربعات بخط 9 px تعامل كل تفصيلة كأنها متساوية، ولا يمكن قراءة أي منها بنظرة. الضغط ونقطة الندى والرؤية بيانات حقيقية، لكنها ليست ما يضعه الإصلاح أولًا.
الإصلاح يبقي أربعًا: الإحساس بالحرارة والرطوبة والرياح ومؤشر UV. تنال كل واحدة بطاقة وأيقونة ووسمًا صغيرًا ورقمًا أكبر بكثير من المسودة. "6 مرتفع" و"8 mph NW" تُقرآن من مسافة ذراع. أما الست الباقية، الضغط والرؤية ونقطة الندى والشروق والغروب وجودة الهواء، فليست على هذه الشاشة الرئيسية.
تطبيق الطقس الكامل ما زال يحتاج مكانًا لها، مثل شاشة تفاصيل، وهذا التصميم لا يرسمها.
تلك هي المقايضة الصادقة. الشاشة الرئيسية تصبح أسرع قراءة، وبقية البيانات تحتاج بيتًا ثانيًا.
الإصلاح 4: ثلاثة أيام بشريط لكل مدى
قبل
بعد
عشرة صفوف نصية بنسبة المطر والأعلى والأدنى، مقابل ثلاثة صفوف بشريط لمدى كل يوم.
عشرة صفوف من "75° / 61°" هي عشر عمليات حسابية على القارئ أن يقارنها في رأسه. أي يوم أدفأ؟ أين يبرد الجو؟ الجواب في الأرقام، والعين مضطرة لاستخراجه.
الشريط يقوم بالمقارنة. تقع دنيا كل يوم وعلياه على مقياس مشترك من 50° إلى 78°، فشريط أطول أو أبعد يمينًا يعني يومًا أدفأ أو أوسع مدى، ويمتد اللون من أزرق بارد إلى أصفر دافئ على طول الشريط. نسبة المطر غادرت الصفوف. السبت 24 أكتوبر هو "اليوم"، ويتبعه اليومان التاليان.
القاعدة التي تعيد استخدامها: حين يكون السؤال كيف تقارن سلسلة ما، ارسم المقارنة.
الإصلاحات الأصغر
- حافة يسرى واحدة. استخدمت المسودة 14 px يسارًا و12 px يمينًا، ولم تتحاذَ كتلها. كل كتلة في الإصلاح تبدأ على حافة 20 px، مع 12 px بين البطاقات.
- أزرق أعمق. السماء تدرج من
#1D4ED8إلى#3B82F6، وأزرق المسودة نفسه هو الطرف الأفتح. تجلس البطاقات على طبقة كحلية بنسبة 24% (#1E3A8A)، فتبدو جزءًا من السماء لا صناديق بيضاء فوقها. - نص أبيض على أزرق يمكن قراءته. نص المسودة الأبيض بخط 9 px على
#3B82F6هو أضعف زوج على الشاشة. خط أكبر على بطاقات أغمق يحل المشكلة. - سلم خطوط حقيقي. انتقل النص من 8 إلى 13 px إلى أحجام iOS من 13 إلى 28 pt، مع درجة الحرارة 84 px في القمة.
- أربعة تبويبات لا خمسة. الإصلاح يزيل تبويبًا واحدًا.
- لا مفتاح وحدات في البطاقة الرئيسية. مفتاح F وC غادر البطاقة الأولى.
دقّق تطبيق الطقس الخاص بك
| السؤال | لماذا يهم |
|---|---|
| ما الجواب الواحد في الأعلى، وهل هو أكبر شيء؟ | النظرة الأولى يجب أن تكفي |
| هل هناك طابع زمني أو وسم لا يتصرف الشخص بناءً عليه أبدًا؟ | الدقة ليست الفائدة |
| هل لكل صف بيانات عنوان يقول ما تأخذه منه؟ | لا يجب أن يبحث القارئ عن التغير |
| هل للتفاصيل رقم كبير ووسم صغير واضح؟ | تسعة مربعات متساوية تُتجاهل كلها بالتساوي |
| هل يمكن أن تتحول قائمة الأيام إلى شريط لكل مدى؟ | العين تقارن الأشكال أسرع من المجاميع |
احصل على ملف Figma
يحتوي الملف المجاني على الشاشتين كمكونات، وكل إصلاح كزوج قبل وبعد، ومتغيرات الألوان وأنماط نص iOS.
ملف Figma مجاني
الشاشة الرئيسية للطقس، قبل وبعد
الشاشتان وكل جزء مُصلَح كمكونات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ما الذي يجب أن تعرضه الشاشة الرئيسية لتطبيق الطقس أولًا؟
المدينة ودرجة حرارة كبيرة واحدة، ثم السماء وأعلى درجة وأدناها لليوم. وكل شيء آخر درجة أسفل: الساعات القادمة وبضع تفاصيل وتوقعات قصيرة.
كم تفصيلة يجب أن يعرض تطبيق الطقس على الشاشة الرئيسية؟
أربع تكفي لمعظم الناس: الإحساس بالحرارة والرطوبة والرياح ومؤشر UV. ضع الضغط والرؤية ونقطة الندى والشروق أو الغروب في شاشة تفاصيل.
كيف يعرض تطبيق الطقس التوقعات الساعية؟
نحو ست ساعات في بطاقة واحدة، بأيقونات وأرقام كبيرة، وعنوان يقول ما تؤول إليه الساعات، مثل "فترات مشمسة حتى 3 م".
كيف تعرض توقعات عدة أيام في تطبيق؟
ثلاثة أيام على الشاشة الرئيسية، لكل منها شريط من دنيا اليوم إلى عليا على مقياس مشترك. القوائم الأطول مكانها شاشتها الخاصة.
ما حجم الخط الذي يجب أن يستخدمه تطبيق الطقس؟
استخدم سلم النص الخاص بالمنصة، مثل أحجام نص iOS، وأبقِ درجة الحرارة أكبر بكثير من أي شيء آخر. الشاشة المُصلَحة تمتد من 13 إلى 28 pt مع درجة حرارة 84 px.
المصادر
- الشاشتان من تصميمنا، صُممتا وقيستا في Figma. المكان ودرجات الحرارة والتواريخ مختلقة للتمرين.
- فُحص التباين بـمعادلة التباين في WCAG 2.2: النص الأبيض بنسبة 4.6:1 أو أفضل على كل بطاقة مُصلَحة، ونص المسودة الأبيض بخط 9 px على
#3B82F6هو 3.7:1. - إرشادات Apple للواجهات: الخطوط، لأحجام نص 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
