Web设计师必须收藏的站点

发表于:2010/08/05, 属于分类: 平面设计, 本文作者: admin

相信很多人知道,web设计师,在没有灵感的情况下,常常会找一些同类站点寻找灵感,那么网站鉴赏就是设计师的参考工具。好的画廊网站是激发设计师的灵感发源地,作为一个好的网页设计师不仅需要扎实的基本功,同样也需要大量的网站参考,下面整理出的十三个网站画廊是我个人收集,整理,并且长期保存在收藏夹的必备网站。

CSSREMIX http://cssremix.com/

前端视觉 http://www.divisionchina.com/

CSSMANIA http://www.cssmania.com

The Best Designs http://www.thebestdesigns.com/

UNMatchedstyle http://www.unmatchedstyle.com/

Web Cremehttp://www.webcreme.com/

CSSclip http://www.cssclip.com/

CSS Cremehttp://csscreme.com/

Behance http://www.behance.net/

Best WebGallery http://bestwebgallery.com/

CSS Heaven http://www.cssheaven.com/

Design Bombs http://www.designbombs.com/

CSS Based http://cssbased.com/

标签: 

一种提高用户体验的字体大小CSS写法

发表于:2010/07/22, 属于分类: 网站建设, 本文作者: admin

平常在设计网站写CSS的时候,习惯性地会在body加入一行font-size:12px;即定义一个全局字体大小为12像素。虽然像素也是相对尺寸单位,但只是相对于屏幕的分辨率 ,如果屏幕的分辨率一定,你却感到字太小,阅读有困难,在非标准浏览器中就无能为力了,因此,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小。

如何去实现这种方式?有两种方法:

1.将body里字体尺寸设为75%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,那么字体尺寸=16px*75%=12px,1em相当于12px.
body{
font-size: 75%;
}

h2{
fong-size: 1.5em;/* h2字的大小相当于18px */
}

2.将body标签里将字体尺寸设为62.5%, 则字体尺寸=16px*62.5%=10px,这时你能用em方便地设大小了,比如你需要用12px,只要设1.2em。
body{
font-size: 62.5%;
}
h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}

对比以上两种方法,第二种更为简洁易用。从这简单的CSS字体设定,对提高用户体验是非常重要的,也是每一个网页设计师必须要理解的地方之一。

浅谈浏览器兼容性CSS规则

发表于:2010/07/18, 属于分类: 网站建设, 本文作者: admin

每一个专业做网站的人都会知道,要加强用户体验,就要考虑到用户在什么平台下、什么浏览器下访问网站,在不同浏览器下访问网站的效果是什么?网站页面是不是正常,字符有没有混跌,边栏有没有被强制撑破,页面是不是有错位现象。如果你看到以下这样的网站,估计你会觉得这网站做得不行,那这家企业估计也不怎么样了。

萧山二中网站错位

上图是萧山二中网站在火狐下错位,但是在IE6下却显示正常,这是为什么?网站设计师对浏览器兼容性做得不够好,或者说根本忽视了浏览器兼容性的重要性。这是萧山网站建设存在的普遍问题。每当面对这个问题的时候,我很忧心,我认为,如果一个网页设计师长期如此不小心地建设一个网站,那么这种格局是无法改变过来的。如果连网站都做不好,更不用提及网站优化网站推广宣传了。

那么,如何去做好浏览器兼容性?

首先,改变网站设计的开发模式,table的兼容性的确很好,但是代码冗余,网站文件大的坏处可想而知。使用DIV+CSS模式,能从根本上改善这种情况。

第二,掌握了解css盒子模型
非常熟练地理解CSS盒子模型是最为重要的事情,CSS 盒子模型其实很简单,基本上,已经支持所有浏览器。
CSS 盒子模型包括以下事情:
该对象的边界,留白

盒子的尺寸和盒子与页面其它元素的相对位置

一个 blcok (区块)级对象占据多大的空间

CSS 盒子模型遵循以下准则:

区块对象都是矩形

width(宽), height(高), padding(内边距), borders(边框), 以及 margins(外边距) 决定

如果不设置宽度,一个非 float 型盒子水平上将充满其父容器(扣除父容器的留白)

如果不设置高度,该盒子的高度将自动适应其包含的内容,加上留白等(除非使用了 float)

处理 block 级对象时,必须注意以下事项:

垂直毗邻的 margin 会引起复杂的坍塌问题,导致布局问题(比如两个垂直毗邻的 Block 对象,上面的对象的 bottom-margin 为 40,下面的对象的 top-margin 为 20,则两个对象的间距将是 40,而不是 60 – 译者)

如果一个盒子的宽度设置为 100%,它就不能再设置 margins, padding, 和 borders,否则会撑破其父容器

拥有相对位置和绝对位置的对象,拥有不同的行为

