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

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

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

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