一、合理使用渐变
渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。
“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满 的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间 是流畅、舒服的。

三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里 面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局，它 采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。

大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审 查也是采用相同的方式。

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的 氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比 字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo 字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做 了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过 度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果， 并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来 越重要了，千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网 站在底部添加了一个特大的搜索框…

中文原文：网 页设计从优秀到卓越的6个细节
英文原文：6 Ways To Take Your Webdesign From Good To Great

写在前面的话
有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。

一 思考专题定位

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

 
图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助  10

·顾及此专题的定位

专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。

 

二 明白文字在Banner中占主导地位

从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

三 构建辅助视觉

一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。

3种文字和辅助视觉常见的搭配方式：

1，   文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助 胡子

图10

2，   文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助 淑华

3，   主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

四，创造力对主题的艺术化表现

1，严肃话题也能做出新感觉

做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。

图16
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助 竆

 后面的话

    有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。

原文：http://uedc.163.com/2044.html

设计是一门共通的视觉语言，它超越所有的文化和国家地域的限制，同时它又是变幻无穷的一门艺术。虽然设计作品可以让全人类来共同欣赏，但是这些设计作品背后的艺术家们却是拥有他们自己独特的个性特征和天赋的个体。你是一名什么类型的设计师呢？你的原则是什么？你如何对设计社区贡献力量？来自不同社会生活的设计师们可能对这些问题拥有相似的答案，但是却是不同的。有些设计师认为自己有责任教育那些还没有创作出自己的网络设计作品和艺术的新手。有些设计师的目的在于提高互联网设计的整体质量。当然，也有些设计师主要是通过他们的才能来维持生计，最终为了将来能够过上好日子。

不管你当设计师是出于什么原因，你都是独特的个体：

• 如果你想成为一名高薪的设计师，那么你得取悦客户。
• 如果你希望获得设计师的奖项，那么就得关注自己的设计灵感。
• 如果你想成为一名出色的设计师，那么你就得取悦大众。

认识七种不同类型的设计师

人们通常习惯戴面具来隐藏他们真正的感情、思想和性格特征。而设计师们也经常戴上他们自己的面具：与客户同台出席是另一个人；应对项目的细节时是另一个人；与同事共事协作是另一个人，与家人朋友交流时又是另一个人。人的天性就是根据他所扮演的角色来戴上不同的面具。

尽管有这些面具，但是一个人真正的性格特征仍然是无法掩埋的。 对于设计师而言，这篇文章总结了七种不同类型，以下哪一种类型与你最贴近呢？

1. 毕加索类型

一个完美主义者，毕加索类型的设计师不能容忍任何一个像素的错位或任何细小的不悦目的地方。
自我本位主义，他不在乎其他人的看法，对于别人的无知以及缺乏对设计和艺术的鉴赏能力表示不屑一顾。
有原则，毕加索类型的设计师做事非常有原则，信念坚定不会因为任何金钱而动摇。他唯一关心的是想法的独创性。他是为改变设计世界而来的， 他认为如果客户不采纳他的建议将会是客户的损失。他认定自己要比别人高出一筹，也只承认只有小部分的设计师比他更出色。与其他任何人相比，毕加索类型的设计师将觉得自己才更像艺术家。 

2. 爱因斯坦类型

他是一个非常聪明的人，有着很高尚的职业道德。爱因斯坦类型的设计师们的座右铭是“一分耕耘，一分收获”，不怕被嘲笑，敢于与众不同。

如果一开始没有获得成功，那就尝试，尝试再尝试。失败乃成功之母，这种类型的设计师们永不言弃的精神让他们能够不断地实现自己的目标，尽管经历无数次的失败。

爱因斯坦类型的设计师坚持创造属于自己的设计，通过各种设计竞赛来考验自己测试自己的设计水平。他可能不会赢得每一次的比赛，但是他坚信自己辛勤的付出终究会有回报的一天，他的才华和努力终究会有被人们认可的一天。

他自身坚强的信念让他自己有十足的耐心来等待那一天的到来。对他来说，问题不在于他是否能够成功，而在于什么时候能是实现自己的目标获得成功。

3. 大卫科波菲尔类型

大卫科波菲尔类型的设计师是出色的说书人和魔术师。他无所不能，不管看似多么不可能的事情，他都自信能够变戏法一样出色地完成， 通过他的念咒让客户认定他才是客户最佳的设计师。

