ixdc双剑合璧：设计与技术

双剑合璧：DESIGN&TECHNOLOGY梁山鹰 / 微软亚洲互联网工程院 / @MtEagle山鹰SHANYINGLEUNG/MICROSOFTSEARCHTECHNOLOGYCENTERASIA设计技术与TheMarriageBetween南京 NANJING南京 NANJING北京 BEIJING南京 NANJING北京 BEIJING香港 HONGKONG南京 NANJING北京 BEIJING香港 HONGKONG旧金山  SANFRANCISCO南京 NANJING北京 BEIJING香港 HONGKONG旧金山  SANFRANCISCO北京 BEIJING微软亚洲互联网工程院用户体验设计团队MicrosoftSearchTechnologyCenterAsiaUSEREXPERIENCEDESIGNTEAMDESIGN设计技术TECHNOLOGYDESIGN设计技术TECHNOLOGY拉斯科洞窟壁画LascauxCavePaintings法国西南，公元前15,000年SouthwesternFrance,Europe,15,000BC雕版印刷：金刚经WoodblockPrinting:DiamondSutra中国唐朝，公元868年TangDynasty,China,868AD活字印刷MovableType发明于中国宋朝, 公元1040年InventedinChinaaround1040AD约翰内斯 ·•∙ 谷登堡JohannesGutenberg德国美因茨, 公元1398 - 1468年Mainz,ElectorateofMainz,1398–1468AD约翰内斯 ·•∙ 谷登堡的铜版画像JohannesGutenberg’sCopperEngraving德国, 十六世纪Germany,16thCentury用户体验设计团队，几百年前UserExperienceDesignTeam,HundredsofYearsAgo如果各位都早生了几百年……Ifwewerebornacoupleofhundredyearsearlier...第一份报纸FirstEverNewspaper:RelationallerFürnemmenundgedenckwürdigenHistorien德国，公元1605年Germany,1605ADTheNewYorkTimesOnArmisticeDay公元1918年11月11日November11,1918TheNewYorkTimesOnSeptember11公元2001年9月11日September11,2001TIMEMagazine公元1945年9月3日September3,1945TIMEMagazine公元2008年1月1日January1,2008DESIGN设计技术TECHNOLOGYMacintosh128K1984MosaicBrowser/Yahoo!1993/1994PROPOSEDNEWTAG:IMGMarcAndreessen([e-mail])Thu,25Feb9321:09:02-0800I’dliketoproposeanew,optionalHTMLtag:IMGRequiredargumentis SRC=url.Mark Andreessen 给 W3C 的信 TheEmailMarkAndreessenSenttoW3C美国伊利诺斯大学香槟分校，1993年UIUC,USA,1993九十年代的网页设计Websitesinthe90s雅虎和Adobe首页, 90年代后期Yahoo.comandAdobe.com,Late1990sSlidingDoorsofCSSDouglasBowmanA List Apart, 2003年10月20日AListPart,Oct20,2003#header{float:left;width:100%;background:#DAE0D2url(bg.gif)repeat-xbottom;font-size:93%;line-height:normal;}#headerul{margin:0;padding:10px10px0;list-style:none;}#headerli{float:left;background:url(left.gif)no-repeatlefttop;margin:0;padding:0009px;}#headera{display:block;background:url(right.gif)no-repeatrighttop;padding:5px15px4px6px;text-decoration:none;font-weight:bold;color:#765;}#headera:hover{color:#333;}#header#current{background-image:url(left_on.gif);}#header#currenta{background-image:url(right_on.gif);color:#333;padding-bottom:5px;}SlidingDoorsofCSSDouglasBowmanA List Apart, 2003年10月20日AListPart,Oct20,2003styletype=text/javascriptevaluate_style(){if(color==red){color=blue;fontStyle=italic;}elseif(color==blue){color=green;fontWeight=bold;fontStyle=normal;}elseif(color==green){color=red;fontStyle=medium;}}tag.UL.color=green;tag.UL.apply=evaluate_style();/styleJavaScriptStyleSheetsNetscapeCommunicationsCorporation1996年 / 1996网络字体WebFonts2007年 / 2007响应式网页设计ResponsiveDesign2010年 / 2010渐进式设计增强ProgressiveEnhancement2010年 / 2010+DESIGN设计技术TECHNOLOGYBORDER-RADIUS/BORDER-IMAGE/MULTI-COLUMNLAYOUT/@FONT-FACE/:NTH-CHILD()AND:NTH-OF-TYPE()/TEXT-SHADOW/BOX-SHADOW/RGBA/OPACITY/MULTIPLEBACKGROUNDIMAGES/MEDIA-QUERY/CANVAS/VIDEO&AUDIO/OFFLINEWEBAPPLICATION/DOCUMENTEDITING/BROWSERHISTORYMANAGEMENT/WEBSTORAGE/ANIMATION/CSSKEYFRAMES/@KEYFRAMES/ANIMATION-NAME/ANIMATION-DURATION/TRANSITIONS/TRANSFORMS/3D#header{float:left;width:100%;background:#DAE0D2url(bg.gif)repeat-xbottom;font-size:93%;line-height:normal;}#headerul{margin:0;padding:10px10px0;list-style:none;}#headerli{float:left;background:url(left.gif)no-repeatlefttop;margin:0;padding:0009px;}#headera{display:block;background:url(right.gif)no-repeatrighttop;padding:5px15px4px6px;text-decoration:none;font-weight:bold;color:#765;}#headera:hover{color:#333;}#header#current{background-image:url(left_on.gif);}#header#currenta{background-image:url(right_on.gif);color:#333;padding-bottom:5px;}SlidingDoorsofCSS:BeforeandAfter2010年, 2010#header.tab{border-radius:4px;background:linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);padding:5px10px;border:1pxsolid#765;}移动设计优先MobileFirstLukeWroblewski,USA,2012微软的现代设计ModernDesignatMicrosoftFrom2010微软：先从设计出发Microsoft:DesignFirstFrom2010HTML5VIDEOONBINGHOMEPAGE2012–2013,Bing.comHACKDAYINSTCA(SEARCHTECHNOLOGYCENTERASIA,MICROSOFT)DESIGN设计技术TECHNOLOGYDESIGN设计技术TECHNOLOGY掌握LEARN运用USE影响INFLUENCE推动PUSHDESIGN设计技术TECHNOLOGY掌握LEARN运用USE影响INFLUENCE推动PUSH不恐惧 多实践 勤钻研Don’tbeafraid.Practiceisthekey.模型不只是前端的事儿Prototyping:it’salsodesigner’sbusiness.开发说什么不一定是什么WhatDevsaidmightnotbe100%true.互联网的规范和技术需要设计推动Designhastheresponsibilitytopush双剑合璧：DESIGN&TECHNOLOGY梁山鹰 / 微软亚洲互联网工程院 / @MtEagle山鹰SHANYINGLEUNG/MICROSOFTSEARCHTECHNOLOGYCENTERASIA设计技术与TheMarriageBetween