هذا الموضوع لتتبع الملاحظات حول تصميم تسجيل الدخول / إنشاء حساب بملء الشاشة المتوفر على ميتا من خلال: Discourse Design team experimentation topic
7 إعجابات
هل سيتم تحميله مسبقًا؟
أنا أحبه كثيرًا. النوافذ المنبثقة الصغيرة قديمة في تطبيقات المستخدم العادي على الإنترنت.
6 إعجابات
إنه شعور جيد حقًا! لطيف جدًا. 
بعض الملاحظات:
- سطح المكتب – قد يكون عرض أزرار الوسائط الاجتماعية على الشاشات الكبيرة كبيرًا جدًا ومزعجًا. ومع ذلك، إذا قمت بتقليصها، فقد يتطلب الأمر مزيدًا من الجهد للتوفيق بين المظهر المرئي للألواح اليسرى/اليمنى.
- سطح المكتب – قد يحتاج لون أيقونة الإغلاق إلى مزيد من التباين لسهولة الوصول.
لقطات شاشة
- الهاتف المحمول – انتقائي للغاية
. يبدو أن ارتفاع السطر قد يكون مرتفعًا قليلاً
- الهاتف المحمول – لست متأكدًا من هذا. يعتمد على تباين الشاشة. يبدو لون حدود زر الوسائط الاجتماعية بالكاد مرئيًا (أول شيء لاحظته على هاتفي المحمول، ولكنه يبدو جيدًا على شاشتي الثانية). أتفهم إذا كان الأمر مبالغًا فيه؛ سيكون بالتأكيد مربكًا. ربما يساعد استخدام
primary-300قليلاً.
6 إعجابات
شكراً على هذه الملاحظات التفصيلية!
إعجابَين (2)
في الوقت الحالي، تم تثبيته هنا في ميتا أثناء تجريبنا والحصول على ملاحظات. إذا تم استقبال الأمور بشكل جيد، فسنقوم في النهاية بجعل هذا هو الإعداد الافتراضي في المنتج الأساسي.
4 إعجابات
أعتقد أن هناك الكثير من المساحة البيضاء في الأعلى. لماذا يجب علي التمرير لجعل زر تسجيل الدخول يظهر؟ كما ترى في النهاية، النص بأكمله يناسب الشاشة تمامًا.
إعجابَين (2)
على متصفح سفاري على نظام iOS، يتم اقتطاع نص “Welcome”.
السحب لأعلى أو لأسفل لا يحل المشكلة أيضًا. لاحظ أيضًا أن علامة “x” في النافذة المنبثقة تقع فوق الرموز التعبيرية.
أتساءل عما إذا كان الخيار الأفضل هنا هو وضع حد أقصى للعرض للمعالجة الكاملة للصفحة للنافذة المنبثقة. بعد عرض معين، من المحتمل ألا يكون من المنطقي الاستمرار في استخدام منفذ العرض بالكامل.
إعجابَين (2)
أتعلم، أعتقد أن هذا قد يكون بسبب حقيقة أنني ألتزم بالتخطيط الأيسر/الأيمن الذي كان لدينا في النافذة المنبثقة عندما كانت خيارات تسجيل الدخول متاحة.
سأستكشف جلب خيارات تسجيل الدخول البديلة تحت منطقة تسجيل الدخول الرئيسية.
إعجابَين (2)
لقد أجريت بعض التعديلات مع أخذ معظم هذه الملاحظات في الاعتبار، ألقِ نظرة وأخبرني برأيك
@pmusaraj ألقِ نظرة أيضًا، لقد ابتعدت عن التصميم ذي العمودين ودمجته في عرض واحد في وسط ملء الشاشة، على غرار صفحات تسجيل الدخول في جوجل والعديد من المواقع الأخرى.
3 إعجابات
إنها فكرة مثيرة للاهتمام، لكنني لست مقتنعًا بها تمامًا، بصراحة. ربما هناك ذاكرة عضلية من جانبي، بالتأكيد لقد اعتدت على التقسيم الأبيض/الأزرق (أو الأسود/الأزرق للسمات الداكنة) في هذه الشاشات، ولكن بالنسبة لي أصبح هذا جزءًا من هوية Discourse أيضًا. يبدو الأمر وكأنه خطوة كبيرة لإزالته.
دعني أنشر بعض لقطات الشاشة جنبًا إلى جنب، فهذا يساعد على وضع الأمور في سياقها (إنها مثيلات مختلفة، لكنها فقط لإعطاء فكرة عن التغيير).
علاوة على ذلك، في نافذة التسجيل المنبثقة، يكون زر “إنشاء حسابك” (Create Your Account) خلف شريط تمرير، ولا تراه على الفور.
أيضًا، شيء آخر للتفكير فيه، في جميع شاشات تسجيل الدخول بملء الشاشة، يفتقد شعار الموقع. عادة ما يعرف المستخدمون مكانهم، لكن الشعار هو تحقق إضافي مهم بأنك بالفعل تدخل بيانات حساسة (بريد إلكتروني، كلمة مرور) على الموقع الصحيح. في الشاشات القديمة، إنه موجود، نوعًا ما، بفضل إطار النافذة المنبثقة.
8 إعجابات
هذه بعض الملاحظات!
تبدو جيدة. أعتقد أنها تفتقر إلى بعض الهوية البصرية، مع ذلك. 
. (تعديل: أشعر بنفس الشعور تمامًا مثل بينار بشأن الهوية)
الجوال
تبدو جيدة في الوضع الرأسي.
بعض المشاكل في الوضع الأفقي:
- تم اقتطاع الرأس. لا يمكنك التمرير لأعلى، ولكن يمكنك التمرير لأسفل.
لقطة شاشة
يحدث هذا في الوضع الرأسي أيضًا.
تدفع لوحة المفاتيح المحتوى لأعلى في صفحة تسجيل الدخول. لا يحدث هذا في صفحة التسجيل.
بخصوص الوضع الأفقي. لن يستخدمه معظم الناس، ولكنه قد يحدث، وهو ليس تجربة مستخدم جيدة. أعتقد أنه يمكنك تعديل بعض CSS لجعل الكتل تطفو حول رسالة الترحيب. ليس مثاليًا، ولكنه مقبول:
ومع ذلك، فإن الأكثر جاذبية بصريًا بالنسبة لي هو تقسيم بيانات الاعتماد والأزرار الاجتماعية إلى نصفين:
- ليس متعلقًا بشكل مباشر. على الجوال، يكون الحقل الأول نشطًا، ويفتح لوحة المفاتيح مباشرة. (لا أعرف ما إذا كان هذا هو السلوك نفسه في كل مكان)
أعتقد أنه يفاقم تجربة المستخدم لسببين:
- لا ترى الصفحة بأكملها في البداية، وهي ليست مرحبة.
- لا ترى جميع خيارات تسجيل الدخول. (خاصة للمستخدمين الذين يستخدمون تسجيل الدخول الاجتماعي - عليك إغلاق لوحة المفاتيح في كل مرة)
سطح المكتب
تبدو جيدة في الغالب، مع بعض المشاكل.
- تبدو جيدة على الشاشات متوسطة الحجم:
- على الشاشات الكبيرة، لست متأكدًا. تبدو جيدة؛ ومع ذلك، بينما تبدو جميع الأزرار الاجتماعية في سطر واحد مريحة، إلا أنها تبدو غير عادية (محتوى صغير في المنتصف، مع محتوى كبير أسفله). ليس خطأ، وتبدو جيدة - قد تكون عادة من النمط السابق حيث يتركز انتباهك على مكان واحد في المنتصف.
ما فعلته من قبل كان أنيقًا بالفعل، وكما اقترح بينار، فإن عرضًا أقصى سيكون كافيًا لجعلها تبدو جيدة. لن أمانع في رؤية عمودين على شاشة كبيرة، ثم يتم التفافها تلقائيًا أسفل حد معين.
- من ناحية الاستجابة - تحت حد أدنى معين للارتفاع، تحصل على شريط تمرير في اللوحة اليسرى. لا يمكنني الاختبار على جهاز حقيقي إذا حدث ذلك أيضًا. أعتقد أنه سيكون أكثر طبيعية للمستخدم التمرير عبر الصفحة بدلاً من المكون الداخلي.
عام
- يظهر شريط تمرير المنتدى عند فتح نافذة تسجيل الدخول، ويمكنك اللعب به. قد يربك هذا المستخدم ليعتقد أن هناك شيئًا ما بينما لا يوجد شيء. يمكن أن يكون مربكًا إذا ظهر شريط تمرير النافذة في نفس الوقت.
مثال
4 إعجابات
تمت إضافة جولة أخرى من التعديلات والتغييرات اليوم
4 إعجابات
قديم:
جديد:
تسجيل الدخول بحساب اجتماعي يبدو مقيدًا للغاية على شاشة ضيقة الآن. أتفق على أنه يبدو أفضل بصريًا، ولكنه لا يستدعي هذه الإجراءات الآن.
الشريط الجانبي… عند التسجيل، ربما نرغب في تغيير النص إلى “تسجيل الدخول باستخدام Google”. أيضًا، من المربك أن البعض هو تسجيل دخول والبعض الآخر هو تسجيل خروج.
4 إعجابات
هذا سيتعارض أيضًا مع إرشاداتهم الخاصة بتسجيل الدخول الاجتماعي، وقد تم إخطار عدد قليل من المواقع بشأن أزرار فيسبوك غير المتوافقة في الماضي (قد تكون متطلبات تسجيل الدخول الاجتماعي هي السبب أيضًا في أن البعض يقول “تسجيل الدخول” بدلاً من “تسجيل”). على الرغم من أنني لست متأكدًا بنسبة 100٪ من ذلك)
4 إعجابات
يبدو أنها أيقونات مشاركة/متابعة أخرى في التذييل. ليس جيدًا على الإطلاق وأنا متأكد تمامًا من أن معظم المستخدمين لا يدركون أن هذه مخصصة لتسجيل الدخول.
إعجاب واحد (1)
هيا بنا.
الجوال
- في الوضع الرأسي، يبدو جيدًا!
تحسينات محتملة:
-
الأزرار الاجتماعية تبدو صغيرة جدًا على هاتفي (Android، FDH+، 2220x1080). للمقارنة، عرض إصبعي حوالي 1.5 سم، وعرض الزر 0.5 سم على شاشة هاتفي. قد تكون هذه مشكلة في إمكانية الوصول. سأحاول جعلها أكبر قليلاً (مع فجوة أيضًا).
-
عندما تكون لوحة المفاتيح مرئية، فإنها تحرك النافذة المنبثقة لأعلى. أعتقد أن هذا مرتبط بهذا التغيير الأخير هنا FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – ومع ذلك، لا أعتقد أنه يجب تطبيق هذا على نافذة تسجيل الدخول بملء الشاشة. تجربة تغيير التخطيط ليست جيدة.
-
في الوضع الأفقي، أفترض أنه لم يتم المساس به. بعض الاهتمام مطلوب في هذا المجال.
سطح المكتب
يبدو جيدًا بشكل عام!
سأكون بالتأكيد لصالح هذا التصميم. شكرًا لإعادته!
شاشة كبيرة
لدي قلقان بشأنه:
- هاتان اللوحتان لا تزالان بعيدتين قليلاً
- الأزرار الاجتماعية كبيرة جدًا.
حول 2. – يمكنك تقديم المزيد من نقاط التوقف
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
عند دقة 2K، يبدو الأمر كالتالي:
حول 1. – أنا غير متأكد. إليك بديل محتمل. المزايا هي أن رؤية المستخدم دائمًا ما تكون في المنتصف مع الحفاظ على الهوية البصرية. يمكن تعديل عرض اللوحة الزرقاء. هذا ليس الشعور الدقيق، ولكنه قريب جدًا.
ملاحظة: مع تقليل عرض الأزرار، أنا راضٍ تمامًا عن التصميم الحالي. أشارك هذا الاقتراح في حال كان لديك إلهام له. أحبه نوعًا ما.
بعض أكواد CSS التي لاحظتها:
- اللوحة اليسرى لديها
padding-topبقيمة3rem– هذا لا يبدو مفيدًا، ويجعل اللوحة غير متمركزة مقارنة باللوحة اليمنى.
.login-left-side {
padding: 0 3rem 0 3rem
}
- نموذج التسجيل ليس في المنتصف عموديًا. يستخدم هذا الكود. هل هناك سبب؟
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
المركز يبدو جيدًا بالنسبة لي.
- قد يحتاج تباين لون زر الإغلاق إلى التعديل لأسباب تتعلق بإمكانية الوصول. سأستخدم
--primary-very-highبدلاً من ذلك.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
هذا كل شيء بالنسبة لي!
3 إعجابات
هذا هو السبب. أعتقد أن الملاذ الأخير لتسجيلات الدخول الاجتماعية على الشاشات الصغيرة هو مجرد عرض الشعار، ولكن أحتاج إلى التحقق من ذلك / إجراء بعض التحقق من ذلك.
إعجابَين (2)
لا يمكنني رؤيتها بشكل مختلف الآن، شكرًا لك على طرح هذا الأمر!
هممم…
يبدو أن أدلة الأسلوب الوحيدة التي وجدتها على الزر كانت لـ Facebook و Google.
يريد Facebook فقط أن يكون لديك زر مستطيل مع “تسجيل الدخول باستخدام Facebook”. كما أنهم لا يريدون منك أن يكون لديك العديد من الخيارات للمصادقة مع خدمات أخرى غير Facebook.
لا بأس لدى Google في استخدام شعارهم فقط إذا لزم الأمر كزر تسجيل دخول.
ألقيت نظرة سريعة هنا على ميتا ويبدو رائعًا. لن يؤثر علي حقًا على الرغم من أن المنتدى الرئيسي الذي أتواجد فيه هو SSO فقط
إعجاب واحد (1)