{"id":1248,"date":"2026-11-05T03:52:36","date_gmt":"2026-11-05T03:52:36","guid":{"rendered":"https:\/\/hyc.eshachem.com\/program\/?p=1248"},"modified":"2026-11-07T09:01:22","modified_gmt":"2026-11-07T09:01:22","slug":"uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e","status":"publish","type":"post","link":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/","title":{"rendered":"UIUX &#8211; \u5e73\u9762\u8a2d\u8a08\u57fa\u790e"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%e4%b8%80%e3%80%81%e7%9f%a5%e8%a6%ba%e5%ae%9a%e5%be%8b%ef%bc%9a%e6%a0%bc%e5%bc%8f%e5%a1%94%e5%8e%9f%e5%89%87%ef%bc%88gestalt-principles%ef%bc%89\">\u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09<\/strong>\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002<\/li>\n\n\n\n<li><strong>\u76f8\u4f3c\u6027\uff08Similarity\uff09<\/strong>\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002<\/li>\n\n\n\n<li><strong>\u9023\u7e8c\u6027\uff08Continuity\uff09<\/strong>\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002<\/li>\n\n\n\n<li><strong>\u5c01\u9589\u6027\uff08Closure\uff09<\/strong>\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002<\/li>\n\n\n\n<li><strong>\u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09<\/strong>\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002<\/li>\n\n\n\n<li><strong>\u5171\u540c\u5340\u57df\uff08Common Region\uff09<\/strong>\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09<\/li>\n\n\n\n<li><strong>\u5171\u540c\u547d\u904b\uff08Common Fate\uff09<\/strong>\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002<\/li>\n\n\n\n<li><strong>\u9023\u63a5\u6027\uff08Uniform Connectedness\uff09<\/strong>\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09<\/li>\n\n\n\n<li><strong>\u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09<\/strong>\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"1024\" src=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1-983x1024.png\" alt=\"\" class=\"wp-image-1251\" style=\"aspect-ratio:0.9599657155101603;width:698px;height:auto\" srcset=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1-983x1024.png 983w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1-288x300.png 288w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1-767x799.png 767w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1-1475x1536.png 1475w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1.png 1650w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"%e8%a3%9c%e5%85%85%ef%bc%9a%e5%89%8d%e6%b3%a8%e6%84%8f%e5%b1%ac%e6%80%a7%ef%bc%88pre-attentive-attributes%ef%bc%89\">\u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2-1024x575.png\" alt=\"\" class=\"wp-image-1253\" style=\"aspect-ratio:1.7808990625103522;width:676px;height:auto\" srcset=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2-1024x575.png 1024w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2-300x168.png 300w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2-768x431.png 768w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2-1536x862.png 1536w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-2.png 1650w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%e4%ba%8c%e3%80%81%e8%a8%ad%e8%a8%88%e5%8e%9f%e5%89%87%ef%bc%88design-principles%ef%bc%89\">\u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin Williams\uff08\u4e0d\u662f\u90a3\u4f4d\u6f14\u54e1\uff09\u5728\u300aThe Non-Designer\u2019s Design Book\u300b\u6574\u7406\u7684 CRAP \u56db\u539f\u5247\uff1a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"crap-%e5%9b%9b%e5%8e%9f%e5%89%87\">CRAP \u56db\u539f\u5247<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u539f\u5247<\/th><th>\u8aaa\u660e<\/th><th>\u4f8b\u5b50<\/th><\/tr><\/thead><tbody><tr><td>\u5c0d\u6bd4\uff08Contrast\uff09<\/td><td>\u4e0d\u540c\u7684\u6771\u897f\u5c31\u8981\u300c\u660e\u986f\u300d\u4e0d\u540c<\/td><td>\u4e3b\u8981\u6309\u9215\u7528\u5be6\u5fc3\u85cd\u5e95\u3001\u6b21\u8981\u6309\u9215\u7528\u767d\u5e95\u7070\u6846\uff0c\u4e0d\u8981\u53ea\u5dee\u4e00\u9ede\u9ede<\/td><\/tr><tr><td>\u91cd\u8907\uff08Repetition\uff09<\/td><td>\u91cd\u8907\u4f7f\u7528\u540c\u6a23\u7684\u984f\u8272\u3001\u5b57\u9ad4\u3001\u9593\u8ddd\uff0c\u5efa\u7acb\u4e00\u81f4\u6027<\/td><td>\u6bcf\u5834\u5de5\u4f5c\u574a\u6d77\u5831\u90fd\u628a QR code \u56fa\u5b9a\u653e\u5728\u53f3\u4e0b\u89d2<\/td><\/tr><tr><td>\u5c0d\u9f4a\uff08Alignment\uff09<\/td><td>\u6bcf\u500b\u5143\u7d20\u90fd\u61c9\u8a72\u548c\u53e6\u4e00\u500b\u5143\u7d20\u6709\u8996\u89ba\u4e0a\u7684\u9023\u7d50<\/td><td>\u6d77\u5831\u5e95\u90e8\u8cc7\u8a0a\u5340\u548c\u8ab2\u7a0b\u5927\u7db1\u5171\u7528\u540c\u4e00\u689d\u5de6\u908a\u754c<\/td><\/tr><tr><td>\u89aa\u5bc6\u6027\uff08Proximity\uff09<\/td><td>\u76f8\u95dc\u7684\u653e\u8fd1\uff0c\u4e0d\u76f8\u95dc\u7684\u62c9\u958b<\/td><td>\u5f8c\u53f0\u641c\u5c0b\u5217\u628a\u300c\u65e5\u671f\u8d77\u8a16\u300d\u5169\u6b04\u653e\u5728\u4e00\u8d77\uff0c\u548c\u300c\u72c0\u614b\u300d\u7be9\u9078\u62c9\u958b\u8ddd\u96e2<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"%e5%85%b6%e4%bb%96%e5%b8%b8%e7%94%a8%e5%8e%9f%e5%89%87\">\u5176\u4ed6\u5e38\u7528\u539f\u5247<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5e73\u8861\uff08Balance\uff09<\/strong>\uff1a\u756b\u9762\u5de6\u53f3\u3001\u4e0a\u4e0b\u7684\u8996\u89ba\u91cd\u91cf\u8981\u7a69\u5b9a\uff0c\u53ef\u4ee5\u5c0d\u7a31\uff0c\u4e5f\u53ef\u4ee5\u4e0d\u5c0d\u7a31\u3002<\/li>\n\n\n\n<li><strong>\u7559\u767d\uff08Whitespace \/ Negative Space\uff09<\/strong>\uff1a\u7559\u767d\u4e0d\u662f\u6d6a\u8cbb\uff0c\u800c\u662f\u7528\u4f86\u5206\u7d44\u3001\u88fd\u9020\u547c\u5438\u611f\u3002<\/li>\n\n\n\n<li><strong>\u6bd4\u4f8b\u8207\u5f37\u8abf\uff08Scale &amp; Emphasis\uff09<\/strong>\uff1a\u7528\u5927\u5c0f\u5dee\u7570\u88fd\u9020\u7126\u9ede\u3002\u4e00\u500b\u756b\u9762\u6700\u597d\u53ea\u6709\u4e00\u500b\u6700\u5927\u3001\u6700\u91cd\u7684\u5143\u7d20\uff0c\u5176\u4ed6\u4f9d\u91cd\u8981\u7a0b\u5ea6\u905e\u6e1b\u3002\u5982\u679c\u6bcf\u6a23\u6771\u897f\u90fd\u5f88\u5927\uff0c\u5c31\u7b49\u65bc\u6c92\u6709\u91cd\u9ede\u3002<\/li>\n\n\n\n<li><strong>\u97fb\u5f8b\uff08Rhythm\uff09<\/strong>\uff1a\u8b93\u9593\u8ddd\u8207\u5143\u7d20\u898f\u5f8b\u5730\u91cd\u8907\uff0c\u4f8b\u5982\u5217\u8868\u6bcf\u4e00\u5217\u7684\u9ad8\u5ea6\u3001\u5361\u7247\u4e4b\u9593\u7684\u9593\u8ddd\u90fd\u4e00\u6a23\uff0c\u8b80\u8005\u7684\u8996\u7dda\u5c31\u80fd\u7a69\u5b9a\u5f80\u4e0b\u79fb\u52d5\u3002\u97fb\u5f8b\u53ef\u4ee5\u770b\u6210\u300c\u91cd\u8907\u300d\u5957\u7528\u5728\u7a7a\u9593\u4e0a\u7684\u7d50\u679c\u3002<\/li>\n\n\n\n<li><strong>\u683c\u7dda\u8207\u9593\u8ddd\u7cfb\u7d71\uff08Grid &amp; Spacing System\uff09<\/strong>\uff1a\u7528\u6b04\u4f4d\u7cfb\u7d71\uff08\u5982 12 \u6b04\uff09\u8b93\u5143\u7d20\u6709\u5171\u540c\u7684\u5c0d\u9f4a\u4f9d\u64da\u3002\u9593\u8ddd\u4e5f\u4e00\u6a23\u8981\u6709\u7cfb\u7d71\uff0c\u5e38\u898b\u7684\u505a\u6cd5\u662f 8pt \u683c\u7dda\uff1a\u9593\u8ddd\u53ea\u7528 4\u30018\u300112\u300116\u300124\u300132 \u9019\u5e7e\u500b\u503c\uff0c\u4e0d\u8981\u51fa\u73fe 13px\u300117px \u9019\u7a2e\u96a8\u624b\u5beb\u7684\u6578\u5b57\u3002\u5728\u7a0b\u5f0f\u78bc\u88e1\uff0c\u9019\u901a\u5e38\u6703\u8b8a\u6210\u4e00\u7d44 spacing token\uff0c\u4f8b\u5982 <code>$space-2: 8px<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"938\" src=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3-1024x938.png\" alt=\"\" class=\"wp-image-1254\" style=\"width:624px;height:auto\" srcset=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3-1024x938.png 1024w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3-300x275.png 300w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3-767x703.png 767w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3-1536x1407.png 1536w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-3.png 1644w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u6ce8\u610f\uff1a\u89aa\u5bc6\u6027\u540c\u6642\u51fa\u73fe\u5728\u7b2c\u4e00\u5c64\u548c\u7b2c\u4e8c\u5c64\u3002\u7b2c\u4e00\u5c64\u8aaa\u7684\u662f\u300c\u4eba\u773c\u6703\u628a\u9760\u8fd1\u7684\u770b\u6210\u4e00\u7d44\u300d\uff08\u4e8b\u5be6\uff09\uff0c\u7b2c\u4e8c\u5c64\u8aaa\u7684\u662f\u300c\u6240\u4ee5\u76f8\u95dc\u7684\u8981\u653e\u8fd1\u300d\uff08\u505a\u6cd5\uff09\u3002\u8a2d\u8a08\u539f\u5247\u672c\u4f86\u5c31\u662f\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u64cd\u4f5c\u65b9\u5f0f\u3002<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u5c64\u53ea\u662f\u6307\u5357\uff0c\u4e0d\u662f\u9435\u5f8b\uff0c\u53ef\u4ee5\u6709\u610f\u8b58\u5730\u6253\u7834\u3002\u4f8b\u5982\u523b\u610f\u8b93\u4e00\u500b\u5143\u7d20\u4e0d\u5c0d\u9f4a\uff0c\u88fd\u9020\u5f35\u529b\uff1b\u4f46\u524d\u63d0\u662f\u4f60\u77e5\u9053\u81ea\u5df1\u5728\u6253\u7834\u4ec0\u9ebc\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%e4%b8%89%e3%80%81%e7%9b%ae%e6%a8%99%e8%88%87%e5%ad%b8%e7%a7%91%ef%bc%88goals-disciplines%ef%bc%89\">\u4e09\u3001\u76ee\u6a19\u8207\u5b78\u79d1\uff08Goals &amp; Disciplines\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"%e8%a6%96%e8%a6%ba%e5%b1%a4%e7%b4%9a%ef%bc%88visual-hierarchy%ef%bc%89%ef%bc%9a%e7%9b%ae%e6%a8%99\">\u8996\u89ba\u5c64\u7d1a\uff08Visual Hierarchy\uff09\uff1a\u76ee\u6a19<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8996\u89ba\u5c64\u7d1a\u4e0d\u662f\u4e00\u689d\u898f\u5247\uff0c\u800c\u662f\u4f60\u60f3\u9054\u6210\u7684\u7d50\u679c\uff1a\u8b93\u4f7f\u7528\u8005\u4f9d\u7167\u4f60\u60f3\u8981\u7684\u9806\u5e8f\u770b\u8cc7\u8a0a\uff08\u5148\u770b\u4ec0\u9ebc\u3001\u518d\u770b\u4ec0\u9ebc\u3001\u4ec0\u9ebc\u53ef\u4ee5\u7565\u904e\uff09\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u9054\u6210\u5b83\uff0c\u5c31\u8981\u52d5\u7528\u7b2c\u4e8c\u5c64\u7684\u539f\u5247\uff1a\u7528\u5c0d\u6bd4\u3001\u6bd4\u4f8b\u8207\u5f37\u8abf\u62c9\u958b\u5927\u5c0f\u8207\u5b57\u91cd\uff0c\u7528\u89aa\u5bc6\u6027\u5206\u7d44\uff0c\u7528\u7559\u767d\u9694\u958b\u5340\u584a\u3002\u4f8b\u5982\u5f8c\u53f0\u5217\u8868\u9801\uff1a\u9801\u6a19\u984c \u2192 \u4e3b\u8981\u6309\u9215\u300c\u65b0\u589e\u300d\u2192 \u8868\u683c\u5167\u5bb9 \u2192 \u8aaa\u660e\u6587\u5b57\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"%e5%ad%97%e9%ab%94%e6%8e%92%e5%8d%b0%ef%bc%88typography%ef%bc%89%ef%bc%9a%e5%ad%b8%e7%a7%91\">\u5b57\u9ad4\u6392\u5370\uff08Typography\uff09\uff1a\u5b78\u79d1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7814\u7a76\u6587\u5b57\u600e\u9ebc\u9078\u3001\u600e\u9ebc\u6392\u7684\u5c08\u9580\u9818\u57df\uff0c\u6709\u81ea\u5df1\u7684\u4e00\u5957\u898f\u5247\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u884c\u9ad8\uff08Line-height\uff09<\/strong>\uff1a\u5167\u6587\u5e38\u898b\u7d04 1.5 \u500d\uff1b\u6a19\u984c\u5b57\u6bd4\u8f03\u5927\uff0c\u884c\u9ad8\u53ef\u4ee5\u6536\u5230 1.2\uff5e1.3 \u500d\u3002<\/li>\n\n\n\n<li><strong>\u5b57\u7d1a\u6bd4\u4f8b\uff08Type Scale\uff09<\/strong>\uff1a\u81f3\u5c11\u5206\u51fa\u6a19\u984c\u3001\u5167\u6587\u3001\u8a3b\u89e3\u4e09\u500b\u660e\u986f\u4e0d\u540c\u7684\u5927\u5c0f\u3002\u76f8\u9130\u5169\u7d1a\u6700\u597d\u6709\u660e\u986f\u5dee\u8ddd\uff0c\u4f8b\u5982 14px \u548c 15px \u5e7e\u4e4e\u770b\u4e0d\u51fa\u5dee\u5225\u3002<\/li>\n\n\n\n<li><strong>\u5b57\u8ddd\uff08Letter-spacing\uff09<\/strong>\uff1a\u4e2d\u6587\u5167\u6587\u4e0d\u5b9c\u958b\u592a\u5bec\uff0c\u5426\u5247\u6703\u8b80\u6210\u4e00\u500b\u5b57\u4e00\u500b\u5b57\u3002<\/li>\n\n\n\n<li><strong>\u6bcf\u884c\u5b57\u6578\uff08Line Length\uff09<\/strong>\uff1a\u4e00\u884c\u592a\u9577\uff0c\u8b80\u5230\u884c\u5c3e\u6642\u5f88\u96e3\u627e\u5230\u4e0b\u4e00\u884c\u7684\u958b\u982d\u3002\u82f1\u6587\u5e38\u898b\u5efa\u8b70\u7d04 45\uff5e75 \u500b\u5b57\u5143\uff0c\u4e2d\u6587\u7d04 30\uff5e40 \u500b\u5b57\u3002\u9019\u4e5f\u662f\u5167\u5bb9\u5340\u584a\u8981\u9650\u5236\u6700\u5927\u5bec\u5ea6\uff08<code>max-width<\/code>\uff09\u7684\u539f\u56e0\u3002<\/li>\n\n\n\n<li><strong>\u4e2d\u82f1\u6df7\u6392<\/strong>\uff1a\u4e2d\u6587\u548c\u82f1\u6587\u3001\u6578\u5b57\u4e4b\u9593\u8981\u4e0d\u8981\u52a0\u534a\u5f62\u7a7a\u683c\uff08\u4f8b\u5982\u300c\u4f7f\u7528 Next.js \u958b\u767c\u300d\uff09\uff0c\u8981\u5168\u7ad9\u7d71\u4e00\uff0c\u4e0d\u8981\u6709\u7684\u52a0\u3001\u6709\u7684\u4e0d\u52a0\u3002<\/li>\n\n\n\n<li><strong>\u6a19\u9ede\u7b26\u865f<\/strong>\uff1a\u4e2d\u6587\u5167\u5bb9\u4f7f\u7528\u5168\u5f62\u6a19\u9ede\uff08\uff0c\u3002\u300c\u300d\uff1a\uff09\uff0c\u4e0d\u8981\u6df7\u7528\u534a\u5f62\u7684\u9017\u865f\u548c\u5f15\u865f\u3002<\/li>\n\n\n\n<li><strong>\u6613\u8b80\u6027\u8207\u53ef\u8b80\u6027<\/strong>\uff1a\u6613\u8b80\u6027\uff08Legibility\uff09\u6307\u7684\u662f\u55ae\u4e00\u500b\u5b57\u597d\u4e0d\u597d\u8fa8\u8a8d\uff0c\u4e3b\u8981\u8ddf\u5b57\u578b\u3001\u5b57\u7d1a\u6709\u95dc\uff1b\u53ef\u8b80\u6027\uff08Readability\uff09\u6307\u7684\u662f\u6574\u6bb5\u6587\u5b57\u8b80\u8d77\u4f86\u8212\u4e0d\u8212\u670d\uff0c\u8ddf\u884c\u9ad8\u3001\u6bcf\u884c\u5b57\u6578\u3001\u6bb5\u843d\u9577\u5ea6\u6709\u95dc\u3002\u5b57\u578b\u9078\u5f97\u518d\u597d\uff0c\u884c\u592a\u9577\u4e00\u6a23\u96e3\u8b80\u3002<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4-1024x681.png\" alt=\"\" class=\"wp-image-1255\" srcset=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4-1024x681.png 1024w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4-300x200.png 300w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4-767x510.png 767w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4-1536x1022.png 1536w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-4.png 1654w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"%e8%89%b2%e5%bd%a9%e7%90%86%e8%ab%96%ef%bc%88color-theory%ef%bc%89%ef%bc%9a%e5%ad%b8%e7%a7%91\">\u8272\u5f69\u7406\u8ad6\uff08Color Theory\uff09\uff1a\u5b78\u79d1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7814\u7a76\u8272\u5f69\u642d\u914d\u8207\u611f\u77e5\u7684\u9818\u57df\uff0c\u5305\u542b\u8272\u76f8\u3001\u660e\u5ea6\u3001\u5f69\u5ea6\u8207\u914d\u8272\u65b9\u5f0f\uff08\u4e92\u88dc\u8272\u3001\u985e\u6bd4\u8272\u7b49\uff09\u3002\u5728\u7db2\u9801\u4e0a\u9084\u6709\u53ef\u91cf\u5316\u7684\u7121\u969c\u7919\u6a19\u6e96\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u9805\u76ee<\/th><th>WCAG 2.2 AA \u6a19\u6e96<\/th><\/tr><\/thead><tbody><tr><td>\u4e00\u822c\u6587\u5b57<\/td><td>\u5c0d\u6bd4\u5ea6\u81f3\u5c11 4.5:1<\/td><\/tr><tr><td>\u5927\u5b57\uff0818pt \u4ee5\u4e0a\uff0c\u6216 14pt \u4ee5\u4e0a\u7c97\u9ad4\uff1b\u7d04 24px \u4ee5\u4e0a\uff0c\u6216 18.7px \u4ee5\u4e0a\u7c97\u9ad4\uff09<\/td><td>\u5c0d\u6bd4\u5ea6\u81f3\u5c11 3:1<\/td><\/tr><tr><td>\u4ecb\u9762\u5143\u4ef6\u8207\u5716\u5f62\uff0c\u4f8b\u5982\u8f38\u5165\u6846\u908a\u6846\u3001\u5716\u793a\uff08WCAG 2.1 \u8d77\uff09<\/td><td>\u5c0d\u6bd4\u5ea6\u81f3\u5c11 3:1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u5982\u628a\u5f8c\u53f0\u5167\u6587\u8abf\u6210\u6de1\u85cd\u7070\uff0c\u770b\u8d77\u4f86\u6e05\u723d\uff0c\u4f46\u5c0d\u6bd4\u5ea6\u53ef\u80fd\u4e0d\u5230 4.5:1\uff0c\u4f7f\u7528\u8005\u770b\u4e45\u4e86\u5c31\u6703\u5f88\u7d2f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4e0d\u80fd\u53ea\u9760\u984f\u8272\u50b3\u9054\u8cc7\u8a0a\uff08WCAG 1.4.1\uff09<\/strong>\uff1a\u5c0d\u6bd4\u5ea6\u4e4b\u5916\uff0c\u9019\u689d\u66f4\u5e38\u88ab\u9055\u53cd\u3002\u4f8b\u5982\u8868\u55ae\u932f\u8aa4\u6642\u53ea\u628a\u8f38\u5165\u6846\u908a\u6846\u8b8a\u7d05\uff0c<strong>\u8272\u5f31\u7684\u4f7f\u7528\u8005\u53ef\u80fd\u770b\u4e0d\u51fa\u4f86<\/strong>\u3002\u61c9\u8a72\u540c\u6642\u52a0\u4e0a\u5716\u793a\u6216\u932f\u8aa4\u6587\u5b57\uff0c\u8b93\u984f\u8272\u53ea\u662f\u8f14\u52a9\u3002<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u88dc\u5145\uff1aWCAG 2.2 \u662f\u76ee\u524d\uff082023 \u5e74\u767c\u5e03\uff09\u6700\u65b0\u7684\u6b63\u5f0f\u7248\u672c\u3002\u65b0\u4e00\u4ee3\u7684\u5c0d\u6bd4\u5ea6\u7b97\u6cd5 APCA \u9084\u5728 WCAG 3 \u8349\u6848\u968e\u6bb5\uff0c\u5be6\u52d9\u4e0a\u4ecd\u4ee5 WCAG 2.x \u7684\u5c0d\u6bd4\u5ea6\u70ba\u6e96\u3002<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u4e00\u5c64\u56de\u7b54\u7684\u662f\uff1a\u300c\u8981\u9054\u6210\u4ec0\u9ebc\uff1f\u7528\u54ea\u500b\u5c08\u696d\u9818\u57df\u8655\u7406\uff1f\u300d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%e5%9b%9b%e3%80%81%e4%b8%89%e5%b1%a4%e4%b9%8b%e9%96%93%e7%9a%84%e9%97%9c%e4%bf%82\">\u56db\u3001\u4e09\u5c64\u4e4b\u9593\u7684\u95dc\u4fc2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u77e5\u89ba\u5b9a\u5f8b<\/strong>\uff08\u773c\u775b\u600e\u9ebc\u770b\uff09\u2192 <strong>\u8a2d\u8a08\u539f\u5247<\/strong>\uff08\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\uff09\u2192 <strong>\u76ee\u6a19\u8207\u5b78\u79d1<\/strong>\uff08\u9054\u6210\u4ec0\u9ebc\u3001\u5728\u54ea\u500b\u9818\u57df\u8655\u7406\uff09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e00\u5f35\u5de5\u4f5c\u574a\u62db\u751f\u6d77\u5831\u70ba\u4f8b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5b9a\u5f8b<\/strong>\uff1a\u4eba\u773c\u6703\u628a\u9760\u8fd1\u7684\u8cc7\u8a0a\u770b\u6210\u4e00\u7d44\uff08Proximity\uff09\u3002<\/li>\n\n\n\n<li><strong>\u539f\u5247<\/strong>\uff1a\u6240\u4ee5\u628a\u300c\u6642\u9593\u3001\u5730\u9ede\u300d\u653e\u5728\u4e00\u8d77\uff0c\u548c\u300c\u8b1b\u5e2b\u300d\u62c9\u958b\u8ddd\u96e2\u3002<\/li>\n\n\n\n<li><strong>\u76ee\u6a19<\/strong>\uff1a\u89c0\u773e 3 \u79d2\u5167\u5c31\u80fd\u627e\u5230\u300c\u4ec0\u9ebc\u6642\u5019\u3001\u5728\u54ea\u88e1\u300d\uff0c\u4e5f\u5c31\u662f\u5efa\u7acb\u6e05\u695a\u7684\u8996\u89ba\u5c64\u7d1a\u3002<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9a\u5f8b\u544a\u8a34\u4f60\u773c\u775b\u600e\u9ebc\u770b\uff0c\u539f\u5247\u544a\u8a34\u4f60\u8a72\u600e\u9ebc\u6392\uff0c\u8996\u89ba\u5c64\u7d1a\u662f\u4f60\u8981\u7684\u7d50\u679c\uff0c\u5b57\u9ad4\u6392\u5370\u8207\u8272\u5f69\u662f\u4f60\u8655\u7406\u6587\u5b57\u8207\u984f\u8272\u6642\u7684\u5c08\u9580\u5de5\u5177\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"695\" src=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5-1024x695.png\" alt=\"\" class=\"wp-image-1256\" style=\"aspect-ratio:1.4732399769806253;width:728px;height:auto\" srcset=\"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5-1024x695.png 1024w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5-300x204.png 300w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5-768x521.png 768w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5-1536x1043.png 1536w, https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-5.png 1650w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"%e4%ba%94%e3%80%81%e7%b8%bd%e8%a6%bd\">\u4e94\u3001\u7e3d\u89bd<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c64\u6b21<\/th><th>\u6027\u8cea<\/th><th>\u5305\u542b<\/th><\/tr><\/thead><tbody><tr><td>\u7b2c\u4e00\u5c64\uff1a\u77e5\u89ba\u5b9a\u5f8b<\/td><td>\u63cf\u8ff0\u4e8b\u5be6\uff0c\u7121\u6cd5\u9055\u53cd<\/td><td>\u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\u3001\u76f8\u4f3c\u6027\u3001\u9023\u7e8c\u6027\u3001\u5c01\u9589\u6027\u3001\u5716\u5730\u95dc\u4fc2\u3001\u5171\u540c\u5340\u57df\u3001\u5171\u540c\u547d\u904b\u3001\u9023\u63a5\u6027\u3001\u7c21\u6f54\u5f8b\uff1b\u524d\u6ce8\u610f\u5c6c\u6027<\/td><\/tr><tr><td>\u7b2c\u4e8c\u5c64\uff1a\u8a2d\u8a08\u539f\u5247<\/td><td>\u7d93\u9a57\u6cd5\u5247\uff0c\u53ef\u4ee5\u6709\u610f\u8b58\u5730\u6253\u7834<\/td><td>\u5c0d\u6bd4\u3001\u91cd\u8907\u3001\u5c0d\u9f4a\u3001\u89aa\u5bc6\u6027\uff08CRAP\uff09\uff1b\u5e73\u8861\u3001\u7559\u767d\u3001\u6bd4\u4f8b\u8207\u5f37\u8abf\u3001\u97fb\u5f8b\u3001\u683c\u7dda\u8207\u9593\u8ddd\u7cfb\u7d71<\/td><\/tr><tr><td>\u7b2c\u4e09\u5c64\uff1a\u76ee\u6a19<\/td><td>\u60f3\u9054\u6210\u7684\u7d50\u679c<\/td><td>\u8996\u89ba\u5c64\u7d1a<\/td><\/tr><tr><td>\u7b2c\u4e09\u5c64\uff1a\u5b78\u79d1<\/td><td>\u8655\u7406\u5b83\u7684\u5c08\u696d\u9818\u57df<\/td><td>\u5b57\u9ad4\u6392\u5370\uff08\u884c\u9ad8\u3001\u5b57\u7d1a\u6bd4\u4f8b\u3001\u5b57\u8ddd\u3001\u6bcf\u884c\u5b57\u6578\u3001\u4e2d\u82f1\u6df7\u6392\u3001\u6a19\u9ede\u3001\u6613\u8b80\u6027\u8207\u53ef\u8b80\u6027\uff09\u3001\u8272\u5f69\u7406\u8ad6\uff08\u914d\u8272\u3001WCAG \u5c0d\u6bd4\u5ea6\u3001\u4e0d\u53ea\u9760\u984f\u8272\u50b3\u9054\u8cc7\u8a0a\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin Williams\uff08\u4e0d\u662f\u90a3\u4f4d\u6f14\u54e1\uff09\u5728\u300aThe Non-Designer\u2019s Design Book\u300b\u6574\u7406\u7684 CRAP \u56db\u539f\u5247\uff1a CRAP \u56db\u539f\u5247 \u539f\u5247 \u8aaa\u660e \u4f8b\u5b50 \u5c0d\u6bd4\uff08Contrast\uff09 \u4e0d\u540c\u7684\u6771\u897f\u5c31\u8981\u300c\u660e\u986f\u300d\u4e0d\u540c \u4e3b\u8981\u6309\u9215\u7528\u5be6\u5fc3\u85cd\u5e95\u3001\u6b21\u8981\u6309\u9215\u7528\u767d\u5e95\u7070\u6846\uff0c\u4e0d\u8981\u53ea\u5dee\u4e00\u9ede\u9ede \u91cd\u8907\uff08Repetition\uff09 \u91cd\u8907\u4f7f\u7528\u540c\u6a23\u7684\u984f\u8272\u3001\u5b57\u9ad4\u3001\u9593\u8ddd\uff0c\u5efa\u7acb\u4e00\u81f4\u6027 \u6bcf\u5834\u5de5\u4f5c\u574a\u6d77\u5831\u90fd\u628a QR code \u56fa\u5b9a\u653e\u5728\u53f3\u4e0b\u89d2 \u5c0d\u9f4a\uff08Alignment\uff09 \u6bcf\u500b\u5143\u7d20\u90fd\u61c9\u8a72\u548c\u53e6\u4e00\u500b\u5143\u7d20\u6709\u8996\u89ba\u4e0a\u7684\u9023\u7d50 \u6d77\u5831\u5e95\u90e8\u8cc7\u8a0a\u5340\u548c\u8ab2\u7a0b\u5927\u7db1\u5171\u7528\u540c\u4e00\u689d\u5de6\u908a\u754c \u89aa\u5bc6\u6027\uff08Proximity\uff09 \u76f8\u95dc\u7684\u653e\u8fd1\uff0c\u4e0d\u76f8\u95dc\u7684\u62c9\u958b \u5f8c\u53f0\u641c\u5c0b\u5217\u628a\u300c\u65e5\u671f\u8d77\u8a16\u300d\u5169\u6b04\u653e\u5728\u4e00\u8d77\uff0c\u548c\u300c\u72c0\u614b\u300d\u7be9\u9078\u62c9\u958b\u8ddd\u96e2 \u5176\u4ed6\u5e38\u7528\u539f\u5247 \u6ce8\u610f\uff1a\u89aa\u5bc6\u6027\u540c\u6642\u51fa\u73fe\u5728\u7b2c\u4e00\u5c64\u548c\u7b2c\u4e8c\u5c64\u3002\u7b2c\u4e00\u5c64\u8aaa\u7684\u662f\u300c\u4eba\u773c\u6703\u628a\u9760\u8fd1\u7684\u770b\u6210\u4e00\u7d44\u300d\uff08\u4e8b\u5be6\uff09\uff0c\u7b2c\u4e8c\u5c64\u8aaa\u7684\u662f\u300c\u6240\u4ee5\u76f8\u95dc\u7684\u8981\u653e\u8fd1\u300d\uff08\u505a\u6cd5\uff09\u3002\u8a2d\u8a08\u539f\u5247\u672c\u4f86\u5c31\u662f\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u64cd\u4f5c\u65b9\u5f0f\u3002 \u9019\u5c64\u53ea\u662f\u6307\u5357\uff0c\u4e0d\u662f\u9435\u5f8b\uff0c\u53ef\u4ee5\u6709\u610f\u8b58\u5730\u6253\u7834\u3002\u4f8b\u5982\u523b\u610f\u8b93\u4e00\u500b\u5143\u7d20\u4e0d\u5c0d\u9f4a\uff0c\u88fd\u9020\u5f35\u529b\uff1b\u4f46\u524d\u63d0\u662f\u4f60\u77e5\u9053\u81ea\u5df1\u5728\u6253\u7834\u4ec0\u9ebc\u3002 \u4e09\u3001\u76ee\u6a19\u8207\u5b78\u79d1\uff08Goals &amp; Disciplines\uff09 \u8996\u89ba\u5c64\u7d1a\uff08Visual Hierarchy\uff09\uff1a\u76ee\u6a19 [&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-1248","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=\"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin\" \/>\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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/\" \/>\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 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki\" \/>\n\t\t<meta property=\"og:description\" content=\"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/\" \/>\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-11-05T03:52:36+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-07T09:01:22+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"UIUX \u2013 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin\" \/>\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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#blogposting\",\"name\":\"UIUX \\u2013 \\u5e73\\u9762\\u8a2d\\u8a08\\u57fa\\u790e - HyC Wiki\",\"headline\":\"UIUX &#8211; \\u5e73\\u9762\\u8a2d\\u8a08\\u57fa\\u790e\",\"author\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/image-1.png\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#articleImage\",\"width\":1650,\"height\":1718},\"datePublished\":\"2026-11-05T03:52:36+00:00\",\"dateModified\":\"2026-11-07T09:01:22+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#webpage\"},\"articleSection\":\"Front-End\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#listItem\",\"name\":\"UIUX &#8211; \\u5e73\\u9762\\u8a2d\\u8a08\\u57fa\\u790e\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#listItem\",\"position\":3,\"name\":\"UIUX &#8211; \\u5e73\\u9762\\u8a2d\\u8a08\\u57fa\\u790e\",\"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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#webpage\",\"url\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/\",\"name\":\"UIUX \\u2013 \\u5e73\\u9762\\u8a2d\\u8a08\\u57fa\\u790e - HyC Wiki\",\"description\":\"\\u8a2d\\u8a08\\u6642\\u5e38\\u807d\\u3001\\u770b\\u5230\\u7684\\u300c\\u89aa\\u5bc6\\u6027\\u300d\\u3001\\u300c\\u5c0d\\u6bd4\\u300d\\u3001\\u300c\\u8996\\u89ba\\u5c64\\u7d1a\\u300d\\u3001\\u300c\\u5b57\\u9ad4\\u6392\\u5370\\u300d\\uff0c\\u5176\\u5be6\\u4e0d\\u5728\\u540c\\u4e00\\u500b\\u5c64\\u6b21\\u3002\\u6709\\u4e9b\\u662f\\u8b1b\\u4eba\\u773c\\u7684\\u904b\\u4f5c\\u65b9\\u5f0f\\uff0c\\u6709\\u4e9b\\u5247\\u662f\\u8a2d\\u8a08\\u5e2b\\u6b78\\u7d0d\\u51fa\\u7684\\u7d93\\u9a57\\uff0c\\u4e5f\\u6709\\u7684\\u662f\\u8981\\u9054\\u6210\\u7684\\u7d50\\u679c\\u6216\\u5c08\\u9580\\u5b78\\u79d1\\u3002\\u9019\\u7bc7\\u5167\\u5bb9\\uff0c\\u6211\\u628a\\u5b83\\u5011\\u5206\\u6210\\u4e09\\u5c64\\u4f86\\u8a0e\\u8ad6\\uff1a \\u4e00\\u3001\\u77e5\\u89ba\\u5b9a\\u5f8b\\uff1a\\u683c\\u5f0f\\u5854\\u539f\\u5247\\uff08Gestalt Principles\\uff09 \\u683c\\u5f0f\\u5854\\u539f\\u5247\\uff08Gestalt Principles\\uff09\\uff08\\u53c8\\u8b6f\\u5b8c\\u5f62\\u539f\\u5247\\u3001\\u683c\\u5f0f\\u5854\\u5fc3\\u7406\\u5b78\\uff09\\uff0c\\u70ba 20 \\u4e16\\u7d00\\u521d\\u7531\\u5fb7\\u570b\\u5fc3\\u7406\\u5b78\\u5bb6\\u97cb\\u7279\\u6d77\\u9ed8\\uff08Max Wertheimer\\uff09\\u3001\\u8003\\u592b\\u5361\\uff08Kurt Koffka\\uff09\\u3001\\u67ef\\u52d2\\uff08Wolfgang K\\u00f6hler\\uff09\\u63d0\\u51fa\\uff0c\\u7814\\u7a76\\u300c\\u4eba\\u600e\\u9ebc\\u628a\\u96f6\\u6563\\u7684\\u6771\\u897f\\u770b\\u6210\\u4e00\\u500b\\u6574\\u9ad4\\u300d\\u3002\\u5b83\\u63cf\\u8ff0\\u7684\\u662f\\u5927\\u8166\\u7684\\u904b\\u4f5c\\u65b9\\u5f0f\\uff0c\\u8a2d\\u8a08\\u5e2b\\u7121\\u6cd5\\u9055\\u53cd\\uff0c\\u53ea\\u80fd\\u5229\\u7528\\u3002 \\u63a5\\u8fd1\\uff0f\\u89aa\\u5bc6\\u6027\\uff08Proximity\\uff09\\uff1a\\u8ddd\\u96e2\\u8fd1\\u7684\\u5143\\u7d20\\u6703\\u88ab\\u770b\\u6210\\u540c\\u4e00\\u7d44\\u3002\\u4f8b\\u5982\\u8868\\u55ae\\u7684 Label \\u96e2\\u8f38\\u5165\\u6846\\u592a\\u9060\\uff0c\\u4f7f\\u7528\\u8005\\u6703\\u5c0d\\u932f\\u6b04\\u4f4d\\u3002 \\u76f8\\u4f3c\\u6027\\uff08Similarity\\uff09\\uff1a\\u984f\\u8272\\u3001\\u5f62\\u72c0\\u3001\\u5927\\u5c0f\\u76f8\\u540c\\u7684\\u5143\\u7d20\\u6703\\u88ab\\u770b\\u6210\\u540c\\u985e\\u3002\\u4f8b\\u5982\\u5f8c\\u53f0\\u6240\\u6709\\u53ef\\u9ede\\u7684\\u9023\\u7d50\\u90fd\\u7528\\u540c\\u4e00\\u7a2e\\u85cd\\u3002 \\u9023\\u7e8c\\u6027\\uff08Continuity\\uff09\\uff1a\\u8996\\u7dda\\u6703\\u6cbf\\u8457\\u7dda\\u689d\\u6216\\u66f2\\u7dda\\u5ef6\\u4f38\\u3002\\u4f8b\\u5982\\u6d77\\u5831\\u4e0a\\u628a\\u8ab2\\u7a0b\\u4e3b\\u984c\\u6cbf\\u8457\\u4e00\\u689d\\u8def\\u5f91\\u6392\\u5217\\uff0c\\u5c31\\u6703\\u88ab\\u8b80\\u6210\\u300c\\u5b78\\u7fd2\\u9806\\u5e8f\\u300d\\u3002 \\u5c01\\u9589\\u6027\\uff08Closure\\uff09\\uff1a\\u4e0d\\u5b8c\\u6574\\u7684\\u5f62\\u72c0\\uff0c\\u5927\\u8166\\u6703\\u81ea\\u52d5\\u88dc\\u5b8c\\u3002\\u4f8b\\u5982\\u53ea\\u756b\\u4e00\\u534a\\u7684\\u5713\\u5f62 Logo \\u4ecd\\u88ab\\u770b\\u6210\\u5713\\u3002 \\u5716\\u5730\\u95dc\\u4fc2\\uff08Figure\\u2013Ground\\uff09\\uff1a\\u5927\\u8166\\u6703\\u5340\\u5206\\u300c\\u524d\\u666f\\u300d\\u548c\\u300c\\u80cc\\u666f\\u300d\\u3002\\u4f8b\\u5982 Modal \\u52a0\\u4e0a\\u534a\\u900f\\u660e\\u906e\\u7f69\\uff08Overlay\\uff09\\uff0c\\u524d\\u666f\\u624d\\u8df3\\u5f97\\u51fa\\u4f86\\u3002 \\u5171\\u540c\\u5340\\u57df\\uff08Common Region\\uff09\\uff1a\\u88ab\\u540c\\u4e00\\u500b\\u5916\\u6846\\u6216\\u5e95\\u8272\\u5305\\u4f4f\\u7684\\u5143\\u7d20\\u6703\\u88ab\\u770b\\u6210\\u4e00\\u7d44\\u3002\\u4f8b\\u5982 Card \\u628a\\u5716\\u7247\\u3001\\u6a19\\u984c\\u3001\\u6309\\u9215\\u5305\\u5728\\u4e00\\u8d77\\u3002\\uff08\\u6b64\\u539f\\u5247\\u7531 Stephen Palmer \\u65bc 1992 \\u5e74\\u88dc\\u5145\\u63d0\\u51fa\\uff09 \\u5171\\u540c\\u547d\\u904b\\uff08Common Fate\\uff09\\uff1a\\u4e00\\u8d77\\u79fb\\u52d5\\u6216\\u4e00\\u8d77\\u8b8a\\u5316\\u7684\\u5143\\u7d20\\u6703\\u88ab\\u7576\\u6210\\u4e00\\u7d44\\u3002\\u4f8b\\u5982\\u62d6\\u66f3\\u6642\\u4e00\\u8d77\\u79fb\\u52d5\\u7684\\u591a\\u500b\\u9078\\u53d6\\u9805\\u76ee\\uff0c\\u6216\\u540c\\u6642\\u9583\\u720d\\u7684\\u901a\\u77e5\\u3002 \\u9023\\u63a5\\u6027\\uff08Uniform Connectedness\\uff09\\uff1a\\u7528\\u7dda\\u9023\\u8d77\\u4f86\\u7684\\u5143\\u7d20\\uff0c\\u5373\\u4f7f\\u984f\\u8272\\u3001\\u5f62\\u72c0\\u4e0d\\u540c\\uff0c\\u4e5f\\u6703\\u88ab\\u770b\\u6210\\u4e00\\u7d44\\uff0c\\u800c\\u4e14\\u6548\\u679c\\u6bd4\\u63a5\\u8fd1\\u6027\\u9084\\u5f37\\u3002\\u4f8b\\u5982 Stepper \\u7528\\u9023\\u63a5\\u7dda\\u628a\\u6b65\\u9a5f\\u4e32\\u8d77\\u4f86\\u3002\\uff08Stephen Palmer \\u8207 Irvin Rock \\u65bc 1994 \\u5e74\\u63d0\\u51fa\\uff09 \\u7c21\\u6f54\\u5f8b\\uff08Pr\\u00e4gnanz\\uff09\\uff1a\\u5927\\u8166\\u6703\\u7528\\u6700\\u7c21\\u55ae\\u7684\\u65b9\\u5f0f\\u89e3\\u8b80\\u5716\\u5f62\\uff0c\\u9019\\u4e5f\\u662f\\u683c\\u5f0f\\u5854\\u5fc3\\u7406\\u5b78\\u7684\\u6838\\u5fc3\\u3002\\u4f8b\\u5982\\u91cd\\u758a\\u7684\\u5713\\u5f62\\u6703\\u88ab\\u770b\\u6210\\u300c\\u5169\\u500b\\u5713\\u300d\\uff0c\\u800c\\u4e0d\\u662f\\u4e00\\u500b\\u8907\\u96dc\\u7684\\u5f62\\u72c0\\u3002 \\u88dc\\u5145\\uff1a\\u524d\\u6ce8\\u610f\\u5c6c\\u6027\\uff08Pre-attentive Attributes\\uff09 \\u683c\\u5f0f\\u5854\\u539f\\u5247\\u8b1b\\u7684\\u662f\\u300c\\u600e\\u9ebc\\u5206\\u7d44\\u300d\\uff0c\\u524d\\u6ce8\\u610f\\u5c6c\\u6027\\u8b1b\\u7684\\u662f\\u300c\\u4ec0\\u9ebc\\u6703\\u5148\\u88ab\\u770b\\u5230\\u300d\\u3002\\u984f\\u8272\\u3001\\u5927\\u5c0f\\u3001\\u65b9\\u5411\\u3001\\u5f62\\u72c0\\u3001\\u52d5\\u614b\\u9019\\u4e9b\\u7279\\u5fb5\\uff0c\\u5927\\u8166\\u5728\\u5927\\u7d04 0.2 \\u79d2\\u5167\\u3001\\u9084\\u6c92\\u523b\\u610f\\u53bb\\u627e\\u4e4b\\u524d\\u5c31\\u6703\\u6ce8\\u610f\\u5230\\u3002\\u4f8b\\u5982\\u4e00\\u6574\\u6392\\u7070\\u8272\\u5716\\u793a\\u4e2d\\u53ea\\u6709\\u4e00\\u500b\\u662f\\u7d05\\u8272\\u7684 Badge\\uff0c\\u4e0d\\u7528\\u627e\\u5c31\\u6703\\u5148\\u770b\\u5230\\u5b83\\u3002\\u3008UX\\u6cd5\\u5247\\u3009\\u88e1\\u7684\\u96f7\\u65af\\u591a\\u592b\\u6548\\u61c9\\uff0c\\u5c31\\u662f\\u5229\\u7528\\u9019\\u500b\\u73fe\\u8c61\\u3002 \\u53cd\\u904e\\u4f86\\u8aaa\\uff0c\\u524d\\u6ce8\\u610f\\u5c6c\\u6027\\u4e5f\\u6709\\u4e0a\\u9650\\uff1a\\u4e00\\u500b\\u756b\\u9762\\u88e1\\u5982\\u679c\\u6709\\u4e94\\u7a2e\\u984f\\u8272\\u90fd\\u5728\\u6436\\u6ce8\\u610f\\u529b\\uff0c\\u5c31\\u6c92\\u6709\\u4e00\\u500b\\u6703\\u7279\\u5225\\u7a81\\u51fa\\u3002 \\u4e8c\\u3001\\u8a2d\\u8a08\\u539f\\u5247\\uff08Design Principles\\uff09 \\u8a2d\\u8a08\\u5e2b\\u628a\\u77e5\\u89ba\\u5b9a\\u5f8b\\u8f49\\u6210\\u300c\\u6240\\u4ee5\\u8a72\\u600e\\u9ebc\\u6392\\u300d\\u7684\\u7d93\\u9a57\\u6cd5\\u5247\\u3002\\u6700\\u5e38\\u898b\\u7684\\u662f\\u8a2d\\u8a08\\u5e2b Robin\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/hyc.eshachem.com\\\/program\\\/author\\\/hychen\\\/#author\"},\"datePublished\":\"2026-11-05T03:52:36+00:00\",\"dateModified\":\"2026-11-07T09:01:22+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 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki","description":"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin","canonical_url":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/","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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#blogposting","name":"UIUX \u2013 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki","headline":"UIUX &#8211; \u5e73\u9762\u8a2d\u8a08\u57fa\u790e","author":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"publisher":{"@id":"https:\/\/hyc.eshachem.com\/program\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/hyc.eshachem.com\/program\/wp-content\/uploads\/2026\/11\/image-1.png","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#articleImage","width":1650,"height":1718},"datePublished":"2026-11-05T03:52:36+00:00","dateModified":"2026-11-07T09:01:22+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#webpage"},"isPartOf":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#webpage"},"articleSection":"Front-End"},{"@type":"BreadcrumbList","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#listItem","name":"UIUX &#8211; \u5e73\u9762\u8a2d\u8a08\u57fa\u790e"},"previousItem":{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#listItem","position":3,"name":"UIUX &#8211; \u5e73\u9762\u8a2d\u8a08\u57fa\u790e","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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#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-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#webpage","url":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/","name":"UIUX \u2013 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki","description":"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/hyc.eshachem.com\/program\/#website"},"breadcrumb":{"@id":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/#breadcrumblist"},"author":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"creator":{"@id":"https:\/\/hyc.eshachem.com\/program\/author\/hychen\/#author"},"datePublished":"2026-11-05T03:52:36+00:00","dateModified":"2026-11-07T09:01:22+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 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki","og:description":"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin","og:url":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/","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-11-05T03:52:36+00:00","article:modified_time":"2026-11-07T09:01:22+00:00","twitter:card":"summary_large_image","twitter:title":"UIUX \u2013 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e - HyC Wiki","twitter:description":"\u8a2d\u8a08\u6642\u5e38\u807d\u3001\u770b\u5230\u7684\u300c\u89aa\u5bc6\u6027\u300d\u3001\u300c\u5c0d\u6bd4\u300d\u3001\u300c\u8996\u89ba\u5c64\u7d1a\u300d\u3001\u300c\u5b57\u9ad4\u6392\u5370\u300d\uff0c\u5176\u5be6\u4e0d\u5728\u540c\u4e00\u500b\u5c64\u6b21\u3002\u6709\u4e9b\u662f\u8b1b\u4eba\u773c\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u6709\u4e9b\u5247\u662f\u8a2d\u8a08\u5e2b\u6b78\u7d0d\u51fa\u7684\u7d93\u9a57\uff0c\u4e5f\u6709\u7684\u662f\u8981\u9054\u6210\u7684\u7d50\u679c\u6216\u5c08\u9580\u5b78\u79d1\u3002\u9019\u7bc7\u5167\u5bb9\uff0c\u6211\u628a\u5b83\u5011\u5206\u6210\u4e09\u5c64\u4f86\u8a0e\u8ad6\uff1a \u4e00\u3001\u77e5\u89ba\u5b9a\u5f8b\uff1a\u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09 \u683c\u5f0f\u5854\u539f\u5247\uff08Gestalt Principles\uff09\uff08\u53c8\u8b6f\u5b8c\u5f62\u539f\u5247\u3001\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\uff09\uff0c\u70ba 20 \u4e16\u7d00\u521d\u7531\u5fb7\u570b\u5fc3\u7406\u5b78\u5bb6\u97cb\u7279\u6d77\u9ed8\uff08Max Wertheimer\uff09\u3001\u8003\u592b\u5361\uff08Kurt Koffka\uff09\u3001\u67ef\u52d2\uff08Wolfgang K\u00f6hler\uff09\u63d0\u51fa\uff0c\u7814\u7a76\u300c\u4eba\u600e\u9ebc\u628a\u96f6\u6563\u7684\u6771\u897f\u770b\u6210\u4e00\u500b\u6574\u9ad4\u300d\u3002\u5b83\u63cf\u8ff0\u7684\u662f\u5927\u8166\u7684\u904b\u4f5c\u65b9\u5f0f\uff0c\u8a2d\u8a08\u5e2b\u7121\u6cd5\u9055\u53cd\uff0c\u53ea\u80fd\u5229\u7528\u3002 \u63a5\u8fd1\uff0f\u89aa\u5bc6\u6027\uff08Proximity\uff09\uff1a\u8ddd\u96e2\u8fd1\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u4e00\u7d44\u3002\u4f8b\u5982\u8868\u55ae\u7684 Label \u96e2\u8f38\u5165\u6846\u592a\u9060\uff0c\u4f7f\u7528\u8005\u6703\u5c0d\u932f\u6b04\u4f4d\u3002 \u76f8\u4f3c\u6027\uff08Similarity\uff09\uff1a\u984f\u8272\u3001\u5f62\u72c0\u3001\u5927\u5c0f\u76f8\u540c\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u540c\u985e\u3002\u4f8b\u5982\u5f8c\u53f0\u6240\u6709\u53ef\u9ede\u7684\u9023\u7d50\u90fd\u7528\u540c\u4e00\u7a2e\u85cd\u3002 \u9023\u7e8c\u6027\uff08Continuity\uff09\uff1a\u8996\u7dda\u6703\u6cbf\u8457\u7dda\u689d\u6216\u66f2\u7dda\u5ef6\u4f38\u3002\u4f8b\u5982\u6d77\u5831\u4e0a\u628a\u8ab2\u7a0b\u4e3b\u984c\u6cbf\u8457\u4e00\u689d\u8def\u5f91\u6392\u5217\uff0c\u5c31\u6703\u88ab\u8b80\u6210\u300c\u5b78\u7fd2\u9806\u5e8f\u300d\u3002 \u5c01\u9589\u6027\uff08Closure\uff09\uff1a\u4e0d\u5b8c\u6574\u7684\u5f62\u72c0\uff0c\u5927\u8166\u6703\u81ea\u52d5\u88dc\u5b8c\u3002\u4f8b\u5982\u53ea\u756b\u4e00\u534a\u7684\u5713\u5f62 Logo \u4ecd\u88ab\u770b\u6210\u5713\u3002 \u5716\u5730\u95dc\u4fc2\uff08Figure\u2013Ground\uff09\uff1a\u5927\u8166\u6703\u5340\u5206\u300c\u524d\u666f\u300d\u548c\u300c\u80cc\u666f\u300d\u3002\u4f8b\u5982 Modal \u52a0\u4e0a\u534a\u900f\u660e\u906e\u7f69\uff08Overlay\uff09\uff0c\u524d\u666f\u624d\u8df3\u5f97\u51fa\u4f86\u3002 \u5171\u540c\u5340\u57df\uff08Common Region\uff09\uff1a\u88ab\u540c\u4e00\u500b\u5916\u6846\u6216\u5e95\u8272\u5305\u4f4f\u7684\u5143\u7d20\u6703\u88ab\u770b\u6210\u4e00\u7d44\u3002\u4f8b\u5982 Card \u628a\u5716\u7247\u3001\u6a19\u984c\u3001\u6309\u9215\u5305\u5728\u4e00\u8d77\u3002\uff08\u6b64\u539f\u5247\u7531 Stephen Palmer \u65bc 1992 \u5e74\u88dc\u5145\u63d0\u51fa\uff09 \u5171\u540c\u547d\u904b\uff08Common Fate\uff09\uff1a\u4e00\u8d77\u79fb\u52d5\u6216\u4e00\u8d77\u8b8a\u5316\u7684\u5143\u7d20\u6703\u88ab\u7576\u6210\u4e00\u7d44\u3002\u4f8b\u5982\u62d6\u66f3\u6642\u4e00\u8d77\u79fb\u52d5\u7684\u591a\u500b\u9078\u53d6\u9805\u76ee\uff0c\u6216\u540c\u6642\u9583\u720d\u7684\u901a\u77e5\u3002 \u9023\u63a5\u6027\uff08Uniform Connectedness\uff09\uff1a\u7528\u7dda\u9023\u8d77\u4f86\u7684\u5143\u7d20\uff0c\u5373\u4f7f\u984f\u8272\u3001\u5f62\u72c0\u4e0d\u540c\uff0c\u4e5f\u6703\u88ab\u770b\u6210\u4e00\u7d44\uff0c\u800c\u4e14\u6548\u679c\u6bd4\u63a5\u8fd1\u6027\u9084\u5f37\u3002\u4f8b\u5982 Stepper \u7528\u9023\u63a5\u7dda\u628a\u6b65\u9a5f\u4e32\u8d77\u4f86\u3002\uff08Stephen Palmer \u8207 Irvin Rock \u65bc 1994 \u5e74\u63d0\u51fa\uff09 \u7c21\u6f54\u5f8b\uff08Pr\u00e4gnanz\uff09\uff1a\u5927\u8166\u6703\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\u89e3\u8b80\u5716\u5f62\uff0c\u9019\u4e5f\u662f\u683c\u5f0f\u5854\u5fc3\u7406\u5b78\u7684\u6838\u5fc3\u3002\u4f8b\u5982\u91cd\u758a\u7684\u5713\u5f62\u6703\u88ab\u770b\u6210\u300c\u5169\u500b\u5713\u300d\uff0c\u800c\u4e0d\u662f\u4e00\u500b\u8907\u96dc\u7684\u5f62\u72c0\u3002 \u88dc\u5145\uff1a\u524d\u6ce8\u610f\u5c6c\u6027\uff08Pre-attentive Attributes\uff09 \u683c\u5f0f\u5854\u539f\u5247\u8b1b\u7684\u662f\u300c\u600e\u9ebc\u5206\u7d44\u300d\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u8b1b\u7684\u662f\u300c\u4ec0\u9ebc\u6703\u5148\u88ab\u770b\u5230\u300d\u3002\u984f\u8272\u3001\u5927\u5c0f\u3001\u65b9\u5411\u3001\u5f62\u72c0\u3001\u52d5\u614b\u9019\u4e9b\u7279\u5fb5\uff0c\u5927\u8166\u5728\u5927\u7d04 0.2 \u79d2\u5167\u3001\u9084\u6c92\u523b\u610f\u53bb\u627e\u4e4b\u524d\u5c31\u6703\u6ce8\u610f\u5230\u3002\u4f8b\u5982\u4e00\u6574\u6392\u7070\u8272\u5716\u793a\u4e2d\u53ea\u6709\u4e00\u500b\u662f\u7d05\u8272\u7684 Badge\uff0c\u4e0d\u7528\u627e\u5c31\u6703\u5148\u770b\u5230\u5b83\u3002\u3008UX\u6cd5\u5247\u3009\u88e1\u7684\u96f7\u65af\u591a\u592b\u6548\u61c9\uff0c\u5c31\u662f\u5229\u7528\u9019\u500b\u73fe\u8c61\u3002 \u53cd\u904e\u4f86\u8aaa\uff0c\u524d\u6ce8\u610f\u5c6c\u6027\u4e5f\u6709\u4e0a\u9650\uff1a\u4e00\u500b\u756b\u9762\u88e1\u5982\u679c\u6709\u4e94\u7a2e\u984f\u8272\u90fd\u5728\u6436\u6ce8\u610f\u529b\uff0c\u5c31\u6c92\u6709\u4e00\u500b\u6703\u7279\u5225\u7a81\u51fa\u3002 \u4e8c\u3001\u8a2d\u8a08\u539f\u5247\uff08Design Principles\uff09 \u8a2d\u8a08\u5e2b\u628a\u77e5\u89ba\u5b9a\u5f8b\u8f49\u6210\u300c\u6240\u4ee5\u8a72\u600e\u9ebc\u6392\u300d\u7684\u7d93\u9a57\u6cd5\u5247\u3002\u6700\u5e38\u898b\u7684\u662f\u8a2d\u8a08\u5e2b Robin","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":"1248","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"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":"","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":"BlogPosting","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":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-11-05 03:52:36","updated":"2026-11-07 09:02:11"},"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 \u5e73\u9762\u8a2d\u8a08\u57fa\u790e\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; \u5e73\u9762\u8a2d\u8a08\u57fa\u790e","link":"https:\/\/hyc.eshachem.com\/program\/uiux-%e5%b9%b3%e9%9d%a2%e8%a8%ad%e8%a8%88%e5%9f%ba%e7%a4%8e\/"}],"views":58,"_links":{"self":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1248","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=1248"}],"version-history":[{"count":3,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1248\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/posts\/1248\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/media?parent=1248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/categories?post=1248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyc.eshachem.com\/program\/wp-json\/wp\/v2\/tags?post=1248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}