[懒懒小报-外刊第4期]你如何做AngularJS项目的单元测试?

2015年2月27日 没有评论

微软本周宣布了 Windows Phone 8.1 Update 1,其更新列表中包括 IE 11 引入了对-webkit- 前缀代码的标准模式渲染,对于移动 Web 开发者而言相信是个好消息,来看看知乎上大家都什么看法吧

业界动态

充电站

  • The Basics Of ES6 Generators
    • 如果你对于 ES6 的生成器还不太了解,不妨来看看 Kyle Simpson 的这几篇关于 ES6 生成器的系列入门文章,目前深入浅出地介绍了生成器的概念、生成器中的迭代器、错误处理和委托生成器。
  • First Look: Getting Started with Facebook’s ReactJS Library
    • Kirill Buga 在这篇文章中分享了他的使用 Facebook 的 ReactJS 框架的经验,通过一个 Todo List 的案例来阐释 ReactJS 中的一些概念和模式。
  • Opinionated AngularJS styleguide for teams
    • 如果你的团队已经开始使用 AngularJS 了,有没有考虑过团队的代码风格统一化?不妨参考下 Todd Motto 分享的他的团队中目前 AngularJS 方面的代码风格规范。
  • AngularJS Unit Testing – For Real, Though
    • 除了官方的 Karma,AngularJS 应用的单元测试还有很多其他选择,这篇文章结合 Angular Mocks、Chai、Chai-as-promised 等工具,从可复用的端到端页面、处理 Promise 、mock 控制器和指令依赖、访问子和孤立作用域等几个方面进行了介绍。
  • Debugging in Git with Blame and Bisect
    • Git 提供了 Blame 和 Bisect 两个工具帮助我们定位和调试提交记录,但你是否能熟练掌握这两个工具呢?不妨看看这篇教程,相信会有新技能 Get 哦!
  • Swift for JavaScript Developers
    • 也许你已经见过不少关于 Swift 的教程了,但这篇分享不同之处在于以更贴近前端工程师的视角来认识这门苹果推出的新语言,通过比较 Swift 与 JavaScript 之间的异同来深入浅出介绍 Swift,相信会让你更轻松地掌握这门语言。

百宝箱

  • GabiAxel/ng-polymer-elements
    • ng-polymer-elements 是一个 Angular 的插件,主要解决 Angular 与 Polymer 组件之间的双向绑定问题,从而在 Angular 应用中也可以方便地调用 polymer 组件。
  • mscdex/httpolyglot
    • httpolyglot 是一个 Node.js 模块,用来在同一个端口号上同时提供 HTTP 和 HTTPS 连接,其内部实现机制通过嗅探请求流中的第一个字节来区分的。

附所有链接:
分类: 设计用户体验 标签:

[懒懒小报-外刊第4期]你如何做AngularJS项目的单元测试?

2015年2月25日 没有评论

微软本周宣布了 Windows Phone 8.1 Update 1,其更新列表中包括 IE 11 引入了对-webkit- 前缀代码的标准模式渲染,对于移动 Web 开发者而言相信是个好消息,来看看知乎上大家都什么看法吧

业界动态

充电站

  • The Basics Of ES6 Generators
    • 如果你对于 ES6 的生成器还不太了解,不妨来看看 Kyle Simpson 的这几篇关于 ES6 生成器的系列入门文章,目前深入浅出地介绍了生成器的概念、生成器中的迭代器、错误处理和委托生成器。
  • First Look: Getting Started with Facebook’s ReactJS Library
    • Kirill Buga 在这篇文章中分享了他的使用 Facebook 的 ReactJS 框架的经验,通过一个 Todo List 的案例来阐释 ReactJS 中的一些概念和模式。
  • Opinionated AngularJS styleguide for teams
    • 如果你的团队已经开始使用 AngularJS 了,有没有考虑过团队的代码风格统一化?不妨参考下 Todd Motto 分享的他的团队中目前 AngularJS 方面的代码风格规范。
  • AngularJS Unit Testing – For Real, Though
    • 除了官方的 Karma,AngularJS 应用的单元测试还有很多其他选择,这篇文章结合 Angular Mocks、Chai、Chai-as-promised 等工具,从可复用的端到端页面、处理 Promise 、mock 控制器和指令依赖、访问子和孤立作用域等几个方面进行了介绍。
  • Debugging in Git with Blame and Bisect
    • Git 提供了 Blame 和 Bisect 两个工具帮助我们定位和调试提交记录,但你是否能熟练掌握这两个工具呢?不妨看看这篇教程,相信会有新技能 Get 哦!
  • Swift for JavaScript Developers
    • 也许你已经见过不少关于 Swift 的教程了,但这篇分享不同之处在于以更贴近前端工程师的视角来认识这门苹果推出的新语言,通过比较 Swift 与 JavaScript 之间的异同来深入浅出介绍 Swift,相信会让你更轻松地掌握这门语言。

