لقد رأيت مواقع ويب أخرى تحتفظ بالصفحة الحالية مرئية بالكامل بينما يتم تحميل الصفحة الأخرى، مع ظهور شريط التحميل عبر الشاشة. ربما تستحق هذه النسخة المحاولة.
8 إعجابات
أود إضافة نقطة أخرى. أعتقد أنني لاحظت فرقًا كبيرًا آخر بين Discourse وبعض المواقع الأخرى التي تستخدم شريط تحميل. المواقع الثلاثة التي أقارن بها هي https://www.youtube.com و https://github.com و https://bookmeter.com. إليك الفروقات الرئيسية:
- كما ذُكر في منشوري السابق، بدلًا من استبدال المحتوى المعروض بصفحة فارغة، تحتفظ هذه المواقع بالمحتوى السابق على الشاشة (بدون تلاشي أو أي تأثير آخر) حتى يتم تحميل المحتوى الجديد.
- بشكل عام، يظل الكثير من المحتوى على الشاشة حتى بعد تحميل الصفحة الجديدة. تحتوي هذه المواقع على محتوى أكثر بكثير في القائمة العلوية، وأحيانًا تحتوي على قائمة علوية ثانوية قد تبقى حسب الرابط الذي تم النقر عليه. كما تحتوي على قوائم جانبية قد تبقى أحيانًا بعد الانتقال إلى صفحة جديدة. من ناحية أخرى، تحتوي Discourse على قائمة علوية بسيطة جدًا، ولا تبقى دائمًا سوى أيقونة البحث، وأيقونة القائمة الهامبرغر، وأيقونة المستخدم.
ربما يكون التبديل إلى السلوك الذي يحافظ على المحتوى القديم حتى يصبح المحتوى الجديد جاهزًا فكرة جيدة. لكن من الممكن أيضًا ألا يعمل هذا بشكل جيد ببساطة لأن جزءًا كبيرًا من المحتوى يتم استبداله بغض النظر عن المكان الذي تنتقل إليه في Discourse.
7 إعجابات
في حالتي، أستخدم لفتات التصنيفات، ولفات الوسوم، وشريط جانبي يعرض التصنيفات في قوائم المواضيع. يوفر Discourse افتراضيًا بعض المسارات التي تحتفظ بالأشرطة العلوية أو الجانبية، مثل ملفات المستخدمين أو المجموعات. أنا أفضل بشدة الاحتفاظ بالعرض القديم قبل الانتقال حتى لا تختفي هذه العناصر على الشاشة لتظهر مرة أخرى في نفس المكان.
7 إعجابات
نعم، هذا هو بالضبط كيفية استخدامنا لمكون سلايدر Discourse الجديد، منذ حوالي أسبوع كامل، ونعجبه حقًا. لقد قمنا ببساطة بتعطيل كود انتقال الجسم واستخدمنا السلايدر فقط.
تتولى الإجراء الطبيعي للمتصفح في تحميل (أو إعادة تحميل) الصفحة مسؤولية الانتقال؛ وبالتالي لا يلزم أي كود إضافي للتلاشي أو إخفاء أي محتوى HTML. يبدو هذا السلايدر رائعًا دون الحاجة إلى أي كود انتقال إضافي للصفحة (تلاشي، إخفاء، إلخ)، وهذا هو الأسلوب الذي نستخدمه على موقعنا منذ أسبوع.
شكرًا لك على هذا السلايدر الرائع وعلى إمكانية تخصيصه كمكون سمة!
4 إعجابات
ربما لم تفهم ما كتبته بشكل صحيح، لكن ما وصفته ليس الطريقة التي يعمل بها ديسكورس حاليًا مع مكون الثيم. حاليًا، يجعل ديسكورس معظم المحتوى صفحة فارغة أثناء تحميل المحتوى الجديد. أما المواقع الأخرى التي ربطت بها فتحافظ على المحتوى الحالي أثناء تحميل المحتوى الجديد. هذا ليس الشيء نفسه.
إعجاب واحد (1)
أنا متأكد تمامًا من أنني فهمت تمامًا ما ذكرته @seanblue (أعلى). ما قلته بسيط للغاية، وكان منشورك سهل الفهم، في رأيي.
إذا قمت بتعليق انتقال جسم SCSS (الأنيميشن) في مكون سلايدر الثيم الأصلي لـ Discourse (بغض النظر، قمت بتعديل مكون الثيم عن طريق إنشاء نسخة منه قبل أسبوع، لكن هناك طرقًا أخرى لتعديل مكون الثيم).
عندها، سيكون السلوك تمامًا كما تصف.
يتم عرض الصفحة الحالية (في تعديلنا) بينما يتم تحميل المحتوى الجديد (وهو ببساطة السلوك الطبيعي لصفحة يتم تحميلها دون أي أنيميشن مضاف للجسم). “التلاشي” و"التعتيم" اللذان تراهما في تجارب Discourse الحالية كانا بسبب كود أنيميشن جسم CSS في إصدار الثيم (انظر أدناه) عند إطلاقه قبل أسبوع.
بدون أنيميشن جسم CSS، يعمل السلايدر التحميلي مساره الطبيعي ولا يوجد “تعتيم” أو “تلاشي” للجسم لأن ذلك الأنيميشن كان محددًا في كود CSS لمكون الثيم (الأصلي). معظم المواقع الإلكترونية (كما تذكر) لا تضيف أنيميشن إضافيًا للجسم، وهذا هو السبب في أنك قلت:
هذا هو “المعيار”… الذي يحدث بعد إزالة أنيميشن الجسم من CSS (أتحدث عن الإصدار قبل أسبوع، حيث لم أكن أتابع، أي، كما يقول GitHub، فإن نسختنا المعدلة هي:
بعد أن قمنا بهذا التغيير، قبل أسبوع، يبدو السلايدر رائعًا (كما يقول مستخدمونا) ولا يتطلب أي أنيميشن إضافي للجسم (تلاشي داخل أو خارج، أنيميشن تعتيم، إلخ).
كان هذا هو كود CSS الذي قمنا بتعليقه في “الإصدار الأولي” لهذا السلايدر الرائع. لقد عمل هذا بشكل ممتاز بالنسبة لنا (ويحب مستخدمونا ذلك)، لذا لم نتابع جميع التغييرات اللاحقة في كود تجربة “المجمعات الدوارة، التعتيم”، أنيميشن الجسم، بعد أن نجح الأمر بشكل جيد بالنسبة لنا؛ باستثناء النتائج التي أراها مع التجارب على meta).
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
أتمنى أن يكون ذلك مفيدًا.
5 إعجابات
آه، لم أكن أدرك أنك تستخدم نسخة مشتقة/معدلة. خطأي. يسعدني أن هذه النسخة تعمل بشكل جيد بالنسبة لك. آمل أن يحاولون اتباع هذا النهج هنا على ميتا.
6 إعجابات
@david / @awesomerobot أعرف أننا تبادلنا الآراء حول هذا الأمر عدة مرات، لكنني أعتقد أننا يجب أن نجرب التنفيذ الأصلي (مع بعض التحسينات البسيطة) قبل الانتقال إلى تأثير التلاشي. دعني ألخص الخيارات المتاحة عند النقر:
-
الاحتفاظ بالمحتوى القديم على الشاشة، ثم التبديل إلى المحتوى الجديد بمجرد جاهزيته.
-
عرض “شاشة بيضاء”، ثم التبديل إلى المحتوى الجديد بمجرد جاهزيته.
-
الانتقال إلى محتوى غير شفاف (بنسبة تتراوح بين 0% و40% تقريبًا)، ثم التبديل إلى المحتوى الجديد بمجرد جاهزيته.
مع جميع هذه الخيارات، نحن متأكدون من رغبتنا في إضافة ما يلي: “إذا استغرق المحتوى أكثر من ثانيتين، فاعرض مؤشر تحميل (spinner)”.
الحل (1) هو الوحيد الذي يقلل من الحالات الانتقالية. نعم، هناك حاجة لبعض الوقت للتعود على الأمر: “مهلاً، لقد نقرت على شيء ولا يبدو أن شيئًا قد حدث”. لكن هذا هو كيفية عمل الويب بالفعل عند النقر على رابط تشعبي. المتصفح لا يعرض شاشة بيضاء أو يقوم بتلاشي العناصر عند النقر على رابط إلى موقع آخر.
الحل (2) هو ما نستخدمه حاليًا، ويعتبره البعض قاسيًا، لأن أحد أكبر مكاسب هذا النمط هو تجنب الشاشات البيضاء. إنه تغيير بسيط للغاية مقارنة بمؤشر التحميل القديم.
الحل (3) قد يكون مشتتًا جدًا، كما أن العثور على درجة الشفافية المناسبة أمر صعب. بناءً على تجربتي عندما جربته، أصبح مرهقًا للغاية بعد ساعة واحدة من الاستخدام.
@david لقد جربنا الحل (2) بشكل جدي، هل يمكننا الآن إعطاء الحل (1) فرصة حقيقية لمدة أسبوع مثلاً؟ أعتقد أنه الخيار الأفضل لأنه يقلل من التغييرات الظاهرة على الشاشة.
9 إعجابات
هذا… غير صحيح. هناك حركة تحميل تبدأ فورًا عند النقر. انظر إلى علامة التبويب في متصفحك أثناء النقر على رابط. لاحظ أنه عند النقر أو اللمس، يتحول فورًا من أيقونة الموقع إلى مؤشر التحميل الدائري.
5 إعجابات
عذرًا، نعم هذه كانت النقطة التي أود توضيحها هنا؛ يمكننا محاكاة شيء قريب جدًا من “التنقل” القياسي (على سبيل المثال، يمكننا تغيير أيقونة التبويب أثناء التحميل، أو تغيير النص الموجود على التبويب).
عند النقر على رابط عشوائي في موقع ما، لا تصبح الصفحة الحالية بيضاء بالكامل، ولا تصبح معتمة. يبقى المحتوى القديم على الشاشة لفترة من الوقت حتى يتم حل اسم النطاق (DNS) للموقع الجديد ويكون المحتوى جاهزًا للعرض.
بالنسبة لي، تكمن القوة الكبيرة لهذا المكون في تقليل الحالات الوسيطة. إذا تمكنا من جعله “يشعر” وكأنه تنقل متصفح عادي عن طريق محاكاته، فسيكون ذلك رائعًا.
12 إعجابًا
لا تقلق. نحن نحب شريط التمرير حقًا (مع إضافة بضع بكسلات لسطح المكتب)؛ لكننا وجدنا أن لا حاجة لأي حركات للجسم (مثل التعتيم، أو التلاشي عند الظهور/الاختفاء، أو غير ذلك).
شريط التمرير يشير إلى التحميل بشكل جيد بما يكفي؛ وستتم تحميل الصفحة والتغيير فيها بشكل طبيعي دون إضافة أي CSS انتقالي للجسم أو أيقونات تحميل إضافية. لقد شغلناها بهذه الطريقة لمدة 8 أو 9 أيام الآن، والمستخدمون راضون، وأنا أيضًا أحب ذلك. لم يعجب المستخدمين حركات “التلاشي عند الظهور/الاختفاء” ولا حركات “تعتيم الصفحة” ولا “أيقونة التحميل الإضافية + حركة شريط التمرير”؛ ولكن مرة أخرى، مستخدمونا ليسوا منجذبين عمومًا إلى الحركات غير الضرورية أو الإضافات التقنية الزائدة على الشبكة.
آمل أن تحتفظ فريق الميتا بهذا الكود كعنصر سمة، أو على الأقل تسمح لمالكي المواقع بالاستمرار في تجاوز أي شيء يقررونه؛ حيث يبدو أن ما يفضله مستخدمونا يختلف عما يفضله الآخرون فيما يتعلق بانتقالات الصفحة.
عند الشك، فإن “التعامل بلطف ومنح المواقع القدرة على الاختيار” هو نهج جيد، كما أعتقد.
3 إعجابات
يبدو جيدًا، لقد قمت بإعادة المكون إلى تطبيقه الأصلي
7 إعجابات
أعتقد أن إضافة “أوه لا، مرّ ثانيتان، اعرض مؤشر تحميل” هي بالتأكيد أمر بسيط لكنه مهم لإضافته
باستثناء ذلك، دعونا نرى ما يقوله الناس، فأعتقد أن هذا هو الإصدار الذي سنطلقه على الأرجح
8 إعجابات
أين يجب أن يتم عرضه؟ هل كنافذة منبثقة؟ أم يجب إخفاء #main-outlet بعد ثانيتين لإفساح المجال لعجلة التحميل؟
4 إعجابات
أفكر في إخفاء المخرج الرئيسي. قد نحتاج إلى تعديل العتبة؛ فالرقم 2 يبدو اعتباطياً بعض الشيء، ربما 3 أو 4 أو 5؟
6 إعجابات
سيتم الآن عرض مؤشر التحميل بعد ثانيتين:
12 إعجابًا
هذا رائع جدًا، فبدون طبقة التحميل الإضافية بعد ثانيتين، قد تصبح الأمور مربكة للمستخدمين. بهذه الطريقة، جمعنا أفضل ما في العالمين: 1. نبدو سريعين كالبرق بفضل الشريط المنزلق (نحن هنا نتلاعب قليلاً TBO). 2. نملأ الفجوة في حال توقف التحميل (انتقال نفسي).
أحسنت! 
8 إعجابات
لقد جربته للتو على شبكة محاكاة بطيئة، وأجد أن مؤشر التحميل بعد ثانيتين يبدو ممتازًا بالنسبة لي. أود التأكيد مجددًا أنه على سطح المكتب (على الأقل على شاشة كبيرة نسبيًا)، فإن شريط التحميل يكاد يكون غير مرئي. أعتقد أن إضافة 2-3 بكسلات أخرى عموديًا ستحدث فرقًا كبيرًا.
5 إعجابات
لقد كنت أتابع هذه المحادثة لأنني مستخدم جديد تمامًا في Discourse. يجب أن أقول إنني معجب جدًا بمستوى التفكير والعمل الجاد الذي يُبذَل في هذه الميزة الحديثة جدًا لتجربة المستخدم. آسف على الخروج عن الموضوع هنا… لكن هذه محادثة مبهرة حقًا لشخص استخدم برمجيات منتديات أخرى لسنوات.
استمروا في العمل الرائع… أحب هذه الميزة.
11 إعجابًا
ربما يجب أن أذكر أنني نقرت على موضوع بعد أن نقرت عليه بالفعل، لأنني ظننت أنني نقرت عن طريق الخطأ، رغم أنه كان يتم تحميله من النقرة الأولى. ربما أحتاج فقط إلى التعود على عدم وجود مؤشر تحميل…
5 إعجابات