Lefter » 体验&交互&平面&策划

小窗口的的浏览体验

lujo — Sat, 19 Sep 2009 03:58:56 +0000

小窗口的的浏览体验是必须的，在保证页面内容的完整性的前提下，满足多终端设备的访问，细小部分的处理更能体现一个企业的水准。出现小窗口浏览的情形有很多，比如和女朋友抢电脑用的时候，女朋友要看电影，用户要看新闻，在难分高下的时候只能“AA”，因此浏览新闻就只能缩小窗口了：）
看了一下国内网站（满屏自适应部分）基本上没有考虑这点 再看Yahoo最上面的提示条满屏的时候是100%，占据整个宽度缩小的时候页面内容完整，布局没有错乱

对于块级元素,宽度默认会继承父级的宽度也就是100%（内联元素没有宽度，即使定义了也无效），而最外层元素HTML的宽度一般是随窗口的改变而改变的(改变窗口大小再点击下面代码)

alert(document.body.offsetWidth + "px")

YAHOO的做法是为满屏的元素（顶部提示条）加上min-width ,IE6不支持此属性不知道是YAHOO是怎么解决的，但是让IE6支持min-width实现方法可以用执行表达式 Expression:

width:expression((documentElement.clientWidth < 400) ? "400px" : "auto" )

另一种方法是用border-width来模拟

* html .minwidth { 
	border-left:600px solid #fff; float:left
}
* html .container { 
	margin-left:-600px; float:left;	 position:relative;
}

查看演示

如何提高交互设计效率

lefter — Tue, 01 Sep 2009 07:30:19 +0000

对之前做过的一些东西的总结

尽可能把旧产品的交互、行为分析透，并且形成交互架构文档，作为自己的改进基础
对行为的了理解可以让你真正懂得交互是什么
一定要把客户的需求理解透，这样会少走弯路
对好的交互原则和案例，最好直接引用，因为这是成功的经验
不妨先打乱常规思维，乱了再收摊，总比一点没动要好
信息层的架构设计是客户关注的一个环节，可以在此多下功夫
不能小看交互，它也是创意。好的交互点子可以让产品容光焕发
用户需求；内容需求；信息构架；导航设计；可视化设计，每一阶段充分理解，做充足的准备。

收集的一些国内外艺术院校的网址

lefter — Tue, 25 Aug 2009 09:18:14 +0000

国外美术及艺术院校

国内美术及艺术院校

排名不分先后

创意与用户体验之间的需求差异

lujo — Tue, 21 Apr 2009 09:24:22 +0000

从设计的角度来讲，设计与艺术有本质的区别。艺术就是可以随意创作。而设计会有一个用户体验的前提。必须在这个前提下进行设计。只是说怎么用艺术上更好地方法来解决这个问题。设计不是艺术，但是它有美学的成分。但本质不是艺术，而是为用户服务。要站在用户的角度去创新。这两点没有矛盾。这里我们应该理解创意、创新的概念。就广义来讲，创意并不是画抽象画，从产品设计的角度，把产品做得好，做得对用户有用，就是创新。设计在于根据采集到的信息，通过设计师来演驿。不同的设计师有不同的解决方案。这个就是设计师需要做的事情。而怎么去演驿怎么去解决得更好，同样一个问题，十个设计师有十种方法去解决。每个设计师对设计的理解都不一样。你的比他的好，对用户有用这就是创新。

user experience the user experience, mostly called “customer experience” when referring to e-commerce websites; the totality of the experience of a user when visiting a website. Their impressions and feelings. Whether they’re successful. Whether they enjoy themselves. Whether they feel like coming back again. The extent to which they encounter problems, confusions, and bugs.

用户体验是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。应该对用户体验有正确的预估，认识用户的真实期望和目的，并尽可能的满足用户

互联网的用户体验与产品的用户体验,其本质上是没有差别的。只不过使用方法不一样，互联网是用户通过点击，互联网可用性的评价标准就是与用户互动做到了什么样的程度。产品则是用户怎么用它，产品和人之间的互动，而互联网是网与人的互动，本质上是一样的

