苹果的产品和品牌可以说是优秀设计中的代表，Mac和iPhone app设计师们的设计也是非常具有很高的质量水平。他们设计的APP的宣传网站界面不失个性和出色的色彩运用，或者运用很有质感漂亮的大图标和像素级完美的按钮来组合搭配。我们在使用这些应用的同时何不欣赏下这些应用漂亮的宣传网站呢？
希望这些网站能给你带来一些感觉。

Realmac Software



Tapbots


Bohemian Coding


Acrylic


Cultured Code


Font Explorer X


Tao Effect


Postbox


Transmissions

Tea Round App

MacRabbit

Classics

国外带宽比国内要高很多，所以欧美风格的这种网站大都会使用Css3和漂亮的js效果，用chrome浏览器浏览欧美的网站吧，会的到最棒的效果哦。

下面就是几个不错的单页网站设计欣赏，希望能给大家带来一些灵感。:)

Academy for Global Citizenship

More Hazards More Heroes

The Drift

this is Marcela

Design BeastCoFinery

Bennett Feely

Osura

Sean Gaffney

Riot

但是你没有用上IE9？对IE9没有直观的认识？那么下面的九幅漫画，会让你了解到IE9的九大特性：

1、新JavaScript引擎

IE9全新内置的“Chakra JavaScript引擎”充分利用当下主流计算机配置的多核心CPU，优化协同运算能力，编译、执行速度更快。同时与DOM的紧密集成，使得网络应用运行更顺畅，反应更迅速。

2、GPU硬件加速

IE9将全面支持HTML5 GPU硬件加速，借助GPU的效能来渲染标准的Web内容，如文字、图像、视频、SVG（可缩放矢量图形）等网络信息，减少CPU负荷，大大的提高浏览器的速度。开发人员无需为GPU硬件加速特性重新编写网站，直接提升图形处理性能。

3、子系统优化，提升协同处理效率

IE9子系统全面改进，极大提高了对HTML、CSS和JavaScript的解释效率。将布局以及渲染等方面的资源更合理的分配和优化，在减少对内存和处理资源耗用的同时，让网页呈现和网络应用程序的运行速度更加顺畅。

4、全新用户界面

IE9带来全新用户界面——简单、清晰、有效，尽可能简化浏览器的外观元素和操作步骤——希望用户能够最大限度的“忽略”IE9的“存在”，而将注意力全部沉浸在精彩的网络内容当中。

5、全面支持最新网络标准

IE9支持最新的HTML5、CSS3、SVG和DOM L2&L3，你可以充分利用这些技术展现你的网络创意，不必再针对不同浏览器编写不同代码，大幅度降低你的开发时间和难度。

6、整合更多开发工具

与其他浏览器相比，IE9内置了更多强大的开发人员工具——包括JavaScript分析工具、CSS编辑器和新的网络分析器等。这些工具当你需要时就在手边，方便你进行开发和调试，实现与IE9的全方位整合。

7、先进的网络开发技术

IE9提供了一系列先进技术，如D2D DirectX图形架构和图形、色彩解码器等，助你实现高清视频和多媒体交互。搭配GPU图形硬件加速，让画面质量和流畅性达到质的提升，为你搭建一个更好的平台，来为你的用户展现前所未有的视觉、听觉体验。

8、是网站，也是一个Windows 7程序

利用最新的Windows应用程序接口（API），开发者能够使用JavaScript来定义鼠标右键快捷菜单、任务栏缩略图、跳转列表项和触控等功能，使其与Windows 7操作系统完美整合，带来新的浏览方式，让用户体验上升到新的高度。

9、兼容性模式

IE9让开发人员来选择浏览站点时所使用的模式，其中包括IE9标准模式、IE8文档模式、 兼容视图模式（IE7）或Quirks模式 （IE5）。如果用户单击兼容模式按钮，网站将以开发者事先指定的模式或兼容视图模式（IE7）运行，保证向后的兼容性和网站升级时的灵活性。

2011年3月5日，微软的IE6 “死亡”倒计时官网（ie6countdown.com）正式上线！这个别开生面的IE6 “死亡”倒计时官网不但告诉大家世界上还有多少人在使用安全性和兼容性都非常糟糕的IE6，还建议大家马上放弃IE6，投奔IE8和IE9的怀抱。

欢迎您写下对IE9的使用感受，当然也可以留点别的^_^，互相交流共同学习！

一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。

同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，关键是要能够确定哪些细节更具有影响力。

增加价值的细节

这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站。

一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，但是如果这些细节被移除，用户将在感知和可用性方面感觉到明显的差异。这些就是我们愿意花费时间的细节。

那么一个设计细节到底如何为网站带来附加价值呢？诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户 使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就可以发生很大的差异，使之产生更大的影响。

这些差异到底是什么？

进一步观察

我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大时，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方面图片吧。

以Concentrate网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。

除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。

像素级完善

真 正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出来。该区 域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。

其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者之间的阴影和背景提供了对比，但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这个顶部区域。

差异

当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些线条来向大家展示两个像素能够带来怎样的不同。

微妙的阴影阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。

我们在设计中采用CSS3，它可以带来的宏伟的差异让我们很容易为之兴奋不已。而对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。

还 是来看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用了CSS3的 text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。

差异

比较上面的截图以及同样的页面在IE8（不支持text-shadow属性）下渲染的效果，我们就能发现它更难看得很多。

