تصميم Reverie أكثر هدوءاً: من الدردشة إلى المنتج بأكمله

إذا فتحت محادثة خلال الأيام القليلة الماضية، فربما شعرت بأن شيئاً ما قد تغيّر.

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

بدأنا بالدردشة لأنها المكان الذي يقضي فيه كثيرون معظم وقتهم في Reverie. وكانت أيضاً أفضل مكان لاختبار السؤال الذي يقف خلف إعادة التصميم: كيف ينبغي أن تبدو الواجهة عندما يجب أن تظل مريحة طوال محادثة كاملة، لا أن تترك انطباعاً أولياً قوياً فحسب؟

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

لطالما كان Reverie منتجاً غنياً بالتعبير.

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

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

لم نعد تصميم Reverie كي يفقد تميّزه، بل كي يأتي ذلك التميّز من التجربة نفسها.

واجهة أخف، لا أبرد

قد تصبح كلمة «خفيفة» مرادفاً لخلفيات بيضاء ونص رمادي رفيع ومكوّنات باهتة تبدو غير مكتملة. لم يكن هذا هدفنا.

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

هذا التوازن مهم خصوصاً في لعب الأدوار. المحادثة ليست لوحة إعدادات؛ فالناس يقرؤون رسائل طويلة ويلحظون تغيرات النبرة ويمكثون في الشاشة نفسها طويلاً. يجب أن تظل الخطوط والخلفية مريحتين بعد عشرين دقيقة، لا أن تبدوا جميلتين في لقطة شاشة فقط.

خطوط تدعم القراءة الطويلة

من أهم التغييرات وأكثرها هدوءاً أننا قوّينا التسلسل البصري للنص.

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

المبدأ بسيط:

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

الخط الجيد لا يطلب الانتباه، بل يساعد على الحفاظ عليه.

لغة مكوّنات واحدة في المنتج كله

لم يكن هذا تغييراً سطحياً لكل صفحة. أعدنا بناء لغة المكوّنات المشتركة تحت المنتج.

تتبع الأزرار والبطاقات والنوافذ والقوائم وعلامات التبويب والنماذج والجداول والتلميحات والإشعارات وأدوات التنقل القواعد نفسها في:

استدارة الزوايا
تباين الحدود
لون الأسطح وارتفاعها
مؤشرات التركيز
حالات المرور والضغط
وزن النص والمسافات
الألوان الدلالية

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

أضفنا أيضاً حالات دلالية أوضح للإبراز والنجاح، فأصبحت جزءاً من النظام المشترك بدلاً من ألوان وتدرجات خاصة بكل ميزة.

الجزء الأصعب: العثور على الاستثناءات

تحديث مكوّن الزر لا يحدّث كل زر تلقائياً.

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

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

لم نلغِ كل استثناء. فبعض اللحظات تحتاج شخصية أقوى لتعبّر عن الاحتفال أو الاستعجال أو الندرة أو الحالة. الفرق أنها توسّع النظام الآن بدلاً من تجاهله.

زخرفة أقل، وتفاعل أوضح

أزلنا مؤثرات كثيرة بدت تفاعلية من دون أن تضيف معلومات مفيدة.

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

وفي المقابل أصبحت الحالات الفعلية أوضح:

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

حين قللنا الزخرفة، أصبح لدينا مجال أكبر لتحسين الاستجابة. الواجهة تتحرك أقل، لكنها تقول أكثر.

إمكانية الوصول جزء من النظام البصري

لا يكتمل نظام التصميم إذا وصف شكل المكوّنات عند استخدام الفأرة فقط.

راجعنا مؤشرات التركيز وسلوك لوحة المفاتيح ودلالات التحديد والتباين والبطاقات التفاعلية. تنقل بعض عناصر التحكم الآن حالتها المضغوطة أو المحددة بوضوح أكبر إلى التقنيات المساعدة. ويمكن الوصول إلى عناصر القصص التي تعمل كروابط وتشغيلها بلوحة المفاتيح. كما يتبع التركيز المنطق البصري نفسه عبر المكوّنات المشتركة.

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

أساس أفضل لما سيأتي

النتيجة الأهم ليست لوناً أو استدارة أو ظلاً بعينه، بل أن المنتج يملك الآن إجابات متعارضة أقل للسؤال التصميمي نفسه.

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

الاتساق لا يعني أن تتشابه كل الشاشات، بل أن يمنح الناس توقعات ثابتة كي يتغير المحتوى من دون أن تصبح الواجهة غريبة.

ما نأمل أن تلاحظه

من الأفضل ألا تلاحظ الكثير في البداية.

يجب أن يبدو Reverie أسهل قراءة وأكثر هدوءاً واتساقاً عند الانتقال من الاستكشاف إلى المحادثة والإنشاء وأدوات الحساب. تظهر الإجراءات المهمة أسرع، وتتوقف العناصر الثانوية عن منافسة انتباهك، وتصبح الجلسات الطويلة أقل إجهاداً للعين.

ما زالت الشخصيات معبّرة، والقصص غنية بالأجواء، واللحظات الجديرة بالاحتفال قادرة على أن تكون زاهية.

كل ما في الأمر أن الواجهة صارت تعرف متى تتحدث، ومتى تهدأ بما يكفي ليصبح لكل شيء آخر معناه.

يمتد نظام التصميم الجديد الآن عبر تجربة Reverie كاملة. إذا شعرت بأن شيئاً أصبح أفضل بوضوح — أو ما زال في غير مكانه — فنود سماع رأيك في مجتمعنا على Discord.