百宝箱

  • GabiAxel/ng-polymer-elements
    • ng-polymer-elements 是一个 Angular 的插件,主要解决 Angular 与 Polymer 组件之间的双向绑定问题,从而在 Angular 应用中也可以方便地调用 polymer 组件。
  • mscdex/httpolyglot
    • httpolyglot 是一个 Node.js 模块,用来在同一个端口号上同时提供 HTTP 和 HTTPS 连接,其内部实现机制通过嗅探请求流中的第一个字节来区分的。

附所有链接:
分类: 设计用户体验 标签:

[懒懒小报-外刊第3期]React的Virtual DOM有什么秘密?

2015年2月25日 没有评论

本周苹果 OS X Yosemite Beta 公测版正式与广大用户见面,预示着正式版的脚步离我们又近了一步,还没有尝试但想体验的小伙伴们可以前往https://appleseed.apple.com/sp/betaprogram/guide 下载。

业界动态

  • Firefox 31 is out now with a search bar on new tabs, better developer tools, and more
    • Firefox 31 本周发布,功能方面带来新 Tab 页面搜索框、支持 Prefer:Safe 请求头便于家长控制、CSS3 中的变量的实现等,开发者工具方面带来 Canvas 和附加组件调试器,支持 Object.setPrototypeOf()Array.prototype.fill()等。
  • What’s New in Chrome 36
    • Chrome 36 正式版上周正式与大家见面,带来大量优化和提升,对开发者而言更重要的是完善支持 Web Components、无前缀的 transform 以及Object.observe 和 element.animate()
  • Opera 23 released
    • Opera 23 正式发布,CSS 方面支持 touch-actionwill-change 、无前缀的transform 属性,JavaScript 方面支持element.animate()Object.observe()、ES 6 WeakMap & WeakSet,此外还支持 HTML Imports

充电站

  • Analyzing Your Website With the Screaming Frog SEO Spider
    • 如果你在设计站点的 SEO,那么这个 Screaming Frog SEO Spider 应用程序一定可以帮到你,它提供了搜索引擎爬虫的视角来帮助你直观地检视你的站点,并提供了导出 SiteMap 的功能。
  • Introduction to the Resource Timing API
    • 如果你想统计你的 Web 应用的加载性能,资源计时 API (Resouce Timing API )应该可以帮到你,如果你还没有接触过,不妨从这篇入门教程了解下都有哪些可用的 API 和定义吧,此外文中还介绍了浏览器兼容情况,并提供了一个 Demo。
  • The Secrets of React’s Virtual DOM
    • 与 Angular 脏值检测的思路不同,React 选择了使用 virtual DOM 做 DOM diff 从而通过算法以最小的开销在 model 变化时更新视图 DOM,想深入了解其中的机制吗?这篇 Fluent 上的分享为你揭开其中的秘密。
  • Resources for HTML5 game developers ✩ Mozilla Hacks
    • Mozilla Hacks 博客带来这篇介绍 HTML 5 游戏开发者不可错过的一些有用的资源,除了 MDN 上的 Games Zone 之外,还有 Firefox 的一系列开发者工具,以及相关的教程文档等。
  • CSS Shapes: Breaking the Rectangular Design Shackles
    • 这又是一篇介绍 CSS3 Shapes 的教程,借助 Shapes 我们可以将我们的页面打造成像平面设计一样的排版,而不拘泥于块状的栅格排布,这篇文章中通过一个个 Demo 详细演示了 Shape 涉及到的各种 CSS 属性和值,简明易学。
  • ES6 interview with David Herman
    • ES 6 Rocks 就 ES 6 对 Ecmascript 标准核心贡献者 David Herman 进行了采访,重点关注了 ES 6 中的模块化、类机制增强、如今各种针对 ES 6 的转编译器等话题。
  • Comparing Winston and Bunyan Node.js Logging
    • Winston 和 Bunyan 都是较为成熟的 Node.js 日志框架,在功能特色方面也势均力敌。这篇文章从安装、使用、格式化到各自特性对两者进行了对比,让你更轻松了解二者各自的特色。