值得指出的是这个网站卖的是Mac软件，所以自然地不那么重视IE用户的体验了。

导航细微差别

除了增强易读性和强调可能的网站操作，细节对网站导航也有很大的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页面。毕竟链接是起初使得网页之所以称之为网页的核心，所以为什么不多花一点点时间在适航性上呢？举个例子，我们来看：
Lipperhey站点。

除了为导航的活动状态选择好的颜色以外，我们发现它的设计为网站的主导航栏添加了一些用趣的细节。

Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了几个像素。其次，按钮背后被加上了阴影并且对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉，指示了它的重要性及激活状态。

差异

再看一下没有上面提到的细节的导航，我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。

细节更进一步

我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)。但CSS3的强大远不只是阴影。CSS3动画，表现为transform和transition的属性，给我们的细节工作增加了额外的工具。

只 要使用得当，CSS3动画为我们的网页元素添加高效的动画效果，而不需要借助Flash或JavaScript。在细节方面，动画允许我们在各种输入情况 向用户提供流畅的反馈。例如为链接的hover状态或按钮点击添加过渡动画，可以告诉用户他们鼠标正悬停在（或触摸，对于触屏移动设备）一个活动的元素上 面。

与网站细节相伴的工作的美好在于通过进一步努力，我们仍然可以为我们的用户提供部分价值，而不需要疏远那些使用过时的浏览器的用户。关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值，没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。

网站还能在哪些细节方面改进来增加它的价值呢？你做过的项目还成功地使用过哪些类型的细节技术？

在网页设计制作中经常使用到的火狐浏览器插件——

1）HTML Validator

网页符合W3C标准十分重要，一方面是为了让页面能够跨浏览器兼容，另一方面也是为了让搜索引擎能顺利地抓取和理解你的页面。所以让页面通过W3C校验是网 页优化工作很重要的一方面，使用火狐HTML Validator插件能够高效地检测出页面中HTML代码的有效性，不仅如此，它还能显示出错的代码位置，并给出错误说明和修改建议，是一个非常不错的 网站优化工具。

HTML Validator – Firefox插件安装

安装完成后，在火狐浏览器右下角会出现一个红色的“叉”或者一个绿色的“勾”（如下图），分别表示页面有错误和无错误。如果在你的页面显示的是绿勾，那么恭 喜你，你的代码非常规范，已经通过了W3C相关标准验证。如果有错也不用着急，双击红叉标志能够显示出错误的详细信息，你可以根据提示逐个修改规范。

值得一提的是，如果有一些非常细微的差别的话，HTML代码的有效性还是要以W3C官方的校验为准，不过大部分情况下还是一致的，如果你不放心，修改完以后可以使用本博客右下角工具再验证一下。

2）Web Developer

必备！这是一个集众多页面测试功能于一身的强大的火狐插件，能够查看CSS错误和Cookies 信息，设置突出显示表格、Heading、图片URL等几乎所有的页面元素，这个插件对调试页面非常有用，尤其当页面结构很复杂的时候，这些工具能够让你 快速找到特定元素的分布。

Web Developer – Firefox插件安装

安装以后该插件将作为一个工具栏出现在浏览器中（如下图）

3）Firebug

Firebug是设计开发人员钟爱火狐浏览器的一个重要原因，Firebug是火狐浏览器上一个集成式的强大调试环境，很多调试应用插件都必须基于Firebug平台，Firebug可以说是每一个Web设计开发人员必备的工具。必备！

Firebug – Firefox 插件安装

按照提示安装到Firefox中后，在浏览器底部状态栏就可以看到Firebug的图标了，点击之后弹出firebug调试窗口，这里面除了Firebug自身的工具外，还可能有其他选择性安装的Firebug平台插件的调试入口，比如Page Speed等。

4）Page Speed

Google于今年4月确认将网页加载速度作为关键词排名因素后，站长们对页面性能更加重视了。其实无论是对SEO，还是对用户体验而言，提高页面的加载速度都相当重要。Google同时也提供了这款检测页面加载速度的工具。

Page Speed插件是基于Firebug平台的火狐插件，它为每一个页面进行加载速度评分，不仅如此，更提供了优化建议。因此，对改进网页加载性能的页面优化人员来说，这个工具是非常的必须。

Page Speed for firefox– Google官方插件安装

安装以后，Page Speed就会出现在Firebug窗口中，可以为浏览器的当前页面检测加载性能，点击Page Speed界面中的“Analyze Performance”按钮执行分析，Page Speed会为分析的页面进行评分，满分是100分，评分自然是越高越好，但是不可能每个都是100分吧，所以优化的目标应该是定在85分上下为佳。

5）X-Ray

如 果能在浏览器里看到页面内容是被哪些HTML标签所包含，是不是很直观呢？X-Ray就是这样的一款工具。普通的一个网页在前端设计师们眼中，不仅是单纯 的文字图片，而是各种网页标签组成的结构图，但这些画面纯粹存在于设计师们的大脑中，X-Ray提供了一个让它视觉化的方案，尤其是在浏览别人的网站时尤 其实用。

X-Ray – Firefox插件安装

安装以后，浏览器邮件菜单就多了一个“X-Ray”选项。这个工具的缺点是会让页面变得很乱，不过只要研究的页面对象不是太多，还是能够应付得来的。

6）YSlow

