قائمة

أكورديون

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

أكورديون

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

أكورديون

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

Log. Index. Recover.

The Reflex Delta Audit Kit (RDAK) streamlines your compliance processes by converting decision logs into structured, monetized audit trails swiftly. Ensure data privacy with built-in anonymization, and recapture compliance value efficiently.

🚀 In just 30 minutes, most teams surface 5–10% of latent capital buried in approvals, chats, and operational drift.

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

A frequently asked questions (FAQ) accordion UI component with three sections. The first section, labeled ‘What is this template for?’, is collapsed and has a ‘+’ icon on the right. The second section, labeled ‘Do I need coding skills to use this template?’, is expanded and displays the answer: ‘No, this template is built entirely in Framer, making it easy to customize without writing code.’ It has a ‘-’ icon on the right. The third section, labeled ‘Can I customize the template to fit my needs?’, is collapsed and has a ‘+’ icon on the right.

الأكورات مفيدة في هيكلة المحتوى بكفاءة مع الحفاظ على واجهات مستخدم بسيطة. يجب استخدامها عندما لا يحتاج المستخدمون لرؤية كل المحتوى دفعة واحدة ولكن يتطلبون الوصول السهل إلى أقسام معينة.

متى تستخدم

✅ الأسئلة الشائعة وأقسام المساعدة
✅ الصفحات ذات المحتوى الكثيف
✅ الإعدادات والتكوينات
✅ التخطيطات المخصصة للهواتف المحمولة

متى لا تستخدم

⛔️ للمحتوى الأساسي
⛔️ العديد من الأقسام المتداخلة

أفضل الممارسات

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

استخدم تسميات واضحة وموجزة
يجب أن تكون عناوين الأكورات وصفية وواضحة بذاتها، بحيث يفهم المستخدمون على الفور ما تحتويه كل قسم. تجنب العناوين الغامضة مثل “مزيد من المعلومات” — بدلاً من ذلك، استخدم “الشحن والمرتجعات” أو “المواصفات الفنية”.

A close-up view of an accordion UI component. It displays a single collapsed section labeled ‘More info’ in bold black text. On the right side, there is a black ‘+’ icon indicating that the section can be expanded.

قدم مؤشرات بصرية
استخدم أيقونات مثل الأسهم أو رموز الزائد/الناقص للإشارة إلى الأقسام القابلة للتوسيع. يساعد ذلك المستخدمين في التعرف بسرعة على العناصر التفاعلية.

A nested accordion UI component. The main section is labeled ‘Nested accordions’ and is expanded, indicated by a ‘-’ icon on the right. Inside, there are two additional collapsed accordion sections: ‘Is this okay?’ and ‘I don’t think so,’ each with a ‘+’ icon on the right, indicating they can be expanded.

حدد التداخل
تجنب وضع الأكورات داخل أكورات أخرى، حيث يمكن أن يؤدي ذلك إلى تجربة مستخدم محيرة ومربكة. إذا كنت بحاجة إلى مزيد من الهيكلة، فكر في أنماط واجهة مستخدم بديلة مثل التبويبات.

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

A frequently asked questions (FAQ) accordion UI component with three sections. The first section, labeled ‘What is this template for?’, is collapsed and has a ‘+’ icon on the right. The second section, labeled ‘Do I need coding skills to use this template?’, is expanded and displays the answer: ‘No, this template is built entirely in Framer, making it easy to customize without writing code.’ It has a ‘-’ icon on the right. The third section, labeled ‘Can I customize the template to fit my needs?’, is collapsed and has a ‘+’ icon on the right.

الأكورات مفيدة في هيكلة المحتوى بكفاءة مع الحفاظ على واجهات مستخدم بسيطة. يجب استخدامها عندما لا يحتاج المستخدمون لرؤية كل المحتوى دفعة واحدة ولكن يتطلبون الوصول السهل إلى أقسام معينة.

متى تستخدم

✅ الأسئلة الشائعة وأقسام المساعدة
✅ الصفحات ذات المحتوى الكثيف
✅ الإعدادات والتكوينات
✅ التخطيطات المخصصة للهواتف المحمولة

متى لا تستخدم

⛔️ للمحتوى الأساسي
⛔️ العديد من الأقسام المتداخلة

أفضل الممارسات

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

استخدم تسميات واضحة وموجزة
يجب أن تكون عناوين الأكورات وصفية وواضحة بذاتها، بحيث يفهم المستخدمون على الفور ما تحتويه كل قسم. تجنب العناوين الغامضة مثل “مزيد من المعلومات” — بدلاً من ذلك، استخدم “الشحن والمرتجعات” أو “المواصفات الفنية”.