国内一些高端的企业已经把国外最新的概念引进来。或者有过之而不及。比如，WEB2.0 在中国好像只要是个网站就强调WEB2.0 ，实际上，在国外，这一点上是比较谨慎的。有所取舍。不同的网站有不同的用户，不同的用户对于网站的需求也不一样。如果用户没有这方面的需求，就没有必要跟风去做,认为现在是2.0了。我们必须上，不上就落后了。其实对于用户来说，他对于什么是WEB2.0也许并不没有一个清晰的概念。很多网站对于用户到底要不要，为什么要，要的是什么都不清楚。如果你做用户体验研究就知道;互联网还是要从产品特性出发，要不盲目跟风。我发现中国有一个现象。很多网站都是千篇一律，一个风格，我不知道是什么原因。每个网站都会有两张轮换的大图。所有的网站都有。奥运会期间，新浪有了火炬的背景，后来所有的网站都用这个背景，哪天一个网站拿下来了，所有网站也跟着没有了，没有根据自身的特点来做。觉得别人有了，我也要有。别人12寸的图，我就来个12寸的。这个是从众心理，互联网应该避免这样做。

平面设计编排构成原理之“对比”

lujo — Tue, 10 Mar 2009 16:25:49 +0000

多媒体观众一方面从计算机屏幕上所呈现的视觉表征得到信息，做出反应；另一方面根据其美感经验，从计算机屏幕上赏心悦目的视觉呈现，引起他的良好沟通情绪。一个赏心悦目的视觉呈现有赖于设计者的创意﹝idea﹞、表现技巧﹝technique﹞、编排﹝lay-out﹞能力。
目前许多国内设计的计算机屏幕视觉呈现是依赖设计者的感觉来处理，或者凭其多年的实务经验来完成。但是「感觉」对想学习多媒体设计的人是很难捉摸的，「经验」更是残酷的。因此将「美的原则」运用于平面设计的编排与构成，形成「平面设计编排构成原理」，可以帮忙初学者；甚至对设计师而言，在其面临缺乏「感觉」的时候，还能创作出具水准的作品。

﹝一﹞大小的对比
大小关系为造形要素中最受重视的一项，几乎可以决定意象与调和的关系。大小差别少，给人的感觉较沈着温和，大小的差别大，给人的感觉较鲜明，而且具有强力感。

﹝二﹞明暗的对比
阴与阳、正与反、昼与夜等等，如此类的对比语句，可使人感觉到日常生活中的明暗关系。初诞生的婴儿，最初在视觉上只能分出明暗，而牛、狗等动物虽能简单识别黑白，可是，对彩度或色相却无法轻易识别，由此可知，明暗﹝黑和白﹞乃是色感中最基本的要素。

﹝三﹞粗细的对比
字体愈粗，愈富有男性的气概。若代表时髦与女性，则通常以细字表现。细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。

﹝四﹞曲线和直线的对比
曲线很富有柔和感、缓和感；直线则富坚硬感、锐利感，极具男性气概。自然界中，皆由这两者适当混合。平常我们并不注意这种关系，可是，当曲线线或直线强调某形状时，我们便有了深刻的印象，同时也产生相对应的情感。故我们常为加深曲线印象，就以一些直线来强调，也可以说，少量的直线会使曲线更引人注目。

﹝五﹞质感的对比
在一般人的日常生活中，也许很少听到质感这句话，但是在美术方面，质感却是很重要的造形要素。譬如松弛感、平滑感、湿润感等等，皆是形容质感。故质感不仅只表现出情感，而且与这种情感融为一体。
我们观察画家的作品等，常会注意其色彩与图面的构成，其实，质感才是决定作品风格的主要因素，虽然色彩或对象物会改变，可是，作为基础的质感，是与一位画家之本质有着密切的关系，是不易变更的。若是外行人就容易疏忽这一点，其实，这才是最重要的基础要素，也是对情感最强烈的影响力。

