کاربرد تب ها در طراحی سایت های جدید

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

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

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

آناتومی و ساختار واحدهای ماژول در طراحی سایت

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

چه زمانی باید در طراحی وب سایت ها از ماژول استفاده نمود

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

اطلاعات موجود در طراحی وب سایت که مربوط به هم هستند

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

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

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

اطلاعاتی که نیاز ندارد فشرده شود و یا به صورت هم زمان در درسترس کاربران وب سایت قرار گیرد

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

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

اطلاعاتی که دارای نام های کوتاه می باشند

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

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

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

محتوای پنجره ها باید مربوط و متناسب باشند

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

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

به عنوان مثال، به استفاده از تب ها در نوار کناری وب سایتBEST WEB GALLERYنگاه بیاندازید. اکثر تب ها "موارد بیشتر" و "کامنت های اخیر" را نشان می دهند: دو گروه از اطلاعات که هیچ ارتباطی با یکدیگر ندارند. این مورد باعث می شود تا کاربر دچار سردرگمی شود و از خود سوال می پرسند که چرا این دو گروه بندی درطراحی سایتکنار هم قرار گرفته اند. قرار دادن محتوای طراحی سایت در تب ها بهترین راه انتقال هدف و پیام هر یک از این محتواها به صورت جداگانه به کاربران می باشد.

کاربرد و عملکرد فوق العاده تب ها در طراحی سایت ها

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

نشان دادن تب کنترل فعال به طور موثر

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

نشان دادن تب کنترل در یک ردیف تنها

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

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

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

تغییر و حر کت میان پنجره ها باید با سرعت انجام پذیرد

هدف استفاده از تب ها این است که نمایش محتواهای تعاملی و جذاب به سرعت انجام پذیرد. برای انجام این موضوع، شما باید سعی کنید تا محتوای پنجره های غیر فعال در طراحی سایت را به صورتHTMLبنویسید، و سپس ازCSSوJAVASCRIPTاستفاده کنید تا از نظر بصری پنجره مورد نظر را پنهان کنید که این پروسه سریع تر از دوباره بارگیری یک صفحهطراحی وبسایتانجام می پذیرد.

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

استفاده از نام های کوتاه و منطقی برای متن تب کنترلی

تب های کنترلی باید به اندازه ای با تب های دیگر مطابقت یابد که نیازی به ذخیره کردن آن ها در ردیف های مختلف نباشد.

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

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

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

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

از اسکرول در داخل پنجره های طراحی سایت استفاده نکنید

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

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

ملاحضات دسترسی به تب ها

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

از رنگ ها با کنتراست بالا برای تب های فعال و غیر فعال در طراحی سایت استفاده کنید

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

به عنوان مثال، در تب ها استفاده شده در بخش خبری وب سایتYAHOO!، کنتراست ضعیفی میان تب های فعال و غیر فعال به چشم می خورد؛ این مورد می تواند برای کاربران طراحی سایت معمولی مشکل ساز نباشد اما برای کاربران وب سایت که دچار اخلال در بینایی می باشند، بسیار شرایط سختی می باشد.

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

شناسایی و خواندن پنجره های غیر فعال و پنهان را برای نرم افزارهای صفحه نمایش گویا امکان پذیر سازید

برای دسترس و کاربردی ساختن طراحی وب سایت، تب ها باید پنجره های غیر فعالی را با استفاده از تکنیک هایی برای پنهان کردن بصری آن ها، نهان کند، اما به طور کی از بخشDOM TREEنباید حذف شود. برای مثال، این موارد را برای پنهان کردن پنجره ها با استفاده ازCSSبه کار نبرید: Display:None;یاVisibility:None;؛ این روش ها برای دسترسی نرم افزار صفحه نمایش گویا متناسب نیست.

از یک ساختار معناییHTMLبرای تب کنترلی استفاده کنید

قرار دادن تب کنترلی در لیست های مرتب شده و یا مرتب نشده، دسترسی به طراحی سایت را ارتقاء می دهد، زیرا کاربران دچار ناتوانی می توانند تب کنترلی را به عنوان مجموعه ای از عوامل (لیست ها) تشخیص دهند. برای تب کنترلی که از تصاویر برای محتوای متن تبی استفاده می کند، ازaltو یاtitleبا توضیحات مفهومی از این که هر تب کنترلی چه موضوعی را بیان می کند، استفاده کنید.

امکان پذیری جستجو یابی از طریق کیبوردها

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

یک راه آسان برای تست جستجویابی از طریق کیبورد این است که ازTAB KEYدر بالا هر صفحه از طراحی سایت استفاده کنید که شامل تب ها می شود: بررسی کنید تا ببینید که آیا شما می توانید روی هر تب کنترلی تمرکز کنید یا خیر. می توانید زمانی که یک تب کنترلی انتخاب شد، کلیدENTERرا بزنید تا پنجره ها غیر فعال مورد نظر نمایش داده شود و فعال شود.

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

تکنولوژی تب ها باید برای دسترس بیشتر طراحی وب سایت ها حداقل اندکی تنزل یابند تا کاربران وب سایتی که از این تکنولوژی ها استفاده نمی کنند هنوز هم قادر به دسترسی اطلاعات صفحه وب سایت باشند. برایJAVASCRIPT، بررسی کنید تا مطمئن شوید محتوای طراحی وب سایت حتی زمانی کهJAVASCRIPTغیر فعال باشد، قابل مشاهده می باشد، مانند محتوای متنیHTML، برای کاربران وب سایت که دارای پلاگین های نصب شدهFLASHنمی باشند و یا کسانی که نمی توانند با مواردFLASHتعامل یابند.

ارتقای تب ها

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

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

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

