玛雅盒子

Peter Elson 科幻类插画欣赏

aRui — Sat, 14 Aug 2010 23:02:10 +0000

Peter Elson是一个很有才华的插画师，遗憾的是已经过早的去世了，从他官方网站上看，对于人的一生来说，留下来的作品并不算多，但是这些飞机的画面还是让我记住了他。

官方网站：http://www.peterelson.co.uk/

相关日志：

Fully Illustrated Web UI

aRui — Sat, 03 Jul 2010 08:47:58 +0000

一套非常优秀的WebUI作品，整体很精致的感觉，不管是视觉冲击力很强的游戏界面设计，还是以线面为主的简洁型站点，非常讲究、非常细致、非常严谨、非常从容、非常成熟，对，我就是想拿所有的赞美之词来形容他的好，是因为很久没有一组作品给我这种启发，如此之靠近，如此之气味相投，如此之完美。渲染气氛的手法，质感的把握处理，页面版式的安排都非常值得学习。看完之后我忍不住自问：“究竟什么才是我想要的？”

Fully Illustrated 出品，创办人Michael Heald在各领域获奖无数，他创办的Fully Illustrated 被评选为全球99个最佳创意机构之一，作品汇编成册《Creative Agency Awards book》，有兴趣的可以搜索之。转贴具有代表性的一些作品，都附带有网址，可以点击查看。

http://indiecade.com

http://quickfingers.net

http://joystickgenerals.com

http://itunes.apple.com/gb/app/super-turbo-action-pig/id360371122?mt=8

http://raptorsafari.com

http://chillingo.com

http://haypi.com

http://www.littleguygames.com/battleblasters/

http://bit.ly/5mwbUA

http://voodoocontrollers.com

http://pearlharbor-game.com/

http://golgothstudio.com

http://thundergameworks.com

http://nucleardawnthegame.com

http://www.alldayfoundation.org

http://fieldrunners.com/

http://fishingcactus.com/

http://naturalselection2.com

http://shankgame.com

http://vondutch.com

http://blurst.com

http://kleientertainment.com

http://israelidonije.com

相关日志：

Peter Elson 科幻类插画欣赏

解读QQ界面设计

aRui — Sat, 03 Jul 2010 00:25:44 +0000

设计方面，一直以来对QQ相关产品页面的设计都比较的中意，在国内的几个知名站点可以说QQ也是独树一帜，设计在QQ里面的渗透算是比较彻底的。下面这些内容是aRui在小组里做的一次分享，内容比较局限，也比较浅，花了点时间整理放上来，纯代表个人观点，旨在学习。

分享内容要点：
一、对QQ界面的直观印象
二、QQ产品页面的细节设计
       a) ICON的应用
       b) 焦点图的设计
       c) 字体设计

一、对QQ界面的直观印象

“直观印象”通常是视觉设计师会得到的最初需求，也是设计师工作进行中最需要表现的关键点之一。

一般情况下项目进行到视觉设计阶段，需求方（产品经理、领导等）会向设计师提出一些类似于“时尚、大气、简洁、科技、酷……”的设计关键词，也有人会直接对你说“我就喜欢apple的网站，我就希望是这样的”，很显然，这些感性的需求会直接影响到我们下面的工作。

需求方在提出这些要求时是一个相对模糊的、抽象的、理想化的阶段，这个阶段要求的东西越多给设计师的空间也就越小，我们会受到很多东西的限制，除了来源于需求方的感性要求，还有一些在最初不会被表现在原型线框图上面的问题。当然并不是说他们不应该提这些要求，相对具象化的要求也会给设计师明确的方向，关键在于设计师在界面设计的过程中如何表现把握这些关键词。

上次的北京车展专题界面设计就能够找到两个不同方向的典型例子，新浪和QQ。新浪车展火热且隆重，灼灼逼人的气势给人留下了比较深的感官印象；相对而言，以蓝色为主调的QQ车展在视觉上一直坚持着自己的特点，简洁流畅、清爽舒适也很是值得学习。同样前段时间的QQ世博会专题也透漏着这些的直观印象。

以QQ世博会专题为例，aRui在这里找了几个点来解析设计师是如何表现、把控页面的最终印象呈现。

1、颜色

首页题头用很夸张写意的手法，融合世博标志性建筑，疏密有致，整体感觉简洁且从容；
专题并没有用过度刺激的颜色来强化视觉，相反配合专题图用了很中性的白色背景，优雅、平和。白色可以说在界面设计中是永远流行的主色调，也是百搭百配包容性极强的辅助颜色。

链接文字、栏目区块分割线、右侧栏底色等等细节都应用了不同纯度的蓝色，正是这些颜色给了专题整体的大色调，内容既是形式，少了很多干扰。
QQ世博专题在颜色上给人的直观印象：

白色的应用：大面积的背景
蓝色的应用：专题头整体主色调、链接文字、栏目区块分割线条、右侧栏底色、栏目头背景颜色
绿色的应用：专题图局部颜色、ICON的局部色彩、视频ICON的颜色、日历当前、栏目头图案
红色的应用：专题图局部颜色、广告内容、重点内容标题、突出信息文字
灰色的应用：不带链接的摘要文字、辅助数据等

绿色的应用：提神、精致

红色的应用：醒目、刺激

2、版式布局

不止一次的说到了QQ的版式布局，整体的大结构还是遵从了三栏的格局，然后在区块里面加以变通，最终呈现的页面在由上而下的扫描阅读中有很好的连贯性，多变的图文搭配又让浏览不是很疲劳。相比上次车展专题，这次的首页版式多了很多样式，看起来略显得有些乱，页面的整体感稍差，这也是这么设计的弊端。

灵活的版式应用：

二、QQ产品页面的细节设计

