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

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

وباستخدام واجهات مستخدم CSS و JavaScript المدمجة المجانية ، سيكون لديك الكثير من الأفكار التي تقدم الإلهام ومقتطفات التعليمات البرمجية لمساعدتك على البدء.

1. شرائح دائرية

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

قم بإلقاء نظرة على هذا العرض التوضيحي لشرائح العرض الدائري الذي أنشأه Nick Wanninger لمعرفة ما أعنيه.

إنه مثال مجاني تمامًا للإعداد تم إنشاؤه باستخدام Flickity وبعض أكواد CSS الأساسية. يعمل هذا مع كل من الأجهزة المحمولة وسطح المكتب ، لذا فهو اختيار ممتاز إذا كنت بحاجة إلى حل سريع الاستجابة.

2. رد فعل واجهة المستخدم اليومية

كتصميم تمرين بسيط ، ابتكر جاك أوليفر قلم React Daily UI من البداية. وهي واحدة من أكثر تجارب الإعداد أناقة التي رأيتها.

تتميز الواجهة بنص وهمي نظرًا لأنها غير مخصصة للاستخدام العملي الواقعي ، ولكنها نظيفة جدًا ويجب أن تترك مساحة كافية لتناسب أي شيء تقريبًا في الصفحة.

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

3. شاشات Onboarding

لا يتميز هذا القلم بواجهة رائعة للإعداد فقط ، بل يحتوي أيضًا على رسوم متحركة مخصصة للإقلاع.

يعرف المطور Jeff Ham طريقه حول الواجهة وأنشأ شاشة الإعداد النقية هذه. يعتمد على JavaScript لإنشاء الرسوم المتحركة "للشاشة التالية" وأحداث التبديل لنقرات / نقرات المستخدم.

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

4. بوردال

مقتطف Boardal هذا فريد إلى حد ما لأنه ليس شيئًا تراه كثيرًا.

يستخدم نافذة مشروطة مع محتوى داخلي لمساعدة المستخدمين في الوصول إلى الموقع بشكل أسرع. إنه تصميم مخصص تم إنشاؤه للاختبار فقط ، وهو أحد أروع الطرق لتحسين عملية الإعداد.

لاحظ أن هذا يعمل بشكل أفضل على سطح المكتب لأنه يعتمد على التأثير المشروط (ليس مثاليًا للشاشات الصغيرة).

لذا ، إذا كنت تحب التصميم وتريد طريقة سهلة لتحسين الإعداد لموقعك ، فامنح Boardal فرصة.

5. جولة إرشادية

عادةً ما يتم اعتبار الإعداد عملية خطوة بخطوة تقدم للمستخدم صفحات وميزات جديدة. لكنني شخصياً أجد الجولات المصحوبة بمرشدين أكثر فائدة.

إذا كنت تريد بدء مقتطف بسيط ، فهذه الجولة الإرشادية مثالية. يعتمد على مكونات Bootstrap ويستخدم تلميحات أدوات صغيرة مع أزرار "التالي" للتقدم في الجولة.

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

بشكل عام ، هذه هي طريقة الإعداد المفضلة لدي ، على الرغم من أن إعدادها يتطلب مجهودًا أكبر قليلاً. لكن هذا العرض التوضيحي يمنحك على الأقل نموذجًا لتبدأ به.

6. جولة مادية

إحدى طرق الجولات البديلة هي جولة التقدم التلقائي التي تسلط الضوء على ميزات محددة.

أفضل مثال وجدته هو هذا القلم الذي ابتكره جريجور آدامز. يعتمد على إرشادات المواد ويستخدم الدوائر المميزة لعرض أجزاء من الصفحة. هذه التقنية مثالية إذا كان لديك واجهات معقدة للغاية مع الكثير من الميزات.

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

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

7. Android App Onboarding

تحتاج تطبيقات الأجهزة المحمولة عادةً إلى عملية الإعداد أكثر من مواقع الويب. من الشائع لمصممي واجهة مستخدم الهاتف المحمول حشر الميزات في الشاشة الأصغر ، مما قد يربك المستخدمين بدون مقدمة موجّهة.

يعد دليل الإعداد هذا من Mat Swainson مثالًا صغيرًا ولكنه بليغ لما يمكن فعله لتطبيقات الهواتف الذكية.

يعتمد على طراز Android ، لكنه بالتأكيد ليس النمط الوحيد الذي يمكنك استخدامه. أحب الطريقة التي يدعم بها الضرب الأصلي ، والذي يعمل حتى في متصفحات الويب للجوال.

بالإضافة إلى ذلك ، يعد مؤشر التقدم الصغير في الأعلى لمسة لطيفة. بالتأكيد صفحة إعداد بسيطة ولكنها تستحق التوفير إذا كنت تبحث عن الإلهام.

8. أيوني مقدمة

هناك الكثير الذي يمكنك فعله باستخدام Ionic وهذا القلم هو أحد الأمثلة الرائعة.

قام المطور Clifford Fajardo بإنشاء مقدمة أيونية على اللوحة تعمل فقط على إطار عمل JavaScript. وهو يدعم جميع تفاعلات الأجهزة المحمولة مثل النقرات والضربات الشديدة وحتى يدعم خيارات النقرات المزدوجة إذا كنت تريد هذه الميزة.

يستخدم Ionic بشكل أساسي لتطوير الأجهزة المحمولة ، وهو يعمل جيدًا لمواقع الويب للجوال أيضًا. لا أستطيع أن أقول إن شاشة الإعداد هذه تناسب كل موقع ويب ، لكنها اختيار قوي إذا كان أكثر من 50٪ من جمهورك يأتي من الأجهزة المحمولة.

9. شكل عمودي

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

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

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

10. تلميح جولة إرشادية

إليك مثالاً آخر للجولة الإرشادية ، ولكن هذا المثال يستخدم مربع تلميح أدوات كامل مثبت في الصفحة.

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

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