百宝箱

  • LivePool
    • LibePool 是来自腾讯 AlloyTeam 打造的一款基于 Node 的类似 Fiddler 的跨平台抓包和资源代理工具,支持基于请求路径的本地文件替换和基于请求路径的路由转发,支持请求响应的构建,以及模拟慢网速等特性。
  • SassDoc/sassdoc
    • SassDoc 是一个类似 JSDoc 的 node.js 工具,帮助你自动生成 sass 文件的文档,提供命令行和 node.js 模块以及 Grunt 和 Gulp 的插件。

附所有链接:
分类: 设计用户体验 标签:

动效-APP设计的肢体语言

156-980

引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液——“动效设计”。动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到——类似于“Cool”的惊喜,它就像人类的肢体语言,通过肢体语言传达更多的抽象信息和性格展现。

肢体语言(body language)又称身体语言,是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调活动来传达人物的思想,形象地借以表情达意的一种沟通方式。一个人要向外界传达完整的信息,单纯的语言成分只占7/100,声调占38/100,另外的55/100信息都需要由非语言的体态来传达。肢体语言的重要性可见一斑。
肢体语言大致可分为三类动作:基本动作,招牌动作和高难度动作,这三种动作是如何在APP设计中体现呢?

1.基本动效让用户舒服

基本动作也可称为日常动作,如坐立,行走,握手,拥抱等.对应APP中的基本动作分三类:1.指向性动效(滑动,弹出等)
2.提示性动效(滑动删除,下拉刷新等)
3.空间扩展(翻动,放大等)

不要小瞧基本动作,试想当你看到一位美女起身向你走来结果驼背,外八字,是啥感觉!APP亦是如此。流畅,自然映射,重力模拟这些看似简单但却能让用户在操作时轻松自在并有强烈的代入感。这类动效最重要的是让用户感到毫无负担又如沐春风,也就是不要夺人眼球,悄无声息的顺应用户行为,引导用户需求。
这类动效在设计过程中需要主意几点:
1.系统兼容和资源占用
2.动态速度的节奏
3.仿生性or现实重现

举例:
图片1.3X3动效控件

156-001
2.加载动画

156-002
3.翻页动画

156-006
2.招牌动效加深用户印象

招牌动作是基于基本动作有选择性的差异化展现。例如针对空间扩展而设计的path加号按钮动画。facebook 推出的paper关闭消息的拉伸曲线动画等。
巧妙的设计在满足产品功能需求的基础上更能让用户惊艳。这类动效是APP的专属符号,APP的品牌和逼格展现通过此类动效有较大的发挥空间。。这就像Michael Jackson的亮相pose,他本人or模仿者只要一摆出这个POSE我们就立马想到MJ。同样这类动效的设计更具尝试性和前瞻性,它是动效趋势的实践和探索,甚至能引发跟风潮流。
这类动效设计需要注意的是:
1.操作前的提示引导
2.夸张化和个性化的表现
3.对动态趋势的预测
举例:
图片1.手势提示的动画

156-003
2.特型动画

156-004
3.前瞻性动效演示

156-005
3.高难度动效让用户『WOW』

基本动效让用户舒服,招牌动效让用户印象深刻,只有这些对于一款“高逼格”标签的App还不够。在这个大家都很拼的世界,不来点让人经验的高难度动作很难让别人对你刮目相看。这类动效很酷,很炫,可让用户作长时间的视线停留享受,让用户『WOW』的同时,不得不为设计动效的同学点赞,大大提升了对APP所属品牌及开发团队实力的认可。当然不要忘了APP的主要功用,高难度动作只是锦上添花抑或画龙点睛。所以在APP设计中高难度动作并不一定都会使用,要根据APP的切实需要进行设计。在不干扰主功能的前提下,进行探索展示。所以这类动效多出现在引导页或者特殊功能展示上例如手机清理APP展示清理进度的仪表动效等。

这类动效的需要注意的是:在满足系统资源占用的前提下尽可能发挥吧!Just do it!
图片:仪表盘动画

156-007
基本动效,招牌动效和高难度动效的合理运用,可以让App变得更出众,更性感,更有趣。在App设计过程中,这三类动效要遵循以基本动效为主,招牌动效为辅,高难度动效精选使用,切勿过度炫技的准则。在全民扁平化的设计趋势中,相信动效会为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的领域,各位加油吧!

分类: 设计用户体验 标签:

大屏手机时代,如何重塑界面交互

