أوتش من ICONS8: مكتبة الأنماط التي تتصرف مثل النظام

ملخص تنفيذي

تريد صوتًا مرئيًا واحدًا عبر المنتج والويب والبريد الإلكتروني والمستندات والإعلانات. أنت أيضًا تريد الشحن في الموعد المحدد. لا يتم قياس الفن المخصص لكل شاشة. صور الأسهم تتصادم. أوتش يحل هذه الفجوة مع العائلات الأنيقة. كل عائلة عبارة عن لغة بصرية صغيرة يمكنك اعتمادها في يوم واحد وتمتد لأشهر. المردود بسيط. تتوقف الشاشات عن الظهور متماسكة معًا وتبدأ في القراءة كمنتج واحد.

ما السفن في المربع

يقوم Ouch بتجميع العمل الفني في أنماط متماسكة. داخل النمط، تتشارك الأحرف والكائنات والخلفيات في النسب ووزن الخط وإيقاع التباعد ومنطق الألوان. يتم دمج القطع بدون طبقات. يمكنك الحصول على مشاهد بطولية للصفحات المقصودة، ومشاهد متوسطة للتوضيحات، ونقاط صغيرة للفراغ والخطأ والنجاح، بالإضافة إلى خلفيات محايدة تحافظ على التخطيطات مرتبة. تصل الملفات بتنسيق SVG عندما تحتاج إلى التحكم وPNG عندما تحتاج إلى إدخالها. وكلاهما يتحمل شاشات العرض الكثيفة.

كيف تستخدمها الفرق فعليًا

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

تسويق. بطل واحد يرسخ الحملة. المحاصيل جاهزة للإطارات المربعة والرأسية والأفقية. تحمل الشخصية أو الدعامة المتكررة التعرف عبر القنوات. يستخدم البريد الإلكتروني PNG مع ضغط محكم. الاجتماعية تحصل على نفس الفكرة بنسب مختلفة.

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

تناسب داخل نظام التصميم

تعامل مع نمط Ouch كنظام فرعي بجوار الكتابة والرموز المميزة والأيقونات والشبكة. امنحه منزلًا مستقرًا ومجموعة قواعد من صفحة واحدة.

 /العلامة التجارية/المرئيات/

  /أوتش-نمط-أ/

    التمهيدي.md

    tokens.json

    بطل/

    مشاهد/

    البقع /

    الخلفيات/

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

اختر بالأدلة وليس بالذوق

أنشئ أربع شاشات حقيقية باستخدام نسختك وتخطيطك. مبادلة الفن فقط.

1. بطل الصفحة الرئيسية
2. وسيلة شرح التسعير
3. الخطوة الأولى
4. حالة واحدة فارغة في المنتج

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

مجموعة المبتدئين التي تفتح الطريق أمام التسليم

قم بتجميد مجموعة صغيرة للإصدار التالي بحيث تستخدم كل تذكرة نفس الكتل.

• بطل واحد للموقع أو الميزة الرئيسية
• مشهدان متوسطان للمنتج والمحتوى
• ثلاث نقاط للفراغ والنجاح والخطأ
• خلفية واحدة تعمل على تخطيط الوسادات دون سرقة التركيز

في منتصف المشروع، سيسأل زملاء الفريق عن مكان التصفح وتأكيد التغطية. ضع مؤشرًا نظيفًا في المكان الذي سيظهر فيه أثناء المراجعة: رسم توضيحي.

إمكانية الوصول التي تنجو من مراجعة التعليمات البرمجية

تساعد الصور فقط عندما يتمكن الجميع من استخدام الصفحة. بناء الشيكات في طلبات السحب.

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

 <svg role = "img" aria-labeledby = "td" width = "512" height = "256">

  <title>فريق تحديد أهداف التحليلات</title>

  <desc>يقوم الزملاء بنقل المخططات والملاحظات اللاصقة بينما يقوم آخر بالتحقق من النتائج</desc>

</svg>

