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

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

Case 007تطبيق جوال وصفحة هبوط

Hidratasport

تطبيق لمتابعة التمرين والتغذية يظهر على الشاشة باسم Hidrata، ويضم المغذيات الكبرى والتمارين والمكمّلات الغذائية وتحليلًا بالذكاء الاصطناعي، إضافة إلى صفحة الهبوط التي تقدّمه. كل الأرقام بيانات تجريبية.

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Hidrata التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

01

مساهمتي

يظهر Hidratasport على الشاشة باسم Hidrata، وهو تطبيق باللغة البرتغالية يهدف إلى دعم التمرين والتغذية. ملف التطبيق مرتّب بحسب المسارات، من أول استخدام وجدار الدفع، مرورًا بالشاشة الرئيسية والتمارين وتسجيل البيانات والترتيب والملف الشخصي، ويحتوي ملف ثانٍ على صفحة الهبوط. أعرض هنا شاشات التطبيق في استخدامه اليومي والصفحة التي تقدّمها.

تمرير عبر التصميم: صفحة الهبوط، من التطبيق في اليد إلى خطة PRO.
القسم الافتتاحي لصفحة الهبوط على لوحة مستديرة الزوايا فوق تدرّج أزرق وأسود، مع العنوان وزرّين وهاتف موضوع بشكل مسطح، فوق شعار Hidrata.
القسم الافتتاحي لصفحة الهبوط وشعار Hidrata.

02

نسختان من الصباح نفسه

يحتفظ الملف بشاشة رئيسية أقدم بجوار أخرى أحدث، والفرق بينهما تغيير في الأولويات. بدأت النسخة الأقدم برسم بياني لترطيب الجسم والإجماليات اليومية. أما الأحدث فتضع مزامنة البيانات أولًا، ثم حلقات المغذيات الكبرى للبروتين والدهون والكربوهيدرات والسعرات الحرارية مقابل أهدافها اليومية، وتحوّل بقية الصفحة إلى خط زمني لليوم بوسوم مثل Pós-treino.

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

03

جلسة جري واحدة، تُقرأ طبقة بعد طبقة

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

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

هاتفان جنبًا إلى جنب عليهما التسميتان Versão anterior وNova versão، يقارنان شاشة رئيسية أقدم فيها رسم بياني بأخرى أحدث فيها حلقات المغذيات الكبرى.
الشاشة الرئيسية الأقدم بجوار النسخة الأحدث في ملف Figma.

04

صفحة هبوط تشرح بالعرض

تفتح صفحة الهبوط بعبارة ‎“Treine com inteligência. Performe com precisão.”‎ على خلفية زرقاء بلون التطبيق، وتحت العنوان الشاشة الرئيسية على هاتف. ثم تمرّ على الميزات الرئيسية، وعلى كيفية اندماج التطبيق في الروتين، وعلى شاشات حقيقية تحت عنوان ‎“Mais do que dados: contexto”‎، وعلى ثلاث خطوات لفتح وضع PRO بدعوة الأصدقاء.

صفحة الهبوط كاملة: قسم افتتاحي أزرق يعرض التطبيق على هاتف، وبطاقات الميزات، وقسم يشرح طريقة العمل، وشاشات التطبيق، وقسم PRO من ثلاث خطوات.
صفحة الهبوط كاملة، من القسم الافتتاحي إلى خطوات PRO.
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 دراسات الحالة

القناة 07 تطبيق جوال وصفحة هبوط

Hidratasport

تطبيق لمتابعة التمرين والتغذية يظهر على الشاشة باسم Hidrata، ويضم المغذيات الكبرى والتمارين والمكمّلات الغذائية وتحليلًا بالذكاء الاصطناعي، إضافة إلى صفحة الهبوط التي تقدّمه. كل الأرقام بيانات تجريبية.

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Hidrata التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

التمرين والتغذية على خط زمني واحد

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

مساهمتي

يظهر Hidratasport على الشاشة باسم Hidrata، وهو تطبيق باللغة البرتغالية يهدف إلى دعم التمرين والتغذية. ملف التطبيق مرتّب بحسب المسارات، من أول استخدام وجدار الدفع، مرورًا بالشاشة الرئيسية والتمارين وتسجيل البيانات والترتيب والملف الشخصي، ويحتوي ملف ثانٍ على صفحة الهبوط. أعرض هنا شاشات التطبيق في استخدامه اليومي والصفحة التي تقدّمها.

تمرير عبر التصميم: صفحة الهبوط، من التطبيق في اليد إلى خطة PRO.
القسم الافتتاحي لصفحة الهبوط على لوحة مستديرة الزوايا فوق تدرّج أزرق وأسود، مع العنوان وزرّين وهاتف موضوع بشكل مسطح، فوق شعار Hidrata.
القسم الافتتاحي لصفحة الهبوط وشعار Hidrata.

نسختان من الصباح نفسه

يحتفظ الملف بشاشة رئيسية أقدم بجوار أخرى أحدث، والفرق بينهما تغيير في الأولويات. بدأت النسخة الأقدم برسم بياني لترطيب الجسم والإجماليات اليومية. أما الأحدث فتضع مزامنة البيانات أولًا، ثم حلقات المغذيات الكبرى للبروتين والدهون والكربوهيدرات والسعرات الحرارية مقابل أهدافها اليومية، وتحوّل بقية الصفحة إلى خط زمني لليوم بوسوم مثل Pós-treino.

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

جلسة جري واحدة، تُقرأ طبقة بعد طبقة

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

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

شاشة النشاط بلافتة تحليل بالذكاء الاصطناعي، وبطاقة مزامنة، وملخص للنشاط، ورسم بياني بالأعمدة للساعات بحسب أيام الأسبوع.
ملخص النشاط بحسب اليوم أو الأسبوع، مع لافتة لتحليل الذكاء الاصطناعي.
هاتفان جنبًا إلى جنب عليهما التسميتان Versão anterior وNova versão، يقارنان شاشة رئيسية أقدم فيها رسم بياني بأخرى أحدث فيها حلقات المغذيات الكبرى.
الشاشة الرئيسية الأقدم بجوار النسخة الأحدث في ملف Figma.

صفحة هبوط تشرح بالعرض

تفتح صفحة الهبوط بعبارة ‎“Treine com inteligência. Performe com precisão.”‎ على خلفية زرقاء بلون التطبيق، وتحت العنوان الشاشة الرئيسية على هاتف. ثم تمرّ على الميزات الرئيسية، وعلى كيفية اندماج التطبيق في الروتين، وعلى شاشات حقيقية تحت عنوان ‎“Mais do que dados: contexto”‎، وعلى ثلاث خطوات لفتح وضع PRO بدعوة الأصدقاء.

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