157-980

这是一个大屏手机的时代。
强调这件事情的意义在于,这已经成为事实。

Medium上存在一份个人统计。
在过去7年,新上市的手机屏幕尺寸越来越大。

157-001

以4.5英寸为分界点,我们更清晰的看到这一变化。过去的两年,4.5英寸的比例从10%升至80%。

157-2

在国内的过去3个季度,使用FHD HD分辨率的手机从38%的份额增至50%。

157-3

【图】《百度移动分发报告2014H1》

更大尺寸的屏幕可以承载更多的内容展现,更适合游戏、阅读与播放视频,体验得以提升。

157-004

【图】《百度移动趋势报告2014Q2》

然而屏幕尺寸的上升并没有引起用户操作上的过多不适,有51%的用户已经适应双手操作。

157-5

【图】《How Do Users Really Hold Mobile Devices》by Steven Hoober

即使用户单手操作,在操作大屏幕时的相对盲区(深色区域),需要更多的响应时间,也可以被接受。

157-6

【图】《Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?》By Mikkel Bo

即便如此。3.5英寸~4英寸,依然是平衡单手操作与体验的合理尺寸范围。

157-007

这样就产生一个矛盾:用户拥有更大屏幕的尺寸,但从人机交互的角度,并不完美。

面对这一现状,从APP产品界面设计的角度,需要做出改变。

 

大屏幕拥有典型的可用性问题:纵向单手操作机身,边角、顶部、左右侧边难以触达,放置在以上盲区的点击入口,将导致体验路径中断。

 

交互设计角度的最佳实践:

1.设计安全区域,避开操作盲区。

示例,百度搜索结果页,根据视线规律,典型的左上角操作盲区可以用于logo展现。

157-8

2.注意使用场景路径触发的连贯性。

示例,在百度手机助手Android中下载百度浏览器,操作区域集中在安全区域。

 

 

157-009

3.更多的使用可拖动的浮动按钮,给用户更自由的操作可能性。

示例,百度浏览器Android中翻页/返回顶部的组合按钮。

157-010

4.更多的使用手势,并提供暗示。

示例,百度浏览器Android的删除窗口操作。

157-011

5.更多的使用语音作为输入方式。

示例:生活手记中使用语音替代键盘输入。

157-012

6. 横屏Pad化的操作设计,以及更多的内容展现。

示例,百度浏览器iPhone的横屏设计,如同网页的Responsive Layout概念。

157-013

在界面交互的层面之外,在不远的时间,硬件存在更多的优化可能性。

1.更窄的边框,更大的显示比例。

157-014

2.柔性材质。

157-015

3.“手机”成为服务的触发者,屏幕投射与隔空操作。

157-016

《The World as a Display》

 

之所以将讨论的范围扩展到硬件,是希望设计师在针对具体屏幕设计的同时,能够从另外的视角,思考人机交互的变化与可能性,激发创造力。

 

当前是大屏手机的时代,推动你的手机APP产品跟进吧!

 

 

一些有价值的相关基础研究链接

 

  1. 百度移动分发报告2014H1
  2. 百度移动互联网发展趋势报告2014Q2
  3. The Rise of the Phablet: Designing for Larger Phones
  4. Common Misconceptions About Touch
  5. How to design for thumbs in the era of huge screens
  6. Designing for Large Screen Smartphones
  7. Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
  8. Insights on Switching, Centering, and Gestures for Touchscreens
  9. A comprehensive look at smartphone screen size statistics and trends
分类: 设计用户体验 标签:

安卓手机使用习惯调研

为提高手机软件的用户体验,百度移动用户体验部有偿招募用户若干名。

如果您身在北京,热爱发现、尝试手机应用,正在使用甚至热衷于使用手机助手软件,速来报名吧!我们将从报名的用户中邀请体验达人来百度北京总部,优秀的你将与优秀的百度同学零距离分享、讨论产品的用户体验,你的建议将引领下一代产品的发展,欢迎大家积极报名!

报名链接:http://uxsurvey.baidu.com/n/index.php/844922/lang-zh-Hans

 

分类: 设计用户体验 标签:

短视频应用使用情况问卷调研

亲爱的用户,您好!

诚邀您填写短视频应用使用行为调查问卷。

我们将在完成问卷的用户中,抽取幸运用户,赠送30元手机充值卡!

期待您的参与,谢谢!

本调查包括23个问题。

问卷链接:http://uxsurvey.baidu.com/n/index.php/275453/lang-zh-Hans

