Case 050تجربة مستخدم تحريرية وتصميم تفاعلي
SUTATO
SUTATO تجربة تحريرية عن الألعاب تدور حول اكتشاف المواد ومواصلة القراءة. يربط العمل بين بنية معلومات مراجَعة وواجهة مميزة ونموذج أولي تفاعلي للجوال وسطح المكتب.
- دوري
- تصميم UX/UI وبناء نماذج أولية تفاعلية
- حالة المشروع
- نموذج أولي لتصميم تفاعلي
01
مساهمتي
جاءت نقطة التحول في المشروع من الملاحظات: الحفاظ على نقاط القوة المألوفة في الاكتشاف عبر البطاقات، وتأسيس تسلسل تحريري أوضح، وترك القراءة تتواصل دون مقاطعات متكررة.
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 قائمًا بذاته. وتوثّق مستندات التسليم فحوصات بصرية وفحوصات للتفاعل، مع أدلة على عدة أحجام للشاشة.
يوضح المشروع كيف يمكن أن تبقى الملاحظات والبنية التحريرية والتعبير عن العلامة والسلوك مترابطة طوال مراجعة التصميم. أما محتوى المقالات والصور في النموذج الأولي فهو مادة عرض توضيحية؛ والمخرج المسلَّم هو تجربة المطبوعة نفسها.
