۷ راه جالب برای نمایش خلاصه مطلب

خلاصه‌های یک مطلب در وبسایت می‌توانند نقش بسیار مهمی را در زمینه تجربه کاربری ایفا کنند. آن‌ها به کاربر مزه کلی محتوا را می‌دهند – چیزی که آن‌ها را ترغیب برای کلیک کردن روی آن و خواندن کامل پست می‌کند. اغلب سیستم‌های مدیریت محتوا مانند وردپرس به شما قابلیت ایجاد چنین قسمت‌هایی را در وبسایت و توانایی نمایش تعداد خاصی از کلمات را می‌دهند. 

اما این موضوع وقتی به مسئله استایل‌دهی و کارکرد می‌رسد، کمی پیچیده و سخت می‌شود. درست به همین دلیل است که ما در این مطلب سعی کرده‌ایم که یک‌سری از این موارد را که می‌توانید در صفحه اصلی وبسایت استفاده کنید، با شما به اشتراک گذاشته‌ایم. قطعه کدهای زیر به شما برای نمایش این خلاصه‌ها کمک می‌کنند و همچنین به شما این قابلیت را می‌دهند که بتوانید با همدیگر ترکیب‌شان کنید و یا اینکه تنظیماتی روی آن‌ها اعمال کنید. بیاید نگاهی به آن‌ها بیاندازیم.

۱. تب‌های خلاصه

وقتی که فضای شما در صفحه محدود است استفاده از تب‌ها برای نمایش اطلاعات یکی از راهکاری بسیار خوب است. برای مثال از این مورد در نمایش مطالب یک دسته‌بندی خاص استفاده می‌شود. این مثال پیاده‌سازی شده است در قطعه کد زیر می‌توانید ببینید که در هر دسته‌بندی یک نوشته همراه با خلاصه آن قرار گرفته شده، اگر کمی در کدنویسی آن تغییر ایجاد کنید می‌توانید به ازای هر دسته‌بندی تعداد مطالب بیشتری را وارد کنید.

۲. اسکرول برای نمایش کامل محتوا

یکی از تکنیک‌هایی که امروزه مشاهده می‌کنیم قرار دادن قسمت‌های خلاصه در خود صفحه مقاله است. در این قطعه کد ما می‌توانیم خلاصه مطلب را در حین اسکرول برای رسیدن به مقاله مشاهده کنیم. در پیاده‌سازی این قطعه کد از جاوااسکریپت استفاده شده است. با استفاده از این تکنیک قسمت نمای کاربر تا زمانی که به مقاله محدود نمی‌شود، خلاصه نمایش می‌یابد اما وقتی به قسمت مقاله رسید، قسمت خلاصه پنهان می‌شود. این کار ما را برای قرار دادن یکسری افکت‌های نمایشی زیبا قادر می‌سازد.

۳. همه چیز در کاردها

کاردهای محتوایی یکی از راه‌های بسیار محبوب برای نمایش اطلاعات در رابطه با لیستی از مقالات است. آن‌ها هوشمندانه طراحی شده اند و محتوا را بسیار منظم و فشرده نشان می‌دهند. جدای از آن آن‌ها یک جداسازی بصری زیبا را بین مطالب برقرار می‌کنند که باعث می‌شود خواندن مطلب برای کاربران ساده تر شود. چیزی که در مورد این طرح بسیار شگفت انگیز است این است که بجای انتقال به صفحه‌ای دیگر برای خواندن ادامه مطلب، در همان قسمت کل مطلب نمایش داده می شود. استفاده از اسکرول‌بار نیز این طرح را بسیار بهتر ساخته، این مورد احتمالا برای محتوایی با اندازه کم انتخاب بسیار مناسبی است.

۴. آشکار شدن با CSS

یک تصویر مرتبط و مناسب می‌تواند انتخاب بسیار مناسبی برای جذب کردن مخاطبان به یک مقاله باشد. اگر وبسایت شما روی تصاویر شاخص تمرکز دارد، بنابراین این نمونه می‌تواند برای شما خیلی کارآمد باشد. این طرح از سی‌اس‌اس برای نمایش خلاصه محتوا در زمانی که روی تصویر هاور می‌کند، استفاده می‌کند. ممکن است این طرح برای هر وبسایتی مناسب نباشد اما میزان قدرت تعاملی بودن بیشتری را به تصاویر بخشیده است. 

۵. نگاهی پدیداری

رویکردی متفاوت از هاور را می‌توانید در این مثال مشاهده کنید. جدای از اینکه از یک لایه‌بندی کاردی با چند سطح مختلف استفاده می‌کند، بیشتر حس یک وبلاگ سنتی را می‌دهد. این نمونه می‌تواند با عناوین بزرگ‌تر و طول بیشتر کلمات بهتر عملکرد از خود نشان دهد. 

۶. مقدمه‌ای تمام صفحه

در این مثال می‌توانیم یک صفحه مقاله را مشاهده کنیم که همراه با عنوان، خلاصه و یک تصویر اصلی ارائه می‌شود. با اسکرول کردن به سمت پائین محتوای اصلی مقاله نمایش داده می‌شود. برای محتوایی که طولانی هستند، چنین شیوه‌ای از نمایش واقعا عالی‌ست.

۷. قرار گرفته در نقطه‌ای حساس

در نگاه اول خلاصه‌های زیر به نظر بسیار زیبا می‌آیند. اما جادوی اصلی این طراحی زمانی است که روی یکی از مقاله‌ها هاور می‌کنید. مقاله انتخاب شده، بزرگ می‌شود و دیگر موارد با یک رنگ تیره مخفی می‌شوند. این تکنیک برای متمایز کردن محتوا و زیبا نشان دادن آن‌ها انتخاب بسیار خوبی است.

بیشتر از کلمات

مثال‌های بالا این موضوع را اثبات می‌کنند که قسمت خلاصه‌ها نیازی به خسته کننده بودن ندارند. آن‌ها می‌توانند یک دارایی با ارزش برای تجربه کاربری شما و طراحی کلی وبسایت‌تان باشند. با ادغام لایه‌های بیشتری از طراحی و فکرهای جدید‌تر می توانیم تعامل بیشتری را به طرح‌ها بیاوریم.