和个性专题、活动页面以及需要定制的特色界面不一样，门户网站（包括产品）界面的设计有很大局限性，留给设计师的空间非常有限，要在有限的空间表现个性特色是有一定难度的。QQ的界面在这方面做得也是相当不错的，包括QQ旗下众多产品界面的设计。尤其是“细节设计”的体现，在QQ的各类页面里面非常突出，也正是这些“细节设计”让界面直观上更具品质。

在这里主要是针对QQ产品页面，从以下三点来看看“细节设计”的体现：
      a) ICON的应用
      b) 焦点图的设计
      c) 字体设计

a) ICON的应用（关键字：标识型、说明型、装饰型）

b) 焦点图的设计（关键字：减法、大小）

QQ的焦点图普遍颜色透亮、画面干净、主题突出，有很明显的自身特征。先来看一些例子（来源于QQ各产品页面）：

从自己的切身体会总结：在此类设计过程中很容易进入一个误区，为了使图像画面达到一定的视觉效果，也就是“好看”，设计师往往会花很大精力去作背景、光影、图案等效果（有时候需求方也会提出类似的要求），结果出来的效果可能会是百花争艳，而起不到准确表达和强化印象的作用。

如何让画面一枝独秀，同时又兼顾信息及功能和视觉表现，这足矣让让设计师进入纠结的状态。如果一个画面有非常多的元素，这就表示用户在看的时候会有非常多的视觉焦点，设计师需要通过设计手法引导用户的进行有序阅读，并勾引用户进入、点击，而不是让用户迷失、寻找，而最终忽视离开。

总结要点：只留下必须要表现的内容，去掉或简化一切不需要的元素。

c) 字体设计（关键字：变体、效果、装饰）

“字体设计”有一定的标识性，在内容比较集中的活动页面以及产品页面上通常会用到。恰到好处的“字体设计”可以对内容起到很好的解释作用，也能很大程度的提高页面的视觉冲击力，可以说“字体设计”是提升页面品质很重要的手段之一。

收集了一些比较有代表性的字体设计样例，同样来源于QQ各产品页面。

在“细节设计”方面有些韩国网站做的还是不错的，并且韩文的字形结构和汉字有些类似，和英文不一样，同属于方块字形，所以在页面的最终呈现上还是值得参考的。列举一些比较具有参考性的站点供参考（以门户类居多），大家有空可以研究研究。

http://www.naver.com/
http://www.hangame.com/
http://me2day.net/
http://www.mnet.com/
http://www.daum.net/
http://www.soribada.com/
http://www.nate.com/
http://www.club5678.com/
http://www.imbc.com/
http://www.tistory.com/
http://www.allblog.net/

也许分享内容很平庸，整体结构很杂乱，解读点很表面化，但是aRui每一次都是很认真的面对，对个人来说每一次都是一个学习和积累，也是尝试。由衷感谢你的阅读，不管你是怀着仰视、鄙视、轻视还是近视的眼神，谢谢～～

随机日志：

千奇百怪网站聚合

aRui — Sun, 27 Jun 2010 04:31:58 +0000

从论坛到博客，再到微博、SNS、聚合，还有现在甚是流行的团购，不想说我们的抄袭能力，不过好的模式的传播速度的确是让人惊讶。搜集了一些国外有趣的站点，可能面对的群体不一样，但是都有一些比较添彩的地方，细细品味一下吧！你有什么有趣的站点欢迎留言提供：）

写给未来的信 Futureme
http://futureme.org
其实很多邮箱服务都会提供定时发送的功能，但是Futureme把此功能单独放出来，更加的强调赋予了他特殊的意义。你想过未来某天收到一封过去的自己发来的电子邮件吗？FutureMe网站便是提供这种未来邮件服务，最感人的一封邮件来自一名阿兹海默症患者，他希望保存自己可能会逐渐失去的记忆。而最多的邮件则来自于将要出发去前线的军人，他们无法确定自己还能否活着回来。

IQ测试
http://iqtest.dk/
以图形测试为主题，题目本身很有意思，满分为140，正常为100，共三十九道题。aRui手机上还保留着一个很经典的类似游戏《BrainChallenge》，感兴趣的朋友有可以试试。

内衣商城 knickerpicker
http://www.knickerpicker.com/
英国的一家在线购买内衣的网站，你可以挑选你喜欢的内衣内裤，然后女模特儿会穿上它们走来走去，并且你可以让她们转身，或者是再走近一点以便你更直观的观察内衣裤的着身效果，对这才是真正的用户体验。

一次性便签 Privnote
https://privnote.com/
很简单的一个网站，犹如他的功能，甚至是不需要注册，并且有中文支持。你只需要在首页输入框内写上你要发送的信息，点击下面的“创建新标签”按钮，会得到一个链接，将此链接通过email或者qq给你的朋友。当他一读信息，你即刻会得到通报，同时此链接只有一次有效，阅读后即刻自动销毁。

我要和你生小孩 Makemebabies
http://www.makemebabies.com/
上传你和他/她的照片，你们就可以生小孩了，当然只是照片。对方可以是自己喜欢的人、同事、上司，甚至是可以选择当红明星大腕，友情提示：结果纯属虚构，如有雷同纯属故意。

藏宝寻宝 KDDI
http://www.kddi.com/smile/takara/
一个日本小站，你可以挑选一个自己喜欢的玩具，用铁锹把它藏在树林或公园里面，如果被别人找到系统将会通知你。在你藏好自己的宝藏之后，如果被5个人发现，可以继续藏下个宝藏了。在寻宝首页可以查找别人的宝藏，如果找到别人的宝贝之后，会有礼物哦。

最小的网站 guimp
http://www.guimp.com/
确实是很小，网页有效区域只有1平方厘米，里面包含游戏、相册、博客，甚至是区分了html和flash版本，麻雀虽小五章俱全啊，不过很累，眼睛很累~~