分类: 设计用户体验 标签:

[懒懒小报-外刊第3期]React的Virtual DOM有什么秘密?

2015年1月28日 没有评论

本周苹果 OS X Yosemite Beta 公测版正式与广大用户见面,预示着正式版的脚步离我们又近了一步,还没有尝试但想体验的小伙伴们可以前往https://appleseed.apple.com/sp/betaprogram/guide 下载。

业界动态

  • Firefox 31 is out now with a search bar on new tabs, better developer tools, and more
    • Firefox 31 本周发布,功能方面带来新 Tab 页面搜索框、支持 Prefer:Safe 请求头便于家长控制、CSS3 中的变量的实现等,开发者工具方面带来 Canvas 和附加组件调试器,支持 Object.setPrototypeOf()Array.prototype.fill()等。
  • What’s New in Chrome 36
    • Chrome 36 正式版上周正式与大家见面,带来大量优化和提升,对开发者而言更重要的是完善支持 Web Components、无前缀的 transform 以及Object.observe 和 element.animate()
  • Opera 23 released
    • Opera 23 正式发布,CSS 方面支持 touch-actionwill-change 、无前缀的transform 属性,JavaScript 方面支持element.animate()Object.observe()、ES 6 WeakMap & WeakSet,此外还支持 HTML Imports

充电站

  • Analyzing Your Website With the Screaming Frog SEO Spider
    • 如果你在设计站点的 SEO,那么这个 Screaming Frog SEO Spider 应用程序一定可以帮到你,它提供了搜索引擎爬虫的视角来帮助你直观地检视你的站点,并提供了导出 SiteMap 的功能。
  • Introduction to the Resource Timing API
    • 如果你想统计你的 Web 应用的加载性能,资源计时 API (Resouce Timing API )应该可以帮到你,如果你还没有接触过,不妨从这篇入门教程了解下都有哪些可用的 API 和定义吧,此外文中还介绍了浏览器兼容情况,并提供了一个 Demo。
  • The Secrets of React’s Virtual DOM
    • 与 Angular 脏值检测的思路不同,React 选择了使用 virtual DOM 做 DOM diff 从而通过算法以最小的开销在 model 变化时更新视图 DOM,想深入了解其中的机制吗?这篇 Fluent 上的分享为你揭开其中的秘密。
  • Resources for HTML5 game developers ✩ Mozilla Hacks
    • Mozilla Hacks 博客带来这篇介绍 HTML 5 游戏开发者不可错过的一些有用的资源,除了 MDN 上的 Games Zone 之外,还有 Firefox 的一系列开发者工具,以及相关的教程文档等。
  • CSS Shapes: Breaking the Rectangular Design Shackles
    • 这又是一篇介绍 CSS3 Shapes 的教程,借助 Shapes 我们可以将我们的页面打造成像平面设计一样的排版,而不拘泥于块状的栅格排布,这篇文章中通过一个个 Demo 详细演示了 Shape 涉及到的各种 CSS 属性和值,简明易学。
  • ES6 interview with David Herman
    • ES 6 Rocks 就 ES 6 对 Ecmascript 标准核心贡献者 David Herman 进行了采访,重点关注了 ES 6 中的模块化、类机制增强、如今各种针对 ES 6 的转编译器等话题。
  • Comparing Winston and Bunyan Node.js Logging
    • Winston 和 Bunyan 都是较为成熟的 Node.js 日志框架,在功能特色方面也势均力敌。这篇文章从安装、使用、格式化到各自特性对两者进行了对比,让你更轻松了解二者各自的特色。

百宝箱

  • LivePool
    • LibePool 是来自腾讯 AlloyTeam 打造的一款基于 Node 的类似 Fiddler 的跨平台抓包和资源代理工具,支持基于请求路径的本地文件替换和基于请求路径的路由转发,支持请求响应的构建,以及模拟慢网速等特性。
  • SassDoc/sassdoc
    • SassDoc 是一个类似 JSDoc 的 node.js 工具,帮助你自动生成 sass 文件的文档,提供命令行和 node.js 模块以及 Grunt 和 Gulp 的插件。

附所有链接:
分类: 设计用户体验 标签:

说说最近Google:safebrowsing引发页面加载阻塞的问题

2015年1月28日 没有评论

背景

一个礼拜前,在退款维权的业务中,发现这样一个问题: 在某些Firefox浏览器中,表单的butterfly加载阻塞导致功能异常了。

一开始,我们以为是即将发布的修改点导致的问题。

