تصویر نویسنده

۲۲ مرداد ۱۳۹۹

0

طراحی وب : ۱۶ نوع صفحه وب پایه

مقاله

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

همچنین اگر می خواهید در مورد مشکلات طراحی وب سایت اطلاعات کسب کنید، می توانید به مطلب “رایج ترین مشکلات طراحی وب سایت” مراجعه کنید.

امروزه برای اکثر مردم، تصور زندگی کردن بدون وب دشوار است. وب سایت های مختلف به ما در انجام کارهای روزمره مانند آشپزی یا خرید کمک می کنند، آموزش ما را با تعداد زیادی از داده ها پشتیبانی می کنند، ما را با سرعت زیادی از اخبار مطلع می کنند، به ما در مدیریت، محاسبه، کار و برقراری ارتباط کمک می کنند. مطابق آمار Internet Live Stats، تقریباً ۱.۸ میلیارد وب سایت در آگوست سال ۲۰۲۰ وجود دارد. بنابراین، تنوع وب سایتها به روشها و راه حلهای طراحی متفاوت و بیشتری نیاز دارد. با وجود اینکه وب سایتهای مختلف از هر نظر متنوع هستند، برخی صفحات پایه برای اکثر ساختارهای وب سایت وجود دارد. در این مقاله، ما به شما پیشنهاد می کنیم ۱۶ نوع صفحه پایه را که می توانید در سراسر وب بیابید مرور کنید.

صفحه اصلی

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

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

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

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

صفحه فید (Feed)

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

صفحه منو

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

صفحه جستجو

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

اینجا شکل صفحه جستجو در Tubik Blog ارائه شده است: نتایج به صورت کارت های بزرگ با تصویر عنوان مقاله به عنوان پس زمینه و عنوان بزرگ برای خواندن راحت نمایش داده می شوند. یک مقاله در یک زمان مشاهده می شود و بقیه با پیمایش باز می شوند.
و به این صفحه جستجو در وب سایت Design4Users می باشد: لیستی از کارت های دارای تصاویر جذاب، عناوین به راحتی خوانده می شوند و تاریخ انتشار دیده می شود. کاربران می توانند ۶ کارت را به طور همزمان مشاهده کنند و در صورت تمایل به دیدن اطلاعات بیشتر، با زدن دکمه Load More نتایج بیشتری بارگیری می شود.

صفحه درباره ما

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

صفحه درباره ما در وب سایت پتو

صفحه ثبت نام

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

صفحه ۴۰۴

صفحه ۴۰۴ را می توان در هر وب سایتی یافت. از نظر فنی، ۴۰۴ یا Not Found پیام خطایی در کد پاسخ HTTP (Hypertext Transfer Protocol) است: وقتی ارسال می شود که یک کاربر با سرور با موفقیت ارتباط برقرار می شود، اما به دلایلی نتواند محتوای مورد نظر خود را بدست آورد. به عنوان مثال، هنگامی که کاربران روی لینکی که حذف شده، غیر فعال است یا خراب شده، کلیک کنند، می تواند رخ دهد. در این شرایط ، سرور وب سایت صفحه ۴۰۴ وب را ایجاد و ارسال می کند تا به کاربر اطلاع دهد که محتوا یافت نمی شود.

ابتدایی ترین راه حل برای صفحه از این نوع، یک طرح ساده با فقط یک متن است که می گوید “هیچ چیز در اینجا یافت نمی شود”. با این وجود، این روزها اکثریت قریب به اتفاق وب سایت ها صفحه ۴۰۴ سفارشی را اعمال می کنند که می توانند اهداف بسیار استراتژیک تر یا حداقل سرگرم کننده ای برای این مورد آزار دهنده به دست آورند. از این گذشته، یک رویکرد خلاق نسبت به این صفحه خطا نیز می تواند به طور موثری از وب سایت یا تبلیغ برند پشتیبانی کند. صفحه وب خوب و زیبا و شیک نه تنها بازدید کنندگان را آگاه می کند بلکه آنها را به صفحات دیگر هدایت میکند، سرگرمی می سازد و یا فقط لحظه ای از لذت زیبایی شناختی می سازد.