说服客户雇佣他，只有对他而言，所有的一切才会非常简单。由于他能为客户做一切，所以费用自然也不菲。毕竟，他给客户们提供了所有他们想要的一切，这构造了一个相当巧妙的幻觉。借助他强大的说书人一般的技巧，他让客户深信他是他们达成目标的唯一人选。

在幕后，大卫科波菲尔类型的设计师却把之前他的言论降级，表面的现象会误导人的，他把工作任务外包出去，然后将外包的结果打包当成自己的作品。

客户无从知道究竟是谁勤勤勉勉地为他工作。他负责管理项目并将工作外包给别人，最终从中获得功劳和美誉。

4. 船长胡克类型

要是偷盗能行得通为何要亲自创作？船长胡克类型的设计师们非常狡猾。他寻找最有创新的精美设计然后制作成自己的作品—但不是明目张胆地复制（请注意）而是巧妙地结合自己的想法和灵感。

巧妙地避免直接抄袭，船长胡克类型的设计师将几个成功的想法聚合一起来创造一个全“新”的概念。

金钱是他唯一的关心的，船长胡克想尽办法从自己的作品中获得更多的回报。通过对颜色、字体和布局进行简单的小修改之后，就可以用它来冒充自己的新作。

他不顾虑是否会丢失客户，只管找寻那些没有注意到他的“伎俩”的新客户。他们依靠剽窃代码来生存， “一个好的设计师会抄袭，可一个出色的设计师会偷盗（A good designer copies, but a great designer steals）。”

5. 圣贤甘地类型

觉得自己应该对正误负责，甘地类型的设计师觉得自己有责任通过和平的手段来产生影响。他觉得无论要面临怎样的痛苦遭到什么样的反对，自己都有责任来改善网络设计的标准。如果一个客户某次能让他实现自己的目标，他将会很愿意去做。 

与任何愿意倾听的人分享他的设计理念，圣贤甘地类型的设计师会尝试说服别人—设计师、客户和广大的用户—以更好地帮助他实现设计行业的进一步改善。

一个有远见能够把握趋势的人，他提倡自己认为有必要改善的东西来保持设计行业的发展。为了其他设计师的利益愿意自己做出牺牲，这种类型的设计师通过做一切自己力所能及的平静和持久的改变来改善设计领域。

6. 害羞的小矮人类型

回避公众的视线，害羞的小矮人类型的设计师通常让人觉得他们本可以把工作做得更好的。当受到表扬时，他能够很快地与同事分享他的荣誉。他无法肯定自己的才华，满足于在幕后工作让其他人来享受荣誉。
害羞的小矮人类型的设计师没有太多考虑名望和财富的事情，如果可以选择他宁愿不要显露自己的名字和脸面。缺乏自信是主要的原因：他认为在他身边还有其他非常多设计师值得人们更多的关注和认可。

只要他能够赚钱养家糊口，为家遮风挡雨，不饿肚子，他会在生活中自得其乐。

7. Ella of Frell 类型

这种类型的设计师处于被符咒镇住的状态中，他不会对任何人说不。不过与被施咒稍微有一点不同的是，Ella of Frell类型的设计师实际上有选择权也并不是必需做一切别人交给她的事情。
只是她选择不拒绝所偶有客户的要求而已。她认为客户永远是对的，这样她会特别努力尽一切办法来取悦她的客户。客户也从不会从她身上挑任何毛病，因为无论客户要求什么，她都愿意做任何改变，在她的字典里从来没有“不”字。
通常会无视她自身良好的判断力，Ella of Frell类型的设计师为了取悦客户会让自己的设计作品灵感屈从于客户的意愿， 无论是白天还是晚上，她都愿意听客户的使唤，为他们效劳。 

最后

每个设计师都有自己的个性特征。不管你是属于哪一种类型的，最重要的是做一个真实的自己，让人可敬。这里讲到的七种类型中的任何一种类型可能也只是一个你比较突出的一面，或者每一种类型都能跟你沾边。世界上唯一不变的就是变化，也许在我们的生活历程中，可能会经历这七种类型中的多种类型，毕竟，我们都是不断成长的，当然希望能变得更加聪明！

原文

这19年间，网站的拥有者越来越清楚自己的目标，而设计师们也越来越理性和专注，人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去，都有无数过时的风格、特征元素以及实现技术被抛于身后。

设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点，这些因素都在推动潮流的变化。 你可以回想一下那些曾经风靡一时的模式：复古的像素样式；Google的朴素之风；韩式清新插画风；Flashsite的兴起带来的不规则布局和动画的滥用；Apple引发的对质感的追求；用户和情境意识的觉醒；对细节的关注——圆角和阴影的广泛运用； Web2.0设计风潮中典型的配色和特征元素；空间与层次感的魔术……