女性网 wowOwow
http://www.wowowow.com/
三个女人一台戏，一群女人呢？？？这个网站可想而知，Joni Evans创建了一家面向四十岁以上女性的网站，是一个女人们的谈论文化政治、分享趣闻轶事的网站，嗯，应该很热闹，必然很热闹。

预测死亡时间 The Death Clock
http://www.deathclock.com/
http://www.forclear.com/life/deathclock/（非官方中文）
输入出生日期，选择性别、BMI范围（可以通过页面下方输入身高、体重计算出）、生活态度和是否抽烟，点击查看按钮就可以死亡时间，并且还以倒计时读秒的形式展示。结果并不可信，但是提醒珍惜时间，珍视生命，提醒人们生命是如此的短暂。

………………………………………………………………………………

你有什么好玩的网站吗？留言分享一下吧：）

随机日志：

被诅咒的宝藏

aRui — Sun, 20 Jun 2010 00:56:55 +0000

对这种塔防类的小游戏总是爱不释手，可玩性很强。《被诅咒的宝藏：别碰我的宝石！》又是一个经典的塔防，花了两个早上的时间，还有两关没有攻克，相比较《Xeno Tactic》简单了不少。

flash游戏在线玩耍（更新为1.05版本）>>

游戏说明：
——————————————————————————————
不同的塔需只能建在对应的场地，

綠塔：（草地）
Den：一般的箭塔，LV4時可以進化成Ballista Den或Orcish Den
Ballista Den：努砲塔，可以讓一定範圍的敵人受傷，LV7時可以進化成Catapult Den
Catapult Den：擁有三重射擊能力的強力塔
Orcish Den：有一定機率暴擊的箭塔，LV7時可以進化成Hunters’ Den
Hunters’ Den：有一定機率可以再攻擊一次的塔
　
藍塔：（雪地）
Crypt：可以儲存精神彈並追蹤敵人攻擊，LV4時可以進化成Chilling Crypt或Ghost Crypt
Chilling Crypt：有一定機率可以使敵人恐懼而逃跑，LV7時可以進化成Fearful Crypt
Fearful Crypt：附加連鎖攻擊技能的強力塔
Ghost Crypt：擊中敵人時會吸取法力，LV7時可以進化成Banshee Crypt
Banshee Crypt：一定機率可以抵銷敵人的特殊能力
　
紅塔：（岩石）
Temple：以光線連續攻擊的塔，LV4時可以進化成Evileye Temple或Burning Temple　
Evileye Temple：攻擊敵人後，可以使敵人受到攻擊的傷害更強，LV7時可以進化成Beholder’s Temple
Beholder’s Temple：殺死敵人時產生屍爆，傷害附近的敵人　
Burning Temple：利用熔岩同時攻擊射距內所有敵人，LV7時可以進化成Hellfire Temple
Hellfire Temple：能緩速敵人一段時間

除了塔之外，玩家也能使用魔法來輔助攻擊，施展魔法所需的法力會隨時間慢慢補充：　
Cut out：可砍掉一個地形上方的樹木
Frenzy：一定時間內大幅提升所有塔的攻速
Meteor：使用殞石攻擊一定範圍的目標

當所有的敵人都殺光之後就會過關，過關會給予玩家評價，想要得到最高評價必須所有寶石完全沒有被動到。評價越高給的經驗也會越多，升級後可以利用點數來強化技能：
　
綠技能：點了可以被動強化攻速
Gold Vault：增加每個關卡一開始時的資金
Height Advantage：增加蓋在祭壇上塔的攻擊力
Mining：每個關卡增加一顆寶石
Cut Down Study：降低施放Cut Out法術的法力
Cut Down Mastery：施放Cut Out法術砍樹木時，可得到資金
Marksmanship：提升Orcish Den塔和Hunters’ Den塔的暴擊率
Bounty Hunting：提高殺死敵人獲得的資金
Warchief：降低綠塔的升級成本，並可以獲得更高的經驗
Poison Mastery：追加綠塔擁有毒雲的技能
　
藍技能：點了可以被動強化射程
Mana Stock：增加每個關卡一開始的法力
Mana Pool：提高玩家法力的最大值
Soul Vault：增加藍塔精神彈的顆數
Frenzy Study：降低施放Frenzy法術的法力
Frenzy Mastery：提高Frenzy法術的效果
Mind Control：提升Chilling Crypt塔和Fearful Crypt塔的恐懼率
Mana Extraction：提升法力的產生率
Lich King：降低藍塔的升級成本，並可以獲得更高的經驗
Ice Mastery：追加藍塔擁有冰凍的技能
　
紅技能：點了可以被動強化攻擊力
Basic Training：提高所有塔獲得的經驗值
Scorching Treasure：偷走寶石的敵人，每秒會受到一定傷害
Adoration：建造紅塔時可以獲得額外到法力
Meteor Study：降低施放Meteor法術的魔力
Meteor Mastery：提高Meteor法術的傷害力
All-Seeing Eye：提升Evileye Temple塔和Beholder’s Temple塔的傷害
Return Portal：寶石掉落在地上一段時間之後，自動回到山中
Demon Lord：降低紅塔的升級成本，並可以獲得更高的經驗
Fire Mastery：追加紅塔擁有燃燒的技能

相关日志：

《Xeno Tactic》经典塔防

京西有村·爨底下

aRui — Sun, 30 May 2010 14:01:30 +0000

在北京正西约90公里，穿门头沟、妙峰山、雁翅镇、军饷乡、清水河到斋堂镇有这么一处古村落，据悉已近500年历史，现仍保存明清时代院落若干，高低错落的民宅依山而建，看似古堡又似山城，质朴的碎石巷道，曲径通幽，把村落划分的参差不齐错落有致。这里就是爨底下，一座建于明朝永乐年间，有500多年历史，至今仍保留着70余套、500余间明清时期的四合院民居村落。