第二:理解Floating和Clearing属性

实现多栏排版的最好方法是使用 float属性,float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右,一个设置为 float 的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的 float 对象的边界,而紧随其后的非 float 对象或内容,则包围在其相反的方向。

以下是使用 float 和 clear 属性的一些重要准则:

一个 float 对象,将从其置身的 block 级非 float 内容流中跳出,换句话说,如果你要将一个 box 向左边 float,它后面的 block 级非 float 对象会显示到下方,inline 级内容会在旁边包围

要让一段内容从一侧包围一个 float 对象,这段内容必须要么是 inline 级的,要么也设置为相同方向的 float

第三:理解block级和inline级对象的区别

Block级对象:

Block 级对象会自然地水平充满其父容器,因此没有必要为之设置 100% 宽度属性

Block 级对象的起始摆放位置是其父容器的左上边界,并顺排在其前面的兄弟 Block 对象的下方(除非设置 float 或绝对位置)

inline级对象

inline 级对象会忽略其宽度和高度设置

inline 级对象会随着文字排版,并受排版属性的影响(如 white-space, font-size, letter-spacing)

Inline 级对象可以使用 vertical-align 属性控制其垂直对齐,block 级对象不可以

Inline 级对象的下方会保留一些自然的空间,以适应字母 g 一类的会向下探出的笔画

一个设置为 float 的 inline 对象将变成 block 对象

最后:不要试图去追求每个浏览器页面下都能够一模一样,只要网页在不同浏览器下能够正常显示,不错位,用户感觉能够正常使用,就算达到效果。在此,推荐一个工具,IETester,模拟各种IE版本,包括IE5-IE9。希望每一个网页设计师,都能够把浏览器兼容性做好,认真地去思考用户体验。

请记住网页设计师的立身之本-“高效”

发表于:2010/07/16, 属于分类: 平面设计, 本文作者: admin

有人会问,网页设计中什么是最为重要的?优秀的设计理念?独特的视觉理念?还是强力的感官冲击?其实都不是,网页设计,是把用户体验放在首位,在用户的角度思考网页设计存在的问题,以及问题的解决方式。网页设计需要达到的目的,也无非是希望,企业能够将网站真正利用起来,利用互联网广阔的市场,获取实际的经济效益,而不是将网址写入名片,一年两年无人问津。

设计的目标其实很简单,为了传达通俗的信息,让每个人都知道他们想知道的事情,而并非仅仅针对那些懂互联网的人,有技术的人。这种理念和萧山网站建设的理念完全相同的。

如果说,把更高效比喻为“温饱”,那么“更美丽的、更优雅的”就是“小康”了,更高效是是根本要求,是需求首先被落实的。

为什么这样说?

1.网站设计中很多涉及到功用的视觉表现原本就应该以心理学、科学、社会学为根底,而不是凭空的、随意的“发明”。比方,绿色普遍被认为“正确的” “可行的” “允许的” ,那么,页面出错的信息用绿色背景就是大错特错了。

2. 用户是使用产品,而不是来欣赏的,apple.com也是如此。想要欣赏作品可以去美术馆,十几英寸的显示器,你能欣赏到什么呢?

“更高效”是个必然要求,网页设计师不应为了实现其他目标而让这个要求受到损失。

那么怎么样保证“更高效”?

保证“更高效”,是不是保存页面原型中的一切信息不变就可以了?不是。不说也晓得,如果是这样的话,显然就不必在这里特意说了。那,为什么不是?

视觉设计中有这样两类任务:

1. 用图形元素间接或许辅佐传达信息。
比方:图标的设计,按钮款式的设计,重点信息的图形展现…

2. 渲染氛围,表现视觉作风。
经过内容单元框的外形、颜色,文字颜色,背风光,背景图形…表现出特定的视觉作风,渲染氛围,让用户在阅读网页能够感觉到温馨、可信、或者心动…

做这些任务,不随意删改页面原型中的内容,只是根本的要求。渲染氛围的进程中搅扰了注释信息的显示是不对的;运用图形元素达意不恰当也是不对的,不需求传达信息的中央用图标来装饰更是不对的。

在视觉设计进程中保证信息传达的高效程度不被降低甚至是能更高,这是项难度很大的任务。

之前我已经给了个复杂的结论“视觉表现元素不应带有信息量”,这是一个可以间接执行的结论,是设计目的的发生出来的一个详细要求。也就是说,假如你不情愿去了解设计的目的,更高效、更美丽谁在先,谁在后,假如是,那么,你只间接执行“视觉表现元素不应带有信息量”这个结论就行了。

因此,请每一个网页设计师务必记住设计的立身之本-实现网站设计的高效性,只有一个能够用于实际,能从网络获取价值,对用户而言,对企业而言都有信息化改善,才是一个真正有效的网站。

标签: