أفكار واتجاهات رائعة لأدوات نشر ميزة البارزة

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

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

التباين المطبعي

تعتمد معظم المشاركات المميزة على الصور المصغرة للفت الانتباه. هذا غالبًا ما يأخذ شكل صورة خلفية مرتبطة بكل عنوان مقال.

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

The Next Web هي مجلة كبيرة على الإنترنت تحتوي على عنصر واجهة مستخدم بارز على الصفحة الرئيسية. كل صورة مصغرة تختلف في الحجم لكنها تستخدم كل شيء التدرجات الداكنة لتحسين التباين.

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

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

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

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

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

ولكن إذا كنت تحب نمط تصميم نص العنوان في الجزء العلوي من الصورة المصغرة ، فأنت تريد النظر في كيفية عوامل التباين في المعادلة.

أحجام الصور المتفرقة

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

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

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

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

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

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

أنماط الصور المصغرة المخصصة

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

يؤثر نمط كل صورة مصغرة على كيفية ظهور الأداة بالكامل لجمهورك. خذ على سبيل المثال نمط القطعة المميز الموجود على The Verge.

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

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

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

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

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

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

متعدد بوست الحاجيات

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

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

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

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

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

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

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

يتم إحتوائه

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

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