每次出游，必找有水之地，aRui个人对水的情节很重，应该是因为儿时故乡的那条条河流留给了我无限的画面记忆，在这有水则灵嘛，但是爨底下是另外一番景象，这里完全没有谁，只有这些被时间洗礼过的石头房，甚是难得京郊因该很难再找到这么一个把自然景观与人文景观结合得如此恰到好处的地方。我们一行几人自驾车前往，在午后的阳光下感受这份返璞归真的休闲。

+ 拍摄： aRui
+ 时间： 2009年05月02日
+ 地点： 门头沟爨底下村景区
+ 原文： http://mayabox.com/2010/05/cuandixia/

第一幅

第二幅

第三幅

第四幅

第五幅

第六幅

第七幅

第九幅

第十幅

第十一幅

第十二幅

第十三幅

第十四幅

爨底下景区官方网站：http://www.cuandixia.com/

相关日志：

国外设计开发网站精选

aRui — Sat, 22 May 2010 06:45:35 +0000

看看外面的世界，刺激一下封闭的自己。近百个优秀的国外设计开发网站推荐，涵盖了Web设计，平面设计，Flash和Flex，设计资源等各方面。

常用设计网站

Spunk United 非常出色的杂志，里面提供的都是世界顶级设计师的专访，灵感以及文章还有更多。
FreeLance Switch 这个站点上的所有资源都是开放免费的，你肯定要知道:)
Computer Arts 这是一个非常优秀的网络杂志，中文版杂志是《Computer Arts 数码艺术》
David Airey 一位专业的图形以及logo设计大师分享他所有的知识在这儿，可以从这里学习到很多知识。
Behance 可以给你带来设计灵感，这里聚集了所有来自世界上所有的设计，非常酷吧
Pdf Mags 非常出色的杂志，里面提供的都是世界顶级设计师的专访，灵感以及文章还有更多。
Graphic Design Forum 这是最活跃的图形设计场所，比较针对于设计初学者。
Design Is Kinky 这是来自澳大利亚的一个纯粹有关设计新闻和通用设计的站点
Freelance Folder 一个Blog社区，发布的都是常用型文章，非常丰富。
Bittbox 提供大量的设计资源，如教程，笔刷，矢量图还有更多 …
Vandelay Webdesign 为网络设计师提供大量的非常易懂的文章资源和技巧。
You The Designer 非常齐全而且多元化的有关设计的文章
Design You Trust 这个站点展现的来自全球的优秀设计，这些设计也都代表了设计的走向，这儿还有非常棒的设计资源，设计杂志和blog文章。

Web设计网站

Noupe 一个绝对出色的关于网络设计以及网络开发的站点(CSS&ajax)
Smashing Magazine 这个站点信息非常全面而且非常广，如果你是个设计师却不知道这个站点，那么我们就太为你遗憾了。
Think Vitamin Vitamin是为网络设计师，程序员还有老板提供资源的站点，50，000个订阅者就很好的展示了他的实力。
24 Ways 我们设计，我们开发，这儿一直都是高质量的文章
A List Apart 网络设计博客时间中另一个栋梁站点，多样化的成员提供着非常不错的文章。
Site Point 非常多元化的站点，图形设计，css，ajax….
The Rissington Podcast 杰出的设计站点，来至出色的网络设计师John Oxton 和 Jon Hicks
Web Appers 为网络开发者提供开放的blog源码
Happy Cog 他们分享自己最好的想法并向全世界的网络设计创达着
Web Designer Wall 绝对是一个网络设计师以及所有设计必须知道的出色的站点。
Design Float 挖掘很多于设计有关的主题，你一定要知道
Psd Tuts 呵呵，这是网络中最好的教程站点了….Great ,我非常喜欢这个站点。
Blue Vertigo The MUST HAVE bookmark of all stock resourceson the net.
SXC.hu 我最喜欢的资源站点
Icon Finder Self explanitory.
Da Font 免费字体
Maniackers Design Make 在许多免费的资源中，你可以找到很多不一样的灵感，
Colour Lovers 发现，创作交，换你最喜欢的色彩
设计资源类网站
Design Float 挖掘很多于设计有关的主题，你一定要知道
Psd Tuts 呵呵，这是网络中最好的教程站点了….Great ,我非常喜欢这个站点。
Blue Vertigo The MUST HAVE bookmark of all stock resourceson the net.
SXC.hu 我最喜欢的资源站点
Icon Finder Self explanitory.
Da Font 免费字体
Maniackers Design Make 在许多免费的资源中，你可以找到很多不一样的灵感，
Colour Lovers 发现，创作交，换你最喜欢的色彩

设计展示类网站

Command Shift 3 不知道你是否有听过这个站点，这是个你可以得到灵感的站点，
Showcase Point 展示Flash & CSS 的站点
Zeniltuo 这儿有非常丰富的充满创意的站点
The FWA 主要展示flash站点，但是全部都是高质量的哦，创意都非常不错。
CSS Mania CSS de 另外一个展示架
CSS Remix 非常不错的CSS画廊，可以看到很多优秀的CSS站点
Best Web Gallery 设计的一个很好的选择。
ScreenFluent 一个很好的网络设计选择。
W3C Sites 通过校验W3C的优秀站点
CSS Beauty 另一个非常不错的有关CSS的站点，有很多有趣的关于新的网络开发的文章
Edu Style 在学校或者大学同样也有很多不错的css展示廊，这就是一个尤其不错的地址

开发相关类网站