但再三确认本次的修改点后,确定只是改了文案啊! 这…

因此,我们首先怀疑是否线上已经有问题? 经过测试发现,果然,确实是个线上问题。

经过并不算麻烦的自测后,发现问题还不小:

影响范围:所有Firefox版本。
(注意:Firefox略有修复,但未完全解决:30.00+官方版Firefox浏览器; 原因是该版本携带有“附加组件管理器”1.2.3版本这个扩展)

chrome在一个月前也发现过类似问题,不过近期没有类似案例,可能已经在35中修复。

隐藏在Firefox中的Google:safebrowsing是如何工作的?


印象中,页面在Firefox中请求一个JS文件的过程,是这样的

图中看到了三个步骤:

  1. 页面向Firefox发起一个js的请求;
  2. Firefox判断是否为reload请求或者已在缓冲,if true直接读缓存,返回js文件给页面使用;if false则执行步骤3;
  3. 向阿里CDN请求,获取到js文件,返回js文件给页面使用,并且写入缓冲;

看起来没什么问题,太符合我们的认知了。

直到有一天,发现页面因为js加载阻塞导致页面功能严重受影响。

而且怎么强刷、清理缓存,都无果。

才发现….

原来,页面在Firefox中请求一个JS文件的真正过程,是这样的

这里演示下Google服务正常和异常两种情况:

一. Google服务正常时:

二. Google服务不正常时:

图中可以看到多了个本地哈希碰撞和向Google服务发送检测的过程,更多步骤描述如下:

  1. cdn返回js给Firefox后,Firefox先在本地safebrowsing哈希库中执行哈希碰撞;
  2. 碰撞结果为不通过的话,会向Google服务器(safebrowsing.google.com:443)发起检测通知,并进入等待状态;
  3. 此时,页面的直观感受就是js没有请求到,功能异常;
  4. 并且,如果再次请求同一个js文件,首先会查看safebrowsing等待队列;
  5. 如果已在safebrowsing等待队列中,则什么都不做。没错!什么都不做!(这就解释了,为什么强刷,甚至清理缓存后的强刷,都毫无作用)

似乎已经定位到了,问题了


第一: Firefox把我们的js判定为可疑文件(也就是哈希碰撞结果为可疑);
第二: Google服务被墙了, 哎~~

另外:

  1. safebrowsing会对所有静态资源执行哈希碰撞;
  2. 哈希碰撞,只针对静态资源的名称;(也就是说与js文件的文件内容无关)

于是,向Firefox的同学请求帮助


无辜的受害者: “为什么Firefox把我们的js认定为可疑文件?”

Firefox的解释是: “我也不知道为什么啊!”;

Firefox: “因为:Firefox浏览器会从Google下来一份safebrowsing哈希库,这个哈希库会对所有静态资源请求执行哈希碰撞。 因此,具体算法,Firefox方面,其实也是不知道的呢。”

无辜的受害者: “哦! 原来是被检查请求阻塞了呢?那要不你们添加一个阻塞行为的监控吧?”

Firefox: “对啊,对啊,在最新版本:30.00中,我们加了阻塞情况下,只进行本地检查的处理了, 你下载最新的版本就可以了。”

… 几个小时后 …

无辜的受害者: “我下更新到最新版本了,可还是不行呢? ”

Firefox: “要怪就怪gfw吧,为了伪造成是Google自己服务器的问题,而不是国内封锁,现在gfw对Google的封锁采用hold连接,不释放,不重置,一直不返回数据,造成现在火狐以为连接一直在等待数据”

无辜的受害人: “这….”, 尼玛,不是坑爹吗? “好的谢谢, 保持联系”。

因此,又抛出了两个新的问题:

  1. 为什么升级了Firefox还是在本地哈希碰撞中被fail了?
  2. 为什么Firefox已经添加了防阻塞处理,结果却还是被阻塞了?

问题的答案:

  1. Firefox升级是升级了,但是本地哈希库,并没有被更新(因为Google服务调不到啊~); 自测发现哈希库被保存在Firefox的应用程序中,而非个人配置目录中;
  2. Firefox添加了阻塞处理没错,但是gfw似乎做了一件奇葩的事情: gfw对Google的封锁采用hold连接,不释放,不重置,一直不返回数据,造成现在火狐以为连接一直在等待数据; 看来是Firefox的解决方案不够彻底啊;

