عناصر واجهة المستخدم. استخدام مكتبة عناصر واجهة المستخدم

في الأساس ، بالنسبة للمحترفين ، ليس هناك ما هو أسهل من رسم تخطيط تخطيطي لموقع ويب يدويًا. تصبح العملية أكثر تعقيدًا عندما يتعلق الأمر بتصميم عناصر واجهة المستخدم (وتفاصيلها). هنا لا يمكنك الاستغناء عن الخيال والخبرة والإلهام.

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

مجموعة WebUI الخضراء

مجموعة واجهة Green WebUI Kit - تتضمن جميع العناصر التي قد تحتاجها تقريبًا - قائمة التنقل العلوية ، والأزرار (موافق ، إلغاء ، شراء الآن ، تنزيل الآن) ، ملصق بيع ، نموذج تسجيل الدخول ، شريط تمرير فارغ وعناصر اشتراك - RSS والبريد الإلكتروني و أكثر.

جميع العناصر مصنوعة بجودة عالية ، التصميم حديث. كل عنصر له طبقته الخاصة (ملف PSD) ، لذلك من الملائم جدًا العمل معهم. من حيث المبدأ ، يمكنك من ذلك رسم تصميم مثل هذه المدونة بسرعة - شريط تمرير ، هناك اشتراكات بالفعل. إذا كان علي المقارنة ، فسيكون هذا أكثر ملاءمة للصينيين.

عناصر واجهة المستخدم الصفراء

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

لسوء الحظ ، تشتمل Yellow UI Elements على عناصر أقل من Green WebUI Kit ، لذلك لا أستبعد أنه سيتعين عليك استعارة بعض العناصر من مجموعات أخرى أو الرسم بنفسك.

مجموعة Soft UI

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

واجهة مستخدم زجاجية شفافة

كما ترى من اسم المجموعة (Transparent Glass UI) والمعاينة ، فإن ميزتها المميزة هي شفافية العناصر. هذا ، أولاً ، يبدو مثيرًا للإعجاب وسيتناسب بشكل جيد مع التصميم الحديث ، وثانيًا ، سوف يتناسب مع أي لون خلفية تقريبًا. تحتوي مجموعة PSD على جميع العناصر النموذجية لواجهة الويب - القوائم المنسدلة وأزرار الاختيار والأزرار والنماذج والمنزلقات وحقول الإدخال.

أعتقد أنك ستجد شيئًا ما لنفسك من المجموعات المقدمة لعناصر واجهة المستخدم لبرنامج Photoshop. المجموعات الأولى والأخيرة جيدة بشكل خاص. أتمنى لكم تجارب ناجحة وواجهة جميلة!

ملاحظة. إذا كنت بحاجة إلى العثور على نظام مرن لمتجر عبر الإنترنت - يمكن أن تفاجئك التجارة magento بسرور من حيث إمكانيات المشروع ووظائفه وقابليته للتوسع.

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

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

عناصر واجهة المستخدم المعروضة على الموقع التجريبي عبارة عن كود html يمكنك نسخه ولصقه أينما تريد على صفحة الموقع. كمثال ، دعنا نضيف عنصر "Gears" وعناوين بأحجام مختلفة إلى الموقع.

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

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

انسخ رمز العناصر التي تهتم بها والصقها في صفحة موقعك.

في مثالنا ، قمنا بنسخ كود الرأس وكود عنصر Gears. يمكنك إجراء تغييرات على الرمز - على سبيل المثال ، إزالة نص الاختبار الموجود أسفل العنوان أو تغيير التوقيع الموجود أسفل التروس.

بعد حفظ التغييرات ، يتم عرض العناصر المطلوبة على الصفحة:

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

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

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

ارتقِ بتصميمك بأسلوب جديد وملفت للنظر مع مجموعات واجهة المستخدم الرائعة هذه.

1. UI وزن الريشة

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

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

2. مجموعة أدوات اللمس الحديثة

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

3. عمودي اللانهاية

4. مربع UI مجاني

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

5. مكونات واجهة المستخدم للتصميم المسطح

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

6. مجموعة واجهة المستخدم لبلاط المترو

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

7. Flat Rounded Square UI Kit

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

8. حزمة واجهة مستخدم تصميم مسطح

الوزن الثقيل الحقيقي (125 ميجابايت!) بين مجموعات PSD UI المماثلة. تم تصميم التصميم المسطح لمكونات المجموعة بالتفصيل بأدق التفاصيل وإثارة الإعجاب والإعداد للعمل الإبداعي. يمكن استخدام مجموعة واجهة المستخدم هذه مجانًا في كل من المشاريع الخاصة والتجارية ، إذا كان ذلك فقط من أجل الفرح ولصالح الأعمال.