Problogger 通常在博客上的文章，都为很多的博客作者提供。
Pro Blog Design 关于提升你的博客设计，这里只有高质量的文章
WP designer 这些博客的作者多为wordpress的开发者
Ajax Rain 网络上一个很大的Ajax书店
CSS3.info CSS3.
CSS Earth 这个站点有有最好的有关CSS的文章

Flash & Flex相关网站

Labs Adobe 来自Adobe的新技术的文章
Christophe Coenraets Flex 开发人员的Blog.
Adobe AIR Tutorials AIR教程网
Mike Chambers 基础程序和技术站点
The Blog Flash Action Script. 3 和 Flex.的blog
Jean Phi Blog 法国最出色的flash开发师之一，有很多杰出的作品

字型排版相关网站

Swiss Legacy 印刷，栅格设计
I Love Typography Speaks for itself. A must know.
Design & Typo 著名的Peter Gabor的blog, 有非常多很独特的创意在这儿。
The Typographer 法国的一个著名的关于印刷的站点
Slanted 一个很大的德国关于印刷的站点

视频动画相关的网站

Stage6 动画 (2d and 3d). 非常不错
Fubiz 一个很不错的Blog,有很多关于创意细节的介绍，收藏它，绝对不会错
Motiono Grapher International reference for all who are in the motion business.
Video Copilot 制作video特效的教程站点
Graphics/ Motion 意大利的motion博客，文章质量很好而且更新的非常有规律
FX Guide 非常好的 motion 和video 的交流网站，别错过这么优秀的站点
Works Motion John Dickinson的一个站点, 有很多创意和灵感和技巧

个人设计博客

Elliot Jay Stocks Elliot Jay Stocks没有人不知道他。
Veerle Blog 网络中最美丽的blog之一的站点，非常全面的文章还有教程
Jina Bolton Jina Bolton 是这本书“Art & Science of CSS”的作者，“Create Sexy StyleSheet” 的发起人
Snook Jonathan Snook是著名图形设计师，程序员，作家以演讲家，在他的Blog中，为所有设计师准备了非常多知识。
Stuff And Nonsense Markley世界上最出名的设计师之一。
Lysergid Lo?c SATTLER 法国非常著名的设计师.出色的文章和设计.
Iso 50 Scott Hansen 绝对出色的设计师.
John Nack Blog John Nack的blog,非常专业全面的关于图形设计以及Adobe
NetVibes The web comes to you. News aggregator plus!
Del.Ico.Us A tool for bookmaking and social media attention, must have!
Twitter Get updates on what your friends, co workers, etc are doing.
FaceBook 一个你可以记录生活的站点，facebook..
Flickr 一个摄影的交流场合，现在无数的用户用新照片发现每天的生活

Web2.0设计相关的网站

NetVibes The web comes to you. News aggregator plus!
Del.Ico.Us A tool for bookmaking and social media attention, must have!
Twitter Get updates on what your friends, co workers, etc are doing.
FaceBook 一个你可以记录生活的站点，facebook..
Flickr 一个摄影的交流场合，现在无数的用户用新照片发现每天的生活

其它与设计相关的网站

仅限于浏览，设计的面基本都是设计师感兴趣的（流行，音乐，设计）
Vinyl misuses 关于玩具的一个杂志，一定要看看，设计真的非常酷…
Discobelle Excellent site of music, showcases music videos, parties, etc.
Hype Beast 时尚文化的杂志
Lense A French reference for all those who wish to know some more about photography.
PopRave Blog Underground culture of the clothes industry.
All Graphic Design A site for everything graphic design related.
North X East Articles for bloggers.
Ads Of The World Web site which publishes all of the worlds ads. Great inspiration here.
LogoPond Logo Design Inspiration
Logo Design Love A blog focused totally on Logo Design. Regular articles and resources.
Split Da Diz I have translated his page from French into English as he was theoriginal posterof this article however I changed the French sites he recommended
intoEnglish ones, fixed the old links he had posted and changed the orderof some items… Visit his site!
Boing Boing A genearl directory of wonderful things.
Business of Design Online Pretty much anything to help a design business grow online.
Just Creative Design Whoelse would have brought you this massive English list of 99+ graphicdesign resources? We provide graphic design tips, resources

随机日志：

Bloxorz 落井下石

aRui — Sat, 08 May 2010 14:35:39 +0000

Miniclip出了很多优秀的小游戏，并且都是免费的，这里推荐的是Bloxorz，这个游戏网上有很多名字TurningSqure、转方块、推箱子等等，“落井下石”更有中国味，事实上游戏本身还是颇有难度的，有标题党称这个游戏为“全球只有4个人玩通关”，aRui小试一番，十多分钟也就玩到十一关，很菜，不过游戏还是不错的，越往后越有难度，你也来试试吧！整个游戏共33关，你有无数次重复的机会和无限的时间，不过使用的步数越少，当然就会显得你越聪明了。

很容易上手，用方向键↑↓←→控制立方体的移动，目标是将立方体滚到指定的洞口内，很耐玩的小游戏，你能过到第几关呢？

flash游戏在线玩耍>>

游戏操作：
Start New Game 开始新游戏，如果以前玩过，每一关都有一个PassCode，在Load stage输入这个PassCode点Enter可直接跳到这一关。

温馨提示：
● 形的机关立方体压上就能发动
× 形的机关立方体必须立起来触发
() 形的机关也需要立方体立起，会分成两块，按下空格键切换分开的积木操作
橙色的地砖上 , 积木不能立起来. 只能双排滚动。

通关密码：
01关密码780464              02关密码290299              03关密码918660
04关密码520967              05关密码028431              06关密码524383
07关密码189493              08关密码499787              09关密码074355
10关密码300590              11关密码291709              12关密码958640
13关密码448106              14关密码210362              15关密码098598
16关密码000241              17关密码683596              18关密码284933
19关密码119785              20关密码543019              21关密码728724
22关密码987319              23关密码293486              24关密码088198
25关密码250453              26关密码426329              27关密码660141
28关密码769721              29关密码691859              30关密码280351
31关密码138620              32关密码879021              33关密码614955

