{"id":4173,"date":"2024-09-24T17:08:12","date_gmt":"2024-09-24T17:08:12","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4173"},"modified":"2026-03-09T17:39:42","modified_gmt":"2026-03-09T17:39:42","slug":"%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e9%80%89%e9%a1%b9%e5%8d%a1%e5%bc%8f%e5%af%bc%e8%88%aa","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/zh\/%e7%ad%94%e6%a1%88\/%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e9%80%89%e9%a1%b9%e5%8d%a1%e5%bc%8f%e5%af%bc%e8%88%aa\/","title":{"rendered":"\u4ec0\u4e48\u662f\u7f51\u7ad9\u9009\u9879\u5361\u5f0f\u5bfc\u822a\uff1f"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u76ee\u5f55<\/h2><nav><ul><li><a href=\"#what-are-the-advantages-and-disadvantages-of-using-tabbed-navigation\">\u4f7f\u7528\u7f51\u7ad9\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u7684\u4f18\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f<\/a><\/li><li><a href=\"#what-are-some-examples-of-websites-that-use-tabbed-navigation-effectively\">\u6709\u54ea\u4e9b\u6709\u6548\u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u7684\u7f51\u7ad9\u793a\u4f8b\uff1f<\/a><\/li><li><a href=\"#conclusion\">\u603b\u7ed3<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-advantages-and-disadvantages-of-using-tabbed-navigation\" style=\"font-size:32px\">\u4f7f\u7528\u7f51\u7ad9\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u7684\u4f18\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f<\/h2>\n\n\n\n<p style=\"font-size:18px\">\u867d\u7136\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u6709\u5229\u4e8e\u7ec4\u7ec7\u4fe1\u606f\u548c\u6539\u5584\u7528\u6237\u4f53\u9a8c\uff0c\u4f46\u60a8\u5fc5\u987b\u4e86\u89e3\u5b83\u4f55\u65f6\u53ef\u80fd\u662f\u4e0d\u5229\u7684\u3002<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>\u4e3a\u4ec0\u4e48\u8fd9\u662f\u4e00\u4e2a\u597d\u4e3b\u610f\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u8282\u7701\u7a7a\u95f4\uff1a <\/strong>\u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u6765\u6574\u5408\u591a\u4e2a\u9875\u9762\uff08\u4f8b\u5982\uff0c\u5728\u4ea7\u54c1\u9875\u9762\u4e0a\uff09\u3002&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u7ec4\u7ec7\uff1a<\/strong> \u5bf9\u76f8\u5173\u5185\u5bb9\u8fdb\u884c\u5206\u7c7b\uff0c\u4ee5\u4fbf\u7528\u6237\u8f7b\u677e\u6d4f\u89c8\u60a8\u7684\u7f51\u7ad9\uff1b\u91cd\u70b9\u662f\u4e0d\u8981\u8ba9\u7528\u6237\u8d85\u8d1f\u8377\u3002&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u4ee5\u7528\u6237\u4e3a\u4e2d\u5fc3\uff1a<\/strong> \u9009\u9879\u5361\u5f0f\u5bfc\u822a\u53ef\u80fd\u4f1a\u8ba9\u7528\u6237\u66f4\u597d\u5730\u63a7\u5236\u4ed6\u4eec\u6240\u770b\u5230\u7684\u5185\u5bb9\uff1b\u5426\u5219\uff0c\u5355\u4e2a\u9875\u9762\u53ef\u80fd\u770b\u8d77\u6765\u4f1a\u4e0d\u8fde\u8d2f\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u719f\u6089\u5ea6\uff1a<\/strong> \u9009\u9879\u5361\u5f0f\u5bfc\u822a\u4f7f\u7528\u8bbf\u95ee\u8005\u53ef\u80fd\u5df2\u7ecf\u89c1\u8fc7\u7684\u754c\u9762\u6a21\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\"><strong>\u4e3a\u4ec0\u4e48\u5b83\u5e76\u4e0d\u603b\u662f\u6700\u4f73\u9009\u62e9\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u8fc7\u8f7d\uff1a <\/strong>\u5982\u679c\u9009\u9879\u5361\u592a\u591a\uff0c\u60a8\u53ef\u80fd\u4f1a\u8ba9\u7528\u6237\u611f\u5230\u56f0\u60d1\uff1b\u9009\u62e9\u6027\u5730\u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u5c06\u963b\u6b62\u8fd9\u79cd\u60c5\u51b5\u53d1\u751f\u3002&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u79fb\u52a8\u7aef\u8bbe\u8ba1\uff1a<\/strong> \u9009\u9879\u5361\u5f0f\u5bfc\u822a\u66f4\u9002\u5408\u684c\u9762\u8bbe\u5907\uff1b\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\uff0c\u63a2\u7d22\u5176\u4ed6\u65b9\u6cd5\u53ef\u80fd\u4f1a\u5e26\u6765\u66f4\u597d\u7684\u53ef\u7528\u6027\u548c\u53c2\u4e0e\u5ea6\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"font-size:18px\"><strong>\u65e0\u969c\u788d\u8bbf\u95ee\uff1a <\/strong>\u8003\u8651\u60a8\u7684\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u662f\u5426\u6613\u4e8e\u8bbf\u95ee\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u4f7f\u7528 Web \u5185\u5bb9\u65e0\u969c\u788d\u6307\u5357 (WCAG) \u4e2d\u7684\u4fe1\u606f\u6765\u8bbe\u8ba1\u60a8\u7684\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u3002\u00a0\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-some-examples-of-websites-that-use-tabbed-navigation-effectively\" style=\"font-size:32px\">\u6709\u54ea\u4e9b\u6709\u6548\u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u7684\u7f51\u7ad9\u793a\u4f8b\uff1f<\/h2>\n\n\n\n<p style=\"font-size:18px\">\u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u7684\u7f51\u7ad9\u793a\u4f8b\u5305\u62ec Gmail\u3001Wikipedia\u3001Notion \u548c Amazon\u3002\u4f8b\u5982\uff0c\u4f7f\u7528 Gmail \u65f6\uff0c\u60a8\u4f1a\u770b\u5230\u7528\u4e8e\u4e0d\u540c\u7535\u5b50\u90ae\u4ef6\u7c7b\u578b\uff08\u6536\u4ef6\u7bb1\u3001\u672a\u8bfb\u90ae\u4ef6\u7b49\uff09\u7684\u9009\u9879\u5361\u3002&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">\u540c\u65f6\uff0cAmazon \u4f7f\u7528\u9009\u9879\u5361\u8fdb\u884c\u4ea7\u54c1\u63cf\u8ff0\u3002\u60a8\u8fd8\u4f1a\u770b\u5230\u7528\u4e8e\u4ee5\u4e0b\u5185\u5bb9\u7684\u9009\u9879\u5361\u5f0f\u5bfc\u822a <a href=\"https:\/\/hocoos.com\/zh\/%e7%ad%94%e6%a1%88\/%e4%bb%80%e4%b9%88%e6%98%af%e5%ae%a2%e6%88%b7%e8%af%84%e4%bb%b7\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-a-customer-review\/\">\u5ba2\u6237\u8bc4\u4ef7<\/a>\u3002Wikipedia \u4f7f\u7528\u9009\u9879\u5361\u5f0f\u5bfc\u822a\uff0c\u4ee5\u4fbf\u7528\u6237\u5728\u67e5\u770b\u9875\u9762\u65f6\u53ef\u4ee5\u5728\u4e0d\u540c\u8bed\u8a00\u4e4b\u95f4\u5207\u6362\u3002<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\">\u603b\u7ed3<\/h2>\n\n\n\n<p style=\"font-size:18px\">\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u6709\u52a9\u4e8e\u7b80\u5316\u5185\u5bb9\u548c<a href=\"https:\/\/hocoos.com\/zh\/%e7%ad%94%e6%a1%88\/%e4%bb%80%e4%b9%88%e6%98%af%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e8%ae%be%e8%ae%a1\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-ux-design\/\"> \u7528\u6237\u4f53\u9a8c <\/a>\uff08\u5982\u679c\u60a8\u4e86\u89e3\u5176\u7f3a\u70b9\u5e76\u8003\u8651\u5b83\u5e76\u975e\u6700\u4f73\u9009\u62e9\u7684\u60c5\u51b5\uff09\u3002<\/p>\n\n\n\n<p style=\"font-size:18px\">\u5b9e\u65bd\u9009\u9879\u5361\u5f0f\u5bfc\u822a\u65f6\uff0c\u8bf7\u8003\u8651\u987a\u5e8f\u3001\u6807\u7b7e\u548c\u53ef\u8bbf\u95ee\u6027\u3002\u8fd8\u8981\u8003\u8651\u60a8\u53ef\u4ee5\u5728\u4e0d\u4f7f\u7528\u6237\u4fe1\u606f\u8fc7\u8f7d\u7684\u60c5\u51b5\u4e0b\u6dfb\u52a0\u7684\u4fe1\u606f\u91cf\uff1b\u5982\u679c\u60a8\u9700\u8981\u53c2\u8003\uff0c\u8bf7\u67e5\u770b\u5df2\u4f7f\u7528\u6b64\u5143\u7d20\u7684\u7f51\u7ad9\u3002<\/p>","protected":false},"excerpt":{"rendered":"<p>What are the advantages and disadvantages of using website tabbed navigation? While tabbed navigation is beneficial for organizing information and improving the user experience, you must understand when it might be disadvantageous. Why it\u2019s a good idea: Why it\u2019s not always the best option: Pro Tip: Use information in the Web Content Accessibility Guidelines (WCAG) [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4183,"template":"","answers_category":[29],"class_list":["post-4173","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-navigation"],"acf":{"image":8096,"card_image":4183,"content":[{"acf_fc_layout":"header_section","title":"What is a Tabbed Navigation?","descriptions":"Tabbed navigation organizes content into sections on a single page via clickable tabs. It\u2019s used in eCommerce and on other websites; the aim is so that users can switch between on-page elements.\r\n\r\nBusinesses use tabbed navigation for saving screen space. Use tabbed navigation when you have significant information to present and don\u2019t want to overwhelm visitors\/so that they can control what they see on the page.\r\n\r\nTabbed navigation might impact site accessibility through organizing content when implemented correctly. Users should find content more easily after you\u2019ve implemented it, and for this reason, you must carefully consider your layout in the planning phase.\r\n\r\nThink about color contrast, the level of compatibility on different screens, and whether users can navigate on their keyboards.","tip_label":"Pro Tips","tip":"\u2022 Give your tabs clear labels to help users find information.","additional_tips":[{"tip":"\u2022 If you\u2019re an eCommerce website, consider using tab navigation for product details, reviews, shipping information, and other bits of information."}],"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"While tabbed navigation can effectively organize content, use it carefully to avoid overwhelming users","body":""},{"label":"Focus on accessibility and use logical ordering\/clear labels","body":""},{"label":"Instead of tabbed navigation, think about carousels\/accordions if you have limited space","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer\/4173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media\/4183"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media?parent=4173"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answers_category?post=4173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}