﹝六﹞位置的对比
在画面两侧放置某种物体，不但可以强调，同时也可产生对比。画面的上下、左右和对角线上的四隅皆有潜在性的力点，而在此力点处配置照片、大标题或标志、记号等等，便可显出隐藏的力量。因此在潜在的对立关系位置上，放置鲜明的造形要素，可显出对比关系，并产生具有紧凑感的画面。

﹝七﹞主与从的对比
版面设计也和舞台设计一样，主角和配角的关系很清楚时，观众的心理会安定下来。明确表示主从的手法是很正统的构成方法，会让人产生安心感。如果两者的关系模糊，会令人无所适从，相反地，主角过强就失去动感，变成庸俗画面。　　戏剧中的主角，人人一看便知。版面中若也能表现出何者为主角，会使读者更加了解内容。所以要有主从关系是设计配置的基本条件。

﹝八﹞动与静的对比
一个故事的开始都有开端、说明、转变和结果。一座庭院中，也有假山、池水、草木、瀑布等等的配合。同样的在设计配置上也有激烈动态与文静部份。
扩散或流动的形状即为「动」。水平或垂直性强化的形状则为「静」。把这两者配置于相对之处，而以「动」部份占大面积。
「静」部份占小面积，并在周边留出适当的留白以强调其独立性。这样的安排，一般用来配置于画面四隅的重点。因此，「静」部份虽只占小面积，却有很强的存在感。

﹝九﹞多种的对比
对比还有曲线与直线、垂直与水平、锐角与钝角等种种不同的对比。如果再将前述的各种对比和这些要素加以组合搭配，即能制作富有变化的画面。

﹝十﹞起与受
版面全体的空间因为各种力的关系，而产生动态，进而支配空间。产生动态的形状和接受这种动态的另一形状，互相配合着，使空间变化更生动。
我们要建造假山庭园时很注重流水的出口，因为流水的出口是动感的出发点，整个庭园都会因它而被影响。谈到版面构成，原理也一样，起点和受点会彼此呼应、协调。两者的距离愈大，效果愈显著，而且可以利用画面的两端，不过起点和受点要特别注意平衡，必须有适当的强弱变化才好，若有一方太软弱无力就不能引起共鸣。

﹝十一﹞图与地
明暗逆转时，图与地的关系就会互相变换。一般印刷物都是白纸印点字，白纸称为地，黑字称图。相反的，有时会在黑纸上印上反白字的效果，此时黑底为地，白字则为图，这是黑白转换的现象。

﹝十二﹞平衡
走路踢到大石头时，身体会因失去平衡而跌倒，此时很自然地会迅速伸出一只手或脚，以便维持身体平衡。根据这种自然原理，如果我们改变一件好的原作品的各部份的位置，再与原作品比较分析，就能很容易理解平衡感的构成原理。

﹝十三﹞对称
以一点为起点，向左右同时展开的形态，称为左右对称形，英文名为 symmetry。应用对称的原理即可发展出漩涡形等等复杂状态。
日常生活中，常见的对称事物确实不少，例如：佛像的配置或日本神社中神殿的配置等等。对称会显出高格调、风格化的意象。

﹝十四﹞强调
同一格调的版面中，在不影响格调的条件下，加进适当的变化，就会产生强调的效果。强调打破了版面的单调感，使版面变得有朝气、生动而富于变化。例如：版面皆为文字编排，看起来索然无味，如果加上插图或照片，就如一颗石子丢进平静的水面，产生一波一波的涟漪。

﹝十五﹞比例
希腊美术的特色为「黄金比」，在设计建筑物的长度、宽度、高度和柱子的型式、位置时，如果能参照「黄金比」来处理，就能产生希腊特有的建筑风格，也能产生稳重和适度紧张的视觉效果。长度比、宽度比、面积比等等比例，能与其它造形要素产生同样的功能，表现极佳的意象，因此，使用适当的比例，是很重要的。

﹝十六﹞韵律感
具有共通印象的形状，反复排列时，就会产生韵律感。不一定要用同一形状的东西，只要具有强烈印象就可以了。三次四次的出现就能产生轻松的韵律感。有时候，只反复使用二次具有特征的形状，就会产生韵律感。

