سلام همه با شما corvax. امروز من می خواهم موضوع منوی تلفن همراه را ادامه دهم و شما را به انجام این کار، اما فقط با استفاده از jQuery. برو
ایجاد طرح HTML
اضافه کردن سبک های اساسی CSS
NAV (سابقه و هدف: # 3E2597؛ Padding: 0؛ حاشیه: 0؛) .menu (لیست سبک نوع: هیچ؛ Padding: 0؛ حاشیه: 0؛) .menu لی (شناور: چپ؛) .menu li a ( صفحه نمایش: Inline-Block؛ Padding: 10px 15px؛ رنگ: #fff؛ دکوراسیون متن: هیچکدام؛) .Wrapper (حداکثر عرض: 1024px؛ Padding: 10px؛ حاشیه: 0px خودکار؛) PADDING: 10PX 15PX؛ مکان نما: اشاره گر؛ صفحه نمایش: هیچ؛ هیچ کدام؛ 100٪؛ حاشیه چپ: -10 پیکسل؛ Padding-left: 10px؛) .menu li (شناور: هیچ؛))اضافه کردن JS
پس از اینکه ما منو را چسبانید، ما باید فایل JS را وصل کنیم و به جالب تر ادامه دهیم.
$ (عملکرد () ($ ("menutoggle"). ON ("کلیک"، تابع () ($ (". منو"). SlideToggle (300، تابع () (اگر ($ ($) .css ("نمایش ") \u003d\u003d\u003d" هیچ ") ($ (این) .removeattr (" سبک ")؛))؛))؛))؛))؛)
بیایید به آنچه که در اینجا نوشته شده است نگاه کنیم. در ابتدا، ما SobyTi.On را بر روی دکمه "منو" فشار می دهیم. در Inssence از این رویداد، ما $ (". منو") منو که عملکرد SlideToggle () را پرداخت می کند که یک باز کردن صاف و بسته شدن منو را تولید می کند.
یک مشکل کوچک وجود دارد که هنگام ارسال نسخه های سایت و استخدام در دکمه "منو"، یعنی بلوک با آیتم های منو، باید یک مشکل کوچک باشد. به طور پیش فرض، عملکرد SlideToggle () زمانی که بسته شدن Atrebut را اضافه می کند "نمایش: هیچ". برای اصلاح این اشکال، شما نیاز به تماس با Schake (تابع که پس از عملکرد اصلی کار می کند) برای عملکرد SlideToggle () تماس بگیرید. در Nutri Kolball، ما یک شرط را بنویسیم. اگر ما یک ویژگی در بلوک منو داشته باشیم "صفحه نمایش: هیچ" پس از آن ما "سبک" éTribut را حذف می کنیم.
نتیجه
این چگونگی گزارش ها به سادگی و به سرعت ما یک منو سازگار "همبرگر" را ایجاد کردیم که می توانید در پروژه های چندگانه استفاده کنید. شما می توانید منبع را دانلود کنید. با شما Corvax بود. بله جلسات جدید!
شما احتمالا از خواندن مقالات خسته شده اید و به طور مداوم به بحث های مختلف در مورد سه خط کوتاه منوی همبرگر گوش دهید. آیا پذیرش بد در طراحی رابط کاربری است؟ یا بد نیست؟ این پست اینطور نیست - این منو خوب یا بد نیست. خط پایین این است که من آن را بهترین راه حل طراحی، یک راه دیگر نیست. اما منوی همبرگر دارای نقاط قوت خود، به ویژه هنگامی که در طراحی تلفن همراه، در شرایط فضای محدود استفاده می شود. پس چه می توانیم بکنیم؟ فقط یک منوی همبرگر را که این چیزی است، علیرغم تمام معایب، و زندگی می کنند؟ به نظر می رسد بسیاری از سایت ها و برنامه های کاربردی این را قبول کنند. و من فکر می کنم که آن را قادر به بهتر شدن است.
و سپس دو چیز وجود داشت که باعث شد من ذهن خود را تغییر دهم. اول، من آمده ام این مقاله ای است که واقعا به درک اثرات استفاده از منوی همبرگر کمک می کند. به طور خاص، سایت هایی با چنین منو صرفه جویی جدی در دخالت کاربران را تحمل می کنند. یک مرور کلی از چنین آماری فقط شروع به تغییر نظر من کرد.
حادثه بعدی زمانی اتفاق افتاد که من یک همکار را تماشا کردم که سعی کردم از یک برنامه وب جدید استفاده کنم که در آن فقط چنین منو بود. این یک توسعه دهنده بود که با رابط منو همبرگر بسیار آشنا بود، اما زمانی که آن را به استفاده از درخواست برای نیازهایش آمد، او با صدای بلند پرسید: "چگونه می توانم آنجا را دریافت کنم؟" این یکی را در نظر بگیرید مردم کوچکمن می دانم، و او حتی در مورد لمس نماد منو همبرگر فکر نمی کرد. اگر کسی مشکلی هوشمندانه با ناوبری داشته باشد، این در مورد یک کاربر معمولی صحبت می کند؟ نظر من در نهایت توجیه جامد را به دست آورد.
جستجو برای راه حل ها
همه چیز در مورد علل بی اعتمادی من به دلیل منوی همبرگر کافی است - وقت آن است که در مورد تصمیم صحبت کنیم. برای شروع، مزایای ویژه ای از استفاده از منوی همبرگر را مطالعه کردم:
- مقیاس پذیری: این احتمالا اصلی به علاوه و دلیل اصلی این است که بسیاری از سایت ها و برنامه های کاربردی آن را انتخاب کنید. شما می توانید بسیاری از آیتم های ناوبری را برای یک آیکون کوچک قرار دهید.
- دقت: این یک جفت به مقیاس پذیری می رود، اما هنوز هم، همان چیزی نیست. طراحان می خواهند طرح های لاکونیک و شسته و رفته را ایجاد کنند، فضای کافی برای محتوای اصلی را ترک کنند. استفاده از یک منوی همبرگر باعث احساس سادگی بصری می شود، جذاب برای هر طراح.
و اگر شما یک جایگزین برای منوی همبرگر ایجاد کنید، باید به نحوی مشکلات مربوط به او را حل کنید:
- ثبات: باید به راحتی عناصر ناوبری را پیدا کنید، به ویژه کسانی که از محصول برای اولین بار استفاده می کنند.
- درگیری: رابط باید دستورات و FidBeck را توضیح دهد، توضیح می دهد که کاربر می تواند با محصول انجام دهد، و زمانی که مناسب برای استفاده از فرصت های خاص است.
مجتمع: موبایل
من تصمیم گرفتم با مشکل سخت تر شروع کنم و بررسی کنم که آیا راه حل من مناسب است طرح های موبایل. پس از تفکر در مورد جرم ایده ها، من به این نتیجه رسیدم که منوی برگه تب iOS یکی از آن هاست بهترین تصمیمات برای رابط های تلفن همراه. توده ای از مردم سعی کردند پیمایش پانل برگه را (به طوری که بیش از پنج گزینه) و یا اضافه کردن "بیشتر" به ناوبری - چیزی مانند یک پلاک، که دارای یک اتاق اضافی است که به سرعت سطل زباله را پر می کند. همچنین، هر دو این گزینه ها هنوز مورد نیاز اصلی را برآورده نمی کنند - روشنایی، دید همه امکانات وجود ندارد. پس چه چیزی را می توان با منوی برگه ایجاد کرد تا آن را تعمیر کند؟
تصمیم من این است که یک پانل همبرگر و برگه را به یک رویکرد واحد ترکیب کنیم. نتیجه پانل برگه است، که مجموعه ای از گزینه های هر آیتم منو را باز می کند.
من یک برنامه آزمایشی برای ارزیابی بهره وری تیم برای نشان دادن رویکرد شما در کسب و کار ایجاد کردم. با استفاده از این روش، کاربر می تواند به وضوح توابع اساسی و روش های استفاده از محصول را ببینید. و به جای خوابیدن فهرست کامل آیتم های منو در پشت آیکون همبرگر پنهان شده اند، کاربر چندین گزینه را نشان می دهد که متعلق به برگه ای است که او را کلیک کرد. بنابراین ناوبری آسان تر برای درک و هضم ساده تر است، همه چیزهایی که نیاز دارید همیشه در دست است، به کاربر اجازه می دهد تا سلسله مراتب برنامه را مشاهده کند.
یکی دیگر از این طرح ها، توانایی استفاده از اعلانهای متنی است. در مورد منوی همبرگر، شما فقط یک مکان برای نمایش چنین اطلاعیه ای دارید. اگر به طرح با پانل برگه بچسبید، می توانید راهنمایی برای کاربر در هر یک از آیتم های منو انتخاب شده تولید کنید.
البته، بزرگترین پیروزی این رویکرد مقیاس پذیری است. بله، شما هنوز به پنج دسته محدود می شوید، اما خوب است. صادقانه، من فکر می کنم که هر سایت می تواند گزینه های خود را در پنج دسته قرار دهد اگر طراح با ذهن فکر می کند ناوبری. پس از همه، در هر یک از این دسته ها، ممکن است پنج یا شش زیر پاراگراف وجود داشته باشد.
این 30 گزینه امکان ناوبری را بدون احساس بیش از حد برای کاربر و بدون اشغال کل فضای صفحه نمایش می گیرد.
درخواست به قرص
ادغام چنین پانل زبانه ها به قرص ها، به نظر می رسد عجیب و غریب. قرص بسیار گسترده تر و استفاده از همان UI برای دستگاه های موبایلاین نیز به عنوان یک نوجوان در لباس مضحک به نظر می رسید، که از آن مدت طولانی رشد کرده بود. بنابراین من به راه دیگری رفتم. به جای قرار دادن پانل برگه در پایین، من آن را در کنار گذاشتم. بنابراین از لحاظ استفاده از فضای صفحه نمایش راحت تر بود و بسیار طبیعی بود. علاوه بر این، بسیاری از کاربران دارای قرص در کنار هستند، بنابراین این فقط یک منطقه هدف برای دست زدن به انگشتان شما است.
در مورد دسکتاپ چیست؟
آماده ... منوی Retractable همه چیز درست است - این رویکرد را به رابط دسکتاپ را امتحان کنید و شما یک واقعیت غیر قابل انکار روبرو خواهید شد: این گزینه در همه نیست. منوی کشویی برای سال ها استفاده شده است، و تقریبا هر کاربر (حتی مادر شما) می داند که چگونه کار می کند. در این، جذابیت این رویکرد وجود ندارد - هیچ چیز جدیدی نیست.
افشای کامل
من نمی دانم چگونه این چیز را فراخوانی کنم. سپرده رپتور؟ یا Taburger (برگه "Tab" + Burger)؟ علاوه بر این، من نمی دانم که آیا کسی یک راه حل مشابه را پیش از آن ایجاد کرد. با توجه به سادگی چنین منو، نمی توانم این ایده را که من برای اولین بار بود، اجازه دهم. من می دانم که چندین برنامه از منوهای کشویی در برخی از زبانه ها استفاده می کنند (به عنوان مثال، Tweetbot)، اما معمولا آنها به عنوان اجرا می شوند دسترسی سریع توابع برای کاربران پیشرفته، و نه به منظور ساخت یک سلسله مراتب ناوبری. اگر چنین نمونه ای دارید، به من اطلاع دهید.
مهم نیست که آیا چنین منو جدید یا طولانی اختراع شده است یا خیر. مهم این است که آیا این بهترین راه حل خلاقانه تر برای مرور در مقایسه با منوی همبرگر است. متوقف کردن صحبت کردن با خودتان "این منو در این سایت سرد وجود دارد، به این معنی است که باید بهترین باشد" یا "هر کس آن را انجام می دهد، این بدان معنی است که درست است." طراحی سزاوار یک رویکرد بهتر و دقیق تر است.
به روز رسانی ها
کالین اربگارد در توییتر اشاره کرد که همان UI در آن اجرا شد ویندوز فون. من خودم هستم کاربر ویندوز تلفن، و او درست است. اگر چه این نوع تعامل در ویندوز تلفن فقط برای گزینه "بیشتر" در پانل برگه استفاده می شود.
جیمز Perich یک مثال دیگر را در توییتر هدایت کرد. نگاهی به AhtabbarController ایجاد شده توسط Arthur Chemmer.
ساده، کاربردی، بصری و به یاد ماندنی، مانند هر علامت جاده، آیکون همبرگر تبدیل به یک روند واقعی در سال گذشته، و یک عنصر یکپارچه از هر وب سایت مدرن و طراحی نرم افزار تلفن همراه است.
این آیکون ساده تقلید می کند ظاهر لیست منو ایده آل برای دستگاه های با صفحه نمایش های کوچک و وب سایت هایی است که در آن طرف بصری مهم است و ناوبری باید کنار گذاشته شود. این یک راه حل بسیار کارآمد و قابل قبول است که مطابق با الزامات دنیای مدرن است.
مانند هر عنصر رابط دیگر، یک آیکون همبرگر می تواند برخی از انحرافات را از گزینه اصلی بر اساس نیازهای هر پروژه فردی داشته باشد.
بسته به پروژه و موضوع، آیکون همبرگر می تواند فرم های مختلفی را که طراحی را تکمیل می کند، یا می تواند تبدیل به ویژگی مستقل و متمایز آن شود.
مجموعه امروز شامل 20 تنوع مختلف آیکون های همبرگر است.
آیکون همبرگر از طراح Dave Games بلافاصله باعث انرژی زیادی می شود. سبک کارتونی بازی را اضافه می کند و تنها احساسات مثبت را ایجاد می کند. شما می توانید از چنین آیکون در بیشترین رابط های مدرن نشان داده شده استفاده کنید.
و مات واکر این آیکون را با امواج اقیانوس توسعه داد. این فوق العاده در پروژه های مختلف اختصاص داده شده به دریا احساس خواهد کرد. آبی به عنوان رنگ اولیه و قاب در اطراف این آیکون منحصر به فرد است.
پیاده سازی تمیز، روشن و شوخ طبعی این طرح را به عنوان یک آیکون منو در سایت های آشپزی کار می کند. در این مورد، رابط کاربری یک برجسته هنری دلپذیر را دریافت خواهید کرد.
طراح ارائه می دهد 10. نسخه های جالب آیکون همبرگر، که با روح ساخته شده است. این مجموعه انواع مختلفی از همبرگر را پوشش می دهد: یکی با پنیر، دیگری با بیکن، سوم با ترکیه، و بسیاری دیگر. اگر یک وب سایت دارید یا برنامه موبایلرستوران فست فود، آنها قطعا مفید خواهند بود. آنها خیلی بصری جالب هستند که می توانند تقریبا هر موضوعی را پیدا کنند.
و این پروژه نشان دهنده یک همبرگر واقع بینانه در بردار است. دکمه بسته شدن به صورت سیب زمینی سرخ شده ساخته شده است که فرم "X" را با یا بدون سس دریافت می کند. این یک راه حل خلاقانه است که می تواند عجیب و غریب در طراحی صفحه را اضافه کند.
سایت رسمی جنگ ستارگان شامل یک آیکون جالب Humburger، که تبدیل می شود. هر خط به دو بخش تقسیم می شود تا بتواند یک بردار بازتاب شمشیر لیزر نور را بدست آورد. این راه حل، تصور کلی سایت را تقویت می کند و نام تجاری را تقویت می کند.
منوی برگر از Peter Tauri نسخه کاملا نشان داده شده از آیکون است. ویژگی های کلیدی این آیکون این است که رنگ هایی را انتخاب کنید که خمیر برش و کیتلت گوشت را تقلید کنید.
این مجموعه دارای نسخه های مختلف همبرگر است که با استفاده از سبک خط اجرا می شوند. در اینجا شما یک همبرگر دوگانه، همبرگر با پنیر و سالاد، ساندویچ در فضای باز و برخی دیگر پیدا خواهید کرد. برای پیدا کردن راه حل کامل برای شسته و رفته شما، رابط تخت آسان خواهد شد برای اضافه کردن پیکانی و "طعم".
هنرمند سه نسخه خنده دار از دکمه را نشان می دهد: همبرگر کلاسیک، Cheeseburger و Hot Dog. پایه هر دروغ یک یا دو رنگ، که آن را مناسب برای رابط های مختلف کوچک است. در اینجا رنگ ظاهر صحیح ساندویچ را ایجاد می کند.
هنرمند یک انیمیشن کوچک را ارائه می دهد که شامل تنها یک آیکون منو و چندین انتقال صاف است که همراه تبدیل به "X" معمول "(دکمه بسته شدن) است. جلوه های ویژه ای وجود دارد که در هنگام شنا کردن ماوس یا فشار دادن وجود دارد.
بر خلاف بسیاری از نمونه های بالا، این نمونه نشان می دهد دستکاری های ماهرانه ای با وزن، نه رنگ. خطوط بالا و پایین تر از مشتاقان نسبت به میانگین، و دیدگاه مناسب "همبرگر" را ایجاد می کنند. هنرمند با موفقیت با این کار مقابله کرد.
انیمیشن منو آیکون نینجا از اندرو Kowardakova از بسیاری از دکمه های همبرگر متفاوت است، و راه حل جالب و برجسته را ارائه می دهد، با زیرنویس مرموز و جذاب. در اینجا هر خط یک نینجا در بردار است.
و این آیکون یک تصویر برگر با سالاد و پنیر است. این می تواند یک برجسته را به هر رابط کاربری خسته کننده اضافه کند. راه حل عالی برای سایت رستوران یا کافه.
این یک مقاله است که در آن شما می توانید استدلال های جالب در مورد آیکون منو مد روز را پیدا کنید. این با یک تصویر مشخص شده است که سه گزینه دکمه همبرگر را نشان می دهد. اولین تصویر صاف کلاس اول است، دوم نماد نقاشی شده از سه خط است، و سوم نسخه تک رنگ از نمونه دوم محبوب ترین انتخاب در میان طراحان است.
GIF نشان می دهد انتقال صاف بین وضعیت اولیه این آیکون مینیمالیستی و ظریف و دولت نهایی آن است. از آنجا که انیمیشن از خط پایین شروع می شود، کمتر از دیگران است.
منوی همبرگر از لیام Spratlin به نظر می رسد مجموعه ای از بوک مارک های مدرسه برای کتاب. این پیاده سازی جسورانه و تا حدودی خشن است. این آیکون بلافاصله قابل توجه است، با این حال، ممکن است یک محیط مناسب برای آن پیدا شود.
تا کنون، ما آیکون ها را به طور جداگانه در نظر گرفته ایم، اما آنها با کلمات به خوبی کار می کنند، به ویژه هنگامی که این کلمه "منو". اگر چه ممکن است به نظر غیر ضروری باشد، با هم به نظر می رسد که به وضوح نگاه می کنند. خطوط فوق العاده نازک از 1px گسترده، که در این مورد استفاده می شود، به عنوان بخشی از پازل ترکیب شده است.
این پروژه ثابت می کند که آیکون همبرگر ممکن است زمانی که آن را زندانی می کند، روشن تر و جذاب باشد. این انتخاب عالی برای دستگاه های کوچکجایی که چنین آیکون برای ناوبری حسی مناسب خواهد بود.
طراح یک آیکون ساده و صاف از سه خط را نشان می دهد که به متامورفوس های مختلف منتقل می شود، به یک صلیب یا فلش تبدیل می شود. انیمیشن شامل چندین راه حل است که می تواند برای هر پروژه مفید باشد.
نتایج
در نگاه اول، ممکن است به نظر می رسد که چنین مواردی به عنوان آیکون منو نباید توجه زیادی را پرداخت کند. اما اگر شما یک فانتزی کوچک را نشان دهید، می توانید آن را به یک نوع برجسته رابط کاربری خود تبدیل کنید. به ویژه اگر توسعه دهندگان شروع به بازی با معنی خود کنند و از تکنیک های هنری استفاده کنند تا آن را غیر متعارف تر و جلب توجه کنند.