这是一个比Google Page Speed更强大的网页性能优化工具，由Yahoo提供。YSlow也有页面性能评分，有趣的是，YSlow评分接近的两个页面，Page Speed评分却相去甚远，在实际的页面优化过程中，YSlow的评分并不作为重要参考，因为YSlow提供了其他更多有用的信息。它能够统计一个网页中 包含的所有元素，包括图片文件、CSS文件、JS文件等，而且显示了页面的HTTP请求数，所以根据 YSlow提供的信息进行针对性的优化，能够产生非常明显的效果。

YSlow – Firefox插件安装

YSlow同样是一个基于Firebug平台的插件，需要在Firebug里运行。

7）MeasureIt

在网页设计中，精确度量页面元素尺寸也是非常重要的一个操作。并且很多时候我们在页面调试的时候，也需要知道某些元素的尺寸，以确定是否符合预留的空间。MeasureIt是一个很方便的页面测量工具，只需要拖动鼠标就能完成度量，是不是很直观呢？

MeasureIt – Firefox插件安装”

8）Colorzilla

回忆一下我们是如何给网页配色的？首先打开图形软件（比如Photoshop或者Fireworks等），导入页面效果图，使用软件中的拾色器取得图片上某 个位置的颜色，然后将颜色的RGB或者十六进制值复制到Dreamweaver中，如果没有效果图的时候，我们还要先去截图……额，这样实在太浪费时间 了。

除了一些常用的颜色之外，很少有人能在看到颜色时立刻准确地说出它的颜色值。不过别担心，现在有一款火狐插件能够帮你“说出来”了—— Colorzilla。Colorzilla能够取得浏览器中任何一点的颜色值，并且表示为RGB和十六进制值，可以非常方便地复制使用，在制作和修改页 面时大大提高了我们的工作效率。

Colorzilla – Firefox插件安装

9）Simple Links Counter

在进行网站维护时，链接的有效性检测是一个很让人头疼的工作，页面中繁多的链接着实让维护难度倍增，可能一次不严谨的批量查找替换让很多链接出错，这个错误 是老板和用户都无法容忍的，所以对这个问题，尤其要加倍小心。SLC（Simple Links Counter）能够自动检测页面中的链接是否有效，你可能会说Dreamweaver里也有链接检查，没错，DW自带了链接检查功能，不过DW的检测仅限于站内链接，对站外链接是无能为力的。

除了检测链接的有效性，SLC还能显示页面分别有多少站外链接，多少站内链接，以及具体的链接URL地址，对网站不良外链检查也是非常方便。

Simple Links Counter – Firefox插件安装

百度Baidu 提交入口：http://www.baidu.com/search/url_submit.html

谷歌Google提交入口：http://www.google.com/addurl

Bing 提交：http://cn.bing.com/webmaster/SubmitSitePage.aspx?mkt=zh-CN

雅虎Yahoo 提交入口：http://search.help.cn.yahoo.com/h4_4.html

搜狗Sogou 提交入口：http://www.sogou.com/feedback/urlfeedback.php

网易有道 提交入口：http://tellbot.yodao.com/report

Soso网站 提交入口：http://www.soso.com/help/usb/urlsubmit.shtml

这个头像是通过Gravatar来设置的，Gravatar(Globally Recognized Avatar),意思是全球认证头像，是被Wordpress母公司Automattic收购的Gravatar头像服务。在WordPress后台-设置-评论-头像里可以设置头像在当前博客的显示方式，所有启用自定义头像的访客的留言都自动根据博客的设置显示相应的头像。

首先我们要登录http://en.gravatar.com/site/signup/ 进行设置。如图我加上了中文翻译，第一次设置当然需要注册帐号，输入你的一个常用的Emaill地址，然后Signup即可：

然后会得到一个很普遍的提示，就是邮件激活嘛~

接下来就是去我们的邮箱点击链接激活一下，会转到补充资料的页面,让输入昵称和帐号密码，很简单。注意密码要设的复杂一点，不要使用纯数字等简单的密码，不然会提示：请只使用小写字母和数字，没有空格或标点符号……

激活登陆后，可以点击顶部的导航来进入设置头像的界面，如图：

接下来进入到设置头像的界面：

接下来的图片上传就跟在开心网或者空间上传头像图片差不多了。还有一步是要选择图片分级，在此选择”G”就可以了(G — 普通级别，任何年龄的访客都适合查看。)

在最后显示的页面中点击你上传的头像图片，与你的email管理就ok了！

这样头像就设置好了，以后在给别人的WordPress博客中留言的时候只要填写的是设置好头像的E-mail地址，就会自动显示相应的头像哦~~来试试吧！

长期以来，总是阶段性的有设计方面的学生或者入门小白在邮件、QQ、MSN等渠道发表一种焦虑：我的基础不太好，请问我能从事设计工作么？对于这样一个问题，我一般有两个反应，第一，我觉得这个问题太大了，有点自我否定的意思；第二，你自己都知道基础不好，就去补基础啊，跟我扯什么闲话。

后来我发现这样想有点不仗义，首先对方也许是瞧得起我，想问问我该怎么办，其次他们可能觉得我的“基础”很好，以便取到真经，避免被某些混子骗去钱财。对于“基础”的定义，各人的理解是完全不同的，在设计上来说，我只能从我自己的理解来聊，它不是真理。

