۱۲ بهمن, ۱۳۹۵

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

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

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

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

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

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

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

کنترل تب دربردارنده اجزای طراحی سایت برای جستجویابی در قسمت های گوناگون ماژول ها است.

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

کنترل تب غیرفعال، کنترل تب پنجره هایی است که در حال حاضر در طراحی سایت نمایش داده نشده اند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کاربرد و کارآیی عالی تب ها در طراحی سایت ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نکات مهم درباره دسترسی به تب ها

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

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

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

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

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

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

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

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

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

امکان پذیری جستجو یابی به وسیله کی بوردها

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

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

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

ارتقای تب ها

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

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

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

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

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

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

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

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

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

آدرس بازتاب: http://www.webcando.ir/blog/397-%da%86%da%af%d9%88%d9%86%d9%87-%d8%a7%d8%b2-%d9%85%d8%a7%da%98%d9%88%d9%84-%d8%aa%d8%a8-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d9%81.html/trackback

ارسال دیدگاه:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *