- 浏览: 122499 次
- 性别:
- 来自: 上海
文章分类
最新评论
这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度。
1)调整后的毛边
当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:
当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:
也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。
放大2倍后对比
放大2倍后对比
另外不要试者调整带有边框的图片,最好是自己绘制,这个面两张对比图不用放大就能全面看到问题:
2)关于边框和背景
有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:
有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:
文字边框背景:
因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。
白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。
在深色背景下,才使用加亮边框。
关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:
如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:
上图中间一排图片边框的色彩就不协调了,如果在图片是不确定的情况下,加边框时最好是给图片与边框之间加上边框距。
在看看在深色背景下的效果,深色背景下可以有两种方案,一是去掉外框,以白色间距边框,二是加亮外框,留出与背景相同颜色的间距。如下图:
3)关于边距与对齐
设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:
设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:
下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。
调整之后如下图:
在看下面的例子:
上图中区块上下间距与左右间距不匀称,和前几的列子一样,文字与区块上下垂直间距不协调,下图是修正后的结果。
在来看一组给图片加框的效果:
在来看图列间距:
下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。
下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。
调整过后如下图:
4)关于阴影与质感:
在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:
在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:
阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:
理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:
上图Button和价格区块的投影没有质量,修改后如下图:
其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。
关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。
就说到这里了,没时间往下说了,我要整理东走了,上面都只是你可能不注意的小小细节问题,你注意到的我也不会说了
原文地址:http://www.zhouwenqi.com/blog/board_43.html
原文地址:http://www.zhouwenqi.com/blog/board_43.html
发表评论
-
什么是完美
2013-05-06 10:58 638什么是完美? 准确满足需求或适应情况需要;这意味着,无论怎 ... -
设计沟通的七条经验
2013-04-07 14:27 735经常有新入职的同学, ... -
Specializing in the design and development of online platforms and applications,
2013-01-17 15:45 809SITEINSPIRE a showcas ... -
字体设计是网页设计的根本
2012-08-07 09:37 656你已寻找这个问题多 ... -
[iA 旧文] 网页设计工作的 95% 在于字体排印
2012-08-07 09:36 659网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应 ... -
A/B测试得出的一些有意思的数据和小tips
2012-07-30 16:16 0原文:The Ultimate Guide To A ... -
分享"10个可用性guidelines"
2012-07-30 16:03 0原文在这儿,有兴趣的同学可以读读=) http://w ... -
伟大的交互界面都来自…… (转)
2012-07-30 15:27 664原文链接:http://apple4.us ... -
付款流程的11个最基本的guidelines
2012-07-30 15:19 703又是好文一篇,虽然说 ... -
Web可用性设计的247条指导方针
2012-07-30 15:13 874原文链接:http://www.userfocus.co ... -
卓越的Web软件具有下列品质
2012-07-24 11:35 599卓越的Web软件具有下列品质: ---- 确定产 ... -
Alibaba国际站首页改版小结
2012-07-18 12:40 553阿里巴巴国际站(Alibaba.com)是全球最大、最有影响力 ... -
逻辑路径与网格系统
2012-07-17 16:00 0栅格系统: 创建逻辑路径 除了要精确的遵从网格 ... -
用户体验的五层–概念篇
2012-07-16 15:06 745在找实习的过程中,算是有缘吧,交互设计走进了我的视野,不 ... -
美国广告设计实用教程--作品评价指南
2012-05-10 13:09 735最近在看High哥买的《美国广告设计实用教程》, 里面有 ... -
7个开发人员和设计师适用的WEB应用资源
2012-05-08 22:45 509对于开发人员和设计师来说,很多项目和设计都需要有前期的规 ... -
27个网页设计中色彩的使用
2012-05-08 22:38 653互联网上现在有着数不清的网站,公司的、个人的、政府的、公 ... -
30网页设计美丽纹理的启示
2012-05-08 22:37 563每个网站都会给人一种感觉。那种感觉可能是一见倾心,也可能 ... -
大多数用户既非新手,也不是专家,而属于中间用户
2012-05-07 23:21 606大多数用户既非新手,也不是专家,而属于中间用户。 即首 ... -
世界500强网站
2012-05-03 10:48 1290世界500强网站大多设计精美、大气简洁,视觉很不错,与大家一起 ...
相关推荐
印制线路板设计经验点滴总结--PDF。 印制线路板设计经验点滴总结--PDF。
点滴\液体点滴速度监控装置设计报告 点滴\液体点滴速度监控装置设计报告
毕业设计论文~无人监守点滴自动监控系统的设计.doc
基于单片机的无人监守点滴自动监控系统的设计.pdf
自动点滴管理系统,.net3.5框架的WCF技术实现!
医用点滴自动警报装置设计,利用弹簧装置形变,三次自主报警提醒,并实现WiFi联网警报功能
05年全国电子设计大赛点滴报告05年全国电子设计大赛点滴报告
基于单片机的输液点滴系统设计开题报告书.pdf基于单片机的输液点滴系统设计开题报告书.pdf基于单片机的输液点滴系统设计开题报告书.pdf基于单片机的输液点滴系统设计开题报告书.pdf基于单片机的输液点滴系统设计开题...
印制线路板设计经验点滴,可以给一些初学者的兄弟们一点建议。。。
医用点滴自动报警,三次自主报警,WiFi移动互联
全国大学生电子设计竞赛--液体点滴速度监控装置
单片机实现对点滴速度的检测和控制,主要是使用红外对管 和步进电机
课程设计基于单片机的医用点滴余液液位监测报警系统.pdf课程设计基于单片机的医用点滴余液液位监测报警系统.pdf课程设计基于单片机的医用点滴余液液位监测报警系统.pdf课程设计基于单片机的医用点滴余液液位监测报警...
本系统设计是以单片机AT89C51为核心,以键盘及红外对射式传感器作为输入系统,以数码管及电动机作为输出系统的智能化输液控制及监测系统。键盘系统为独立式按键系统,红外传感器的功能为检测点滴的速度。电动机具有...
基于PBC只做设计开饭等一系列的点滴讲解
基于单片机的无人监守点滴控制系统设计.pdf
基于单片机的输液点滴系统设计--开题分析报告.pdf基于单片机的输液点滴系统设计--开题分析报告.pdf基于单片机的输液点滴系统设计--开题分析报告.pdf基于单片机的输液点滴系统设计--开题分析报告.pdf基于单片机的输液...
液体点滴速度监控装置资料.zip电子设计项目毕业设计及产品设计资料论文,源代码及PCB资料 液体点滴速度监控装置资料.zip电子设计项目毕业设计及产品设计资料论文,源代码及PCB资料 液体点滴速度监控装置资料.zip电子...
基于单片机的医疗点滴输液控制系统设计 (2).docx基于单片机的医疗点滴输液控制系统设计 (2).docx基于单片机的医疗点滴输液控制系统设计 (2).docx基于单片机的医疗点滴输液控制系统设计 (2).docx基于单片机的医疗点滴...