其实关于有没有基础的疑问不集中在自己没打好底子，而是担心自己能不能继续下去，如果你刚踏入这个行业，自己底气不够也许会上演如下戏码：基础不好 — 信心不足 — 畏首畏尾 — 难以作出成绩 — 满头是包 — 收入降低 — 没有成就感 — 究竟还要不要做这行？ 类似的疑问我在人生的某些阶段也曾出现，换个角度来看，你会发现并不困难：

1. 设计的基础不是绘画的基础

“我觉得我的基础不太好，我是不是该先学学素描呢？” — 这是一般的开场白，这种还算沾点边的，更离谱的我就不例举了。如果你一定需要一个答案，我可以告诉你，设计和素描一毛钱关系没有，素描学了可以陶冶情操，但不能帮助提升设计能力 — 如果你偶尔要用素描知识画点素材，改善视觉的表现，那么是可以的。设计当然是和美有关的，但设计跟偏重于观察、分析、解决问题、改善品质，而不是艺术表达，产生这种误会和我们从小接受的狭隘的美术教育有关，曾经我也认为提到和“美”有关的玩意，都是和绘画、书法、舞蹈有关的。

设计是一个现代商业社会才有的活动，它在思考方向上可以借鉴一些艺术的视角，但是无论其目的还是应用领域，和艺术还是有着不小的差距。那么绘画的技能是不是不学也可以呢？我觉得随着计算机技术和各种创作介质的丰富，绘画技能可有可无，但是掌握一定的手绘能力（比如快速绘制草图等，这在工业设计上相当重要）还是很好的 — 我的意思是，你不要把绘画技能等同于设计技能，素描也绝对不是设计类专业学生应该上的第一课。

如果把大学阶段的设计教育分为几个时间点的话，那么我认为以下技能方面的培训应该各有侧重：手绘能力（包括草图、造型、工具创作等）30%，计算机实现能力（设计软件、网络使用、知识管理、资源整合）40%，对社会的观察能力和对设计对象（包括产品和人）的沟通能力30%。如果你能把上述几点都严格做好的话，那么毕业后我相信你至少是一个合格的设计类毕业生。

2. 生活经历与教育经历

国产平面设计界言必称靳埭强、陈幼坚、韩家英等大师，觉得设计嘛，就是要靠积累，经验，资历…….是的，我不否定，但是你知道他们的名字和经历也不会把你变成和他们一样，人物与人物之间不具备可复制性，你愣头愣脑的混到40岁，也可能只是个菜瓜。设计的基础积累其实从你生下来就已经开始了，你的生活经历告诉你社会的规律，人和人的情感问题，柴米油盐，生老病死，你接触到的任何一件事物都构成你思维中的元素，而这些元素如何才能使你的作品聚焦到准确的问题上就是作为设计师的你要解决的；你的教育经历决定了你看问题的角度和方式，我说的不是你考上哪个大学，拥有什么文凭，而是在教育过程中自我的认识是否足够，如果你运气好，遇到一些不错的老师，那么你会少走点弯路，不幸的是，大部分国内的设计院校都是在制造这种弯路，为了你自己的前途，建议你熟读以下规则 – 节约一切时间只要应付好考试，抓住一切机会更多的接触社会。

你的基础来自于是否主动从生活中察觉关于“设计”的部分，其实我们说观察，但是有的人斜视，有的人近视，有的人有眼无珠，自然差别是很大的。我小时候（上世纪80年代）挺喜欢看港台电视剧，除了那些狗血剧情很容易打发时间外，我特别喜欢看片尾的那些字幕，有很多港台广告赞助的客户公司，会在片尾打上自己的LOGO，那些LOGO我觉得很漂亮，我就自己画一画。这基本上算不得是设计的练习，但是这种习惯却让我保持了对视觉设计的足够敏感，你要说这个是你的基础么？我想也可以说是，但我没法教给你，因为发生的阶段实在太久远。

如果你已经起根上给耽误了，那么我建议你从你的小孩（也可以理解为你的员工？）做起，认真观察他的兴趣和生活中表现出来的特质，为其选一门值得他投入时间和精力的“设计观察”。远比花上高昂的学费去学什么中国人压根看不懂的芭蕾舞好得多 — 恩，我当然不是说芭蕾舞很难懂，至少我想装B的时候也会看看。

3. 好的审美观和理解能力

我们的生活中缺乏审美，你走到外面看看就知道能记住的建筑不多，能入眼的广告很少，能欣赏的服装有限，这是一个社会时期的真空，我们暂时也改变不了，但是我们可以自我要求进步，看一看那些能被称为经典又不乏味的著作、摄影作品、设计图书、日常生活用品，从小处慢慢改变你的“设计空间” — 每个人所处的环境就是一个“设计的空间”，你在什么样的空间中生活，决定了你的视角和胸怀，还有你的审美能力，因此一个充满土鳖和土鳖物质的环境会让你最后也变成土鳖。

审美除了天生对于形状、颜色、比例、节奏的敏感外（这有可能得益于胎教和生育环境，但是没有数据支持这一传统说法），都是靠后天训练的，关于如何提升审美能力，我几句话是说不清楚的 — 如果你是我生活中的朋友，最多也就和我维持一个水平，如果不是呢？那就自求多福，自找退路 — 当然，对于更多审美能力优秀的人来说，我也许也是个土鳖。审美一定是存在于环境和历史条件中的，没有绝对的最好与最差，时间能把一且丑陋都涤荡成美好。