برای مثال، در طراحی سایتIN DRAWLT، از آیکون ها برای افزودن معنای محتوای داخل صفحات وب سایت استفاده شده است.

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

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

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

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

برای تب های کنترلی غیر فعال، حالت شناوری را مهیا کنید

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

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

درمثال زیر، طراحی سایتVYNIKNITE.SK، تب های غیرفعال زمانی که اشاره گر ماوس روی آن قرار می گیرد، با پس زمینه قرمز نشان داده می شود.

مثال هایی از تب ها در طراحی سایت ها

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

Haveamint.Com

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

Igoogle
در طراحی وب سایتIGOOGLE، ویجت ها می توانند از تب ها استفاده کنند و از این رو می توانند اطلاعات زیادی را بدون اینکه حجم زیادی از طراحی سایت را اشغال نمایند، در بر داشته باشند.

Blue Aco
طراحی وب سایتBLUE ACORNاز تب ها استفاده می کند تا مقاله های محبوب وب سایت را نشان دهند و آن ها را به دو بخش "تجارت الکترونیک" و "مگنتو" طبقه بندی می کنند. تب ها اغلب دارای دکمه های دعوت به عمل برای کاربران وب سایتی است که می خواهند تمامی لیست مقاله را در طراحی سایت مشاهده کنند.

Mailchimp
در این طراحی سایت، شما می توانید آیکون هایی را مشاهده کنید که برای ارتقای مفهوم متن تب ها، مورد استفاده قرار می گیرد.

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

Worldcat.Org
در این طراحی وب سایت از تب های کنترلی برای جستجویابی ها استفاده شده است، از این رو می توانید انواع مختلفی از رسانه ها را در این طراحی سایت مشاهده کنید (مانند کتاب، دی وی دی، مقاله و غیره)

Martha Stewart
در این طراحی وب سایت، شما می توانید ببینید که تب ها برای محتوهای نمایش داده شده، استفاده می شود. تب ها دارای افکت های انیمیشنی مابین جستجو صفحات می باشد.

Kristarsquo;s Creations
این طراحی سایت دارای تب ها با اطلاعات گرافیکی در صفحه وب سایت می باشند. متن تب کنترلی دارای حروف الفبا هستند.

Homewood
در این طراحی سایت، شما می توانید مشاهده کنید که تب های کنترلی با آیکون هایی تکمیل شده اند که مفهوم محتوای طراحی وب سایت را ارتقاء می دهد.

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

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

Komodo Media
این طراحی وب سایت از تب ها با آیکون هایی در بالای هر متن تب کنترلی استفاده می نماید.

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

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

Kevadamson.Com
در این طراحی وب سایت، شما می توانید تب ها زیادی را در نوار کناری وب سایت مشاهده کنید. برای متمایز ساختن تب ها، این طراحی سایت از تیترهایی با آیکون های مربوطه و متناسب استفاده کرده است و به کاربر شناخت و درک بالایی از این که هر تب ماژول دارای چه محتوایی می باشد، ارائه می دهد.

موارد آموزشی درباره ساخت تب ها در طراحی سایت

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

Create A Tabbed Interface Using Jquery
در این مورد روش هایی برای ساخت تب ها که توسط آرشیوJQUERYتقویت و پشتیبانی می شود را یاد می گیرید.

Accessible Image-Tab Rollovers
یاد بگیرید که چگونه تب ها را برای تب های جستجویابی در طراحی سایت بسازید.

Create A Slick Tabbed Content Area Using CSS amp; Jquery
طراحان گرافیکی و طراحان وب سایت باید این مورد را که درباره ساخت تب ها که در جستجوهایی میان طراحی سایت دارای افکت های انیمیشنی نیز می باشد، حتما مطالعه کنند.

اسکریپت برای تب ها

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

Domtab
این مورد یک اسکریپت محبوب برای ساخت آسان تب ها برای طراحی وب سایت ها است؛ این مورد لیست های معمولی از لینک ها را به عوامل رابط کاربری قابل کلیک تغییر می دهد.

Javascript Tabifier
این اسکریپت به شما اجازه می دهد تا به سرعت رابط کاربری قابل کلیکی را در طراحی سایت خود اجرا کنید. این مورد حتی زمانی کهJAVASCRIPTخاموش باشد نیز برای کاربران سایت کاربرد دارد.

Tabview
این اسکریپت جزئی ازYUI LIBRARYمی باشد که می توانید برای رفع نیاز به ساخت برنامه نویسی و گرافیک ها برای تب ها از آن استفاده کنید.

Coda-Slider
این مورد یک اسکریپتی است که از تب هاCODA الهام گرفته است که پنجره های را در طراحی سایت شامل می شود که به صورت افقی می باشند و به صفحات فعال دیگر در طراحی سایت سوق داده می شوند. یک بخش کنترل جستجویابی فرعی نیز در قسمت چپ و راست وجود دارد که شما می توانید بدون کلیک کردن روی تب کنترلی، به اطلاعات مورد نظر خود دسترسی پیدا کنید.

Idtabs
یک پلاگین مستقیم برای کاربرانJQUERYمی باشد. این مورد دارای یک مجموعه از گزینه ها و ویژگی ها برای ساده ساختن تعاملات تب ها در طراحی وب سایت می باشد.

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

Ajax Tabs Content
برای داده های فعال و دور از دسترس در طراحی سایت می توانید از این مورد استفاده کنید که به اطلاعات صفحات وب سایت اجازه می دهد تا هر زمان که درخواست شد، بروزرسانی وREFRESHشود.

Carousel - Module Tabs
این اسکریپت تب ها در طراحی سایت، بسیار ساده است و برای فعال نمودن انیمیشن ها و مواردی که به طور اتوماتیک پخش می شوند، تنظیمات مخصوص به خودی را دارد.

نتیجه گیری

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