{"id":1009,"date":"2026-07-12T13:49:55","date_gmt":"2026-07-12T13:49:55","guid":{"rendered":"https:\/\/hyc.eshachem.com\/program\/?p=1009"},"modified":"2026-07-12T14:04:30","modified_gmt":"2026-07-12T14:04:30","slug":"uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e","status":"publish","type":"post","link":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/","title":{"rendered":"UIUX &#8211; UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"%e4%b8%80%e3%80%81%e5%b0%8e%e8%a6%bd%e8%88%87%e7%b5%90%e6%a7%8b%e9%a1%9e-navigation-layout\">\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"navbar%ef%bc%88%e5%b0%8e%e8%a6%bd%e5%88%97%ef%bc%89\">Navbar\uff08\u5c0e\u89bd\u5217\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sidebar%ef%bc%88%e5%81%b4%e9%82%8a%e6%ac%84%ef%bc%89\">Sidebar\uff08\u5074\u908a\u6b04\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"breadcrumb%ef%bc%88%e9%ba%b5%e5%8c%85%e5%b1%91%ef%bc%89\">Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hamburger-menu%ef%bc%88%e6%bc%a2%e5%a0%a1%e9%81%b8%e5%96%ae%ef%bc%89\">Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tab%ef%bc%88%e5%88%86%e9%a0%81-%e6%a8%99%e7%b1%a4%e9%a0%81%ef%bc%89\">Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"footer%ef%bc%88%e9%a0%81%e5%b0%be%ef%bc%89\">Footer\uff08\u9801\u5c3e\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"%e4%ba%8c%e3%80%81%e5%bd%88%e5%87%ba%e8%88%87%e8%a6%86%e8%93%8b%e9%a1%9e-overlays-popups\">\u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pop-up%ef%bc%88%e5%bd%88%e5%87%ba%e8%a6%96%e7%aa%97%ef%bc%89\">Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"modal%ef%bc%88%e5%bc%b7%e5%88%b6%e4%ba%92%e5%8b%95%e5%b0%8d%e8%a9%b1%e6%a1%86%ef%bc%89\">Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dialog%ef%bc%88%e5%b0%8d%e8%a9%b1%e6%a1%86%ef%bc%89\">Dialog\uff08\u5c0d\u8a71\u6846\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tooltip%ef%bc%88%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%89\">Tooltip\uff08\u63d0\u793a\u6846\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dropdown%ef%bc%88%e4%b8%8b%e6%8b%89%e9%81%b8%e5%96%ae%ef%bc%89\">Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toast-snackbar%ef%bc%88%e6%b5%ae%e5%8b%95%e9%80%9a%e7%9f%a5%ef%bc%89\">Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"%e4%b8%89%e3%80%81%e5%85%a7%e5%ae%b9%e5%b1%95%e7%a4%ba%e9%a1%9e-content-display\">\u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"card%ef%bc%88%e5%8d%a1%e7%89%87%ef%bc%89\">Card\uff08\u5361\u7247\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"carousel-slider%ef%bc%88%e8%bc%aa%e6%92%ad%ef%bc%89\">Carousel \/ Slider\uff08\u8f2a\u64ad\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accordion%ef%bc%88%e6%89%8b%e9%a2%a8%e7%90%b4-%e6%91%ba%e7%96%8a%e9%9d%a2%e6%9d%bf%ef%bc%89\">Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u53ef\u5c55\u958b\u8207\u6536\u5408\u7684\u5340\u584a\uff0c\u9ede\u64ca\u6a19\u984c\u986f\u793a\u6216\u96b1\u85cf\u5167\u5bb9\uff0c\u9069\u5408 FAQ\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hero%ef%bc%88%e4%b8%bb%e8%a6%96%e8%a6%ba%e5%8d%80%ef%bc%89\">Hero\uff08\u4e3b\u8996\u89ba\u5340\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9801\u9762\u9802\u90e8\u5927\u578b\u8996\u89ba\u5340\u584a\uff0c\u901a\u5e38\u5305\u542b\u4e3b\u6a19\u984c\u3001\u5927\u5716\u8207\u884c\u52d5\u547c\u7c72\u6309\u9215 (CTA)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"skeleton%ef%bc%88%e9%aa%a8%e6%9e%b6%e5%b1%8f%ef%bc%89\">Skeleton\uff08\u9aa8\u67b6\u5c4f\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8cc7\u6599\u8f09\u5165\u524d\u986f\u793a\u7684\u7070\u8272\u4f54\u4f4d\u6846\u67b6\uff0c\u8b93\u4f7f\u7528\u8005\u611f\u53d7\u5230\u5167\u5bb9\u6b63\u5728\u8f09\u5165\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"%e5%9b%9b%e3%80%81%e6%93%8d%e4%bd%9c%e8%88%87%e8%bc%b8%e5%85%a5%e9%a1%9e-actions-inputs\">\u56db\u3001\u64cd\u4f5c\u8207\u8f38\u5165\u985e (Actions &amp; Inputs)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"button%ef%bc%88%e6%8c%89%e9%88%95%ef%bc%89\">Button\uff08\u6309\u9215\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u89f8\u767c\u52d5\u4f5c\u7684\u5143\u4ef6\uff0c\u5e38\u5206\u70ba\u4e3b\u8981\u6309\u9215 (Primary)\u3001\u6b21\u8981\u6309\u9215 (Secondary)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fab%ef%bc%88%e6%b5%ae%e5%8b%95%e6%93%8d%e4%bd%9c%e6%8c%89%e9%88%95%ef%bc%8cfloating-action-button%ef%bc%89\">FAB\uff08\u6d6e\u52d5\u64cd\u4f5c\u6309\u9215\uff0cFloating Action Button\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6f02\u6d6e\u65bc\u756b\u9762\u53f3\u4e0b\u89d2\u7684\u5713\u5f62\u6309\u9215\uff0c\u4ee3\u8868\u6700\u4e3b\u8981\u7684\u64cd\u4f5c\uff08\u5982\u65b0\u589e\uff09\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"checkbox-radio%ef%bc%88%e6%a0%b8%e5%8f%96%e6%96%b9%e5%a1%8a-%e5%96%ae%e9%81%b8%e9%88%95%ef%bc%89\">Checkbox \/ Radio\uff08\u6838\u53d6\u65b9\u584a \/ \u55ae\u9078\u9215\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Checkbox \u53ef\u591a\u9078\uff0cRadio \u65bc\u4e00\u7d44\u9078\u9805\u4e2d\u50c5\u80fd\u9078\u4e00\u500b\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toggle-switch%ef%bc%88%e9%96%8b%e9%97%9c%ef%bc%89\">Toggle \/ Switch\uff08\u958b\u95dc\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7528\u65bc\u5207\u63db\u958b\u555f\u6216\u95dc\u9589\u72c0\u614b\uff0c\u5982\u6df1\u8272\u6a21\u5f0f\u958b\u95dc\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"input-text-field%ef%bc%88%e8%bc%b8%e5%85%a5%e6%a1%86%ef%bc%89\">Input \/ Text Field\uff08\u8f38\u5165\u6846\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8b93\u4f7f\u7528\u8005\u8f38\u5165\u6587\u5b57\u7684\u6b04\u4f4d\uff0c\u5e38\u642d\u914d Placeholder\uff08\u63d0\u793a\u6587\u5b57\uff09\u8207 Label\uff08\u6a19\u7c64\uff09\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"%e4%ba%94%e3%80%81%e7%8b%80%e6%85%8b%e8%88%87%e6%a8%99%e7%a4%ba%e9%a1%9e-status-indicators\">\u4e94\u3001\u72c0\u614b\u8207\u6a19\u793a\u985e (Status &amp; Indicators)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badge%ef%bc%88%e5%be%bd%e7%ab%a0%ef%bc%89\">Badge\uff08\u5fbd\u7ae0\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9644\u52a0\u65bc\u5143\u4ef6\u4e0a\u7684\u5c0f\u6a19\u8a18\uff0c\u986f\u793a\u6578\u91cf\u6216\u72c0\u614b\uff0c\u5982\u672a\u8b80\u8a0a\u606f\u6578\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chip-tag%ef%bc%88%e6%a8%99%e7%b1%a4%e7%89%87%ef%bc%89\">Chip \/ Tag\uff08\u6a19\u7c64\u7247\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c0f\u578b\u53ef\u9ede\u64ca\u7684\u6a19\u7c64\uff0c\u7528\u65bc\u7be9\u9078\u3001\u5206\u985e\u6216\u986f\u793a\u95dc\u9375\u5b57\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"progress-bar-spinner%ef%bc%88%e9%80%b2%e5%ba%a6%e6%a2%9d-%e8%bc%89%e5%85%a5%e5%8b%95%e7%95%ab%ef%bc%89\">Progress Bar \/ Spinner\uff08\u9032\u5ea6\u689d \/ \u8f09\u5165\u52d5\u756b\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8868\u793a\u9032\u5ea6\u6216\u8f09\u5165\u4e2d\u7684\u72c0\u614b\uff0cSpinner \u70ba\u65cb\u8f49\u7684\u74b0\u72c0\u52d5\u756b\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"avatar%ef%bc%88%e9%a0%ad%e5%83%8f%ef%bc%89\">Avatar\uff08\u982d\u50cf\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee3\u8868\u4f7f\u7528\u8005\u7684\u5713\u5f62\u6216\u65b9\u5f62\u5716\u50cf\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u5efa\u7acb\u5171\u540c\u7684 UI \u8a5e\u5f59\uff0c\u80fd\u5927\u5e45\u964d\u4f4e\u8a2d\u8a08\u8207\u958b\u767c\u4e4b\u9593\u7684\u6e9d\u901a\u6210\u672c\u3002<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-1009","post","type-post","status-publish","format-standard","hentry","category-front-end"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"H.Y. Chen\"\/>\n\t<meta name=\"google-site-verification\" content=\"-324YR5tomynX5FeTW2lTMHIX0KmPBvpxjXpOhXwi1Q\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"HyC Wiki - Technical articles\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki\" \/>\n\t\t<meta property=\"og:description\" content=\"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"64\" \/>\n\t\t<meta property=\"og:image:height\" content=\"64\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-07-12T13:49:55+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-07-12T14:04:30+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#blogposting\",\"name\":\"UIUX \\u2013 UI\\u6a23\\u5f0f\\u5c08\\u6709\\u540d\\u8a5e - HyC Wiki\",\"headline\":\"UIUX &#8211; UI\\u6a23\\u5f0f\\u5c08\\u6709\\u540d\\u8a5e\",\"author\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#articleImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"H.Y. Chen\"},\"datePublished\":\"2026-07-12T13:49:55+00:00\",\"dateModified\":\"2026-07-12T14:04:30+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#webpage\"},\"articleSection\":\"Front-End\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/category\\\/front-end\\\/#listItem\",\"name\":\"Front-End\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/category\\\/front-end\\\/#listItem\",\"position\":2,\"name\":\"Front-End\",\"item\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/category\\\/front-end\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#listItem\",\"name\":\"UIUX &#8211; UI\\u6a23\\u5f0f\\u5c08\\u6709\\u540d\\u8a5e\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#listItem\",\"position\":3,\"name\":\"UIUX &#8211; UI\\u6a23\\u5f0f\\u5c08\\u6709\\u540d\\u8a5e\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/category\\\/front-end\\\/#listItem\",\"name\":\"Front-End\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#person\",\"name\":\"H.Y. Chen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"H.Y. Chen\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\",\"url\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/\",\"name\":\"H.Y. Chen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"H.Y. Chen\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#webpage\",\"url\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/\",\"name\":\"UIUX \\u2013 UI\\u6a23\\u5f0f\\u5c08\\u6709\\u540d\\u8a5e - HyC Wiki\",\"description\":\"\\u4e00\\u3001\\u5c0e\\u89bd\\u8207\\u7d50\\u69cb\\u985e (Navigation & Layout) Navbar\\uff08\\u5c0e\\u89bd\\u5217\\uff09 \\u4f4d\\u65bc\\u9801\\u9762\\u9802\\u7aef\\u6216\\u5074\\u908a\\uff0c\\u5305\\u542b\\u7db2\\u7ad9\\u4e3b\\u8981\\u9023\\u7d50\\uff08Logo\\u3001\\u9078\\u55ae\\u3001\\u641c\\u5c0b\\u3001\\u767b\\u5165\\uff09\\u3002\\u662f\\u4f7f\\u7528\\u8005\\u5b9a\\u4f4d\\u8207\\u8df3\\u8f49\\u7684\\u6838\\u5fc3\\u3002 Sidebar\\uff08\\u5074\\u908a\\u6b04\\uff09 \\u5782\\u76f4\\u6392\\u5217\\u65bc\\u756b\\u9762\\u5de6\\u5074\\u6216\\u53f3\\u5074\\u7684\\u5c0e\\u89bd\\u5340\\u584a\\uff0c\\u5e38\\u898b\\u65bc\\u5f8c\\u53f0\\u7ba1\\u7406\\u7cfb\\u7d71\\u8207\\u6587\\u4ef6\\u7db2\\u7ad9\\u3002 Breadcrumb\\uff08\\u9eb5\\u5305\\u5c51\\uff09 \\u986f\\u793a\\u76ee\\u524d\\u9801\\u9762\\u5728\\u7db2\\u7ad9\\u968e\\u5c64\\u4e2d\\u7684\\u4f4d\\u7f6e\\uff0c\\u4f8b\\u5982\\u300c\\u9996\\u9801 > \\u7522\\u54c1 > \\u624b\\u6a5f\\u300d\\uff0c\\u65b9\\u4fbf\\u4f7f\\u7528\\u8005\\u56de\\u5230\\u4e0a\\u5c64\\u3002 Hamburger Menu\\uff08\\u6f22\\u5821\\u9078\\u55ae\\uff09 \\u7531\\u4e09\\u689d\\u6a6b\\u7dda\\u7d44\\u6210\\u7684\\u5716\\u793a\\uff08\\u2630\\uff09\\uff0c\\u9ede\\u64ca\\u5f8c\\u5c55\\u958b\\u96b1\\u85cf\\u7684\\u5c0e\\u89bd\\u9078\\u55ae\\uff0c\\u5e38\\u7528\\u65bc\\u884c\\u52d5\\u88dd\\u7f6e\\u3002 Tab\\uff08\\u5206\\u9801 \\\/ \\u6a19\\u7c64\\u9801\\uff09 \\u5c07\\u5167\\u5bb9\\u5206\\u7d44\\u65bc\\u540c\\u4e00\\u5340\\u57df\\uff0c\\u9ede\\u64ca\\u4e0d\\u540c\\u6a19\\u7c64\\u5207\\u63db\\u986f\\u793a\\u5c0d\\u61c9\\u5167\\u5bb9\\uff0c\\u4e0d\\u9700\\u63db\\u9801\\u3002 Footer\\uff08\\u9801\\u5c3e\\uff09 \\u9801\\u9762\\u6700\\u5e95\\u90e8\\u5340\\u584a\\uff0c\\u901a\\u5e38\\u653e\\u7248\\u6b0a\\u8cc7\\u8a0a\\u3001\\u806f\\u7d61\\u65b9\\u5f0f\\u3001\\u6b21\\u8981\\u9023\\u7d50\\u3002 \\u4e8c\\u3001\\u5f48\\u51fa\\u8207\\u8986\\u84cb\\u985e (Overlays & Popups) Pop-up\\uff08\\u5f48\\u51fa\\u8996\\u7a97\\uff09 \\u6cdb\\u6307\\u5f9e\\u756b\\u9762\\u4e2d\\u300c\\u5f48\\u51fa\\u300d\\u8986\\u84cb\\u5728\\u539f\\u5167\\u5bb9\\u4e0a\\u7684\\u8996\\u7a97\\uff0c\\u53ef\\u80fd\\u662f\\u5ee3\\u544a\\u3001\\u63d0\\u793a\\u6216\\u8868\\u55ae\\u3002 Modal\\uff08\\u5f37\\u5236\\u4e92\\u52d5\\u5c0d\\u8a71\\u6846\\uff09 \\u5f48\\u51fa\\u65bc\\u756b\\u9762\\u4e2d\\u592e\\u4e26\\u9644\\u5e36\\u906e\\u7f69\\u80cc\\u666f (Overlay)\\uff0c\\u4f7f\\u7528\\u8005\\u5fc5\\u9808\\u5148\\u8655\\u7406\\u5b83\\uff08\\u78ba\\u8a8d\\u6216\\u95dc\\u9589\\uff09\\u624d\\u80fd\\u7e7c\\u7e8c\\u64cd\\u4f5c\\u80cc\\u5f8c\\u5167\\u5bb9\\u3002 Dialog\\uff08\\u5c0d\\u8a71\\u6846\\uff09 \\u8207\\u4f7f\\u7528\\u8005\\u4e92\\u52d5\\u7684\\u5c0f\\u8996\\u7a97\\uff0c\\u7528\\u65bc\\u78ba\\u8a8d\\u3001\\u8b66\\u544a\\u6216\\u8f38\\u5165\\uff0c\\u4f8b\\u5982\\u300c\\u78ba\\u5b9a\\u8981\\u522a\\u9664\\u55ce\\uff1f\\u300d\\u3002 Tooltip\\uff08\\u63d0\\u793a\\u6846\\uff09 \\u6ed1\\u9f20\\u79fb\\u5230\\u5143\\u4ef6\\u4e0a\\u6642\\u51fa\\u73fe\\u7684\\u5c0f\\u578b\\u6587\\u5b57\\u8aaa\\u660e\\uff0c\\u7528\\u65bc\\u88dc\\u5145\\u5716\\u793a\\u6216\\u6309\\u9215\\u7684\\u7528\\u9014\\u3002 Dropdown\\uff08\\u4e0b\\u62c9\\u9078\\u55ae\\uff09 \\u9ede\\u64ca\\u5f8c\\u5411\\u4e0b\\u5c55\\u958b\\u7684\\u9078\\u9805\\u6e05\\u55ae\\uff0c\\u7528\\u65bc\\u9078\\u64c7\\u6216\\u986f\\u793a\\u66f4\\u591a\\u64cd\\u4f5c\\u3002 Toast \\\/ Snackbar\\uff08\\u6d6e\\u52d5\\u901a\\u77e5\\uff09 \\u77ed\\u66ab\\u51fa\\u73fe\\u65bc\\u756b\\u9762\\u908a\\u89d2\\u7684\\u8f15\\u91cf\\u63d0\\u793a\\u8a0a\\u606f\\uff08\\u5982\\u300c\\u5132\\u5b58\\u6210\\u529f\\u300d\\uff09\\uff0c\\u6578\\u79d2\\u5f8c\\u81ea\\u52d5\\u6d88\\u5931\\u3002 \\u4e09\\u3001\\u5167\\u5bb9\\u5c55\\u793a\\u985e (Content Display) Card\\uff08\\u5361\\u7247\\uff09 \\u4ee5\\u77e9\\u5f62\\u5bb9\\u5668\\u5305\\u88dd\\u4e00\\u7d44\\u76f8\\u95dc\\u8cc7\\u8a0a\\uff08\\u5716\\u7247\\u3001\\u6a19\\u984c\\u3001\\u6587\\u5b57\\u3001\\u6309\\u9215\\uff09\\uff0c\\u5e38\\u898b\\u65bc\\u5546\\u54c1\\u5217\\u8868\\u3001\\u8cbc\\u6587\\u3002 Carousel \\\/ Slider\\uff08\\u8f2a\\u64ad\\uff09 \\u53ef\\u5de6\\u53f3\\u6ed1\\u52d5\\u5207\\u63db\\u7684\\u5716\\u7247\\u6216\\u5167\\u5bb9\\u5340\\u584a\\uff0c\\u5e38\\u7528\\u65bc\\u9996\\u9801 Banner\\u3002 Accordion\\uff08\\u624b\\u98a8\\u7434 \\\/ \\u647a\\u758a\\u9762\\u677f\\uff09\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"datePublished\":\"2026-07-12T13:49:55+00:00\",\"dateModified\":\"2026-07-12T14:04:30+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#website\",\"url\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/\",\"name\":\"HyC Wiki\",\"description\":\"Technical articles\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki","description":"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation & Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 > \u7522\u54c1 > \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays & Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09","canonical_url":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"-324YR5tomynX5FeTW2lTMHIX0KmPBvpxjXpOhXwi1Q","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#blogposting","name":"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki","headline":"UIUX &#8211; UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e","author":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"publisher":{"@id":"https:\/\/hyc.eshachem.com\/program\/#person"},"image":{"@type":"ImageObject","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#articleImage","url":"https:\/\/secure.gravatar.com\/avatar\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g","width":96,"height":96,"caption":"H.Y. Chen"},"datePublished":"2026-07-12T13:49:55+00:00","dateModified":"2026-07-12T14:04:30+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#webpage"},"isPartOf":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#webpage"},"articleSection":"Front-End"},{"@type":"BreadcrumbList","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program#listItem","position":1,"name":"Home","item":"https:\/\/hyc.eshachem.com\/program","nextItem":{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/#listItem","name":"Front-End"}},{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/#listItem","position":2,"name":"Front-End","item":"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/","nextItem":{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#listItem","name":"UIUX &#8211; UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e"},"previousItem":{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#listItem","position":3,"name":"UIUX &#8211; UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e","previousItem":{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/#listItem","name":"Front-End"}}]},{"@type":"Person","@id":"https:\/\/hyc.eshachem.com\/program\/#person","name":"H.Y. Chen","image":{"@type":"ImageObject","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g","width":96,"height":96,"caption":"H.Y. Chen"}},{"@type":"Person","@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author","url":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/","name":"H.Y. Chen","image":{"@type":"ImageObject","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/fc6e05e080c9ea570267ee9ed68c8b1841d745cee07c0331c5440646e0646603?s=96&d=mm&r=g","width":96,"height":96,"caption":"H.Y. Chen"}},{"@type":"WebPage","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#webpage","url":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/","name":"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki","description":"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation & Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 > \u7522\u54c1 > \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays & Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/hyc.eshachem.com\/program\/#website"},"breadcrumb":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/#breadcrumblist"},"author":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"creator":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"datePublished":"2026-07-12T13:49:55+00:00","dateModified":"2026-07-12T14:04:30+00:00"},{"@type":"WebSite","@id":"https:\/\/hyc.eshachem.com\/program\/#website","url":"https:\/\/hyc.eshachem.com\/program\/","name":"HyC Wiki","description":"Technical articles","inLanguage":"en-US","publisher":{"@id":"https:\/\/hyc.eshachem.com\/program\/#person"}}]},"og:locale":"en_US","og:site_name":"HyC Wiki - Technical articles","og:type":"article","og:title":"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki","og:description":"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09","og:url":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/","og:image":"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png","og:image:secure_url":"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png","og:image:width":64,"og:image:height":64,"article:published_time":"2026-07-12T13:49:55+00:00","article:modified_time":"2026-07-12T14:04:30+00:00","twitter:card":"summary_large_image","twitter:title":"UIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e - HyC Wiki","twitter:description":"\u4e00\u3001\u5c0e\u89bd\u8207\u7d50\u69cb\u985e (Navigation &amp; Layout) Navbar\uff08\u5c0e\u89bd\u5217\uff09 \u4f4d\u65bc\u9801\u9762\u9802\u7aef\u6216\u5074\u908a\uff0c\u5305\u542b\u7db2\u7ad9\u4e3b\u8981\u9023\u7d50\uff08Logo\u3001\u9078\u55ae\u3001\u641c\u5c0b\u3001\u767b\u5165\uff09\u3002\u662f\u4f7f\u7528\u8005\u5b9a\u4f4d\u8207\u8df3\u8f49\u7684\u6838\u5fc3\u3002 Sidebar\uff08\u5074\u908a\u6b04\uff09 \u5782\u76f4\u6392\u5217\u65bc\u756b\u9762\u5de6\u5074\u6216\u53f3\u5074\u7684\u5c0e\u89bd\u5340\u584a\uff0c\u5e38\u898b\u65bc\u5f8c\u53f0\u7ba1\u7406\u7cfb\u7d71\u8207\u6587\u4ef6\u7db2\u7ad9\u3002 Breadcrumb\uff08\u9eb5\u5305\u5c51\uff09 \u986f\u793a\u76ee\u524d\u9801\u9762\u5728\u7db2\u7ad9\u968e\u5c64\u4e2d\u7684\u4f4d\u7f6e\uff0c\u4f8b\u5982\u300c\u9996\u9801 &gt; \u7522\u54c1 &gt; \u624b\u6a5f\u300d\uff0c\u65b9\u4fbf\u4f7f\u7528\u8005\u56de\u5230\u4e0a\u5c64\u3002 Hamburger Menu\uff08\u6f22\u5821\u9078\u55ae\uff09 \u7531\u4e09\u689d\u6a6b\u7dda\u7d44\u6210\u7684\u5716\u793a\uff08\u2630\uff09\uff0c\u9ede\u64ca\u5f8c\u5c55\u958b\u96b1\u85cf\u7684\u5c0e\u89bd\u9078\u55ae\uff0c\u5e38\u7528\u65bc\u884c\u52d5\u88dd\u7f6e\u3002 Tab\uff08\u5206\u9801 \/ \u6a19\u7c64\u9801\uff09 \u5c07\u5167\u5bb9\u5206\u7d44\u65bc\u540c\u4e00\u5340\u57df\uff0c\u9ede\u64ca\u4e0d\u540c\u6a19\u7c64\u5207\u63db\u986f\u793a\u5c0d\u61c9\u5167\u5bb9\uff0c\u4e0d\u9700\u63db\u9801\u3002 Footer\uff08\u9801\u5c3e\uff09 \u9801\u9762\u6700\u5e95\u90e8\u5340\u584a\uff0c\u901a\u5e38\u653e\u7248\u6b0a\u8cc7\u8a0a\u3001\u806f\u7d61\u65b9\u5f0f\u3001\u6b21\u8981\u9023\u7d50\u3002 \u4e8c\u3001\u5f48\u51fa\u8207\u8986\u84cb\u985e (Overlays &amp; Popups) Pop-up\uff08\u5f48\u51fa\u8996\u7a97\uff09 \u6cdb\u6307\u5f9e\u756b\u9762\u4e2d\u300c\u5f48\u51fa\u300d\u8986\u84cb\u5728\u539f\u5167\u5bb9\u4e0a\u7684\u8996\u7a97\uff0c\u53ef\u80fd\u662f\u5ee3\u544a\u3001\u63d0\u793a\u6216\u8868\u55ae\u3002 Modal\uff08\u5f37\u5236\u4e92\u52d5\u5c0d\u8a71\u6846\uff09 \u5f48\u51fa\u65bc\u756b\u9762\u4e2d\u592e\u4e26\u9644\u5e36\u906e\u7f69\u80cc\u666f (Overlay)\uff0c\u4f7f\u7528\u8005\u5fc5\u9808\u5148\u8655\u7406\u5b83\uff08\u78ba\u8a8d\u6216\u95dc\u9589\uff09\u624d\u80fd\u7e7c\u7e8c\u64cd\u4f5c\u80cc\u5f8c\u5167\u5bb9\u3002 Dialog\uff08\u5c0d\u8a71\u6846\uff09 \u8207\u4f7f\u7528\u8005\u4e92\u52d5\u7684\u5c0f\u8996\u7a97\uff0c\u7528\u65bc\u78ba\u8a8d\u3001\u8b66\u544a\u6216\u8f38\u5165\uff0c\u4f8b\u5982\u300c\u78ba\u5b9a\u8981\u522a\u9664\u55ce\uff1f\u300d\u3002 Tooltip\uff08\u63d0\u793a\u6846\uff09 \u6ed1\u9f20\u79fb\u5230\u5143\u4ef6\u4e0a\u6642\u51fa\u73fe\u7684\u5c0f\u578b\u6587\u5b57\u8aaa\u660e\uff0c\u7528\u65bc\u88dc\u5145\u5716\u793a\u6216\u6309\u9215\u7684\u7528\u9014\u3002 Dropdown\uff08\u4e0b\u62c9\u9078\u55ae\uff09 \u9ede\u64ca\u5f8c\u5411\u4e0b\u5c55\u958b\u7684\u9078\u9805\u6e05\u55ae\uff0c\u7528\u65bc\u9078\u64c7\u6216\u986f\u793a\u66f4\u591a\u64cd\u4f5c\u3002 Toast \/ Snackbar\uff08\u6d6e\u52d5\u901a\u77e5\uff09 \u77ed\u66ab\u51fa\u73fe\u65bc\u756b\u9762\u908a\u89d2\u7684\u8f15\u91cf\u63d0\u793a\u8a0a\u606f\uff08\u5982\u300c\u5132\u5b58\u6210\u529f\u300d\uff09\uff0c\u6578\u79d2\u5f8c\u81ea\u52d5\u6d88\u5931\u3002 \u4e09\u3001\u5167\u5bb9\u5c55\u793a\u985e (Content Display) Card\uff08\u5361\u7247\uff09 \u4ee5\u77e9\u5f62\u5bb9\u5668\u5305\u88dd\u4e00\u7d44\u76f8\u95dc\u8cc7\u8a0a\uff08\u5716\u7247\u3001\u6a19\u984c\u3001\u6587\u5b57\u3001\u6309\u9215\uff09\uff0c\u5e38\u898b\u65bc\u5546\u54c1\u5217\u8868\u3001\u8cbc\u6587\u3002 Carousel \/ Slider\uff08\u8f2a\u64ad\uff09 \u53ef\u5de6\u53f3\u6ed1\u52d5\u5207\u63db\u7684\u5716\u7247\u6216\u5167\u5bb9\u5340\u584a\uff0c\u5e38\u7528\u65bc\u9996\u9801 Banner\u3002 Accordion\uff08\u624b\u98a8\u7434 \/ \u647a\u758a\u9762\u677f\uff09","twitter:image":"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/06\/cropped-cropped-\u672a\u547d\u540d\u8a2d\u8a08-4.png"},"aioseo_meta_data":{"post_id":"1009","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-07-28 14:33:05","updated":"2026-07-28 14:33:05"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/hyc.eshachem.com\/program\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/\" title=\"Front-End\">Front-End<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUIUX \u2013 UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/hyc.eshachem.com\/program"},{"label":"Front-End","link":"https:\/\/hyc.eshachem.com\/program\/category\/front-end\/"},{"label":"UIUX &#8211; UI\u6a23\u5f0f\u5c08\u6709\u540d\u8a5e","link":"https:\/\/hyc.eshachem.com\/program\/uiux-ui%e6%a8%a3%e5%bc%8f%e5%b0%88%e6%9c%89%e5%90%8d%e8%a9%9e\/"}],"views":25,"_links":{"self":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/comments?post=1009"}],"version-history":[{"count":1,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"predecessor-version":[{"id":1010,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1009\/revisions\/1010"}],"wp:attachment":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}