{"id":2206,"date":"2020-09-13T19:46:04","date_gmt":"2020-09-13T11:46:04","guid":{"rendered":"http:\/\/www.storagelab.org.cn\/zhangdi\/?p=2206"},"modified":"2020-09-13T19:46:04","modified_gmt":"2020-09-13T11:46:04","slug":"haijun-xia%e5%8d%9a%e5%a3%ab2016-2018%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%ae%ba%e6%96%87%e6%80%bb%e8%a7%88","status":"publish","type":"post","link":"https:\/\/www.divis.cn\/index.php\/2020\/09\/13\/haijun-xia%e5%8d%9a%e5%a3%ab2016-2018%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%ae%ba%e6%96%87%e6%80%bb%e8%a7%88\/","title":{"rendered":"Haijun Xia\u535a\u58eb2016-2018\u4ea4\u4e92\u8bbe\u8ba1\u8bba\u6587\u603b\u89c8"},"content":{"rendered":"<h1>Haijun Xia\u535a\u58eb2016-2018\u4ea4\u4e92\u8bbe\u8ba1\u8bba\u6587\u603b\u89c8<\/h1>\n<p>\u5728\u8fd1\u671f\u5bf9\u4fe1\u606f\u56fe\u4ea4\u4e92\u8bbe\u8ba1\u7684\u8bba\u6587\u603b\u89c8\u4e2d\uff0c\u6211\u4eec\u5f88\u65e9\u5c31\u770b\u5230\u4e86Dataink\u8fd9\u7bc7\u8bba\u6587\uff0c\u8fdb\u800c\u53d1\u73b0\u4e86Haijun Xia\u535a\u58eb\u5728\u591a\u4f26\u591a\u5927\u5b66\u8bfb\u535a\u671f\u95f4\uff0c\u4eceObject-Oriented Drawing(CHI 2016\uff0c\u4ee5\u4e0b\u7b80\u79f0OOD)\u3001Collection Object(CHI 2017\uff0c\u4ee5\u4e0b\u7b80\u79f0CO)\u3001Dataink(CHI 2018\uff0c\u4e00\u4e0b\u79f0\u4e4b\u4e3aDataink)\u7684\u79d1\u7814\u8f68\u8ff9\u3002<\/p>\n<p>\u8fd9\u51e0\u7bc7\u8bba\u6587\u90fd\u63cf\u8ff0\u7684\u662f\u5728\u652f\u6301\u624b\u52bf\u8f93\u5165\u7684\u89e6\u6478\u5c4f\u4e0a\u5f00\u53d1\u7684\u7ed8\u56fe\u5e94\u7528\u7a0b\u5e8f\uff0c\u65e8\u5728\u4ee5\u66f4\u9ad8\u7684\u4ea4\u4e92\u6548\u7387\u5b8c\u6210\u4ee5\u524d\u5f88\u7e41\u7410\u751a\u81f3\u4e0d\u53ef\u80fd\u7684\u4ea4\u4e92\uff0c\u4ece\u800c\u63d0\u9ad8\u8bbe\u8ba1\u5e08\u7ed8\u5236SVG\u56fe\u5f62\u7684\u4ea4\u4e92\u4f53\u9a8c\u3002\u8fd9\u4e09\u7bc7\u8bba\u6587\u6e05\u6670\u7684\u8fde\u7eed\u53d1\u5c55\u8109\u7edc\uff0c\u9996\u5148\uff0cOOD\u63d0\u51fa\u4e86\u4e00\u79cd\u6539\u826fUI\uff0c\u7528\u4e8e\u5448\u73b0\u4f20\u7edf\u4e0a\u53ea\u80fd\u7528\u6309\u94ae\u3001\u4e92\u52a8\u6761\u3001\u8f93\u5165\u6846\u8868\u793a\u7684\u62bd\u8c61\u5c5e\u6027\uff08\u4f8b\u5982\u900f\u660e\u5ea6\u3001\u4eae\u5ea6\u7b49\u7b49\uff09\uff0c\u5e76\u4e14\u53ef\u4ee5\u76f4\u63a5\u7528\u624b\u52bf\u6765\u79fb\u52a8\u3001\u590d\u5236\u3001\u94fe\u63a5\u8fd9\u4e9b\u62bd\u8c61\u5c5e\u6027\uff1b\u63a5\u4e0b\u6765\uff0cCO\u5728OOD\u7684\u57fa\u7840\u4e0a\uff0c\u96c6\u4e2d\u63a2\u8ba8\u5982\u4f55\u89e3\u51b3\u5bf9\u591a\u4e2a\u56fe\u5143\u8fdb\u884c\u64cd\u4f5c\uff0c\u5e76\u5728OOD\u539f\u6709UI\u7684\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u591a\u5bf9\u8c61\u9009\u62e9\u3001\u8d4b\u503c\u3001\u5206\u7ec4\u3001\u7ec4\u5185\u5bfc\u822a\u7b49\u529f\u80fd\uff1b\u6700\u540e\u7684Dataink\uff0c\u4ee5\u7ed8\u5236\u6570\u636e\u9a71\u52a8\u7684\u4fe1\u606f\u56fe\u4e3a\u76ee\u6807\u3002dataink\u64cd\u4f5c\u7684\u5185\u6838\u8fd8\u662fCO\uff0c\u5e76\u5c06\u91cd\u70b9\u653e\u5728\u6570\u636e\u7ed1\u5b9a\u529f\u80fd\u4e0a\u3002\u63a5\u4e0b\u6765\u672c\u6587\u5c06\u8ba8\u8bba\u6bcf\u7bc7\u8bba\u6587\u7684\u4e00\u4e9b\u7ec6\u8282\u53ca\u4e2a\u4eba\u611f\u60f3\u3002<\/p>\n<h2>1.Object-Oriented Drawing\uff08OOD\uff09<\/h2>\n<p>\u957f\u671f\u4ee5\u6765\uff0c\u7814\u7a76\u4eba\u5458\u5c06\u4ea4\u4e92\u5316\u4e3a\u56fe\u5f62\u5316\u4eba\u673a\u4ea4\u4e92\u754c\u9762\uff08GUI\uff09\uff0c\u4f8b\u5982\u4f7f\u7528\u6309\u94ae\u6216\u83dc\u5355\uff0c\u6765\u4f7f\u8ba1\u7b97\u673a\u547d\u4ee4\u6216\u5de5\u5177\u6210\u4e3a\u53ef\u4ee5\u7531\u7528\u6237\u76f4\u63a5\u64cd\u7eb5\u7684GUI\u5bf9\u8c61\u3002<\/p>\n<p>\u5728\u4ee5\u9f20\u6807\u4e3a\u4e3b\u8981\u4ea4\u4e92\u8bbe\u5907\u7684PC\u65f6\u4ee3\uff0c\u5f62\u6210\u4e86\u4ee5windows\u56fe\u6807\u83dc\u5355\u548c\u7528\u6237\u754c\u9762\uff08\u7b80\u79f0WIMP UI\uff09\u4e3a\u4ee3\u8868\u7684\u5de5\u4e1a\u6807\u51c6\u3002\u73b0\u5982\u4eca\uff0c\u7206\u53d1\u5f0f\u666e\u53ca\u7684\u89e6\u6478\u5c4f\u8bbe\u5907\u63d0\u4f9b\u4e86\u5bf9WIMP UI\u7684\u6539\u826f\uff0c\u5373\u53ef\u4ee5\u8ba9\u7528\u6237\u5bf9\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u56fe\u5f62\u5bf9\u8c61\u8fdb\u884c\u76f4\u63a5\u7684\u7269\u7406\u64cd\u4f5c\u3002\u4f8b\u5982\u5c4f\u5e55\u4e0a\u663e\u793a\u4e00\u4e2a\u82f9\u679c\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u201c\u89e6\u6478\u201d\u6765\u9009\u4e2d\u5b83\uff0c\u201c\u5de6\u53f3\u6ed1\u52a8\u201d\u6765\u5e73\u79fb\u5b83\uff0c\u201c\u4e24\u70b9\u6ed1\u52a8\u201d\u6765\u7f29\u653e\u5b83\uff0c\u800c\u4e0d\u9700\u8981\u501f\u52a9\u4f20\u7edf\u7684WIMP UI\u63a7\u4ef6\u5982\u6309\u94ae\u3001\u5de5\u5177\u680f\u6765\u5b9e\u73b0\u8fd9\u4e00\u70b9\u3002\u8fd9\u65e2\u8282\u7701\u4e86\u5c4f\u5e55\u7a7a\u95f4\uff0c\u4e5f\u4ee4\u4ea4\u4e92\u53d8\u5f97\u66f4\u52a0\u751f\u52a8\u6709\u8da3\u548c\u6613\u5b66\uff1a\u56e0\u4e3a\u57fa\u4e8e\u89e6\u6478\u5c4f\u624b\u52bf\u4ea4\u4e92\u53ef\u4ee5\u501f\u52a9\u7528\u6237\u5bf9\u4e8e\u7269\u7406\u4e16\u754c\u7684\u77e5\u8bc6\uff0c\u6765\u4e0e\u6570\u5b57\u4e16\u754c\u8fdb\u884c\u4ea4\u4e92\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD1.png\" height=\"300\" \/><\/p>\n<p>\u4f46\u6709\u7684\u5c5e\u6027\uff0c\u5982\u7167\u7247\u7684\u4eae\u5ea6\u6216\u4e0d\u900f\u660e\u5ea6\uff0c\u7f3a\u4e4f\u7269\u7406\u4e16\u754c\u5bf9\u5e94\u7684\u62bd\u8c61\u7ecf\u9a8c\uff0c\u4ee5\u81f3\u4e8e\u7528\u6237\u96be\u4ee5\u731c\u6d4b\u6539\u53d8\u6b64\u7c7b\u5c5e\u6027\u5e94\u8be5\u4f7f\u7528\u4f55\u79cd\u624b\u52bf\u3002\u8fd9\u6e05\u695a\u5730\u8bc1\u660e\u4e86\u4eba\u673a\u4ea4\u4e92\u6ca1\u6709\u901a\u7528\u7684\u81ea\u7136\u624b\u52bf\u96c6\u3002\u6240\u4ee5\u53ea\u80fd\u628a\u8fd9\u4e9b\u5c5e\u6027\u7528\u6700\u7b80\u5355\u7684\u6570\u5b57\u6216\u6587\u672c\u914d\u5408\u4f20\u7edf\u7684WIMP UI\u6765\u4ea4\u4e92\u3002<strong>\u73b0\u5982\u4eca\u5f88\u591a\u652f\u6301\u89e6\u6478\u5c4f\u8bbe\u5907\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u5f80\u5f80\u9000\u56de\u5230WIMP UI\u7684\u8bbe\u8ba1\u8303\u5f0f\u4e2d\u3002<\/strong>\u4f8b\u5982adobe photoshop\\illustrator\u3001adobe line for ipad\u7b49\u7a0b\u5e8f\uff0c\u4f9d\u7136\u4fdd\u7559\u5c5e\u6027\u4f8b\u5982\u4e0a\u56fe\u6240\u793a\u7684\u6309\u94ae\u3001\u6ed1\u52a8\u6761\u7b49\u7ec4\u6210\u7684\u63a7\u5236\u9762\u677f\uff0c\u800c\u5927\u591a\u6570\u9ad8\u7ea7\u89e6\u6478\u4ea4\u4e92\u90fd\u88ab\u5220\u9664\uff0c\u53ea\u5269\u4e0b\u57fa\u672c\u7684\u753b\u7b14\u7ed8\u5236\u529f\u80fd\u8fd8\u5728\u4f7f\u7528\u89e6\u6478\u4ea4\u4e92\uff08\u5982\u4e0a\u56fe\u6240\u793a\uff09\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u672c\u6587\u7684\u76ee\u6807\u662f\u8bbe\u8ba1\u4e00\u79cd\u65b0\u7684\u4ea4\u4e92\u673a\u5236Object-Oriented Drawing(\u7b80\u79f0OOD)\uff0c\u65e2\u4e0d\u8981\u6c42\u7528\u6237\u5b66\u4e60\u65b0\u624b\u52bf\uff0c\u8fd8\u6709\u522b\u4e8e\u73b0\u6709\u7684WIMP UI\u3002\u5373\u8bbe\u8ba1\u53d7\u76f4\u63a5\u7269\u7406\u64cd\u7eb5\u9690\u55bb\u7ea6\u675f\u7684\u4ea4\u4e92\u4ee3\u66ff\u4f20\u7edfWIMP UI\u4e2d\u7684\u63a7\u5236\u9762\u677f\uff0c\u4ece\u800c\u4f7f\u7528\u6237\u80fd\u591f\u5feb\u901f\u6267\u884c\u4ee5\u524d\u5f88\u7e41\u7410\u751a\u81f3\u662f\u4e0d\u53ef\u80fd\u7684\u4ea4\u4e92\u3002<\/p>\n<p>\u4e3a\u4e86\u5b9e\u73b0\u8fd9\u4e00\u70b9\uff0c\u672c\u6587\u7684\u57fa\u672c\u601d\u8def\u662f\u5c06\u6240\u6709\u56fe\u5143\u7684\u5c5e\u6027\uff08\u586b\u5145\u8272\u3001\u7ebf\u5bbd\u3001\u900f\u660e\u5ea6\u7b49\u7b49\uff09\u90fd\u5f53\u505a\u5bf9\u8c61\uff0c\u8ba9\u624b\u52bf\u53ef\u4ee5\u76f4\u63a5\u64cd\u4f5c\u8fd9\u4e9b\u5bf9\u8c61\u3002\u5c31\u597d\u6bd4\u539f\u6765\u662f\u62df\u7269\u5316\u8bbe\u8ba1\uff0c\u8981\u6c42\u628a\u6240\u6709\u5c5e\u6027\u90fd\u627e\u4e00\u4e2a\u5bf9\u5e94\u7684\u8c61\u5f81\u7269\u8868\u793a\uff0c\u5b9e\u5728\u627e\u4e0d\u5230\u8c61\u5f81\u7269\u7684\u5c31\u7528\u901a\u7528\u6309\u94ae\u8868\u793a\u3002\u800c\u8fd9\u4e2a\u601d\u8def\u76f8\u5f53\u4e8e\u6241\u5e73\u5316\u8bbe\u8ba1\uff0c\u628a\u6240\u6709\u7684\u5c5e\u6027\u90fd\u5f53\u505a\u4e00\u4e2a\u5305\u88f9\uff0c\u53ef\u4ee5\u901a\u7528\u7684\u624b\u52bf\u53bb\u4ea4\u4e92\u8fd9\u4e2a\u5305\u88f9\uff0c\u4e0d\u5173\u5fc3\u8fd9\u4e9b\u5305\u88f9\u6240\u4ee3\u8868\u7684\u5c5e\u6027\u7a76\u7adf\u5bf9\u5e94\u4f55\u79cd\u7269\u7406\u73b0\u5b9e\u3002<\/p>\n<p>\u8fd9\u79cd\u65b9\u5f0f\u589e\u52a0\u4e86\u7075\u6d3b\u6027\uff0c\u6240\u6709\u5c5e\u6027\u5bf9\u8c61\u90fd\u53ef\u4ee5\u7528\u901a\u7528\u624b\u52bf\u88ab\u590d\u5236\u3001\u94fe\u63a5\u3001\u7c98\u8d34\u3001\u79fb\u52a8\uff0c\u4ee4\u5f88\u591a\u64cd\u4f5c\u6d41\u7a0b\u53d8\u5f97\u7b80\u5316\u3002\u4f8b\u5982\u5728WIMP UI\u4e2d\uff0c\u7528\u4e00\u79cd\u7528\u6237\u5e0c\u671b\u5148\u4f7f\u7528\u201c\u753b\u7b14\u201d\u7ed8\u5236\uff0c\u7136\u540e\u518d\u4f7f\u7528\u201c\u6807\u8bb0\u201d\u7ed8\u5236\uff0c\u4e24\u6b21\u7ed8\u5236\u7684\u5c3a\u5bf8\u76f8\u540c\u3002\u7528\u6237\u9700\u8981\u200b\u200b\u9009\u62e9\u7b2c\u4e00\u4e2a\u5de5\u5177\uff0c\u6253\u5f00\u5176\u5c5e\u6027\uff0c\u8bb0\u4e0b\u5c3a\u5bf8\u503c\uff0c\u7136\u540e\u6253\u5f00\u7b2c\u4e8c\u4e2a\u5de5\u5177\uff0c\u7136\u540e\u624b\u52a8\u8bbe\u7f6e\u6240\u9700\u7684\u5c3a\u5bf8\u3002\u4f7f\u7528OOD\uff0c\u7528\u6237\u53ef\u4ee5\u7b80\u5355\u5730\u5c06size\u5c5e\u6027\u5f53\u4f5c\u672c\u8eab\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u7136\u540e\u5c06\u5176\u62d6\u653e\u5230\u201c Marker\u201d\u5bf9\u8c61\u4e0a\u5373\u53ef\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD2.png\" \/><\/p>\n<p>\u4f9d\u636e\u6b64\u7406\u8bba\uff0cOOD\u7684UI\u88abcard\u5361\u7247\u6a21\u5f0f\u3002\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u5de6\u4fa7\u662f\u6d77\u9e25\u578b\u56fe\u5143\uff0c\u5176\u5bf9\u5e94\u7684OOD\u4e3a\u4e00\u7cfb\u5217\u5361\u7247\uff0c\u6bcf\u4e2a\u5361\u7247\u6307\u4ee3\u4e00\u79cd\u5c5e\u6027\uff0c\u5982\u56fe\u663e\u793a\u4e86shape\u3001fill\u3001stroke\u3001dropshadow\u56db\u4e2a\u5c5e\u6027\u3002\u67d0\u4e9b\u5c5e\u6027\u8fd8\u4f1a\u6709\u5c42\u6790\u7ed3\u6784\uff0c\u4f8b\u5982stroke\u5c5e\u6027\u5305\u62eccolor\u3001stroke width\u4e24\u90e8\u5206\u3002\u8fd9\u4e9b\u5361\u7247\u4e0a\u7528\u6587\u5b57\u548c\u56fe\u5f62\u63cf\u8ff0\u4e86\u5176\u6240\u4ee3\u8868\u7684\u5c5e\u6027\u548c\u503c\uff0c\u53ef\u4ee5\u4f7f\u7528\u89e6\u6478\u5bf9\u5b83\u4eec\u76f4\u63a5\u8fdb\u884c\u7269\u7406\u64cd\u4f5c\uff0c\u4f8b\u5982tap, hold, drag, stretch\uff08\u5355\u70b9\u3001\u6309\u4f4f\u3001\u5355\u70b9\u62d6\u62fd\u3001\u4e24\u70b9\u62c9\u4f38\uff09\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD3.png\" \/><\/p>\n<p>\u5728OOD\u7684card\u4e0a\u7684\u5178\u578b\u64cd\u4f5c\u5305\u62ec\uff1a\u6dfb\u52a0\u6216\u5220\u9664\u5c5e\u6027\u3001\u5b9e\u4f8b\u5316\u65b0\u5c5e\u6027\u3001\u590d\u5236\u5c5e\u6027\u3001\u94fe\u63a5\u5c5e\u6027\uff08\u4ee5\u5c5e\u6027\u5171\u4eab\u7684\u65b9\u5f0f\u5feb\u901f\u4f20\u64ad\u6837\u5f0f\uff09\u7b49\u7b49\u3002\u5982\u4e0a\u56fe\uff08b\uff09\u6240\u793a\uff0c\u7528\u6237\u53ef\u4ee5hold\u6d77\u8c5a\u7684stroke\u5361\u7247\uff0c\u7136\u540etap\u6d77\u9e25\u7684stroke\u533a\u57df\uff0c\u4ece\u800c\u5c06\u6d77\u9e25\u7684stroke\u5c5e\u6027\u514b\u9686\u5230\u6d77\u8c5a\u7684stroke\u5c5e\u6027\u4e0a\u3002\u5982\u4e0a\u56fe(c\uff0cd)\u6240\u793a\uff0c\u7528\u6237\u60f3\u7ed9\u6d77\u9e25\u6dfb\u52a0\u4e00\u4e2a\u65b0\u5c5e\u6027dropshadow\uff0c\u5219\u5979\u53ef\u4ee5\u6ed1\u52a8\u6700\u540e\u7684\u5c0f\u65b9\u5757\uff0c\u628a\u5f71\u85cf\u7684\u5176\u4ed6\u5c5e\u6027\uff08dropshadow\u3001opactity\u7b49\uff09\u5b9e\u4f8b\u5316\u3002\u503c\u5f97\u4e00\u63d0\u7684\u662f\u5bf9\u4e8eposition\u5c5e\u6027\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u6b64\u7c7b\u64cd\u4f5c\u8fbe\u6210\u5feb\u901f\u7684\u5bf9\u9f50\u7b49\u6548\u679c\u3002\u6b64\u5916\uff0c\u6bcf\u4e2a\u5c5e\u6027\u5361\u7247\u8fd8\u4f1a\u8bb0\u5f55\u5176\u503c\u7684\u5386\u53f2\u8bb0\u5f55\uff0c\u4ee5\u4fbf\u7528\u6237\u4ee5\u540e\u8bbf\u95ee\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD5.png\" \/><\/p>\n<p>\u4f7f\u7528OOD\u4fee\u6539\u5c5e\u6027\u503c\u8fd9\u4e00\u64cd\u4f5c\u53d8\u5f97\u66f4\u4e3a\u7b80\u5355\u76f4\u89c2\u3002\u6309\u4f4f\u60f3\u8981\u4fee\u6539\u7684\u5c5e\u6027\u5361\u7247\uff0c\u7136\u540e\u7269\u7406\u64cd\u4f5c\u624b\u52bf\u4f1a\u76f4\u63a5\u6539\u53d8\u8fd9\u4e2a\u5c5e\u6027\u7684\u503c\u3002\u5982\u4e0a\u56fe(a)\uff0c\u5b89\u88c5storke\u5c5e\u6027\u5361\u7247\u7136\u540e\u5728\u5c4f\u5e55\u4e0a\u5de6\u53f3\u6ed1\u52a8\uff0c\u5373\u53ef\u4fee\u6539stroke\u5bbd\u5ea6\uff1b\u5982\u4e0a\u56fe(b)\uff0c\u6309\u4f4fdropshadow\u7136\u540e\u5728\u56fe\u5143\u4e0a\u62d6\u62fd\u9634\u5f71\u65b9\u5411\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u8c03\u8282\u9634\u5f71\u4f4d\u7f6e\u548c\u7c97\u7ec6\u3002\u8fd9\u4e9b\u624b\u52bf\u64cd\u4f5c\u7b26\u5408\u7528\u6237\u5bf9\u76f4\u63a5\u64cd\u4f5c\u7269\u7406\u5bf9\u8c61\u7684\u671f\u671b\uff0c\u540c\u65f6\u80fd\u591f\u6d88\u9664\u5927\u591a\u6570\u7528\u4e8e\u5c5e\u6027\u503c\u9009\u62e9\u7684\u8868\u5355UI\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD6.png\" \/><\/p>\n<p>OOD\u4e5f\u652f\u6301pen+ touch\u7ed3\u5408\u7684\u8f93\u5165\u6a21\u5f0f\u3002\u5c31\u50cf\u4e0a\u4e00\u4e2a\u4f8b\u5b50\u6309\u4f4f\u5c5e\u6027\u5361\u7247\u5c06\u4f1a\u8fdb\u5165\u4fee\u6539\u5c5e\u6027\u7684\u51c6\u6a21\u5f0f\u4e00\u6837\uff0c\u5982\u679c\u7528\u6237\u4f7f\u7528\u4e86\u89e6\u6478\u7b14\uff0c\u90a3\u4e48\u7cfb\u7edf\u5c31\u4f1a\u8fdb\u5165\u7b14\u8f93\u5165\u7684\u51c6\u6a21\u5f0f\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u7b14\u53ef\u4ee5\u7ed8\u5236\u4e00\u6761\u5e26\u6709\u5f53\u524d\u586b\u5145\u548c\u7b14\u89e6\u5c5e\u6027\u7684\u8def\u5f84\u3002\u901a\u8fc7\u6309\u4f4f\u5176\u4ed6\u56fe\u5143\u6216\u662f\u8be5\u56fe\u5143\u7684shape\u5c5e\u6027\uff0c\u8fd8\u53ef\u4ee5\u5feb\u901f\u7ed8\u5236\u5177\u6709\u76f8\u540c\u5f62\u72b6\u7684\u65b0\u7b14\u753b\u3002\u5982\u4e0a\u56fe\u6240\u793a\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/OOD4.png\" \/><\/p>\n<p>\u672c\u6587\u4f5c\u8005\u5728OOD\u57fa\u7840\u4e0a\u5236\u4f5c\u4e86\u4e00\u4e2aSVG\u7ed8\u56fe\u7a0b\u5e8f\u5982\u4e0a\u56fe\u6240\u793a\u3002\u9664\u4e86OOD\uff0c\u8fd8\u6709Cursor(\u5149\u6807)\u548ccanvas(\u753b\u5e03)\u3002\u5728\u201c\u4e00\u5207\u90fd\u662f\u5bf9\u8c61\u201d\u7684\u53e3\u53f7\u4e0b\uff0cCursor\u548ccanvas\u4e5f\u6709\u7740\u7c7b\u4f3cOOD\u7684UI\u3002\u4f8b\u5982Cursor\u4e5f\u62e5\u6709shape, fill\u7b49\u5c5e\u6027\uff0c\u53ef\u4ee5\u50cf\u5176\u4ed6OOD\u90a3\u6837\u6dfb\u52a0\u3001\u590d\u5236\u6216\u94fe\u63a5\u3002canvas\u7684\u5c5e\u6027\u5361\u7a0d\u5fae\u4e0d\u592a\u4e00\u6837\uff0c\u5b83\u7684\u6bcf\u4e2a\u5c5e\u6027\u5361\u4ee3\u8868\u4e00\u4e2a\u56fe\u5c42\u3002\u7136\u540e\u8fd9\u4e2a\u56fe\u5c42\u53c8\u62e5\u6709\u5b50\u5c5e\u6027\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0bcanvas\u81f3\u5c11\u67092\u4e2a\u56fe\u5c42\uff0c\u80cc\u666f\u5c42\u548c\u4e00\u4e2a\u524d\u666f\u5c42\u3002\u7136\u540ecanvas\u5c5e\u6027\u5361\u7684\u64cd\u4f5c\u4e0e\u5176\u4ed6OOD\u76f8\u540c\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u901a\u8fc7\u8c03\u6574canvas\u7684fill\u5c5e\u6027\u6765\u66f4\u6539\u5176\u80cc\u666f\u5c42\u989c\u8272\u3002\u8c03\u6574canvas\u56fe\u5c42\u5361\u7684\u4f4d\u7f6e\u6765\u8c03\u6574\u524d\u666f\u80cc\u666f\u5173\u7cfb\u7b49\u7b49\u3002<\/p>\n<p>\u6700\u540e\uff0c\u4f5c\u8005\u5c06\u5176\u8f6f\u4ef6\u7a0b\u5e8f\u8fdb\u884c\u4e86\u4e13\u5bb6\u8bbf\u8c08\u3002\u53c2\u4e0e\u8005\u666e\u904d\u5171\u8bc6\u5305\u62ec\uff1a<\/p>\n<ol>\n<li>\u4f7f\u7528WIMP UI\u7684\u8f6f\u4ef6\u5982illustrator\u5e38\u5e38\u4ee5\u4e3a\u590d\u6742\u7684\u6309\u94ae\u548c\u591a\u7ea7\u83dc\u5355\u800c\u9971\u53d7\u8bdf\u75c5\u3002\u4e0e\u4e4b\u76f8\u6bd4\uff0cOOD\u80fd\u591f\u66f4\u76f4\u63a5\u5730\u8bbf\u95ee\u548c\u64cd\u4f5c\u5c5e\u6027\uff0c\u4f7f\u5f97\u5c5e\u6027\u5f71\u85cf\u7a0b\u5ea6\u964d\u4f4e\u4e86\u3002<\/li>\n<li>\u4e13\u5bb6\u666e\u904d\u8868\u793a\u4f7f\u7528\u8be5\u8f6f\u4ef6\u753b\u753b\u5c31\u50cf\u5c31\u50cf\u505a\u996d\u65f6\u5728\u6848\u677f\u4e0a\u64cd\u4f5c\u5404\u79cd\u7269\u54c1\u4e00\u6837\uff0c\u6bcf\u4e2a\u5c5e\u6027\u90fd\u662f\u4e00\u4e2a\u53ef\u64cd\u4f5c\u7684\u7269\u7406\u5bf9\u8c61\uff0c\u8fd9\u79cd\u9690\u55bb\u5c06\u6570\u5b57\u4e16\u754c\u7684\u4f18\u52bf\uff08\u4f8b\u5982\u6570\u5b57\u4e16\u754c\u7684\u7b14\u89e6\u7cbe\u786e\u5b9a\u4e49\u5bbd\u5ea6\uff0c\u4f46\u73b0\u5b9e\u4e16\u754c\u4e2d\u65e0\u6cd5\u7cbe\u7ec6\u5b9a\u4e49\uff09\u5e26\u5165\u4e86\u6a21\u62df\u73b0\u5b9e\u7684\u73af\u5883\u4e2d\u3002<\/li>\n<li>\u66f4\u590d\u6742\u7684\u624b\u52bf\uff08\u4f8b\u5982\u62c9\u4f38\u5361\u7247\u4ee5\u67e5\u770b\u5176\u5386\u53f2\u8bb0\u5f55\uff09\u5fc5\u987b\u89c2\u770b\u64cd\u4f5c\u6f14\u793a\u540e\u624d\u80fd\u5b66\u4f1a\uff08 <span class=\"fontstyle0\">Ken Hinckley, Koji Yatani, Michel Pahud, NicoleCoddingotn, Jenny Rodenhouse, Andy Wilson, HrvojeBenko, and Bill Buxton. Pen + touch = new tools. <\/span>\uff09\u3002<\/li>\n<li>\u5c31\u50cf\u52a8\u753b\u516c\u53f8\u7684\u5458\u5de5\u7ed8\u753b\u524d\u90fd\u4f1a\u6307\u5b9a\u4e00\u5957\u914d\u8272\u65b9\u6848\u4e00\u6837\uff0c\u5f88\u591a\u753b\u5bb6\u4f1a\u4f18\u5148\u914d\u7f6e\u4e00\u4e9b\u901a\u7528\u56fe\u5f62\u5bf9\u8c61\uff0c\u7136\u540e\u518d\u753b\u753b\u3002\u5229\u7528OOD\u7684\u5c5e\u6027\u590d\u5236\u548c\u94fe\u63a5\u673a\u5236\uff0c\u914d\u7f6e\u901a\u7528\u56fe\u5f62\u5bf9\u8c61\u53d8\u5f97\u66f4\u52a0\u8f7b\u677e\u3002\u6709\u7684\u7528\u6237\u8fd8\u4f1a\u8bd5\u56fe\u590d\u5236cursor\u5bf9\u8c61\u4ee5\u83b7\u5f97\u4e00\u6279\u5177\u6709\u4e0d\u540c\u6837\u5f0f\u7684\u7b14\u5237\u3002<\/li>\n<li>\u901a\u8fc7link\u5171\u4eab\u5c5e\u6027\u7684\u529f\u80fd\u867d\u7136\u5f3a\u5927\uff0c\u4f46\u7075\u6d3b\u6027\u592a\u5f3a\u4f1a\u8ba9\u90e8\u5206\u7528\u6237\u4e0d\u77e5\u5982\u4f55\u4e0b\u624b\uff0c\u53ef\u4ee5\u9002\u5ea6\u964d\u4f4e\u53ef\u7528\u6027\u4ee5\u589e\u5f3a\u7075\u6d3b\u6027\u3002<\/li>\n<\/ol>\n<p>\u4e2a\u4eba\u4f53\u4f1a\uff1a<\/p>\n<p>\u5386\u53f2\u4e0a\u7ecf\u5e38\u51fa\u73b0\u65b0\u7684\u4eba\u673a\u4ea4\u4e92\u8bbe\u5907\uff0c\u4f46\u5f88\u591a\u8bbe\u5907\u56e0\u4e3a\u7f3a\u4e4fUI\u8bbe\u8ba1\u63a2\u7d22\uff0c\u6ca1\u80fd\u57f9\u517b\u51fa\u7528\u6237\u4f7f\u7528\u4e60\u60ef\u6700\u540e\u6e6e\u706d\u65e0\u95fb\u3002\u6700\u8fd1\u4e00\u4e2a\u5178\u578b\u4f8b\u5b50\u5c31\u662fPS4\u624b\u67c4\u4e0a\u9762\u7684\u89e6\u6478\u677f\uff0c\u9664\u4e86\u65e9\u671f\u6709\u51e0\u4e2a\u7d22\u5c3c\u7b2c\u4e00\u65b9\u7684\u6e38\u620f\u5076\u5c14\u4f7f\u7528\u4e00\u4e0b\u4ee5\u5916\uff0c\u73b0\u5728\u5df2\u6ca6\u4e3a\u6446\u8bbe\u3002\u89e6\u6478\u8bbe\u5907\u706b\u7206\u94fa\u8d27\u7684\u90a3\u51e0\u5e74\uff0c\u624b\u52bf\u4ea4\u4e92\u770b\u5f97\u4eba\u5929\u82b1\u4e71\u5760\uff0c\u4f46\u6700\u540e\u5927\u4f17\u666e\u904d\u63a5\u53d7\u7684\u624b\u52bf\u53ea\u6709\u6700\u7b80\u5355\u7684\u201c\u7269\u7406\u76f4\u63a5\u64cd\u4f5c\u201d\u3002\u8fd9\u8db3\u4ee5\u8bc1\u660e\u9664\u4e86\u786c\u4ef6\u4e4b\u5916\uff0c\u5408\u7406\u7684\u4ea4\u4e92\u8f6f\u4ef6\u8bbe\u8ba1\u662f\u591a\u4e48\u91cd\u8981\u3002<\/p>\n<p>\u89e6\u6478\u8f93\u5165\u76f8\u5bf9\u4e8e\u9f20\u6807\u8f93\u5165\u7684\u4f18\u52bf\uff1a<\/p>\n<ol>\n<li>\u51cf\u5c11\u4e86\u5bf9\u6309\u94ae\u3001\u8868\u5355\u7b49\u4f20\u7edfWIMP UI\u7684\u4f9d\u8d56<\/li>\n<li>\u4e0d\u9700\u8981\u989d\u5916\u7684\u63a7\u5236\u533a\u57df\uff0c\u4ece\u800c\u8282\u7701\u4e86\u5c4f\u5e55\u7a7a\u95f4\uff0c\u4f7f\u5c4f\u5e55\u5b8c\u5168\u4e13\u6ce8\u4e8e\u5185\u5bb9<\/li>\n<li>\u53ef\u4ee5\u5c06\u591a\u4e2a\u547d\u4ee4\u548c\u64cd\u4f5c\u8868\u8fbe\u4e3a\u4e00\u4e2a\u624b\u52bf\u52a8\u4f5c\uff0c\u5e76\u4e14\u5229\u7528\u8fd0\u52a8\u53cd\u9988\uff0c\u5229\u7528\u5f39\u7c27\u52a0\u8f7d\u6a21\u5f0f\u7684\u624b\u52bf\u53ef\u4ee5\u51cf\u5c11\u9519\u8bef\u7387\u3002<\/li>\n<\/ol>\n<p>\u89e6\u6478\u624b\u52bf\u7684\u7f3a\u70b9\uff1a<\/p>\n<ol>\n<li>\u7f3a\u4e4f\u901a\u7528\u7684\u81ea\u7136\u624b\u52bf\u96c6\u3002\u7814\u7a76\u8868\u660e\uff0c\u5bf9\u4e8eWIMP UI\u901a\u7528\u547d\u4ee4\u96c6\uff0c\u7528\u6237\u53ea\u80fd\u731c\u6d4b\u51fa\u4e00\u79cd\u624b\u52bf\uff1a\u76f4\u63a5\u7269\u7406\u64cd\u4f5c\uff08\u5373\u57fa\u672c\u7684\u70b9\u51fb\u3001\u6ed1\u52a8\u64cd\u4f5c\uff09\u3002<\/li>\n<li>\u589e\u52a0\u624b\u52bf\u8bcd\u6c47\u91cf\u7684\u65b9\u6cd5\u662f\u63d0\u4f9b\u624b\u52bf\u6559\u5b66\u7cfb\u7edf\uff0c\u4f8b\u5982UI\u5c0f\u90e8\u4ef6\u6216\u5355\u72ec\u7684\u5de5\u5177\u3002\u4f46\u4e00\u822c\u800c\u8a00\u7528\u6237\u5b66\u4e60\u5174\u8da3\u4e86\u4e86\u3002<\/li>\n<li>\u5f53\u524d\u624b\u52bf\u4ea4\u4e92\u7cfb\u7edf\u503e\u5411\u4e8e\u62df\u7269\u5316\u7684\u8bbe\u8ba1\uff0c\u4f46\u5bf9\u4e8e\u7f3a\u4e4f\u7269\u7406\u4e16\u754c\u5bf9\u5e94\u7684\u5c5e\u6027\uff0c\u7528\u6237\u96be\u4ee5\u731c\u6d4b\u64cd\u4f5c\u624b\u52bf\u3002<\/li>\n<\/ol>\n<p>OOD\u63d0\u4f9b\u4e86\u4e00\u79cd\u89e6\u6478\u5c4f\u4e0b\u4f7f\u7528\u7684UI\uff0c\u53ef\u4ee5\u5feb\u901f\u64cd\u4f5c\u56fe\u5143\u5bf9\u8c61\u3002\u65e2\u4e0d\u9700\u8981\u7528\u6237\u5b66\u4e60\u65b0\u624b\u52bf\uff0c\u4e5f\u4e0d\u9700\u8981\u4f20\u7edf\u7684MIMP UI\uff0c\u9760\u7684\u662f\u628a\u4e0d\u597d\u62df\u7269\u5316\u7684\u5c5e\u6027\u76f4\u63a5\u5f53\u505a\u666e\u901a\u5bf9\u8c61\u6765\u5904\u7406\uff0c\u4f7f\u7528\u6700\u7b80\u5355\u7684\u624b\u52bf\u96c6\u201c\u76f4\u63a5\u7269\u7406\u64cd\u4f5c\u201d\u6765\u5904\u7406\u3002\u867d\u7136\u770b\u8d77\u6765\u6539\u53d8\u4e0d\u591a\uff0c\u4f46\u5374\u53ef\u4ee5\u5927\u5927\u589e\u52a0\u5728\u9009\u4e2d\u56fe\u5143\u5c5e\u6027\u3001\u5728\u4e0d\u540c\u56fe\u5143\u4e4b\u95f4\u590d\u5236\u5c5e\u6027\u7684\u4fbf\u6377\u7a0b\u5ea6\uff0c\u800c\u8fd9\u6070\u6070\u662f\u7ed8\u56fe\u4e2d\u6700\u5e38\u89c1\u6700\u8017\u65f6\u7684\u64cd\u4f5c\u3002<\/p>\n<p>OOD\u7684UI\u662f\u4ee5\u53ef\u62d6\u52a8\u3001\u62c9\u4f38\u76842D\u5361\u7247\u65b9\u5f0f\u5c55\u73b0\u7684\u3002\u4f46\u5176\u5b9e\u4e5f\u53ef\u4ee5\u6362\u6210\u5176\u4ed6\u5c55\u73b0\u6a21\u5f0f\uff0c\u4f8b\u5982Dataink\u4e2d\u7684\u73af\u5f62\u5448\u73b0\u6a21\u5f0f\uff0c\u6216\u8005\u5728VR\u4e2d\u5e38\u89c1\u76843D\u5361\u7247\u6216\u7403\u578b\u5c55\u793a\u3002\u4e0d\u540c\u7684\u5c55\u793a\u65b9\u5f0f\u4e0e\u4e0d\u540c\u7684\u7269\u7406\u9690\u55bb\u5bf9\u5e94\uff0c\u4f8b\u5982\u5f53\u5c5e\u6027\u5361\u662f\u4e2a\u7403\u578b\u7684\u65f6\u5019\uff0c\u5c31\u53ef\u4ee5\u8003\u8651\u628a\u7403\u7684\u6eda\u52a8\u3001\u78b0\u649e\u7b49\u7269\u7406\u9690\u55bb\u8d4b\u4e88\u67d0\u79cd\u4ea4\u4e92\u4e0a\u7684\u610f\u4e49\u3002\u6240\u4ee5\uff0c\u63a2\u7d22\u5bf9\u5c5e\u6027\u5bf9\u8c61\u7684\u76f4\u63a5\u7269\u7406\u64cd\u4f5c\u4f9d\u7136\u662f\u53ef\u4ee5\u7814\u7a76\u7684\u9886\u57df\u3002<\/p>\n<p>OOD\u7684\u793a\u4f8b\u8f6f\u4ef6\u662f\u4e00\u4e2a\u753b\u56fe\u7a0b\u5e8f\u3002\u8be5\u6982\u5ff5\u4e5f\u53ef\u4ee5\u6269\u5c55\u5230\u5176\u4ed6\u5e94\u7528\u4e2d\uff0c\u4f8b\u5982\u56fe\u50cf\/\u97f3\u4e50\/\u89c6\u9891\u7f16\u8f91\uff0c\u5e03\u5c40\u8bbe\u8ba1\uff0c\u52a8\u753b\uff0c3D\u5efa\u6a21\u7b49\u3002\u5982\u679c\u7528\u4e8ePhotoshop\uff0c\u5219\u5e94\u652f\u6301\u5404\u79cd\u9009\u62e9\u6280\u672f\uff0c\u4ee5\u53ca\u652f\u6301\u52a8\u753b\u5de5\u5177\u3002\u6bd4\u5982\u4e24\u4e2a\u53d8\u91cf\u4e4b\u95f4\u7684\u5173\u7cfb\u66f2\u7ebf\u53ef\u4ee5\u4e0e\u5176\u4ed6\u53d8\u91cf\u5171\u4eab\uff0c\u4ee5\u5b9e\u73b0\u4e00\u81f4\u7684\u52a8\u753b\u901f\u5ea6\u3002\u8fd9\u4e00\u70b9\u5728Draco\u7b49\u8bba\u6587\u4e2d\u6709\u6240\u4f53\u73b0\uff0c\u53ef\u4ee5\u505a\u7ed3\u5408\u3002\u4e0d\u8fc7\uff0c\u4f5c\u8005\u4e0b\u4e00\u7bc7\u8bba\u6587CO\u9009\u53d6\u7684\u65b9\u5411\u66f4\u4e3a\u57fa\u7840\uff0c\u63a2\u8ba8\u4e86OOD\u7684UI\u65b9\u6848\u4e0e\u9009\u62e9\u6280\u672f\u7ed3\u5408\u7684\u53ef\u80fd\u6269\u5c55\u3002<\/p>\n<h2>2. Collection Object(CHI 2017\uff0cCO)<\/h2>\n<p>\u8fd9\u7bc7\u8bba\u6587\u662f\u4e0a\u4e00\u7bc7\u8bba\u6587OOD\u7684\u6269\u5c55\uff0c\u4e3b\u8981\u4ece\u753b\u56fe\u7a0b\u5e8f\u7684\u89d2\u5ea6\uff0c\u63a2\u8ba8\u4e86\u4ee5\u7c7b\u4f3cOOD\u7684UI\u89e3\u51b3\u591a\u56fe\u5143\u5bf9\u8c61\u7684\u64cd\u4f5c\u4f18\u5316\u95ee\u9898\u3002<\/p>\n<p>\u5728\u5e38\u89c1\u7684\u56fe\u5f62\u7f16\u8f91\u8f6f\u4ef6\u6bd4\u5982photoshop, illustrator, \u751a\u81f3powerpoint\u5f53\u4e2d\uff0c\u5bf9\u591a\u4e2a\u56fe\u5f62\u5bf9\u8c61\u7684\u9009\u62e9\u4f9d\u7136\u662f\u6311\u6218\uff0c\u4e3b\u8981\u95ee\u9898\u5305\u62ec\uff1a<\/p>\n<ol>\n<li>\u4f20\u7edfGUI\u4e2d\u9009\u4e2d\u662f\u4e00\u4e2a\u8fc7\u6e21\u72b6\u6001\u3002\u6bcf\u4e2a\u65b0\u505a\u51fa\u7684\u9009\u62e9\u90fd\u4f1a\u66ff\u6362\u524d\u4e00\u4e2a\u9009\u62e9\u3002\u5f53\u9009\u62e9\u5bf9\u8c61\u5f88\u591a\u800c\u53c8\u4e22\u5931\u9009\u62e9\u65f6\uff0c\u4f1a\u8ba9\u7528\u6237\u4ea7\u751f\u5f3a\u70c8\u632b\u8d25\u611f\u3002\u867d\u7136\u6709\u4e00\u4e2a\u89e3\u51b3\u529e\u6cd5\u662f\u5c06\u5f53\u524d\u9009\u62e9\u4fdd\u5b58\u4e3a\u7ec4\u4ee5\u4f9b\u4ee5\u540e\u91cd\u7528\uff0c\u4f46\u662f\u50f5\u5316\u7684\u7ec4\u7ed3\u6784\u65e0\u6cd5\u8fdb\u884c\u8de8\u7ec4\u7684\u6d41\u5f0f\u9009\u62e9\uff0c\u7ecf\u5e38\u8feb\u4f7f\u7528\u6237\u4e0d\u65ad\u9009\u62e9\u548c\u91cd\u65b0\u9009\u62e9\uff0c\u4ee5\u53ca\u53d6\u6d88\u5206\u7ec4\u548c\u91cd\u65b0\u5206\u7ec4\uff0c\u8fd9\u79cd\u5de5\u4f5c\u65e2\u7e41\u7410\u53c8\u5bb9\u6613\u8ba9\u7528\u6237\u4e22\u5931\u6ce8\u610f\u529b\u4ece\u800c\u4e2d\u65ad\u5fc3\u6d41\u3002<\/li>\n<li>\u4f20\u7edfGUI\u4e2d\u9009\u4e2d\u591a\u4e2a\u5bf9\u8c61\u65f6\u5c5e\u6027\u7684\u663e\u793a\u5b58\u5728\u95ee\u9898\u3002\u901a\u5e38\u7684\u505a\u6cd5\u662f\u9009\u4e2d\u4e00\u4e2a\u5bf9\u8c61\u4f1a\u663e\u793a\u8fd9\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\u503c\u3002\u4f46\u9009\u4e2d\u591a\u4e2a\u5bf9\u8c61\u65f6\uff0c\u901a\u5e38\u53ea\u663e\u793a\u591a\u4e2a\u5bf9\u8c61\u4e4b\u95f4\u5171\u4eab\u7684\u5c5e\u6027\u503c\uff0c\u5176\u4ed6\u5c5e\u6027\u503c\u5219\u901a\u5e38\u4e0d\u663e\u793a\u3002\u8fd9\u5bf9\u7cbe\u7ec6\u64cd\u4f5c\u663e\u7136\u4e0d\u5229\u3002<\/li>\n<li>\u4f20\u7edfGUI\u4e2d\u591a\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\u8d4b\u503c\u4e5f\u5b58\u5728\u547d\u4ee4\u6548\u7387\u95ee\u9898\u3002\u4f8b\u5982\uff0c\u7528\u6237\u60f3\u5c06\u5bf9\u8c61A\u7684\u989c\u8272\u5171\u4eab\u7ed9\u4e00\u7ec4\u9009\u5b9a\u7684\u5bf9\u8c61B+\uff0c\u5219\u5979\u5c06\u5fc5\u987b1\uff09\u53d6\u6d88\u5f53\u5bf9\u8c61\u96c6\uff0c2\uff09\u9009\u62e9\u5177\u6709\u989c\u8272\u7684\u5bf9\u8c61A\uff0c3\uff09\u67e5\u627e\u5e76\u590d\u5236\u5176\u989c\u8272\u503c\uff0c4\uff09\u91cd\u65b0\u9009\u62e9\u5bf9\u8c61B+\uff0c5\uff09\u6700\u540e\u5e94\u7528\u66f4\u6539\u3002<\/li>\n<\/ol>\n<p>\u672c\u6587\u4f5c\u8005\u5f00\u53d1\u4e86\u201cCollection Objects\u201d\uff08CO\uff09\uff0c\u5c06\u56fe\u5143\u9009\u62e9\u96c6\u5b9a\u4e49\u4e3a\u5bf9\u8c61\uff0c\u7136\u540e\u4f7f\u7528\u7c7b\u4f3c\u4e0a\u6587OOD\u7684UI\uff0c\u5c06\u9009\u4e2d\u5bf9\u8c61\u53ca\u5176\u5c5e\u6027\u663e\u793a\u4e3a\u4e00\u7cfb\u5217\u5361\u7247\uff0c\u8fd9\u4e9b\u5361\u7247\u53ef\u4ee5\u76f4\u63a5\u7528\u624b\u52bf\u8fdb\u884c\u79fb\u52a8\uff0c\u590d\u5236\uff0c\u94fe\u63a5\uff0c\u8fc7\u6ee4\u7b49\u64cd\u4f5c\u3002\u8fd9\u6837\uff0c\u9009\u62e9\u4e0d\u518d\u662f\u5bf9\u8c61\u7684\u8fc7\u6e21\u72b6\u6001\uff0c\u800c\u662f\u53ef\u4ee5\u88ab\u8fc7\u6ee4\uff0c\u91cd\u53e0\u548c\u5171\u540c\u64cd\u7eb5\u7684\u5bf9\u8c61\u7684\u96c6\u5408\u3002 \u6b64\u5916\uff0c\u5206\u7ec4\u4e0d\u518d\u662f\u50f5\u5316\u7684\u5c01\u95ed\u7ed3\u6784\uff0c\u800c\u662f\u53ef\u4ee5\u81ea\u7531\u6dfb\u52a0\uff0c\u5220\u9664\uff0c\u5bfc\u822a\u548c\u76f4\u63a5\u8bbf\u95ee\u7684\u4e00\u7ec4\u5bf9\u8c61\u3002<\/p>\n<p>CO\u5177\u6709\u4e24\u65b9\u9762\u7684\u4f18\u52bf\uff1a\u5176\u4e00\u662f\u89e6\u6478\u5c4f\u7684\u76f4\u63a5\u7269\u7406\u64cd\u4f5c\u53ef\u4ee5\u964d\u4f4e\u9519\u8bef\u9009\u62e9\u7684\u5904\u7f5a\u5e76\u7b80\u5316\u91cd\u7528\u64cd\u4f5c\uff08\u5c31\u50cfOOD\u4e2d\u90a3\u6837\uff09\uff1b\u5176\u4e8c\u662f\u5c06\u5404\u79cd\u9009\u62e9\u3001\u5206\u7ec4\u64cd\u4f5c\u90fd\u5c01\u88c5\u5230\u4e00\u4e2aUI\u5bf9\u8c61\u4e2d\uff0c\u4ee5\u4fbf\u7528\u6237\u5c06\u6ce8\u610f\u529b\u96c6\u4e2d\u5230\u5176\u5173\u952e\u64cd\u4f5c\u6b65\u9aa4\u4e0a\uff0c\u800c\u4e0d\u662f\u6d6a\u8d39\u5728\u9891\u7e41\u7684\u4e0a\u4e0b\u6587\u5207\u6362\u4e2d\u3002\u4ece\u800c\u5927\u5927\u63d0\u5347\u6548\u7387\u548c\u4f7f\u7528\u4f53\u9a8c\u3002<\/p>\n<p>Collection Ojbect UI\u548c\u4f7f\u7528\u8bf4\u660e<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large\" src=\"http:\/\/zhangdi.dengxinbo.cn\/ob1.png\" width=\"736\" height=\"391\" \/><\/p>\n<p>\u5982\u4e0a\u56fe\u6240\u793a\uff0cCO\u7684UI\u53ef\u4ee5\u7406\u89e3\u4e3a\uff0c\u5305\u62ec\u4e00\u4e2a\u83f1\u5f62\u7684\u4e2d\u5fc3\u90e8\u5206\u53ca\u5176\u56db\u5468\u7684\u9644\u4ef6\u3002\u83f1\u5f62\u5de6\u8fb9\u76f4\u6307\u5176\u9009\u62e9\u7684\u56fe\u5143\u5bf9\u8c61\uff0c\u4e0a\u4fa7\u4e3a\u5c5e\u6027\u8fc7\u6ee4\u5668\uff0c\u53f3\u4fa7\u662f\u5c5e\u6027\u64cd\u4f5c\u5217\u8868\u3002\u5c5e\u6027\u8fc7\u6ee4\u5668\u548c\u5c5e\u6027\u64cd\u4f5c\u5217\u8868\u90fdOOD\u7684\u5361\u7247\u6a21\u5f0f\u5448\u73b0\u591a\u4e2a\u5c5e\u6027\u3002<\/p>\n<p>\u57fa\u4e8eCollection Ojbect\u7684\u9009\u62e9\u64cd\u4f5c<\/p>\n<p>Collection Objects\u652f\u6301\u5404\u79cd\u9009\u62e9\u6280\u672f\uff0c\u4f8b\u5982\u5957\u7d22\/\u4ea4\u53c9\u9009\u62e9\uff0c\u6309\u5c5e\u6027\u9009\u62e9\uff0c\u5efa\u8bae\u6027\u9009\u62e9\u548c\u6a21\u7cca\u9009\u62e9\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO3.jpg\" \/><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/Co4.jpg\" \/><\/p>\n<p>1.\u5957\u7d22\/\u4ea4\u53c9\u9009\u62e9\uff1a\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u65b0\u5efa\u4e00\u4e2aCO\u5bf9\u8c61\uff0c\u7136\u540e\u4e00\u624b\u6309\u4f4f\u5176\u83f1\u5f62UI\uff0c\u4e00\u624b\u901a\u8fc7\u7b14\u8f93\u5165\u5957\u7d22\u9009\u62e9\u6307\u5b9a\u533a\u57df\uff0c\u5373\u53ef\u5b8c\u6210\u5bf9\u5154\u5b50\u5934\u90e8\u7684\u9009\u62e9\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/Ob2.png\" \/><\/p>\n<p>2.\u6309\u5c5e\u6027\u9009\u62e9\uff1b\u56fe\u5143\u7684\u5404\u79cd\u5c5e\u6027\u4e5f\u53ef\u4ee5\u4f5c\u4e3a\u9009\u62e9\u6761\u4ef6\uff0c\u4ee5\u4fbf\u5728\u62e5\u6324\u7684\u56fe\u5143\u4e2d\u51cf\u5c11\u9009\u62e9\u4ea4\u4e92\u7684\u6210\u672c\u3002\u4f8b\u5982\u5728\u4e0a\u9762\u8fd9\u4e2a\u7f8a\u9a7c\u7684\u4f8b\u5b50\u91cc\uff0c\u5148\u9009\u62e9\u7f8a\u9a7c\u7684\u5634\u90e8\u5f62\u72b6\u4f5c\u4e3a\u4e00\u4e2a\u8fc7\u6ee4\u5668\uff0c\u4ece\u800c\u65b9\u4fbf\u5730\u9009\u62e9\u8be5\u5f62\u72b6\u8fb9\u754c\u5185\u7684\u6240\u6709\u56fe\u5143\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO5.png\" \/><\/p>\n<p>3.\u6a21\u7cca\u9009\u62e9\uff1a\u8fd9\u4e2a\u529f\u80fd\u4fbf\u4e8e\u5feb\u901f\u5b9a\u4f4d\u76f8\u4f3c\u7684\u5bf9\u8c61\u5e76\u96c6\u4f53\u66f4\u6539\u5b83\u4eec\u3002\u5982\u4e0a\u56fe\u4f8b\u5b50\u4e2d\uff0c\u7528\u6237\u5728\u5730\u56fe\u4e0a\u9996\u5148\u9009\u62e9\u4e00\u4e2a\u7eff\u8272\u4e00\u4e2a\u6de1\u9ec4\u8272\u7684\u533a\u5757(a),\u7136\u540e\u53ef\u4ee5\u5c06\u8fd9\u4e24\u79cd\u989c\u8272\u4f5c\u4e3a\u8fc7\u6ee4\u5668\uff0c\u9009\u62e9\u5730\u56fe\u4e0a\u6240\u6709\u62e5\u6709\u76f8\u4f3c\u989c\u8272\u7684\u533a\u5757(b)\u3002\u4ee5\u4e0a\u8fd9\u4e9b\u8fd8\u53ea\u662f\u6309\u5c5e\u6027\u9009\u62e9\uff0c\u4f46\u6700\u540e\u8fd9\u4e00\u6b65\u5c31\u6709\u8da3\u4e86\uff0c\u8fd8\u80fd\u8c03\u8282\u8fc7\u6ee4\u5668\u4e2d\u989c\u8272\u7684\u6a21\u7cca\u6027\uff08fuzziness\uff09\u4ece\u800c\u9009\u4e2d\u6240\u6709\u5177\u6709\u76f8\u4f3c\u989c\u8272\u7684\u533a\u5757(c).\u8fd9\u4e2a\u6a21\u7cca\u5c5e\u6027\uff0c\u662f\u6839\u636e\u8fc7\u6ee4\u5668\u4e2d\u7684\u5c5e\u6027\u81ea\u52a8\u751f\u6210\u7684\u3002\u4f8b\u5982\u989c\u8272\u5c5e\u6027\u5bf9\u5e94\u8272\u76f8\u8c03\u8282\uff0c\u7ebf\u6761\u7c97\u7ec6\u5bf9\u5e94\u7c97\u7ec6\u8c03\u8282\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO6.png\" \/><\/p>\n<p>4. \u5efa\u8bae\u6027\u9009\u62e9\uff1a\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u7cfb\u7edf\u53ef\u4ee5\u6309\u7167\u683c\u5f0f\u5854\u539f\u5219\uff0c\u6839\u636e\u7528\u6237\u8f93\u5165\u63d0\u4f9b\u5efa\u8bae\u6027\u9009\u62e9\u3002\u4f8b\u5982\u7528\u6237\u5df2\u7ecf\u9009\u62e9\u4e86\u4e00\u7ec4\u56fe\u5143\uff0c\u7528\u6237\u6dfb\u52a0\u65b0\u56fe\u5143\u65f6\uff0cCO\u4f1a\u68c0\u67e5\u5b83\u4eec\u7684\u516c\u5171\u5c5e\u6027\u5e76\u663e\u793a\u4e00\u4e2a\u4e34\u65f6\u7684\u8fc7\u6ee4\u5668\u9009\u9879\u5361\uff0c\u4ee5\u5efa\u8bae\u7528\u6237\u9009\u62e9\u3002\u5982\u4e0a\u56fe\u7684\u4f8b\u5b50\uff0c\u7528\u6237\u4e00\u5f00\u59cb\u9009\u62e9\u7684\u662f\u9ec4\u8272\u86cb\u4e0a\u7684\u4e00\u5c0f\u90e8\u5206\u7ea2\u82b1\u7eb9(a),\u7136\u540e\u4f7f\u7528\u8fc7\u6ee4\u5668\u9009\u4e2d\u4e86\u6240\u6709\u7ea2\u82b1\u7eb9\uff0c\u5305\u62ec\u4e0b\u9762\u7d2b\u8272\u86cb\u4e0a\u7684\u7ea2\u82b1\u7eb9(b)\u3002\u7528\u6237\u53ef\u4ee5\u590d\u5236\u9ec4\u8272\u86cb\u5e76\u4e14\u628a\u8be5\u56fe\u5143\u62d6\u62fd\u5165CO\uff0c\u4ece\u800c\u5c06\u9009\u62e9\u8303\u56f4\u7f29\u5c0f\u5230\u9ec4\u8272\u86cb\u4e0a\u7684\u5168\u90e8\u7ea2\u82b1\u7eb9(c)\u3002\u6ce8\u610f\u8fd9\u65f6CO\u7684\u8fc7\u6ee4\u5668\u4ea7\u751f\u4e86\u4e00\u4e2a\u4e34\u65f6\u9009\u9879\u5361boundary\uff0c\u5b83\u662f\u64cd\u4f5c(c)\u6240\u5e26\u6765\u7684\u5efa\u8bae\u6027\u9009\u62e9\uff0c\u4ee3\u8868\u86cb\u7684\u8fb9\u754c\u8fd9\u4e2a\u516c\u5171\u5c5e\u6027\u3002\u7528\u6237\u53ef\u4ee5\u70b9\u51fb\u8fd9\u4e2a\u4e34\u65f6\u9009\u9879\u5361\uff0c\u4ece\u800c\u5c06\u9009\u62e9\u8303\u56f4\u7f29\u5c0f\u5230\u7d2b\u8272\u86cb\u7684\u7ea2\u8272\u82b1\u7eb9\uff0c\u8fd8\u662f\u9ec4\u8272\u86cb\u7684\u7ea2\u8272\u82b1\u7eb9(d)\u3002<\/p>\n<p>\u591a\u4e2aCO\u7684\u76f4\u63a5\u64cd\u4f5c<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO7.png\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>\u540c\u65f6\u9009\u4e2d\u4e24\u4e2aCO\u53ef\u4ee5\u5728\u4ed6\u4eec\u4e4b\u95f4\u751f\u6210\u4e00\u4e2a\u65b0\u7684CO\uff0c\u5728\u4ed6\u4eec\u4e4b\u95f4\u7684\u8fde\u7ebf\u663e\u793a\u4e86\u4e00\u4e9b\u5e03\u5c14\u64cd\u4f5c\uff0c\u5982\u5e76\u4ea4\u8865\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u624b\u52bf\u6765\u9009\u62e9\u67d0\u79cd\u5e03\u5c14\u64cd\u4f5c\u6765\u786e\u5b9a\u65b0\u7684CO\u7684\u5185\u5bb9\u3002\u4ee5\u4e0a\u5e03\u5c14\u64cd\u4f5c\u8fdb\u4e00\u6b65\u5b9e\u73b0\u4e86\u73b0\u6709\u9009\u62e9\u8303\u56f4\u7684\u66f4\u9ad8\u5c42\u6b21\u7ec4\u5408\u3002<\/p>\n<p>\u5206\u7ec4\u64cd\u4f5c<\/p>\n<p>&nbsp;<\/p>\n<p>\u5728\u73b0\u6709\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u7528\u6237\u53ef\u4ee5\u5c06\u6240\u9009\u5bf9\u8c61\u4fdd\u5b58\u6210\u5206\u7ec4\u4ee5\u4fdd\u5b58\u6240\u9009\u5185\u5bb9\u3002 \u4f46\u662f\uff0c\u8fd9\u79cd\u521a\u6027\u7ed3\u6784\u4e5f\u7ed9\u9009\u62e9\u5176\u4e2d\u7684\u7269\u4f53\u5e26\u6765\u4e86\u56f0\u96be\u3002 \u8981\u8de8\u7ec4\u9009\u62e9\u5bf9\u8c61\uff0c\u5219\u5fc5\u987b\u9996\u5148\u5c06\u5176\u53d6\u6d88\u7ec4\u5408\u3002 \u5982\u679c\u5979\u6253\u7b97\u4fdd\u5b58\u8be5\u7ec4\u4ee5\u4f9b\u4ee5\u540e\u91cd\u7528\uff0c\u5219\u5fc5\u987b\u91cd\u65b0\u5206\u7ec4\u3002\u00a0\u4f5c\u4e3a\u5bf9\u6bd4\uff0c\u5728CO\u4e2d\uff0c\u521b\u5efa\u7ec4\u53ea\u9700\u5c06CO\u5782\u76f4\u7ffb\u8f6c\uff0c\u5373\u53ef\u5c06\u9009\u5b9a\u7684\u5bf9\u8c61\u8f6c\u6362\u4e3a\u4e00\u4e2a\u7ec4\u3002 \u7ffb\u8f6c\u5b8c\u6210\u540e\uff0c\u5176\u83f1\u5f62\u4e2d\u4f1a\u51fa\u73b0\u4e00\u4e2a\u56fe\u6807\uff0c\u6307\u793a\u5176\u5206\u7ec4\u72b6\u6001\u3002 \u518d\u6b21\u7ffb\u8f6c\u5c06\u5176\u53d6\u6d88\u7ec4\u5408\u3002 \u5e76\u4e14\u4ecd\u7136\u53ef\u4ee5\u4f7f\u7528\u4e0a\u8ff0\u9009\u62e9\u6280\u672f\u5c06\u5bf9\u8c61\u81ea\u7531\u6dfb\u52a0\u5230\u7ec4\u4e2d\u6216\u4ece\u7ec4\u4e2d\u5220\u9664\uff0c\u800c\u4e0d\u9700\u8981\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO8.png\" \/><\/p>\n<p>\u7ec4\u5185\u5bfc\u822a\uff1aCO\u521b\u5efa\u7684\u5206\u7ec4\u662f\u6811\u5f62\u7ed3\u6784\u7684\u3002\u56e0\u4e3a\u6811\u5f62\u7ed3\u6784\u6709\u52a9\u4e8e\u51cf\u5c11\u5bf9\u8c61\u6570\u91cf\u5e76\u4e14\u6613\u4e8e\u7406\u89e3\u3002\u4e3a\u4e86\u4fbf\u4e8e\u7528\u6237\u6d4f\u89c8\u7ec4\u5185\u56fe\u5143\u5bf9\u8c61\uff0cCO\u6709\u72ec\u7279\u7684\u4ea4\u4e92\u3002\u9996\u5148\uff0c\u7528\u6237\u8981\u6309\u4f4f\u4ed6\u60f3\u67e5\u770b\u7684\u56fe\u5143\uff0c\u7136\u540e\u53e6\u4e00\u53ea\u624b\u5782\u76f4\u6ed1\u52a8CO\u7684\u83f1\u5f62\u56fe\u6807\uff08a\uff09\u3002\u7136\u540e\uff0c\u4e0d\u540c\u7684\u5c42\u6b21\u5143\u7d20\u5c06\u968f\u4e4b\u663e\u793a\uff08b-e\uff09\u3002<\/p>\n<p>\u8de8\u7ec4\u9009\u62e9\u5bf9\u8c61\uff1a\u4f7f\u7528\u5206\u7ec4\u65f6\u9047\u5230\u7684\u4e00\u4e2aUI\u95ee\u9898\u662f\u65e0\u6cd5\u8f7b\u6613\u9009\u62e9\u7ec4\u5185\u6216\u7ec4\u95f4\u7684\u5bf9\u8c61\u3002 \u4f46\u662f\u5728CO\u91cc\u4e0d\u5b58\u5728\u8fd9\u4e2a\u95ee\u9898\u3002\u4f8b\u5982\uff0c\u7528\u6237\u60f3\u521b\u5efa\u4e00\u4e2a\u65b0\u7684CO\uff0c\u6dfb\u52a0\u53e6\u4e00\u4e2a\u5df2\u521b\u5efa\u597d\u7684\u5206\u7ec4\u5185\u7684\u67d0\u4e2a\u56fe\u5143\uff0c\u53ea\u9700\u8981\u50cf\u89e6\u6478\u6240\u9700\u5bf9\u8c61\uff0c\u5411\u4e0b\u62d6\u52a8\u4ee5\u5bfc\u822a\u8be5\u7ea7\u522b\uff0c\u7136\u540e\u5728\u8981\u9009\u62e9\u8be5\u5bf9\u8c61\u7684\u7ea7\u522b\u4e0a\u677e\u5f00\u624b\u6307\u3002\u5728\u91ca\u653e\u624b\u6307\u4ee5\u5c06\uff08\u5b50\uff09\u7ec4\u6dfb\u52a0\u5230\u9009\u62e9\u4e2d\u4e4b\u524d\uff0c\u8fd8\u53ef\u4ee5\u50cf\u5728\u6807\u8bb0\u83dc\u5355\u4e2d\u4e00\u6837\u5411\u53f3\u6ed1\u52a8\uff0c\u4ee5\u5c06\u8be5\u7ea7\u522b\u4e0b\u67d0\u4e2a\u5bf9\u8c61\u6dfb\u52a0\u5230\u9009\u62e9\u4e2d\uff0c\u800c\u4e0d\u662f\u5c06\u8be5\u5c42\u6b21\u4e0b\u6240\u6709\u5bf9\u8c61\u90fd\u6dfb\u52a0\u8fc7\u53bb\u3002<\/p>\n<p>\u9009\u4e2d\u5bf9\u8c61\u7684\u5c5e\u6027\u64cd\u4f5c<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO10.png\" \/><\/p>\n<p>CO\u7684\u9009\u4e2d\u5bf9\u8c61\u5c5e\u6027\u7684\u64cd\u4f5c\u7ee7\u627f\u81eaOOD\uff1a\u7528\u6237\u9700\u8981\u4e00\u53ea\u624b\u6309\u4f4f\u76ee\u6807\u5c5e\u6027\u5361\uff0c\u7136\u540e\u53e6\u4e00\u53ea\u624b\u5728\u5c4f\u5e55\u4e0a\u6ed1\u52a8\u6765\u76f4\u63a5\u64cd\u4f5c\u5c5e\u6027\u3002\u5728\u6b64\u57fa\u7840\u4e0a\uff0cCO\u8fdb\u4e00\u6b65\u589e\u52a0\u5728\u5feb\u901f\u8c03\u6574\u5355\u4e2a\u5bf9\u8c61\u6216\u5bf9\u8c61\u96c6\u5408\u7684\u64cd\u4f5c\u3002\u4f8b\u5982\u4e0a\u9762\u8fd9\u4e2a\u4e1c\u4eac\u5730\u94c1\u7684\u4f8b\u5b50\u4e2d\uff0c\u7528\u6237\u4e00\u53ea\u624b\u6309\u4f4f\u201cstroke\u201c\u5c5e\u6027\u5361\uff0c\u7136\u540e\u53e6\u4e00\u53ea\u624b\u5728\u76ee\u7ea2\u8272\u7ebf\u6761\u4e0a\u6ed1\u52a8\uff08a\uff09\uff0c\u90a3\u4e48\u5c31\u53ea\u6539\u53d8\u8be5\u7ea2\u8272\u7ebf\u6761\u7684\u7c97\u7ec6\u3002\u5982\u679c\u53e6\u4e00\u53ea\u624b\u662f\u5728\u7a7a\u767d\u533a\u57df\u4e0a\u6ed1\u52a8\uff08b\uff09,\u5219\u6539\u53d8\u7684\u662f\u5168\u90e8\u7ebf\u6761\u7684\u7c97\u7ec6\u3002\u8fd9\u6837\uff0c\u7528\u6237\u5c31\u53ef\u4ee5\u540c\u65f6\u64cd\u4f5c\u591a\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u4e8c\u4e0d\u9700\u8981\u50cf\u4f20\u7edfUI\u90a3\u6837\u9891\u7e41\u5730\u5728\u5355\u4e2a\u9009\u62e9\u5bf9\u8c61\u548c\u591a\u4e2a\u9009\u62e9\u5bf9\u8c61\u4e4b\u95f4\u5176\u5207\u6362\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhangdi.dengxinbo.cn\/CO9.png\" \/><\/p>\n<p>CO\u5728\u591a\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\u5c55\u793a\u65b9\u9762\u4e5f\u6709\u72ec\u5230\u4e4b\u5904\u3002\u9009\u4e2d\u591a\u4e2a\u56fe\u5143\uff0cCO\u7684UI\u5c06\u663e\u793a\u6240\u6709\u5c5e\u6027\u503c\uff08\u800c\u4e0d\u662f\u53ea\u663e\u793a\u516c\u5171\u5c5e\u6027\uff09\u3002\u5f53\u6709\u4e9b\u5c5e\u6027\u5185\u5bb9\u592a\u591a\u65f6\uff0c\u5c06\u4ee5\u53ef\u4f38\u7f29\u7684\u65b9\u5f0f\u663e\u793a\u3002\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u9009\u4e2d\u4e86\u4e24\u4e2a\u5343\u7eb8\u9e64\uff0c\u6240\u6709\u5c5e\u6027\u90fd\u663e\u793a\u5728\u4e86\u83f1\u5f62\u53f3\u4fa7\u7684\u5c5e\u6027\u9009\u9879\u5361\u4e2d\u3002\u5c5e\u6027\u9009\u663e\u5361\u4e00\u5f00\u59cb\u4ee5\u56fe\u6807\u663e\u793a\u8272\u57df\u4fe1\u606f(a)\uff0c\u7528\u6237\u53ef\u4ee5\u5c55\u5f00\u8be5\u9009\u9879\u5361\uff0c\u5c06\u663e\u793a\u6c47\u603b\u4fe1\u606f\uff0c\u5982\u56fe\u4e2d\u6240\u663e\u793a\u7684\u6e10\u53d8\uff08b\uff09\uff1b\u7528\u6237\u8fd8\u53ef\u4ee5\u8fdb\u4e00\u6b65\u5730\u5c55\u5f00\uff0c\u5b8c\u6574\u5730\u663e\u793a\u5f53\u524d\u6807\u91cf\u7684\u6700\u5927\u503c\uff0c\u6700\u5c0f\u503c\uff0c\u5747\u503c(c)\uff0c\u5982\u6b64\u53ef\u4ee5\u5e2e\u52a9\u7528\u6237\u5feb\u901f\u67e5\u627e\u3001\u590d\u5236\u6216\u66f4\u6539\u5c5e\u6027\u503c\u3002\u4f8b\u5982\u7528\u6237\u53ef\u4ee5\u7528\u53e6\u4e00\u79cd\u989c\u8272\u66ff\u4ee3\u5f53\u524d\u8272\u57df\u6700\u5c0f\u503c\uff08\u6de1\u84dd\uff09\uff0c\u90a3\u4e48\u6240\u6709\u56fe\u5f62\u5bf9\u8c61\u7684\u8be5\u79cd\u989c\u8272\u5c5e\u6027\u90fd\u5c06\u88ab\u66f4\u65b0\u3002<\/p>\n<p>\u7ed9\u96c6\u5408\u8d4b\u503c\uff1a\u5982\u679c\u7528\u6237\u8981\u5c06\u4e00\u4e2a\u989c\u8272\u5e94\u7528\u4e8e\u5176\u4ed6\u6240\u6709\u5bf9\u8c61\uff0c\u53ef\u4ee5\u4e00\u624b\u6309\u4f4f\u5bf9\u8c61\u96c6\u5408CO\u7684fill\u5c5e\u6027\uff0c\u7136\u540e\u70b9\u51fb\u4efb\u4f55\u5176\u4ed6\u5bf9\u8c61\u6765\u83b7\u53d6\u586b\u5145\u8272\u4ee5\u8f7b\u677e\u5b9e\u73b0\u76ee\u6807\u3002\u7c7b\u4f3c\u5730\uff0c\u6301\u6709\u4f4d\u7f6e\u5c5e\u6027\u5e76\u70b9\u51fb\u4e00\u4e2a\u5bf9\u8c61\u8868\u793a\u4ed6\u5e0c\u671b\u6574\u4e2a\u96c6\u5408\u4e0e\u4e4b\u5bf9\u9f50\u3002\u76f8\u5bf9\u4e8e\u4f20\u7edf\u65b9\u6cd5\uff08\u7528\u6237\u5c06\u5fc5\u987b\u5355\u72ec\u9009\u62e9\u8be5\u5bf9\u8c61\uff0c\u67e5\u627e\u5176\u586b\u5145\u5c5e\u6027\u503c\uff0c\u8bb0\u4f4f\u6216\u590d\u5236\u8be5\u503c\uff0c\u7136\u540e\u591a\u9009\u5176\u4ed6\u5bf9\u8c61\uff0c\u7136\u540e\u8bbe\u7f6e\u9009\u62e9\u7684\u503c\uff09\u8981\u5feb\u5f97\u591a\u3002<\/p>\n<p>\u6700\u540e\uff0c\u4f5c\u8005\u5c06\u5176\u8f6f\u4ef6\u7a0b\u5e8f\u8fdb\u884c\u4e866\u4eba\u7ec4\u7684\u7528\u6237\u7814\u7a76\u3002\u53c2\u4e0e\u8005\u666e\u904d\u5171\u8bc6\u5305\u62ec\uff1a<\/p>\n<ol>\n<li>\u53c2\u4e0e\u8005\u5f3a\u70c8\u8d5e\u6210\u6309\u5c5e\u6027\u8fdb\u884c\u8fc7\u6ee4\uff0c\u5feb\u901f\u7684\u7ec4\u5bfc\u822a\u4ee5\u53ca\u5728\u7ec4\u4e4b\u95f4\u8fdb\u884c\u76f4\u63a5\u9009\u62e9\u3002<\/li>\n<li>\u4f7f\u7528CO\u610f\u5473\u7740\u66f4\u5c11\u7684\u4e0a\u4e0b\u6587\u5207\u6362\uff0c\u4e0d\u9700\u8981\u628a\u6ce8\u610f\u529b\u4e34\u65f6\u6295\u653e\u5230\u5de5\u5177\u680f\u3001\u83dc\u5355\u4e2d\u53bb\uff0c\u66f4\u6709\u52a9\u4e8e\u5fc3\u6d41\u7684\u4fdd\u6301\u3002<\/li>\n<li>\u4f7f\u7528Illustrator\uff0c\u6709\u4e00\u534a\u65f6\u95f4\u5728\u7ba1\u7406\u7ec4\u3002\u800c CO\u5f00\u653e\u7684\u7ec4\u7ed3\u6784\u548c\u7ec4\u7684\u5feb\u901f\u5bfc\u822a\uff0c\u51cf\u5c11\u4e86\u7ba1\u7406\u56fe\u5f62\u7ed3\u6784\u7684\u5de5\u4f5c\u91cf\u3002<\/li>\n<li>\u5bf9\u9009\u5b9a\u5bf9\u8c61\u7684\u805a\u5408\u5c5e\u6027\u7684\u4e30\u5bcc\u64cd\u4f5c\uff0c\u8fd9\u5b9e\u9645\u4e0a\u662f\u5728\u8003\u8651\u652f\u6301\u590d\u6742\u8bbe\u8ba1<\/li>\n<\/ol>\n<p>\u4e00\u4e9b\u6539\u8fdb\u610f\u89c1\uff1a<\/p>\n<ol>\n<li>CO\u672c\u8eab\u5360\u7684\u5c4f\u5e55\u9762\u79ef\u5f88\u5927\uff0c\u591a\u4e2aCO\u6d6e\u52a8\u5728\u5de5\u4f5c\u533a\uff0c\u4e0d\u4ec5\u6df7\u4e71\u8fd8\u4f1a\u5e26\u6765\u4e92\u76f8\u906e\u76d6\u7684\u95ee\u9898\u3002 \u56e0\u6b64\u5c06\u6765\u7684\u7cfb\u7edf\u53ef\u4ee5\u63d0\u4f9b\u4e00\u4e2a\u4fa7\u9762\u677f\u6765\u7ec4\u7ec7\u201cCO\u201d<\/li>\n<li>\u672a\u6765\u7684\u5de5\u4f5c\u8fd8\u53ef\u4ee5\u63a2\u7d22\u5c06\u5176\u4ed6\u9009\u62e9\u6280\u672f\u5305\u542b\u5230\u96c6\u5408\u5bf9\u8c61\u4e2d\u3002 \u4f8b\u5982\uff0c\u683c\u5f0f\u5854\u539f\u7406\u53ef\u4ee5\u4e0d\u4f7f\u7528\u7279\u5b9a\u7684\u6837\u5f0f\u5c5e\u6027\u4f5c\u4e3a\u641c\u7d22\u8fc7\u6ee4\u5668\uff0c\u800c\u53ef\u4ee5\u76f4\u63a5\u7528\u4f5c\u9009\u62e9\u8fc7\u6ee4\u5668\uff0c\u5176\u6743\u91cd\u53ef\u4ee5\u901a\u8fc7\u6a21\u7cca\u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u548c\u8c03\u6574\u3002 \u53ef\u4ee5\u901a\u8fc7\u7c7b\u4f3c\u4e8e\u8fc7\u6ee4\u5668\u5c5e\u6027\u7684\u65b9\u5f0f\u76f4\u63a5\u5411\u7528\u6237\u5efa\u8bae\u6f5c\u5728\u7684\u9009\u62e9\u7ed3\u679c\u3002<\/li>\n<li>\u4e0e\u73b0\u6709WIMP\u5de5\u5177\u8fdb\u884c\u6bd4\u8f83\u3002 \u8fd9\u53ef\u80fd\u63ed\u793a\u4e86\u7528\u6237\u4e3a\u5b9e\u73b0\u67d0\u4e2a\u76ee\u6807\u53ef\u80fd\u91c7\u53d6\u7684\u4e0d\u540c\u7b56\u7565\u4ee5\u53ca\u6027\u80fd\u7684\u5dee\u5f02\uff0c\u4f8b\u5982\u6240\u9700\u7684\u6b65\u9aa4\u6570\u91cf\u3002<\/li>\n<li>\u521b\u5efa\u5927\u91cf\u5bf9\u8c61\u672c\u8eab\u65e2\u56f0\u96be\u53c8\u8017\u65f6\u3002 \u672a\u6765\u7684\u5de5\u4f5c\u53ef\u80fd\u4f1a\u63a2\u7d22\u96c6\u5408\u5bf9\u8c61\u5982\u4f55\u80fd\u591f\u8f7b\u677e\u5feb\u901f\u5730\u751f\u6210\u67d0\u4e9b\u6a21\u5f0f\u7684\u591a\u4e2a\u5bf9\u8c61\u3002 \u8fd9\u5728\u8ba1\u7b97\u673a\u8f85\u52a9\u8bbe\u8ba1\uff0c\u6570\u636e\u53ef\u89c6\u5316\u548c\u57fa\u4e8e\u7eb9\u7406\u7684\u7ed8\u56fe\u65b9\u9762\u53ef\u80fd\u5f88\u6709\u7528\u3002<\/li>\n<\/ol>\n<p>\u4e2a\u4eba\u4f53\u4f1a\uff1a<\/p>\n<p>OOD\u7cfb\u7edf\u5141\u8bb8\u7528\u6237\u5c06\u5bf9\u8c61\u81ea\u7531\u5206\u89e3\u4e3a\u66f4\u5c0f\u7684\u5355\u5143-\u5c5e\u6027\u5bf9\u8c61\uff0c\u4ece\u800c\u63d0\u4f9b\u4e86\u5bf9\u8c61\u7684\u5fae\u89c2\u89c6\u56fe\u3002 \u4f5c\u4e3a\u8865\u5145\uff0cCO\u63a2\u7d22\u4e86\u5bf9\u8c61\u96c6\u5408\u7684\u5b8f\u64cd\u4f5c\uff0c\u8fd9\u4e3a\u63a2\u7d22\u66f4\u9ad8\u5c42\u6b21\u7684\u4ea4\u4e92\u63d0\u4f9b\u4e86\u673a\u4f1a\u3002\u4e2a\u4eba\u901a\u8fc7\u770b\u89c6\u9891\u548c\u8bba\u6587\u611f\u89c9\u8fd9\u79cd\u4ea4\u4e92\u8bbe\u8ba1\u8fd8\u662f\u633a\u53cb\u597d\u7684\u3002\u4f8b\u5982\u9009\u4e2d\u4e00\u7ec4\u5bf9\u8c61\u7684\u540c\u65f6\uff0c\u8fd8\u80fd\u5728\u4e0d\u4e22\u5931\u5f53\u524d\u6240\u9009\u7684\u60c5\u51b5\u4e0b\u4fee\u6539\u5176\u4e2d\u67d0\u4e00\u4e2a\u5bf9\u8c61\u7684\u503c\uff0c\u4ee4\u4eba\u5f88\u60f3\u5c1d\u8bd5\u3002\u53ef\u4ee5\u60f3\u89c1\u8fd9\u79cd\u4ea4\u4e92\u8bbe\u8ba1\u5c06\u80fd\u66f4\u597d\u5730\u53d1\u6325\u89e6\u6478\u8bbe\u5907\u7684\u4f18\u52bf\uff0c\u8ba9\u7528\u6237\u7cbe\u529b\u4e13\u6ce8\u4e8e\u8bbe\u8ba1\u3002\u53ef\u60dc\u6ca1\u6709\u5f00\u6e90\u4ee3\u7801\u8ba9\u6211\u4eec\u90e8\u7f72\u3002<\/p>\n<p>\u4e2a\u4eba\u8ba4\u4e3a\u5176\u4e2d\u7684\u4e00\u4e9b\u7814\u7a76\u601d\u8def\u53ef\u4ee5\u7ee7\u7eed\u505a\u6269\u5c55\u3002\u4f8b\u5982\u57fa\u4e8e\u7528\u6237\u8f93\u5165\u7684\u63a8\u8350\u9009\u62e9\u3001\u63a8\u8350\u5e03\u5c40\u7b49\u529f\u80fd\u3002\u53e6\u5916\u5982\u540c\u4f5c\u8005\u5728\u6587\u4e2d\u5199\u5f97\u90a3\u6837\uff0c\u521b\u5efa\u5927\u91cf\u5bf9\u8c61\u672c\u8eab\u65e2\u56f0\u96be\u53c8\u8017\u65f6\uff0c\u6240\u4ee5\u4ed6\u7684\u4e0b\u4e00\u7bc7\u8bba\u6587\u5c31\u662f\u4ee5\u6570\u636e\u9a71\u52a8\u751f\u6210\u57fa\u4e8e\u67d0\u4e9b\u6a21\u5f0f\u7684\u591a\u4e2a\u5bf9\u8c61\u4e3a\u76ee\u7684\u7684\u5de5\u4f5c\uff0cdataink\u3002\u5728dataink\u4e2d\uff0c\u7ee7\u627f\u4e86OOD\u7684UI\u64cd\u4f5c\uff0c\u4fdd\u7559\u4e86CO\u7684\u5bf9\u8c61\u5c5e\u6027\u5c55\u793a\u65b9\u5f0f\uff08\u53ef\u4ee5\u5c55\u5f00\u7684\u6c47\u603b\u4fe1\u606f\uff09\u3002\u6b64\u5916\u589e\u52a0\u4e86\u6570\u636e\u7ed1\u5b9a\u529f\u80fd\uff1a\u7528\u4e86\u4e00\u4e2a\u65b0\u7684\u53cc\u73af\u578bUI\u6765\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Haijun Xia\u535a\u58eb2016-201<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[63,154],"class_list":["post-2206","post","type-post","status-publish","format-standard","hentry","category-data-visualization","tag-63","tag-154"],"_links":{"self":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts\/2206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2206"}],"version-history":[{"count":0,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts\/2206\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}