《前端体验中的设计原理.pdf》由会员分享,可在线阅读,更多相关《前端体验中的设计原理.pdf(116页珍藏版)》请在三个皮匠报告上搜索。
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
7、Style SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplayJFIF,rTextHTMLHtmlElementHTMLBodyElement!-b6/Robustness Principle 健壮性原则DOMHTMLSyle SheetsSyle SheetsStyle SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplayRobustness Principle 健壮性原则DOMHTMLSyl
8、e SheetsSyle SheetsStyle SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplay绘图具体实现类2D 图形库3D 图形库Robustness Principle 健壮性原则DOMHTMLSyle SheetsSyle SheetsStyle SheetsHTML 解析器CSS 解析器DOM Tree Style Rules合成Render Tree LayoutPaintingDisplay绘图具体实现类2D 图形库3D 图形库JFIF,JPEG标记0 xFFFE,COM(C
9、omment)image or html !-JFIF,rRobustness Principle 健壮性原则Robustness Principle 健壮性原则XHTML2 继承 XML严格的 错误处理 模型Robustness Principle 健壮性原则发送:Developer(前端)接收:Client(浏览器)Robustness Principle 健壮性原则发送:Developer(前端)接收:Client(浏览器)Robustness Principle 健壮性原则发送:Developer(前端)接收:Client(浏览器)发送:User(用户)接收:Developer(前端)
10、Robustness Principle 健壮性原则笔试题:实现千位分隔符Robustness Principle 健壮性原则Robustness Principle 健壮性原则Robustness Principle 健壮性原则1000.00-1000-1000.00¥1000 壹仟圆整Robustness Principle 健壮性原则/中文数值处理 if(!(/d/.test(source)source=chineseToNumber(source)/带前置符号的数字字符替换掉符号 if(typeof source=string)source=source.replace(/0-9.-/
11、g,)/小数点处理 let number=(source|0).toString()let splited=number.split(.)一.安全(恶意输入)二.灵活(接收多样化的输入)三.完整(周全的实现)Robustness Principle 健壮性原则一.安全(恶意输入)二.灵活(接收多样化的输入)三.完整(周全的实现)Robustness Principle 健壮性原则永远不要相信用户的输入!不确定性DEVICE-AGNOSTICDevice-Agnostic 不确定性以下假设:1、常用浏览器 2、笔记本屏幕 3、3G以上网速 4、鼠标操作Device-Agnostic 不确定性ht
12、tps:/ 不确定性xxx发布,xxx推广Device-Agnostic 不确定性静态资源cdn、上海品茶直出 减少请求、客户端缓存 xxx发布,xxx推广Device-Agnostic 不确定性Device-Agnostic 不确定性第三方接口崩了“Anything that can go wrong will go wrong.”-Murphys law为什么汽车需要在极端环境测试?即使车主永远不会这样开Device-Agnostic 不确定性Device-Agnostic 不确定性推向极限:min-width:min-content;if(serviceWorker in navigator
13、)Device-Agnostic 不确定性media not screen and(hover:hover)/*.*/推翻假设:推向极限:min-width:min-content;if(serviceWorker in navigator)Device-Agnostic 不确定性能力监测:supports not(display:flex).box display:inline-block;width:25%;media not screen and(hover:hover)/*.*/推翻假设:推向极限:min-width:min-content;if(serviceWorker in na
14、vigator)Device-Agnostic 不确定性能力监测:supports not(display:flex).box display:inline-block;width:25%;media not screen and(hover:hover)/*.*/推翻假设:推向极限:min-width:min-content;if(serviceWorker in navigator)渐进增强:#CSSNakedDayDevice-Agnostic 不确定性时刻准备为用户兜底!渐进增强PROGRESSIVE ENHANCEMENTProgressive Enhancement 渐进增强htt
15、ps:/ Enhancement 渐进增强Progressive Enhancement 渐进增强渐进增强就是?Progressive Enhancement 渐进增强特殊字体标题 stylized fontProgressive Enhancement 渐进增强特殊字体标题 stylized font h3 height:92px;width:1036px;text-indent:-9999px;background:url(title.png)no-repeat;overflow:hidden;特殊字体标题 stylized fontProgressive Enhancement 渐进增强
16、复制粘贴 页面内搜索 放大 翻译取词 Progressive Enhancement 渐进增强复制粘贴 页面内搜索 放大 翻译取词 Progressive Enhancement 渐进增强font-face font-family:hanzipen;src:url(hanzipen.eot);src:url(hanzipen.eot?#iefix)format(embedded-opentype),url(hanzipen.woff2)format(woff2),url(hanzipen.woff)format(woff),url(hanzipen.ttf)format(truetype),u
17、rl(hanzipen.svg#svgFontName)format(svg);h3 font-family:hanzipen;font-size:88px;font-weight:normal;margin:0;padding:0;Progressive Enhancement 渐进增强font-face font-family:hanzipen;src:url(hanzipen.eot);src:url(hanzipen.eot?#iefix)format(embedded-opentype),url(hanzipen.woff2)format(woff2),url(hanzipen.wo
18、ff)format(woff),url(hanzipen.ttf)format(truetype),url(hanzipen.svg#svgFontName)format(svg);h3 font-family:hanzipen;font-size:88px;font-weight:normal;margin:0;padding:0;Progressive Enhancement 渐进增强依赖可靠技术,保证核心内容Progressive Enhancement 渐进增强Progressive Enhancement 渐进增强Progressive Enhancement 渐进增强input.t
19、ype=number;input.onfocus=function()setTimeout(function()input.type=text;,1);Progressive Enhancement 渐进增强.Progressive Enhancement 渐进增强Progressive Enhancement 渐进增强定制组件 Progressive Enhancement 渐进增强业务场景确定技术底线通用性设计UNIVERSAL DESIGNUniversal Design 通用性设计通用性!=无障碍残障受伤暂时永久场景https:/ Design 通用性设计通用性!=专门设计Univer
20、sal Design 通用性设计Universal Design 通用性设计颜色 图形 声音 操作时长Universal Design 通用性设计颜色 图形 声音 操作时长对所有人都友好Universal Design 通用性设计body -webkit-text-size-adjust:100%!important;Universal Design 通用性设计body -webkit-text-size-adjust:100%!important;关闭了用户自主选择能力“HTML is,by default,accessible.As developers,it is our job to
21、not fuck that up.”-AnonymityUniversal Design 通用性设计 开户地市:请选择开户地市*开户地市:汕汕头市 汕尾市 请选择开户地市Universal Design 通用性设计 开户地市:请选择开户地市*开户地市:请选择开户地市Universal Design 通用性设计 *开户地市:汕汕头市 汕尾市Universal Design 通用性设计 提供原生能力*开户地市:汕汕头市 汕尾市Universal Design 通用设计对所有人都友好一.健壮性原则 Robustness Principle 二.不确定性 Device-Agnostic 三.渐进增强 Progressive Enhancement 四.通用性设计 Universal Design四条 设计原理How?03现实REALITYReality 项目现实需求评审团队开发项目上线一年需求发散期还有一个月我的项目Reality 项目现实需求评审团队开发项目上线一年需求发散期还有一个月我的项目需求评审团队开发项目上线一年需求发散期还有一个月别人的项目Reality 开发现实用户体验 开发者体验Reality 现实Reality 现实前端是与用户连接的第一现场Thank!