A close-up view of an accordion UI component. It displays a single collapsed section labeled ‘More info’ in bold black text. On the right side, there is a black ‘+’ icon indicating that the section can be expanded.

قدم مؤشرات بصرية
استخدم أيقونات مثل الأسهم أو رموز الزائد/الناقص للإشارة إلى الأقسام القابلة للتوسيع. يساعد ذلك المستخدمين في التعرف بسرعة على العناصر التفاعلية.

A nested accordion UI component. The main section is labeled ‘Nested accordions’ and is expanded, indicated by a ‘-’ icon on the right. Inside, there are two additional collapsed accordion sections: ‘Is this okay?’ and ‘I don’t think so,’ each with a ‘+’ icon on the right, indicating they can be expanded.

حدد التداخل
تجنب وضع الأكورات داخل أكورات أخرى، حيث يمكن أن يؤدي ذلك إلى تجربة مستخدم محيرة ومربكة. إذا كنت بحاجة إلى مزيد من الهيكلة، فكر في أنماط واجهة مستخدم بديلة مثل التبويبات.

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

A frequently asked questions (FAQ) accordion UI component with three sections. The first section, labeled ‘What is this template for?’, is collapsed and has a ‘+’ icon on the right. The second section, labeled ‘Do I need coding skills to use this template?’, is expanded and displays the answer: ‘No, this template is built entirely in Framer, making it easy to customize without writing code.’ It has a ‘-’ icon on the right. The third section, labeled ‘Can I customize the template to fit my needs?’, is collapsed and has a ‘+’ icon on the right.

الأكورات مفيدة في هيكلة المحتوى بكفاءة مع الحفاظ على واجهات مستخدم بسيطة. يجب استخدامها عندما لا يحتاج المستخدمون لرؤية كل المحتوى دفعة واحدة ولكن يتطلبون الوصول السهل إلى أقسام معينة.

متى تستخدم

✅ الأسئلة الشائعة وأقسام المساعدة
✅ الصفحات ذات المحتوى الكثيف
✅ الإعدادات والتكوينات
✅ التخطيطات المخصصة للهواتف المحمولة

متى لا تستخدم

⛔️ للمحتوى الأساسي
⛔️ العديد من الأقسام المتداخلة

أفضل الممارسات

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

استخدم تسميات واضحة وموجزة
يجب أن تكون عناوين الأكورات وصفية وواضحة بذاتها، بحيث يفهم المستخدمون على الفور ما تحتويه كل قسم. تجنب العناوين الغامضة مثل “مزيد من المعلومات” — بدلاً من ذلك، استخدم “الشحن والمرتجعات” أو “المواصفات الفنية”.

A close-up view of an accordion UI component. It displays a single collapsed section labeled ‘More info’ in bold black text. On the right side, there is a black ‘+’ icon indicating that the section can be expanded.

قدم مؤشرات بصرية
استخدم أيقونات مثل الأسهم أو رموز الزائد/الناقص للإشارة إلى الأقسام القابلة للتوسيع. يساعد ذلك المستخدمين في التعرف بسرعة على العناصر التفاعلية.

A nested accordion UI component. The main section is labeled ‘Nested accordions’ and is expanded, indicated by a ‘-’ icon on the right. Inside, there are two additional collapsed accordion sections: ‘Is this okay?’ and ‘I don’t think so,’ each with a ‘+’ icon on the right, indicating they can be expanded.

حدد التداخل
تجنب وضع الأكورات داخل أكورات أخرى، حيث يمكن أن يؤدي ذلك إلى تجربة مستخدم محيرة ومربكة. إذا كنت بحاجة إلى مزيد من الهيكلة، فكر في أنماط واجهة مستخدم بديلة مثل التبويبات.

ضمان خالي من المخاطر


نحن ندعم فعالية RDAK. إذا لم تحقق عائد استثمار ثلاثي 3× بناءً على ردود الأفعال (الارتكاسات - Reflexes) المربحة خلال 60 يومًا، فسوف نقدم لك استردادًا كامل—دون طرح أي أسئلة.

تابع القراءة

تبحث عن المساهمة؟

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

Your contribution is logged in the doctrine’s audit trail—cited, versioned, and credited in the system that may govern thousands of organizations.

تبحث عن المساهمة؟

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

Your contribution is logged in the doctrine’s audit trail—cited, versioned, and credited in the system that may govern thousands of organizations.

تبحث عن المساهمة؟

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

Your contribution is logged in the doctrine’s audit trail—cited, versioned, and credited in the system that may govern thousands of organizations.