العربية
  • التصميم
  • المصدر المفتوح
  • المصادقة
  • المنتج
  • فيجما

من الكود إلى اللوحة: تجعل Logto تصميم تجربة تسجيل الدخول مفتوح المصدر

لقد نشرنا موارد تسجيل الدخول في Figma للجمهور، بما في ذلك تصميمات شاملة لتدفق المصادقة وأسلوبها المتنوع ومكوناتها.

Ran
Ran
Product & Design

نحن في Logto نؤمن بقوة التعاون والشفافية. لهذا السبب نحن سعداء لإعلامك بأننا جعلنا تصميم تجربة تسجيل الدخول في Figma مفتوح المصدر ومتاحًا للجميع لاستخدامه. للوصول إلى موارد Figma:

كتالوج موارد تصميم تجربة تسجيل الدخول

يتضمن هذا التصميم مكونين رئيسيين: تدفق المصادقة (تجربة تسجيل الدخول) والأنماط والمكونات. فلنستكشف كل واحدة بالتفصيل.

تدفق المصادقة

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

التسجيلتسجيل الدخولتسجيل الدخول الاجتماعي الأول
اسم المستخدماسم المستخدم + كلمة المروراسم المستخدم + كلمة المرورتسجيل الدخول الاجتماعي + تعيين اسم المستخدم
البريد الإلكتروني (الأكثر شيوعًا)البريد الإلكتروني + رمز التحقق + كلمة المرورالبريد الإلكتروني + كلمة المرورتسجيل الدخول الاجتماعي + ربط البريد الإلكتروني
رقم الهاتفرقم الهاتف + رمز التحققرقم الهاتف + رمز التحققتسجيل الدخول الاجتماعي + ربط رقم الهاتف
البريد الإلكتروني ورقم الهاتف المدعومبريد إلكتروني/رقم الهاتف + رمز التحقق + كلمة المروربريد إلكتروني/رقم الهاتف + رمز التحقق/كلمة المرورتسجيل الدخول الاجتماعي + ربط البريد الإلكتروني/رقم الهاتف
فقط تسجيل الدخول الاجتماعي//فقط تسجيل الدخول الاجتماعي
استعادة كلمة المرور
البريد الإلكتروني ورقم الهاتف المدعومإعادة تعيين كلمة المرور عن طريق التحقق من البريد الإلكتروني/رقم الهاتف

تصميم تدفق المصادقة

الأنماط والمكونات

يتضمن تصميمنا أيضًا مجموعة من الأنماط والمكونات البسيطة والمتنوعة التي تجعل من السهل عليك تخصيص واجهة المستخدم العامة لتجربة تسجيل الدخول الخاصة بك. إليك ما ستجده:

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

الأنماط والمكونات

تكوين مبسط

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

كونسول Logto Cloud

لماذا جعلنا تصميم Figma لدينا عامًا؟

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

فهم وتكوين تجربة تسجيل الدخول

نريد أن يكون Logto ليس فقط صديقًا للمطورين بل أيضًا لأفضل أصدقاء لمديري المشاريع والمصممين. نؤمن بتعزيز التعاون الأفضل طوال عملية التطوير، مما يؤدي إلى كفاءة عالية وشفافية وثقة.

  • فهم شامل لتدفق المصادقة: بينما قد يستخدم منتجك فقط طريقة تسجيل دخول أو تسجيل محددة، كمصمم، يجب أن ترغب في الحصول على رؤية شاملة. هذه المعرفة تمكنك من تحديد النهج الذي يناسب عملك بشكل أفضل ويزيد من معدلات التحويل. لا ينبغي أن تكون المنطق المصادقة كيانًا غامضًا. ومع ذلك، فإن المطابقة بين المعرفات وطرق المصادقة ليست علاقة بسيطة N*N؛ بل تتضمن قيودًا مختلفة وقرارات منتج. سيساعدك Figma الخاص بنا. لمعرفة المزيد حول هذا الموضوع، يمكنك الرجوع إلى المقالة „اعتبارات التصميم لتجربة تسجيل دخول سلسة”.
  • تصميم واجهة المستخدم الخاصة بك مباشرةً: اعتاد المصممون على تقديم الحلول الكاملة في Figma. إذا شارك مصمموك في مشروع، فسيساعدهم هذا التصميم مفتوح المصدر على مطابقة الهوية البصرية لعلامتك التجارية بسرعة.

تمكين تجربة وخدمات Logto

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

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

ختام الملاحظات

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

نحن نثمن تجربتك ورايك، لذا يرجى الحفاظ على قنوات الاتصال مفتوحة. نتطلع لسماع منك.