09年流行的半透明风格：

空间和层次感的魔术：

潮流的涌现，是社会一致化与个体差异化的碰撞，每一次碰撞都推动着这个行业的进步。

让我们来看看这些发生中的变化：

简洁，精简，极简

极简主义（Minimalism ）在这一年大热。原因有4点：

1， 手持便携设备的占有量逐步上升，人们的访问方式发生了改变，小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。

2， Apple简洁、专注、充满诱惑力设计哲学重领潮流，效仿者众多。

3， 来自全球设计思潮的影响：极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。

4， 网站的专业性和针对性在进一步加强，人们选择一个网站一次把一件事做好、做到极致，而非盲目扩张。这也使“精简”拥有更大的实现空间。

极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了，如果不能很好地把握取舍的宗旨与理由，一个为了极简效果而精简的页面可能看起来庸俗不堪，是为“做作”的留白 。

操刀这一风格需要对作品有充分的自信和理解力，更重视细节和布局，把握恰当的对比、强调。

来自版式和留白的均衡美感

极简主义风格非常适用于以图片为表现主体的网站

极简主义的风潮中，还涌现了许多单页网站。所有内容都放在一个页面上呈现，通过分屏来巧妙地布置格局，不再有跳转和复杂的站点结构，一目了然。

更有人情味与趣味的设计

运营上的专注使得设计师们可以在设计中投入更多的感情，更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌中，涌现出更多富有生命力和趣味的产品。

Twitter取得了巨大成功，可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

这一变化出现的原因：
1是具有针对性的中小型服务和应用类网站大批涌现。
2是来自示范者的力量。
3是多元化的必然趋向。
4是在功能性、规范性和用户体验之外，设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

曾经很不常见的高饱和度的配色，这种充满动感和生命力高调设计让人充满惊喜。

精致有趣的细节

原文链接: http://blog.xiqiao.info/2010/07/19/719

对传统设计的借鉴

Web设计这个年轻的分支在自我生长的同时也在不停向传统设计汲取营养。在布局与版式方面，设计师们一直在探寻更好的表现手法，所以尝试从传统的设计媒介中寻求灵感，杂志版式布局（ Magazine-style Layouts）的从09年就开始大热，不光大型新闻网纷纷求变，杂志版式布局的Wordpress Themes 也炙手可热。 这一变化对传统设计不仅仅是形式上的追随，更重要的是尝试去借鉴与融合的态度。

Times 和 Financial Times 都是国外老牌媒体，他们的网站布局结合传统纸媒版式有许多新潮的亮点，比如 竖式的流体布局，图文混排，头条强调，由标题字号变化带来的层级差别。

而国内的此类网站绝大多数采用的还是非常传统的横向区块布局，信息密度高，版式缺乏节奏和韵律。

由比较可见，国外的大容量信息网站的趋势是 降低首页的信息密度，把内容分摊到二级频道；版式上更具引导性、更适于阅读，浏览方式像读报一样更流畅随意。
由于广告盈利价值的差别，国内这类网站还是使用信息密度极高的索引模式，所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下，照搬国外的版式布局是非常危险的。

除了在样式上的借鉴，传统版式设计上的许多经典的实现手法也移植了过来，最著名的就是黄金比例和栅格系统（Grid System)。栅格系统的历史有300多年，运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统，不光是创造了一种工具，也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范，都是对它的推动。

960px宽的网页栅格系统 960 Grid System：

个体风格带来的变化

谁才代表着趋势？有人认为设计师们所追捧的变化代表了潮流， 有人认为top100的大站才是大势所趋。狡猾一点说，两个说法都不确切，网站运营的Top100并不代表设计上的Top100，出于多种原因，很可能它们是最保守的阵营。但你无法忽略他们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化，但在面对个人化设计和商业设计时，他们的取舍却往往不尽相同。

巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的Blog和Profile站。

下面这几点都是从现在小众网站上流行，慢慢被许多普通大众网站设计所趋向的特征。。

更大header区，更醒目的logo和标识，字号更大的标题。

内容放得再多再好，但用户记不住“你是谁？”也是白费。 更大header区强化了用户对品牌和风格的记忆，让你有更多的发挥余地去表现。

在背景中使用恰当地纹理。

十几年前，在美化手法贫乏的年代，人们也喜欢在背景中使用纹理，但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘

户外服装的电子商城。使用了粗砺的水泥纹理：

婴幼儿用品的电子商城，使用了清洁柔和的圆点纹理：

把Footer区利用起来

这是典型的受Blog设计影响的潮流，在footer区放上更多的信息、标志与快捷入口。

更注重品质，更能抓住用户眼睛的设计

这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用，使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题，高质量的图片，使用slideshow来创造更多展现空间空间，这些手法都在强调那些希望得到用户关注的地方。

Apple网站的专业、直接、有效的界面设计，不光打动了消费者的心，也吸引了众多开发者的效仿，大量App应用网站都以使用Apple风格为荣。

iPhone 4 发布时的Apple.com 首页：一切无关的都被省略了，表现主体被无限强调，它牢牢抓住人们的目光，传达出最直接的诱惑：

消费类网站的趋势：使用更醒目的标题，更大尺寸的高质量产品图片，让用户形成感官上的认识，而不仅仅是信息的罗列。高质量的商业摄影越来越多地出现在网站配图中。精心处理过的抠底图片配合简洁的整体设计，是电子商务网站近几年的趋势。

Slideshow的使用风头正劲。用于在有限的空间内展示更多的信息（通常是为了放下更多大图片）， 增加页面的动感和观赏的流畅性。在页面里运用可视化图表也是一个潮流，一些表单操作也被加工为可交互的图表。将信息或数据可视化，助读者更深入直观地理解其含义。

更有效但低调的交互。

交互在Web设计中是如此重要，为了让用户与界面更好地沟通，许多设计师过度地重视了交互，特别是只关注细节而失败于全局。大量交互行为被过度设计，变成了用户的负担。如果信息能够被更好的匹配或呈现，许多交互是可以避免的。未来，设计师们力求通过优化信息架构和使用流程去减少交互，更成熟地运用情境菜单（上下文菜单），将操作反馈处理得更为隐形和自然。

交互的设计会向着直接有效、更低调、提升使用乐趣的方向发展。

coda.co.za 这个网站的交互反馈，非常简洁优雅，效果自然。

当鼠标移到某张CD上的时候，它信息会通过隐藏右边的CD显示出来。这种反馈比悬浮框更自然。

与物理世界操作经验吻合的交互体验

越来越多的Web操作允许快捷键的参与。允许快捷键可以提升高级用户操作效率，增加使用乐趣，同时也是为了更好的向无障碍访问的方面进步，照顾视力不好或无法鼠标的用户。

原文链接: http://blog.xiqiao.info/2010/07/19/719

结语：去哪里捕捉和观察趋势。

相较于国外的这一波波风潮，国内的设计师的行动并不多，许多原因使他们面对这些变化，或保守或滞后。同时，许多生硬的抄袭和模仿也正在伤害国内的设计行业，从Templates (许多是过时且侵权的) 开工、抄捷径的“拿来主义”不光在腐蚀一个设计师的创造力，也在折损着整个行业从业者的价值。

我希望年轻的设计师尽可能多得去关注国外的专业Blog和作品画廊站（Gallery），低头干活的同时，抬头看路。这样才能在团队中提供自己的专业判断，而不只是一个被动的“美工”。

专业Blog：

• www.smashingmagazine.com 可以说是如今全球内容质量最高的Web设计专业Blog。订阅量接近20万。设计师们一定不可以错过。
• sixrevisions.com 为首的多名技术专家共同撰写的blog，提供大量对Web设计师和开发人员有用的技巧、教程和资源。还有很多前瞻性的分析文章。
• abduzeedo.com 更新量很大,如果你设计卡壳了,这是寻找灵感的好地方.

作品共享和灵感采集站：

• deviantart.com 全球最大的设计师展示和分享创作的平台。其网站本身交互设计也非常有特色。
• ffffound.com 图片类的delicious服务，一个你永远不可能拿到注册码的社区，但是其中活跃着大量全球一流的设计师和创作。

Web设计画廊（Gallery）

designshack.co.uk （可按配色、布局和类型进行筛选）

reeoo.com （可按配色进行筛选）

siteinspire.net （可按样式、主题、网站类型进行筛选和排序）

coolhomepages.com （可按类型进行筛选和排序）

原文链接: http://blog.xiqiao.info/2010/07/19/719

改版，是一个问题。越来越多互联网公司产品人员意识到这个问题，无论是豆瓣的改版，还是Facebook的改版都遭到了用户的疯狂抵制。

　　和传统1.0网站相比，2.0网站用户的力量被无限放大，也意味着用户在网站发展中拥有越来越多的话语权。任何的所谓改版，都会一定程度上影响已有用户的使用习惯，可能遭到用户的大规模抨击。

　　这意味着，网站改版也许需要更多的智慧和精细化运作。

　　为什么需要改版？

　　一个网站刚成立的时候，总是陌生和懵懂，对于网站的核心价值有着最忠实的体现，这时候的网站可以被称为产品的初级阶段。

　　伴随着用户需求和商业需求的变更，我们会给网站逐步作一些调整，以便更适应网站一步步发展的需求。当这些小的改变积累到一定程度，之前所做的产品界面设计和网站架构已经不能适应需求，这时候就需要改版。

　　这一过程有点类似操作系统，我们刚开始接触XP的时候发现很爽，但是随着时间的进步XP越来越不能满足我们得需求，这时候微软就会给它打一些大大小小的补丁，以便它能够更好地工作。但是如果有一天，XP真的不能满足用户和公司商业价值的需要，那么这时候就需要推出下一版操作系统，就是现在正在普及的Windows 7.

　　网站改版是为两个东西服务：用户需求和商业需求。如何顺利的改版，我们来看一下有哪些需要注意的要点。

　　1. 改版前做好需求调查

　　网站改版和很多产品开发一样，会遇到需求不断变更的情况，这意味着很多时候可能需要重复劳动，甚至有些需要完全推倒重做。

　　所以这时候就突出了改版需求调查的重要性，你需要从用户调查、数据挖掘等方式收集用户对功能的需求，同时你也需要和管理层确认有关公司整体发展的改版需求，然后把几方面的改版需求作汇总整理，供改版的时候使用。

　　完善的需求调查，对于网站改版的积极意义主要有两方面：一是让产品团队在进行产品设计和开发的过程中，做到心里有数；二是减少由于需求变更带来的时间和用户损失。

　　2. 能不改尽量不改

　　网站改版的过程中，可能会影响用户使用习惯部分，能不改尽量不改。网站改版是为了做加法，为了让网站越来越好，而不是做减法。

　　而用户的好恶，正是检验网站改版是否成功的一个重要标准。所以如果，有一些受到好评的功能，如果与商业利益或者高层意志相左，最好能够保全用户的使用习惯，再不济也要给用户足够的适应时间。

　　3. 渐进式演进

　　多网站改版，高层很喜欢沉浸在整站焕然一新的喜悦之中。但是这种彻头彻尾的改版，往往会导致用户的大量流失，辛辛苦苦培养的用户可能会因为冒进的改版消失殆尽。网站越大，损失越重。

　　有一个很著名的实验叫”温水煮青蛙”，我们的改版也要稳稳地一步步进行，给用户一段时间去缓冲，让用户学习和适应新功能。

　　如果需要改五个频道，那就一个一个频道地改；如果需要改十个功能，那就一个一个功能地改。

　　在改版之前应该先吹风，让用户知道哪些功能会改，会改成什么样，改过之后有什么好处。然后在这个过程中你们可以收到用户关于改版的各种看法，然后籍此评判改版的可行性。

　　4. 上线并不意味着改版的结束

　　很多朋友，在网站改版上线之后，总会松一口气，然后心理说总算完了。

　　但改版是手段而不是目的，迎合用户和满足商业需求才是重点。这也就意味着上线不是终点，而是一个新起点。

　　然后大家应该广泛收集各方关于改版的看法，这些看法的来源包括但不仅限于用户、同事、业界友人，从中筛选出合理的建议，然后再对网站进行调整和改进。

　　来源：XJP投稿，原文地址。

