वेदर ऐप डिज़ाइन: होम स्क्रीन रीडिज़ाइन, पहले और बाद में
एक जूनियर वेदर ऐप की होम स्क्रीन, जिसमें 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 का है, स्क्रीन की सबसे बड़ी चीज़, क्योंकि वही सवाल का जवाब है। फिर शब्दों में आसमान, "आंशिक बादल", और फिर दिन की रेंज, "H 75° L 61°"। महसूस होने वाला तापमान और बारिश की संभावना इस ब्लॉक से हट गईं: महसूस होने वाला नंबर नीचे डिटेल में चला गया, जहाँ उसे अपना कार्ड मिला।
दोबारा काम आने वाला नियम: होम स्क्रीन का ऊपरी हिस्सा एक जवाब के लिए है। जो डेटा इंसान दूसरे नंबर पर देखता है, उसे एक कदम नीचे रखें।
सुधार 2: छह घंटे, एक कार्ड, पढ़ने की जगह
पहले
बाद में
बॉर्डर वाली पट्टी में आठ संकरे कॉलम, बनाम सरल भाषा के शीर्षक के साथ छह चौड़े कॉलम।
ड्राफ़्ट आठ घंटों को एक पंक्ति में ठूँस देता है, इसलिए हर कॉलम पतला है और टेक्स्ट बहुत छोटा। सुधार छह दिखाता है: Now, 10 am, 11 am, 12 pm, 1 pm और 2 pm। दो कॉलम कम होने से हर घंटे को बड़ा आइकन और बड़ा नंबर मिलता है।
कार्ड का शीर्षक लेबल से वाक्य बन गया: "दोपहर 3 बजे तक धूप के दौर"। यह पाठक को बताता है कि छह कॉलम का कुल मतलब क्या है, इसलिए मौसम कब बदलता है यह जानने के लिए हर आइकन को स्कैन नहीं करना पड़ता।
दोबारा काम आने वाला नियम: डेटा की पंक्ति के ऊपर एक हेडलाइन होनी चाहिए जो बताए कि उससे क्या समझना है।
सुधार 3: चार डिटेल, हर एक बड़े नंबर के साथ
पहले
बाद में
सफ़ेद कार्ड पर नौ छोटे टाइल, बनाम बड़े अक्षरों में नंबर वाले चार बड़े कार्ड।
9 px के नौ टाइल हर डिटेल को बराबर मानते हैं, और उनमें से कोई भी एक नज़र में नहीं पढ़ी जा सकती। दबाव, ओसांक और दृश्यता असली डेटा हैं, पर सुधार उन्हें पहले नहीं रखता।
सुधार चार रखता है: महसूस होने वाला तापमान, नमी, हवा और UV इंडेक्स। हर एक को कार्ड, आइकन, छोटा लेबल और ड्राफ़्ट से कहीं बड़ा नंबर मिलता है। "6 High" और "8 mph NW" हाथ भर की दूरी से पढ़े जाते हैं। बाकी छह, दबाव, दृश्यता, ओसांक, सूर्योदय, सूर्यास्त और वायु गुणवत्ता, इस होम स्क्रीन पर नहीं हैं।
पूरे वेदर ऐप को इनके लिए कोई जगह चाहिए, जैसे डिटेल स्क्रीन, और यह रीडिज़ाइन उसे नहीं बनाता।
यह ईमानदार सौदा है। होम स्क्रीन पढ़ने में तेज़ हो जाती है, और बाकी डेटा को दूसरा घर चाहिए।
सुधार 4: तीन दिन, हर रेंज के लिए एक बार
पहले
बाद में
बारिश के प्रतिशत और उच्चतम व निम्नतम के साथ टेक्स्ट की दस पंक्तियाँ, बनाम हर दिन की रेंज के बार वाली तीन पंक्तियाँ।
"75° / 61°" की दस पंक्तियाँ दस जोड़ हैं जिन्हें पाठक को दिमाग में तुलना करना पड़ता है। कौन सा दिन सबसे गर्म है? ठंड कहाँ से शुरू होती है? जवाब नंबरों में है, और आँख को उसे खोदकर निकालना पड़ता है।
बार तुलना का काम करता है। हर दिन का न्यूनतम और उच्चतम 50° से 78° के साझा स्केल पर बैठता है, इसलिए लंबा या और दाईं ओर का बार ज़्यादा गर्म या ज़्यादा फैला दिन है, और बार के साथ रंग ठंडे नीले से गर्म पीले तक जाता है। बारिश का प्रतिशत पंक्तियों से हट गया। शनिवार, 24 अक्टूबर, "आज" है; अगले दो दिन उसके बाद आते हैं।
दोबारा काम आने वाला नियम: जब सवाल यह हो कि एक श्रृंखला की आपस में तुलना कैसी है, तो तुलना को बनाकर दिखाएँ।
छोटे सुधार
- एक बायाँ किनारा। ड्राफ़्ट में बाएँ 14 px और दाएँ 12 px था, और उसके ब्लॉक एक सीध में नहीं थे। सुधार का हर ब्लॉक 20 px किनारे से शुरू होता है, कार्डों के बीच 12 px।
- गहरा नीला। आसमान #1D4ED8 से #3B82F6 तक का ग्रेडिएंट है, ड्राफ़्ट का अपना नीला हल्के सिरे पर। कार्ड 24% (#1E3A8A) नेवी परत पर बैठते हैं, इसलिए वे आसमान का हिस्सा लगते हैं, उस पर रखे सफ़ेद डिब्बे नहीं।
- नीले पर सफ़ेद टेक्स्ट जो पढ़ा जा सके। #3B82F6 पर ड्राफ़्ट का 9 px सफ़ेद टेक्स्ट स्क्रीन की सबसे कमज़ोर जोड़ी है। गहरे कार्डों पर बड़ा टेक्स्ट इसे ठीक करता है।
- असली टाइप स्केल। टेक्स्ट 8 से 13 px से बढ़कर iOS साइज़ 13 से 28 pt हो गया, ऊपर 84 px का तापमान।
- पाँच नहीं, चार टैब। सुधार एक टैब हटा देता है।
- मुख्य कार्ड पर यूनिट टॉगल नहीं। F और C स्विच पहले कार्ड से हट गया।
अपने वेदर ऐप का ऑडिट करें
| सवाल | यह क्यों मायने रखता है |
|---|---|
| ऊपर वह एक जवाब क्या है, और क्या वही सबसे बड़ी चीज़ है? | पहली नज़र काफ़ी होनी चाहिए |
| क्या कोई टाइमस्टैम्प या लेबल है जिस पर व्यक्ति कभी कुछ नहीं करता? | सटीकता का मतलब उपयोग नहीं है |
| क्या डेटा की हर पंक्ति के पास हेडलाइन है जो बताती है कि क्या समझना है? | पाठकों को बदलाव ढूँढना नहीं पड़ना चाहिए |
| क्या डिटेल में बड़ा नंबर और साफ़ छोटा लेबल है? | नौ बराबर टाइल सब बराबर अनदेखे होते हैं |
| क्या दिनों की सूची हर रेंज के बार में बदल सकती है? | आँख आकारों की तुलना जोड़ से तेज़ करती है |
Figma फ़ाइल पाएँ
मुफ़्त फ़ाइल में दोनों स्क्रीन कॉम्पोनेंट के रूप में हैं, हर सुधार पहले और बाद की जोड़ी के रूप में, रंग वेरिएबल और iOS टेक्स्ट स्टाइल।
मुफ़्त Figma फ़ाइल
वेदर होम स्क्रीन, पहले और बाद में
दोनों स्क्रीन और हर सुधरा हिस्सा Figma कॉम्पोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट में डुप्लिकेट करें।
FAQ
वेदर ऐप की होम स्क्रीन को सबसे पहले क्या दिखाना चाहिए?
शहर और एक बड़ा तापमान, फिर आसमान और दिन का उच्चतम और न्यूनतम। बाकी सब एक कदम नीचे है: अगले घंटे, कुछ डिटेल और छोटा फ़ोरकास्ट।
वेदर ऐप को होम स्क्रीन पर कितनी डिटेल दिखानी चाहिए?
ज़्यादातर लोगों के लिए चार काफ़ी हैं: महसूस होने वाला तापमान, नमी, हवा और UV इंडेक्स। दबाव, दृश्यता, ओसांक और सूर्योदय या सूर्यास्त को डिटेल स्क्रीन पर रखें।
वेदर ऐप को घंटेवार फ़ोरकास्ट कैसे दिखाना चाहिए?
एक कार्ड पर लगभग छह घंटे, बड़े आइकन और नंबरों के साथ, और ऐसा शीर्षक जो बताए कि घंटों का कुल मतलब क्या है, जैसे "दोपहर 3 बजे तक धूप के दौर"।
ऐप में कई दिनों का फ़ोरकास्ट कैसे दिखाएँ?
होम स्क्रीन पर तीन दिन, हर एक में एक साझा स्केल पर दिन के न्यूनतम से उच्चतम तक का बार। लंबी सूचियाँ अपनी स्क्रीन पर होनी चाहिए।
वेदर ऐप में किस फ़ॉन्ट साइज़ का उपयोग करना चाहिए?
प्लेटफ़ॉर्म का टेक्स्ट स्केल इस्तेमाल करें, जैसे iOS टेक्स्ट साइज़, और तापमान को बाकी हर चीज़ से कहीं बड़ा रखें। सुधरी हुई स्क्रीन 84 px तापमान के साथ 13 से 28 pt तक चलती है।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और मापी गई हैं। जगह, तापमान और तारीखें अभ्यास के लिए गढ़ी गई हैं।
- कंट्रास्ट की जाँच WCAG 2.2 contrast formula से की गई: सुधरे हुए हर कार्ड पर सफ़ेद टेक्स्ट 4.6:1 या बेहतर है, और #3B82F6 पर ड्राफ़्ट का 9 px सफ़ेद टेक्स्ट 3.7:1 है।
- 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