理解能力就是个人性格和教育使然，所谓好的理解能力我觉得是：同样的一个东西，一个事情，一种现象，你可以从正反两个方面都去考虑，最后还能坚持自己的思路进行判断分析，不因为大多数人的影响而放弃正确的决定。对于设计师来说，这种品质尤为可贵，如何培养理解能力呢？尽量找到事物的真相，如果一件感性的事情你暂时看不透，也不要相信五毛党的一根筋，或者愤青的两头堵，从历史、政治、经济、科学方面找原因，远比看一篇天涯的帖子来得客观。好的理解来自于好的材料和沟通，选对材料，材料告诉不了你的，就找对的人来帮你分析。

4. 热情和时间的投入

这两点是你将来能从事设计这个行业的真正基础，做设计在我国目前暂时还是一个技术性的事情，那么必要的时间投入可能会影响你的娱乐、交际、无聊的癖好、甚至赚钱的打算，你是否还愿意坚持？连续2周的加班赶稿，没有加班工资，你是否还有可能保持对设计的热情？这对任何人来说都比较难，我相信我所知道的优秀设计师，至少不是迫于生计才来做设计的，从业之初他们都是带着对于设计的憧憬与理想而来，尽管脚下荆棘密布，陷阱无数，却也没有降低他们丝毫的热情。中国的设计圈子里，还有多少人保持着这样的热情，你或许是为数不多的那一个。

要保持热情很简单，你只要把握住你做的工作都是有意义的就好，比如：你设计一个杯子，因为人体工学的优化使老年人跟容易使用，这就是一个非常有意义的事情，但是如果你只是每天在印刷厂批处理大量的喷绘图片，你干的事情就是机器可以替代的事情，对自己来说意义不是很大，你要赶快提高自己的附加值。看到这里，一定会有人跳出来说，“我们为了生活，为了养家，做这样的事情有什么不对？难道没有意义么？” — 是的，生活的压力是每个人的意义，但这已经不是设计的范畴，它已经变为了糊口，也许你正是安于这种现状，导致你一直无从进步，并非你没有理想而是现实让你没有胆量抛弃很多东西。

5. 家庭、环境、理想的土壤

这就是最终的现实，作为想进入设计行业或者设计院校刚毕业的朋友，我不得不告诉你，你是否能成为一个设计师，并不是自己说了算的，头撞南墙才会停止的称为SB，懂得适时往北墙调头的称为NB — 设计师说到底也是工种，工作的价值体现在是否能够获得更好的生活上，有部分朋友认为设计看上去不累，轻松画点图，就有几千的薪水拿，坐办公室，吹空调，动动鼠标就行，那你就太二了。在我天朝，除了公务员和富二代，任何行业都有其他行业不知晓的辛苦和付出，工作仅仅是工作，薪水是由于绩效带来，和农民比起来，农民至少有一块自己的土地和工具（当然，所有权是国家的），而设计师使用的电脑还是公司的，不能带走。

除了北京，上海，深圳等东部较发达城市的设计师看上去像那么人模狗样的，内地二、三线城市也有一大批设计行业的从业者，他们也许挣扎在客户的不断挑剔和侃价中，也许挣扎在老板随时用更低薪水招来的毕业生的威胁下，也许挣扎在信息闭塞无法提高的环境里，更有可能因为年龄逐渐增大而“被辞职”……. 我知道他们中的大多数一开始都有一颗为设计投入的心，却换来看上去并不美，实际上也并不美的生活。在中国做设计不是赚钱的行业，虽然我们一直在提倡设计就是生产力，那只不过是国家面子上的一些说辞，我们离设计还很远 — 如果你有一个沉重的家庭负担，如果你所在的环境确实艰难而闭塞，如果你的教育中从来不曾出现有对“设计”提出要求的字眼，我想为了你的生活，设计并不是最适合你的行业 — 你可以热爱它，欣赏它，但不要把它当作你的事业，因为从业需要一段蛰伏期，这个期间你也许会饿死。

要是你短期内抱有“非设计我不干”的激情，没有家庭病患、子女生育、较低学历、经济困难的压力，那么我支持你投身到设计的大潮中，没准儿你就是下一个弄潮儿，而你的这些坚实的后盾，正是你可以义无反顾的本钱。我想推荐大家看一个电影，北野武的《阿基里斯与龟》，你会明白坚持并非那么牛B的品质，付出的代价也许你无法挽回。

在理智的看清自己的现状后，你最后会明白属于你的设计的“基础”是什么，你需要谁的帮助，从哪里开始努力，当然，就算理想在现实面前如此脆弱，你们也还是拥有勇敢的心。

“我们可以将所有的设计的基本原理分为两类：原则和要素。在这篇文章中，设计的原则是法律界的首要的真理。他们代表着世界，指导设计实践的基本假设，并影响在组成的对象安排。”

首先从基础知识

本专栏是关于网页设计，究竟是真的，它是─尽管它有时可能显得有点遥远而分心。我认为，任何有关设计了很好的讨论开始于基本面。根据定义几乎在任何领域是围绕着这些主要原则的基础是普遍的：他们可以应用在各种不同的方式，以不同的工作范畴。这可能会导致一些混乱的原则是实行以特殊介质内的唯一约束。

网页设计是一个相对较新的行业相对于其他形式的设计，由于我们的青年中。对于任何设计学科，有压缩方面的Web设计过程中所特有的如屏幕的媒介，这样的决议，添加剂的色彩空间和形象。但是，往往这些比较独特的细节的图片覆盖了更大的意义。我们注重的是，它是 网页 设计和推开核心设计概念，使概念，可以考虑以后没有任何干扰较强的项目更多的技术。

网页设计如何适应？

我倾向于将其定义为那些在设计大视场多学科一网页设计（同行印刷设计，工业设计，室内设计等）。要退一步，甚至进一步，我认为这是一个在艺术领域的学科设计（以绘画，插图，雕塑等同行）的一点是，为了与有关设计的基本原则的讨论开始，因为它们与网页设计我们要明白，有一个继承的设计，是从其他艺术形式来收到良好的程度。这些艺术形式，如平版印刷，排版，绘画，/插图，工业设计，在许多世纪的演变，以及一些基本的思路作为指导，提供普遍出现任何艺术努力。在谈到我们不可避免地看看外面的纪律，并采取一个稍大的角度讲的基本概念。

第一三本专栏文章将致力于发掘这些有识之士普遍的宝石，使我们可以更好地了解我们的专业。在第一两篇文章，我们会采取一个更大的角度，建立了基础。在第三篇文章中，我们将紧紧联系在一起，用真实世界的例子来看看如何基本付诸实施，通过对网络媒体。

设计的原则

有许多衬垫的设计领域的基本概念。他们往往根据不同的分类理念或教学方法。我们首先需要做的是组织他们，使我们有这个讨论的框架。

我们可以将所有的原理设计的基本分为两类：原则和要素。在这篇文章中，设计的原则是法律界的首要的真理。它们代表了设计实践的基本假设的世界，引导和影响的对象组成的内安排。 相比之下，设计的内容是自己设计的组件，对象被安排。

让我们首先对设计的原则为重点，对我们行业的公理。具体来说，我们将考虑在下列原则：

• 平衡
• 韵律
• 比例
• 显性
• 统一

平衡

平衡是一个均衡的结果，从看图像和判断对物理结构（我们的想法，如质量，重力或页面两侧它们）。它是在特定设计的对象安排，因为这涉及到他们的视觉重量，其作文。平衡通常是：在对称和非对称两种形式。

对称的

对称平衡的组成时，会发生重一轴均匀分布在中央垂直或水平。在正常情况下，假定轴相同的形式在两个方面。当发生类似的对称性，但不完全相同，它被称为形式近似对称性。此外，它可以构建一个组成径向对称性导致同样围绕一个中心点 ¹。对称的平衡也被称为正式的平衡。

非对称

非对称平衡时发生的组合重量不是均匀分布围绕一个中心轴。它涉及到的不同组合，在他们各自的视觉平衡彼此大小的物体重量安排。通常有一个主要形式是由许多较小的形式抵消。一般来说，非对称成分往往有更大的视觉张力感。非对称平衡也被称为非正式的平衡。

韵律

节奏是重复或交替的元素，它们之间的时间间隔通常定义。节奏可以创造一种运动感，可以建立图案和质地。有许多不同种类的节奏，常常由它唤起的感觉时，看它的定义。

• 规律性：正常节律发生时，分子之间的间隔，通常的元素本身，是在尺寸或长度相似。
• 流动：一个跌宕起伏的给出了运动感，而且往往更自然有机的。
• 进：一个进步的节奏，通过一系列的步骤表明进展的形式序列。

比例

比例的尺寸或形式分布比较。它是一个元素之间在规模和另一个之间，或整体对象及其关系的组成部分之一。在不同的组成比例能与平衡或对称的种类，并能帮助建立视觉重量和深度。在下面的例子，请注意如何较小的元素似乎退入后台，而较大的分子来前线。

显性

显性涉及不同程度的设计重点。它决定了一个组成视觉重量，建立空间和观点，并经常去解决那里的眼睛在设计时首先寻找。有三个阶段的主导地位，在每一个有关组成的特定物体的重量。

• 优势：该对象提供的最大程度的视觉重量，主要重点内容，要在前台的组成进展。
• 分优势：重点中学的元素，在中间地带的组成元素。
• 下属：该对象提供的至少视觉重量，重点是第三退居背景的组成元素。

在下面的例子，树木充当主导因素，房子和作为辅助元素山，作为第三元素的山区。

统一

团结的概念描述了各个部分之间的一个组成与整体的关系。它调查某一设计所必需的成分，以配合在一起，给它一个整体性的感觉，或打破它拆开，给它一个意义上的各种问题。在设计统一是一个概念，从视觉感知和心理，特别是那些以处理完形的一些理论源于人类大脑如何组织分类，或团体视觉信息².

格式塔理论本身是相当漫长而复杂，抽象和概括各级处理，但认为走出这种思维方式的基本思路是更普遍一些。

关闭

封闭的想法是，大脑中往往缺少的信息填写一个对象时，它认为是缺少了一些作品。对象可以被消解成小的部分群体，而当这些地区的一些缺少大脑往往会增加约一对象的信息，以达到封闭。在下面的例子中，我们不由自主地填写缺少的信息来创建形状。

继续

延续的想法是，一旦你开始朝一个方向看，你会继续这样做，直到一些更重要的，以便引起你的注意。视角，或主导方向线的使用，往往会成功直接在指定方向的观众的眼睛。此外，在设计的任何题目眼睛方向本身可能导致类似的效果。在下面的例子，眼睛立刻降了结束了参照系右上角的道路方向。有没有其他主要对象捕捉和重定向的注意。

相似，接近和对齐