最后的问题变成:

  1. Firefox没有处理到gfw对Google服务请求采取hold连接的情况;
  2. 没有得到能够让用户一次操作(如更新插件,更新浏览器)就能解决的方案,难以形成终极解决方案。

以后怎么办


首先:考虑到网络安全敏感问题,能拿到Google safebrowsing哈希库算法的可能性几乎不可能;尝试通过hash算法扫描本地代码库的思路不太可行。

看来:还是得靠Firefox那边,能够自己修复这个问题。 后续我们会持续跟进这一类的问题,并就这个问题跟Firefox方面保持反馈和测试结果的同步。

临时解决方案


js的出异常的解决方案是: 修改静态资源文件的文件名(注意如果是js文件必须修改非参数部分如: g.tbcdn.cn/aaa/bbb/ccc/ddd-min.js部分,而非 t=xxxxx.js)

另外:

由于safebrowsing检测的是所有静态资源,目前已发现的出现问题的资源文件类型和解决方案是:

/ Type Solution
1 ajax 修改请求名
2 js, css 修改目录时间戳
3 页面请求 修改参数名或添加时间戳

最后


说多了都是泪, 庆幸本次问题基本只在Firefox中被发现,并且没有大面积爆发。(应该多向chrome团队快速精准解决问题的作风学习呢~)

以后还是需要主动关注浏览器生态圈的动态,避免类似情况发生,以及对某些风险做好提前预防工作, 保证每一个使用Firefox的朋友有一个良好用户体验。

特别感谢Firefox的同学积极的帮助! 后续还会继续骚扰!

分类: 设计用户体验 标签:

好的设计,是一种尊重–Design is respect. InteriorDesign中文版10周年系列展览观感

我们赴展的那一天,是北京一个难得的蓝天,也是【Design is respect】展的最后一天。去之前我们就知晓,这是一个在北京朝阳公园东门Walter Knoll展厅举行的小型展览,但是我们没想到的是,它是真的很“小”。小到我们在地图上完全无法准确定位展厅的位置,小到第一批到达朝阳公园的同事把东7门到东5门转了个遍也未寻到展厅的一个边角。

最后,我们的侦察兵在穿越了一个足球场一个停车场后,在一片白桦林深处发现了这个小巧而精致的Walter Knoll展厅。在急匆匆奔赴的路上,我在脑子里过了一遍之前了解到的关于这个展的关键词:迪特·拉姆斯、Interior Design中文版10周年系列展、北京首次Systems展、设计百人言(100个国内设计领域的人谈论自己对于design is respect的理解)。这几个关键词,好像随随便便拎出来一个都能让这个展览门庭若市,那现在的“小”和如此“低调”的状况,着实令人带了一分疑惑和费解。

1418787033_47

这个展览是美国Interior Design 杂志于中文版10周年之际,携手策展人高一强共同推出的。整个展览有三个部分:【Systems Exhibition】展览、Braun经典实物展,以及【Design is respect】。

关于一个灵魂人物

image003

说到Systems展和Braun经典实物展,首先应该说一下其中的灵魂人物-迪特·拉姆斯(Dieter Rams)。我们最早被这个展览吸引,源于一篇叫做《那个影响了苹果和MUJI设计主脑的人,在北京有个展》的文章,其实就冲着这个title,任何做设计的人应该都无法拒绝。作为曾经的工业设计系学生,这位著名的德国工业设计师的名字和设计理念曾经无数次出现在各种书籍和杂志中。现代主义建筑大师密司·凡·德罗曾有一句“少即是多(Less is more)”的名言,而迪特·拉姆斯却将他的设计理念阐述为“少,却更好”(Less, but better)。

大道至简,平淡为归。我们当年曾经反复浏览吟读拉姆斯关于Good design的十项原则,那时读来觉得颇为平淡无奇,而从业多年后回顾才发觉,这样解读了“人-产品-社会-环境”的设计原则其实真真是知易行难。好的设计是创新的,也是实用的。好的设计是美的,也是易于理解的。好的设计是谦逊的,也是纯粹简单的。好的设计是对细节的尊重。也是历久弥新的。好的设计是关怀社会人文的,也是对自然环境的敬仰和延续。

在这里,也分享一下Good design应具备的十项原则:

好的设计是创新的 (Good design is innovative)

好的设计是实用的 (Good design makes a product useful)

好的设计是唯美的 (Good design is aesthetic)

好的设计让产品说话 (Good design helps a product to be understood)

好的设计是谦虚的 (Good design is unobtrusive)

好的设计是诚实的 (Good design is honest)

