Messages

PagesMy Pages
PHP Enums

PHP Enums

سئو سایت با طراحی یک استراتژی حرفه‌ای برای تولید محتوا

سئو سایت با طراحی یک استراتژی حرفه‌ای برای تولید محتوا

PHP RabbitMq: Getting Start

PHP RabbitMq: Getting Start

SEO content strategy: How to grow visits by 300% in one year

SEO content strategy: How to grow visits by 300% in one year

سئو سایت به طبیعی ترین روش ممکن

سئو سایت به طبیعی ترین روش ممکن

سئوی بهتر سایت در طراحی / ویراوب123

سئوی بهتر سایت در طراحی / ویراوب123

TinyMCE: Quick start

TinyMCE: Quick start

Does Flexbox Have a Performance Problem?

Does Flexbox Have a Performance Problem?

سلسله مراتب نیازهای فنی seo

سلسله مراتب نیازهای فنی seo

The technical SEO hierarchy of needs

The technical SEO hierarchy of needs

React vs. Angular

React vs. Angular

10 استراتژی برای بازاریابی تجارت آنلاین شما

10 استراتژی برای بازاریابی تجارت آنلاین شما

10 Strategies for Marketing Your Business Online

10 Strategies for Marketing Your Business Online

بازاریابی وبلاگ:چیست و چگونه می توان آن را انجام داد

بازاریابی وبلاگ:چیست و چگونه می توان آن را انجام داد

Blog Marketing: What Is It and How to Do It

Blog Marketing: What Is It and How to Do It

Responsive iframe widget

Responsive iframe widget

10 مزیت و معایب خرید آنلاین

10 مزیت و معایب خرید آنلاین

Top 10 Benefits of Online Shopping (and 10 Disadvantages)

Top 10 Benefits of Online Shopping (and 10 Disadvantages)

5 کار پس از ایجاد وب سایت

5 کار پس از ایجاد وب سایت

5 Things to Do After You've Built a Website

5 Things to Do After You've Built a Website

9 Ways To Improve the SEO of Every Website You Design

9 Ways To Improve the SEO of Every Website You Design

چگونه وب‌سایتی طراحی کنیم که قوانین سئو در آن رعایت شده باشد تا رتبه‌ی خوبی کسب کند؟

چگونه وب‌سایتی طراحی کنیم که قوانین سئو در آن رعایت شده باشد تا رتبه‌ی خوبی کسب کند؟

How To Design An SEO Friendly Website That Ranks Well

How To Design An SEO Friendly Website That Ranks Well

اهیمت بازاریابی دیجیتال

اهیمت بازاریابی دیجیتال

SEOکلمات کلیدی برای چیست؟

SEOکلمات کلیدی برای چیست؟

What Are Keywords For SEO?

What Are Keywords For SEO?

Importance of self branding

Importance of self branding

Why Digital Marketing is Important for Small Business

Why Digital Marketing is Important for Small Business

کار با ابزار صفحه | ویراوب123

کار با ابزار صفحه | ویراوب123

work with page tools | viraweb123

work with page tools | viraweb123

Home Login Logout

آناتومی صفحات سایت: چگونه یک صفحه از سایت را طراحی کنیم؟

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

آناتومی صفحات سایت: چگونه یک صفحه از سایت را طراحی کنیم؟


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

قسمت‌های مختلف یک صفحه از سایت که ما آن را آناتومی سایت می‌نامیم می‌تواند شامل موارد زیر باشد:

  • قسمت بالای صفحه یا Header
  • نوار نشان‌دهنده‌ی مسیر یا Navigation
  • ناحیه‌ی محتوا Content area
  • نوارهای کناری یا Sidebars
  • پاورقی یا اصطلاحاْ Footer
  • پشت‌زمینه‌ها یا Backgrounds

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

شکل زیر نمونه‌ای از آناتومی سایت می‌باشد.

آناتومی صفحه‌های وب سایت در دید کلی

قسمت بالای صفحه یا Header