﹝十七﹞左右的重心
在人的感觉上，左右有微妙的相差。因为右下角有一处吸引力特别强的地方。考虑左右平衡时，如何处理这个地方就成为关键性问题。
人的视觉对从右上到左下的流向较为自然。编排文字时，将右下角空着来编排标题与插画，就会产生一种很自然的流向。如果把它逆转就会失去平衡而显得不自然。这种左右方向的平衡感，可能是和人们惯用右手有点关系吧！

﹝十八﹞向心与扩散
在我们的情感中，总是会意识事物的中心部份。虽然蛮不在乎地看事物，可是，在我们心中，总是想探测其中心部份，好象如此，才有安全感一般，这就构成了视觉的向心。一般而言，向心型看似温柔，也是一般所喜欢采用的方式，但容易流于平凡。离心型的排版，可以称为是一种扩散型。具有现代感的编排常见扩散型的例子。

﹝十九﹞JUMP 率
在版面设计上，必须根据内容来决定标题的大小。标题和本文大小的比率就称为 Jump 率。Jump 率越大，版面越活泼；Jump 率越小，版面格调越高。依照这种尺度来衡量，就很容易判断版面的效果。标题与本文字体大小决定后，还要考虑双方的比例关系，如何进一步来调整，也是相当大的学问。

﹝二十﹞统一与调和
如果过份强调对比关系，空间预留太多或加上太多造形要素时，容易使画面产生混乱。要调和这种现象，最好加上一些共通的造形要素，使画面产生共通的格调，具有整体统一与调和的感觉。
反复使用同形的事物，能使版面产生调合感。若把同形的事物配置在一起，便能产生连续的感觉。两者相互配合运用，能创造出统一与调和的效果。

﹝二一﹞导线
依眼睛所视或物体所指的方向，使版面产生导引路线，称为导线。设计家在制作构图时，常利用导线使整体画面更引人注目。

﹝二二﹞形态的意象
一般的编排形式，皆以四角型﹝角版﹞为标准形，其它的各种形式都属于变形。角版的四角皆成直角，给人很规律，表情少的感觉，其它的变形则呈现形形色色的表情。譬如成为锐角的三角形有锐利、鲜明感；近于圆形的形状，有温和、柔弱之感。
相同的曲线，也有不同的表情，例如规规矩矩和用仪器画出来的圆，有硬质感，可是徒手画出来的圆就有柔和的圆形曲线之美。

﹝二三﹞水平线
黄昏时，水平线和夕阳融合在一起，黎明时，灿烂的朝阳由水平线上升起。水平线给人稳定和平静的感受，无论事物的开始或结束，水平线总是固定的表达静止的时刻。

﹝二四﹞垂直线
垂直线的活动感，正好和水平线相反，垂直线表示向上伸展的活动力，具有坚硬和理智的意象，使版面显得冷静又鲜明。如果不合理的强调垂直性，就会变得冷漠僵硬，使人难以接近。
将垂直线和水平线作对比的处理，可以使两者的性质更生动，不但使画面产生紧凑感，也能避免冷漠僵硬的情况产生，相互截长补短，使版面更完备。

﹝二五﹞阳昼、阴昼
从黑暗的洞窟内，看外面明亮景象时，洞窟内的人物，总是只用轮廓表现，而外面的景色就需小心描画了。这就是同时把握日常的情况及异常的明暗，显出不可思议的空间。
正常的明暗状态，叫做「阳昼」，相反的情况是「阴昼」。构成版面时，使用这种阳昼和阴昼的明暗关系，可以描画出日常感觉不同的新意象。

﹝二六﹞留白量
速度很快的说话方式适合夜间新闻的播报，但不适合做典礼的司仪，原因是每一句话当中，空白量太少。谈到版面设计时空白量的问题也很重要，即使同一张照片，同样的句子也会因空白量就很难表现确实的形象。无论排版的平衡感有多好，文章有多美，读者一看版面的空白量就已给它打好分数了。