随机日志：

2010北京车展界面设计竞品分析

aRui — Sat, 08 May 2010 02:27:39 +0000

北京车展终于结束了，我们的重点工作也告一段落，在余温暂存的阶段作此分析报告，主要目的是学习，也是希望下次走的更从容更精彩。分析日期：2010年4月底，分析人aRui，观点纯属个人与公司无关，谢谢～～

分析目的：
本着学习积累坦诚的专业态度，作此竞品分析报告，希望能够以人为鉴，重新审视自身，以待下次的更精彩！

竞品对象（以下网站的车展专题）：
易车网：http://chezhan.bitauto.com/beijing/
新浪汽车：http://auto.sina.com.cn/beijingchezhan/
搜狐汽车：http://auto.sohu.com/2010beijingchezhan/
腾讯汽车：http://auto.qq.com/2010/
凤凰网：http://auto.ifeng.com/beijing2010zh/index.shtml
网易汽车：http://auto.163.com/beijingchezhan/
太平洋汽车：http://www.pcauto.com.cn/beijing/
爱卡：http://topic.xcar.com.cn/chezhan/beijing/
汽车之家：http://www.autohome.com.cn/chezhan/

分析重点（以各网站车展专题首页为主）：
为了更清晰的对比，在这里重点解析这几个方面：专题头图的设计、导航条的设计、版式的设计

【专题头图的设计】

专题头图的设计是整个车展专题的关键，用户的第一印象也是主要来源于专题头，在整个专题里面起到视觉引导的作用。先来看看各网站专题头图的缩略展示，这种比较更能很直观的进行对比：

除爱卡、汽车之家之外，其他网站的专题头设计都采用了通栏样式，并在颜色上加以延续，使其和下面的内容贯穿一致，这种手法视觉上会给人一种比较整体以及大气的感觉，也会有更强的视觉冲击力。

另外易车网、新浪、搜狐、凤凰网、网易分别定义了自己的主题，并以图形元素以及文字在视觉上加以表现。

易车网的专题头设计整体色调红黄相间，直观上让人觉得很热闹。以龙的图案点题“啸聚东方”，并在底图里面融合清明上河图，对主题有一个很好的烘托，在设计手法上运用立体字的效果，配合书法字形的主题文字，增加了专题的视觉厚重感以及文化底蕴，也能很好的解决视觉层次的安排，闹而不乱，更加凸显主题的表现。

新浪的专题头整体也是以红色为主，加入了适当的紫色，图案修饰上运用得比较简洁。波澜的海面、滚滚的云层、耀眼的阳光、飞翔的海鸥、飞溅的浪花整体给人一种很轻松的感觉。同样运用了立体字的效果，主题文字表现的很清晰，“逐浪高”书法字体的处理很舒服，但是浪花的细节处理不是很考究，缺少整体感，有点乱，颜色上也比较脏。另外右下角的“展前展中展后”文字处理也很随意，识别很困难，完全被忽视。可惜，其实可以很气质，飞扬的污水扰乱了整个轻松的前奏。

搜狐的专题头以绿色为主，和官方的“畅想绿色未来”相呼应。主题文字“绿色世纪”采用了渐变加外发光的处理，配合底图整体看来感觉不是很干脆，另外图形样式不是很搭，譬如富有层次感的云团和剪影的城市背景的结合，有强烈的拼凑感。标题字、展台的处理都欠细节考究。只能说整体感觉随意了些吧。

腾讯的专题头配合官方网站以蓝色为主，并没有特定主题，简单的标题字横列，只是在背景里面浅浅的融入汽车以及北京的元素，简洁明了轻快直击目标历来也是腾讯的特点，整体感觉比较中庸，挑不出什么问题也不会显得特别出众，看起来还是很轻松的，头图和导航以及下面的内容结合的很好，阅读起来很舒服。

网易的专题头以绿色为主，加入了绿草地的图形修饰，并且在主题文字“飙新”的处理上融入了绿叶的元素，配合北京的标志性建筑、传统的脸谱图案，出发点还是不错的。但是很可惜在整合处理的手法上，以及细节的处理上显得过于“随意”，主题字“飙新”的字形识别很差，并且在墨绿色的基础上还加了高光，有些玻璃字的感觉，感觉上和主题不是很符合，就像是给一个青衣的角色套上武生的服装。其他图形处理上也非常不讲究。

凤凰网的专题头蓝红相间，并且颜色都很饱和，视觉刺激很强烈，图片整合的感觉不错，虽然红色块的运用稍显“唐突”，但是查看里面的页面以及内容，应该是有特定需求的。整体来说疏密得当，气质也比较沉稳，并没有很多花哨的手法，简单直译，个人感觉还是不错的。不过在主题“大国道路”的表现上欠缺了些，没有体现到位。

太平洋汽车的专题主体色调为蓝色，背景图融合眩光的抽象车型，配合高饱和度立体处理的标题字，整体简洁明了，不过再搭配导航显得不是很考究，过于的中规中矩，标题字的质量也不是很高。值得一提的是独有的“预热篇、现场篇、总结篇”相比较其他网站的“展前展中展后”显得形象很多，字面上更富生命力，值得学习。

爱卡和汽车之家的专题头比较平庸，没有太多说点。

总结一下，从上面的缩略图整体来看，易车网、新浪、凤凰网的专题头更具识别性，主题清晰，整体厚重，更以易车网和新浪的专题图设计上更加贴切主题。腾讯和太平洋汽车网的专题图中规中矩的设计也比较讨好，不会让人过早的产生审美疲劳，相比较腾讯的整体把握强于太平洋汽车网，当然以腾讯包装产品的实力，其实可以更好。

