ما هي الرؤية لنظام تصميم Discourse؟

[manuel (Manuel Kostka)]

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

اللون

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

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

الطباعة

يوجد حاليًا ثلاثة أنواع مختلفة من تقدم حجم الخط محددة:

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

• 13 بكسل - 14 بكسل - 15 بكسل - 17 بكسل - 19 بكسل
  ولكن عندما أنظر إلى أحجام الخطوط الفعلية، فإن المقياس الافتراضي المستخدم هو أكثر أو أقل:
• 13 بكسل - 15 بكسل - 17.25 بكسل - 22 بكسل - 26 بكسل

التباعد

أرى أن العناصر الجديدة مثل الشريط الجانبي تقدم متغيرات جذرية للتباعد. على سبيل المثال:

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

بشكل عام

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

هذه إعادة بناء مع اختيار كل قيمة تباعد من تقدم هندسي بسيط جدًا (2 بكسل / 4 بكسل / 8 بكسل / 16 بكسل / 32 بكسل / 64 بكسل). وأحجام الخطوط من 4 قيم فقط:

يبدو فقط من ناحية التصميم أنه لا حاجة لهذا العدد من التعريفات الفريدة الموجودة حاليًا عبر التطبيق؟

[awesomerobot (Kris)]

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

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

@manuel

الاتجاه المتصور لنظام التصميم

لا يوجد اتجاه متصور بخلاف المزيد من الاتساق. لقد فكرنا في فصل الأنماط الأساسية لدينا بحيث يكون لدى Discourse الافتراضي “غير المصمم” قدر أقل بكثير من CSS (مما قد يسهل صيانة التصميمات)… ولكن هذه مجرد فكرة في الوقت الحالي.

@manuel

على أي حال، ألا ينبغي أن يكون هناك مقياس رقمي لجميع قيم الألوان الأربعة الرئيسية؟ حاليًا هو موجود فقط للأساسي والثانوي، ولكن ليس للثانوي والرباعي.

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

@manuel

هناك حاليًا ثلاثة أنواع مختلفة من تدرج حجم الخط محددة:

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

يعتمد مقياس em تقريبًا على مقياس طباعي كلاسيكي (https://spencermortensen.com/articles/typographic-scale/، على سبيل المثال). مقياس أكثر توازنًا مثل 13-15-17-19 لا يخلق الكثير من التباين ويبقى كل شيء صغيرًا نوعًا ما ما لم يكن لديك العديد من الخطوات. في المقياس الكلاسيكي، تزداد الفجوات بين المقياس مع الحجم لإنشاء المزيد من التباين.

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

.sidebar-wrapper {
  font-size: 20px;
}

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

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

هناك بعض الرغبة في الانتقال إلى نظام rem بدلاً من ذلك، ولكن كما ذكرنا سابقًا… سيستغرق هذا التغيير وقتًا طويلاً لأنه سيؤثر على العديد من المواقع الحالية. أفضل أيضًا الأساس الافتراضي للمتصفح وهو 16 بكسل بدلاً من 15 بكسل لدينا، ولكن القصة متشابهة (كانت 14 بكسل في السابق! لذلك قمنا بخطوة واحدة على الأقل).

يتم استخدام مقياس rem للعناوين في محتوى المنشورات المطبوخة، لأن تداخل علامات العناوين باستخدام ems يعني أن الأفراد يمكنهم توسيع النص بشكل لا نهائي والتسبب في مشاكل في التخطيط.

@manuel

من ناحية أخرى، لا أرى متغيرات مسافات أساسية يتم تقديمها تسمح بتعديلات تخطيط أكثر اتساقًا عبر التطبيق. هل هذا على خارطة الطريق بأي شكل من الأشكال؟

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

سرعة حدوث هذه الأشياء محبطة بشكل مفهوم، ولكن بالنسبة لمعظم تاريخ Discourse، لم يكن هناك مصمم متفرغ على الإطلاق. نما فريق التصميم إلى 7 خلال العامين الماضيين (بما في ذلك مصممون مخصصون للعمل على مشاريع العملاء، والتي تحدث في الغالب خارج الأضواء العامة) لذا نأمل أن نتحرك نحو المزيد من الاتساق بشكل أسرع الآن.

[manuel (Manuel Kostka)]

شكراً على التوضيحات يا كريس! هذا مفيد حقاً.

@awesomerobot

كل تغيير نقوم به يسبب تراجعات محتملة في المظهر عبر آلاف المواقع

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

@awesomerobot

لقد نظرنا في فصل أنماطنا الأساسية بحيث يكون لدى ديسكورس الافتراضي “غير المزين” قدر أقل من CSS

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

@awesomerobot

لكن هذا النموذج الذهني لا يبدو طبيعياً.

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

[manuel (Manuel Kostka)]

التفكير في هذا الأمر أكثر.. يمكن أن يكون لدي عدة رؤى لنظام تصميم Discourse.

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

نظام يجرد بعض المكونات عالية المستوى. بالنسبة لـ Discourse، يمكن أن تتعلق هذه بالإشراف، أو التقدير، أو المعلومات،..

نظام شائع للأنماط للمحادثة عبر الإنترنت. مشابه للنطاق الأساسي لنظام مثل Material Design.