前端体验中的设计原理.pdf

1、前端体验中的设计原理Principles of Front-End ExperienceHi!Hi!AVENIR ZHENG入行8年，2年创业，6年腾讯01前端体验FRONT-END EXPERIENCEWhat?很久很久以前 面试现场什么是 前端体验面试官：你知道前端是做什么吗？什么是 前端体验什么是 前端体验面试官：请你举个什么是 前端体验什么是 前端体验产品需求：在页面底部实现一个点击后展开的面板什么是 前端体验产品需求：在页面底部实现一个点击后展开的操作区域什么是 前端体验1、展开速度与加速度产品需求：在页面底部实现一个点击后展开的操作区域什么是 前端体验1、展开速度与加速度产品需求：

2、在页面底部实现一个点击后展开的操作区域2、这个模块会应用到什么环境什么是 前端体验1、展开速度与加速度产品需求：在页面底部实现一个点击后展开的操作区域2、这个模块会应用到什么环境3、鼠标到下一步区域距离什么是 前端体验研究设计工程运维愿景迭代市场用户原型概念交互视觉接口服务数据数据网络硬件前端开发什么是 前端体验研究设计工程运维愿景迭代市场用户原型概念交互视觉接口服务数据数据网络硬件前端体验、网页重构、UI开发前端开发什么是 前端体验研究设计工程运维愿景迭代市场用户原型概念交互视觉接口服务数据数据网络硬件前端体验、网页重构、UI开发前端开发大前端与产品需求有关 与交互设计有关 与工程实现有关

3、什么是 前端体验与产品需求有关 与交互设计有关 与工程实现有关 什么是 前端体验前端是与用户连接的第一现场Why?为什么需要 设计原理理想状况为什么需要 设计原理实际状况为什么需要 设计原理实际状况为什么需要 设计原理实际状况02设计原理PRINCIPLES健壮性原则ROBUSTNESS PRINCIPLERobustness Principle 健壮性原则“Be conservative in what you send.Be liberal in what you accept.”-Postels lawRobustness Principle 健壮性原则第一行 第二行Robustness

4、 Principle 健壮性原则第一行 第二行Robustness Principle 健壮性原则第一行 第二行if(t-isCloseTag(brTag)&m_document-inCompatMode()reportError(MalformedBRError);t-beginTag=true;Robustness Principle 健壮性原则http:/lcamtuf.coredump.cx/squirrel/Robustness Principle 健壮性原则http:/lcamtuf.coredump.cx/squirrel/Robustness Principle 健壮性原则ht

5、tp:/lcamtuf.coredump.cx/squirrel/Robustness Principle 健壮性原则http:/lcamtuf.coredump.cx/squirrel/Robustness Principle 健壮性原则DOMHTMLSyle SheetsSyle SheetsStyle SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplayRobustness Principle 健壮性原则DOMHTMLSyle SheetsSyle SheetsStyle SheetsHT

6、ML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplayRobustness Principle 健壮性原则DOMHTMLSyle SheetsSyle SheetsStyle SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplayJFIF,rTextHTMLHtmlElementHTMLBodyElementRobustness Principle 健壮性原则DOMHTMLSyle SheetsSyle Sheets