轩枫阁

前言

顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情：

调试界面的问题
使用断点调试JavaScript代码
优化你的代码

打开开发者工具，你只需要在页面的任意位置右击鼠标，选择检查元素或从右上角菜单中选择“工具>更多工具>开发者工具“。

下面示例演示的都是在Google Chrome的Canary浏览器下做的演示。（图片高能预警， 101M） 查看全文

2015/11 21 周六

前言

由于 H5 页面适用于移动网络传输，跨终端，且方便快速迭代，此外在 App 应用里加入h5的混合开发越来越普遍，如微信里面即将要上线的 H5 微信运动等。

Norman 的认知处理的 3 个层次：本能层、行为层、反思层。相当于对事物或信息的最初认知，之后才会产生行为，这时候才要更多地考虑物理操作的负荷，即手指的操作频次，不同输入模式的切换。所以将本能层放到了首位吧，否则即使操作再简单，认知不正确或不清楚，直接会影响用户对产品的整体验。就像我们在考虑如何扩大功能的时候，要兼顾到如何简化界面。但是过度重视本能设计而虚弱行为设计（沉浸在产品中以完成日常任务和活动等的功能设计），炫酷的效果也只能是昙花一现？而且在实现 H5 页面的时候还要考虑各终端性能，屏幕大小等因素，所以用渐进式的方式来权衡本能设计与行为设计。查看全文

2015/11 21 周六

高清ICON SVG解决方案

前言

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。

1.多倍图片

目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可能会直接做3倍的图片，这样就可以同时兼容devicePixelRatio = 2 ，但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片，所以为了提升用户体验，一般我们会分开做几套图片，根据用用户的devicePixelRatio判断让他们加载对应的图片。

2.iconfont字体图标

在很多国外的响应式站点里一般会采用iconfont，因为可以直接通过font-size和color属性来控制icon的大小和颜色，非常方便，而且由于iconfont本身就是字体文件，会矢量适配各种不同devicePixelRatio，但是在PC上当图标小于等于16px时，或者复杂度高的图标会出现比较严重锯齿，图标无法展示清晰，特别在chrome下的表现尤为严重。

正因为如此这个技术在推进过程中遇到许多困难，因为在很多场景下图标确实会较小甚至小于16px，而且有些16px的图标如果复杂度较高，iconfont实现出来的icon会经常出现看不清的情况，而且国内PC用户是占最多的，所以iconfont的这种表现效果很多用户和设计师无法接受。查看全文

2015/11 21 周六