原创文章如转载，请注明：转载自月光博客 [ http://www.williamlong.info/ ]

本文链接地址：http://www.williamlong.info/archives/2204.html

要做一个漂亮的LOGO，或一个有创意的LOGO，对于大多数平面设计师来说并不困难。但要做一个成功的LOGO就相当困难了。这里有12条参考标准，可供设计师或客户去判断一个LOGO的好坏。

1. LOGO大要好看
当 一个logo大大的出现在户外看板上，它必须清楚的让所有人都一目了然，这是logo具有清楚辨识度的基本原则。

2. LOGO小要好看
当logo出现在明片上，比一个拇指还 小，因此设计一个logo，请用直径两公分的大小试试看，是不是缩小也一样好看。

3. LOGO黑白要好看
当你传真公司文件，logo颜色会变成 黑白，你的logo因该像Nike、Mac，在经过最糟糕的复制影印方式后看起来一样清楚。

4. LOGO可以有各种颜色
Nike的标准色是红色，但你也可 以看到蓝色、绿色或是黑白各种色彩。同样拥有篮球、棒球、高尔夫球、网球甚至F-1方程式赛车系列等产品，都具有独特性，这些色彩纷陈的广告却不会让你对 于Nike的品牌有任何混淆。因为一个品牌精神不是单靠—颜色建立的。

5. LOGO可以轻易的画出来
拿起比来，你可以很轻易的画出Nike的弯勾、麦当劳的M，可 以随手画出来表示你的LOGO也很容易被记住。

6. LOGO在CMYK与RGB都很好看
印刷用CMYK，电视或电脑萤幕用RGB，你的logo会经常出现在杂志、电 视或电脑萤幕上，在没有特别色的情况下，LOGO要再这些寻常的媒体上一样好看。(就是要你别用特别色啦！例如萤光色。)

7. LOGO能够做成动画
你不能忽略网路的广告行销盛 行，LOGO具备容易转换成动画的条件，在网站上的活泼多变更容易吸引注意。

8. LOGO具有国际画质感
选择一个放诸四海皆宜的图案，像是POLO的马就不会有任何文化 代沟，要让全世界都看得懂的LOGO是最基本的。

9.LOGO代表的是企业精神
Nike的弯勾不代表一双鞋子，这是取自希腊神话中女神的翅膀，许多企业跨足不同的领域； 房地产、保险到食品都隶属同一集团，所以LOGO表现企业精神，而不是画出企业的所有营业项目。

10.LOGO具有广泛的应用性
GUCCI的logo具有多种的 应用性，它可以放在牛皮、金属、陶瓷、铁鍊、塑胶等各种不同材质上。为了你公司生产的产品週边商品方便，LOGO必须具有容易复制在特别材质的特性。

11.想让人穿在身上
一个好logo最重要的判断标准，是印在 衣服上会想要穿在身上PRADA、Nike、CHANEL，都会想要迫不及待想要穿出去？

(但老实说，其实 我自己是不认同第11点的，因为就算我喜欢麦当劳或是7-11的LOGO，我也不会把它穿在身上，除非我很想要成为麦当劳的员工！！！ )。

以上原文: http://yyoyya-deer.blogspot.com/2007/09/logo.html

12. 不要在设计LOGO之前太在意你LOGO要包含什么寓意
补充一条个人的看法：很多客户和设计师都喜欢在设计LOGO之前，想着要让LOGO传达什么寓意什么精神什么文化。其实大多数时候，你不必去为这个事儿瞎操心，你可以把流程倒过来：等LOGO出来后，再把你的LOGO和你想要的寓意、精神、文化扯在一块儿。你会发现，乳沟是挤出来的，故事是编出来的，传说是扯出来的！

用心的人一看这个标题就是个悖论，SEO咨询不就是SEO服务吗？SEO服务难道不包涵SEO咨询？

几年前，就有人预测过，对将来SEO服务很不看好，原因很简单，因为无法保证它的效果。以及一些其他不可控因素。

这里牵扯到两个概念：1.SEO服务；2.SEO服务的效果；

什么是SEO就不用多说，它的价值已经被很多人认可，都知道SEO是很有前途的，也都知道SEO服务是有风险的，那么，这样的SEO服务究竟是什么呢？

答：一切跟SEO有关的SEO技术、SEO策略、SEO咨询、SEO培训、SEO指导、甚至SEO评论统可称为SEO服务！

那么，也就是说，关键词排名、整站优化、SEO指导、SEO培训、SEO顾问(也称SEO咨询)，等等这些都是SEO服务。

而上文我们说的无法保证的效果可能也仅仅是一个关键词排名(好多SEOer都这么认为，特别是在百度上)。其实说个实话，其他的SEO服务也是没有什么可保证而言的。这个东西，它是在走一个概率，也就是说，你原先的情况如何，经过我们这么一优化，可能会比你原先的要好一些、顶多翻上几倍，至于能好多少时间？能好多稳定？天知道！(最典型的就是问，我的词能否在百度排到第一页的第一位，否则，你的这次SEO服务，就是失败的)

小欧明确告诉存在这种想法的被服务者，根本无法保证！为什么无法保证，不难理解，因为所从事的这些种种服务，说白了它是一种经验之谈，以前管用，现在可能也管用，至于将来还能不能管用，真的没法去衡量。(特别是在这样一个分新秒异的互联网世界)

keso不是有个5G咨询的服务公司么，不信你问他，看他是否给你提出这样的保证：只要你在我们5G上咨询，接受我们5G的服务，保证你们公司创业成功、融资成功、3年之内成功上市…… 等等这样的一些承诺。

如果还想不明白，举个很简单的例子，就好比一个会算卦的人，他告诉你：几日几时几点几分你到哪哪哪，那里肯定有一堆金子在等着你，然后，他说要收你一点算卦费！放P！这不是犯傻么，他既然知道哪里有金子又何必去告诉你，让你去拿呢？这样的骗子言论根本经不起推敲和质疑。

任何一件事情的成功，或者任何一次项目的成功，它是有很多不可预知的因素和众多即将产生的未知数，正所谓，要天时、地利、人和都要达到。这是最基本的三大变数。我们服务的客户中有很多人，喜欢以成败来论英雄。告诉你吧！成功了，屁都是经验；失败了，经验都是屁(忘了这是谁说的)。

拿到我们SEO服务上来说，首先我们可控的是你的网站，我们可以让你的网站达到最佳用户和搜索引擎体验！但是，我们无法阻止和改变搜索引擎算法的停止不动和同行竞争对手的急剧增加(甚至恶意攻击)。

有好多人自诩的SEO成功案例，不是因为他优化的有多么牛逼，而是压根就没人跟他竞争！

所以，在网上不管你找什么样的服务，网络推广服务也好，SEO服务也罢，千万不要问能否保证效果这样的半吊子话。如果对方告诉你不能！说明他还良知尚存(说白了，人家也根本不想服务你这样的客户)。如果对方告诉你绝对没问题，可以保证，然后拿出一大堆的案例告诉你怎么怎么能。

那么，恭喜你！从此不会再上当了。
=============================================

作者：小小SEO践行者·小欧

原载：SEO服务与SEO咨询

来源：http://xiaoo.net/2010/05/13/1256

尽管深色调的设计风格能做到引人注目的效果，但很多设计师不知道如果有效的使用它来打动、吸引浏览者。深色调网页设计经常出现的问题是不易读、没有吸引力、很少打破传统的设计模式。

这片文章，我们将讨论一些如何让你的下一个深色调网页设计更能吸引、打动广大浏览者的方法和技巧，真正做到让你的设计表达你的创意。最近的调查显示有超过47%的大众用户更喜欢亮色调的网页设计。内容的可读性是主要原因。大多数的用户不喜欢亮文字内容显示在深背景上，这样的对比效果是比较刺眼的，给人不舒服的感觉。 

相比之下，有10%的设计师通常选择深色调来设计网页，同时36%的人认为应该根据网页的具体风格要求进行选择。那么，哪个是正确的答案那？归结起来，每一个人都有自己的意见，事情就是这样。但是有相当一部分用户认为重色调的设计是可以接受的，有时是设计首选。作为网页设计师，我们不得不考虑如何有效的设计深色调的网页给我们客户与自己。信亮色调网页设计的爱好者们希望深色调的网页设计应该更易阅读、有好的用户体验。

多使用留白
或者应该叫“留黑”？合理有效的使用留白对于任何风格的设计来说都是非常重要的。但对于深色调的网页设计来说它则是必须的。
深色调的网页设计给人总体的感觉是“沉重的”，如果整体布局结构凌乱更增强了给人沉重的感觉。下面展示了一些比较受大众喜欢的深色调网页设计，他们合理使用了留白达到很好的设计效果。
Black Estate是互联网里深色调网页设计的一个而已，设计确实很棒并值得我们研究学习。设计自始自终都在合理、有效的使用留白，如何在设计元素周围有效的使用了留白，从而设计出了这样讲究的网页。
logo标志周围留有大量的“留白”，作为浏览者我们首先看到的就是它，其次看到的才是主要内容与右边的瓶子。正如你所看到的，留白是用来突出瓶子上的亮文字内容与内容标题。

Tictoc的主要特点就是它在内容、装饰图片周围留用了大量的“留白”，当我们继续往下浏览时，我们看到使用了很少的留白，从而将我们的注意力集中在到下面的具体内容上面。
这里的关键是，留白起到了引导的作用，逐步引导用户浏览这个页面。
网站通过使用大量的留白从而增加了深色调设计的层次，留白仅仅是为了实现深色调的效果而已

Mark Dearman网站的框架结构自始自终采用灵活的、均匀的分布式布局进行留白。
留白为每一个相邻的内容板块里面的内容提供了大量呼吸、停顿的空间。当进入到下一板块内容的时候，它们之间的留白是一个很好的休息地点。
留白对于深色调网页设计来说是必须的，它不但有助于解决布局的凌乱、散乱，同时也是网页设计增强整体感很重要的元素。

正文内容留白
深色调网站内容的易读性是不喜欢深色调网页用户所担心的问题。设计师必须将更多的精力放在文字本身上。
在整个设计上，通过调整段落与段落之间的距离大小、行距来增加留白是提高重背景网站文字内容可读性的一种方式。
下面展示的例子介绍了元素与元素之间留白、元素本身周围留白在深背景和亮背景上的对比情况。

增加字体大小是提高深色调网页内容可读性的另外一种方式，同文章以上介绍的方法一样，大号的字体能增加其本身及周围的留白，字体越大其周围的留白空间就会越大。
比如下面的字母“a”，当字体增大时，其周围的留白就会随着增大。无论是a周围的空间还是其内部的空间，还是与上下内容之间的空隙留白都跟着一起变化。
注意，在淡色调上阅读小文字内容要比深色调上容易的多。当在新的网站上设置字体的时候，一定要事先虚拟一些内容以确保其清楚易读。如果不清楚的话，可以尝试增加一下字体的大小来调整。

文字对比
一些人普遍认为大多数的深色调的网站容易导致眼睛疲劳。设计师们或多或少的忽视了对比。如何找到一个平衡点那？
如果你在一个漆黑的屋子里，突然遇到很强的亮光你会感觉不适应的。但是，如果你在一个稍微有点弱光的屋子里再遇到亮光的话应该会好一些儿。这个规则同样使用于网页设计。
找到一个完美的对比，也就是说在深背景于亮字之间找到一个对比平衡点。
下面的例子简单的说明这点，如何平衡字体与背景之间的对比度。注意当让背景颜色变浅时其上面的文字也会一起变浅的。
找到文字与背景的对比平衡点是比较困难的。
为了找到最终的平衡点，我们使用不同的程度的背景颜色做试验。背景不要是纯黑色，文字不是纯白色是试验的最终平衡点。

字体的处理
字体在设计里面扮演着非常重要的角色，尤其在深色调布局设计里面更应该深思熟虑的。下面的图片展示了14点大小的serif和sans-serif字体在深背景上的效果。
sans-serif字体明显更清晰、易读一些。但是一部分设计师让然是应用serif字体。
仅仅放大sans-serif字体这一个方法，从而让其周围留有更多的留白，并让其清晰易读。

下面是在写此文之前的网站论坛的界面截屏。网站同时使用了serif和sans-serif两种字体，但是使用它们是有技巧的。
大字体比如标题、导航等使用了serif字体来增加其效果。为了比较好的对比、提高可读性，body里面定义了sans-serif字体。

使用少的配色方案
为了让深色调的设计看起来更干净、整齐，设计师应尽量选择少的配色方案。
通过一下几个简单的例子，过多的颜色配色方案针确实无意于深色调设计的，因为这样的配色对比太强烈了。
保留一种或二种颜色系

部分设计师喜欢用对比强烈、刺激的配色方案，当然这样也是可以的，但要能够恰如其分的使用好。
总体来说，颜色很容易让网页界面花、杂乱，本来深色调的网站颜色就很重了。所以在用色方面更应该慎重一些！

中文原文：深色调网页界面设计注意事项
英文原文：The Do’s and Don’ts of Dark Web Design

1. 所有的xhtml代码小写
2. 属性的值一定要用双引号(“”)括起来，且一定要有值
3. 每个标签都要有开始和结束，且要有正确的层次
4. 空元素要有结束的tag或于开始的tag后加上”/”
5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6. <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7. 给每一个表格和表单加上一个唯一的、结构标记id
8. 给重要的区块加上注释,如：
9. 给图片加上alt标签
10. 所有的标签必须进行合理的嵌套
11. 根元素前必须有元素，宣告使用那一种DTD
12. 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace

 
CSS样式表规范：

1. id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)
2. CSS样式表各区块用注释说明
3. 尽量使用英文命名原则
4. 不用加中杠和下划线
5. 尽量不缩写，除非一看就明白的单词

 
CSS命名规范这段时间由于工作的需要对CSS的命名做了一些研究，主要是想让作出的文档等规范，更能让人看懂和读懂。