d33455999a62e992386a1f2788d5fbea421439f7258f9-cvCfdn_fw658

8px那篇引起很多回应,我想这要从几个角度来解释。UI 口中的「糊」和 RD 眼里的「糊」是有差别的。图片会糊的原因分成几种:

1. 小图放大会糊。< 这是废话,BJ4。
2. 大图缩小会糊。< 一定有人想问为什么。
3. 就算是向量档,只要像素没有对齐一样会糊。
4. PX 非整数。< Pixel 没有0.x 这种数值。

大图缩小会糊

20140221-0

这只老鼠的照片,缩小后屁股那边的毛色就糊成一团了。这就是为什么 Desktop icon 在制作上会建议不要放文字、图片越简单干净越好。512px 的精致设计到了72px 就什么也不剩了。

clip_image0013

比如这张唱片好了,非常漂亮,很多的细节,缩小之后文字上的纹路糊了、左下方的字也看不清楚,背景的人像硬币也只剩色块,细节通通不见了。这也是一种模糊的方式。

画向量会糊

我的 BLOG 读者应该是 RD 人数比较多,所以这部份相信你们很少接触。(连很多 UI 都没留意到这个问题了)。即使是用向量制图还是会糊的!举个例子:

clip_image0026

可以看到左边那个矩型好像有长毛边、右边那个边缘锐利。

clip_image0032

左右两个矩形其实是同一个,只差在有没有对齐像素网格线而已。

clip_image0041

要保持向量图的锐利边缘,可以这样设定:Photoshop > 偏好设定 > 接口。

clip_image0051

只要是形状图层,记得一定要把对齐边缘勾起来。就算是从 illustrator 贴过来的也要勾,会明显看到边缘变干净了。

这种糊在画大图的时候不怎么明显,一切图下去就容易在小尺寸的 icon 上出现问题。所以做小图放大最安全,但做大图再缩小画面精致,看要怎么取舍了。

Web 上要用 8px 进行设计的条件

8px 的文章很多人问我为什么不是 Web,8px 设计法是为了解决「图片会糊」的问题,基于 web、8px 这两点为前提做出说明。

如果在 640px 屏幕上变动宽度的方式放上 4px 的图,他需要占画面宽的 0.625%,所以在 240px 屏幕的情况下该图片的宽度就会变成是 1.5px。但 1.5px 不存在,所以表现出来一定是 1px 或 2px,造成模糊。这就是 8px 设计想要避免的状况。

但在 8px 设计法在 reponsive design 实务上会遇到困难。在 web 上的图片有两种型式,固定呎吋和变动呎吋。固定呎吋就不用提了,屏幕呎吋再怎么变他就是这么大。但变动呎吋是跟着父元素的大小变化,如果说这其中参杂着固定呎吋的设定就会产生问题。

举例来说,在 640px 的 HTML 里放一个 div,padding 设左右 8px,里面再放一个 div,并在此 div 内放上一张宽 100% 的图片。所以该图片在 640px 下的宽度会是 624px,但在 HTML 宽度变成 240px 的情况下时就会变成 224px。从 8px 设计的概念来看,624px 是 8px (640px 的基数) 的倍数没错,但 224px 并不是 3px (240px 的基数) 的倍数,这就违反了该设计的原则了。

简单说,在 responsive web 上要用 8px 为单位做图不是不行。但条件是所有的 margin, border, padding, width, height 全都得用 % 去设,而且 % 也得算的刚好,不然也会破功。

(此部份感谢老公说明:8px 用在 Web 设计上…何苦呢…)

App

iOS 注意双数问题、注意像素对齐,基本上不太会糊。Android 比较麻烦,切图前请向你家 RD 询问如何切图及标示文件怎么标,做9-patch的话、底图和文字是不是要分开切?图片是要用固定 px 还是算等份之类通通问清楚做笔记。注意因应屏幕尺寸产出的各种切图清晰度,或干脆产出 3 套不同尺寸的 psd 档、各别调整后再切图。

转自:优设

原文地址:blog.akanelee
作者:Akanelee

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.xueui.cn  海量APP截图,让你灵感爆发!

qrcode_for_gh_672cf3f94568_25841131QQQUN

转载请注明:学UI网 » 图片为什么会模糊?

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn”  海量APP截图,让你灵感爆发!国内最好的APP截图站。

国内最棒的UI设计导航站” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 给学UI网打气,加油  猛点这里 >>

 
你可能喜欢的:
2017 UI流行趋势 - 色彩探索2017 UI流行趋势 – 色彩探索
优化夜间阅读体验—夜间模式设计通用方法优化夜间阅读体验—夜间模式设计通用方法
何为结构化设计思维?何为结构化设计思维?
充分运用用户研究,只需要5个步骤充分运用用户研究,只需要5个步骤
面对大型项目,设计师该做些什么面对大型项目,设计师该做些什么
新手福利!超全面的UI设计切图规范新手福利!超全面的UI设计切图规范
设计师在看电影海报时,都在研究些什么?设计师在看电影海报时,都在研究些什么?
如何打造有温度的H5动画如何打造有温度的H5动画
QQ Mac版 Touch Bar功能设计QQ Mac版 Touch Bar功能设计
APP中图标设计的小技巧APP中图标设计的小技巧
  1. 其实我也遇到个像素的问题,我要做主题,分别做两套,两套的尺寸分别为:106*106和144*144,那么我是不是应该新建一个500*500的,然后绘制好ICON后,再用图像-图像大小,这个里面设置成我前面说的两套尺寸? 然后这样一来,我ICON缩小后,基本成为一块色块了,什么投影啊之类的,都基本看不清了!请问如果做,非常感谢!

  2. 就是说最好都从小做到大?但是如果用了素材这怎么破?记得之前看虎哥你做的爱情公寓的那个图标当时好像建议找素材往大的套。。。。

  3. 在 640px 的 HTML 里放一个 div,padding 设左右 8px,里面再放一个 div,并在此 div 内放上一张宽 100% 的图片。该图片在 640px 下的宽度会是 624px但在 HTML 宽度变成 240px 的情况下时就会变成 224px。从 8px 设计的概念来看,624px 是 8px (640px 的基数) 的倍数没错,但 224px 并不是 3px (240px 的基数) 的倍数,这就违反了该设计的原则了。224 也是8的倍数,怎么突然之间跑出来 一个 3px的倍数,完全看不懂的节奏有木有啊 ,请虎哥给答下疑啊!谢谢!

  4. 想请问一下,假如我要做一个硬币大小的图标,要放在600X1300px里面(尺寸打比方),画布是建硬币大小,还是600X1300PX。??