类似规模的项目，形状和颜色组合在一起往往是由大脑和项目之间的语义关系形成。此外，在邻近的项目或互相对齐往往以类似的方式进行分组。在下面的例子中，请注意它是多么容易进行分组，并确定了在比左上右下的物体的形状。

相关概念

有许多是涉及到的其他概念设计的原则。这些可以包括具体的条款和/或技术，在某种程度上是基于一个或更多的上述原则。在他们结束，他们增加了可用的工具集作曲，供设计者使用。

对比或反对

对比讨论了动态的冲突，在内部之间的视觉元素的组成存在tensionÔthe程度给予设计概念。

正，负空间

正，负空间是指数字，在一地并列组成。在环境中的对象代表的积极空间，环境本身是消极的空间。

三的规则

三分法则是一种成分的工具，使这一概念的使用，最有趣的作品是那些在其中的主要因素是偏离中心。基本上，采取任何参照系，分为上放置在字里行间组成它的元素的三分之二。

视觉中心

任何网页的视觉中心只是略高于和对实际（数学右）的中心。这往往是自然的视觉焦点位置，并且有时也被称为博物馆高度。

颜色和字体

很多人会一同举行的颜色和字体的五个我有上述的校长。我个人认为，无论是设计元素，所以我给他们一些在我的下一列的注意。此外，这两个主题是如此强大，我在写一篇关于每个未来整篇文章的计划。

结论

在Web设计是太容易全神贯注在中许多独特的限制，完全忘记的基本概念，任何设计，可以加强一些。为了更好地讨论这些概念，我们需要退一步从我们的具体学科，展望该领域的历史。这是我们在这里找到我们的职业的公理。

在这篇文章中我们研究了这些公理，设计原则的一半。设计的原则是我们专业的指导真理，平衡，节奏，比例，优势和团结的基本概念。这些核心理念的成功运用确保了稳固的基础，任何设计能茁壮成长。

在未来的专栏中，我将讨论设计的基本组成部分，作为组成的任何资料，包括点，线，形式（形状的一部分使用的元素），质地，颜色和字体。意见或建议，欢迎和赞赏。

随着各个设计论坛，设计讲座，设计培训里面的师生装得很高雅，或者装得不高雅，那些粗糙、俗气的设计作品（有些甚至称不上作品）还是泛滥在城市农村的各个角落 — 究其原因，我估计不是因为老百姓喜欢，也不单单是商家们一厢情愿，极有可能是因为那些贴着XXX平面速成，21天变身设计大师等的培训班和厕所书闹的。有些现成的经验或者实干的技巧，我觉得直接说了就完了，卖着关子揪理论我们都不好过。

所以我今天要聊的就是“如何不让自己的设计变得俗气”，如何变得优秀这是个大问题，关乎很多方面，但是怎么不犯错却是有迹可循的。既然作为小白的你，暂时没有这么多的积累和经验，那么先确定自己的作品不被笑话，也算是一个提高吧。

为避免某些偏俗设计的原作者（为了说明问题，我不得不引用你们的作品，当然，在我天朝土地上，这些作品绝不是最差的）产生暴尸现场的想法，在本博客发生拉横幅维权的情形发生，我将每个环节都做一个对比，左边是普通的做法，右边是在“这个问题”上相对较好的做法（相对较好的意思不是这个设计很好），证明文章是以案例来解释，而不是3.15曝光。

1. 过多的字体

不管你是做平面，做书籍，还是做网站，视觉格式塔理论告诉我们，同一属性的玩意一多了，人的内心就紧张，比如：你看到20只蚂蚁在你脚下，你会蹲下来看看她们在忙什么，如果是20万只蚂蚁朝你冲过来，你除了尖叫还能有更好的办法么？

在有限空间内使用过多字体的做法，正是这种心理反应。在运用字体的时候，第一个关键就是尽量减少字体种类，你可以把自己使用的字体控制在3个以内，如果字体一定超过三种怎么办？通过大小，间距，透视，角度，对比，颜色等方式把不重要的信息部分的字体淡化掉，而突出最为重要的信息。

另外一个技巧就是文字横排与竖排的区别，根据不同的阅读习惯，在我国横排的文字的识别率相对高一些，但是在版式上显得呆板一点，而竖排的效果更容易将字体图形化，竖排的影响在于数字与英文字母的方向问题 — 因此，非万不得已，不要在正文中使用中文+英文的混排方式，那样真的很恶心。

但是，字体多了就真的不好么？未必，字体本身也可以图形化的，它们自己也有美的纪律性，大量的字符造型构成了一个“元素”，在这个层面上，他们脱离了字体本身的形象。作品大家可以在google搜索“typography”，我就不贴图了。

2. 色彩过于统一

关于颜色的杂乱，很多文章都掏心窝子的讲过，但是我不得不告诉你，色彩这个东西，你光靠看看色轮，色谱，买点pantone放桌上是没有用的，色彩有规则性，而每个人的色彩感受没有规则性，要做好色彩设计，除了大量的练习与观察，最重要的是相信自己的直觉，如果你不知道如何把握色彩 — 你先记住“黑白灰+主色”的方式，也就是一种主色，通过黑白灰来协调辅色的逻辑。

