论material design网格规范设计和前端手机rem尺寸如何配合

因为工作原因,我长久没有接触关于CSS工作了,最近拾起老本行,但进入的是另外一个圈子——手机端。
之前在做手机端的时候很简单,利用如下代码,直接写320基准的大小即可,当retina屏上市后,就利用图片宽高除以二(因为设计稿是640 @2x的规格)和background-size来缩小图片达到在retina屏中不会模糊的效果。

1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"></meta>

以上是在iphone4盛行的年代的处理办法。
但现如今各种分辨率层出不穷,外加各种三栏不等分布局的情况,导致适配成了问题。
为了精确还原设计稿,前端们采用了rem来作为宽高的单位。
我们来看看rem的官方解释:
font size of the root element
也就是说是对于根元素(html元素)的相对比例,这样,前端们就可以通过页面宽度来动态修改html的font-size,去控制整个页面的缩放了。看起来很棒的样子。
继续阅读 »

line-height:2和line-height:2em的区别,它们是有区别的

一直有人搞不明白line-height:2和line-height:2em的区别,因为他们不知道或者还没遇到过这类的问题或者差异。
line-height:2是2倍的意思,如果内部有不同大小文字的情况下,以最大文字为倍数。
line-height:2em也是2倍文字大小的意思,但如果内部有大文字,它还是会以父容器的大小来计算。
请看如下代码:

提示:你可以先修改部分代码再运行。

所以这里要针对情况来处理,我个人建议使用2,而不是2em。

快速简约icon设计

耗时20分钟,意义么,算是啄米鸟的”米”吧。

计算列表列宽和间距的小工具

我们在设计页面时总是会碰到一个通栏或者一个侧栏需要放一排头像或者照片的情况,例如:

我总是会拿着计算器算着宽度多少合适,于是我写了一个脚本,只要指定总宽和个数,就能列出所有可能性。

UI没画,样式没写,看起来有点渣,不过还是很好用的。
地址:http://blog.dmtuan.com/demo/space/space.html

windows自带照片查看器偏色问题

有同学可能会碰到WIN7自带照片查看器看自己的设计稿时,灰色会泛黄,用其他看图软件却是正常的。
经过我多方研究才发现其实这是错觉导致的。
win7自带照片查看器拥有默认背景颜色是#EEF3FA,就是淡蓝色,那么当使用该浏览器查看照片时,人眼会自然人为该颜色为白色,那么对于淡灰色来说人眼会误认为是黄色,有些人感觉像是红色。
举个例子:

上图所示,中间的区域色值其实是#f2f2f2,常用的灰色背景,然而在#EEF3FA背景下人眼会觉得该区域是黄色的。
我们再修改下:

我只是把蓝色背景简单改成白色,大家就可以看出有明显区别。
这就是为什么在照片查看器里看一些设计稿特别脏的原因,而网页设计稿其实是在浏览器中展示,并不会出现该情况。
所以请大家放弃windows自带照片查看器,改用ADCSEEQQ影像美图看看之类的软件。而当设计电子文档时,尽量减少使用淡灰,或者加上一个边框。

fireworks画的圆不圆解决办法

FW用圆型工具画完圆后,会发现四个锚点太过平了,导致看起来跟圆角矩形似地。
解决办法是ctrl+shift+t缩放,值为99.9%。

fireworks突破画布6000px限制

FW限制了画布大小6000px,但一些门户页面超过6000px很正常,如何突破限制呢。
在C:\Users\Administrator(用户名)\AppData\Roaming\Adobe\Fireworks CS6(FW版本)\Simplified Chinese(语言)\Fireworks CS6 Preferences.txt
这个文件中搜索
MaxDocSizeInPixels
在下面的integer中修改数值,如:
16000
于是就可以创建16000以下的画布了。

PS:别开着FW改文件,会还原的。

纸篓原则,用户调研的重要性。


首先讲一个案例,但它可能有点恶俗:
大家都上过厕所,那么在蹲大号结束时,我们需要擦屁股,然后把污纸扔进纸篓里。
问题来了,这个纸篓应该放在用户的左侧还是右侧呢,大部分人都是用右手擦屁股的(左撇子少数),所以纸篓放在右侧会好点,放在左侧会比较难丢,可能还要把污纸交到左手,然后再扔进去。
以上是正常人的理解范围,我也是右撇子,所以我希望纸篓放在我的右侧。
但这里许多人会忽略了一个问题:用户调研。
为什么要用户调研,其中很大一部分需求就是考察使用我产品的用户群体习性。
印度人的习俗是左手擦屁股,右手吃饭,如果我的产品用户群体是印度人多数,那么显然这个纸篓应该放在左侧更好。
往往很多人会忽略了这个,觉得想当然地去解决体验问题。
你当然可以放两个纸篓一边一个,不过这前提是在“充足的资金”下,视觉不会跑出来说这里会让用户选择思考之类。
所以我们之前在设计产品的时候,总是提到:别人如何设计,我们就如何设计。
这句话其实还是很有哲理的,用户体验其实就是按照大部分用户的惯性思维走,这块要创新是坎坷而且要胆量的,很多同学总是说看人家苹果做了体验创新什么的,但自己一创新发现用户不适应又回归原始了。

fireworks cs6使用旧色彩样本

fireworks cs6的新色彩样本用起来不舒服,那如何还原之前的版本呢。
查了很多地方都没有解决办法,于是自己想了一个办法,只需用fireworks cs5以下的色彩样本导出,然后到cs6中添加即可。

下载地址:fireworkscs5color.ase

网站icon的CSS维护

图标是各个网站必不可少的东西,一个大型网站可能会有上百个图标,例如应用图标(相册/日志)、交互性图标(编辑/管理)、描述性图标(已关注/在线)等。
1.性能
为了减少http请求,那么我会把这些图标切入一张图片里做css sprites,而考虑到公用,我会把相同属性的icon归到一起,而不是跟其他标题背景等放在一起(这个具体后面会说)。
2.敏捷性
这里图标可能是在列表里,可能是独立存在,甚至可能在一片文章中:

面对这种情况那么最好用的当然是把图标独立一个img,这样在任何地方都可以调用。
但我上面提到了,为了性能着想,我们需要把图标写入一张图里。
以前我们看到上面第一种状态的时候,第一反应就是多个li,然后给li设置背景,padding-left加左侧空隙。
显然如果这样做的话后面两种情况就无法兼顾了。
我的做法是把每个ico放入一个容器,一个空白透明的png-8,利用css sprites设置这个png-8的背景。这样的做法好处是图标依然具有img的特性,可inline入文章中,可独立,而维护的时候可以把图标看成一个img来处理,不同的是src是一样的,class不同而已。
当然也可以建立一个span,设置inline-block来做,这样也可以减少一个gif的请求,不过span用得太多了,我总是怕被继承属性覆盖了,那就糟糕了。
3.公用
这里一些图标里可能是全站的,例如描述性中的已关注、在线这些图标可能会在任何用户列表中,比如一个专题里。
继续阅读 »