Web设计精确点滴

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

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

也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。放大2倍后对比放大2倍后对比另外不要试者调整带有边框的图片,
最好是自己绘制,这个面两张对比图
不用放大就能全面看到问题:2)关于边框和背景

有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:文字边框背景:因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。在深色背景下,才使用加亮边框。关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:

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

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

设计师
寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。
调整之后如下图:在看下面的例子:上图中区块上下间距与左右间距不匀称,和前几的列子一样,文字与区块上下垂直间距不协调,下图是修正后的结果。在
来看一组给图片加框的效果:在来看图列间距:

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

在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:阴影要小一点、颜色要浅一点,另外这
里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:上图Button和价格区块的投影没有质量,修改后如下图:其实阴影和质感是随网站
整体风格相关联的,某种情况下还不如不加上去。关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。就说到这里了,没时间往下说了,我要整理东走了,上面都只是你可能不注意的小小细节问题,你注意到的我也不会说了。来源:http://www.zhouwenqi.com/blog/board_43.html

时间: 2024-10-12 05:44:42

Web设计精确点滴的相关文章

精确到像素的Web设计

这句话不知道是不是我的原创(文字,不是理念),我以前经常讲,同时立即得到很多人的反对,认为这个观点不仅拖长设计周期,而且严重浪费成本,由于反对声太多太激烈,在加上有"导师"说:"很多人都反对你的观点就表示你错了"!而且我掌握的都是小规模团队和公司,他们注重的是效率尤其是股东放不开项目进度,我开始有点置疑这个观点,而且困扰了我好长一段时间,后来专门分析了一下,让我重新或更加坚决的坚持这个观点. 先看看是什么人在反对(非Web设计不纳入此列): 1.没有UED团队(不包

Web设计核心问题1:什么是Web设计(4)

web|设计|问题  1.8 形式和功能的平衡 Web站点设计的关键问题是形式和功能的平衡.在现代主义的影响下,很多设计者坚持认为事物的形式应符合它的功能.考虑到形式是Web金字塔的基础之一,而功能是另外的基础之一.形式不好的功能是令人厌烦的.站点可能运行得很好,但不能激发用户的灵感.与之相反,如果形式富有表现力,功能有限,用户则会感到失望.形式和功能之间需要一个清晰且连续的关系.简单地说,站点的形式应直接与它的意图相关,如果站点是商业性的,它的外观可能非常绚丽,并且有相当份量的多媒体内容,如果

Web设计核心问题1:什么是Web设计(2)

web|设计|问题  3.2 谁是Web用户 一个网站设计者经常犯的错误就是过于简化或完全忽略用户的能力和愿望.有时候,为一个特定的浏览器或特定的带宽设计网站的想法完全取代了任何严肃认真地为用户考虑的想法.不要为N e t s c a p e设计网站,要为那些使用N e t s c a p e浏览器的人设计网站.请时刻记住下面这条重要的网站设计规则. 规则:浏览器不使用网站,使用网站的是人. 幸运的是,大多数设计者不会完全忘记用户,但他们确实经常过于简化网站的使用者.通常,网站是为一些神秘的传统

Web设计核心问题1:什么是Web设计(1)

web|设计|问题 关于Web的讨论经常偏题,这是由于人们所用词汇的意义变动很大.尽管人们或多或少地有些看法,但没有人能够精确地定义什么是Web设计.一些问题被经常讨论,如可视化设计与编程,但关于它们在Web设计中的重要性则仁者见仁,智者见智.撇开可视化和技术方面不谈,很多人认为Web站点内容的创建和组织是Web设计最重要的方面.随着电子商务的兴起,商业方面的考虑也成为站点成功设计的重要方面. 对于特定的项目,上述所有学科以及其他代表着Web设计主要方面的交叉学科,都可能是需要的.由于许多学科,

Web设计核心问题3:为用户设计(7)

web|设计|问题  3.10 Web规则 尽管Web站点并不严格地遵循图形用户界面使用规则,它们却有一些松散的规则.偏离大多数站点的运作方式是个危险的想法.想一想,大多数用户可能因此把大量时间花在其他站点上.除非你在碰巧运营一个重要的每天都被使用的内部站点,或很大的电子商务网站,或者向Ya h o o 这样的门户站点,否则你不可能引入任何自己的新规则.实际上,如果用户希望,位于屏幕左侧的公司标识是指向主页的链接,你最好在站点上这么做.如果不这样,会让你的用户吃惊,而造成负面的效果.促使用户学习

Web设计核心问题3:为用户设计(4)

web|设计|问题  3.6 激励问题的处理 用户会始终受到来自站点的持久激励.用户从由文本.链接.图形.动画甚至声音一起组成的大杂哙中提取信息.因为连续的激励,我们需要有意或无意地过滤一些数据.大家广为认知的三种过滤感觉数据的方式包括极限.鸡尾酒会效应及感觉适应. 3.6.1 极限 与其注意每一分钟发生的改变,还不如注意超过一定极限的改变.例如,在Web网页上一个物体移动得非常缓慢-如每秒钟一个像素-我们一开始可能没有注意,因为它的速度低于我们的绝对感觉极限.然而,渐渐的我们会注意到这种移动.

Web设计核心问题3:为用户设计(2)

web|设计|问题  3.2 谁是Web用户 一个网站设计者经常犯的错误就是过于简化或完全忽略用户的能力和愿望.有时候,为一个特定的浏览器或特定的带宽设计网站的想法完全取代了任何严肃认真地为用户考虑的想法.不要为N e t s c a p e设计网站,要为那些使用N e t s c a p e浏览器的人设计网站.请时刻记住下面这条重要的网站设计规则. 规则:浏览器不使用网站,使用网站的是人. 幸运的是,大多数设计者不会完全忘记用户,但他们确实经常过于简化网站的使用者.通常,网站是为一些神秘的传统

Web设计核心问题2:Web设计进程(3)

web|进程|设计|问题  2.9 分割的设计阶段 原型设计阶段对大多数Web设计人员来说是最有趣的,因为它开始让项目成型.在这个阶段,应该同时开发外观和技术上的原型系统.无论如何,在建立原型系统之前,应该尽可能收集更多的内容.内容本身会影响站点并帮助指导它的形成.如果内容的基调非常严肃而外观却非常有趣和随意,站点对用户来说会非常奇怪.预先看内容有助于统一技术和内容.同时,也应该考虑到收集内容是站点设计中最慢的一个方面.Web项目的参与者很积极地参与集体会议,但一旦需要他们在内容方面上做工作时,

Web设计的金字塔

web|设计  摘自:<Web设计大全> 作者:Thomas A. Powell 关于Web的讨论经常偏题,这是由于人们所用词汇的意义变动很大.尽管人们或多或少地有些看法,但没有人能够精确地定义什么是Web设计.一些问题被经常讨论,如可视化设计与编程,但关于它们在Web设计中的重要性则仁者见仁,智者见智.撇开可视化和技术方面不谈,很多人认为Web站点内容的创建和组织是Web设计最重要的方面.随着电子商务的兴起,商业方面的考虑也成为站点成功设计的重要方面. 对于特定的项目,上述所有学科以及其他代