استاد ناوبری موبایل

محتوا

• سیر تکاملی
• عمل متعادل سازی
• استراتژی های ناوبری
• پنهانش کن
• کوتاهش کن
• کوچکش کن
• تنظیم مجدد آن
• جمع کن
• آن را تبدیل کنید
• آشکارش کن
• تصمیم با شماست

این مقاله اولین بار در شماره 232 مجله .net منتشر شد - پرفروش ترین مجله جهان برای طراحان و توسعه دهندگان وب.

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

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

سیر تکاملی

هنگامی که وب موبایل برای اولین بار به واقعیت تبدیل شد ، معدود شرکت هایی که نیاز به ورود به این قلمرو ناشناخته را احساس کردند - عمدتا شرکت های هواپیمایی و موسسات مالی - با ایجاد وب سایت های تلفن همراه کاملاً جداگانه ، اغلب با محتوای منحصر به فرد و ناوبری ، این کار را انجام دادند. غالباً ، این سایتها به یک نسخه "ساده" از وب سایت والدین می رسند ، محتوا و ناوبری بر روی وظایفی که به احتمال زیاد "در حال حرکت" مورد نیاز هستند متمرکز شده است. اکثریت قریب به اتفاق این سایت ها (به ویژه صفحات اصلی) کاملاً ناوبری بودند: لیستی از لیست پیوندها و فرم های ساده برای تحقق آنچه که منافع تجاری یا تیم های UX وظیفه اصلی می دانند.

در آن زمان این یک استراتژی مناسب بود. تعداد زیادی از مرورگرهای وب تلفن همراه به اندازه کافی قدرتمند نبودند که بتوانند طرح های مبتنی بر CSS را مدیریت کنند و تعداد کمی از آنها از بیشتر عناصر اصلی HTML به صورت WAP یا XHTML MP پشتیبانی می کنند. مرور در این دستگاه ها دردناک بود ، که اغلب با استفاده از پد شماره تلفن ، یک دکمه دنده یا چرخ اسکرول انجام می شد. اگر به اندازه کافی خوش شانس بودید که یک Treo یا دستگاه مشابهی داشته باشید ، می توانید با استفاده از انگشت یا قلم خود بر روی پیوندهای کوچک صفحه کوچک خود کلیک کنید.

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

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

با ظهور آیفون در سال 2007 مفهوم ما در مورد معنای دسترسی به وب از طریق یک دستگاه تلفن همراه به طرز چشمگیری تغییر کرد. از ناکجاآباد ، اپل آمد و خرد مشترک را به چالش کشید و اجازه داد مرور در تلفن همراه به اندازه تمام دسک تاپ یا لپ تاپ دارای ویژگی کامل باشد. نه تنها این ، سرگرم کننده بود! (سریع؟ خوب ، نه خیلی زیاد. حداقل به سال 077 برنگردم.)

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

عمل متعادل سازی

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

واقعیت این است که کاربران دیگر از تجربه تلفن همراه "lite" راضی نیستند و همچنین نمی خواهند پیوند "مشاهده سایت کامل" را جستجو کنند تا با یک طرح سخت استفاده برای یک مانیتور بزرگ استقبال شود. آنها می خواهند بتوانند هر کاری را که می توانند در سیستم عامل های وب دسک تاپ سنتی (و بطور بالقوه موارد دیگر) انجام دهند. به نفع ماست که از یک تجربه وب انعطاف پذیر پشتیبانی کنیم: Opera اخیراً 59 درصد از کاربران کاربری خود را فقط از طریق تلفن همراه پیدا کرده است. این تعداد در مکانهایی مانند مصر ، برزیل و آفریقای جنوبی بیشتر است و در سراسر جهان در حال رشد است.

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

استراتژی های ناوبری

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

پنهانش کن

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

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

/ * پنهان کردن nav به طور پیش فرض * / body> header nav {display: none؛} / *> = 768px * / @ فقط صفحه رسانه و (حداقل عرض: 768px) {/ * Nav Navi را دوباره نشان دهید * / body> header nav {display: block؛}}

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

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

کوتاهش کن

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

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

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

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

کوچکش کن

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

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

/ * = 720px * / @ media (حداکثر عرض: 720px) {/ * لیست را خطی کرده و موارد را فاصله دهید * /. mainnav li {display: inline-block؛ line-height: 1em؛ margin: 0 .5em .5em 0؛} / * پیوندها را بزرگ و قابل لمس کنید * * /. mainnav li a {border-radius: 1em؛ font-size: 1em؛ padding: .5em .75em؛}}

