اسحب للاستكشاف. مرّر أو استخدم إصبعين للتكبير. افتح المساعدة لعرض اختصارات لوحة المفاتيح.

Yan
متاح
للمشاريع
لنتحدث
Yan Fontão Boring view
All work

Case 046تصميم تطبيق ويب ولوحة معلومات

Manaus Mais Humana

لوحة معلومات باللغة البرتغالية مع تسجيل دخول للمنظمة غير الربحية Manaus Mais Humana، تتمحور حول التبرعات والأهداف والأحياء. كل رقم على الشاشات قيمة تجريبية.

دوري
تصميم الواجهات
حالة المشروع
تصميم الواجهة · أرشيف Figma
نموذج Manaus Mais Humana التصميمي، مركّب للوحة المشاريع هذه من شاشات حقيقية للمشروع.
نموذج تصميمي مُركَّب من أجل لوحة المشاريع هذه من شاشات حقيقية للمشروع.

01

مساهمتي

Manaus Mais Humana لوحة معلومات ويب باللغة البرتغالية لمنظمة غير ربحية، مع تسجيل دخول وشاشة رئيسية للتبرعات والأهداف ودليل بصري صغير.

تعرض دراسة الحالة هذه طريقة تنظيم الشاشات. المبالغ والأعداد والتواريخ عليها قيم تجريبية، وليست نتائج.

جولة في شاشات التصميم، وهي ليست تسجيلًا: تسجيل الدخول والصفحة الرئيسية للوحة المعلومات.
لوحة معلومات Manaus Mais Humana بقائمة أيقونات زرقاء، وبطاقة ملخص صفراء فيها رسم بياني حلقي ورسم توضيحي لمنازل، وثلاثة أشرطة تقدم خضراء، ورسوم بيانية، وعمود معاملات على اليمين.
تضع الشاشة الرئيسية بطاقة الملخص أولًا، ثم الأهداف والمعاملات.

02

بطاقة دافئة واحدة تُقرأ أولًا

تبدأ الشاشة الرئيسية ببطاقة صفراء: المبلغ المجموع والأشخاص المستفيدون والسلال الغذائية المتبرع بها على اليسار، ورسم بياني حلقي يقارن المبلغ بالهدف في المنتصف، ورسم توضيحي صغير لمنازل وشخص على اليمين. إنها المساحة الكبيرة الوحيدة ذات اللون الدافئ في الصفحة، ولذلك تُقرأ قبل أي شيء آخر.

تأتي الأهداف بعد ذلك في ثلاثة أشرطة تقدم بسيطة مع العدد في نهاية كل سطر، وتستمر الرسوم البيانية بحسب الشهر والحي في الأسفل. كما يسرد عمود على اليمين المعاملات في بطاقات فيها التاريخ والمكان والاسم والمبلغ، ويعود الأخضر النعناعي لأشرطة التقدم في زر ‎+ADICIONAR FUNDOS تحته.

شاشة تسجيل الدخول بشعار Manaus Mais Humana وحقلي البريد الإلكتروني وكلمة المرور وزر أزرق وخيار Google، بجانب صورة مصبوغة ليدين تمتدان إحداهما نحو الأخرى.
تحتفظ شاشة تسجيل الدخول بعمود واحد من الحقول بجانب صورة ليدين.
ورقة كحلية داكنة بأجزاء الواجهة: الأزرار وحالات القائمة الجانبية وعنصر معاملة وخريطة وقائمة أحياء ورسوم بيانية وأشرطة تقدم وعمود المعاملات وبطاقة الملخص.
أجزاء الشاشة الرئيسية مجمّعة على ورقة واحدة.

03

المدخل والأجزاء التي خلفه

تحتفظ شاشة تسجيل الدخول بعمود واحد من الحقول: البريد الإلكتروني وكلمة المرور مع مفتاح لإظهارها أو إخفائها ورابط لمن نسي كلمة المرور. ENTRAR هو الإجراء الممتلئ باللون، ويأتي خيار Google بعد OU، وإنشاء الحساب سطر نصي أخير. تملأ صورة ليدين، مصبوغة بتدرج من الأصفر إلى الأزرق المخضر، النصف الآخر بألوان لوحة المعلومات.

يحدد دليل الخطين Muli وMontserrat إضافة إلى الألوان والشعار. كما تعرض لوحة ثانية كل جزء على حدة: الأزرار وحالات القائمة الجانبية وعنصر المعاملة والرسوم البيانية وشريط التقدم والخريطة والقائمة، وهو ما يبين كيفية تركيب الشاشة الرئيسية.

دليل كحلي داكن بسلّم أحجام الخطين Muli وMontserrat، ومجموعة من عينات الألوان، والشعار.
الخطوط والألوان والشعار المستخدمة في الشاشات.
000

التعليمات

Yan Fontão
لمسة
تفتح شاشة
نقرة
تفتح شاشة
سحب
يتجوّل في اللوحة
العجلة
الفأرة تكبّر، ولوحة اللمس تحرّك، وإصبعان يكبّران
− +
تراجع لرؤية اللوحة كاملة، أو اقترب
الأسهم
في دراسة الحالة: ↑↓ لتبديل الدراسة، ←→ لتبديل الوسائط. في اللوحة: للتحريك
مسافة
تفتح أو تعود
Enter
يفتح
Esc Backspace
رجوع
Home
العودة إلى الوسط، ثم إلى المقدمة
PgUp PgDn
القناة السابقة أو التالية
Tab
يتنقل بين المشاريع والروابط
R
مشروع عشوائي
0–9
اكتب رقم القناة، 1–61
?
هذه الصفحة
الاختصارات

موسيقى اللوحة

الملفات مضغوطة وموحّدة الصوت للويب.

متاح
للمشاريع
لنتحدث

رسالة جديدة إلى يان

أخبرني من أنت وسأرد عليك.

000

عن يان

مرحبًا، أنا يان

مصمم منتجات/ مهندس تصميم

معظم المنتجات تفقد شيئًا بين التصميم والبرمجة. منتجاتي لا: أبحث في المشكلة، وأصمم المنتج، وأطلق الواجهة بنفسي، فما توافق عليه هو بالضبط ما يحصل عليه مستخدموك.

  • 2018بداية تطوير البرمجيات
  • UI + codeالتصميم والتنفيذ

عملت مع Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

البرازيل · عن بُعد أو هجين أو حضوريًا

صورة يان فونتاو جالسًا بسترة خضراء ونظارة ويمسك ميكروفونًا.
متاح
للمشاريع
لنتحدث
متاح
للمشاريع
لنتحدث
000

قناة مقفلة

بموجب اتفاقية عدم إفصاح

أدخل الرمز

اطلب الرمز من يان ↗
متاح
للمشاريع
لنتحدث
YAN FONTÃO دراسات الحالة

القناة 46 تصميم تطبيق ويب ولوحة معلومات

Manaus Mais Humana

لوحة معلومات باللغة البرتغالية مع تسجيل دخول للمنظمة غير الربحية Manaus Mais Humana، تتمحور حول التبرعات والأهداف والأحياء. كل رقم على الشاشات قيمة تجريبية.

دوري
تصميم الواجهات
حالة المشروع
تصميم الواجهة · أرشيف Figma
نموذج Manaus Mais Humana التصميمي، مركّب للوحة المشاريع هذه من شاشات حقيقية للمشروع.
نموذج تصميمي مُركَّب من أجل لوحة المشاريع هذه من شاشات حقيقية للمشروع.

لوحة معلومات للتبرعات يبقى الهدف فيها أمام العين

شاشات من ملفات التصميم الأصلية في Figma. جميع الأرقام قيم تجريبية.

مساهمتي

Manaus Mais Humana لوحة معلومات ويب باللغة البرتغالية لمنظمة غير ربحية، مع تسجيل دخول وشاشة رئيسية للتبرعات والأهداف ودليل بصري صغير.

تعرض دراسة الحالة هذه طريقة تنظيم الشاشات. المبالغ والأعداد والتواريخ عليها قيم تجريبية، وليست نتائج.

جولة في شاشات التصميم، وهي ليست تسجيلًا: تسجيل الدخول والصفحة الرئيسية للوحة المعلومات.
لوحة معلومات Manaus Mais Humana بقائمة أيقونات زرقاء، وبطاقة ملخص صفراء فيها رسم بياني حلقي ورسم توضيحي لمنازل، وثلاثة أشرطة تقدم خضراء، ورسوم بيانية، وعمود معاملات على اليمين.
تضع الشاشة الرئيسية بطاقة الملخص أولًا، ثم الأهداف والمعاملات.

بطاقة دافئة واحدة تُقرأ أولًا

تبدأ الشاشة الرئيسية ببطاقة صفراء: المبلغ المجموع والأشخاص المستفيدون والسلال الغذائية المتبرع بها على اليسار، ورسم بياني حلقي يقارن المبلغ بالهدف في المنتصف، ورسم توضيحي صغير لمنازل وشخص على اليمين. إنها المساحة الكبيرة الوحيدة ذات اللون الدافئ في الصفحة، ولذلك تُقرأ قبل أي شيء آخر.

تأتي الأهداف بعد ذلك في ثلاثة أشرطة تقدم بسيطة مع العدد في نهاية كل سطر، وتستمر الرسوم البيانية بحسب الشهر والحي في الأسفل. كما يسرد عمود على اليمين المعاملات في بطاقات فيها التاريخ والمكان والاسم والمبلغ، ويعود الأخضر النعناعي لأشرطة التقدم في زر ‎+ADICIONAR FUNDOS تحته.

شاشة تسجيل الدخول بشعار Manaus Mais Humana وحقلي البريد الإلكتروني وكلمة المرور وزر أزرق وخيار Google، بجانب صورة مصبوغة ليدين تمتدان إحداهما نحو الأخرى.
تحتفظ شاشة تسجيل الدخول بعمود واحد من الحقول بجانب صورة ليدين.
ورقة كحلية داكنة بأجزاء الواجهة: الأزرار وحالات القائمة الجانبية وعنصر معاملة وخريطة وقائمة أحياء ورسوم بيانية وأشرطة تقدم وعمود المعاملات وبطاقة الملخص.
أجزاء الشاشة الرئيسية مجمّعة على ورقة واحدة.

المدخل والأجزاء التي خلفه

تحتفظ شاشة تسجيل الدخول بعمود واحد من الحقول: البريد الإلكتروني وكلمة المرور مع مفتاح لإظهارها أو إخفائها ورابط لمن نسي كلمة المرور. ENTRAR هو الإجراء الممتلئ باللون، ويأتي خيار Google بعد OU، وإنشاء الحساب سطر نصي أخير. تملأ صورة ليدين، مصبوغة بتدرج من الأصفر إلى الأزرق المخضر، النصف الآخر بألوان لوحة المعلومات.

يحدد دليل الخطين Muli وMontserrat إضافة إلى الألوان والشعار. كما تعرض لوحة ثانية كل جزء على حدة: الأزرار وحالات القائمة الجانبية وعنصر المعاملة والرسوم البيانية وشريط التقدم والخريطة والقائمة، وهو ما يبين كيفية تركيب الشاشة الرئيسية.

دليل كحلي داكن بسلّم أحجام الخطين Muli وMontserrat، ومجموعة من عينات الألوان، والشعار.
الخطوط والألوان والشعار المستخدمة في الشاشات.