找回密码
 注册

QQ登录

只需一步,快速开始

查看: 31996|回复: 120

[观点] 关于Web设计精确点滴

  [复制链接]
发表于 2011-11-9 01:11:25 | 显示全部楼层 |阅读模式
本帖最后由 风流阿k 于 2011-11-9 02:31 编辑

这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度。

1)调整后的毛边
当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:
210GI559-1.jpg

也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。
210GI257-2.jpg

210GM5F-3.jpg

210GJB2-5.jpg

210GGW2-4.jpg



放大2倍后对比

210GJ627-6.jpg
210GH155-7.jpg

另外不要试者调整带有边框的图片,最好是自己绘制,这个面两张对比图不用放大就能全面看到问题:

210GL210-8.jpg

2)关于边框和背景
有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:
文字边框背景:
210GH4O-9.jpg

因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。
210GL450-10.jpg
210GLA4-11.jpg
白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。

210GKT5-12.jpg

在深色背景下,才使用加亮边框。
210GL3T-13.jpg

关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:
210GK057-14.jpg

如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:

210GL547-15.jpg

上图中间一排图片边框的色彩就不协调了,如果在图片是不确定的情况下,加边框时最好是给图片与边框之间加上边框距。

210GLa8-16.jpg

在看看在深色背景下的效果,深色背景下可以有两种方案,一是去掉外框,以白色间距边框,二是加亮外框,留出与背景相同颜色的间距。如下图:

210GLR9-17.jpg


3)关于边距与对齐
设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:

210GM045-18.jpg
210GJ425-21.jpg
210GJ5F-19.jpg

在看下面的例子:
210GIR5-22.jpg

210GGa2-23.jpg

在来看一组给图片加框的效果:
210GL543-24.jpg

在来看图列间距:
下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。

210GH945-25.jpg


210GK201-26.jpg


调整过后如下图:

210GK223-27.jpg


4)关于阴影与质感:
在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:
210GG2Z-28.jpg

阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:
210GL322-29.jpg

理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:
210GMU6-32.jpg
上图Button和价格区块的投影没有质量,修改后如下图:
210GJ2b-31.jpg


其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。
210GK5b-30.jpg





关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。
210GKb3-0.jpg









发表于 2011-11-9 09:59:13 | 显示全部楼层
太强大了,受益中。。。。文章中说到细节也是俺经常范的毛病。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:28:46 | 显示全部楼层
灰常感谢楼主,学习了···
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:32:25 | 显示全部楼层
辛亏平时我都很严谨,不过这么严谨的后果是作图要花费很长时间。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:35:19 | 显示全部楼层
本帖最后由 inbluehome 于 2011-11-9 10:35 编辑

不拘小细节必败在界面上。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:37:31 | 显示全部楼层
说到点子上去了
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:38:27 | 显示全部楼层
我也一直很不仔细。。。。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 10:40:24 | 显示全部楼层
归纳的很详细
回复 支持 反对

使用道具 举报

发表于 2011-11-9 11:24:52 | 显示全部楼层
提示: 该帖被管理员或版主屏蔽
回复 支持 反对

使用道具 举报

发表于 2011-11-9 11:27:48 | 显示全部楼层
很好的教程
回复 支持 反对

使用道具 举报

发表于 2011-11-9 12:23:51 | 显示全部楼层
不错,早前看过一遍,对于从一个阶段往上提升到另一个阶段是很不错的文章。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 13:50:32 | 显示全部楼层
文章写的不错
回复 支持 反对

使用道具 举报

发表于 2011-11-9 14:19:56 | 显示全部楼层
很是感慨啊
回复 支持 反对

使用道具 举报

发表于 2011-11-9 15:01:31 | 显示全部楼层
教程不错,但很多图片让在单位的我看的脸红心跳……
回复 支持 反对

使用道具 举报

发表于 2011-11-9 16:14:29 | 显示全部楼层
这个绝对是学习的一手资料.支持
回复 支持 反对

使用道具 举报

发表于 2011-11-9 16:42:32 | 显示全部楼层
本帖最后由 aoksc 于 2011-11-9 16:43 编辑

关于图片边框,我有话说。
如果描深色边框的话,混合模式我一般设置为“正片叠底”,色彩可以不用选那么深的,取个中间色就行。
这样的描边在亮的地方不会显得过重,在暗的地方也不会像翻出来似的。

个人经验,仅供参考。
回复 支持 反对

使用道具 举报

发表于 2011-11-9 17:03:59 | 显示全部楼层
细节决定成败 转给公司美工看看
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-9 17:43:08 | 显示全部楼层
aoksc 发表于 2011-11-9 16:42
关于图片边框,我有话说。
如果描深色边框的话,混合模式我一般设置为“正片叠底”,色彩可以不用选那么深 ...

支持经验分享!
回复 支持 反对

使用道具 举报

发表于 2011-11-10 11:43:34 | 显示全部楼层
总结得很好啊
回复 支持 反对

使用道具 举报

发表于 2011-11-10 12:36:51 | 显示全部楼层
太实用了,这样的东西,书本都没有的!!
回复 支持 反对

使用道具 举报

发表于 2011-11-10 14:24:00 | 显示全部楼层
明了,实用,学习了!
回复 支持 反对

使用道具 举报

发表于 2011-11-10 14:41:47 | 显示全部楼层
谢谢楼主,学习了···
回复 支持 反对

使用道具 举报

发表于 2011-11-10 22:50:40 | 显示全部楼层
细致又实用,好
回复 支持 反对

使用道具 举报

发表于 2011-11-11 10:10:10 | 显示全部楼层
经验之谈,细节是体力活。
回复 支持 反对

使用道具 举报

发表于 2011-11-11 14:08:25 | 显示全部楼层
于细微处见精神,很好很详细!
回复 支持 反对

使用道具 举报

发表于 2011-11-11 15:49:41 | 显示全部楼层
嗯,很好的贴子

做时只凭感觉;但从未总结过。楼主说的很到位,好东西。
回复 支持 反对

使用道具 举报

发表于 2011-11-11 15:55:12 | 显示全部楼层
不错,细节问题应该注意
回复 支持 反对

使用道具 举报

发表于 2011-11-11 15:57:09 | 显示全部楼层
不错,细节问题应该注意
回复 支持 反对

使用道具 举报

发表于 2011-11-17 14:14:42 | 显示全部楼层
好东西~ 多多益善呀~
回复 支持 反对

使用道具 举报

发表于 2011-11-17 16:56:31 | 显示全部楼层
非常感谢·····
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-6 05:01 , Processed in 0.083347 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表