好的设计坚固耐用 (Good design is durable)

好的设计是细致的 (Good design is thorough to the last detail)

好的设计是环保的 (Good design is concerned with the environment)

好的设计是极简的 (Good design is as little design as possible)

关于Systems展和Braun经典实物展

讲完灵魂人物,就可以回来看看迪特·拉姆斯和这两个展。

1418787072_75

Systems展是一面铺满招贴的墙,旁边整齐的垒了一叠介绍每张招贴主题的小册子。在1961年成为博朗的首席设计师后,迪特·拉姆斯在随后30多年主导了一批博朗的经典设计作品,包括咖啡机、计算机、收音机、视听设备、家电产品与办公产品等,都成为世界各地博物馆的永久收藏。而Systems即为在拉姆斯的主持下由Braun布朗公司引领的设计理念。Systems展也就是英国的策展人邀请24位艺术家对systems这个Braun的经典设计主题进行重新诠释的招贴展。

1418787080_3

走过这一面堪称壮观的招贴墙,路过了一张小小的桌子,差点擦身而过的瞬间我反应过来这应该就是迪特·拉姆斯的实物展。这些实物一眼看上去就已经有了时间的影子,陈旧有一点,古板有一点。但如果再仔细看,会发现其中的很多细节元素其实依然存在于现在周边的很多产品身上。如今很多人都将苹果与无印良品的产品设计奉为简约却富有功能性的设计标杆,但要知道,不管是苹果设计部门的主管乔纳森·埃维(Jonathan Ive),还是无印良品的设计顾问深泽直人,都深受迪特·拉姆斯的影响,乔纳森·埃维在接受采访时也不只一次提到,在苹果的产品设计中运用了不少博朗产品的设计元素,其中最为明显的就是 iPod 对博朗 T3 便携式收音机的传承与 iMac 采用的博朗 LE1 音箱的支架设计,而深泽直人为无印良品设计的 CD 播放机也是一例。

image006

关于Design is respect

1418787099_96

之所以把这部分放在最后说,我是想起到一点点文尾强调作用的。其实我们走进展厅第一眼看到驻足的,并不是声势浩大的招贴墙,也不是那一桌经典的收藏品,而是整整齐齐挂在展厅中间的一幅幅“百人言”。

这是100幅来自设计人的手稿,他们来自不同地域,从事着不同的设计行业,有男有女,有位尊年长者,有的文字稍显青涩。我想策展人无论通过什么方式收集这样100张手稿,都是需要花一番心思和气力的,但是现在这几排“百人言”确实真真切切的摆在了面前。

文字或长或短,或随性或繁复,但是全都围绕着对一个主题的理解:Design is respect。好的设计,是一种尊重。

他们有人说:

“设计是尊重内心的行为方式,始于心,而不止于心“

“设计原本就是自私的。所谓的人/社会/文化/环境等互相尊重,也是为自己的设计得以实现的一种手段,因为不尊重就无法被实现。当然,也正是因为这些自私的设计,彩绘有那么多不朽的传奇,世界也因此而丰富多彩“

“设计不是奴役,要设计不要奴役“

“设计的核心价值就是尊重原创“

“好的设计都是天使与魔鬼的混合体,因为设计师把锋利的双刃刀,它既能化解又会制造矛盾,但无论是哪一方都值得我们的尊重“

“设计就是,要有热爱生命的感觉“

“设计是把理想的生活美学带给可以分享它的人“

好的设计是一种尊重。是建立在给予人、社会、文化、环境等客观条件以足够的尊重的基础上,而产生的共生共存的协调关系。

老实说,同样作为一个设计从业者,站在这样一排排手稿前,我是有一些小激动的。在此之前你也许认为你自己孤单的做着设计,孤单的坚持着设计是一种尊重的理念,但是此时,我相信来参加的每一个设计者都会感受到来自整个行业从业者同样的坚持。并且,站在这里你会去思考,设计就是要完成对于彼此的尊重,这样才能做下去。

1418787180_8

最后离开时,站在白桦林回头给小展厅拍了一张照片。来时觉得它隐藏太深,路引指示太过简陋。这时又觉得它本来应该就这样低调的,就这么默默的立在这里吧,就像满墙无声传递着信息的招贴,满桌用岁月传递着情怀的产品,还有一排排用静默传递着坚守的设计信仰。

好的设计,是一种尊重~~~

1418787200_39

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=8344)

分类: 设计用户体验 标签:

无觅相关文章插件,快速提升流量