【导航条的设计】

导航条的设计很直观的影响到用户对专题内容结构的了解，不仅如此在搜索引擎方面也起到至关重要的作用，更能起到各内容页面之间的互联互通。在这里只是从视觉结构方面作为切入点写一些看法，不对内容发表言论。

易车网：用颜色的深浅划分为上下两个大的区域，信息包含资讯、互动、车型以及展馆的导航，信息涵盖量大。不过由于专题首屏大量采用了相似颜色的铺垫，以及结构等多方面的原因，很大程度的减弱了导航的视觉份量，另外高纯度的色彩配合密集的反白链接文字阅读起来不是很方便。

新浪：和易车网类似，内容量显得非常大，只不过是把车型的导航提到了主导航上面，在大区块之间的划分不是很清晰，另外同样是密集的文字，叠合在一起没有主次感，阅读起来很不方便，需要努力“寻找”。不过值得一提的是这次车展新浪很好的融入了自己的周边内容，“汽车领袖峰会、汽车强国路、微薄聊车展、新浪汽车十年辉煌”的处理起到了很好的推广作用。“新闻、图库、展厅、互动……”等主要栏目名称的处理太弱，以至于完全淹没在导航里面，导致用户更加不能从视觉上直观的理解结构。

搜狐：内容量同样宽泛，视觉结构的安排上和易车网类似，不过从页面整体来看，搜狐的主导航在页面中的份量十足，绿色的渐变也比较沉稳，主导航的链接文字安排的也很工整，纯白色的链接文字在绿色底上面显得很醒目，绿色也没有过于的喧宾夺主。不过在导航上并没有“车展首页”的链接，而是到二级页面里面把右上角的“汽车首页”替换成“车展首页”，这个做法个人觉得多少有点自以为的“一厢情愿”。副导航浅浅的绿色起到了很好的平和作用，不至于视觉沉闷。整体来看好于易车网和新浪。

腾讯网：非常好！简单干脆，轻快明了。包含了易车网、新浪、搜狐的所有优点，并且很好的结合在一起，阅读起来非常的舒服。主导航里面几个浅色块将内容很清晰的进行了整合和区分，大频道名称做了红色处理，配合右侧箭头的辅助图形直观上也很容易理解层级关系。副导航和搜狐一样用了浅色调处理，起到了相同的效果，只不过是在细节上比搜狐更加入微，多了一些为用户考虑的小细节，譬如展车大全上下两排导航双色处理，不过右侧的展厅书签似的表现在视觉上并不是很清晰，虽如此并不是很影响大效果，整体来看效果还是好于易车网、新浪、搜狐。

凤凰网：相比较之前几个网站，凤凰少了车型的导航。立体效果的转角和下面的立方体（每日展车、网上展厅、每日车模）风格上很好的贯穿起来。大频道名称的样式处理上也还算清晰，并附加了一些别致的称呼，从整体来看还是不错的，立体式的处理很讨巧，别致的出彩。

网易：可以用粗旷来形容，或者说是粗糙。主导航区域，设计师试图打造一个科技感厚重的立体容器，先别说这个样式的精细度，黑色链接文字拥挤的塞在里面显得很憋屈，并且颜色商业不是很和谐，同样粗粗的同色的分割符号再一次的扰乱了本已经很乱的文字链接。更加无法容忍的是用了鼠标悬停下拉样式，个人觉得这种形式完全可以现今完全消失了，更何况是这种及时性很强的大型活动专题页面，并甚的是并没有任何符号提示用户此处是可出现下拉样式的。不管是从用户体验还是从视觉设计个人都觉得这次网易的导航设计是上述总结的几个里面最差的。

太平洋汽车：完全不一样的定位。直接把车型的导航放在最重要的位置，副导航融合两套书签样式同样都是是展车的信息，其他的资讯内容则只是在页面里面展示，在导航上并没有体现。右上角的“四版一榜”很直白，非常好，很能抓住特定需求用户群，并且点进去全是实质性的内容。虽然内容量感觉并不是很多，但是非常实在，如果是来看车我想这里是最合适的。

爱卡：主导航融进专题图里面，并且是同色系，对毕业不是很清晰，识别性不是很强，不值得提倡。车型和展厅的导航融入到页面之中，不太清楚这么做的意图，难道他们以为没人会访问它们的二级页面？

汽车之家：一如既往的特例独行，把热点车型的直接链接放到了导航区域，也可以理解为这是给用户最需要的，他们甚至是自认为不需要导航样式，不需要设计。还是说他们没有设计？但是不得不承认汽车之家的影响力，还有这种肯舍弃敢做的精神，当然只是精神。

【版式的设计】

如果说头图的设计是为了吸引用户，那么版式的设计就是为了进一步留住用户，为了让用户更方便更友好的检索阅读，通常我们所说的看起来很“舒服”大多取决于版式设计。

版式不外乎就是图文的有机搭配，个人认为好的版式必须具备层次清晰、关系明确、阅读轻松、疏密有致几个共性，或者说至少应该具备这些特点。尤其是在信息杂多的资讯类网站，阅读的时候更应该具备导向性的，让用户能够有序的轻松浏览。

这方面有点像绘画，学习素描的时候，方法是先勾勒出大体的比例、粗略的轮廓，然后细化明暗层次、结构细节等，初学的时候很容易进入一个误区，过于细节的表现往往忽略了重点的突出，这样就会导致画面“平、灰、糊”。重点表现想要突出的细节，适当的弱化和丢掉其他没必要的干扰，这样才能让整体看来层次清晰、疏密有致，“疏能跑马密不透风”也有这层意思。