التباين والدولة. عندما يحتوي العمل الفني على نص أو يستخدم لونًا للمعنى، اتبع نسب WCAG 2.2. اربط عمليات التعبئة والضربات بنفس الرموز المميزة التي تستخدمها التنبيهات والأزرار، بحيث يتم قراءة النجاح والخطأ بنفس الطريقة في الرسم وواجهة المستخدم.

التمثيل. تفضل الشخصيات الشاملة والأنشطة اليومية. تجنب الكليشيهات. اختبر مع مجموعة صغيرة تعكس جمهورك.

الأداء الذي يحمل في ظل حركة المرور

الصور ثقيلة. عاملهم كرمز بميزانية محدودة.

• تفضل SVG عندما لا يكون الملمس ضروريًا
• قم بتصدير PNG فقط بالحجم الذي تقدمه
• قم دائمًا بتعيين العرض والارتفاع لمنع تغيير التخطيط
• تحميل كسول أسفل الطية
• قم بقياس أكبر رسم محتوى على الصفحات الحقيقية

النقطية المستجيبة بدون إطار:

 <صورة>

  <نوع المصدر = "صورة/أفيف">

  <نوع المصدر = "صورة/ويب">

  <img src="/hero-ouch.png" alt="الزملاء يراجعون التحليلات" width="1280" height="720"load="eager">

</صورة>

SVG المضمّن مرتبط بمتغير السمة:

<نمط>

  :الجذر { --لكنة: #2563eb }

  @media (يفضل نظام الألوان: داكن) { :root { --accent: #7c3aed } }

  .hero [لكنة البيانات] { ملء: var(--لكنة) }

</نمط>

<svg class = "hero" role = "img" aria-labeledby = "ab" width = "480" height = "240">

  <title>مخطط النمو يتجه نحو الأعلى</title>

  <desc>خط صاعد عبر شبكة بسيطة</desc>

  <مسار البيانات-لكنة = "" d = "M10 200 L120 140 L220 160 L360 80" ملء = "لا شيء" السكتة الدماغية = "فار(--لكنة)" عرض السكتة الدماغية = "6"/>

</svg>

كتب اللعب القائمة على الأدوار

الويب وتجربة المستخدم

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

التسويق وSMM

أنشئ شبكة اجتماعية ذات إطارات مربعة ورأسية وأفقية. قم بقص المشاهد مسبقًا لتلك النسب وقم بتخزين المتغيرات بجوار الموجز. احتفظ بشخصية أو دعامة متكررة واحدة عبر السلسلة للتذكير. يستخدم البريد الإلكتروني PNG مع ضغط مدروس لأن العملاء ما زالوا يختلفون.

المطورين

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

تعليم

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

الشركات الناشئة والشركات الصغيرة

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

الحوكمة التي تمنع الانجراف

إضافة قائمة مرجعية لسحب الطلبات.

• النص البديل موجود عند الحاجة
• تم وضع علامة على الصور الزخرفية بشكل صحيح
• تم تعيين الأبعاد لتجنب تغيير التخطيط
• حجم الملف ضمن ميزانية الصفحة
• تم التحقق من LCP على الصفحة المستهدفة

القواعد الصغيرة تتغلب على إعادة البناء الكبيرة.

المقاييس التي تثبت القيمة

• مشاركة الحمولة من صورة البطل قبل وبعد التبديل إلى SVG حيثما كان ذلك ممكنًا
• اتجاه LCP على الصفحة المقصودة الرئيسية بعد الطرح
• عدد علامات المراجعة للصور غير المتناسقة عبر ثلاث جولات سريعة
• ساعات من الموجز إلى النموذج المعتمد لأول مرة للحملة

الحدود التي تخطط حولها

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

الترخيص وحفظ السجلات

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

خلاصة القول

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

مراجع

• وثائق W3C WAI لـ WCAG 2.2 حول بدائل النص والتباين
• وثائق MDN لإمكانية الوصول إلى SVG وتضمينها
• يرشد Web.dev الصور سريعة الاستجابة وأداء الصورة
• بحث مجموعة NN حول التواصل البصري والفهم في تجربة المستخدم
• إرشادات توضيحية في Shopify Polaris وGoogle Material Design