{"id":2944,"date":"2019-10-17T17:20:54","date_gmt":"2019-10-17T09:20:54","guid":{"rendered":"https:\/\/www.aoisnow.net\/blog\/?p=2944"},"modified":"2019-10-17T17:20:54","modified_gmt":"2019-10-17T09:20:54","slug":"tont-38313-windows-ui-%e4%b8%ad%e3%80%8e%e7%9d%ab%e6%af%9b%e8%86%8f%e3%80%8f%ef%bc%88mascara%ef%bc%89%e7%9a%84%e8%bf%9b%e5%8c%96%e5%8f%b2","status":"publish","type":"post","link":"https:\/\/www.aoisnow.net\/blog\/archives\/2944","title":{"rendered":"TONT 38313 Windows UI \u4e2d\u300e\u776b\u6bdb\u818f\u300f\uff08mascara\uff09\u7684\u8fdb\u5316\u53f2"},"content":{"rendered":"

\u539f\u6587\u94fe\u63a5\uff1ahttps:\/\/devblogs.microsoft.com\/oldnewthing\/20040728-00\/?p=38313<\/a><\/p>\n

The \u201clook\u201d of the Windows user interface has gone through fashion cycles.<\/p>\n

Windows \u7528\u6237\u754c\u9762\u7684\u300e\u89c2\u611f\u300f\u7ecf\u5386\u4e86\u51e0\u8f6e\u65f6\u5c1a\u98ce\u683c\u7684\u66f4\u8fed\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Windows 1.0 \u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea ToastyTech<\/a>\uff09<\/p>\n

In the beginning, there was Windows 1.0, which looked very flat<\/a> because screen resolutions were rather low in those days and color depth was practically nonexistent. If you had 16 colors, you were doing pretty good. You couldn\u2019t afford to spend very many pixels on fluff like borders, and shadows were out of the question due to lack of color depth.<\/p>\n

\u4e00\u5f00\u59cb\uff0c\u662f Windows 1.0\uff0c\u90a3\u65f6\u5019\u7528\u6237\u754c\u9762\u770b\u4e0a\u53bb\u975e\u5e38\u5e73\u5766\uff0c\u56e0\u4e3a\u90a3\u65f6\u7684\u5c4f\u5e55\u5206\u8fa8\u7387\u5f88\u4f4e\uff0c\u5e76\u4e14\u8272\u5f69\u6df1\u5ea6\u5dee\u4e0d\u591a\u8fd8\u662f\u4e0d\u5b58\u5728\u7684\u4e1c\u897f\u3002\u5982\u679c\u80fd\u7528\u523016\u79cd\u8272\u5f69\uff0c\u5c31\u5df2\u7ecf\u505a\u5f97\u5f88\u4e0d\u9519\u4e86\u3002\u4f60\u6ca1\u6709\u529e\u6cd5\u5728\u4f8b\u5982\u8fb9\u6846\u8fd9\u79cd\u5c0f\u7ec6\u8282\u4e0a\u6d6a\u8d39\u592a\u591a\u50cf\u7d20\u70b9\uff0c\u800c\u9634\u5f71\u8fd9\u79cd\u4e1c\u897f\u7531\u4e8e\u6ca1\u6709\u8272\u5f69\u6df1\u5ea6\uff0c\u662f\u5b8c\u5168\u4e0d\u53ef\u80fd\u7684\u4e8b\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Windows 3.0 \u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea ToastyTech<\/a>\uff09<\/p>\n

The \u201cflat look\u201d continued in Windows 2.0, but Windows 3.0 added a hint of 3D<\/a> (notice the beveling in the minimize\/maximize buttons and in the toolbar buttons on the help window).<\/p>\n

\u8fd9\u79cd\u300e\u5e73\u9762\u89c2\u611f\u300f\u5ef6\u7eed\u5230\u4e86 Windows 2.0 \u4e2d\uff0c\u4e0d\u8fc7\u5230\u4e86Windows 3.0 \u589e\u52a0\u4e86\u4e00\u4e01\u70b9\u7684 3D \u6548\u679c\uff08\u6ce8\u610f\u89c2\u5bdf\u6700\u5c0f\u5316\u3001\u6700\u5927\u5316\u6309\u94ae\u4ee5\u53ca\u5728\u5e2e\u52a9\u7a97\u53e3\u7684\u5de5\u5177\u680f\u6309\u94ae\u4e0a\u51fa\u73b0\u7684\u659c\u8fb9\uff09\u3002<\/p>\n

Other people decided that the 3D look was the hot new thing, and libraries sprung up to add 3D shadow and outlining effects to nearly everything. The library CTL3D.DLL started out as just an Excel thing, but it grew in popularity until it became the \u201cstandard\u201d way to make your dialog boxes \u201ceven more 3D\u201d.<\/p>\n

\u5176\u5b83\u4eba\u611f\u5230\u8fd9\u79cd 3D \u6548\u679c\u5728\u5f53\u65f6\u662f\u70ed\u95e8\u7684\u65b0\u4e8b\u7269\uff0c\u4e3a\u51e0\u4e4e\u6240\u6709\u4e1c\u897f\u589e\u52a03D\u9634\u5f71\u548c\u8fb9\u7ebf\u6548\u679c\u7684\u5e93\u7a81\u7136\u5f00\u59cb\u6d8c\u73b0\u3002CTL3D.DLL \u4e00\u5f00\u59cb\u53ea\u662f Excel \u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u4f46\u5374\u9010\u6e10\u666e\u53ca\u5f00\u6765\uff0c\u76f4\u5230\u6700\u7ec8\u6210\u4e3a\u4e86\u4f7f\u5bf9\u8bdd\u6846\u53d8\u5f97\u300e\u66f4\u52a03D\u300f\u7684\u6807\u51c6\u65b9\u5f0f\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Windows 95 \u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea ToastyTech<\/a>\uff09<\/p>\n

Come Windows 95, even more of the system had a 3D look<\/a>. Notice the beveling along the inside edge of the panes in the Explorer window. Furthermore, 3D-ness was turned on by default for all programs that marked themselves as \u201c4.0\u201d; i.e., programs that were designed for Windows 95. For programs that wanted to run on older versions of Windows as well, a new dialog style DS_3DLOOK was added, so that they could indicate that they wanted 3D-ization if available.<\/p>\n

\u5230\u4e86 Windows 95 \u7684\u5e74\u4ee3\uff0c\u7cfb\u7edf\u4e2d\u6709\u8d8a\u6765\u8d8a\u591a\u7684\u7ec4\u4ef6\u62e5\u6709\u4e86 3D \u5916\u89c2\uff0c\u53ef\u4ee5\u6ce8\u610f\u89c2\u5bdf\u8d44\u6e90\u7ba1\u7406\u5668\u7a97\u53e3\u4e2d\u9762\u677f\u5185\u89d2\u7684\u659c\u8fb9\u6548\u679c\u3002\u6b64\u5916\uff0c3D \u6548\u679c\u5bf9\u4e8e\u5c06\u81ea\u5df1\u6807\u8bb0\u4e3a\u300e4.0\u300f\u7684\u2014\u2014\u4ea6\u5373\u4e3a Windows 95 \u800c\u8bbe\u8ba1\u2014\u2014\u7684\u5e94\u7528\u7a0b\u5e8f\u662f\u9ed8\u8ba4\u5f00\u542f\u7684\u3002\u81f3\u4e8e\u90a3\u4e9b\u4ecd\u7136\u5e0c\u671b\u53ef\u4ee5\u5728\u65e7\u7248\u672c Windows \u4e0a\u8fd0\u884c\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u7cfb\u7edf\u4e3a\u5176\u589e\u52a0\u4e86\u4e00\u79cd\u65b0\u7684\u5bf9\u8bdd\u6846\u6837\u5f0f\uff1aDS_3DLOOK\uff0c\u4ee5\u4fbf\u7a0b\u5e8f\u5411\u7cfb\u7edf\u63d0\u51fa\u5176\u5728\u53ef\u7528\u65f6\u5bf9\u5176\u5e94\u75283D\u6548\u679c\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u82e5\u8bfb\u8005\u4e0d\u662f\u4ece Windows 3.x \u5e74\u4ee3\u8fc7\u6765\u7684\u4eba\uff0c\u53ef\u80fd\u7406\u89e3\u4e0d\u4e86\u4e0b\u6587\u4e2d\u300e\u776b\u6bdb\u818f\u6d82\u574f\u300f\u7684\u6548\u679c\uff0c\u4e0a\u56fe\u4e3a\u8c03\u7528\u4e86CTL3D32.DLL \u7684\u5bf9\u8bdd\u6846\u6837\u4f8b\uff0c\u622a\u56fe\u6765\u81ea malSmith.net<\/a>\uff09<\/p>\n

And if the 3D provided by Windows 95 by default wasn\u2019t enough, you could use CTL3D32.DLL to make your controls even more 3D. By this point, things started getting really ugly. Buttons on dialog boxes had so many heavy black outlines that it started to look like a really bad mascara job.<\/p>\n

\u5982\u679c Windows 95 \u63d0\u4f9b\u7684 3D \u6548\u679c\u8fd8\u4e0d\u591f\u7684\u8bdd\uff0c\u4f60\u8fd8\u53ef\u4ee5\u8c03\u7528 CTL3D32.DLL \u6765\u8ba9\u4f60\u7a0b\u5e8f\u4e2d\u7684\u63a7\u4ef6\u95f2\u5f97\u66f4\u52a0 3D\u3002\u81f3\u6b64\uff0c\u4e00\u5207\u5df2\u7ecf\u5f00\u59cb\u53d8\u5f97\u975e\u5e38\u4e11\u964b\u4e86\u3002\u5bf9\u8bdd\u6846\u4e2d\u7684\u6309\u94ae\u88ab\u6dfb\u52a0\u4e86\u592a\u591a\u7c97\u91cd\u7684\u9ed1\u8272\u8fb9\u7ebf\uff0c\u770b\u4e0a\u53bb\u5c31\u50cf\u628a\u776b\u6bdb\u818f\u6d82\u574f\u4e86\u4e00\u6837\u3002<\/p>\n

Fortunately, like many fashions that get out of hand, people realized that too much 3D is not a good thing. User interfaces got flatter. Instead of using 3D effects and bold outlines to separate items, subtler dividers were used. Divider lines became more subdued and sometimes disappeared entirely.<\/p>\n

\u5e78\u8fd0\u7684\u662f\uff0c\u5c31\u50cf\u90a3\u4e9b\u5931\u63a7\u7684\u65f6\u5c1a\u6f6e\u6d41\u4e00\u6837\uff0c\u4eba\u4eec\u5f00\u59cb\u610f\u8bc6\u5230\u592a\u591a\u7684 3D \u6548\u679c\u5e76\u4e0d\u662f\u4e00\u4ef6\u597d\u4e8b\u3002\u7528\u6237\u754c\u9762\uff08\u7531\u6b64\u53c8\uff09\u53d8\u5f97\u5e73\u9762\u5316\u8d77\u6765\u3002\u629b\u5f03\u4e86\u8fd0\u7528 3D \u6548\u679c\u548c\u7c97\u91cd\u7684\u8fb9\u7ebf\u6765\u5212\u5206\u7a97\u4f53\u7ec4\u4ef6\u7684\u505a\u6cd5\uff0c\u4eba\u4eec\u5f00\u59cb\u6539\u7528\u4e0d\u6613\u5bdf\u89c9\u7684\u5206\u9694\u7ebf\uff0c\u800c\u5206\u9694\u7ebf\u4e5f\u53d8\u5f97\u8d8a\u6765\u8d8a\u67d4\u548c\uff0c\u6709\u65f6\u751a\u81f3\u5b8c\u5168\u6d88\u5931\u4e86\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Microsoft Money \u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea Vector<\/a>\uff09<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Office 2000\u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea Wikipedia<\/a>\uff09<\/p>\n

Microsoft Office and Microsoft Money were two programs that embraced the \u201cless is more\u201d approach. In this screenshot from Microsoft Money<\/a>, observe that the beveling is gone. There are no 3D effects. Buttons are flat and unobtrusive. The task pane separates itself from the content pane by a simple gray line and a change in background shade. Even the toolbar has gone flat. Office 2000 also went largely flat<\/a>, though some 3D effects linger, in the grooves and in the scrollbars (not visible in picture).<\/p>\n

Microsoft Office \u548c Microsoft Money \u662f\u4e24\u5957\u62e5\u62b1\u300e\u7b80\u5355\u5373\u4e3a\u7f8e\u300f\u505a\u6cd5\u7684\u5e94\u7528\u7a0b\u5e8f\u3002\u89c2\u5bdf Microsoft Money \u7684\u622a\u5c4f\uff0c\u4f60\u4f1a\u53d1\u73b0\u659c\u8fb9\u6548\u679c\u4e0d\u89c1\u4e86\uff0c3D \u6548\u679c\u6d88\u5931\u4e86\uff0c\u6309\u94ae\u53d8\u5f97\u5e73\u9762\u5316\u7684\u540c\u65f6\u4e5f\u4e0d\u518d\u90a3\u4e48\u5f20\u626c\u4e86\uff0c\u4efb\u52a1\u9762\u677f\u901a\u8fc7\u5212\u51fa\u4e00\u6761\u7b80\u5355\u7684\u7070\u8272\u76f4\u7ebf\u3001\u5e76\u6539\u53d8\u5176\u80cc\u666f\u9634\u5f71\u7684\u505a\u6cd5\u6765\u5c06\u5176\u4e0e\u5185\u5bb9\u9762\u677f\u5206\u9694\u5f00\u6765\uff0c\u751a\u81f3\u5de5\u5177\u680f\u90fd\u53d8\u300e\u5e73\u300f\u4e86\u3002Office 2000 \u7684\u754c\u9762\u4e5f\u5927\u8303\u56f4\u53d8\u5f97\u5e73\u9762\u5316\u4e86\uff0c\u5c3d\u7ba1\u5728\u4e00\u4e9b\u6c9f\u69fd\u548c\u6eda\u52a8\u6761\u4e0a\u8fd8\u662f\u4fdd\u7559\u4e86\u4e00\u4e9b 3D \u6548\u679c\uff08\u56fe\u4e2d\u672a\u5c55\u73b0\uff09\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Windows 95 \u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea ToastyTech<\/a>\uff09<\/p>\n

Windows XP jumped on the \u201cflat is good\u201d bandwagon<\/a> and even got rid of the separator line between the tasks pane and the contents pane. The division is merely implied by the change in color. \u201cSeparation through juxtaposition.\u201d<\/p>\n

Windows \u8ffd\u968f\u4e86\u300e\u5e73\u9762\u5373\u662f\u7f8e\u300f\u7684\u98ce\u5c1a\uff0c\u751a\u81f3\u5c06\u4efb\u52a1\u9762\u677f\u548c\u5185\u5bb9\u9762\u677f\uff08\u8bd1\u6ce8\uff1a\u5927\u6982\u6307\u7684\u662f\u8d44\u6e90\u7ba1\u7406\u5668\u5de6\u4fa7\u7684\u4fe1\u606f\u680f\u548c\u53f3\u8fb9\u9a71\u52a8\u5668\u5185\u5bb9\uff09\u4e4b\u95f4\u7684\u5206\u9694\u7ebf\u90fd\u7ed9\u53bb\u6389\u4e86\uff0c\u4e8c\u8005\u4e4b\u95f4\u4ec5\u4ec5\u7528\u989c\u8272\u7684\u53d8\u5316\u7a0d\u4f5c\u5206\u9694\uff0c\u5373\u6240\u8c13\u7684\u300e\u4ee5\u53cd\u5dee\u505a\u5206\u9694\u300f\u3002<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Office XP \u7684\u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea Wikipedia<\/a>\uff09<\/p>\n

\"\"<\/p>\n

\uff08\u8bd1\u6ce8\uff1a\u4e0b\u6587\u4e2d\u7684 Outlook 2003 \u7684\u622a\u5c4f\u94fe\u63a5\u5df2\u5931\u6548\uff0c\u4e0a\u56fe\u6765\u81ea POP2IMAP.com<\/a>\uff09<\/p>\n

Office XP<\/a> and Outlook 2003<\/a> continue the trend and flatten nearly everything aside from the scrollbar elements. Blocks of color are used to separate elements onscreen, sometimes with the help of simple outlines.<\/p>\n

Office XP \u548c Outlook 2003 \u5ef6\u7eed\u4e86\u8fd9\u4e00\u8d8b\u52bf\uff0c\u5e76\u5c06\u9664\u4e86\u6eda\u52a8\u6761\u4e4b\u5916\u7684\u51e0\u4e4e\u6240\u6709\u7ec4\u4ef6\u90fd\u6241\u5e73\u5316\u4e86\u3002\u8272\u5757\u88ab\u7528\u6765\u5206\u9694\u5c4f\u5e55\u4e0a\u7684\u5143\u7d20\uff0c\u6709\u65f6\u4e5f\u4f1a\u9644\u52a0\u7b80\u5355\u7684\u8fb9\u7ebf\u3002<\/p>\n

So now the pendulum of fashion has swung away from 3D back towards flatness. Who knows how long this school of visual expression will hold the upper hand. Will 3D return with a vengeance when people tire of the starkness of the flat look?<\/p>\n

\u73b0\u5728\u65f6\u5c1a\u7684\u949f\u6446\u53c8\u4ece 3D \u8361\u56de\u4e86\u5e73\u9762\uff0c\u8c01\u4e5f\u4e0d\u77e5\u9053\u8fd9\u4e00\u98ce\u6f6e\u80fd\u5360\u4e0a\u98ce\u591a\u4e45\u3002\u7b49\u5230\u4eba\u4eec\u538c\u5026\u4e86\u5e73\u9762\u89c2\u611f\u7684\u65f6\u5019\uff0c3D \u4f1a\u4e0d\u4f1a\u6740\u4e2a\u56de\u9a6c\u67aa\u5462\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"

\u539f\u6587\u94fe\u63a5\uff1ahttps:\/\/devblogs.microsoft.com\/oldnewthing\/2004072 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-2944","post","type-post","status-publish","format-standard","hentry","category-tont_history"],"_links":{"self":[{"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/posts\/2944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/comments?post=2944"}],"version-history":[{"count":0,"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/posts\/2944\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/media?parent=2944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/categories?post=2944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aoisnow.net\/blog\/wp-json\/wp\/v2\/tags?post=2944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}