انتقل إلى المحتوى
TV viewلنتحدث
عربي
كل الأعمال

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

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

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

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

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

مساهمتي

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

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

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

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

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

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

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

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

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

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