Messages

PagesMy Pages
Easy Solutions for a JMeter Load Test “Out of Memory” Failure

Easy Solutions for a JMeter Load Test “Out of Memory” Failure

Recording HTTPS Traffic with JMeter's Proxy Server

Recording HTTPS Traffic with JMeter's Proxy Server

How to Write Test Cases: Sample Template with Examples

How to Write Test Cases: Sample Template with Examples

Agile Model & Methodology: Guide for Developers and Testers

Agile Model & Methodology: Guide for Developers and Testers

What is Waterfall Model in SDLC? Advantages & Disadvantages

What is Waterfall Model in SDLC? Advantages & Disadvantages

Performance Testing Tutorial: What is, Types, Metrics & Example

Performance Testing Tutorial: What is, Types, Metrics & Example

What is System Testing? Types & Definition with Example

What is System Testing? Types & Definition with Example

Integration Testing

Integration Testing

Unit Testing Tutorial

Unit Testing Tutorial

The Pros And Cons Of Using Google Adsense For Extra Income

The Pros And Cons Of Using Google Adsense For Extra Income

Software Testing Methodologies

Software Testing Methodologies

Test page

Test page

Google Sitemaps – How important are they?

Google Sitemaps – How important are they?

Are you interested in increasing your Google PageRank?

Are you interested in increasing your Google PageRank?

Creating Faster Websites and Website Monitoring for a Global Business

Creating Faster Websites and Website Monitoring for a Global Business

Link Building – to uplift your website rankings

Link Building – to uplift your website rankings

Buying an website for selling

Buying an website for selling

Selecting the right online business

Selecting the right online business

Low marks for performance reviews

Low marks for performance reviews

Is it time to bring data to managing?

Is it time to bring data to managing?

The future of work: Will robots take my job?

The future of work: Will robots take my job?

تست مبتنی بر  خصوصیت‌ها با استفاده از QuickCheckJs

تست مبتنی بر خصوصیت‌ها با استفاده از QuickCheckJs

Property based testing with QuickCheckJs

Property based testing with QuickCheckJs

چطور حرف اول یک رشته را با حروف بزرگ یا کوچک در جاواسکریپت جایگزین کنیم

چطور حرف اول یک رشته را با حروف بزرگ یا کوچک در جاواسکریپت جایگزین کنیم

How to replace the First Letter of a String with upper/lower case in JavaScript

How to replace the First Letter of a String with upper/lower case in JavaScript

Pricing | ViraWeb123

Pricing | ViraWeb123

Benefits of SaaS in Hotel Management Software

Benefits of SaaS in Hotel Management Software

چرا به یک نقشه کسب و کار نیاز داریم؟

چرا به یک نقشه کسب و کار نیاز داریم؟

Why we need a business plan?

Why we need a business plan?

The 11 Most Popular Hotel Management Software Solutions for Small Hotels Compared

The 11 Most Popular Hotel Management Software Solutions for Small Hotels Compared

الگوی مقاله‌های بلاگ

الگوی مقاله‌های بلاگ

seo-video

seo-video

seo-keyword

seo-keyword

widget-load-test

widget-load-test

تمام ویجت‌هایی که برای بلاگ استفاده شده، بر اساس تم سایت ۱۲۳

تمام ویجت‌هایی که برای بلاگ استفاده شده، بر اساس تم سایت ۱۲۳

seo-text

seo-text

seo-image

seo-image

تماس با ما

تماس با ما

template6

template6

ویراوب|آموزش ساخت صفحه جدید

ویراوب|آموزش ساخت صفحه جدید

دامنه

دامنه

template3

template3

template2

template2

template5

template5

template4

template4

template7

template7

template1

template1

website-template

website-template

seo-education

seo-education

editor-widget-slider

editor-widget-slider

seo-page

seo-page

شروع کار با گوگل انالاتیک

شروع کار با گوگل انالاتیک

editor-wedget-text

editor-wedget-text

صفحه اصلی سایت

صفحه اصلی سایت

editor-widget-link

editor-widget-link

editor-widget-image

editor-widget-image

widget-button

widget-button

widget-group

widget-group

seo-widget-image

seo-widget-image

حریم خصوصی

حریم خصوصی

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