﹝二七﹞版面率
在设计用纸上，本文所使用的排版面积称为版面，而版面和整页面积的比例称为版面率。空白的多寡对版面的印象，有决定性的影响。如果空白部份加多，就会使格调提高，且稳定版面；空白较少，就会使人产生活泼的感觉。若设计信息量很丰富的杂志版面时，采用较多的空白，显然就不适合。

﹝二八﹞屏幕上字的大小
多媒体影像通常是在计算机影像显示器﹝monitor﹞或在电视机上呈现。

根据分析，为了视觉的舒适感，呈现在计算机影像显示器上最小且清晰的中文字型应为 16 pixels﹝W﹞×16 pixels﹝H﹞点阵字型的细明体。至于呈现在电视机上最小且清晰的中文字型应为 36 pixels﹝W﹞×36 pixels﹝H﹞的点阵字型，这是因为电视机需要从较远的距离观看的缘故。从阅读习惯来看，为了配合人们横向阅读中文的最佳状态是，一列最好不要超过 35 个字。
根据观赏者的前述需求，多媒体计算机影像显示器的分辨率最好设定为 640 pixels﹝W﹞×480 pixels﹝H﹞。一般电视机的分辨率上下的方向固定为 512 条扫描线。两者和一般印刷品的分辨率﹝350dpi﹞相比较，小了很多。
一般来说，在进行多媒体视觉传达设计之前，首要决定的就是萤幕上字的大小的运用标准，此与一般平面设计的过程不尽相同。

190 Bugs in IE8 for Windows

lujo — Fri, 07 Nov 2008 01:29:44 +0000

以前只是在css-discuss上的BrowserBugs上看到了一些总结性的BUG，positioniseverything上也有不少！今天看了一个更详细的,废话少说贴上地址！http://www.gtalbot.org/BrowserBugsSection

有兴趣的朋友去看看看！有个疑问了，为什么IE的版本越到后来，bug越多呢？

分享一些优化网页加载速度的小技巧

lujo — Wed, 24 Sep 2008 23:59:33 +0000

优化图片

1、减少图片数：去除不必要的图片。
2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文大小的变化是比较大的。
3、常识使用脚本文件代替效果：
比如一些web2.0的样式，如果使用ps制作，每个图片基本会增加%5-%25的大小成本.
相反，使用javascript代码来实现效果,仅仅只增加几个字节.
图像格式的选择
一般在网页上使用的图片格式有三种，jpg、png、gif。
1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。
3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

网址后加斜杠

有些网址，比如www.yahoo.com当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成http://www.www.yahoo.com，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

减少http请求

当浏览者打开某个网页，浏览器会发出很多组件（图像、脚本等等），视乎网络延时情况，每个对象加载都会有所延迟。如果网页上对象很多，这可以需要花费大量的时间。

因此，要为http请求减负。如何减负？

1、去除一些不必要的对象。
2、将临近的两张图片合成一张。
3、合并CSS文件
看看下面这段代码，需要加载三个CSS文件：

我们可以将其合成一个：

从而减少http请求。
其它小技巧:
1、去除不必要加载项。
2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。
3、尽量用图片代替flash，这对SEO也有好处。
4、有些内容可以静态化就将其静态化，以减少服务器的负担。
5、统计代码和JS文件一般放在页尾(或者使用延迟加载)。

从美的原则谈 WWW 网页上的艺术表现

lujo — Tue, 23 Sep 2008 09:44:48 +0000

一：美的原则

什么是美呢? 美的事物应该具备什么条件呢?

我们根据人类美感的共通性可以定出十个美的原则：连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。

在讨论美的原则之前，必须先了解「单位形」的意义。单位形是在相同或相似的形象组合中最基本的单位元素。单位形可以单独重复排列，或组成「单位形组合」，再以「单位形组合」为基础，作有规律的反复排列。下列图例说明以一个「单位形」配置构成八种「单位形组合」。

以一个「单位形」配置构成八种「单位形组合」图例