在执行实施版式设计的过程中会碰到许多相互牵连的问题，也是一些不得不考虑的问题，版式的核心是为了表现内容，高质量、条理有序的内容会让版式设计事半功倍；另外专题整体的定位、栏目的划分、内容结构的梳理、重点想要表现的内容以及各类需求的的平和等等这些都会很直接的影响到版式设计；和整站以及整个专题的结合是否流畅舒服也是一个关键。

在这里不一一解析了，重点来看看比较典型的腾讯车展和新浪车展。

腾讯车展首页（左图）整体来看结构清晰、区块分明。页面上的设计元素中规中矩，也并太多的流于形式，基本上是靠最纯粹的版式支撑。由上而下的扫描，除了“焦点新闻”区域的列表显得有些重复之外，整个页面浏览起来上错落有致，在每一个位置基本上都可以找到视觉焦点，阅读起来非常轻松。

从视觉设计角度来看几个起到了至关重要作用的点：

一、栏目头样式和区块包容的处理
和主导航同色调高达60px的栏目头样式，设计手法上比较简洁，没有过多花哨的图形样式，大宋字体和书法字形的搭配简单的对栏目名称进行了修饰，每个栏目的内容都不是很多，大多在一屏里面就能够显示完整，看起来很整体。
栏目头延伸的边框线包含了下面所有栏目内容，很清晰的告诉用户这里当前位置是什么内容。当然这种设计也有些弊端，会导致线条元素的增加，会让页面看起来更琐碎，腾讯在这方面用了一些方法来进行平和，譬如在颜色上弱化里面的线条、部分线条渐变处理、局部区域色块处理等，起到了一些效果，但是严格来讲还是有些细节显得有些“突然”，主要体现在部分小栏目头设计很脱节，还有小区块的位置等细节上。

二、上下栏目区块的版式协调
从缩略图就可以清晰的看出每一个大栏目区块的版式都不是重复性的，基本上可以找到图文图文切换的规律，上下扫描阅读时有一个很好的视觉跳跃，与此同时在页面整体的通透性上做的也非常好，不管是三栏还是两栏都可以找到很明显的整体感。

三、区块内部的划分和图文搭配的样式
在一些区块的内容版式图文搭配的比较合理，在一些罗列的内容上也没有过多的采用文字列表的形式，有效的避免了视觉疲劳。

四、色彩的灵活运用和整体协调
主要体现在链接文字颜色的协调，整体蓝色在主栏目头和小版件的协调处理（有待提高）。
新浪车展首页在版式的表现上和腾讯完全是不一样的风格。主要体现在细节、个性内容、交互形式的表现上，在首页里面运用了大量的样式来烘托整体气氛和内容。
这么做有很明显的优势，直观上会让人觉得很热闹、更容易吸引眼球，会受到部分娱乐心态比较强的人重点关注。当然也会有很多弊端，这种页面很容易有“乱”的感觉，读起来会比较“累”，在某个区域很难找到视觉重点等等，并且大量的样式运用会对客户端和网络的要求比较高（在专题上线的初期和今天分别做了统计，大概需要20秒的时间才能打开页面，这一点足够至命），也许在用户端的浏览并不是很爽，但是作为数一数二的中文门户大新浪完全可以说他们在尝试，尝试以自己的方式引领用户习惯。

不管怎样，新浪的专题首页还是能找到许多细微的亮点，譬如：高清图集的办事和交互样式、线上High不停的交互样式、高清视频处三个大标签的设计处理、嘉宾访谈横通的设计样式、图解新车大赛处的图文搭配、摄影大赛网友优秀作品处的图片版式、微薄看展的泡泡表现形式、微薄车型评选的整体化设计、美女模特的图片比例等等等等，都是一些比较不错的细节表现，以人为鉴，可以知得失。

好了就是这些了，感谢阅读，以上为aRui个人言论，不代表公司观点。

期待下次的更精彩……

相关日志：

网站设计方案

aRui — Sat, 24 Apr 2010 15:48:10 +0000

整理机器的时候翻出些东西，这是在之前任职公司的一项网站改版设计工作，好记性不如烂笔头，同样好硬盘不如烂博客，记在这里安慰一下似乎日渐衰退的记忆。

这项工作给我的记忆颇有说点，原因有几，首先这是我刚离开设计工作室的第一份工作，身上还保留着一份自己看来单纯的清高的专业态度。另外至关重要的一点是感受到了与工作室截然不同的工作方式以及沟通。

这里放的是改版工作的第一套设计方案，当然最终并没有采用，这也是唯一的一套最原始的方案。这里说的原始大概指的是不包含过多的其他因素。尤其需要说一下这个戏剧性的过程，最初的基调颜色是蓝色和红色，公司的高层在听了一番风水先生的谏言之后，觉得绿色更好，并且指定为浅绿、草绿，于是就有的最终的这个色调，期间aRui也建议过，说此两种颜色不好搭配，并且与公司提供的服务有差距，而且在后期的延展上可能会有一些不便，但怎能有风水先生的声音动听呢。本着专业的态度，我坚信不管是什么颜色优秀的设计人员都能够把它做好看，红绿搭配也不例外，于是就有了这第一套页面。

这套页面其实有些问题，譬如用户的视觉印象、导引、归属，设计的体现欠考究等等，但是二级页面的质朴以及模板化还是让我看到了一丝欣慰，现在看来好像是一种懵懂的状态，稚嫩、迷茫、不知所措，脑子里面想的就是怎么做才能通过以及获得领导的认可，甚至都没有过多的考虑为什么而设计。

为什么而设计呢？难道现在就没有这个问题吗？

+ 视觉设计： aRui
+ 设计时间： 2008年04月
+ 项目名称： 之前任职公司网站的改版

+ 首页效果图

+ 二级页面缩略图

随机日志：