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

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

by
Difficulty:BeginnerLength:ShortLanguages:

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

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

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

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

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

استخدام Sketch

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

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

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

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

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

Simple

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

Simple Flat UI Kit

Zoomie

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

Zoomie

Advertisement
Advertisement
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.