每一个「单位形组合」又可以重复以线状﹝又称二方连续﹞、面状﹝又称四方连续﹞、环状、放射状、镜照式的方式发展成复杂有趣的平面构图。下图是以环状发展构成的平面构图。

以环状发展构成的平面构图

以下是关于十个美的原则的概述：

﹝一﹞连续

「连续」是一种没有开始、没有终结、没有边缘的严谨性秩序排列，它祇是反复的一种特殊情形，因此有规律的反复并不一定能产生连续。「连续」是无限地扩张，它可超越任何架框限制。「连续」包括「二方连续」和「四方连续」。

「二方连续」是单位形向左右或上下作反复的规律式排列。它可作直线方向、曲折式、波浪式的方向延申。

四方连续」是单位形向左右也向上下延申的现象，可产生四方连续的图形。由二方连续造成的线条加上左右上下反复的排列，是创作四方连续图形的方法之一。

﹝二﹞渐变

「渐变」就是逐渐的改变，其有一定的秩序与规律。「渐变」除形状渐变外，尚有「大小渐变」、「色彩渐变」、「位置渐变」和「方向渐变」等等，均可单独或混合运用。

任何构成元素之渐变，都有其开始与终结，或由一方开始，经渐变又回复原来的循环现象。例如形状渐变，可从某一形状开始，逐渐变化成为另一形状，或由另一形状又逐步回复到某一形状。无论是开始或终结，在渐变的设计中均可成为设计上的焦点，且在开始与终结的整个重复过程中，均会造成节奏感。

渐变形成的方式可由上而下、由左而右、或由中央发射、或作多元化的发展。

渐变的表现形式包括：

﹝1﹞自然形象之渐变、﹝2﹞形状之渐变、﹝3﹞大小之渐变、﹝4﹞位置之渐变、

﹝5﹞方向之渐变、﹝6﹞色彩之渐变。

﹝三﹞对称

视觉上，以一个点或一条线为基准，上下或左右看起来相等的形体，称为「对称」。「对称」具有相称、均齐、均整的意思。左右对称的形体向来都被认为是安定且具有机能的。

对称」的表现形式包括：

﹝1﹞线对称、﹝2﹞点对称、﹝3﹞感觉对称。

通常对称的图形具有单纯简洁的美感，以及静态的安定感，但易流于单调、呆板。一般来说，单纯的对称图形具有大方、强力的性格；细密的对称图形则能增加作品的充实感。许多商品设计即运用此特性而设计。

﹝四﹞对比

将相对的要素配置一起，相互比较，以形成二种抗拒的紧张状态，称为「对比」。这种造成相对排斥性质的要素，即一般所谓的「对比要素」。

「对比要素」包含的范围非常广泛，举凡造形、色彩、质感、方向、面积等均属之。圆形、三角形、方形是属于造形的对比，例如红砖、金砖两者具有相同的造形，而其质感因明显的不同，具有对比的性质。

对比现象的强弱与否，端赖对比要素的配置关系而定。一般而言，不同的要素结合在一起，彼此刺激，会产生对比的现象，使强者更强、弱者更弱、大者更大、小者愈小。亦即经由对比的关系可以增强个别要素所具有的特性。

「对比」的表现形式包括：

﹝1﹞线形的对比、﹝2﹞形状的对比、﹝3﹞份量的对比、﹝4﹞明度的对比、

﹝5﹞彩度的对比、﹝6﹞色相的对比、﹝7﹞质地的对比、﹝8﹞动态的对比、

﹝9﹞位置的对比、﹝10﹞其它的对比。

﹝五﹞比例

在造型上所谓的「比例」乃是指长度或面积等属于量度之间的一种比率，它描述的是部份与部份；或部份与全体之间的关系。

在人类的历史中，「比例」一直是被运用在建筑、家俱、工艺以及绘画上。尤其是希腊、罗马的建筑中「比例」被当是一种美的表征。除了建筑之外，有几个理想的比例，古代的学者就把它公式化，而作为设计的基本原理，以便求得统一与变化。其中最基本并且最重要的比例就是「黄金比例」。