10. Bootflat 1.0.1

في نهاية المراجعة ، أعرض عليك مجموعة من HTML و CSS و JS ومكونات للتطوير السريع لواجهات مواقع الويب - "Bootflat" ، المبنية على النظام الأساسي المعروف Twitter Bootstrap 3. أداة سهلة الاستخدام يتضمن مكونات إضافية ومكونات خفيفة الوزن ، ولكن مع ميزات Bootstrap الغنية. دعم HTML5 و CSS3 ، مخطط ألوان رائع وتصميم يعتمد على نمط Bootstrap 3. مستجيب Bootflat بالكامل ، مما يعني أنه لن تكون هناك مشاكل في عرض العناصر على شاشات جميع أنواع أجهزة المستخدم. جميع مكونات النظام الأساسي سهلة التوسيع والتعديل. Bootflat هو مشروع مفتوح المصدر ، لذلك لا تتردد في استخدام جميع ميزاته دون قيود وإنشاء أسلوبك الخاص.

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

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

العناصر الأساسية لواجهة المستخدم

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

نصوص (عناوين)

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

الروابط

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

أزرار

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

زر Radiobutton ومربعات الاختيار

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

نماذج

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

يظهر فجأة

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

ترقيم الصفحات

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

فتات الخبز

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

محمل

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

الجداول

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

قائمة طعام

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

يمكن البحث بسهولة عن "مؤشر png" في Google. إذا كنت تعرض الموقع على جهاز Mac (باستخدام نموذج بالحجم الطبيعي مع MacBook) ، فأنت بحاجة إلى استخدام المؤشر الأيمن ، إذا كان في جهاز كمبيوتر (على سبيل المثال ، نموذج بالحجم الطبيعي باستخدام مستكشف inernet) ، ثم المؤشر الأيسر .

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

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

ما هي مزايا استخدام عناصر واجهة المستخدم الجاهزة للموقع في المشروع؟

1. لقد تم بالفعل تنفيذ كل العمل الشاق المتمثل في محاذاة العناصر الصغيرة من أجلك.
2. الرسوم المتحركة للشكل, أزراروعناصر أخرى تم تنفيذها بالفعل وتهيئتها وفقًا للاتجاهات الحديثة في تصميم الويب.
3. كل مجموعة واجهة مستخدم HTMLالمكونات ، كقاعدة عامة ، ليست الإصدار الأول. تم تصحيح جميع JS وتعمل بشكل مستقر. في الوقت نفسه ، تم تحديد الحلول الأكثر قابلية للاستخدام لهذا العنصر أو ذاك من المجموعة تجريبيًا.

أين يمكنك استخدام مجموعات عناصر واجهة مستخدم HTML؟

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

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

وبالتالي. لاهتمامكم 20 مجموعة عناصر واجهة مستخدم HTML مجانيةلموقعك. لا تنسى الاشتراك في مواقع التواصل الاجتماعي. الشبكات.

عنصر

لطيفة جدا مجموعة أدوات HTML للموقع... يحتوي على جميع عناصر واجهة المستخدم تقريبًا ، بما في ذلك مربعات الحوار, شكلوالشبكات المخصصة لتصميم الويب والإشعارات والقوائم والمزيد. يتم إدراك جميع العناصر ورسومها المتحركة بسهولة ولا تفرط في تحميل الصفحة. استنادًا إلى Vue.js 2.0

كتل التصميم

170+ كتل HTMLلإنشاء نموذج أولي للجودة. هذا نوع من أداة إنشاء صفحات الويب التي يمكنك من خلالها إنشاء أي شيء. تتضمن المجموعة مجموعة كاملة من جميع العناصر مجتمعة في نمط واحد.

تصميم المواد لـ Bootstrap

مجاني لإطار عمل css التمهيد 3في التصميم جوجل تصميم المواد... لسوء الحظ ، لا يحتوي على نفس ديناميكيات تصميم Google Material الأصلي في Angular ، لكنه يحاول تقليده.

واجهة مستخدم مسطحة

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

مجموعة Pure UI

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

واجهة مستخدم للتصميم المسطح - HTML5 + CSS3

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

مترو UI CSS

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

المروحة

حر Material Design CSS Framework مع Bootstrap... يتضمن حوالي 25 مكونًا ، بشكل غريب ، تشبه إلى حد كبير ديناميكيات تصميم المواد الأصلية في Angular. هناك أيضا نسخة متميزة.

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

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

واجهة المستخدم الدلالية

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