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

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

Case 012تصميم تطبيق للهاتف المحمول

ShaktiGrid

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

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

01

مساهمتي

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

جميع الأصول والأرقام والشروط على الشاشة بيانات تجريبية.

قائمة الأصول بعنوان «استكشف جميع المشاريع في محفظتنا»، وفيها مفتاح تبديل بين نشط ومكتمل، وعدد يعرض 15 من 150 أصلا، وبطاقة برسم توضيحي كبير لصفوف من الألواح الشمسية.
صفحة تفاصيل لمنشأة طاقة شمسية في Telangana، الهند، عليها وسم Preferred Equity، وصف من التبويبات، وجدول نظرة عامة بخمسة شروط، وتحته الرسم التوضيحي للموقع.
تسجيل من النموذج الأولي في Figma. صفحة مشروع وقائمتها وتبويبات الأقسام وهي تتحرك عبر الصفحة. الأصول: بطاقات مواقع مع مفتاح تبديل بين نشط ومكتمل. بيانات تجريبية. تفاصيل المشروع: شروط الأصل في جدول بسيط. بيانات تجريبية.

02

من بطاقة الموقع إلى شروطه

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

تُبقي صفحة التفاصيل الاسم والموقع الجغرافي في الأعلى وتنقل الشروط إلى جدول: التقنية، وميغاواط المشاريع (MW)، والموقع الجغرافي، ومدة الاستثمار، ونوع الأصل. وبفضل تسمية واحدة وقيمة واحدة في كل صف يسهل مسح الجدول بنظرة سريعة، ويمتد فوقه صف من التبويبات إلى ما بعد حافة الشاشة نحو بقية المواضيع.

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

03

ترويستان وبنية واحدة

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

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 دراسات الحالة

القناة 12 تصميم تطبيق للهاتف المحمول

ShaktiGrid

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

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

أصول الطاقة المتجددة، بطاقة واحدة في كل مرة

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

مساهمتي

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

جميع الأصول والأرقام والشروط على الشاشة بيانات تجريبية.

تسجيل من النموذج الأولي في Figma. صفحة مشروع وقائمتها وتبويبات الأقسام وهي تتحرك عبر الصفحة.
قائمة الأصول بعنوان «استكشف جميع المشاريع في محفظتنا»، وفيها مفتاح تبديل بين نشط ومكتمل، وعدد يعرض 15 من 150 أصلا، وبطاقة برسم توضيحي كبير لصفوف من الألواح الشمسية.
الأصول: بطاقات مواقع مع مفتاح تبديل بين نشط ومكتمل. بيانات تجريبية.

من بطاقة الموقع إلى شروطه

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

تُبقي صفحة التفاصيل الاسم والموقع الجغرافي في الأعلى وتنقل الشروط إلى جدول: التقنية، وميغاواط المشاريع (MW)، والموقع الجغرافي، ومدة الاستثمار، ونوع الأصل. وبفضل تسمية واحدة وقيمة واحدة في كل صف يسهل مسح الجدول بنظرة سريعة، ويمتد فوقه صف من التبويبات إلى ما بعد حافة الشاشة نحو بقية المواضيع.

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

ترويستان وبنية واحدة

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

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