AMP

أفضل الممارسات لإنشاء قصة ويب ناجحة

Important: this documentation is not applicable to your currently selected format websites!

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

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

لمحة سريعة

فيما يلي النقاط الرئيسية لإنشاء قصة ويب مُرضية وسهلة وسريعة:

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

اعرف قصتك جيدًا

خطط لمقدمة القصة، وأنشئ موضوعًا واحدًا وابنِ قصة كاملة. وبمجرد أن تعرف ما تريد قوله، قسّمه. ويجب أن تنقل كل صفحة بقصة الويب فكرة واحدة تعمل بشكل متماسك مع الأخرى.

محتوى أنيق ومُرضٍ

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

شاهدني! طريقة التقديم

صفحة غلافك هي طريقة تقديم قصة الويب خاصتك. فهي أول ما يراه المشاهدون، وإذا لم يفتحوها، فستكون هي الشيء الوحيد الذي سيرونه. لذا تأكد من أنها جذابة! وتحتوي صفحة الغلاف الجيدة على عنصرين: صور ملفتة للنظر وعنوان قصير لا يُنسى.

التصوير

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

العنوان

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

العلامة التجارية والتاريخ

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

عرض المرئيات

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

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

الفيديو

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

يتم استهلاك قصص الويب في الوضع العمودي، لذا ضع في اعتبارك ما يلي:

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

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

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

الصور

استخدم الصور العمودية في وضع ملء الشاشة بدقة جيدة (828 × 1792).

تجنب الصورة الأفقية التي تم اقتصاصها.

الاقتصاص بعناية

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

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

النص

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

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

كلمات مقتطفة

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

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

قد تكون الصفحة ذات المحتوى النصي أطول من جملة واحدة أمرًا لا مفر منه. فحاول ألا تدع هذه المقالات تشغل أكثر من 10٪ من إجمالي صفحات القصة.

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

الرسوم المتحركة

تكون الرسوم المتحركة مشجعة للمشاهدة عندما يتم إجراؤها لغرض، مثل إضافة الحركة إلى الصور الثابتة. ويمكنك تحريك الصور والموجودات باستخدام تأثيرات التحرك للداخل أو التدوير أو الظهور التدريجي.

افعل لا تفعل
تساعد الحركة في هذا المثال في دعم الفكرة الرئيسية وتضيف عنصرًا ديناميكيًا إلى الصفحة. هذه الصفحة الثابتة فعالة، ولكنها قد تفقد فرصة أن تكون أكثر جاذبية للقراء.

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

التوقيت هو كل شيء

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

افعل لا تفعل
تأثير التحريك والتكبير / التصغير (Ken Burns) على صورة الخلفية خفي ويجعل التجربة غامرة أكثر. وهو يخلق توازنًا صحيحًا مع تراكب النص. هنا، يكون تأثير التحريك والتكبير / التصغير (Ken Burns) سريعًا جدًا. والحركة تشتت الانتباه وتجعل من الصعب التركيز على العنوان الرئيسي.

ضع في اعتبارك أن تكون مبدعًا عند استخدام التحريك. ويُفضل تحريك عناصر متعددة في تسلسل، بدلاً من جعلها تتحرك معًا في تأثير واحد. ويمكن أن يكون للعناصر تأثيرات ومدد مختلفة تعمل من أجل تحقيق رسم متحرك متماسك.

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

الاقترانات المثالية

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

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

متشوق للمزيد

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

التضمينات الاستراتيجية

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

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

إرفاق محتوى إضافي

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

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

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

افعل
يمكن أن يكون مقطع الفيديو المميز عنصرًا مفيدًا في قصة AMP. ويمكنك تضمين مقطع فيديو بطوله الكامل كمرفق، مما يمنح القراء خيار التعمق في المحتوى الخاص بك.

روابط لمواقع جديدة

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

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

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

رمز أو إنشاء

يمكن ترميز "قصص الويب" يدويًا من البداية أو إنشاؤها باستخدام أدوات الإنشاء .

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