من الكود إلى اللوحة: تجعل Logto تصميم تجربة تسجيل الدخول مفتوح المصدر
لقد نشرنا موارد تسجيل الدخول في Figma للجمهور، بما في ذلك تصميمات شاملة لتدفق المصادقة وأسلوبها المتنوع ومكوناتها.
نحن في Logto نؤمن بقوة التعاون والشفافية. لهذا السبب نحن سعداء لإعلامك بأننا جعلنا تصميم تجربة تسجيل الدخول في Figma مفتوح المصدر ومتاحًا للجميع لاستخدامه. للوصول إلى موارد Figma:
كتالوج موارد تصميم تجربة تسجيل الدخول
يتضمن هذا التصميم مكونين رئيسيين: تدفق المصادقة (تجربة تسجيل الدخول) والأنماط والمكونات. فلنستكشف كل واحدة بالتفصيل.
تدفق المصادقة
لقد قمنا بصياغة بعناية مجموعة متنوعة من سيناريوهات التسجيل وتسجيل الدخول وتسجيل الدخول الاجتماعي الأول لكل من منصات الجوال والحاسوب. يأتي كل سيناريو مع تكوين كونسول ملائم، مما يتيح لك نظرة شاملة على تدفق المصادقة. إليك لمحة سريعة عن بعض السيناريوهات:
التسجيل | تسجيل الدخول | تسجيل الدخول الاجتماعي الأول | |
---|---|---|---|
اسم المستخدم | اسم المستخدم + كلمة المرور | اسم المستخدم + كلمة المرور | تسجيل الدخول الاجتماعي + تعيين اسم المستخدم |
البريد الإلكتروني (الأكثر شيوعًا) | البريد الإلكتروني + رمز التحقق + كلمة المرور | البريد الإلكتروني + كلمة المرور | تسجيل الدخول الاجتماعي + ربط البريد الإلكتروني |
رقم الهاتف | رقم الهاتف + رمز التحقق | رقم الهاتف + رمز التحقق | تسجيل الدخول الاجتماعي + ربط رقم الهاتف |
البريد الإلكتروني ورقم الهاتف المدعوم | بريد إلكتروني/رقم الهاتف + رمز التحقق + كلمة المرور | بريد إلكتروني/رقم الهاتف + رمز التحقق/كلمة المرور | تسجيل الدخول الاجتماعي + ربط البريد الإلكتروني/رقم الهاتف |
فقط تسجيل الدخول الاجتماعي | / | / | فقط تسجيل الدخول الاجتماعي |
استعادة كلمة المرور | |
---|---|
البريد الإلكتروني ورقم الهاتف المدعوم | إعادة تعيين كلمة المرور عن طريق التحقق من البريد الإلكتروني/رقم الهاتف |
الأنماط والمكونات
يتضمن تصميمنا أيضًا مجموعة من الأنماط والمكونات البسيطة والمتنوعة التي تجعل من السهل عليك تخصيص واجهة المستخدم العامة لتجربة تسجيل الدخول الخاصة بك. إليك ما ستجده:
مقدمة | |
---|---|
أنماط الخطوط | لقد قمنا بتبسيط تصنيف الخطوط إلى فئات مثل الجسم، والعلامة التوضيحية، والعنوان، والخط الرئيسي. تُستخدم نفس أنماط الخطوط للموجات المحمولة والحاسوب، مما يضمن الاتساق وسهولة الاستخدام. |
أنماط الألوان | بمساعدة لوحات الألوان والرموز، يمكنك بسهولة تعديل ألوان السمة لتتناسب مع علامتك التجارية. يتم إنشاء لوحة الألوان لدينا باستخدام تصميم المواد من Google، وتوفر وضع الضوء ووضع الظلام، مما يسهل على المصممين فهمها. |
الأيقونات | لقد شملنا مجموعة منتقاة بعناية من الأيقونات الوظيفية التي تغطي مجموعة واسعة من الحالات التي يمكن استخدامها مباشرة أو استبدالها بسهولة. بالإضافة إلى ذلك، نوفر مجموعة متنوعة من أيقونات وسائل التواصل الاجتماعي المصممة خصيصًا لأزرار تسجيل الدخول الاجتماعي. |
المكونات | لقد نظمنا المكونات لكل من المنصات المحمولة والويب، بما في ذلك العلامة التجارية، الزر، مربع الاختيار، الحوار، التنقل، توست، حقل النص، ولوحة المفاتيح (محمول). |
تكوين مبسط
لكن هذا ليس كل شيء! مع Logto، يمكنك تجاوز التفاصيل الدقيقة أعلاه والاعتماد علينا لتقديم تجربة تكامل سلسة. في Logto Console، يمكنك بسهولة استكشاف تكوينات الطريقة وتوافقها مع واجهة المستخدم الخاصة بعلامتك التجارية. في غضون دقائق ستحصل على تجربة دخول وتسجيل مخصصة تتوافق تمامًا مع عملك.
لماذا جعلنا تصميم Figma لدينا عامًا؟
لطالما التزمت Logto بتوفير خدمة كود مفتوحة المصدر، لكن قد تتساءل لماذا قررنا توسيع هذه الشفافية لتشمل تصميمنا أيضًا.
فهم وتكوين تجربة تسجيل الدخول
نريد أن يكون Logto ل يس فقط صديقًا للمطورين بل أيضًا لأفضل أصدقاء لمديري المشاريع والمصممين. نؤمن بتعزيز التعاون الأفضل طوال عملية التطوير، مما يؤدي إلى كفاءة عالية وشفافية وثقة.
- فهم شامل لتدفق المصادقة: بينما قد يستخدم منتجك فقط طريقة تسجيل دخول أو تسجيل محددة، كمصمم، يجب أن ترغب في الحصول على رؤية شاملة. هذه المعرفة تمكنك من تحديد النهج الذي يناسب عملك بشكل أفضل ويزيد من معدلات التحويل. لا ينبغي أن تكون المنطق المصادقة كيانًا غامضًا. ومع ذلك، فإن المطابقة بين المعرفات وطرق المصادقة ليست علاقة بسيطة N*N؛ بل تتضمن قيودًا مختلفة وقرارات منتج. سيساعدك Figma الخاص بنا. لمعرفة المزيد حول هذا الموضوع، يمكنك الرجوع إلى المقالة „اعتبارات التصميم لتجربة تسجيل دخول سلسة”.
- تصميم واجهة المستخدم الخاصة بك مباشرةً: اعتاد المصممون على تقديم الحلول الكاملة في Figma. إذا شارك مصمموك في مشروع، فسيساعدهم هذا التصميم مفتوح المصدر على مطابقة الهوية البصرية لعلامتك التجارية بسرعة.
تمكين تجربة وخدمات Logto
بينما تلتزم Logto بتقديم خدمة سحابية فعالة، فإنها نشأت من المجتمع المفتوح المصدر وتعتزم الحفاظ عل ى الشفافية العامة في المدى الطويل.
- تبني روح المصدر المفتوح: نحن نعتقد أن الفوائد التي تعود من فتح مصدر الكود يمكن تطبيقها أيضًا على التصميم. من خلال دعوة المزيد من الانتباه إلى تجربة المستخدم من خلال الانفتاح والاستخدام والنقاش داخل مجتمع المصدر المفتوح، يمكننا تحسين تجربة المصادقة باستمرار.
- توفير رؤية لتصميم الإنتاج على المدى الطويل: على الرغم من أن معظم جهودنا تركز حاليًا على تطوير قدرات المصادقة والتفويض، فإن تجربة تسجيل الدخول التي نقدمها قابلة للتمديد بشكل كبير وتلبي غالبية احتياجاتك. من خلال التغذية الراجعة والتعاون من المصدر المفتوح، نأمل في دمج عمليات SIE وتكويلاتنا البصرية بشكل أفضل في منتجاتنا، مما يقلل في النهاية من تكلفة الإنتاجية.
ختام الملاحظات
بينما نستمر في تكرار منتج Logto، سنواصل الحفاظ على تصميم Figma محدثًا. نأمل أن تستخدم Logto لإنشاء تجارب خطوة أولى استثنائية لمنتجاتك وترك انطباع دائم على علامتك التجارية.
نحن نثمن تجربتك ورايك، لذا يرجى الحفاظ على قنوات الاتصال مفتوحة. نتطلع لسماع منك.