古希腊人把「黄金比例」认为是最完美的比例而活用时造型中。它的基本方法是把一条线分割成大小两段，小线段与大线段之长度比等于大线段与全部线段之长度比。这种比例分割方法就是「黄金比例」。
﹝六﹞平衡

「平衡」是指两个力量相互保持的意思，也就是说把两种以上的构成要素，互相均匀地配置在一个基础的支点上，以保持力学上的平衡而达到安定的状态。

在造形的秩序中，「平衡」是极重要的一项。由于造形的作品，并不是真正讲究实际的重量关系，所以「平衡」一词，在平面造形的世界中，应当是属于视觉的平衡。这和力学的平衡、数学的平衡以及其它学科中所讲的「平均」是不一样的。

对「平衡」来说，有对称和非对称平衡之分。在「平衡」的练习中，着眼点在于如何求得视觉上的安定与心理上的平衡。例如形态、色彩、材质在画面中所具有的重量、大小、明暗、色彩、强弱、质感．．．等，都必须保持平衡状态，才会令人产生安定的感觉。

﹝七﹞调合
当两种构成要素共同存在时，若成相差距过大，即造成「对比」。若两种构成要素相近，则对比刺激变小，能产生共同秩序使两者达到调和的状态。如黑与白是一种强烈对比的颜色，而存于其间的灰色便是两者的「调和」。

「调和」在视觉上可使我们产生美感。因此，调和的原则一直是人们关心的课题，尤其是色彩或造形皆是须不断探讨的问题。然而为了达到「调和」，各要素间的统一仍是必要的；如色相的配合、调子的配和以及明度的配合，皆能产生「调和」。在造形上如线的粗细与形的大小均会影响，但只要在造形上能一致的话，也可产生调和感。「调和」要素除了色彩与造形外，质感也是相当重要的因素。如以同材质作为建筑物或庭园设计的材料，也是获得「调和」的方法之一。

﹝八﹞律动

凡是规则的或不规则的反复和排列，或属于周期性、渐变性的现象，均是「律动」。它给人具有抑扬顿挫而又有统一感的运动现象。

一般说来，律动和时间的关系密切，因为在其它具有时间性的艺术领域中，均能表现律动美，如音乐、舞蹈、电影、戏剧、诗歌等。以音乐来说，利用时间间隔会使声音的强弱或高低表现出律动美，而呈现抑扬顿挫的变化。　而在我们的生活环境中，四季的变化、植物的成长、动物的运动以及各种生理反应等都存在着律动的现象。此外自然界中的海浪、沙丘、麦浪、炊烟、屋瓦等形象，亦具有连续发展的反复，并呈现出视觉的一种律动美。

﹝九﹞统一

结合共同的要素，把相同或类似的形态、色彩、肌理诸要素作秩序性或画一性的组织、整理，使之有条不紊而相互发生关连或共通的作用，是为「统一」。

「统一」是美好的根本秩序。一般说来，统一可表现高尚权威的情感，也可以达成如平衡及调和的美感。然而过份的统一，将会失去生动而流于呆板。例如大小形态、色彩完全相同，且作等距离排列时，便会产生单调的感觉。所以在讲究统一的同时，还须要注意到变化的问题。「变化」也是美的形式之一，所谓「变化」是在异质的诸要素中求变化。换句话说，即是将不同的形态、大小、色相、明度、彩度、方向、肌理作有机性的组织使之生动、活泼而不流于紊乱，才是适切的变化。

﹝十﹞完整

任何一件艺术作品，不论运用了那一种美的原则，或经过多么复杂的创作过程，艺术家到作品完成的那瞬间追求的是作品的「完整」性。完整性依人类的感觉、需求的不同分为感官方面﹝包括各种知觉﹞、意念方面、功能方面。譬如一出好的戏剧演出，除了带给观众视觉和听觉方面的完整性外，也会为观众提供剧作家想表达的一个完整的创作意念。

建立优美的面向对象JS编程风格

admin — Tue, 12 Aug 2008 16:03:51 +0000

