Apple HIG: Content Components
تصميم مكونات واجهة مستخدم Apple بثقة
هل تكافح لتنفيذ الرسوم البيانية أو المجموعات أو عروض المحتوى التي تشعر بأنها أصلية لمنصات Apple؟ تقدم هذه المهارة إرشادات واجهة الإنسان الموثوقة لمساعدتك في بناء مكونات قابلة للوصول ومتكيفة مع المنصة تتبع مبادئ تصميم Apple.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Apple HIG: Content Components". أحتاج إلى عرض بيانات أسعار الأسهم عبر الوقت في تطبيق iOS. ما نوع الرسم البياني الذي يجب استخدامه؟
النتيجة المتوقعة:
لبيانات أسعار الأسهم عبر الوقت، استخدم رسمًا بيانيًا خطيًا مع علامات خطية. تتفوق العلامات الخطية في عرض كيفية تغير القيم عبر الوقت وتساعد الأشخاص على تصور الاتجاهات. قم بتكوين الرسم البياني الخاص بك بنطاق محور Y ديناميكي لتملأ البيانات مساحة الرسم، وتأكد من تقديم تسميات إمكانية الوصول لكل نقطة بيانات. فكر في إضافة دعم Audio Graphs ليتمكن مستخدمو VoiceOver من سماع الاتجاه. راجع charts.md للحصول على تفاصيل التنفيذ الكاملة.
استخدام "Apple HIG: Content Components". كيف أنفذ عرض مجموعات لـ tvOS؟
النتيجة المتوقعة:
على tvOS، تستخدم المجموعات lockups كبيرة مع تأثيرات المنظر وتخطيطات الأرفف. إدارة التركيز أمر بالغ الأهمية - يجب أن تكبر العناصر وتكتسب عمقًا عند التركيز. استخدم UICollectionView مع التخطيط التكويني، وتأكد من أن محرك التركيز يتبع نمط التنقل المتوقع. تحتوي lockups عادةً على صورة مع تراكب نص. راجع lockups.md للحصول على الأنماط الخاصة بـ tvOS و collections.md لتكوين التخطيط.
التدقيق الأمني
آمنDocumentation-only skill containing Apple Human Interface Guidelines in Markdown format. No executable code, no runtime behavior, and no security risks. All static analysis findings are false positives from Markdown content (inline code blocks, documentation URLs, and legitimate UI terminology).
درجة الجودة
ماذا يمكنك بناءه
مطور iOS يبني لوحة بيانات
يحتاج مطور iOS إلى عرض بيانات تتبع اللياقة البدنية في رسوم بيانية. تساعده هذه المهارة في الاختيار بين علامات الأعمدة والخطوط وتكوين نطاقات المحور وتنفيذ إمكانية الوصول للرسوم البيانية الصوتية.
مصمم UI/UX ينشئ واجهة tvOS
المصمم يبني تطبيق تصفح وسائط لـ Apple TV. توفر هذه المهارة إرشادات حول مكونات lockups وتأثيرات التركيز وتخطيطات الأرفف الخاصة بـ tvOS.
مطور عبر المنصات يضمن إمكانية الوصول
يحتاج المطور إلى ضمان عمل عرض المجموعات بشكل صحيح مع VoiceOver و Switch Control عبر جميع منصات Apple. توفر هذه المهارة متطلبات إمكانية الوصول وإرشادات الاختبار.
جرّب هذه الموجهات
أحتاج إلى عرض [content type] في تطبيق [platform] الخاص بي. ما المكون الذي يجب استخدامه ولماذا؟
كيف أجعل [component] في متناول مستخدمي VoiceOver؟ ما التسميات والأوصاف التي أحتاجها؟
كيف يتصرف [component] بشكل مختلف على [platform] مقارنة بـ [other platform]؟ ما التكيفات التي أحتاج إلى إجرائها؟
ما الخصائص الرئيسية التي يجب تكوينها لـ [component]؟ ما أفضل ممارسات الأداء وإمكانية الوصول؟
أفضل الممارسات
- تحقق دائمًا من سياق التصميم الموجود في `.claude/apple-design-context.md` قبل طرح الأسئلة - تبني هذه المهارة على إرشادات اللون والطباعة وإمكانية الوصول الأساسية
- فكر في السلوك الخاص بالمنصة مبكرًا - قد تحتاج المجموعة التي تعمل على iOS إلى تكيف كبير لـ tvOS (lockups) أو visionOS (تأثيرات العمق والتمرير)
- صمم إمكانية الوصول من البداية - تحتاج الرسوم البيانية إلى دعم audio graph، والصور تحتاج إلى نص بديل، وجميع المكونات تحتاج إلى تسميات VoiceOver مناسبة
تجنب
- لا تختر مكونًا بناءً على المظهر البصري فقط - ضع دائمًا في اعتبارك متطلبات إمكانية الوصول واصطلاحات المنصة وخصائص البيانات
- تجنب تنفيذ مكونات مخصصة من الصفر عندما توفر مكونات النظام (Swift Charts أو UICollectionView أو WKWebView) إمكانية الوصول المدمجة والتكيف مع المنصة
- لا تتخطى الحالات الفارغة - الشاشات الفارغة تربك المستخدمين؛ قدم إرشادات ذات مغزى حول كيفية تعبئة المجموعات الفارغة أو عروض البيانات
الأسئلة المتكررة
ما الفرق بين عرض المجموعات وعرض الجدول؟
هل يجب استخدام WKWebView أم SFSafariViewController؟
كيف أختار بين علامات الأعمدة والخطوط والنقاط في الرسوم البيانية؟
ما هي lockup ومتى يجب استخدامها؟
هل أحتاج إلى دعم جميع منصات Apple المذكورة؟
ما الحد الأدنى من إمكانية الوصول التي أحتاج إلى تنفيذها للرسوم البيانية؟
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-contentمرجع
main
بنية الملفات