صور متحركة يسهل الوصول إليها - التصميم في المتصفح
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
مرحبًا بك في "التصميم في المتصفّح" من خلال مضيفنا Una Kravets. يمكن أن تكون اللمسات التفاعلية رائعة لفهم المستخدم في البيئة الرقمية، ولكنها يمكن أيضًا أن تجعل بعض المستخدمين يشعرون بالارتباك والإحباط، عكس التأثير المقصود.
فلنتحدث عن كيفية تجنُّب ذلك وسنحرص على تضمين رسومات SVG المتحركة التي تظهر بشكل لطيف والتمرير فوق الأزرار مع ضمان أنّ المستخدمين الذين قد يشعرون بالغثيان عند رؤية عدد كبير من الصور المتحركة أمامهم يستطيعون الاستمتاع بموقعك الإلكتروني. سنشرح كيفية استخدام استعلام الوسائط "prefers-reduced-Motion" لتحسين الرسوم المتحركة تدريجيًا في موقعك الإلكتروني، ونوضح لك كيفية إنشاء مفتاح تبديل بسيط "تقليل الرسوم المتحركة".
الروابط:
التصميم في المتصفح ← https://goo.gle/2NeLxjI
الاشتراك في "مطوّري برامج Chrome" ← https://goo.gle/ChromeDevs
arrow_back الرجوع إلى كل الحلقات
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2020-09-28 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]
{"lastModified": "\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0623\u062e\u064a\u0631: 2020-09-28 (\u062d\u0633\u0628 \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0627\u0644\u0645\u062a\u0641\u0651\u064e\u0642 \u0639\u0644\u064a\u0647)"}
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2020-09-28 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]