تنظیم مجدد آن

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

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

/ *> = 768px * / @ صفحه رسانه و (min-width: 48em) {/ * پنهان کردن "عبور به" * /. go-nav {سمت چپ: -1000em؛} / * حرکت nav up * / # site-nav {position: absolute؛ top: -5em؛ عرض: 100٪؛ z-index: 5؛}}

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

پرش به پایین از صفحه به یک مرجع لنگر می تواند کمی ناخوشایند باشد. اما با کمک برخی از JavaScript ، می توانید با کلیک بر روی پیوندهای "رد شدن به" رد شوید تا کاربر به راحتی صفحه را به بالا یا پایین ببرید. افزونه Smooth Scroll کارل سوئدبرگ برای jQuery برای این منظور کاملاً به من پاسخ داده است.

جمع کن

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

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

/ * پنهان کردن nav به طور پیش فرض * / # nav .nav_menu {display: block؛ height: 0؛ overflow: hidden؛} / * وقتی JS کلاس باز را اضافه می کند * / # nav.open .nav_menu {height: auto؛}

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

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

body: not (: target) #nav {/ * این سبک ها فقط درصورتی اعمال می شوند که: target and: notare قابل درک باشد (و بدن البته بدون مارک است) * /}

آن را تبدیل کنید

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

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

/ * = 767px * / @ فقط صفحه نمایش رسانه و (حداکثر عرض: 767px) {/ * لیست را مخفی کنید * * / nav را انتخاب کنید {display: none؛} / * انتخاب کنید انتخاب کنید نمایش: بلوک؛}} / * = 767px * / @ فقط صفحه نمایش رسانه و (حداقل عرض: 768 پیکسل) {/ * نمایش لیست * / انتخاب داخل {display: block؛} / * مخفی کردن انتخاب {display: none؛}} را انتخاب کنید

اگر تصمیم دارید یک انتخاب کنید در علامت گذاری خود به جای ایجاد پویا با جاوا اسکریپت ، باید دکمه ای را برای ارسال فرم حاوی آن در نظر بگیرید (و برای مدیریت تغییر مسیر کد چند سمت سرور داشته باشید) - برای در دسترس بودن JS نمی توانید اعتماد کنید تغییر صفحه

اگر چنین مشکلی را نمی خواهید ، بهتر است تولید کنید انتخاب کنید به صورت پویا از یک لیست در نشانه گذاری با استفاده از JavaScript. حداقل از این طریق می دانید که جاوا اسکریپت برای کنترل رویداد تغییر در دسترس است. TinyNav و Menu Responsive دو گزینه (از بسیاری) جاوا اسکریپت برای مدیریت تبدیل لیست به انتخاب هستند.

آشکارش کن

الگوی نهایی ناوبری موبایل که پتانسیل بالقوه را نشان می دهد ، "اسلاید برای آشکار کردن" است که توسط برنامه هایی مانند Path و Sparrow در iOS و Facebook در وب محبوبیت یافته است.

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

# viewport ، # page {position: relative؛}. mSideArea {width: 260px؛ Position: مطلق؛ چپ: 60260px؛}

آشکار سازی با اضافه کردن یک کلاس از انجام می شود نمایش جانبی به بدن عنصر اضافه شدن این کلاس باعث می شود # صفحه برای دریافت افست سمت چپ از 260 پیکسل (تغییر محتوای صفحه به سمت راست) و تنظیم می شود .mSideAreaبازگرداندن سمت چپ به 0، انتقال آن به داخل 260 پیکسل فضای خالی در سمت چپ # صفحه.

.sideShowing #page {سمت چپ: 260px؛} .sideShowing .mSideArea {سمت چپ: 0؛}

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

# صفحه ، .mSideArea {/ * نسخه های پیشوند را در اینجا قرار دهید * / گذار: چپ .5 ثانیه ؛}

از آنجا که رویکرد فیس بوک به تغییر کلاس متکی است ، به JavaScript وابسته است. اما دلیلی وجود ندارد که نتوانید از آن استفاده کنید :هدف کلاس شبه (مانند کلاس مورد استفاده در کالج نیکولز) برای دستیابی به یک اثر مشابه.

تصمیم با شماست

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

یادداشت نویسنده: من می خواهم از برد فراستی برای ایجاد و حفظ یک مجموعه زنده از استراتژی های ناوبری تلفن همراه تشکر کنم. می توانید اینجا را بررسی کنید.

در Creative Bloq 20 نکته حرفه ای را برای طراحی وب سایت تلفن همراه کشف کنید.