由于js语言自身语法的灵活性，使得在js程序中出现了各种各样的代码风格，但也正因为如此，导致了代码的可读性和可维护性大大降低，特别随着项目的不断更新，js代码的不断增多，到后期维护时甚至连自己写的代码都不知所以然了，因此确定一种好的代码风格是很有必要的。近两年随着ajax的兴起，js变得越来越受“重用”，js开始在web开发中中充当着非常重要的角色，因此也开始遇到了各种各样的问题。于是很多牛人们就提出了js的面向对象编程方法。

使用面向对象的编程思想实现js代码其实也并不难，实现方法也又多种，比如prototype原型，new object()等方法。前面的每个方法都有其自己的优缺点，但都存在一个问题，那就是对于js变量作用域的控制。如果不能很好控制js变量作用域，就可能导致对象内部变量被外部肆意修改，从而导致程序被破坏，不便于程序的维护，对象的封装特性和程序健壮性都大打折扣。被由于js本身没有很好的对变量范围的定义（public/private等限定符），因此在js的面向对象编程中也就遇到了变量的控制问题，特别是对于对象内部的公有变量在prototype原型方法中都很难实现。

HTML应当给予更多重视

lujo — Tue, 12 Aug 2008 14:32:54 +0000

国内关于 HTML 的文章不多，可能因为它过于容易上手而被很多前端人员所忽略，但不管怎样HTML仍然是Web的核心，所以彻底的了解HTML以及它背后的思想是非常有用的。

可惜的是，我国对于HTML的认识，特别在一些初学者中，有非常严重的错误。

让我们首先看看国内的一些术语。一些国内采用的术语：

xhtml + css
div + css

以上两种术语的流行也有一定的道理。使用table进行页面布局在我国仍然占据了大部分的网站，所以以上术语用来区分那些默认使用table来标记页面的技术还是十分直观和易于理解的。而对于国外的开发人员和设计师来说他们不需要使用以上这两个术语，因为采用符合语意的标记和使用CSS来制作网页已经大大超过了使用table，所以table已经被完全忽略了，这样还需要用“xhtml+css”或“div+css”来标识制作网页时采用的技术吗？显然默认的东西就没有必要提出了。

XHTML 是为了能够让HTML和XML兼容的一种产物，他的优势在于能够和W3C的其他XML的应用，如MathML、SVG兼容。但是我们现在写的网页是XHTML吗？显然不是。

你应当记住XHTML就是XML，所以它的content type应当 是application/xhtml+xml，而不是text/html 。所以如果你仍然象目前的Internet上的大多数网站一样，使用text/html作为你的站点的content type，那么你并没有使用XHTML，你用的仍然是HTML，只不过你在声明中添加了

这条声明仅仅标识你的文档符合XHTML的标记标准，但是它并不表明你的文档正在以XHTML要求的方式被浏览器解析。事实上，人们不使用application/xhtml+xml因为，Internet Explorer 6 以及以下版本不能够解析application/xhtml+xml这种MIME type，如果你采用XHTML标准要求的content type发送文档，那么目前地球上大部分的人都看不到你的网页，所以人们仍然使用HTML。

所以xhtml+css是一个糟糕的术语。目前你至少应该使用HTML + CSS，而div+css更是荒谬的。但是如果你在编写HTML时，符合XHTML标准，那也非常好，至少在未来所有浏览器都支持XHTML后，你可以不用修改你的文档了，但是你心里应该明白，真正起作用的仅仅是HTML。

我想我们大部分人都应当重新审视HTML。

目前，W3C推荐的HTML版本是 HTML 4.01 ，这一版本早在近十年前就已出现。在当时的HTML 4.01的设计来看，它早已突出了在我们现在看来非常重要的设计。

国际化
文档与表现分离
无障碍性
符合语意的HTML

HTML文档应当是一份要让全世界任何角落的人，不管他们本身和使用Internet的环境如何，都应当能够正常访问的文档。因此在我们编写HTML文档之前，脑中应当始终放着HTML的设计思想。其中，容易被很多人所忽略的是，中文网站不应当使用gb2312作为文档的字符编码，最好采用UTF-8。