[懒懒小报-外刊第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)

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

【赶花人的蜜】礼品背后的故事

 

赶花人的蜜-km2

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

服务设计 @ CDC

12月1日•深圳。凌晨的小雨为27˚的暖冬注入了一丝寒意。

365日 • 深圳。 腾讯的团队为0˚的网络世界注入全年的暖意。

 

2014中国(深圳)国际工业设计大展上,腾讯参展位(9号馆C3)展示了设计师、工程师志愿者、腾讯公益和基金会的小伙伴们,走入对设计有强需求的团体和人群中,通过一系列的公益的“服务设计”工作,为他们和她们提供设计和技术,让原先冷冰冰的互联网世界向他们敞开那鲜活、暖人的一面窗户。腾讯的志愿者团队和CDC的团队先后通过儿童公益404、为盲胞读书、筑梦新乡村、一起捐、腾讯心益等公益项目,为需要设计的人群和团体,提供更多的连接触角。

 

设计是一种连接 Design • Connect

“儿童公益404”

你曾留意到大街上那些乞讨和走失的孩童吗?看到这一幕,我们往往无从下手,或走开、或拍张照片……有效的信息又瞬间淹没在小群体的信息洪流中。失联孩子的信息和大众总存在着一个信息鸿沟。

腾讯技术公益志愿者协会针对走失儿童问题,召唤了一批业界有志愿公益事业的程序员,把“找不到孩子”与“网站404错误找不到的页面”的场景相嫁接。在项目开展的过程中,我们成功地帮助20个家庭寻找回走失小孩。

在技术层面上,我们以开源代码和SDK的方式,接入更多网站和手机APP的404页面。在保证原有产品体验的同时,让失联儿童的信息有更高的曝光,为亲人重逢创造更多的连接可能性。儿童失联后的72小时内,成功找回的几率非常大。在“救命72小时”的时间赛跑中,我们也与歐勝科技合作设计了儿童安全智能设备科研项目——CircoQ。以此有效的降低儿童走失风险。CircoQ从穿戴的隐蔽性、设备定位的精准性、稳定性等技术难关上,我们的设计师、工程师志愿者们与歐勝科技的研究员一起创造了许多有趣的创意设计和实验。更多的故事或者想法,期待您一起来与我们聊聊。
kids20*30b

设计是一种体验 Design • Experience

“为盲胞读书”

现如今,互联网的浪潮也涌入了书店,越来越多的人开始在电子荧幕上阅读和分享知识了。对于普通人来说这个变化不足为奇。但对我们的盲人朋友来说,可是一座难于逾越的技术屏障。得知盲胞朋友们在手机上阅读文字的不便后,CDC的工程师们借助微信公众账号,向互联网亿万网民分发书籍或资讯中文字片段。通过热心网民的简短语音阅读、计算机算法智能处理,合集成为完整的语音CD,协助视障人士跨越“阅读”书籍与文章的沟壑。

猜猜我们现在已经进展到了哪一步吗?这里悄悄透露一下 :)

目前已经有10所盲校已经收到了我们捐赠的书籍CD和阅读设备,随着读书项目的进展,未来计划免费捐赠全国100家盲校。虽然你手机和电脑屏幕前的你看不到盲胞朋友“阅读”的笑容,但是你那唯一的声音可以跨越地域分享知识和见闻,让视觉障碍人士感受到如常人一般的书籍阅读体验。后续我们还会为盲胞朋友微信推送即时新闻等时效语音信息,想做公益?想帮助视障人群?想在手机前当个小电台主播……没问题,加入我们的“为盲胞读书”项目吧~~
为盲胞读书凸起墙面1000X2000

设计是一种价值  Design • Value

“筑梦新乡村计划”

虽然工业化生产的商品在超市货架上触手可及,可你总是会怀念老家那独特的记忆和味道,尽量寻找那些贴着“原生态”、“手工”的商品以慰心灵。

大山里淳朴的村民,不懂得电脑和互联网,只会用大自然的馈赠原生方式保存下来。一边是超市里的你,一边是大山里的他……为了帮扶边远山区挖掘优势资源(农副产品,传统手工艺等),CDC的设计师们用业余时间义务进行包装设计,以及借助腾讯的网络力量进行推广销售。销售过程中所获得的利润,原数交还到当地村民手中。在这一来一往的过程中,也教会他们如何与“山外人”打交道和互联网的操作经验。实现“授人以渔”的公益帮扶目的。

近期,腾讯公益基金会联合采购部、CDC共同发起了开发系列公益礼品项目 – 腾讯心益。心益,取“心意”同音。代表该品牌下的礼品体现了腾讯赠予收礼人的一份心意,同时传达腾讯对公益事业的支持。为了宣传公益理念,体现腾讯的企业社会责任,丰富公司礼品品类,在「腾讯心益」品牌下,我们将会推出一系列的公益礼品作为公司级礼品。

你有更好的点子,或是参与过类似的帮扶工作吗?请不吝赐教,让我们一起把传统文化和设计价值做的更好!

公平贸易正面图2000X2500 1127公平贸易侧面图2300X2500

设计是一种服务 Design • Serivce

“一起捐”

互联网众筹的合作模式,让我们有了更多创新和设计的可能性。驾着互联网社交强需求的马车,我们在尝试的创新型公益在线捐赠产品——通过个人(尤其是公众人物)和企业自身的影响力,以及微信社交关系链而实现的公益项目的众筹。

我们寄希望于加深大众与公益项目之间的信任连接,提升公益劝募及传播的效率和效果。通过前期上线后的观察,“一起捐”对于突发公益事件的善款募集时间是以往传统公益募集的四分之一。同时也受到公益界人士的肯定和支持,被形容为“公益在移动互联网时代的新创举”。多家机构发表针对“一起捐”特性的专项研讨文章,带动公益行业出现了一轮拥抱移动互联网创新公益的新浪潮。

遇到需要公益帮助的紧急事件了吗?记得试试“一起捐”哦!

呃呃呃一起捐2300X2000

在CDC,设计是我们团队长期以来坚持并倡导的理念和精神:为多数人设计,为有需要的人设计。

深圳会展中心9号馆 C3展台,欢迎来访。一起聊聊你知道的连接问题和故事吧~ ╮(*´◡`*)╭

时间:2014年11月29日-12月2日

 

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

2014“UXDC年度峰会”暨“香港设计营商周”高峰论坛报名中

由UXDC和BODW联合主办的高峰论坛将安排在2014第七届中国(深圳)国际工业设计节的第2天,即2014年12月3日9:30-17:00,在深圳宝安区新安四路宝立方展览中心举行。

此次论坛我们邀请了来自美国、德国、意大利、新加坡和香港的不同行业知名设计专家分享他们所在行业的关于跨界、关于体验、关于设计的心得与经验。我们可以看到欧洲和亚洲设计界在体验设计上的新努力方向与流行趋势,欢迎报名参加!

第七届中国(深圳)国际工业设计节主页:http://shijue.me/topic/design-connection

 

利志荣

演讲嘉宾介绍:利志荣
设计工作室Milk Design创始人,曾参与著名品牌欧莱雅、花王化妆品、Habitat家具等的设计
演讲主题:食物、连接;空中餐具的设计之旅。

 

Charles Austen Angell

演讲嘉宾介绍:Charles Austen Angell
美国工业设计师协会(IDSA)主席

 

Guenter Wissmann

演讲嘉宾介绍:Guenter Wissmann
德国著名Indeed设计公司设计总监
演讲主题:可穿戴产品如何改变我们的生活

 

Ban Yinh Jheow

演讲嘉宾介绍:Ban Yinh Jheow
新加坡著名玩具公司STIKFAS研究和创新总监
演讲主题:创建创新文化的未来

 

Lukasz Bertoli

演讲嘉宾介绍:Lukasz Bertoli
EMO Design设计总监和执行合作人
演讲主题:工业设计打造品牌信仰

 

李勇

演讲嘉宾介绍:李勇
清华大学博士后
腾讯T4技术专家
数据平台部精准推荐中心总监
演讲主题:腾讯大数据介绍

曲佳

演讲嘉宾介绍:曲佳
百度高级研究&设计经理
演讲主题:秩序感与地图的体验设计

Lu_Chaz-08

演讲嘉宾介绍:吕奇晃

IDEO上海办事处设计主管
专注于用户体验与交互设计
演讲主题:以人为本:为数据注入灵魂

孙耀先

演讲嘉宾介绍:孙耀先
香港中文大学创业研究中心项目总监
香港中文大学商学院客座助理教授、伍宜孙书院创意实验室主任
《志在创业——设计师创业8堂必修课》作者
《The Heart’s Way——Design with Empathy Through Creative Thinking》共同作者
演讲主题:创意与设计教育的未来

唐沐

演讲嘉宾介绍:唐沐
小米科技用户体验总监
小米路由器负责人
演讲主题:智能家庭用户体验

12月3日当天活动费用:UXDC会员500元,非会员700元
开户行:广发银行益田支行
账号:1020-1551-6010-0087-73
报名联系人:杨涛 15920061229 (请注明公司名字、参会人、联系电话、邮箱)

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

【设计经验传承】图标设计初阶要先型

UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段–初阶与高阶,这样分是为了有步骤性的学习和进阶的加强,当然,能人的话一步到位,对于新人来讲会较难,需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言,但是我可以分享一些实实在在的基础方法,也是这几年会给带的学生反复必讲的入门辅导,有自己成熟方法表达的设计师可忽略这里,这里先说初阶的设计关键要点。

目录:

  1. 一. 概念类别

  2. 二. 设计技法要点

  3. 三. 系列成型图标

 ———————————————————————————————

【一】概念类别

扁平化图标大部分无非就是剪影表现,而这里为什么重点是讲图标的形状设计,而非色彩,因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力,好比建筑造型与装修的关系,而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种:面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型,线与面之间的独立与结合的变化。

  • l 简化的微写实图标

这类通常是彩色一体表现,造型和组合上较写实,不是纯剪影,是写实过渡来的简化,又接近剪影,扁平简化设计,这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析),大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多,也更加容易塑造风格,更多是在色彩上有得发挥和考究,用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达,叫所谓的“低面建模“,感兴趣的去搜一下。

上面提到的元素组合,比如下图这个图标目前是2个元素–信封加信纸,如果还要再加什么功能状态示意,最多在右上角加个很小的消息提醒。因为元素越多越复杂,所表达的含义也就越多,同时也会影响造型的调动。不管多少个元素总有一个最重要的对象,其他为辅助图形,在塑形大小复杂度上有区别。

1.1本文半原创图例

1.1本文半原创图例

l  剪影的正负形图标

这类通常是单色表现,当然也有综合彩色的。其更加简洁抽象, 言简意赅,高度提炼精华,讲究表象意境,具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表,注意,没把握好就会变得很“空虚”,把握好了就是时尚的feel啦~

负形图标是以线绘制的图形,高度的轮廓概括,就跟画骨骼一样的要求精准到位,也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格,如果画不好就很容易俗气和简陋。

正形图标是以面绘制的图形,也有和线综合表现情况,自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换,手机tab上最常见,如ios7。

优点:简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达,这里指的范围是互联网上的全新应用);具有设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。

2

1.2本文原创图例

1.2本文原创图例

图标为上传到云端的之意,这里的主对象是云,所以箭头和云的比例是不同的,上传箭头是辅助图形。了解界定多元素之间的主次关系,就能够把握一个整体的造型走向。典型的基础表现就是上面两种,然后在实际绘制中根据自己的喜好和设计来进行融合,可以得出更加丰富的表现。

【二】设计技法要点

1、关键节点绘制法

拟物化设计就是尽可能的绘制繁琐细节,追求丰富和相似度。而剪影图标则是相反,以简练为绘制手段。但是细节就没有吗,不是的,而是更加谨慎认真的注重每一笔,且越来越优雅。这里举例剪影图标绘制方法技巧,3步骤可以搞定,看似又简单又难,简单的是只是绘制参照物轮廓,保留基础识别性,步骤很少;难的是这调整的过程与产品环境的融合性,易用性,还有你自己的创意想法。说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点,雏形出来后再根据想法调整。

  • l 提炼精华勾勒轮廓

通常在绘制已有参照物的基础上去设计一个图标,可以根据你喜欢的造型参照物去进行分析,先抓取到参照物的关键节点,几何绘制出来一个相似的基本图形。

  • l 调整线锋优雅得体

基础雏形出来后就开始加入自己的想法调整线锋,线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了,不断调整对比,挑选出一个最优再进行下一步。

  • l 增特有细节出风格

最后一步的塑形,就是画龙点睛!造型的特点就在这一步去完成。

2.1 本文原创图例

2.1 本文原创图例

对于新老设计师来说,这样的方法都是比较可取好用的,交互设计师也可以这样快速入门哦亲!尤其是第一步骤,能否非常快速的出雏形。下面是其他案例的设计方法欣赏,跟我上面总结的一样道理。

2.2图例来源于Digial Art

2.2图例来源于Digial Art

2.3图例来源于iconwerk

2.3图例来源于iconwerk

2、精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事,但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的,尽可能的往精美优雅的方向努力吧骚年~

  • l 犀利清晰

需要锻炼厉害的眼睛,使出你的火眼金星捕捉每个像素之差,像素满格才能清晰的呈现,细分出来通常会遇到以下3种情况,这也是最影响图标基本质量的问题点。

1)    轮廓发虚

图标一定要用矢量绘制,但是新手很容易犯的第一个错误就是图标模糊的问题,也不清楚为何会这样。其实就是矢量边缘模糊产生的问题,也是个人绘制的不良习惯造成。避免这个问题,必须在100%画布上绘制图形,而且不能直接推动图标放大缩小,即使这样改变大小了也要放大画布调整路径的锚点,反复查看及校正是否对齐1px网格,而不是0.1~0.9px,正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2.4本文原创图例

2.4本文原创图例

2)    斜形发虚

斜线也是会有模糊与精致之分的,不仔细对比其实是比较难看到问题,可能很多人都会碰到图形进行倾斜效果时是有锯齿的,那就是角度的处理问题了,自己进行多角度对比下试试,会发现哪一个角度最清晰。也可以将图层进行双层叠加,会非常犀利哦~

2.5本文原创图例

2.5本文原创图例

3)    像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的,下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制,如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。

2.6本文原创图例

2.6本文原创图例

总结一下上面的处理方法,坚持最少发虚原则:

2.7本文原创图例

2.7本文原创图例

  • l 比例协调

图形内部结构要注意元素构成之间的比例,有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例,打好内部统一结构线进行图形绘制和比例分配。

2.8来自苹果图标及来自Seevi Kargwal图例

2.8来自苹果图标及来自Seevi Kargwal图例

如果头眼昏花嫌麻烦,也可靠经验感觉快速完成一个具有平衡感的图标。

2.9本文原创图例

2.9本文原创图例

  • l 视差平衡

同一个尺寸规格,但根据不同形状的图标,会导致面积占比引起的视差大小不同,但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制,按道理这好像是准确的,但由于人的肉眼会有视差问题,所以做的设计就要暂时抛开科学,以人的真实情况去判断再调整。

2.10本文原创图例

2.10本文原创图例

【三】系列成型图标

能够熟悉掌握完以上基础要素,恭喜你可以大胆的去创造系列图标了,当个数图标设计确定好后,接力的图标必须延展其风格设定:造型规则、样式、细节特征等要素统一设计–繁衍具视觉与内在含义属性的图标

3.1图例来源于iconwerk

3.1图例来源于iconwerk

Ps:我非常欣赏iconwerk的图标设计,只因我在5年前发现他的剪影图标作品一直到现在都是那么爱。传送门:http://iconwerk.de/iconwerk10/index.html

3.2本文原创图例

3.2本文原创图例

3.3图例来源于Yorlmar Campos

3.3图例来源于Yorlmar Campos

3.4图例忘记来源于哪位设计师了

3.4图例忘记来源于哪位设计师了

3.5图例来源于Jee

3.5图例来源于Jee

【结尾】

值得注意的是在简约与装饰之间的平衡要靠自己的把握,正是这个把握的度是考验设计师是否成熟的表现。进阶的优秀图标是能够平衡于识别性、简约与装饰之间的琢磨,具有功能又具情感的。希望本文对新同学有帮助,欢迎一起探讨和补充。

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

google hosts 持续更新地址

2014年10月16日 没有评论
分类: Google 标签:

Pad类视频应用设计起底

2014年7月3日 没有评论

一、   启动画面一览  

1、启动画面设计的几个要素

     用户对应用的首次印象都来自启动画面,一个好的启动画面可以让应用填色不少,精心设计的启动画面也是一次抓住用户的重要手段。纵观爱奇艺、风行、迅雷的HD版启动画面都是很简洁的LOGO展示,主要元素有LOGO、中文名、广告语和版本号,顺便来看看各自广告语,爱奇艺的“悦享品质”、风行的“看最好的电影”、迅雷的“高清畅享、娱乐时尚”,从简单的语句准确的说出应用是干什么的、主要定位是什么,不是一件容易的事情,个人感觉这三家做得不错,起码看出了爱奇艺的“高大上”和风行的屌丝。

爱奇艺启动画面

 

风行启动画面

 

迅雷看看启动画面

 

 

 

2、高价值的入口必然是商业广告的必争之地

   看完简洁的启动画面,再看看下面几个你会有怎么样的感觉?

 

PPTV启动画面

PPTV的HD版启动画面,直接是跳出自家的多频互动的广告,但是不是很硬的硬广,看上去象是多屏互动功能的使用说明,总觉得要多点一次“立即体验”是个很烦的事情,估计让用户确认后才进入应用的方式可能不是设计者的初衷,停留的时间才有广告价值,但是确实让用户不爽了。

搜狐视频启动广告

搜狐视频启动画面(漫画一)

搜狐视频启动画面(漫画二)

搜狐视频启动画面(漫画三)

搜狐视频启动画面(落款)

看完PPTV再看下面的搜狐视频HD版本的启动画面就比较讨巧,启动画面闪现后接着的是一段漫画,最后出现的是应用的主题广告语“此刻,为了更好看……,全新视觉用心改变”,和PPTV对比,大家都是广告还是搜狐的让人舒服点,呼吁商家请用软广,越软越好。(谁能看出下面这幅图片是啥广告?截图自电影《天下无贼》)

答案是“七匹狼”

3、启动画面的“温馨提示”和“版本升级”一个都不能少,因为大家都在做

百度视频启动升级提示

搜狐视频流量使用提示

 

二、   首页布局一览

先看图↓

爱奇艺首页

PPTV首页

迅雷看看首页

腾讯视频首页

搜狐视频首页

从整体布局来看出现了难得的天下一统,都是左右布局,左边导航右边内容展示,顶部放功能模块,而且这次大家都放弃了对竖屏的支持,彻底的只支持横屏操作了,这样确实把左右手的距离拉开了,也减少了出现误操作的概率,就是文字输入的时候就麻烦了,只能“一指禅”。

三、   播放器一览

各家的播放器大同小异,支持左右、上下滑动的手势操作,功能区域定位在右边(符合国人习惯);随着社交网络的深入人心,各大播放器也加入了社交分享功能;也有围绕大数据而出的“猜我喜欢”的功能,实话实说现在的猜我喜欢确实不是太令人满意,不知道什么时候基于视频播放的数据分析能够达到“今日头条”的高度,还是“今日头条”推荐的数据符合度最高。

PPTV播放器

搜狐视频播放器

爱奇艺播放器

爱奇艺播放器

 

 

 

四、   直播系界面一览(只发图不点评)

PPTV直播板块

PPTV直播板块

腾讯视频电视台板块

搜狐视频直播板块

分类: 未分类 标签:

网易云音乐iPad V1.0 设计总结

2014年7月3日 没有评论

一切从心开始

当网易云音乐iphone平台上线的那一刻开始,项目组就不断地收到了很多用户希望iPad平台早日上线的呼声。这种期待给了我们一种无形的力量,也让我们更加坚信我们不能随随便便地把iPhone的所有设计照抄照搬,简简单单做个适配而已,哪怕它是一个用户为数不多的平台,我们也要从“心”开始,给喜欢音乐的朋友一个有诚意的专属于iPad平台的音乐产品。

一切为iPad用户量身定做

从我们开始接到设计iPad平台任务时候,我们就一直在思考iPad用户听音乐的行为和习惯。我们用户通过问卷调查和用户访谈去探究用户使用iPad听音乐的习惯和特征。

相较于手机端,iPad平台使用场景比较集中,在移动场景和固定场景下用户表现的行为特征也较为突出。同时iPad用户具有一心二用的特性,往往是一边在“玩游戏”,“看小说”,“看新闻”时,一边听音乐。这要求。我们在设计上不能过于繁琐,层级不能过深。一切以方便用户便捷操作为核心进行整个版本的设计。

(1)化繁为简——信息结构扁平化-三层结构

在云音乐的移动端,由于屏幕尺寸原因,采用了常规的“递进式”层层深入的界面信息架构,常常会因层级太深,而使用户需要一层一层跳转界面来达到用户的需求。在前期对于iPad平台上面应用调研的时候,很多产品还是沿袭手机端的架构设计方式,并没有很好利用iPad这个平台的特性,于是针对云音乐的信息架构进行很多探索性的尝试,最终采用了“三层结构”模式,使庞大的产品系统进行扁平化设计,化繁为简,去满足iPad用户的使用习惯。

(2)便捷和平实的操作手势

结合简洁的三层结构模式的运用,使用手势也是iPad用户不可以缺少的快捷操作。云音乐是一个功能丰富的音乐产品,界面跳转逻辑较为复杂,返回操作频繁。但是在网易云音乐ipad平台上,几乎没有任何返回button。仅凭手势就可以游走于三层结构的所有界面。同时对于音乐切歌,MV的快进快退都做了手势的设计,满足iPad用户快捷操作的需求。

(3)在功能强大与易用中求取平衡

网易云音乐是一个功能丰富的音乐产品,在满足音乐用户多元化需求的同时,我们对用户操作体验易用性也从来没有放松。尤其对iPad较为大尺寸的屏幕,如何合理的运用是设计师不得不思考的问题。比如我们的播放页大概有18个操作button。如何针对操作的分类与整理是让设计师较为头疼的事情。设计师们一遍一遍尝试和修改。在复杂中去探索简约之道,使在功能强大与易用中求取平衡。

(4)视觉风格

网易云音乐在总体视觉风格上进行了大胆的改变及创新。从原来深沉的的红黑主色调变成了如今的素雅红白主色调,给人以清新淡雅的感觉。在设计上也趋于当今最流行的扁平化的风格设计,在每个界面上都精雕玉琢,界面简洁又不失个性与内涵。

不断地验证和打磨设计

从产品初期的信息架构,到交互草稿,初稿,可操作的原型,我们几乎时时刻刻都在讨论的用户的操作逻辑,界面的元素摆放,针对平台特性的优化。由于iPadV1.0是一个全功能甚至比现有移动平台功能还多的特殊平台,在面对全新且功能众多,逻辑复杂的,设计师为了完整和准确地表述自己的设计想法。用纸面原型表现界面之间的逻辑和跳转关系,为沟通带了极大的便捷。

为了较真实地反应出我们在设计中所存在的问题,我们通过制作高保真可操作的原型(几乎试遍了所有在iPad上的原型工具,最后用Justinmind来模拟最终效果),很好地还原了我们预期的测试效果,将整个应用的信息架构,界面切换和交互行为都完整呈现在用户面前。

在开发过程中,设计师为了能够捕捉每一个细节,用动画demo来模拟响应时间和动效的流畅性。对每个细节做到斤斤计较。同时便于开发快速理解设计师的原意。很大程度上提高了产品的开发效率。

用户反馈与体验

网易云音乐iPad平台自5月22日正式上架后,得到了用户的肯定和支持,但是在性能方面和一些细节方面还不够完善。希望我们的努力和诚意,能够换来更多喜欢音乐的朋友肯定。在未来的日子里,我们将不断地为大家带来更多的惊喜和优质的产品体验。

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