تصویر سفارشی خطای ۴۰۴ ایجاد شده برای Moonworkers
طرح صفحه ۴۰۴ برای وب سایت فروشگاهی

صفحه بلاگ

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

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

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

صفحه مقاله

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

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

صفحه مقاله برای وب سایت Credentially

صفحه نمونه کارها

همانطور که از نام آن مشخص است، این نوع صفحه برای وب سایت هایی که هدف آنها ارائه حرفه ای است، معمولاً برای افرادی یا تیم هایی که محتوای تصویری مانند عکاسی، طرح ها، هنر، فیلم ها یا کالاهای بدنی ایجاد می کنند، مثلاً دستی – وسایل ساخته شده، لباس، دکوراسیون منحصر به فرد و غیره می توانید چنین صفحه هایی را در سیستم عامل های حرفه ای پیدا کنید که در آن کاربران بتوانند portfolio خود را ایجاد کنند. یا می تواند یک صفحه ویژه در وب سایت شخصی باشد. هدف از این صفحه نمایش بهترین پروژه ها به مشتریان به بهترین وجه خود می باشد، بنابراین توصیه می شود که روی تصاویر با کیفیت بالا از کالاها یا طرح ها و ارائه آنها به بهترین نحو به بازدیدکنندگان وب سایت خوب کار کنید.

صفحه Portfolio برای وب سایت شخصی یک عکاس
صفحه portfolio یک مدل

صفحه خدمات

این صفحه هدفی مانند قبلی دارد: افراد حرفه ای را به مشتریان بالقوه خود ارائه می دهند. با این حال، به جای نشان دادن پروژه ها و کالاهای موجود در صفحه نمونه کارها، این صفحه مقدماتی را که به خدماتی که شرکت یا فرد ارائه می دهد، شامل می شود.

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

صفحه محصول

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

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

صفحه محصول برای وب سایت GNO
صفحه محصول وب سایت اختصاص داده شده برای زندگی بدون ضایعات

صفحه سبد خرید

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

صفحه آمار

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

مطمئناً، ایده ی خوبی است که الگوهای معمولی یکپارچه که توسط کاربران شناخته شده است را بخوانید زیرا از این طریق بار شناختی کاهش می یابد و باعث می شود درک آمار کاربر پسند تر شود. یکی از نمونه های کلاسیک چنین الگویی استفاده از رنگ قرمز برای تغییرات منفی و رنگ سبز برای تغییرات مثبت در آمار کاربر است.

صفحه داشبورد بلاگ که آمارهای مختلفی را نشان می دهد

صفحه تماس با ما

صفحه ارتباطات معمولاً بسیار ساده است اما از اهمیت بالایی برخوردار است. این مورد برای نشان دادن چگونگی تماس کاربر با تیم پشتیبانی، افراد مسئول مسائل مختلف یا شخصی که صاحب وب سایت شخصی است، استفاده می شود. سعی در طراحی بیش از حد این صفحه نکنید: باید بارگیری سریع انجام شود و مفید و کاربردی باشد. در بسیاری موارد، فرم تماس نیز به صفحه اضافه می شود تا بازدید کننده بتواند پیام را از همانجا ارسال کند.

صفحه فرود

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

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

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

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

طراحی صفحه فرود برای تبلیغ اپ Vertt
صفحه مقصد برای یک سرویس بانکی تلفن همراه
صفحه فرودی که برای ارائه و تبلیغ یک شارژر طراحی شده است

مطمئناً این لیست از صفحات وب هنوز کامل نیست و ما در مقالات بعدی به معرفی صفحات وب مختلف، عناصر رابط و شیوه تعامل در طراحی وب خواهیم پرداخت. با این حال، امیدواریم که این لیست نه تنها برای طراحانی که در طراحی وب شروع به کار می کنند مفید باشد، بلکه به مشتریان کمک کند تا بهتر به سؤالاتی مانند “مایلید چه صفحاتی را در وب سایت خود داشته باشید؟” پاسخ دهند.

منبع : tubikstudio

۰ ۰ vote
Article Rating