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

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

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

Grand Plaza

تطبيق جوال لمركز Grand Plaza للتسوق يجمع الفعاليات والخدمات وحملات الجوائز والعروض في مكان واحد. المبالغ والرموز الظاهرة على الشاشات محتوى تجريبي.

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهة · أرشيف Figma
نموذج تصميمي لتطبيق Grand Plaza مركّب للوحة المشاريع هذه من شاشات حقيقية للمشروع.
نموذج تصميمي مُركَّب من أجل لوحة المشاريع هذه من شاشات حقيقية للمشروع.

01

مساهمتي

Grand Plaza تطبيق باللغة البرتغالية لمركز تسوق. يقسّمه شريط سفلي إلى Início وPrêmios وOfertas وLojas وPerfil، ويرتفع Ofertas في المنتصف، وهو التبويب الوحيد الذي يكسر استقامة الصف.

يحتفظ أرشيف Figma بعملية التصميم إلى جانب الشاشات: مخططات هيكلية من v0 إلى v4، وخريطة ذهنية، وخريطة موقع، ومسار مستخدم مع خريطة محتوى. أعرض هنا الشاشات المصمَّمة بجوار الخريطة التي نظّمتها.

جولة في شاشات التصميم، وليست تسجيلًا: التهيئة الأولية والشاشة الرئيسية والجوائز.

02

فعالية واحدة في كل مرة

تخصص الشاشة الرئيسية معظم مساحتها لفعالية واحدة: بطاقة صورة كبيرة عليها الاسم والتواريخ وزر واحد هو Saiba mais، ومؤشر للعرض الدوّار يدل على وجود المزيد. تحتها ثلاثة اختصارات للخدمات هي خريطة المركز ومواقف السيارات والسينما، مع رابط Ver todos إلى بقية الخدمات.

أربع شاشات من التطبيق في صف واحد على خلفية داكنة: الشاشة الرئيسية وحملة Prêmios وشبكة الخدمات وصفحة فعالية.
الشاشة الرئيسية وPrêmios والخدمات وصفحة فعالية، في نسخة تضع Serviços في شريط التبويبات.

03

حملة تخبرك بما تبقى

يعتمد تبويب Prêmios على الإيصالات. تذكر بطاقة الحملة، في ثلاثة أسطر قصيرة، ما سجّله المستخدم حتى الآن، وما تبقى للحصول على هدية، وما تبقى للحصول على رقم حظ. زر Cadastrar nota fiscal هو الزر البارز وSaiba mais هو الزر الهادئ، فتتضح الخطوة التالية قبل الحاجة إلى أي شرح.

الشاشة الرئيسية بشعار Grand Plaza، وبطاقة صورة كبيرة لفعالية Noites Culturais عليها زر Saiba mais، وثلاثة اختصارات للخدمات، وشريط سفلي فيه زر Ofertas مرتفع.
شاشة Prêmios بلافتة حملة Eu Faço، والمبلغ المسجّل حتى الآن، وما تبقى للحصول على هدية وعلى رقم حظ، وزر Cadastrar nota fiscal.
شاشة التهيئة الأولية برسم توضيحي بالأسود والوردي والأصفر لنوافذ تطبيق ومفتاح وصاروخ، ورسالة ترحيب، وزرّي Próximo وPular.
تبدأ الشاشة الرئيسية بفعالية واحدة، ثم أهم الخدمات. تعرض Prêmios ما تبقى للوصول إلى كل مكافأة. تقدّم التهيئة الأولية التطبيق في ثلاث خطوات.

04

قائمة خدمات طويلة، تُرسم خريطتها أولًا

يقدّم المركز خدمات أكثر مما يتسع له شريط التبويبات، لذلك يجمع Serviços do shopping أربع عشرة خدمة في شبكة واحدة، من خريطة المركز ومواقف السيارات إلى مساحات العمل المشتركة ومواقف الدراجات وشحن السيارات الكهربائية. أما العروض فتنتهي عند شاشة خاصة بها تحمل الخصم ورمزًا ورمز QR وتاريخ الانتهاء لتقديمها في المتجر.

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

مخطط بعنوان Fluxo do usuário e content map، فيه شجرة من الشاشات تتفرع من الشاشة الرئيسية عبر صفوف مرقّمة.
مسار المستخدم وخريطة المحتوى خلف الشاشات.
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 دراسات الحالة

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