هدر یا سرآیند یک صفحه وب سایت در طراحی سایت

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

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

کدهایی که در پشت‌زمینه‌ی Header در حال کار هستند در بهینه‌سازی صفحه برای موتورهای جستجو بسیار پر اهمیت هستند. اطلاعاتی مثل کلیدواژه‌ها یا کلمات کلیدی، توصیفات صفحه در کد، عنوان صفحه (که در تب بالای صفحه مرورگر ظاهر می‌شود)، لینک‌ها و امثال آن همه و همه از مواردی هستند که که موتورهای جستجو از آن‌ها برای ایندکس کردن و کشف اطلاعات صفحه استفاده می‌کند.

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


لینک‌های راهبری یا نویگیشن (Navigation)

نوار بقل یا سایدبار شامل لینک‌های اصلی سایت

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


انواع نویگیشن‌ها

انواع مختلفی ازنویگیشن‌ها وجود دارد که در ادامه به چند مورد اشاره می‌کنیم:

نویگیشن سلسله مراتبی (Hierarchical website navigation)

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

نویگیشن سراسری یا کلی (Global website navigation)

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

نویگیشن محلی یا (Local website navigation)

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


ناحیه‌ی محتوا Content area

بدنه یا ناحیه‌ی محتوا در یک صفحه از سایت اصلی‌ترین قسمت صفحه است (به قسمت <main> در شکل اول نگاه کنید) که بازدیدکنندگان بیشترین وقت خود را در آن می‌گذرانند چرا که به دنبال جستجویی که کرده‌اند به صفحه‌ی جاری هدایت شده‌اند. اینجاست که ایده‌های طراحی سنتی در مورد خوانایی و وضوح مطالب به کمک می‌آید هر چند برخی نکات جدید را نیز باید به آن ضمیمه کرد. یک صفحه از سایت می‌تواند هر ارتفاعی داشته باشد. بنابراین مهم است که متون طولانی را با فضاهای خالی سفید و با زیرهدرها یا subheaderهایی به قسمت‌های مجزا تقسیم نمود. این جداسازی به کاربر اجازه می‌دهد تا صفحه را با سرعت بیشتری بخواند. همچنین عناوین بالای هر قسمت که با فونت‌های درشت (معمولا با تگ‌های هدینگ) نوشته می‌شوند به کاربر می‌گویند که در متن پیش رو در مورد چه چیزی صحبت خواهد شد.

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


نوارهای کناری یا Sidebars

نوارهای کناری موسوم به Sidebarsها نوارهایی هستند که در یک یا دو طرف بدنه اصلی می‌آیند و لینک‌های مستقیمی به سایر مطالب سایت دارند (قسمت <aside> از تصویر اول را نگاه کنید). این لینک‌ها برای سهولت در دسترسی کاربرد دارند و کاربر از طریق آن‌ها می‌تواند اطلاعات بیشتری از محتوای دیگر صفحات بدست آورد. پربازدیدترین‌ها، مطالب اخیر، پرفروش‌ترین‌ها، بهترین‌ها و امثال آن عناوین بخش‌های مختلف در نوارهای کناری هستند.


پاورقی یا اصطلاحاْ Footer

پاورقی یا فوتر یک صحفه سایت در طراحی سایت

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

پشت‌زمینه‌ها یا Backgrounds

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



نکات دیگر

توجه کردن به طیف کاربران و توقعات آن‌ها

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

توجه به شیوه‌‌ای که یک صفحه از سایت مرور و خوانده می‌شود

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

به شکل زیر توجه کنید:

قسمت‌هایی که چشم در مشاهد صفحه‌های سایت می‌بیند و در طراحی سایت باید در نظر گرفت


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


اما معیار خوب بودن طراحی یک صفحه از سایت چیست؟

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

آخرین خبرها

ساخته شده با شور و عشق تا به هر کس شانس معرفی شدن به دنیا  داده شده باشد
تمام حقوق این سایت محفوظ است برای ویراوب
مقررات - حریم خصوصی - تخلف

LocalTheme

Help