7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UX

UX في 60 ثانيه: استخدام مكتبات المكونات

Scroll to top
Read Time: 1 min

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

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

مكتبات المكونات في 60 ثانيه

كل تفاعل يقوم به المستخدم يجب عليه تذكره مما يصعب الامر عليه خاصة اذا كانت الواجهة بها عنصران يحملان نفس الشكل مع اختلاف الوظيفه او الحدث. مما يجعل المستخدم يتسال "لماذا هم مختلفين؟" "هل سيحدث نفس الشئ اذا ضغطت كلا الزرين؟"

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

استخدام Sketch

عمليا، يمكنك تصميم الرموز في مشروع اسكتش او حتى باستخدام اضافة Craft من InVision حتى تحصل على افضل نتيجة يجب ان تكون على اتصال بالمطور كي يكون تعريف المتغيرات واحد في الكود.

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

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

عناصر الواجهة المذكورة

ربما لاحظت في الفيديو اننا ذكرنا ادتان لواجهة المستخدم ؛احصل عليهم الآن عند اشتراكك في منصة عناصر Envato!

Simple

ما يزيد عن 100 ملف فوتوشوب قابل للتعديل مصممة اعتمادا على الفيكتور. الطبقات مجمعة ومنظمة تنظيماً جيدا، والعناصر سهلة التغيير والتعديل، فضلا عن التلاعب بالالوان.

Simple Flat UI KitSimple Flat UI KitSimple Flat UI Kit

Zoomie

تطبيق اجتماعي مصمم لبرنامج Sketch: كل الشاشات و الرسومات مرتبة ومنظمة.

ZoomieZoomieZoomie

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.