[{"data":1,"prerenderedAt":2277},["ShallowReactive",2],{"post-zh-intent-driven-ui":3,"post-surround-zh-intent-driven-ui":2271},{"id":4,"title":5,"body":6,"date":2258,"description":2259,"extension":2260,"meta":2261,"navigation":2262,"path":2263,"seo":2264,"stem":2265,"tags":2266,"__hash__":2270},"posts_zh\u002Fposts\u002Fintent-driven-ui\u002Fzh.md","【意图驱动UI】关于软件UI（操作页面）的设计探讨",{"type":7,"value":8,"toc":2225},"minimark",[9,13,25,39,54,73,84,99,105,109,112,120,123,126,131,134,137,142,145,148,155,158,160,164,171,174,177,186,198,201,212,215,221,224,231,234,237,258,260,264,267,273,276,279,282,289,297,307,310,313,315,328,330,334,337,340,343,369,372,374,378,384,387,394,404,407,427,430,433,436,441,444,446,466,468,472,475,482,485,511,514,517,522,525,528,535,537,541,547,555,564,567,570,575,578,581,583,597,599,603,609,617,627,630,633,640,642,656,658,662,665,673,682,685,688,710,713,716,723,725,751,753,757,760,763,769,772,797,803,806,809,812,819,822,826,845,849,852,857,864,866,871,874,877,883,886,891,894,899,902,905,919,929,937,946,949,956,958,962,968,971,976,979,982,985,1044,1053,1058,1065,1068,1071,1076,1079,1086,1089,1094,1096,1100,1103,1106,1111,1114,1119,1122,1127,1130,1137,1150,1153,1160,1163,1168,1171,1176,1178,1182,1185,1190,1193,1196,1203,1205,1210,1213,1220,1226,1229,1234,1237,1244,1246,1250,1253,1258,1261,1266,1268,1274,1277,1282,1285,1290,1293,1300,1303,1308,1316,1318,1322,1325,1330,1333,1338,1341,1348,1351,1368,1371,1377,1379,1383,1386,1477,1480,1485,1488,1491,1496,1499,1506,1509,1512,1519,1522,1529,1532,1539,1542,1549,1552,1555,1562,1566,1569,1572,1578,1585,1590,1601,1608,1614,1623,1638,1672,1675,1696,1715,1750,1761,1796,1799,1810,1821,1826,1833,1856,1859,1863,1868,1872,1875,1878,1885,1888,1891,1894,1897,1904,1907,1910,1913,1916,1919,1929,1932,1935,1959,1963,2003,2007,2023,2027,2050,2054,2075,2079,2157,2161],[10,11,12],"h2",{"id":12},"简述",[14,15,16,17,21,22],"p",{},"在现在这个生成式语言大模型（LLM）",[18,19,20],"strong",{},"遍布全世界","的时代，几乎每一个行业，在UI（软件操作页面）设计行业AI（LLM）也",[18,23,24],{},"贡献了很不错的效率！",[14,26,27,28,31,32,35,36],{},"所以在这个情况下大家在做软件的时候",[18,29,30],{},"也开始慢慢变得很注意UI（软件操作页面）是否好看操作起来是否方便","，因为用AI做一个软件似乎",[18,33,34],{},"太快了","，所以就需要",[18,37,38],{},"在创新和美学上下功夫！",[14,40,41,42,45,46,49,50,53],{},"但是因为现代的软件UI（软件操作页面）并不是",[18,43,44],{},"凭空想出来","的而是根据早期工业机器的",[18,47,48],{},"实体按钮软件化","做出来的后面慢慢形成",[18,51,52],{},"一套设计理念和习惯","随着电子设备的普及传向更多人。",[14,55,56,57,60,61,64,65,68,69,72],{},"因为其操作方式很",[18,58,59],{},"过于程序化设计化","，所以软件也许做的",[18,62,63],{},"很方便很好看","但是使用者可能",[18,66,67],{},"并不是","程序员、设计师；也许",[18,70,71],{},"只是","一个普普通通的画家、作家、音乐家、心理学家等。",[14,74,75,76,79,80,83],{},"TA们在使用软件的时候，或许会因为找一个按钮",[18,77,78],{},"找半天而大大影响使用体验","导致慢慢产生了",[18,81,82],{},"抵制","更先进软件的行为。",[14,85,86,87,90,91,94,95,98],{},"所以本篇文章想讨论的是",[18,88,89],{},"面向普通用户群体","的软件应该如何设计，应该怎么",[18,92,93],{},"打破","之前那套持续了将近40年的UI（操作页面）设计理念，做出",[18,96,97],{},"更适合","普通用户的UI（操作页面）。",[100,101,102],"warning",{},[14,103,104],{},"专业软件因为本就需要较程序化的生产方式所以本篇文章提出的所有概念和设计方向等都不适用于专业软件！",[10,106,108],{"id":107},"软件ui操作页面的起源","软件UI（操作页面）的起源",[14,110,111],{},"如果我们想理解今天的软件 UI 为什么会变得越来越复杂，也许首先需要回到一个更基本的问题：",[113,114,115],"blockquote",{},[14,116,117],{},[18,118,119],{},"软件 UI 最初究竟是怎么出现的？",[14,121,122],{},"今天我们习以为常的窗口、图标、菜单、按钮和鼠标，并不是一开始就存在的。它们经历了几十年的计算机发展，才逐渐形成了我们今天熟悉的图形用户界面（GUI）。",[124,125],"hr",{},[127,128,130],"h3",{"id":129},"_1-在-gui-出现之前人通过命令使用计算机","1. 在 GUI 出现之前：人通过命令使用计算机",[14,132,133],{},"早期计算机主要通过穿孔卡片、纸带、控制面板以及后来出现的文本终端与计算机交互。",[14,135,136],{},"在这种模式下，计算机更像是一台需要被“操作”的机器：",[113,138,139],{},[14,140,141],{},"人告诉计算机应该执行什么命令，计算机执行命令并返回结果。",[14,143,144],{},"用户必须理解计算机能够接受什么样的指令。",[14,146,147],{},"这种交互方式对于专业人员来说效率很高，但对于普通人而言，最大的障碍就是：",[113,149,150],{},[14,151,152],{},[18,153,154],{},"你必须先学会计算机的语言。",[14,156,157],{},"因此，早期人机交互研究开始尝试寻找一种更加直接的方式，让人能够通过视觉和动作与计算机中的内容进行交互。",[124,159],{},[127,161,163],{"id":162},"_2-1963-年sketchpad","2. 1963 年：Sketchpad",[14,165,166,167,170],{},"1963 年，Ivan Sutherland 开发了 ",[18,168,169],{},"Sketchpad","。",[14,172,173],{},"它被认为是早期图形用户界面的重要先驱之一。",[14,175,176],{},"Sketchpad 使用光笔作为输入设备，用户可以直接在屏幕上绘制、选择和修改图形对象。",[14,178,179],{},[180,181],"img",{"alt":182,"src":183,"height":184,"width":185},"Ivan Sutherland 使用 Sketchpad","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002Fivan_sutherland1962.jpg",400,480,[113,187,188],{},[14,189,190,191],{},"图片来源：Ivan Sutherland 与 Sketchpad（1962，MIT Lincoln Laboratory），出自 ",[192,193,197],"a",{"href":194,"rel":195},"https:\u002F\u002Fwww.computerhistory.org\u002Frevolution\u002Fcomputer-graphics-music-and-art\u002F15\u002F209\u002F1878",[196],"nofollow","Computer History Museum",[14,199,200],{},"这与传统的命令输入存在明显区别：",[202,203,209],"pre",{"className":204,"code":206,"language":207,"meta":208},[205],"language-text","传统方式：\n\n告诉计算机：\n“画一条线”\n\n↓\n计算机执行\n","text","",[210,211,206],"code",{"__ignoreMap":208},[14,213,214],{},"而 Sketchpad 更接近：",[202,216,219],{"className":217,"code":218,"language":207,"meta":208},[205],"看到屏幕上的对象\n\n↓\n直接操作对象\n",[210,220,218],{"__ignoreMap":208},[14,222,223],{},"这意味着人与计算机之间开始出现了一种新的关系：",[113,225,226],{},[14,227,228],{},[18,229,230],{},"用户不再只是向计算机发送命令，而是可以直接操纵计算机屏幕上的对象。",[14,232,233],{},"Sketchpad 后来的许多思想都成为图形交互发展的重要基础。",[14,235,236],{},"图片资料：",[238,239,240,247,253],"ul",{},[241,242,243],"li",{},[192,244,245],{"href":245,"rel":246},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FCategory:Sketchpad",[196],[241,248,249],{},[192,250,251],{"href":251,"rel":252},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:SketchpadDissertation-Fig4-2.tif",[196],[241,254,255],{},[192,256,194],{"href":194,"rel":257},[196],[124,259],{},[127,261,263],{"id":262},"_3-1968-年鼠标和直接操作","3. 1968 年：鼠标和“直接操作”",[14,265,266],{},"到了 1960 年代，Douglas Engelbart 及其团队在 Stanford Research Institute（SRI）继续研究人与计算机之间更加直接的交互方式。",[14,268,269,270,170],{},"他们开发了 ",[18,271,272],{},"NLS（oN-Line System）",[14,274,275],{},"NLS 使用了鼠标、屏幕上的指针、窗口以及超文本等概念。",[14,277,278],{},"1968 年 12 月 9 日，Engelbart 对这一系统进行了著名的公开演示。",[14,280,281],{},"这场演示后来被称为：",[113,283,284],{},[14,285,286],{},[18,287,288],{},"The Mother of All Demos",[14,290,291],{},[180,292],{"alt":293,"src":294,"height":295,"width":296},"Douglas Engelbart 与 1968 年的 NLS 系统","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002FSRI_Douglas_Engelbart_1968.jpg",823,600,[113,298,299],{},[14,300,301,302],{},"图片来源：",[192,303,306],{"href":304,"rel":305},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:SRI_Douglas_Engelbart_1968.jpg",[196],"Wikimedia Commons — File:SRI Douglas Engelbart 1968.jpg",[14,308,309],{},"在这次演示中，鼠标、超文本、窗口等后来成为现代计算机基础交互方式的技术和思想已经同时出现。",[14,311,312],{},"因此，现代 GUI 并不是某一天突然被发明出来的，而是在这一时期逐渐形成了一系列重要的交互思想。",[14,314,236],{},[238,316,317,322],{},[241,318,319],{},[192,320,304],{"href":304,"rel":321},[196],[241,323,324],{},[192,325,326],{"href":326,"rel":327},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:SRI_Bill_English_1968.jpg",[196],[124,329],{},[127,331,333],{"id":332},"_4-1970-年代xerox-parc","4. 1970 年代：Xerox PARC",[14,335,336],{},"真正将这些思想进一步整合起来的，是 Xerox 的 Palo Alto Research Center（PARC）。",[14,338,339],{},"1970 年，Xerox 建立了 PARC，并开始进行大量计算机研究。",[14,341,342],{},"在这里，研究人员继续探索：",[238,344,345,348,351,354,357,360,363,366],{},[241,346,347],{},"图形显示",[241,349,350],{},"鼠标",[241,352,353],{},"窗口",[241,355,356],{},"图标",[241,358,359],{},"菜单",[241,361,362],{},"位图显示",[241,364,365],{},"所见即所得",[241,367,368],{},"桌面隐喻",[14,370,371],{},"这些技术后来共同构成了现代 GUI 的基础。",[124,373],{},[127,375,377],{"id":376},"_5-1973-年xerox-alto","5. 1973 年：Xerox Alto",[14,379,380,381,170],{},"1973 年，Xerox PARC 开发出了 ",[18,382,383],{},"Xerox Alto",[14,385,386],{},"Alto 是图形用户界面发展历史中非常重要的一台计算机。",[14,388,389],{},[180,390],{"alt":383,"src":391,"height":392,"width":393},"\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002FXerox_Alto.jpg",2560,1920,[113,395,396],{},[14,397,301,398,403],{},[192,399,402],{"href":400,"rel":401},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Xerox_Alto.jpg",[196],"Wikimedia Commons — File:Xerox Alto.jpg","（摄影：Martin Pittenauer，CC BY-SA 2.5）",[14,405,406],{},"它拥有：",[238,408,409,412,414,417,419,422,425],{},[241,410,411],{},"位图显示器",[241,413,350],{},[241,415,416],{},"键盘",[241,418,353],{},[241,420,421],{},"图形界面",[241,423,424],{},"文件和文档的视觉表示",[241,426,368],{},[14,428,429],{},"它甚至已经可以让文件看起来像纸张，让目录看起来像文件夹。",[14,431,432],{},"也就是说，计算机中的信息第一次越来越像现实世界中的物体。",[14,434,435],{},"用户不需要完全理解计算机内部的数据结构，而可以通过：",[113,437,438],{},[14,439,440],{},"文件 → 文件夹 → 桌面 → 窗口",[14,442,443],{},"这样的视觉隐喻理解计算机。",[14,445,236],{},[238,447,448,454,460],{},[241,449,450],{},[192,451,452],{"href":452,"rel":453},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Xerox_Alto_full.jpg",[196],[241,455,456],{},[192,457,458],{"href":458,"rel":459},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Xerox_Alto_I,_1973,_Computer_History_Museum.jpg",[196],[241,461,462],{},[192,463,464],{"href":464,"rel":465},"https:\u002F\u002Fwww.computerhistory.org\u002Frevolution\u002Finput-output\u002F14\u002F347",[196],[124,467],{},[127,469,471],{"id":470},"_6-wimp现代-gui-的基本形态形成","6. WIMP：现代 GUI 的基本形态形成",[14,473,474],{},"在 Xerox PARC 的研究中，后来逐渐形成了一套非常重要的图形交互体系：",[113,476,477],{},[14,478,479],{},[18,480,481],{},"WIMP",[14,483,484],{},"即：",[238,486,487,493,499,505],{},[241,488,489,492],{},[18,490,491],{},"Windows"," —— 窗口",[241,494,495,498],{},[18,496,497],{},"Icons"," —— 图标",[241,500,501,504],{},[18,502,503],{},"Menus"," —— 菜单",[241,506,507,510],{},[18,508,509],{},"Pointer"," —— 指针",[14,512,513],{},"这套模式成为后来几十年桌面软件 UI 的重要基础。",[14,515,516],{},"用户通过鼠标移动指针：",[113,518,519],{},[14,520,521],{},"点击图标 → 打开窗口 → 选择菜单 → 执行操作。",[14,523,524],{},"计算机原本抽象的命令，被转换成了屏幕上可以看到、选择和操作的对象。",[14,526,527],{},"这正是 GUI 最重要的历史意义之一：",[113,529,530],{},[14,531,532],{},[18,533,534],{},"把计算机的操作从“记忆命令”变成了“看见并操作”。",[124,536],{},[127,538,540],{"id":539},"_7-1981-年xerox-star","7. 1981 年：Xerox Star",[14,542,543,544,170],{},"1981 年，Xerox 推出了 ",[18,545,546],{},"Xerox Star",[14,548,549],{},[180,550],{"alt":551,"src":552,"height":553,"width":554},"Xerox Star 8010","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002FDesktop_icons_for_Xerox_Star_8010.jpg",1573,1945,[113,556,557],{},[14,558,301,559],{},[192,560,563],{"href":561,"rel":562},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Desktop_icons_for_Xerox_Star_8010.jpg",[196],"Wikimedia Commons — File:Desktop icons for Xerox Star 8010.jpg",[14,565,566],{},"Star 将 PARC 大量的研究成果进一步变成了商业工作站。",[14,568,569],{},"它进一步强化了：",[113,571,572],{},[14,573,574],{},"桌面、文档、文件夹、图标、窗口、菜单",[14,576,577],{},"这些今天仍然非常熟悉的概念。",[14,579,580],{},"虽然 Star 在商业上并没有取得巨大的成功，但它对之后个人计算机 GUI 的发展产生了非常大的影响。",[14,582,236],{},[238,584,585,591],{},[241,586,587],{},[192,588,589],{"href":589,"rel":590},"https:\u002F\u002Fwww.digibarn.com\u002Fcollections\u002Fscreenshots\u002Fxerox-star-8010\u002F",[196],[241,592,593],{},[192,594,595],{"href":595,"rel":596},"https:\u002F\u002Fwww.digibarn.com\u002Fcollections\u002Fsystems\u002Fxerox-8010\u002Findex.html",[196],[124,598],{},[127,600,602],{"id":601},"_8-1983-年apple-lisa","8. 1983 年：Apple Lisa",[14,604,605,606,170],{},"1983 年，Apple 推出了 ",[18,607,608],{},"Lisa",[14,610,611],{},[180,612],{"alt":613,"src":614,"height":615,"width":616},"Apple Lisa \u002F 1983","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002Fapple-lisa-1983.jpg",432,640,[113,618,619],{},[14,620,301,621,626],{},[192,622,625],{"href":623,"rel":624},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Apple_Computer,_1983_(Lisa).jpg",[196],"Wikimedia Commons — File:Apple Computer, 1983 (Lisa).jpg","（摄影：Alan Light，CC BY 2.0）",[14,628,629],{},"Lisa 将图形用户界面、鼠标和桌面隐喻带到了消费者个人电脑领域。",[14,631,632],{},"它并没有取得商业上的成功，售价也非常昂贵，但它进一步证明了一件事情：",[113,634,635],{},[14,636,637],{},[18,638,639],{},"图形界面可以成为个人计算机的主要交互方式。",[14,641,236],{},[238,643,644,650],{},[241,645,646],{},[192,647,648],{"href":648,"rel":649},"https:\u002F\u002Fwww.computerhistory.org\u002Ftimeline\u002F1983\u002F",[196],[241,651,652],{},[192,653,654],{"href":654,"rel":655},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FCategory:Apple_Lisa",[196],[124,657],{},[127,659,661],{"id":660},"_9-1984-年macintosh","9. 1984 年：Macintosh",[14,663,664],{},"1984 年，Apple 推出了第一代 Macintosh。",[14,666,667],{},[180,668],{"alt":669,"src":670,"height":671,"width":672},"Apple Macintosh 1984","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002Fmacintosh-128k-1984.jpg",2132,2312,[113,674,675],{},[14,676,301,677],{},[192,678,681],{"href":679,"rel":680},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Computer_macintosh_128k,_1984_(all_about_Apple_onlus).jpg",[196],"Wikimedia Commons — File:Computer macintosh 128k, 1984 (all about Apple onlus).jpg",[14,683,684],{},"相比 Lisa，Macintosh 更便宜，也更加面向普通消费者。",[14,686,687],{},"它进一步普及了：",[238,689,690,692,694,696,698,701,704,707],{},[241,691,350],{},[241,693,353],{},[241,695,359],{},[241,697,356],{},[241,699,700],{},"桌面",[241,702,703],{},"文件夹",[241,705,706],{},"回收站",[241,708,709],{},"拖放",[14,711,712],{},"这些概念。",[14,714,715],{},"对于很多普通用户来说，计算机第一次真正变成了：",[113,717,718],{},[14,719,720],{},[18,721,722],{},"可以通过视觉理解和操作的东西。",[14,724,236],{},[238,726,727,733,745],{},[241,728,729],{},[192,730,731],{"href":731,"rel":732},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Ordinateur_Apple_Macintosh_1984.jpg",[196],[241,734,735],{},[192,736,739,740,744],{"href":737,"rel":738},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Computer_macintosh_128k,_1984_%28all_about_Apple_onlus%29.jpg",[196],"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Computer_macintosh_128k,",[741,742,743],"em",{},"1984","(all_about_Apple_onlus).jpg",[241,746,747],{},[192,748,749],{"href":749,"rel":750},"https:\u002F\u002Fcomputerhistory.org\u002Fblog\u002Fmacpaint-and-quickdraw-source-code\u002F",[196],[124,752],{},[127,754,756],{"id":755},"_10-从此gui-成为了软件的基础","10. 从此，GUI 成为了软件的基础",[14,758,759],{},"到了 1980 年代后期，图形用户界面逐渐成为个人计算机软件的主流交互方式。",[14,761,762],{},"此后几十年，软件基本都在这个框架上不断发展：",[202,764,767],{"className":765,"code":766,"language":207,"meta":208},[205],"窗口\n│\n├── 菜单\n├── 工具栏\n├── 按钮\n├── 图标\n├── 对话框\n└── 设置\n",[210,768,766],{"__ignoreMap":208},[14,770,771],{},"软件拥有越来越多的能力，于是 GUI 也不断增加新的：",[238,773,774,777,780,782,785,788,791,794],{},[241,775,776],{},"页面",[241,778,779],{},"按钮",[241,781,359],{},[241,783,784],{},"工具栏",[241,786,787],{},"弹窗",[241,789,790],{},"设置项",[241,792,793],{},"层级",[241,795,796],{},"参数",[14,798,799,800,170],{},"而我们今天熟悉的大多数软件 UI，实际上都可以追溯到这套在 ",[18,801,802],{},"1960—1980 年代逐渐形成的图形交互体系",[14,804,805],{},"从 Sketchpad 到 Engelbart 的 NLS，再到 Xerox PARC、Alto、Star、Lisa 和 Macintosh，现代软件 UI 并不是一次设计出来的。",[14,807,808],{},"它是几十年人机交互研究不断叠加的结果。",[14,810,811],{},"而今天我们所熟悉的：",[113,813,814],{},[14,815,816],{},[18,817,818],{},"窗口、图标、菜单、按钮、设置页面",[14,820,821],{},"正是这段历史最终留下来的交互语言。",[10,823,825],{"id":824},"探讨新式ui设计理念","探讨新式UI设计理念",[14,827,828,829,832,833,836,837,840,841,844],{},"在上一章节我们了解到了软件“复杂”UI的",[18,830,831],{},"由来","，现在软件已经随着电子设备的普及走进了无数人家中，但是我们在简述也提到复杂的UI可能对于普通的用户来说",[18,834,835],{},"太烦琐太复杂","，所以就来到了本篇文章的",[18,838,839],{},"重点","，如何设计出一个",[18,842,843],{},"既不缺少功能又能让普通用户快速上手并且方便高效率","的使用的UI呢？",[127,846,848],{"id":847},"在新式-ui-之前人们一直在尝试如何降低软件的学习成本","在新式 UI 之前，人们一直在尝试如何降低软件的学习成本",[14,850,851],{},"如果回顾过去几十年的 UI 发展，会发现一个很有意思的现象：",[14,853,854],{},[18,855,856],{},"人们其实一直在尝试让软件变得更加容易使用。",[14,858,859,860,863],{},"只是过去的解决方案，大多是在想办法",[18,861,862],{},"隐藏软件内部的复杂性","，让用户不需要理解计算机本身是如何工作的。",[124,865],{},[867,868,870],"h4",{"id":869},"_1-从输入命令到直接操作","1. 从“输入命令”到“直接操作”",[14,872,873],{},"早期计算机最主要的问题，是用户必须理解计算机的“语言”。",[14,875,876],{},"如果想完成一个操作，用户需要知道应该输入什么命令、命令的参数是什么，以及这些命令应该如何组合。",[14,878,879,880,170],{},"这种交互方式非常强大，但要求用户",[18,881,882],{},"记忆软件的规则",[14,884,885],{},"后来，人机交互领域逐渐出现了一个非常重要的思想：",[14,887,888],{},[18,889,890],{},"Direct Manipulation（直接操作）",[14,892,893],{},"它不再要求用户告诉计算机：",[113,895,896],{},[14,897,898],{},"“执行某个命令。”",[14,900,901],{},"而是让用户直接操作屏幕上的对象。",[14,903,904],{},"例如：",[238,906,907,910,913,916],{},[241,908,909],{},"想移动文件 → 直接拖动文件",[241,911,912],{},"想调整窗口大小 → 直接拖动窗口边缘",[241,914,915],{},"想删除文件 → 把文件拖到垃圾桶",[241,917,918],{},"想编辑文字 → 直接点击文字并修改",[14,920,921,922,928],{},"1963 年，Ivan Sutherland 的 Sketchpad 已经展示了通过光笔直接抓取、移动和调整图形对象的方式；到了 1970 年代，Xerox PARC 又进一步发展了这些思想。1982 年，Ben Shneiderman 正式提出了“Direct Manipulation”这一术语。(",[192,923,927],{"href":924,"rel":925,"title":926},"https:\u002F\u002Fwww.cs.cmu.edu\u002F~amulet\u002Fpapers\u002Fuihistory.tr.html",[196],"A Brief History of Human Computer Interaction Technology","CMU School of Computer Science",")",[14,930,931],{},[180,932],{"alt":933,"src":934,"height":935,"width":936},"Xerox Star 8010 ViewPoint","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002FXerox_Star_8010_ViewPoint.jpg",1032,1286,[113,938,939],{},[14,940,301,941],{},[192,942,945],{"href":943,"rel":944},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Xerox_Star_8010_ViewPoint.jpg",[196],"Wikimedia Commons — File:Xerox Star 8010 ViewPoint.jpg",[14,947,948],{},"这其实完成了一次非常重要的变化：",[113,950,951],{},[14,952,953],{},[18,954,955],{},"从“告诉计算机做什么”，变成“直接去做”。",[124,957],{},[127,959,961],{"id":960},"_2-用现实世界的隐喻降低理解成本","2. 用现实世界的隐喻降低理解成本",[14,963,964,965,170],{},"另一个非常重要的方法，是",[18,966,967],{},"把计算机里的抽象概念转换成现实世界中人们已经熟悉的东西",[14,969,970],{},"最典型的例子就是：",[14,972,973],{},[18,974,975],{},"Desktop Metaphor（桌面隐喻）",[14,977,978],{},"计算机里本来不存在“桌面”“文件夹”“垃圾桶”这些东西。",[14,980,981],{},"但设计者发现，如果把计算机中的对象映射成现实世界中的物品，普通用户就不需要重新学习一套完全陌生的概念。",[14,983,984],{},"于是：",[986,987,988,1001],"table",{},[989,990,991],"thead",{},[992,993,994,998],"tr",{},[995,996,997],"th",{},"计算机",[995,999,1000],{},"现实世界",[1002,1003,1004,1013,1020,1028,1036],"tbody",{},[992,1005,1006,1010],{},[1007,1008,1009],"td",{},"Desktop",[1007,1011,1012],{},"办公桌",[992,1014,1015,1018],{},[1007,1016,1017],{},"Folder",[1007,1019,703],{},[992,1021,1022,1025],{},[1007,1023,1024],{},"File",[1007,1026,1027],{},"文件",[992,1029,1030,1033],{},[1007,1031,1032],{},"Trash",[1007,1034,1035],{},"垃圾桶",[992,1037,1038,1041],{},[1007,1039,1040],{},"Document",[1007,1042,1043],{},"纸质文档",[14,1045,1046,1047,928],{},"Xerox PARC 在 1970 年代逐渐发展了这种设计，Xerox Alto 是早期重要实现，而 1981 年推出的 Xerox Star 则将这种思想用于商业产品。(",[192,1048,1052],{"href":1049,"rel":1050,"title":1051},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDesktop_metaphor",[196],"Desktop metaphor","Wikipedia",[14,1054,1055],{},[180,1056],{"alt":1057,"src":552,"height":553,"width":554},"Xerox Star Desktop",[113,1059,1060],{},[14,1061,301,1062],{},[192,1063,563],{"href":561,"rel":1064},[196],[14,1066,1067],{},"这种方法非常聪明。",[14,1069,1070],{},"因为用户不需要学习：",[113,1072,1073],{},[14,1074,1075],{},"“文件系统中存在一个层级结构，你需要通过路径访问对象。”",[14,1077,1078],{},"用户只需要理解：",[113,1080,1081],{},[14,1082,1083],{},[18,1084,1085],{},"“这是我的桌面，这是我的文件夹，我把文件放进去。”",[14,1087,1088],{},"软件的内部结构没有消失。",[14,1090,1091],{},[18,1092,1093],{},"只是被藏起来了。",[124,1095],{},[127,1097,1099],{"id":1098},"_3-从打开程序变成打开东西","3. 从“打开程序”变成“打开东西”",[14,1101,1102],{},"这也是 Xerox Star 非常重要的一项设计。",[14,1104,1105],{},"传统计算机的逻辑通常是：",[113,1107,1108],{},[14,1109,1110],{},"找到程序 → 打开程序 → 再打开文件",[14,1112,1113],{},"而 Star 尝试把它反过来：",[113,1115,1116],{},[14,1117,1118],{},"找到文件 → 打开文件 → 系统自动选择合适的程序",[14,1120,1121],{},"用户不需要知道：",[113,1123,1124],{},[14,1125,1126],{},"“这个文件究竟由哪个程序处理？”",[14,1128,1129],{},"只需要：",[113,1131,1132],{},[14,1133,1134],{},[18,1135,1136],{},"“我想打开这个文档。”",[14,1138,1139,1140,1143,1144,928],{},"Xerox Star 的设计明确强调用户应该处理 ",[18,1141,1142],{},"documents，而不是 programs","。打开文档后，系统会自动调用对应的应用程序。(",[192,1145,1149],{"href":1146,"rel":1147,"title":1148},"https:\u002F\u002Fwww.sciencedirect.com\u002Fbook\u002Fmonograph\u002F9780124058651\u002Fhuman-computer-interaction",[196],"Human-Computer Interaction | ScienceDirect","ScienceDirect",[14,1151,1152],{},"这实际上又隐藏了一层软件结构：",[113,1154,1155],{},[14,1156,1157],{},[18,1158,1159],{},"把“软件”藏在“任务”之后。",[14,1161,1162],{},"用户想做的是：",[14,1164,1165],{},[18,1166,1167],{},"写一篇文章。",[14,1169,1170],{},"而不是：",[14,1172,1173],{},[18,1174,1175],{},"调用一个文字处理程序。",[124,1177],{},[127,1179,1181],{"id":1180},"_4-wysiwyg让用户看到的就是结果","4. WYSIWYG：让用户看到的就是结果",[14,1183,1184],{},"另一个重要的尝试是：",[14,1186,1187],{},[18,1188,1189],{},"WYSIWYG（What You See Is What You Get）",[14,1191,1192],{},"在早期计算机中，用户经常需要通过命令、参数或者特殊格式描述最终结果。",[14,1194,1195],{},"WYSIWYG 则试图让：",[113,1197,1198],{},[14,1199,1200],{},[18,1201,1202],{},"编辑时看到的内容 ≈ 最终得到的内容",[14,1204,904],{},[113,1206,1207],{},[14,1208,1209],{},"屏幕上看到的文字是什么样，最终打印出来就是什么样。",[14,1211,1212],{},"这样用户就不需要理解计算机内部如何描述页面，只需要：",[113,1214,1215],{},[14,1216,1217],{},[18,1218,1219],{},"看到什么，就修改什么。",[14,1221,1222,1223,928],{},"Xerox PARC 的 Bravo 等系统推动了 WYSIWYG 编辑方式的发展，之后 Xerox Star、Apple Lisa 和 Macintosh 等商业系统进一步将这种思想普及。(",[192,1224,927],{"href":924,"rel":1225,"title":926},[196],[14,1227,1228],{},"因此，GUI 的发展并不只是：",[113,1230,1231],{},[14,1232,1233],{},"“把黑色命令行变成漂亮的窗口。”",[14,1235,1236],{},"而是在不断尝试：",[113,1238,1239],{},[14,1240,1241],{},[18,1242,1243],{},"把计算机内部的抽象规则，转换成人类可以直接观察和操作的对象。",[124,1245],{},[127,1247,1249],{"id":1248},"_5-从记忆变成识别","5. 从“记忆”变成“识别”",[14,1251,1252],{},"命令行最大的学习成本之一，就是：",[14,1254,1255],{},[18,1256,1257],{},"你必须记住命令。",[14,1259,1260],{},"GUI 则逐渐把这种模式变成：",[14,1262,1263],{},[18,1264,1265],{},"你不需要记住，只需要看到。",[14,1267,904],{},[202,1269,1272],{"className":1270,"code":1271,"language":207,"meta":208},[205],"rm file.txt\n",[210,1273,1271],{"__ignoreMap":208},[14,1275,1276],{},"变成：",[113,1278,1279],{},[14,1280,1281],{},"看到文件 → 点击文件 → 点击删除",[14,1283,1284],{},"再进一步：",[113,1286,1287],{},[14,1288,1289],{},"看到文件 → 拖进垃圾桶",[14,1291,1292],{},"这就是一个非常重要的变化：",[113,1294,1295],{},[14,1296,1297],{},[18,1298,1299],{},"从 Recall（回忆）转向 Recognition（识别）。",[14,1301,1302],{},"用户不需要记住删除文件的命令是什么，只需要看到一个垃圾桶，就能够理解：",[113,1304,1305],{},[14,1306,1307],{},"“把东西拖进去应该就是删除。”",[14,1309,1310,1311,928],{},"WIMP（Windows、Icons、Menus、Pointer）也逐渐成为现代桌面 GUI 的基础，并通过 Xerox Star、Apple Lisa 和 Macintosh 等产品进入大众计算机。(",[192,1312,1052],{"href":1313,"rel":1314,"title":1315},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHistory_of_the_graphical_user_interface",[196],"History of the graphical user interface",[124,1317],{},[127,1319,1321],{"id":1320},"_6-从鼠标到触摸","6. 从鼠标到触摸",[14,1323,1324],{},"后来，计算设备又发生了一次变化：",[14,1326,1327],{},[18,1328,1329],{},"触摸屏。",[14,1331,1332],{},"鼠标实际上已经缩短了人与计算机之间的距离：",[113,1334,1335],{},[14,1336,1337],{},"手 → 鼠标 → 光标 → 屏幕对象",[14,1339,1340],{},"而触摸屏进一步变成：",[113,1342,1343],{},[14,1344,1345],{},[18,1346,1347],{},"手 → 屏幕对象",[14,1349,1350],{},"用户可以直接：",[238,1352,1353,1356,1359,1362,1365],{},[241,1354,1355],{},"点击",[241,1357,1358],{},"滑动",[241,1360,1361],{},"拖动",[241,1363,1364],{},"缩放",[241,1366,1367],{},"长按",[14,1369,1370],{},"这进一步强化了“直接操作”的思想。",[14,1372,1373,1374,170],{},"触摸屏并没有改变软件本身的复杂程度，但进一步降低了",[18,1375,1376],{},"操作方式本身的学习成本",[124,1378],{},[127,1380,1382],{"id":1381},"_7-但这些方法仍然没有解决一个根本问题","7. 但这些方法仍然没有解决一个根本问题",[14,1384,1385],{},"把过去几十年的 UI 简化方法放在一起，会发现一个非常明显的规律：",[986,1387,1388,1401],{},[989,1389,1390],{},[992,1391,1392,1395,1398],{},[995,1393,1394],{},"时代",[995,1396,1397],{},"方法",[995,1399,1400],{},"主要降低的成本",[1002,1402,1403,1414,1425,1435,1445,1456,1466],{},[992,1404,1405,1408,1411],{},[1007,1406,1407],{},"命令行",[1007,1409,1410],{},"命令",[1007,1412,1413],{},"直接控制计算机",[992,1415,1416,1419,1422],{},[1007,1417,1418],{},"GUI",[1007,1420,1421],{},"窗口、菜单、按钮",[1007,1423,1424],{},"不需要记忆命令",[992,1426,1427,1429,1432],{},[1007,1428,356],{},[1007,1430,1431],{},"视觉隐喻",[1007,1433,1434],{},"不需要理解抽象概念",[992,1436,1437,1439,1442],{},[1007,1438,368],{},[1007,1440,1441],{},"文件夹、桌面、垃圾桶",[1007,1443,1444],{},"借用现实世界经验",[992,1446,1447,1450,1453],{},[1007,1448,1449],{},"直接操作",[1007,1451,1452],{},"拖拽、点击",[1007,1454,1455],{},"不需要描述操作过程",[992,1457,1458,1461,1463],{},[1007,1459,1460],{},"WYSIWYG",[1007,1462,365],{},[1007,1464,1465],{},"不需要理解内部格式",[992,1467,1468,1471,1474],{},[1007,1469,1470],{},"触摸屏",[1007,1472,1473],{},"点击、滑动、手势",[1007,1475,1476],{},"减少鼠标与光标的抽象",[14,1478,1479],{},"可以发现：",[14,1481,1482],{},[18,1483,1484],{},"每一次 UI 的进步，本质上都在隐藏一部分软件内部结构。",[14,1486,1487],{},"但是软件本身也在不断变得复杂。",[14,1489,1490],{},"于是几十年之后，我们又遇到了新的问题：",[113,1492,1493],{},[14,1494,1495],{},"设置\n↓\n通用\n↓\n外观\n↓\n主题\n↓\n深色模式",[14,1497,1498],{},"用户明明只想：",[113,1500,1501],{},[14,1502,1503],{},[18,1504,1505],{},"“换成深色。”",[14,1507,1508],{},"却必须理解软件内部的层级结构。",[14,1510,1511],{},"于是问题开始发生变化：",[113,1513,1514],{},[14,1515,1516],{},[18,1517,1518],{},"过去我们一直在想办法让用户更容易操作软件暴露出来的功能。",[14,1520,1521],{},"而现在真正值得思考的是：",[113,1523,1524],{},[14,1525,1526],{},[18,1527,1528],{},"用户为什么还需要寻找功能？",[14,1530,1531],{},"如果用户只需要告诉软件：",[113,1533,1534],{},[14,1535,1536],{},[18,1537,1538],{},"“我想做什么。”",[14,1540,1541],{},"而软件自己去决定：",[113,1543,1544],{},[14,1545,1546],{},[18,1547,1548],{},"“应该调用什么功能。”",[14,1550,1551],{},"那么 UI 的下一步，或许就不再是继续优化菜单、按钮和设置页面。",[14,1553,1554],{},"而是：",[113,1556,1557],{},[14,1558,1559],{},[18,1560,1561],{},"从“操作界面”走向“表达意图”。",[127,1563,1565],{"id":1564},"意图式ui","意图式UI",[14,1567,1568],{},"在这个情况下我就开始思考到底是怎样的UI才更适合普通用户？",[14,1570,1571],{},"其实已经有很多的UI已经是广义上的意图式UI，但是又做的没那么好。",[14,1573,1574,1575,170],{},"那么现在我们来举一个例子，比如说",[18,1576,1577],{},"深浅色切换",[14,1579,1580,1581,1584],{},"在",[18,1582,1583],{},"传统","的软件设计中深浅色切换可能需要你：",[113,1586,1587],{},[14,1588,1589],{},"设置 -> 通用 -> 外观 -> 深浅色切换",[14,1591,1592,1593,1596,1597,1600],{},"甚至更加",[18,1594,1595],{},"复杂","，如同",[18,1598,1599],{},"迷宫","一般的设置项让人头疼！",[14,1602,1603,1604,1607],{},"所以在现在的很多网站或者软件中，UI的设计师通常把深浅色的切换按钮直接放在用户",[18,1605,1606],{},"第一眼就可以看见","的地方：",[14,1609,1610],{},[180,1611],{"alt":1612,"src":1613},"vitepress深浅色切换按钮","\u002Fpost-media\u002Fintent-driven-ui\u002Fimages\u002Fvitepress.gif",[113,1615,1616],{},[14,1617,301,1618],{},[192,1619,1622],{"href":1620,"rel":1621},"https:\u002F\u002Fspindeck.dgct.cc",[196],"SpinDeck官网文档",[14,1624,1625,1626,1629,1630,1633,1634,1637],{},"这是现在",[18,1627,1628],{},"已经做到","的部分。但是如果我再多一个需求呢，比如我需要他在晚上几点开始是",[18,1631,1632],{},"深色","的，又在第二天早上几点变回",[18,1635,1636],{},"浅色","呢？",[14,1639,1640,1641,1644,1645,1648,1649,1652,1653,1656,1657,1660,1661,1664,1665,1668,1669,170],{},"在这个情况下我看过的绝大多数软件其实都是",[18,1642,1643],{},"引导","你去设置（使用",[18,1646,1647],{},"跳转","或者是其他方式），这里确实比起让用户自己去找设置项有了",[18,1650,1651],{},"很大的进步","，但是也忽略了一个",[18,1654,1655],{},"问题","，用户在进入到该设置项的时候看到",[18,1658,1659],{},"天花乱坠","的设置项",[18,1662,1663],{},"扎堆","其实也是会产生感到其",[18,1666,1667],{},"很复杂不好用","的感受，如果设置项的显示命名用了较专业的描述的话就会显得",[18,1670,1671],{},"更加复杂",[14,1673,1674],{},"所以也许意图式UI的本质是意图，比如说：",[113,1676,1677],{},[14,1678,1679,1680,1683,1684,1687,1688,1691,1692,1695],{},"用户：我想去把我的软件界面",[18,1681,1682],{},"切换","成深色的，同时我又想在切换完之后",[18,1685,1686],{},"设置","它从",[18,1689,1690],{},"今晚6点开始","是深色的，明天",[18,1693,1694],{},"早上7点我起床之后","它是浅色的。",[14,1697,1698,1699,1702,1703,1706,1707,1710,1711,1714],{},"其实在阅读了上述的语句后我们其实可以发现用户的需求是",[18,1700,1701],{},"自然语言","，那么就有很多人说我们",[18,1704,1705],{},"引入","LLM（大语言模型，AI）等",[18,1708,1709],{},"直接帮用户做了","不是就",[18,1712,1713],{},"完美","了吗？",[14,1716,1717,1718,1721,1722,1725,1726,1729,1730,1733,1734,1737,1738,1741,1742,1745,1746,1749],{},"但是我们都会在这里",[18,1719,1720],{},"忽略","一个很重要的",[18,1723,1724],{},"成本问题","，如果使用LLM，就代表了用户需要先",[18,1727,1728],{},"组织好结构化","的语言",[18,1731,1732],{},"打句子输入","，然后在此之前可能还要",[18,1735,1736],{},"配置","好提供商的地址和许可Key（密钥），最后还需要",[18,1739,1740],{},"消耗","Token（词元），也许还可能因为LLM",[18,1743,1744],{},"对需求的理解","问题而复杂化，同时LLM的",[18,1747,1748],{},"推理","也需要时间。",[14,1751,1752,1753,1756,1757,1760],{},"所以如果按以上的方法用户",[18,1754,1755],{},"只是需要","设置一个定时切换的效果，使用LLM的话所消耗的成本可能本身就",[18,1758,1759],{},"远远高出","的用户学习如何设置的成本。",[14,1762,1763,1764,1767,1768,1771,1772,1775,1776,1779,1780,1783,1784,1787,1788,1791,1792,1795],{},"所以，",[18,1765,1766],{},"真正","能方便用户使用的UI，",[18,1769,1770],{},"并不代表","是用户说",[18,1773,1774],{},"一句话就能搞定","或者说是",[18,1777,1778],{},"完全抛弃","原本传统UI的设计理念和框架。因为用户",[18,1781,1782],{},"本身就熟悉","传统UI的",[18,1785,1786],{},"最表层","的操作方式，所以我们也许只需要",[18,1789,1790],{},"在自然语言和传统UI之间做一个结合","也许就是",[18,1793,1794],{},"最好","的发展方向。",[14,1797,1798],{},"在一开始用户其实就已经表明了TA想要去做什么，所以在TA的句子中已经出现了具有明显顺序意图特征的表述，例如：",[238,1800,1801,1804,1807],{},[241,1802,1803],{},"切换成深色的",[241,1805,1806],{},"再去设置自动切换的时间",[241,1808,1809],{},"设置时间",[14,1811,1812,1813,1816,1817,1820],{},"所以各位在这里其实已经可以",[18,1814,1815],{},"很清晰","的看到用户想要做的事情是",[18,1818,1819],{},"按线性顺序","来操作的，所以其实很简单，只需要让用户：",[113,1822,1823],{},[14,1824,1825],{},"做完这个做这个",[14,1827,1828,1829,1832],{},"也就是说本来需要到处“奔波”才能搞定的事情我可以在切换的",[18,1830,1831],{},"同时","也直接做了！",[14,1834,1835,1836,1839,1840,1843,1844,1847,1848,1851,1852,1855],{},"我们可以",[18,1837,1838],{},"直接","把设置定时切换",[18,1841,1842],{},"做成一个很小的按钮","就",[18,1845,1846],{},"放在切换按钮的旁边","，用户只需要切换的时候点击切换按钮即可，需要设置",[18,1849,1850],{},"特定时间","的时候点击旁边的定时按钮，在出现的",[18,1853,1854],{},"弹窗内","直接设置保存就好了！",[14,1857,1858],{},"如以下示例：",[1860,1861],"video-embed",{"src":1862},"\u002Fpost-media\u002Fintent-driven-ui\u002Fvideos\u002Fexample_video.mp4",[113,1864,1865],{},[14,1866,1867],{},"意图式UI设计概念示例",[10,1869,1871],{"id":1870},"总结感慨","总结（感慨）",[14,1873,1874],{},"在过去的很长一段时间里面，人们为了让软件解决更多的问题从而不断的将更多的功能塞入软件，也许不一定只有“复杂”的软件才可以做复杂的事情，所以在最近几年也有很多的团队在这方面下了很大的功夫。",[14,1876,1877],{},"回顾整篇文章，从 1963 年 Sketchpad 的光笔，到 Engelbart 的鼠标和 NLS，再到 Xerox PARC 的 WIMP、桌面隐喻和 WYSIWYG，我们其实可以看到一条贯穿了几十年的主线：",[113,1879,1880],{},[14,1881,1882],{},[18,1883,1884],{},"UI 的每一次进步，本质上都是在把软件内部的一部分复杂性藏起来，让用户离“想做的事”更近一步。",[14,1886,1887],{},"命令行要求用户先学会计算机的语言，GUI 让用户“看见并操作”，桌面隐喻让用户借用现实世界的经验，直接操作省去了描述过程的麻烦，触摸屏则让手指直接碰到了对象。这些变革从来都不是把功能变得更少，而是把学习成本变得更低。软件的内部结构一直都在，只是被一层一层地藏了起来。",[14,1889,1890],{},"而到了今天，软件的功能已经膨胀到了一个新的量级，过去那套“层层设置项”的组织方式开始显现出它的疲态。用户想做的从来不是“找到某个设置项”，而是“完成某件事”。就像文章开头说的，使用者可能只是一个普普通通的画家、作家、音乐家，TA们不应该为了换个深色模式而在设置的迷宫里“奔波”。",[14,1892,1893],{},"意图式 UI 的思路，并不是要彻底推翻这几十年来积累下来的设计遗产，也不是让用户对着 AI 说一句话就解决一切——因为 LLM 有着组织语言、配置密钥、消耗 Token 和等待推理这些实打实的成本，为一个简单的定时切换付出这些显然是不划算的。",[14,1895,1896],{},"真正的方向，也许是在自然语言和传统 UI 之间找到那个恰到好处的结合点：",[113,1898,1899],{},[14,1900,1901],{},[18,1902,1903],{},"让软件在用户表达意图的那一刻，就把下一步需要的功能送到手边。",[14,1905,1906],{},"就像文章中那个小小的定时按钮——它不需要用户翻越设置页面的迷宫，也不需要用户组织一段完整的自然语言，它只是安静地待在用户本来就要点击的地方，等待被需要的那个瞬间。",[14,1908,1909],{},"也许我们要始终记得把更多的功能塞入软件的同时也是把更多的方便塞入软件。",[14,1911,1912],{},"就像当年我们天天都要跑去办事厅才能办的业务今天我们打开手机我们就可以完成。",[14,1914,1915],{},"好的软件，不该让用户去适应它，而是它主动走向用户。",[10,1917,1918],{"id":1918},"参考资料",[1920,1921,1922],"tip",{},[14,1923,1924,1925,1928],{},"以下参考资料中，Wikipedia 与 Wikimedia Commons 的内容以 ",[18,1926,1927],{},"CC-BY-SA-4.0"," 协议授权本网站调取，其余资料仅作为观点与史实的引用来源。",[127,1930,1931],{"id":1931},"历史资料板块",[867,1933,169],{"id":1934},"sketchpad",[238,1936,1937,1945,1952],{},[241,1938,1939,1940],{},"Computer History Museum — ",[192,1941,1944],{"href":1942,"rel":1943},"https:\u002F\u002Fwww.computerhistory.org\u002Ftdih\u002FJanuary\u002F7\u002F",[196],"Ivan Sutherland Introduces the Sketchpad",[241,1946,1939,1947],{},[192,1948,1951],{"href":1949,"rel":1950},"https:\u002F\u002Fcomputerhistory.org\u002Fblog\u002Fthe-remarkable-ivan-sutherland\u002F",[196],"The Remarkable Ivan Sutherland",[241,1953,1939,1954],{},[192,1955,1958],{"href":1956,"rel":1957},"https:\u002F\u002Fwww.computerhistory.org\u002Ftimeline\u002F1963\u002F",[196],"1963 Computer History Timeline",[867,1960,1962],{"id":1961},"douglas-engelbart-nls","Douglas Engelbart \u002F NLS",[238,1964,1965,1973,1980,1988,1996],{},[241,1966,1967,1968],{},"SRI International — ",[192,1969,1972],{"href":1970,"rel":1971},"https:\u002F\u002Fwww.sri.com\u002Fhoi\u002Fcomputer-mouse-and-interactive-computing\u002F",[196],"The computer mouse and interactive computing",[241,1974,1967,1975],{},[192,1976,1979],{"href":1977,"rel":1978},"https:\u002F\u002Fwww.sri.com\u002Fpress\u002Fblog-archive\u002F1968-mother-of-all-demos-forecasted-much-of-the-technology-we-use-every-day\u002F",[196],"1968 “Mother of All Demos”",[241,1981,1982,1983],{},"DARPA — ",[192,1984,1987],{"href":1985,"rel":1986},"https:\u002F\u002Fwww.darpa.mil\u002Fabout\u002Finnovation-timeline\u002Fmother-of-all-demos",[196],"Mother of All Demos",[241,1989,1990,1991],{},"Doug Engelbart Institute — ",[192,1992,1995],{"href":1993,"rel":1994},"https:\u002F\u002Fdougengelbart.org\u002Fcontent\u002Fview\u002F276\u002F",[196],"Highlights of the 1968 “Mother of All Demos”",[241,1997,1990,1998],{},[192,1999,2002],{"href":2000,"rel":2001},"https:\u002F\u002Fdougengelbart.org\u002Fcontent\u002Fview\u002F374\u002F",[196],"The 1968 Demo — Interactive",[867,2004,2006],{"id":2005},"xerox-alto-xerox-parc","Xerox Alto \u002F Xerox PARC",[238,2008,2009,2016],{},[241,2010,1939,2011],{},[192,2012,2015],{"href":2013,"rel":2014},"https:\u002F\u002Fcomputerhistory.org\u002Fpress-releases\u002Fxerox-alto\u002F",[196],"Xerox Alto Source Code",[241,2017,1939,2018],{},[192,2019,2022],{"href":2020,"rel":2021},"https:\u002F\u002Fwww.computerhistory.org\u002Ftimeline\u002Fcomputers\u002F",[196],"Computers Timeline",[867,2024,2026],{"id":2025},"apple-lisa","Apple Lisa",[238,2028,2029,2035,2042],{},[241,2030,1939,2031],{},[192,2032,2034],{"href":648,"rel":2033},[196],"Apple Lisa — 1983",[241,2036,1939,2037],{},[192,2038,2041],{"href":2039,"rel":2040},"https:\u002F\u002Fcomputerhistory.org\u002Fapple-timeline\u002F",[196],"Apple Timeline",[241,2043,2044,2045],{},"Science Museum Group — ",[192,2046,2049],{"href":2047,"rel":2048},"https:\u002F\u002Fcollection.sciencemuseumgroup.org.uk\u002Fobjects\u002Fco64008\u002Fapple-lisa-personal-computer-system-1983",[196],"Apple Lisa personal computer system, 1983",[867,2051,2053],{"id":2052},"macintosh","Macintosh",[238,2055,2056,2063,2070],{},[241,2057,1939,2058],{},[192,2059,2062],{"href":2060,"rel":2061},"https:\u002F\u002Fwww.computerhistory.org\u002Ftimeline\u002F1984\u002F",[196],"1984 Computer History Timeline",[241,2064,1939,2065],{},[192,2066,2069],{"href":2067,"rel":2068},"https:\u002F\u002Fwww.computerhistory.org\u002Ftdih\u002FJanuary\u002F22\u002F",[196],"Apple Macintosh Launch",[241,2071,1939,2072],{},[192,2073,2041],{"href":2039,"rel":2074},[196],[127,2076,2078],{"id":2077},"ui简化的发展板块","UI简化的发展板块",[238,2080,2081,2088,2097,2103,2110,2118,2125,2133,2139],{},[241,2082,2083,2084,2087],{},"CMU School of Computer Science — ",[192,2085,926],{"href":924,"rel":2086},[196],"（Direct Manipulation、WYSIWYG 等术语的历史梳理）",[241,2089,2090,2091,2096],{},"Wikipedia — ",[192,2092,2095],{"href":2093,"rel":2094},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDirect_manipulation_interface",[196],"Direct manipulation interface","（直接操作理念的定义与发展）",[241,2098,2090,2099,2102],{},[192,2100,1051],{"href":1049,"rel":2101},[196],"（桌面隐喻的发展）",[241,2104,2090,2105,2109],{},[192,2106,546],{"href":2107,"rel":2108},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FXerox_Star",[196],"（“以文档为中心”、把软件藏在任务之后的设计）",[241,2111,2090,2112,2117],{},[192,2113,2116],{"href":2114,"rel":2115},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWIMP_(computing)",[196],"WIMP (computing)","（窗口、图标、菜单、指针体系）",[241,2119,2090,2120,2124],{},[192,2121,1460],{"href":2122,"rel":2123},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWYSIWYG",[196],"（所见即所得编辑理念）",[241,2126,2127,2128,2132],{},"ScienceDirect — ",[192,2129,2131],{"href":1146,"rel":2130},[196],"Human-Computer Interaction","（Xerox Star 的“以文档为中心”设计）",[241,2134,2090,2135,2138],{},[192,2136,1315],{"href":1313,"rel":2137},[196],"（WIMP 与 GUI 的普及历程）",[241,2140,2141,2142,2146,2147,2146,2152,2156],{},"Wikimedia Commons — ",[192,2143,2145],{"href":245,"rel":2144},[196],"Category:Sketchpad","、",[192,2148,2151],{"href":2149,"rel":2150},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FCategory:Xerox_Alto",[196],"Category:Xerox Alto",[192,2153,2155],{"href":654,"rel":2154},[196],"Category:Apple Lisa","（本文图片的主要来源）",[127,2158,2160],{"id":2159},"意图式ui与现代交互板块","意图式UI与现代交互板块",[238,2162,2163,2172,2180,2188,2196,2205,2214],{},[241,2164,2165,2166,2171],{},"Nielsen Norman Group — ",[192,2167,2170],{"href":2168,"rel":2169},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Frecognition-and-recall\u002F",[196],"Recognition and Recall","（“从记忆变成识别”这一设计原则的理论依据）",[241,2173,2165,2174,2179],{},[192,2175,2178],{"href":2176,"rel":2177},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdirect-manipulation\u002F",[196],"Direct Manipulation","（直接操作在现代 UX 中的定义与边界）",[241,2181,2090,2182,2187],{},[192,2183,2186],{"href":2184,"rel":2185},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FConversational_user_interface",[196],"Conversational user interface","（对话式\u002F自然语言交互的优势与成本讨论）",[241,2189,2090,2190,2195],{},[192,2191,2194],{"href":2192,"rel":2193},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLarge_language_model",[196],"Large language model","（LLM 的推理成本与使用门槛背景）",[241,2197,2198,2199,2204],{},"VitePress — ",[192,2200,2203],{"href":2201,"rel":2202},"https:\u002F\u002Fvitepress.dev\u002Fguide\u002Fdark-mode",[196],"Dark Mode","（文中“把深浅色切换放在第一眼可见处”的实例之一）",[241,2206,2207,2208,2213],{},"Apple — ",[192,2209,2212],{"href":2210,"rel":2211},"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fhuman-interface-guidelines",[196],"Human Interface Guidelines","（系统级“上下文呈现功能”的设计实践参考）",[241,2215,2216,2217,2146,2221],{},"DigiBarn Computer Museum — ",[192,2218,2220],{"href":589,"rel":2219},[196],"Xerox Star 8010 screenshots",[192,2222,2224],{"href":595,"rel":2223},[196],"Xerox 8010 system",{"title":208,"searchDepth":2226,"depth":2226,"links":2227},2,[2228,2229,2242,2252,2253],{"id":12,"depth":2226,"text":12},{"id":107,"depth":2226,"text":108,"children":2230},[2231,2233,2234,2235,2236,2237,2238,2239,2240,2241],{"id":129,"depth":2232,"text":130},3,{"id":162,"depth":2232,"text":163},{"id":262,"depth":2232,"text":263},{"id":332,"depth":2232,"text":333},{"id":376,"depth":2232,"text":377},{"id":470,"depth":2232,"text":471},{"id":539,"depth":2232,"text":540},{"id":601,"depth":2232,"text":602},{"id":660,"depth":2232,"text":661},{"id":755,"depth":2232,"text":756},{"id":824,"depth":2226,"text":825,"children":2243},[2244,2245,2246,2247,2248,2249,2250,2251],{"id":847,"depth":2232,"text":848},{"id":960,"depth":2232,"text":961},{"id":1098,"depth":2232,"text":1099},{"id":1180,"depth":2232,"text":1181},{"id":1248,"depth":2232,"text":1249},{"id":1320,"depth":2232,"text":1321},{"id":1381,"depth":2232,"text":1382},{"id":1564,"depth":2232,"text":1565},{"id":1870,"depth":2226,"text":1871},{"id":1918,"depth":2226,"text":1918,"children":2254},[2255,2256,2257],{"id":1931,"depth":2232,"text":1931},{"id":2077,"depth":2232,"text":2078},{"id":2159,"depth":2232,"text":2160},"2026-09-05","探讨和面对用户的操作UI的设计思维的探讨","md",{},true,"\u002Fposts\u002Fintent-driven-ui",{"title":5,"description":2259},"posts\u002Fintent-driven-ui\u002Fzh",[2267,2268,2269],"UI","Design","Code","z4vyMDMlExHDsxd0f-g8RtXNiKF8_T-m3lH3tZif1vc",[2272,2273],null,{"title":2274,"path":2275,"stem":2276,"children":-1},"【Electron插件】Smart Renderers（聪明的渲染器）","\u002Fposts\u002Fsmart-renderers","posts\u002Fsmart-renderers\u002Fzh",1794746183362]