Grand Plaza

تطبيق جوال لمركز Grand Plaza للتسوق يجمع الفعاليات والخدمات وحملات الجوائز والعروض في مكان واحد. المبالغ والرموز الظاهرة على الشاشات محتوى تجريبي.

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

شاهده على Dribbble

نموذج تصميمي لتطبيق Grand Plaza مركّب للوحة المشاريع هذه من شاشات حقيقية للمشروع.
نموذج تصميمي مُركَّب من أجل لوحة المشاريع هذه من شاشات حقيقية للمشروع.

كل ما في مركز التسوق، على بعد تبويب واحد

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

مساهمتي

Grand Plaza تطبيق باللغة البرتغالية لمركز تسوق. يقسّمه شريط سفلي إلى Início وPrêmios وOfertas وLojas وPerfil، ويرتفع Ofertas في المنتصف، وهو التبويب الوحيد الذي يكسر استقامة الصف.

يحتفظ أرشيف Figma بعملية التصميم إلى جانب الشاشات: مخططات هيكلية من v0 إلى v4، وخريطة ذهنية، وخريطة موقع، ومسار مستخدم مع خريطة محتوى. أعرض هنا الشاشات المصمَّمة بجوار الخريطة التي نظّمتها.

جولة في شاشات التصميم، وليست تسجيلًا: التهيئة الأولية والشاشة الرئيسية والجوائز.
أربع شاشات من التطبيق في صف واحد على خلفية داكنة: الشاشة الرئيسية وحملة Prêmios وشبكة الخدمات وصفحة فعالية.
الشاشة الرئيسية وPrêmios والخدمات وصفحة فعالية، في نسخة تضع Serviços في شريط التبويبات.

فعالية واحدة في كل مرة

تخصص الشاشة الرئيسية معظم مساحتها لفعالية واحدة: بطاقة صورة كبيرة عليها الاسم والتواريخ وزر واحد هو Saiba mais، ومؤشر للعرض الدوّار يدل على وجود المزيد. تحتها ثلاثة اختصارات للخدمات هي خريطة المركز ومواقف السيارات والسينما، مع رابط Ver todos إلى بقية الخدمات.

الشاشة الرئيسية بشعار Grand Plaza، وبطاقة صورة كبيرة لفعالية Noites Culturais عليها زر Saiba mais، وثلاثة اختصارات للخدمات، وشريط سفلي فيه زر Ofertas مرتفع.
تبدأ الشاشة الرئيسية بفعالية واحدة، ثم أهم الخدمات.

حملة تخبرك بما تبقى

يعتمد تبويب Prêmios على الإيصالات. تذكر بطاقة الحملة، في ثلاثة أسطر قصيرة، ما سجّله المستخدم حتى الآن، وما تبقى للحصول على هدية، وما تبقى للحصول على رقم حظ. زر Cadastrar nota fiscal هو الزر البارز وSaiba mais هو الزر الهادئ، فتتضح الخطوة التالية قبل الحاجة إلى أي شرح.

شاشة Prêmios بلافتة حملة Eu Faço، والمبلغ المسجّل حتى الآن، وما تبقى للحصول على هدية وعلى رقم حظ، وزر Cadastrar nota fiscal.
تعرض Prêmios ما تبقى للوصول إلى كل مكافأة.
شاشة التهيئة الأولية برسم توضيحي بالأسود والوردي والأصفر لنوافذ تطبيق ومفتاح وصاروخ، ورسالة ترحيب، وزرّي Próximo وPular.
تقدّم التهيئة الأولية التطبيق في ثلاث خطوات.

قائمة خدمات طويلة، تُرسم خريطتها أولًا

يقدّم المركز خدمات أكثر مما يتسع له شريط التبويبات، لذلك يجمع Serviços do shopping أربع عشرة خدمة في شبكة واحدة، من خريطة المركز ومواقف السيارات إلى مساحات العمل المشتركة ومواقف الدراجات وشحن السيارات الكهربائية. أما العروض فتنتهي عند شاشة خاصة بها تحمل الخصم ورمزًا ورمز QR وتاريخ الانتهاء لتقديمها في المتجر.

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

مخطط بعنوان Fluxo do usuário e content map، فيه شجرة من الشاشات تتفرع من الشاشة الرئيسية عبر صفوف مرقّمة.
مسار المستخدم وخريطة المحتوى خلف الشاشات.