Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

أطقم UX و UI الأكثر Sketch ، و Photoshop ، و Illustrator ، و XD ، و Figma

by
Length:MediumLanguages:

Arabic (العربية/عربي) translation by Muhammad Viqqri (you can also view the original English article)

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

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

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

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

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

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

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

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

InVision supports Sketch and Photoshop files perfectly
يدعم InVision ملفات Sketch و Photoshop

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

Adobe XD warns you about Photoshop imports
يحذرك Adobe XD من فتح PSDs ، ولكنه جيد جدًا

يكون 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 تخطيط مسبق التحديد ، وهناك قدر معين من التفاصيل ، مما يمنحك أكثر من الدقة ، ولكن الجمالية الزرقاء الهادئة وغير المرتبكة مثالية لإطارات الأسلاك.

Wireland - Wireframe Library for Web Design Projects - Sketch Template
Wireland: مكتبة Wireframe لمشاريع تصميم مواقع الويب

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

Wirelands markup elements
Wireland’s markup elements ، لوضع العلامات والتعليق والتدفق

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

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

Website Userflow Sitemap UX Kit
Website Userflow & Sitemap UX Kit

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

Website Userflow Sitemap UX Kit dark version
موقع Userflow * Sitemap UX Kit ، النسخة المظلمة

3. (Bolder Mobile UI (Sketch

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

Bolder - Multipurpose Mobile UI KIT for Sketch
Bolder - Multipurpose Mobile UI KIT for Sketch

(Kama iOS UI Kit (Sketch

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

Kama iOS UI Kit
Kama iOS UI Kit

(Farah (Sketch,Xd,Figma

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

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

Farah - Profile UI Kit for Sketch App
فرح - مجموعة أدوات واجهة المستخدم الشخصية لتطبيق Sketch

(MIGO Dating UI Kit (Sketch, XD, Figma

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

MIGO Dating UI Kit
MIGO Dating UI Kit

7. (Stamp (Sketch

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

Customize with Stamp
Customize with Stamp

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

Stamp 100 Beautiful Web Components
Stamp – 100 Beautiful Web Components

8. (Ultramarine UI Kit (Sketch

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

Ultramarine UI Kit
Ultramarine UI Kit

9. (Next Ecommerce (Sketch, Photoshop

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

Next Ecommerce - UI Kit
Next Ecommerce - UI Kit

10. (Doom (Photoshop

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

Doom - Massive All in One PSD Pack
الموت - ضخمة الكل في واحد PSD حزمة

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

Doom - Massive All in One PSD Pack
Doom - cryptocurrency الصفحات المقصودة التصاميم

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

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

Blokk Wireframe Kit
Blokk Wireframe Kit 170 شاشات

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

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

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

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

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

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.