比起色彩杂乱来说，过于统一的色彩其实给用户造成的困扰更大，“使用统一的色彩更容易记忆”这个说法是不太严谨的，此观点成立的前提是这个产品的色彩设计应该符合人的视觉感受，首先产生美，和谐的感觉，然后才有可能去记忆，否则人脑会本能的排斥。我上面发的这个图，在各大“官方”机构的活动与宣传中屡见不鲜，不但缺乏重心，而且刺眼 — 这一再证明了我们的大部分领导都是美盲，这比文盲更加可怕。

色彩统一的难点在于色彩对比的区分，包括明度和饱和度的控制，无论你想怎么统一色彩，关键的信息一定不能被色彩本身淹没。

3. 无序的版式

近几年一直在兴起一股混合艺术还有自由插画的风气，首先我们不讲这是国际设计圈玩剩下的东西，我们单就画面表现来看，这种风格绝对不是下载一堆AI或者PSD源文件，稍微ctrl+u一下就可以拼凑出来的，乱七八糟的应接不暇和丰富多彩的视觉拼盘，你能察觉到有一点不同吧？

这当中的问题，还是出在版式设计的问题上，有很多设计师没有版式设计的专门训练，缺乏对于元素的控制，在版式的节奏和排布上没有控制力，这就出现了上图的“乱炖”插画。作为练习，这无可厚非，作为商业设计，也许这样的设计会误导消费者模糊品牌认识。

那么版式设计有没有稍微安全一点的方法呢？有的，“一个中心，两个基本点”，保证整体版式有一个重点，这个重点是你严格筛选的痛苦决定 — 它必须是最重要的信息。 两个基本点中，一是辅助的信息，二是趣味的部分，辅助的信息告诉用户他们对于产品的疑问你提供了什么线索，趣味的部分是版式设计一定要突破传统的排布给出一个亮点，他可以是线条、可以是插画、可以是一种印刷工艺、也可以是一个特别的形态。

4. PS的免费效果

好吧，在这个问题上，我甚至找不到做得相对较好的案例，我不止一次和朋友们聊过，我讨厌PS的默认滤镜和未经处理的效果，特别是那些《XXX种Photoshop特效制作》的书籍。这些玩意对设计质量毫无帮助，简直是最好的绊脚石。

滤镜当然可以使用，但是没有设计目的和经验的滥用，只会让人觉得你是在展示2000元平面设计速成的培训效果，并企图告诉用户你的培训费没有白花。虽然网上有很多免费的破解滤镜供你使用，但我要说，那些大多数都是提供给学生以及练习使用的，你在商业设计中能用到这些效果的部分不足10%。而类似上图这种撕边的效果，请问有何意义？

PS是个不错的工具，但它也仅仅是工具，设计应该多考虑概念和设计的目的，如果你依靠软件的计算机效果来设计的话，你的设计永远只能俗气下去。我的建议是，在你的草图和构思没有完成前，不要急于打开任何一个设计软件。

5. 低质量的照片

对于摄影来说，这是个严肃的事情，不要在你的设计中使用那些街上买来的图库女郎，这种事件甚至引发了国际友人寻找“中国最著名的女模”的活动 — 起因是他在各大城乡的不同企业的户外广告上，总能看到她的倩影。

更为杯具的是，一个质量不好的照片 = 一个质量不好的产品，至少我接触过的用户都是这么想的，更有民风颇为彪悍的用户直接指出：“我觉得吧，如果公司拍不起照片就最好别拍”。一个定制的摄影计划，一个优秀的摄影师，一个良好的创意，一个精美的图片，可以给你带来更多的用户，起码是用户的注意，这是经过案例反复证明的事情，作为设计师你也有必要建议客户这么去做，要知道如果侵犯肖像权的话，付出的代价可比请一个摄影师大多了。

对了，大多数“低劣照片”的神器之作，都是从网上下载的低像素版本（甚至还带有某网站水印），而美女们往往是这种现象的直接牺牲品。

6. 对素材的模仿

当年国内WEB设计圈对韩国模板的崇拜风潮，正是这种俗气的集大成之作。这个问题的根源在于对“流行”的盲目跟从，在没有人愿意思考的时候，往往某种错误的思考就容易形成风气，比如“群众的眼睛是雪亮的”这种低智商的说法，在设计圈就没有依据，群众雪亮的前提是，有部分先雪亮起来，并且先雪亮的人有足够的话语权和领导力。

所有的素材仅仅是素材，提供一种便捷的构图途径，比如设计原型图，以及初步的演示方案使用，无论从图形的表现力，还有创意的层面来看，素材是无法应用到产品中的。因此，任何对素材的直接模仿，和视觉上的抄袭，最后看来总是感觉“好像没有做完吧”，而部分设计师彷佛很安于这种现状，乐于去Zcool这样的网站淘宝 — 所以我说，ZCOOL的出现解决了很多美工的就业问题，也不算夸张。

如果以后你还觉得自己的作品老是有一些“不满意”的地方，应该首先反思是不是自己对于素材的迷恋太多了，以至于影响了你的独立思考，在过多的视觉轰炸面前，你也许该考虑多看一点文字，少看一些图片。

好了，我只是说了一些俗气话，讲了一些糙道理，关于更深刻的视觉表现的经验，我想还有很多要聊的。既然我们已经被俗气包围得透不过气了，我们是否可以积极的改善一下恶劣的视觉环境？这无非是1000个字就能讲得清楚的，如果设计师对品质还有点要求的话，不要让你的作品变俗，比让你的作品变好，更是我们的当务之急。

转载自：“周陟-跨媒体设计师”的博客