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

ما هي مجموعات UX و UI؟

تعد المجموعات التالية طريقة رائعة لتجعل عملية التصميم تتدحرج. يمكن أن تكون بمثابة مصدر إلهام ، وسيلة لتقديم فكرة سريعة إلى العميل ، أو تعطيك العظام العارية لتصميم كامل. تتوفر عادةً لـ Sketch و Adobe Illustrator وغيرها ، ويتم توفير المجموعات بطريقة منطقية مع اللوحات الفنية والأنماط والرموز ، لمساعدتك في العثور على العناصر التي تبحث عنها والعمل معها.

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

• 
  Sketch
  كيفية تنظيم أنماط الرسم والرموز مثل المحترفين
  Adi Purdila
• 
  Sketch
  نصائح الكفاءة للعمل مع رسم لوحات فنية وطبقات
  Adi Purdila
• 
  Wireframing
  دليل المبتدئين إلى Wireframing
  Winnie Lim

تطبيقات التصميم المدعومة

كل مجموعة مدرجة هنا متوافقة مع واحد على الأقل مما يلي ، وعادة ما يكون أكثر:

• Sketch
• Adobe Photoshop
• Adobe Illustrator
• Adobe XD
• Figma
• InVision

في الوقت الحاضر ، يمكنك فتح ملف Sketch في Sketch (بشكل واضح) و Adobe XD و Figma و InVision دون أي مشاكل.

سيتعامل Adobe XD أيضًا مع ملفات Photoshop ، مع الحفاظ على اللوحات الفنية والطبقات والممتلكات على أنها صحيحة للأصل قدر الإمكان.

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

هل UX وUI هي نفسها؟

غالبًا ما يتم استخدام المصطلحين UX و UI بالتبادل. في حين أن هناك بعض التبادل ، ويعمل الإثنان معًا ، فإنهما لا يعنيان الشيء نفسه.

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

يمكن أن تخدم مجموعات UX و UI كلا الغرضين ، وهذا هو السبب في أنها غالبًا ما تسمى بشكل جماعي 'مجموعات UX و UI Kits'.

UX و UI Kits على Envato

لدينا المئات من مجموعات UX و UI على Envato market وعلى Envato Elements (حيث يمكنك تنزيل العدد الذي تريده بسعر منخفض واحد). دعونا ننظر إلى بعض من الأكثر شعبية!

1. (Wireland (Sketch

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

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

2. Userflow & Sitemap (في Photoshop و Illustrator)

يعتبر تصميم تدفق المستخدم جزءًا مهمًا حقًا من عملية التصميم. يحدث في وقت مبكر ، ويحدث بسرعة. موقع الويب Userflow * ملف Sitemap UX Kit يحتوي على جميع العناصر التي قد تحتاج إليها للقيام بذلك: مجموعة من الشاشات والرسومات لتتمكن من تنسيق كيفية نقل المستخدمين من جزء واحد من موقع إلى آخر.

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

3. (Bolder Mobile UI (Sketch

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

(Kama iOS UI Kit (Sketch

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

(Farah (Sketch,Xd,Figma

Farah تضرب بجدية. لديها 15 تخطيطات للهاتف المحمول عالية الدقة ، وكلها قابلة للتجزئة بالكامل ، وكلها ذات طابع معاصر للغاية. إنها إضافة جديدة نسبيًا لسوق إنفاتو ، مما يعكس الطلب الحالي على العديد من تطبيقات التصميم من خلال تقديم الطعام خصيصًا لمستخدمي Sketch و XD و Figma.

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

(MIGO Dating UI Kit (Sketch, XD, Figma

MIGO هو تصميم جريء وحيوي آخر من خلال hoangpts. هذا هو التطبيق الذي يرجع تاريخه ، وسوف تعطي التصاميم الخاصة بك الألوان البرية والتدرجات ، والترحيب بالدفرة المستديرة في كل مكان. يحتوي على 22 شاشة عالية الجودة (جاهزة لشاشة iPhoneX) ، وهو متوافق مع Sketch و XD و Figma ،

7. (Stamp (Sketch

ختم هو خيار آخر مرحبا الدقة ، ويقدم للمصممين أكثر من 75 'بطاقات' تخطيط ، بنيت مع أكثر من مائة مكونات مختلفة.

يمكنك التخصيص باستخدام الطابع ، بدلاً من الإنشاء من البداية ، وستحصل سريعًا على تصميم ويب كامل وعصري.

8. (Ultramarine UI Kit (Sketch

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

9. (Next Ecommerce (Sketch, Photoshop

إذا كنت تستمتع ببناء تصميماتك في Photoshop ، فستمنحك التجارة الإلكترونية التالية ذلك الاختيار. مع 35 PSD Sketch Files ، هناك الكثير من عناصر واجهة المستخدم المتنقلة للعب معها.

10. (Doom (Photoshop

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

يشتمل Doom أيضًا على مجموعة كاملة من تصميمات موقع cryptocurrency (إذا كان ذلك هو الشيء الذي تستخدمه) ، لذا إذا كنت تصمم صفحة مقصودة للعملة الكبيرة التالية ، فسيكون هذا مكانًا رائعًا للبدء!

11. Block Wireframe Kit (برنامج فوتوشوب)

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

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

1. معرض الوسائط
2. ملامح
3. دعوة للعمل
4. مدونة
5. التجارة الإلكترونية
6. شهادة
7. جداول التسعير
8. إعرابي

انتزاع مجموعة UX / UI اليوم!

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

جميع المنتجات المدرجة هنا متوفرة في Envato Market ، ولكن لا تنسى إطلاعك على العروض الضخمة على Envato Elements أيضًا!

• 
  Wireframing
  20 يجب أن يكون لديك قوالب إطار سلكي ومجموعات واجهة المستخدم لمكتبة التصميم الخاصة بك
  Brittany Jezouit

سنجري تحديثًا منتظمًا لهذه القائمة

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