Messages

Sliders

Sliders

Add a Signup Form to Your Website

Add a Signup Form to Your Website

مراحل ثبت دامنه و تنظیمات DNS

مراحل ثبت دامنه و تنظیمات DNS

چرا ترافیک وب سایت برای تجارت من مهم است؟

چرا ترافیک وب سایت برای تجارت من مهم است؟

Why is Website Traffic Important to My Business?

Why is Website Traffic Important to My Business?

ترافیک وب

ترافیک وب

Web traffic

Web traffic

8 نشانه اساسی گوگل برای رتبه بندی در سال 2019

8 نشانه اساسی گوگل برای رتبه بندی در سال 2019

مشکلات رایج در کدنویسی معتبر و رفع آنها

مشکلات رایج در کدنویسی معتبر و رفع آنها

article حل مشکل محتوای تکراری (Duplicate Content) در سایت

article حل مشکل محتوای تکراری (Duplicate Content) در سایت

رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!

رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!

چرا برخی سایت ها و وبلاگ ها رتبه الکسای بهتری دارند؟

چرا برخی سایت ها و وبلاگ ها رتبه الکسای بهتری دارند؟

article پیج رنک چیست و چگونه می توان آن را افزایش داد؟

article پیج رنک چیست و چگونه می توان آن را افزایش داد؟

article چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟

article چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟

کدام نوع وبلاگ می تواند برای تجارت  شما مفید باشد

کدام نوع وبلاگ می تواند برای تجارت شما مفید باشد

What a Blog Can Do For Your Small Business

What a Blog Can Do For Your Small Business

WhatsApp vs WhatsApp Business App: What's the Difference?

WhatsApp vs WhatsApp Business App: What's the Difference?

TinyMCE 5: Inline editor example

TinyMCE 5: Inline editor example

TinyMCE 5 - Inline editor example

TinyMCE 5 - Inline editor example

Native HTML5 Drag and Drop

Native HTML5 Drag and Drop

HTML5 Drag and Drop

HTML5 Drag and Drop

Step Organization in Java

Step Organization in Java

How to use Cucumber? – Cucumber best practices

How to use Cucumber? – Cucumber best practices

A Guide to Cucumber Best Practices

A Guide to Cucumber Best Practices

Why Responsive Design Support is the Most Important Feature You Can Add To Your Website

Why Responsive Design Support is the Most Important Feature You Can Add To Your Website

5 مزایای قدرتمند وبلاگ نویسی برای تجارت شما

5 مزایای قدرتمند وبلاگ نویسی برای تجارت شما

5 POWERFUL BENEFITS OF BLOGGING FOR YOUR SMALL BUSINESS

5 POWERFUL BENEFITS OF BLOGGING FOR YOUR SMALL BUSINESS

Angular 1 using redux architecture

Angular 1 using redux architecture

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 تصویر و رنگ‌بندی خاصی است که در پشت‌زمینه‌ی صفحه قرار می‌گیرد. به کار بردن رنگ‌های روانشناسانه در صفحه‌ی سایت می‌تواند نقش بسیار مهمی در جذب کاربران داشته باشد. انتخاب رنگ‌های مناسب نیاز به دانش، تجربه و تخصص زیادی دارد. در این زمینه کسب اطلاعات در زمینه‌ی روانشناسی رنگ‌ها می‌تواند دانش شما را ارتقا دهد. علاوه بر آن استفاده از تصاویر متناسب با مطالب در پشت‌زمینه‌ها نیز می‌تواند در فهم و انتقال مفاهیم اثر شگفت‌انگیزی داشته باشد.



نکات دیگر

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

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

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

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

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


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


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

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

Masood Zarei

آخرین خبرها

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

LocalTheme

Help