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

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

Case 050تجربة مستخدم تحريرية وتصميم تفاعلي

SUTATO

SUTATO تجربة تحريرية عن الألعاب تدور حول اكتشاف المواد ومواصلة القراءة. يربط العمل بين بنية معلومات مراجَعة وواجهة مميزة ونموذج أولي تفاعلي للجوال وسطح المكتب.

دوري
تصميم UX/UI وبناء نماذج أولية تفاعلية
حالة المشروع
نموذج أولي لتصميم تفاعلي
نموذج SUTATO Signal Cut التحريري الأولي بمحتوى عرض توضيحي خيالي.

01

مساهمتي

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

نموذج SUTATO Signal Cut التحريري الأولي بمحتوى عرض توضيحي خيالي.

02

حسم البنية قبل اللغة البصرية

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

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

كان لكل مطبوعة مرجعية دور مختلف. أسهم GamingBible في منطق الاكتشاف، وأسهم Game Informer في الأهمية التحريرية وإيقاع المجلات. أما التعبير البصري اللاحق لـ SUTATO فقد بُني على مواد العلامة المقدَّمة.

03

استخدام العلامة كإشارة تحريرية

يستمد الاتجاه البصري Signal Cut هندسة القطع فيه من إيقاع الشعار النصي المقدَّم لـ SUTATO. ويحدد الأصفر لحظات مختارة، بينما يضبط إيقاع الصفحة حجم الصور والعناوين ضيقة الحروف والتكوين غير المتماثل.

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

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

04

إعطاء المحتوى المختلف أشكالًا مختلفة

تحتاج المطبوعة إلى أكثر من شبكة بطاقات تتكرر. وتضم الصفحة الرئيسية النهائية عدة قوالب تحريرية: شريط Stories المرئي، وقالب Brief الموجز، وقالب Two Sides للنقاش، وقالب Radar الأسبوعي، وقالب Editor’s Cut الذي تقوده الصور.

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

على الجوال يُعاد بناء التكوين حول صورة مهيمنة وتسلسل داعم موجز. ويستمر حجم الصور والأولوية التحريرية عبر نقاط التوقف دون الحاجة إلى رصّ كل ترتيب في سطح المكتب كما هو.

05

مواصلة القراءة وضبط الحركة

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

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

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

06

ما سُلِّم

يتضمن العمل نماذج Figma الأولية للجوال ولسطح المكتب، وصفحة منفصلة لمبررات التصميم، وملف مراجعة HTML قائمًا بذاته. وتوثّق مستندات التسليم فحوصات بصرية وفحوصات للتفاعل، مع أدلة على عدة أحجام للشاشة.

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

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

القناة 50 تجربة مستخدم تحريرية وتصميم تفاعلي

SUTATO

SUTATO تجربة تحريرية عن الألعاب تدور حول اكتشاف المواد ومواصلة القراءة. يربط العمل بين بنية معلومات مراجَعة وواجهة مميزة ونموذج أولي تفاعلي للجوال وسطح المكتب.

دوري
تصميم UX/UI وبناء نماذج أولية تفاعلية
حالة المشروع
نموذج أولي لتصميم تفاعلي
الفترة
2026
نموذج SUTATO Signal Cut التحريري الأولي بمحتوى عرض توضيحي خيالي.

SUTATO: منح مطبوعة الألعاب إيقاعها الخاص

مسجّل من النموذج الأولي المسلَّم. محتوى خيالي بصور مولّدة بالذكاء الاصطناعي.

ملخص المسار
  1. اكتشاف قصة
  2. بدء القراءة
  3. العثور على القصة التالية

مساهمتي

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

نموذج SUTATO Signal Cut التحريري الأولي بمحتوى عرض توضيحي خيالي.

حسم البنية قبل اللغة البصرية

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

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

كان لكل مطبوعة مرجعية دور مختلف. أسهم GamingBible في منطق الاكتشاف، وأسهم Game Informer في الأهمية التحريرية وإيقاع المجلات. أما التعبير البصري اللاحق لـ SUTATO فقد بُني على مواد العلامة المقدَّمة.

استخدام العلامة كإشارة تحريرية

يستمد الاتجاه البصري Signal Cut هندسة القطع فيه من إيقاع الشعار النصي المقدَّم لـ SUTATO. ويحدد الأصفر لحظات مختارة، بينما يضبط إيقاع الصفحة حجم الصور والعناوين ضيقة الحروف والتكوين غير المتماثل.

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

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

إعطاء المحتوى المختلف أشكالًا مختلفة

تحتاج المطبوعة إلى أكثر من شبكة بطاقات تتكرر. وتضم الصفحة الرئيسية النهائية عدة قوالب تحريرية: شريط Stories المرئي، وقالب Brief الموجز، وقالب Two Sides للنقاش، وقالب Radar الأسبوعي، وقالب Editor’s Cut الذي تقوده الصور.

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

على الجوال يُعاد بناء التكوين حول صورة مهيمنة وتسلسل داعم موجز. ويستمر حجم الصور والأولوية التحريرية عبر نقاط التوقف دون الحاجة إلى رصّ كل ترتيب في سطح المكتب كما هو.

مواصلة القراءة وضبط الحركة

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

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

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

ما سُلِّم

يتضمن العمل نماذج Figma الأولية للجوال ولسطح المكتب، وصفحة منفصلة لمبررات التصميم، وملف مراجعة HTML قائمًا بذاته. وتوثّق مستندات التسليم فحوصات بصرية وفحوصات للتفاعل، مع أدلة على عدة أحجام للشاشة.

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