الأزرار
عرض للحالات اللونية للأزرار المستخدمة في المشروع
عينة بصرية للمقارنة بين الحالات، وقد تختلف بعض التفاصيل عن المكون في التطبيق.
PathPilot / مكتبة الواجهة
نظام التصميم
تصفح جميع العناصر والتأثيرات البصرية في لوحات واضحة. جرّب الحالات المختلفة وقارن بينها مباشرة، مع الاحتفاظ بكل ما ورد في المشروع الأصلي.
مكتبة مستقلة · PathPilot للقراءة فقط
01 / الألوان
ألوان المشروع الأصليةلوحة الألوان الأساسية
الألوان الرئيسية والمحايدة والمساعدة
02 / الخطوط
العربية والإنجليزيةInstrument Sans
عرض لأوزان وأحجام الحروف الإنجليزية
Tajarib / تجارب
معاينة الخط العربي وقد يستخدم خطا بديلا عند عدم توفر تجارب
نظام التصميم
تصميم واضح ومنظم
العناصر والألوان والخطوط والحالات المختلفة
03 / المكونات
المكونات مرئية وقابلة للتجربةزر الأيقونة
.icon-button · editor.css
مفتاح التبديل
مفتاح تبديل متفاعل بحالتين
غير نشط
نشط
شريط التحكم
شريط للتحكم بقيمة محددة
الحقل الرقمي
حقول رقمية للتعديل المباشر
مجموعة الخصائص
مجموعة خيارات مترابطة
الفحصالظهور
الأنماط الجاهزة
ستة أنماط بألوانها الأصلية
بطاقة الخصائص
بطاقة قابلة للتفعيل
مساحة المعاينة التفاعلية
04 / حالات التفاعل
قارن وجرب الحالاتمقارنة الحالات
الحالة العادية وعند مرور المؤشر والمحددة والمعطلة
عادي
محدد
مرر المؤشر
معطل
التحكم بالتشغيل
تشغيل أو إيقاف المعاينة
05 / مكتبة المكونات
جميع أسماء المكوناتجاري تحميل المكونات…
هذه المكونات موثقة من الملفات الأصلية، وليس كلها معروضة حاليا كمكونات React مباشرة. استعرض جميع المكونات →
06 / المراجعة والمشكلات
عرض التكرارات والعناصر غير المرتبطة07 / التدرجات اللونية
معاينات مرئية من التنسيقات الأصليةتدرج منطقة الرفع
تدرج شعاعي مزدوج مع خلفية ناعمة، كما هو مستخدم في منطقة رفع الملفات.
اختر العمل الفني
أزرق سماوي وبنفسجي مع طبقات شفافة
.drop-zone · global.css
تدرج نافذة الفحص
بنفسجي خطي مستخدم في نتيجة الفحص.
نتيجة التحليل
24.8 pxمعاينة لمنطقة القياس
.check-evidence · check.css
تدرج الخريطة الحرارية
الأصفر إلى الوردي لتمثيل تغير الانحناء، وليس لونا عاما للواجهة.
تغير خفيفتغير قوي
.check-legend .is-heat
تدرج خلفية المحرر
هالة بنفسجية خفيفة فوق خلفية شبه بيضاء.
لوحة المحرر
.app-shell.is-editor · global.css
تدرج الشعار المتحرك
ألوان تتتابع داخل رمز القلب في الفوتر الأصلي.
Designed with ♥
for all creative minds
.shakl-heart · global.css
08 / الزجاج والشفافية
Glass · Blur · Transparencyالشريط الزجاجي العائم
شفافية بيضاء وBlur بقدر 22px مع معالجة تشبع للخلفية.
اضغط للمقارنة
.check-topline · check.css
اللوحة الزجاجية
طبقات شبه شفافة وحدود خفيفة مع ضبابية الخلفية.
إعدادات الفحصمحتوى خلف لوحة شفافة
.check-stage / .check-review
التأثيرات الشفافة مقارنة بالمصمتة
يمكنك مقارنة لوحتي الزجاج بالمظهر دون Blur.
شفاف
مصمت
معاينة مقارنة وليست مكونا مستقلا
09 / العلامات والمؤشرات
Markers · الأدلة · Path analysisالتعامل مع المسارات ونقاط التحكم
عرض تفاعلي لشكل Anchor وHandle ونقطتي البداية والنهاية كما تحددها ملفات PathOverlay وSettings. المسار تجريبي للتوضيح.
Anchor Handle Start End
PathOverlay.tsx · الإحداثيات تجريبية
علامات فحص العمل الفني
أشكال المفتاح التوضيحي من ملف Artwork Check، بما فيها مؤشر البداية والزوايا والانحناء.
نقطة ناعمة زاوية بداية المسار الانحناء السماكة
.check-legend · check.css
أنواع الشبكات
معاينات الشبكة glyph كما تظهر في خصائص المحرر.
مربعة
شعاعية
مائلة
.grid-glyph · editor.css
خلفيات شبكة العمل
النسخة الفاتحة والداكنة من شبكة Canvas.
Light
Dark
.canvas-grid · editor.css
نقطة الميزان
عرض لشكل النقطة المعينية المستخدم في قياسات Mizan.
MizanOverlay.tsx · رسم توضيحي