我想网 » Design

GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比

seasun — Mon, 03 Jan 2011 13:04:16 +0000

PNG这种文件格式值得科普下,对比GIF来说

PNG和GIF都支持动画
PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴
所以动画图片来说,还是GIF支持最好

第一种PNG叫PNG8(索引色透明),简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
但是PNG由于算法的优势,体积比较少
所以,静态GIF完全可用PNG8取代

第二种PNG也叫PNG8(Alpha透明),牛逼在可指定像素点的透明度,例如50%透明度
这种优点在于比PNG24/32体积小,但效果一样
缺点在于IE6支持不好,会显示灰底

第三种PNG叫PNG24
和PNG8的区别仅在于体积更大
比较尴尬的存在

第四种PNG叫PNG32
和photoshop的PSD一样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于有图层

简单的归纳就是

动画:
支持: GIF, PNG只在firefox支持
不支持: 非Firefox的PNG

索引色透明(某像素是全透明还是全不透明):
支持: GIF/PNG都支持
不支持: IE6下的PNG8(Alpha透明)和PNG24/32

Alpha透明(可指定透明度):
支持:PNG8(Aplha透明)/PNG24/PNG32
不支持: GIF/PNG8(索引色透明)

图层
支持: PNG32
不支持: PNG8/PNG24/GIF

颜色
256色：GIF PNG8(2种)
其他的格式颜色数不过来,好多

附加说明:

Photoshop 只能创建GIF、 PNG8(索引透明)和PNG24

Fireworks 能创建任意格式的GIF和PNG

PNG8(索引透明)在创建的时候有个参数叫(PS杂边|FW色板),这个作用就是用杂边色加上像素点的透明度例如50%,生成伪透明的不透明像素点
适用于固定底色的伪半透明,例子里用的杂边是黑色,在白背景下就很明显

PNG8(Alpha透明)在IE6下会有过度裁剪的问题,可能是把半透明的像素都去掉了,所以某些图片会如最上面第一张图所示,被狗咬的感觉
规避方案:

1.用2张图,IE6用PNG8(索引透明),非IE6用PNG8(Alpha透明),在CSS里用_这个IE6hack来区别
2.半透明在作图的时候就要考虑到被去掉后的样子,对设计师有要求,不大现实
3.说服自己接受这坨大便,然后咽下去就这样了你想咋样

静态GIF、PNG 24、PNG32不大推荐在网页上用

实例在

http://code.sh/lab/png/

有兴趣自己去看

如有疑问和补充请留言，有问必答

——补充线 ———————————————————————————–

ytzong says:

规避方案补充一个：
对IE6使用AlphaImageLoader滤镜，用在PNG8(Alpha透明)上，就像对png24用该滤镜一样，就不会有被狗咬的效果了，要平衡下性能进行取舍
http://www.misuisui.com/weblog/?p=2286

alpha透明的png8做渐进增强非常赞，例图
http://docs.google.com/File?id=ddrrtxb_1735hpptpxcm_b
高级浏览器有阴影，IE6木有

大猫对补充的补充:
1.AlphaImageLoader滤镜的缺点在于额外的CPU和内存开销,并且在图片下载失败的情况下会挂死整个页面,优点如涛哥所说
2.例图里因为非半透明区域是边缘平整的所以适合渐进增强,但是有相当一部分图就被狗咬了,具体看情况来取舍,顶渐进增强

==AD make sense============================================

推荐下ytzong的 CSS gaga ,新增自动生成雪碧图功能,强的1B
本文是涛哥认为俺不懂PNG的反击之作,哇哈哈我不是2B

ytzong: AOL有篇文章不错
猫总这里人气不错看有无人要翻译的
http://www.artzstudio.com/2008/07/png-alpha-transparency-no-clear-winner/

Feed enhanced by Better Feed from Ozh

一个网站，5个目标

seasun — Mon, 03 Jan 2011 08:34:07 +0000

这是最近看到的一篇很不错很实用的文章，主要侧重于设计前的思考、思路，看完有很大的启发，所以推荐给大家，因为是翻译的，翻译不准确的地方还请见谅~

在生活中，拥有目标是非常重要的。

特别对于网站设计而言，因为没有目标就没有动力，更无法衡量你的成功与否。目标有助于设计师专注于重要的事情，把握设计方案的走向。目标能帮助设计者设计出令人眼前一亮的网站。

设计任何一个网站，过程都是大同小异的：我完成了一份设计稿，然后把它交给客户。虽然在一开始，我有我的创意，客户有客户的需求，但是我知道我会在最后交出一份令人满意的答卷。之后的步骤大径相同，但每个网站都会因面向的群体不同、定位不同、风格不同而各自产生某些不同的步骤。有时我需要手绘，有时我又必须利用PS、AI等软件的强大功能。尽管不同项目的过程可以有所差异，但至关重要的是做一个网站一定会确立一个目标，无论你把它写下来也好记在心里也罢，你的设计必须把这一目标体现出来。

我在以下列出的5个目标，是在每一次开始网页设计时都必须思考的。

1。力求用户友好和美观

良好的用户界面往往是建立在牺牲掉一个优秀设计的基础上，然而这两者同等重要，应该让他们和平相处。一个设计良好的网站可以帮助用户轻松访问。网站中的每个元素都应该在客户习惯的位置，否则他们的存在就必须有特定含义，而设计师必须对用户进行引导。例如，导航会放在页面顶部不是因为它放在那里比较好看，而是用户不会拖动滚动条到处找它。如果你一定要让用户拖动滚动条去找导航，就给他们一个理由，比如一些更容易被发现的引导用户向下看的设计。

案例：http://www.whitehouse.gov/

该网站是在奥巴马2008年11月就职时改版的。改版前，网站只专注于提供信息，却没有考虑如何把组织信息和提高可读性。改版后的网站力求用户友好与美观，体现了设计对于可用性的专注。以一个柔和的渐变与经典西方建筑的图案为背景，塑造出一个更舒适更赋有现代感的外观。新导航与信息的合理组织使用户更快速、更有效的获取所需。宽敞的布局，也同样是对用户浏览该网站有利的因素。不需要的东西全都去掉，只留下对用户最重要的部分。

2。明确目标用户

我见过很多网站，看上去很华丽却不适用于它的目标群体。对于设计工作室或者音乐人来说，一个复古的网站搭配时尚的色彩会是很棒的结合，您的顾客也乐于见到。但这样的网站并不适合以专业人士和企业用户为主要群体的律师事务所网站。对于这点，您的客户具有良好的洞察力，因为他们的工作就是与这次的目标群体打交道。在你做研究的时候看看跟你同类型的公司都在做什么，你不必做相同的事情，但是网站给人的感受必须的类似的。

案例：http://www.apple.com/

Apple’s site

该网站是一个很好的例子，出色的设计完全符合目标用户的口味。网站用柔和的渐变、大尺寸的图片展现了干净、简约之美。字体非常重要，苹果网站在标题、字号、位置上都精心考量过。现代的风格精确定位于年轻的偏重技术的用户。该网站也并没有严肃的那么彻底，层层细节中不断渗透出轻松的元素，这点也正中年轻白领的下怀。该设计也同样符合他们产品外观的特点–时尚、有圆角而整洁的组合。以上几点都令用户感到舒适，除此之外，还会产生巨大的吸引力，带动用户去看他们旗下所有品牌的产品。

3。让用户界面自由流畅，让用户能快速高效的找到他们需要的信息。

良好的导航是优秀网站的关键。实现做好网站地图有助于分配页面跳转的去向以及哪些模块应该放在一起。许多网站的导航很繁琐，是因为他们根本没有计划过，哪些信息放在哪里最合适。您需要尽量压缩整个页面的容量，而让重要的信息所占比重最大化。不用把所有相关信息都要放在网页上，因为并不是每个用户都有耐心去阅读。精简导航，确定什么是最重要的，丢掉其余的。

案例：http://www.mediatemple.net/

Media Temple’s site

该网站风格偏向沉稳，暗色调的渐变搭配倒影呈现出光滑的质感，突出了高科技的重点。简洁易用的主导航以及前端有标示的二级导航，都让用户很轻松就找到所需信息。网站的整洁清晰，宽屏的设计让视野更加开阔，十分有利于浏览和阅读。点击网页上的介绍后，明显的“查看详情”的按钮引导用户深入网站，最终找到他们的目标网页，即网站希望用户到达的网页。匹配的按钮和有效地知道在整个过程中给予用户有效帮助。

4。给客户他们想要的以及需要的。

正如众多设计师所知，客户往往认为他们才是最清楚的。一般而言，他们肯定比你更了解自己的公司，所以有关客户和产品的描述得听他们的，因为这是在他们的领域。然而，对于如何把信息组织的更加实用以及网页用户有何特点，他们可能并不了解。因此某些重要的事项你必须为你的客户讲解并让他们充分的理解–为什么他们不需要一些看上去很“炫”的东西，例如做一个长达5分钟的尽管看起来很绚丽的网站介绍。

案例：http://mobify.me/

该网站干净、简约而富有现代感，加上在细节上出色的视觉效果，帮助用户浏览网站。该网站的目标人群除了企业用户外，也包括对“手机友好”感兴趣的技术开发人员和网页设计师。浏览该网站的用户很可能本身就是网站方面的专家，而来的目的是为了进一步拓展自己的网站。这个网站的设计，就是一切关于公司销售移动服务的需求。该界面简洁、光滑，正如一个移动设备给我们的感觉。导航简洁易用，在这个现代高科技的网站上清楚明了的给予用户他们所需要的。

5。用增加代码来拓展网站的功能。

一个简单的网站在运用了JS或PHP的一些功能后会变得强大起来。用户会享受这些附加功能，设计师也有机会做一个新的尝试。既然有这么的技能可以学并植入到网站中，为何不针对每项功能都尝试一个新的页面，在设计上也寻找新的突破呢？尝试一个新的JS教程或一个有趣的PHP 脚本。每当你坐下来设计一个页面的时候都有成推的东西要学，只要你在做每个网站的时候多学一样东西，试想一年后你会有多少成长呢。

案例：http://www.authenticjobs.com/

Authentic Jobs

该网站在细节的处理方面做的非常出色，表现在加强了它的使用性和功能性。网站原本非常基本、简单，但一些JS的运用大大提升了网站的价值，而且让用户的使用更生动有趣。你可以改变工作类型，添加或删减类别，以便在你点击按钮时，在他们的工作清单中过滤信息，让你在更短的时间里，找到更精确的结果。这一类的细节，是这个网站的亮点。

总结：确立目标的确是作为一个网页设计师提升设计水平、前端技巧的重要组成部分。你不可能没有目标就能提升技巧，并让你的客户眼前一亮。每当你开始一个新的页面之前，思考一下你希望完成一个怎样的作品。你的目的不是要追求“完美”，而是要最求“优秀”，而且不要放过任何一次机会。

Feed enhanced by Better Feed from Ozh

2011年值得注意的5个Web设计趋势

seasun — Sun, 05 Dec 2010 14:53:24 +0000

在过去的12个月里，我们已经看到Web设计领域发生了许多变化。包括智能手机和平板电脑(如iPad)这些移动设备的日渐普及已经改变了用户对内容的访问和交互方式。还有，像HTML5、web字体和CSS这些新标准的正式通过意味着越来越多的用户可以使用网络上最新最强大的功能。

小企业往往因为重新设计的成本和必须照顾大众用户而无法跟上最新的Web设计潮流。不过，下面列举的这些关于web设计领域的技术趋势，我们认为小企业有必要注意一下并考虑把它们纳入自己的网站。

1、抛弃Flash

无论Adobe 与苹果的Flash之战你站在哪一边，越来越多的网站和开发者开始远离非Flash不可的视频、动画和网站导航这都是一个不争的事实。

Flash的主要应用还是在多交互设计和RIA(富互联网应用程序)，而小企业一般不需要提供这类用户体验，只要简单地展示信息，使用HTML5、 Javascript和CSS3来替代 Flash也许更有意义。

大多数的移动设备无法访问Flash，甚至有些支持Flash的也不能完美地支持。作为一名客户，没有什么比这个情况更加糟糕：当我从手机访问一个网站却发现无法浏览联系信息、产品列表和服务或者是位置信息，而原因是网站的导航或核心内容是Flash创建的。

对于某些任务，Flash确实是个好工具，例如捕获音频或视频、展示复杂动画或运行游戏。如果你还在使用陈旧的circa-2005 Flash模版，2011年可能是升级使用一些更现代化工具的时机了。

2、网络字体

字体排印是任何网页设计的关键组成部分。以前，在网站上使用自定义字体是件复杂而且让人头疼的事情。其结果是，大多数设计师要么使用为数不多的 web安全字体，要么使用类似文字的图片或Flash替代的方法。

令人兴奋的是，在过去12个月里，字体和网络都有了很大的发展。感谢TypeKit、Fonts.com和Google网络字体这些服务，现在可以在网站上以微小的改动来使用免费的网络字体。

3、针对手机兼容/优化网站

越来越多大大小小的网站都开始修改自己的网站增强其对小屏幕的友好性。一个做过移动设备兼容和优化的网站意味着不仅会让网站在蜂窝数据网络中加载地更快，也让网站内容更适合小型设备的屏幕规格，使其更容易访问和理解。

随着智能手机不断普及，我们越来越多的在线时间花在手机上。对小企业来说，确保网站的良好手机体验是个提高网站可用性的好机会。

4、来自Tumblr的灵感

微博Tumblr是一个快速、轻易发布更新、分享内容和获得反馈的平台。Tumblr已经成为一个受欢迎的平台，很多小企业都在使用它作为公司博客或者网站。

Tumblr有很多面向小企业用户的优秀主题，而它本身在web设计领域也是很有影响的一个作品。

如果你不使用Tumblr作为官方博客或网站，也可以去山寨它的设计风格——独特的发布类型icon图标、漂亮的大标题以及简约的布局。

5、触摸未来：HTML5和CSS3

正如引言中所指出，非设计行业相关的小企业很难使用设计领域的前沿思想去解决他们对部分潜在用户会否被拒之门外的担忧。

虽然还有一些企业网络和一小部分家庭用户在使用那些陈旧、衰老、几近灭绝的浏览器，但目前主流浏览器（Internet Explorer、Firefox、Google Chrome、Safari和Opera）的最新版本都支持CSS3和HTML5。

此外，几乎每一个现代化智能手机也都支持先进的CSS3、JavaScript和HTML5的功能。

在这个阶段，完全可以尝试在你的小企业网站上实验一下HTML5或CSS3的威力。可以使用技术在趋近标准的新浏览器上提供增强阅读体验，并在那些破旧的浏览器上降低体验。

Feed enhanced by Better Feed from Ozh

Web表单设计:表单结构

seasun — Sun, 05 Dec 2010 14:46:32 +0000

原文地址：:http://www.alitedesign.com

你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助，让我有机会细心品味设计表单的乐趣。总体来说，Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品（Sell Your Item）表单售出；MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的；YouTube、Youku通过上传视频（Upload Your Video）表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会，Web表单常常是漫长旅途的最后一步，也是最重要的一步。

以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素，过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌，想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等，但表单却给用户带来了麻烦，妨碍了他们。

大多数表单是“由内而外”（Inside Out）而不是“由外而内”（Outside In）设计出来的。举个例子：如果谁想成为网站的会员，网站就会跳出表单要求用户提供用户名，密码，电子邮箱等。这就是“由内而外”的设计，多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时，“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计，目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在，但又能保证系统和用户都获得想要的东西。

在电子商务、社交互动、生产力网站里，我们发现表单阻碍着用户需求和商业目标，表现为：

人们从电子商务网站购买需要的商品，而结算表单阻碍着交易双方。
人们加入社交网站与朋友聊天或分享内容，从增加用户基数与活跃度方面说，阻碍双方的是注册表单和联系表单。
人们希望基于互联网的生产力工具，创造高效协同工作，当公司要增加网站内容，增加了用户的时间，表单再次阻碍了两者。

Web表单设计在支付和注册环节，会起到至关重要的中介作用。2004年人机交互（Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”，作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例，提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响，并成为评估和资助设计项目的范本。

通过逐页画出整个流程，同时配合说明用户离开和最佳实践分析的网站点击数据，下面我们分别分析每种数据的意义：

可用性测试 目的在于可获得宝贵的定性与定量数据。

错误或问题的数量或位置；
错误或问题的严重程度；
完成率；
完成整个表单或部分表单的时间；
满意度评分；
任务主观评论。

实地测试 从人种学角度观察，人们在不同环境中，与表单的互动方式情况。

访问表单要求填写信息的来源：文档、软件和人等；
表单填写环境：吵闹的办公室和小监视器等；
任何说明表单完成或错误率的额外情境。

客户支持 通过客服或访谈等，了解用户使用表单时发现的问题，有利于分离和解决问题。

报告最多的问题；
解决报告问题的常见办法；
问题报告人的统计信息；
问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用追踪任意数量的有用量化指标。

完成率；
如果表单未完成，人们是在哪个位置放弃填写表单的；
人们访问表单的方式；
已使用哪些表单元素；
已输入哪些数据；
浏览器和操作系统信息。

眼动跟踪 记录用户如何理解表单的表现形式，可用于解释复杂的地方。

人们在表单上看到了什么；
眼球固定次数：解析表单所花的努力；
眼球固定时间长度：看每个元素所花费的时间。

Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。

设计问题的独特解决方案；
网上通用的模式。

观察用户如何完成表单，或者利用现成的网站分析软件监测网站日志，也可以得到大量有用的观测信息。

虽然很难设计出优秀的表单，很多时候都是“视情况而定”，但是通过考虑表单的设计因素，也就是以下我们所说的，找到适当解决办法的原则和模式，可以设计出不错的表单。闲话少叙，针对互联网表单设计，原则如下：

尽量减少痛苦－用户不在意之前是什么，更在意之后能得到什么，让过程尽量简洁快速。
说明填写完成路径－表单应该有清晰的提示或帮助用户，告诉他们如何能快速完成目标。
考虑情境－表单并非独立存在，它们都是更广泛情境（受众群体、应用、业务）的组成部分，这些情境决定如何使用表单。
确保一致沟通－表单是用户与公司沟通的中间人，多个团队参与对话，但最后表单只能传达一种一致的声音。

贾里德·斯普尔曾经有一个经典案例：修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情，但是它确实是事实。良好的设计如何能为商业创造价值，这是设计团队一直在思考的问题。有一点是可以肯定的，我们用客观的数据与严谨的实验，去证明我们设计原则与设计模式，让它们的设计价值最大化，达到为商业创造价值的目标。

你会构建表单组织吗？

面对优秀表单设计，人们能够不费吹灰之力就能填完表单，这里有视觉与交互设计考虑因素对表单的影响，但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则：

应当花时间评估表单中的问题。应当提高警觉，去除一切不必要的问题。
表单所提问题（标签）应当尽量简洁。
如果人们会误解简洁标签，应当寻找使用自然语言的机会，澄清表单要求人们回答的问题。
表单所提问题来自多个不同人或部门，应当确保表单统一口径。
可以将表单内容组织成逻辑组，有助于浏览和完成填写。
如果可能，应当以对话形式构建表单。主题间的自然间断有助于组织表单。
如果表单可自然分成若干主题，一个网页可能就足够组织表单。
如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单。
如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单。
可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。
可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
应当采用最少的必要视觉信息来区分内容组。
英文网站首字母应当大写，使内容组更容易浏览。

Effortmark公司可用性顾问，卡罗琳·贾勒特说：“先考虑人，在考虑像素。”开始设计前要思考一个问题：用户真正关心什么？设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始，并了解你的公司搞清楚为什么表单要这么设计？是用户关心的关系点问题么？“保留，删减，延迟，解释”形成更好问题的四大策略，同时，多种视角的平衡用户需求与商业需求。

设计表单时要注意细节问题的处理，比如：表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。

确保表单名称符合人们的期望，并简洁解释每个表单的用途。
如果表单需要时间或者查询信息才能填写，可以采用起始页来设定人们的期望。
由始至终采用清晰浏览线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。
对于关键任务表单，比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。
如果表单分为多个已知的有序网页，可以采用进程指示来传达范围、状态和位置等信息。
如果表单没有清晰的有序网页，不要采用进程指示，应当采用更笼统的进程指示，而不要设置错误期望。
设计表单布局时，应考虑使用Tab键的“跳转”体验。
采用“tabindex”HTML属性来控制表单的跳转顺序。

Oracle可达性主管，彼得·沃勒克说：“对许多残障用户而言，表单的设计可达性尤其重要。可达性的核心是可用性。例如，如果网页不能使用或者无法开始，可达性首先需要“超级设计”（Uber-design)。包括：超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南（WCAG)和美国采购法508章的最佳可达性指南。

Feed enhanced by Better Feed from Ozh

30个灵感来源于动物的创意LOGO设计

seasun — Thu, 02 Dec 2010 14:29:10 +0000

分享：30个灵感来源于动物的创意LOGO设计，希望可以给你带来某些灵感。

Koloroo

MILICA SEKULIC

ILLUSION STUDIO

DODO

RETRO ZEBRA

RED FOX

big colors

BISON

Seahunter

Vilyaiskiy_produckt

ARMADILLO

WICKED SMAHT

RedibeX

Mojito

Stingmaster

CAMEL

aeoc

WHITE PONY

Unpugged

CORRIDA

ROCKET DOG

Goldie Lock

BLUE MOON

BLUE DOG PROPERTIES

Fishline

The Royal Guardianship

TIGER WILD

FASHION

Sylion

Rhino’s Life

Feed enhanced by Better Feed from Ozh

20个灵感来自大自然的创意LOGO设计

seasun — Thu, 02 Dec 2010 14:17:11 +0000

分享：20个灵感来自大自然的创意LOGO设计，希望可以给你带来些灵感~！

与地球有关的Logos：

与火有关的Logos:

与空气有关的Logos:

Feed enhanced by Better Feed from Ozh

24个包含X的创意LOGO设计

seasun — Thu, 02 Dec 2010 14:10:59 +0000

分享：24个包含X的创意LOGO设计，这个X可以代表字母“x”也可以图形X，希望有你喜欢的。

Feed enhanced by Better Feed from Ozh

30个简单的网页表单设计截图

seasun — Sun, 28 Nov 2010 09:39:23 +0000

网页表单设计是网页设计中要求非常严谨的一种设计。网页表单可能是最常被访问的一个区域，比如说注册登录表单等等。这里，我们收集了30个非常优秀的网页表单设计供大家参考。点击网页截图，可以进入到原始的网站查看设计。更多表单设计，可以参阅以下文章《25个网页表单设计》《来自时代杂志的35个非常漂亮的图表设计》。

Base Camp

Big Cartel

Feed enhanced by Better Feed from Ozh

来自时代杂志的35个非常漂亮的图表设计

seasun — Sun, 28 Nov 2010 09:31:48 +0000

在时代杂志的网站上面，我发现了一个非常有趣的关于数据图表的主题。这里罗列了一些不同风格的表单数据图表设计，希望你可以在你下一次的设计中，得到灵感。对与数据表格比较感兴趣的人，可以移步这里《25个网页表单设计》《35个购买页面设计欣赏》

H1N1: How the Virus Works

Michael Jackson’s Life as Prodigy, Superstar and Jacko

Preterm Birth Rates

Leading Causes of Death

The People Behind The People

An Interactive Guide to the First 100 Days

American Thrift: A TIME Poll

International Adoptions in Decline

Animals Under Siege

TIME’s Person of the Year 1927 – 2008

A Brief History of Chinese Democracy

5 Truths About Health Care in America

How You Have Voted

You Have to Choose

50 American Wines

Timeline: The IndyMac Panic

Catholics’ View of the Candidates

The Clinton-Obama Divide

Mapping World Remittances

Where Do Dictators Go?

2008 Olympic Torch Relay

The Toll of Iraq

The Primary Race So Far

Bush’s Speech, Word by Word

The Poll Results

Russia and China: A Common Cause

One Day in America

Breast Cancer Around the World

Flight Risk for the V-22 Osprey

Campaigning by the Book

Feed enhanced by Better Feed from Ozh

35个购买页面设计欣赏

seasun — Sun, 28 Nov 2010 09:20:10 +0000

购物车页面，是网上购物过程中的一个部分。电子商务设计师面临的挑战，是创造一个有吸引力的，用户友好的界面，为用户提供一个愉快的购买体验。在这篇文章中，我们将有35个具有良好的设计和吸引力的购物车页面的网上商店。精心设计的购物车页面可有助于提高购买转换率。

Chop Shop

Ooga Zone

Nine West

Nike

REI

TOOBYDOO

Crate & Barrel

House Industries

JAQK Wine Cellars

Kansas City Steaks

Abercrombie & Fitch

Nestliving

Red is White

Mouse to Minx

Cacties

Urban Originals

Russell & MacKenna

Lane Bryant

Nort Berlin

The Sak

Acne

Lucky Brand Jeans

TasteBook

Brio

Anna Scholz

Steve & Co.

Mohawk Paper Store

Hard Graft

Nicholas Deakins

ShopRush

Dirty Coast

Victoria’s Secret

Ginger Pup Lane

Bridge55

Design by Humans

Feed enhanced by Better Feed from Ozh

25个网页表单设计

seasun — Sun, 28 Nov 2010 09:07:33 +0000

一个成熟的有组织的注册页面会转送大量的数据，在这样一个小的区域中，必须让用户迅速且轻松阅读。过于创造性的名称可能会伤害到用户的注册过程，用户会用过多的时间思考名称的含义。启动一个试错阶段，测试你的听众更容易被什么吸引。
这里有25个创新的注册网页，你可以通过它们扩展自己的设计。

1. Wufoo

2. Ballpark

3. Squarespace

4. Concept Share

5. The Resumator

6. Big Cartel

7. MindMeister Editions

8. Freckle

9. Nibble Tech

10. Form Spring

11. Zen

12. Strutta

13. Basecamp

14. DropSend

15. LightCMS

16. Linkpatch

17. Mailer Mailer

18. Livestream

19. eWedding

20. Media Temple

21. Litmus

22. Brightbox

23. Harvest

24. Web-o-matic

25. Crazy Egg

Feed enhanced by Better Feed from Ozh

设计师：值得长期关注的网站

seasun — Tue, 23 Nov 2010 13:16:06 +0000

看别人的作品，不是为了记住很多的技巧和花招，以期待将来能“套用、借鉴”到自己工作中。真正的欣赏需要消耗“心力”去解读，揣摩变化背后的意图…

只要在网上无聊，我会固定在浏览器网址栏里敲入一些字母，组成网址进入到那些熟悉的网站。像老朋友打招呼一样，我总是希望对方能有些变化，这个习惯六年来没有变过。看别人的作品，不是为了记住很多的技巧和花招，以期待将来能“套用、借鉴”到自己工作中。真正的欣赏需要消耗“心力”去解读，揣摩变化背后的意图。

在积攒了很多截图和案例之后，我才猛然发现，其实关注太多很容易分散精力，经典往往永远走在最前边，只需要关注他们就够了。如下列表个人认为也许不一定完全代表当今Web Design 的巅峰水准，但长期不懈的努力的确创造了很多难忘瞬间。

ibm.com
企业网站的典型，这个网站我看的时间最长，大概有六七年，以前主要学习Web标准化方面知识。前两天刚发现改版了，所以放第一个推荐。纵观这几年的发展，总的来说中规中矩，符合IBM品牌踏实可靠的特质。这个2010的新版突破了老爷车式的科技感，难得“亮眼”了一回，以至于用1600的显示器打开吓一跳。

cnn.com
从我知道CCTV 抄袭CNN之后开始关注，有四五年了，这个网站信息量巨大，典型的内容型平台。具体还真谈不上有多好，只是感觉CNN地位不一般，经常跑页面上分析模块和代码。CNN的强大在于内容，以及对内容恰如其分的展示，可访问性、可读性方面的细节值得研究。

yahoo.com
Yahoo美国首页分别于2006年5月和2009年7月分别有两次重大改版，每次都是绝对的突破和引领潮流，引得无数设计师尖叫。据说它的设计成果均来自严谨的定量数据分析，从实际体验效果来看，我虽然不习惯，但也找不出什么大毛病。做为一个综合门户网站的首页，Yahoo是最值得研究的对象，设计理念很超前，旗下子产品全部风格独立，首页也因此格外标新立异。扩大范围来讲，个人认为Yahoo美国在Web方面的技术储备不在Google之下。曾经听过 Yahoo韩国团队的分享，也因此经常看Yahoo韩文(yahoo.co.kr)版本，细节是不一样的。

adobe.com
2005 年从Macromedia被收购后开始关注Adobe，熟悉我的朋友都知道我做设计尽可能的不用Flash。但凭心而论，Adobe网站是超一流的，我亲眼所见Adobe是如何一次次改进去掉了繁复的动画，我想Adobe网站的设计师们很清楚Flash该用在什么地方，并且充分利用排版上的优势，把视觉设计结合的很好。再次证明，只有二流的Flasher才不余遗力、不分场合的乱用动画。最近不知为什么，Chrome老是因为Flash而崩溃，Flash 升级也总失败，恨的咬牙切齿。

apple.com
从 iPodNano在2006年风靡世界开始，我才发现这个水果网站做的那么好。Apple网站的视觉风格与Adobe完全相反，不在华丽的层次追求视觉冲击，排版布局也单调到令人乏味。但照片尤其出彩，模块化很到位，且细节处理极佳。注意个节奏问题，Apple首页改动非常频繁，采用简单的视觉冲击是常用手法，尤其在推新品的周期内，反正维护也不麻烦。如同Jobs对Flash的评价，Apple网站上没有任何动画，这点我喜欢。

flickr.com
Web2.0潮流下最知名的网站，2004年左右关注。在独立发展的过程中，版本迭代极快，过程备受关注，很多次改版和细节都口碑极好。自2005年初被 Yahoo收购之后，整体网站设计受影响不大。逐渐被GFW封掉的过程总，我的关注度开始下降，到现在基本不用，只偶尔看看。前不久终于有一次重大升级，如果把之前几年改进看作是做加法，这次改版可以说Flickr已经开始做减法。

haier.com
海尔中国做的很一般，海尔海外还有很多版本，单独来说都算不上顶尖。但我发现它“全球网站”的整个体系做的非常出色，风格独立但又不会设计统一，比IBM纯翻译内容好的多。是国际化公司做全球网站的典范，真为咱中国品牌争脸。

muji.net
从了解《设计中的设计》作者原研哉(HaraKenya)开始认真关注MUJI这个品牌，MUJI的日文版（.net是日本版）风格尤其突出，其气质与品牌相符。后来看到国内品牌Vancl的网站，一眼就能看出有MUJI的影子，但没有做出那种品质感。另外，MUJI相关还有系列网站，设计也很出色，不太清楚他们是站群还是什么关系，比如muji-beauty。如同楼上的Haier，MUJI也是全球网站体系比较好的典范。

wordpress.com
2007年开始用Wordpress系统，经历了几次升级。它的官方网站看的不多，但系统本身花了些功夫研究，尤其后台表单，以及数据模式的处理上，获益良多。就这么个精致的小产品，技术一直走在前列，比如3.0某版本登录框，如果登录出错，已经不再是传统的“红色”警告，它开始“蛮不讲理”的晃动登录框。这样的“情感化设计”早有耳闻，但却在Wordpress上首次见识。

就个人观点而言，不是说“有名”的网站就一定多好。比如，按理说Microsoft新版网站其实也还不错，因为用的少的原因，不好乱下结论。相应Msdn这样的框架的确经过了N年的考验，以前盛大的官方网站就是完全抄袭Microsoft老版框架。还有eBay，据说在海外用户体验排行前几，但我用过几次，流程感觉不符合我们的习惯，退一步讲整体“美感”也不行啊，比咱“淘宝”差远了。

也许有人注意了，以上列表都是非中文网站。说实话，中文互联网产品起步较晚，成功的很少，值得学习的也不多，目前我只关注“豆瓣、淘宝”两位。在系统工程角度，越是大型的网站，协作难度越高，在此类网站上能学到的知识也最多。那些小清新、小创意的网站，看多就烦了，没什么值得挖掘的价值。积累是需要时间的，在一次次的酝酿之后，创意总会与你不期而遇。

如何去发现值得关注的目标，最笨的方法是枚举。曾经我做的第一件事情，找现成的列表，比如世界500强企业网站，还有alexa数据里有个 TopSites列表，有现成的各“国家、分类”排行。第二件事情，我查过很多知名品牌关键词，在搜索引擎中寻找蛛丝马迹。早期因为整体水准不高，成功率均相当低，但只要在100个中找到1个亮点，我认为也值得。

本文旨在分享方法，不希望看到信息快餐似的技巧花招被疯狂追捧。个人精力有限，很多精品都应该值得挖掘和关注，我希望能有更多的同行来做这件事，尤其一些专业领域和行业，所有人共同提高。以上仅是个人观点总结，如果各位有好的推荐，希望也在评论里反馈给我。

Feed enhanced by Better Feed from Ozh

如何设计完美的名片

seasun — Sun, 21 Nov 2010 09:38:08 +0000

在这篇文章中，我们会探讨一个考虑周全的、有设计感的名片设计可以如何帮助你的公司给他人留下好的第一印象和传递正确的信息。我们会看一看你设计中包括的元素和设计中的不同步骤。

我们常常听到第一印象对于职场和个人的重要性。

在职场中，对专业客户或者潜在客户留下的第一印象可以决定我们最终可以获得多大的项目。如果我们在第一次会议上无法让对方眼前一亮，原本可以更上一层楼的我们就无法继续参加下一次的会议了。

而且，我们往往会忽视第一印象是从名片开始的。事实上：在大部分的合作场合下，我们第一个要做的就是交换名片。

Blink Airbrushing名片Katerina Vourgos设计
当你设计这些名片的时候就应该记得，与任何潜在的专业品牌沟通时特别是设计师，都会用到名片。名片上的文字表达了最重要的信息，但是整个设计还叙述了大量有关你生意的信息，所以谨慎地为它找一个最完美的设计，你知道所谓的：“一图含千言。”

Personal Identity PackageJordan Puopolo设计
这样，“完美的”设计具体是什么意思呢？交代生意的范围和需求，完美很难被定义。对一个品牌起作用的不一定会对别的品牌也起作用。你不得不找到一个创新的方式来使名片能够超越你同行们的。一下是对于你可以如何设计一个引起话题和关注名片的分解步骤

 Dreamten Studios名片Phillip Lester设计
专业性名片

为了传达你超群的专业性，你的名片应该有一个有型的、干净、简约的设计。你的介绍也应该简介，不要让对方分散注意；告诉对方你是严肃而专业的公司，直抒胸臆地表达。将这套方法与你的设计并用。
包含的信息

能够有专业倾向的是使用无衬线字体，大量的空间留白和一些压印或突出的效果。精致是这里的关键，你在字体上的选择就是要精致。这样的字体传达出一种稳重、高雅的感觉，在这种情况最为适用。而在中文字体方面，我不介意用系统自带的黑体或者微软雅黑（当然是我的个人感觉），中文的黑体也是在与时俱进的，如果你想显得更专业和现代，还是用Hiragino Sans或者蒙纳黑体系列更好。并确保你的文字字间距均匀舒服地排列。将字体文字的排列和白色空间调整到可读性最佳的状态。最后给文字制作上压印或者凸版效果将你显得很专业。

Dreamten Card 近距离

颜色的使用

颜色是另一个需要考虑的方面。记住只使用一个或两个颜色来使它保持简洁；你可能在选择文字上花了很大功夫使它很简约，请谨慎地使用颜色来继续保持。

什么颜色能传达你的专业性？

经典的白色可以象征思维的清晰和有条理
棕色给人留下稳重的印象
灰色表示自然的实用
红色可能也是一个很好的选择；它象征着你品牌的热情

活力型名片

有时候，我们希望不要太过严肃的专业态度。我们希望有那么一点活力在里面。有的人常常会有些异想天开的想法，但如果那样子适合你和你的生意，完全可以做。将你的名片填满颜色或者灌满想象力。你并不想完全照着模版来做你的名片，为什么不把你的头伸出那些条条框框并保持这样子，可能它会比你的预期坚持更久。

Mooi SeventhDesign设计
需要包含的元素

当你在选择名片中所要包含元素的时候，让他更给力一些吧。有色彩的图案有时候会很有效；在等你回复邮件的时候可能会令人浮想联翩。允许你自己将内容的形式设计的很好玩。可能尝试一下手写字体，但也不要牺牲掉可读性。如果你找不到一个精致干净而好玩的手写体，回头再试一下无衬线的字体（哪个都可以就是不要 Comic Sans！）如果你想要衬线字体，倾向与在粗衬线体中跳线：它们的间距和对齐可以照你的喜好来。其他的效果也许可以是压痕和凸版印刷。

名片的多样化设计

颜色的使用

当你决定使用好玩的风格，颜色泼溅也是不错的做法。你的印刷机或者预算可能会限制你使用颜色的数量，但你仍然可以照你想象的那么试一下。

黄色是一个很好的开始，它拥有快乐和充满能量的感觉
橘黄色也是一个选项。它在一般情况下代表快乐和艳丽。它同时也是一种人们又爱又恨的颜色，所以小心使用。
如果对你来说没有限制，你还可选择适当的阴影甚至蜡笔。

可信赖型名片设计

想要传达可信赖程度，可以将你的名片设计地很可靠。卓越的声誉在商场上的确很吃香，但是除非你准备将你客户的评价印在名片上，你不得不想象一下这一点，然后保持信息的简单程度。在设计上有很多方法来传达可靠度。使用一些简单的颜色选择和一些关键元素，这样的话质量会明显地表现出来。

Pao and Lee设计工作室 Fizi Pao设计

需要包含的内容

传达可信度是很复杂的工作。倒退回传统的设计应该会起作用。最近的人们正在对他们的名片做很多惊人的事情，但是有人发现这除了华丽还是华丽。回到基本的设计可能表面你还是脚踏实地的，并不需要表现的很激进来卖掉你的品牌。衬线或无衬线字体都可以用，但是无论你选了哪个字体，都要用粗体压缩格式，因为这样有很强的存在感。控制不同效果的简洁程度（除非烫金）。

Pao and Lee Design Office 特写
颜色的使用

在颜色使用上保证稳重。太多色块或者太多颜色都会使你变得廉价，所以仍然保持简单：

蓝色一般来说代表了信任，所以它是一个好的开始
很多人相信红色与自信有关
棕色总会表示可靠
如果我们退回原来那个基本可靠的做法，黑白两色正好可行。

智慧型名片设计

无论我们采取哪种做法，我们都需要赢得客户的信任，我们才能有效的引导他们完成项目。如果客户对我们的智慧和我们的行动不信任的话，他们可能会抵触你，可能最终会导致不和或导致不友好的关系。可以用一种充满智慧的名片设计来避免这种情况。

Guts & Glory Martin Stousland设计

包含的元素

你可以用很多事情来表达你的智慧。一个缓和的、简单的做法能起作用；人们一般会期望一个老练的专业人士表现出来的举止很稳重克制。知识一般是由多听少说累计起来的，所以在你的名片上注入这样的信息。在白色空间中使用抽象的图片或者环绕图案可能会有效，文字上巧妙的压印或者特效。使用细版的无衬线字体。 Helvetica Neue ultra-thin variant 之类的字体，但是它的字间距和对齐也许需要更多斟酌。

Guts & Glory 特写

颜色的选择

一个简单的进步可能是令颜色传达大部分的信息。少用颜色，可能是一个单色的组合，来展示智慧。幸运的是，你有很多选项来选择：

紫色和金色是经典的配色，许多代以来它们总是与智慧相关
黑色象征着权威性，如果你甘愿走寻常路
橘黄色象征生命力和耐久
灰色代表长久
棕色是可靠（这是我们之中很多人都相信值得拥有的）

全能型名片设计

有时候我们会想要将自己描述成全能型选手，特别是在自由职业设计师领域，这种情况我们想同时展示自己的很多方面的才能给潜在客户看，而不用一一展示冗长的凭证。用简单快速的方法传达你的能力范围，通过一张名片就可以很好的做到。不要犯错：全能型名片不会展示某方面的缺陷。而是会展示扩大自己专业才能的热情。没错，听起来起码是个讨人喜欢的答案，但是如果你的设计足够老练，“一无长处”的称号也撼动不了你的客户！

The Population Greig Anderson设计
需要包含的元素

胜利完成这张名片同时避免过错是很难做到的。为了达到正确的效果，这张卡片需要比前面所提到的那些都更复杂，但也要将信息控制在合理的程度。使用多种的字体或者起码多种同样风格的字体。你也可以放大排列以创造一个更强的存在感。风格和元素的整合可以帮助传达这种信息，但是记得用现代的有设计感和有眼力的方法来使用一切。不要走火入魔。

The Population 字体的特写
颜色的使用

对全能型选手的名片来说，颜色偶尔不是一个很必要的元素，

紫色和金色，因为他们与智慧的关联，在这里也可以帮助传达你的设计。
黄色和蓝色都可以代表理想主题还可以将你的图案变得很全能。

回到基本点
你准备打给谁？

基本的信息应该被包含在所有名片中。你知道的，当然，只有视觉才能告诉别人你的名字和职位，告诉别人你必要的信息和你是谁。你还需要放入一些联系方式。保证是当前的信息，号码和台头会随着我们的升迁和变化而变化。你的特点和方向也是会变化的，所以要确保你递出去的名片包含着当前的信息，而不是通过划掉印刷手写写上新信息，这样会让你在别人心中的印象大打折扣。

Damian Heinisch Mission Design设计
质大于量

因为你正在谈一笔不错的生意而一次印太多名片，你觉得用不了多久就会用我那。像上文提到的那样，信息在不停变化，如果你印了成百上千张名片，他们都处于随时被浪费掉的危险之中，随着你所花费的金钱一起。

Then Corporate Brand Identity Jimmi Tuanart 设计
重复检查，双保险

在你将设计送往印刷厂之前确保所有尺寸正确。并确保你与你的印刷厂工作人员同时看到相同的格式和尺寸。你可能还需要另一双眼睛来确认文字的书写和更重要的是错别字。有时很容易输入错别字，这样的错误会造成昂贵的后果。没有比苦心地调整完整个设计然后在第一次印刷之后发现了错误更闹心的了。重复检查，双保险

Feed enhanced by Better Feed from Ozh

30种大背景web设计范例

seasun — Sun, 14 Nov 2010 08:09:00 +0000

有一项web设计趋势已经流行一段时间了，但似乎势头依然不减，这便是使用大背景图像。这是一种增加设计吸引力简单有效的方法，用一张图片或插图就可奠定网站的整体色调。不过，这样做也有些孤注一掷，你创建的网站可能会显得太繁杂。因此，在背景与其他设计元素之间寻找平衡，就是一件十分重要的事情。为了给你一些启发，下面提供了30个高效运用此项技术的网站范例。

Stephan Siegrist

Noah Stokes – Es Bueno

大峡谷空中通道

Yes I am Precious

Because Studio

Sur La Piste – Carlos

Immersive Garden

Sayonara

Mavic

Derek Welsh

Airwalk

Piero Martinello

Studio Tilt

Giles Revell

BVD

Chicago L-Shirts

SabotagePKG

Mike Stocker摄影

Coal Headwear

Twelve Restaurant

Go To China

Festival Mundo

Paul Smith

Merus

Medis Bar

The Squad

Summer Love

Free Agent Depot

160over90

Turkish Cosmetics

关于作者

Gisele Muller新近在网上找到了新方向。她是一位热爱技术、设计、摄影和创意的人士。一位不变的极客崇拜者、技术迷和通信爱好者！现居位置：巴西阿雷格里港。推特：@gismullr

Feed enhanced by Better Feed from Ozh

网页设计师文案创收指南

seasun — Sun, 07 Nov 2010 15:40:57 +0000

如果一个网站设计机构希望增加销售额，有一种相对容易且快捷的途径：出售文案服务。
文案出售给你的客户，让他们网站获得更好的销售和效果。此外，你的项目运作起来也将更加顺利和有效。读完本文，你就知道怎么既让客户高兴，同时也获得双倍的回报。你曾经有没或者考虑过向客户销售文案服务呢？欢迎在评论谈谈你的看法。
时间就是金钱

大多数的网站，时间更多的花费在文案而非设计。如果你没有参与文案撰稿，超过50％的网站工作将与你（团队）无关。这在短期内属于浪费收入，而在长期则是绝对的巨浪费。

对于网站设计，花在文案的时间比其他事情要多。博客文章，邮件新闻，新产品，所有为你团队获得收入的机会。

保持与客户的联系，这样他们更容易使用和宣传你的服务。而当你向客户提供文案时，正是你与客户加深关系的时候。

明智选择搭档

最富有创意的人也都会遭遇过不称职的合作搭档带来的梦魇：一个SEO骗子意图关键字优化和交换链接；客户花费了上个月来的内部文案不再适合于网络，甚至不适合人的消费习惯。当你的客户选择你的合作伙伴的时候，很可能是创造一个这样良好的机会——毁掉你的工作和声誉。

即使是你的网络主机故障导致客户网站离线，你的客户并不理解这一点。而当网站在谷歌上没有排名，你的客户也不会责怪SEO公司 – 他们会责怪你。当一个网页设计公司某个项目遇到不专业的合作伙伴，那创造良好的案例的机会便会白白浪费。

即使你没有参与撰写，客户还是会因为网站逊色的文案而会责备你。语法上的错误对任何人都不可能有好的吸引效果。当你选择合适的合作伙伴，增加成功的可能性。客户赚更多的钱，继续使用你的服务，你赚更多的钱，增加业务，同时积累了一个好案例。

从根本上提高效率

待客户给你准备网站的文字内容是工作进程的一大障碍。

客户没有及时给你发送文案即浪费了时间也可能因而错过项目截至日期。而如果你销售文案服务，不但提高效率还加快了网站部署的速度。

最佳结果
作为文案人员，我最大的挫折之一是为一个设计不良的网站写内容。我最喜欢的项目有一个共同点：跟优秀的团队合作。选择合适的文案，能保证跟你一起工作的是最好的团队。

有经验的文案甚至知道如何捕捉你的客户的语音语调从而完善客户的销售业务。给你的客户得以机会实现其全部的潜力。
选择一个文案搭档
作为一个网页设计机构，确保你选择的文案人员web方面的文化修养。至少，他们应该在以下几个方面的知识：

分离测试：如果你需要销售文案，你应该找一个了解分离测试和多元测试的知识的文案。经验丰富的文案在这方面很有见地，能给出一些有助于提高转换率的测试建议。

搜索引擎优化：即使是最菜的文案也会声称自己熟悉SEO知识，你必须客观于他们的言论而判断他们的能力。他们应该知道如何在文案中揉入关键词而没有对文案质量造成影响，他们应该对关键字选择，平衡竞争，关键词数量以及流量限制等十分老到，也可以问他们这样的问题：你会推荐301或302重定向方案么?

技术：可能是有的，但很少找到一个优秀的文案却对技术一无所知的人。一个称职的网站文案大都会知道了解HTML, 对客户的CMS系统感觉良好。

社交媒体：拥有一个Twitter或Facebook帐户说明不了什么，而是应该有这方面的成功营销的例子。请他们给你看看有没火爆的博客文章。对于文案销售，这不是必须的，但它是博客和社交媒体宣传的一个前提。

有很多很好的文案并不具备上述的技能。他们可能善于撰写小册子，但做网页文案并不适合。一旦你确定文案人员的最低要求，对他们进行评估，看看他们对于你和你客户是否是一个不错的选择。

两种工作模式
一旦你找到好的文案搭档，有两种途径可以销售你的文案服务来赚钱。

1.直接将文案服务销售给你的客户。标出价格，直接给客户开出文案服务部分的账单。在这个模式下，你既可以有很好的价格折扣，还保留客观的利润空间。

2. 中介。让你的文案搭档联系你的客户并推荐他们的服务。然后，你可以和你的文案搭档商定中介回扣。
销售一体化：销售翻倍的秘诀
如果你找到一个文案搭档，这也许是你增加额外收入和增加用户满意度的一种方式，但你要翻倍你的销售额的话你还需要从根本上改变你的销售流程。

总是询问：每次客户要询价的时候，询问一下他们在项目中是否要接受文案建议。联系现有的客户，询问他们是否需要一个建议文案以改善他们的网站内容。

推荐：你应该选择好文案搭档，因为他们会带来最大好处。因此，向你的客户解释一下，你的客户信任你网站方面的专业知识，所以一定要确保客户理解跟网站文案合作的好处。

搭档的提案：每次询问你的客户是否需要文案建议时，你应该把详细情况转给你的文案。然后，文案为你客户给出一个免费的提案。如果你客户确定需要，文案应该准备提案，并给到你。然后，你可以标上价格，把它发给客户。

优化成功：提案不仅包括开发中网站的文案。确保你文案搭档会提供连续的月度服务：博客，新闻，文章和社交媒体等。

Alan Martin是Cooper Murphy的网页文案，优秀的文案人员。Cooper Murphy的服务包括网站文案和文案年度报告。

来源:webdesignerdepot.com
编译：MazingTech

Feed enhanced by Better Feed from Ozh

Icon设计几个要点

seasun — Wed, 03 Nov 2010 12:53:32 +0000

来阿里五个月不到，接触最多的是web端的产品设计，主要偏向快速应用型，比如会员线的注册流程，搜索list，这种类型的页面要求简洁、信息清晰、不需要过多的图形化设计，让用户快速坚定的走完这个过程是最主要的，跟终端的gui设计有点区别，终端的界面设计更多关注图形本身的细节，其实做任何设计本质都是为用户而设计，产品整体的风格符合用户的心理，产品的信息结构导向符合用户的习惯。

这里总结几个做icon的要点吧，也是对自己的总结。

形的把握

Icon最重要，最难的是形的把握，所以建议多画草图，在画草图的同时要考虑形的表现形式，在08——09年，icon的设计趋势3维，从 iphone面市后终端的icon都跟iphone差不多，以二维形式展现。不管三维、二维、像素，形要简洁易懂，一目了然，icon的元素都会取自生活中的某个物体，想要简单易懂，要抓住物体最主要的特征来展现，如果在高分辨率屏幕下可以具象一些，可展现更多的细节，也可用两个元素来组合。

这个软件是800*480的屏幕，可以展现更多细节

一套icon需要有个统一的外形，下面的图标都是在一个方形的容器里面去做的，icon的四面要顶到容器。如果你的容器定位是三角，正三角，梯形都是如此，一般我会做2-4px的浮动空间.

外框是控制整个icon的容器，内框线控制左右浮动的像素，最好浮动不要过大，否则没有意义，我一般会控制在2-4像素。

组合

图标的组合元素不易过多，最好是1-2个组合，元素过多导致识别混乱，即使两个元素的组合也要有主次，大小区分或者颜色轻重区分。

如果一套图标里面有共同的元素，那么就没必要重新设计，只要元素之间组合就可。

也有一个特例假如一个元素在同一界面上应用很多，会导致的识别性不高，建议元素可以做一下小的调整。

这套图标“文本”元素应用的比较多，所以最好有应用到文本的元素做一些小调整

颜色

1．一个icon的颜色最好控制在三个颜色以内，最好控制在0——2之间（黑白灰不算在内），如果超出三个icon会很花不稳，这一点跟界面的设计原理一样。

2．整套icon的颜色灰度保持一致，基调一致，这里的一致不是说完全一致，有左右浮动的空间，设计师会凭着感觉取色。

3．控制好Icon与背景明暗距离，icon的明暗反差。

透视角度和光源角度

一套icon的透视角度和光源角度要一致，否则会很凌乱，说一下光源角度，如果从45度角照射，要考虑icon的高光、反光、阴影（这里的阴影不是指整个icon的阴影，3D icon会产生阴影2D icon元素之间会产生阴影）

质感

金属质感、水晶玻璃、纸质、亚光质感等等，这是大的分类，比如水晶质感还有好几种体现剔透的、只体现高光的。

质感的表现，一套图标在草稿纸上画好，再用其中最好表现的一个图标做质感的尝试，一般脑子里有几种质感的表现方式，只要做完一个icon，其它icon的做法都一样。

Feed enhanced by Better Feed from Ozh

理解网页中的视觉层次

seasun — Sun, 17 Oct 2010 13:06:32 +0000

视觉层次是高效率网页设计的重要原则之一。这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要。在了解这些原则之后，你可以在自己的基础设计练习中运用到这些知识。

设计=交流

作为核心：设计整体就是视觉交流。作为一个高效率的设计师，你必须有这个能力清楚地将你的设计思想传达出来。人是易变的，如果你给了他们巨大的信息量，这有相当高的可能性100个人中99人都会厌倦去看它。为什么呢？因为人们都是天性的视觉欣赏者，而不是数据处理者。

要了解这个，知道一些人们如何看待事物的方法是很重要的。人们并不等于所谓的“平等机会主义者”。他们不仅仅是收集视觉信息和处理数据，于此同时，大脑还会整理他们看到的这些东西的“视觉关系”。

让我们看看下面两个普通的圆：

很大可能上，你并不把它们仅当做“两个圆”看待，而是将他们看做“一个黑色的圆和一个比较小的红色的圆”。

原因是非常简单的：当呈现出某些像这两个圆一样简单的东西的时候，人们往往不仅仅看到两个普通的圆，他们将会搜寻这两个圆之间的不同点。某个圆或许更大，或者更小，或者有颜色，或者其他的不同点。这些不同点给予我们区别物体的信息并且给予图形特定的意义。

让我们来看一张更为复杂的图片：

增加的这些复杂成分强迫我们去分析他们之间的关系。相同和不同点变成了我们思考这些问题的思维框架。比例向我们传递了“一个物体相对其他来说离我们更近，或者是，这个物体起到一个相对其他物体而言的支配地位”；颜色的不同告诉我们每一个物体可能有自己独特的特点，这个特点将其与其他物体区分开来。这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。

…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

让我们回过头来看网页设计；因为网页设计是有关视觉信息交流，明白“用户们将会自己组织设计内容的关系”成为我们高效设计的核心。一次丢出大量信息的方式看上去已经没意思了，作为网页设计师，我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读。更为重要的，我们需要明白：信息的高效交流是网页背后的关键。

初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题；如果你要追溯到人类学上去讨论它的话，你可能做出结论：远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事物之间的联系，这是一种生存技巧。

可能一个更便于理解的解释，这就是我们大脑整理信息的方式：将相似的可视元素整理成一个组，将他们放进具有一定意义的类型当中就像人类固有的吃喝等习性一样。换句话说，事实上大脑里的信息都是按照某种层次整理出来的，这样交流起来比没有整理信息要有效率的多。

看看下面的两张图片：

在上面的例子中，我们可以看到最基本的文本层次运用。两张图片当中用到的例子内容上没有任何区别，但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢？当我们以文字排版为例讨论视觉层次的时，这就是我们要分析的问题。文字组织的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。层次给予标题更多的意义，不仅仅是信息，而且也使内容更容易被接受。

好，这只是一个最基本的例子对吧。让我们更深入的讨论其他的例子，让大家明白如何运用这些最基本的守则，成为一个老练的设计师。

层次构建工具箱

视觉层次非常重要，但是如何准确的创建层次效果？我们寻找的“工具”正如木匠的工具箱——锤子、钉子、锯子等等——你如何运用它们才是最重要的。

1、大小

较大的物体具有更大的吸引力。将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读者的视线。在设计中将尺寸和重要性结合起来是非常关键的。最大的元素大部分情况都具有最大的重要性，与此同时，最小的元素应该是最不重要的。

2、颜色

颜色是一个很有意思的工具，他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注（例如按钮、错误信息或者超链接）。当作为一个体现个性的工具时，颜色可以延伸到体现更精练的层次感上；用到豪华、舒适的颜色将给页面带来感情上的吸引力。颜色可以影响网页的每一个角落，从商标到形象。色彩应用在视觉层次设计中可以做到信息分类的效果，就像下面的例子：

3、对比

对比体现出相对的重要性。字体大小上戏剧性的变化将传递出某个消息的重要性或者需要某些特别关注。从较亮的背景转换到一个较暗的背景将较快的区分核心内容与页脚内容。

4、对齐

对齐体现出元素们的组织。甚至可以简单到仅仅用“主栏”和“侧栏”区分。但对齐也能够在视觉层次上起到更多更复杂的作用。考虑，举个例子，放在页面左上角的内容的力量。因为用户多半将那个地方的信息与简介、账号、购物车等等相联系。放在那个地方的东西被赋予了某种“官方”性。对齐如果用特定的方式也会激起用户的兴趣，例如下面的例子：

5、反复

重复体现了元素之间的关联性；如果所有段落的文字都是灰色的，当一个用户看到一块新的灰色文字时，他也许认为这是其中的另一段；当同一个用户遇到一个蓝色的链接或者一个黑色的标题时，他可以放心的将它理解成段落以外的东西。

6、亲密性

亲密性将元素彼此分开并且创建下级的层次。在一个页面中可能会看到很多被空白分隔开的小部件；在这些部件中又会有新的层次，标题、副标题和内容。亲密性是最快的方式将关系紧密的内容组织起来。在下面的例子中，很容易通过亲密性将主要内容与其他内容区分开来。

7、紧密与留白

密集的元素给人一种“重”和杂乱的感觉；元素之间距离太大，他们将会失去彼此之间的联系。当一个网页被设计的恰到好处时，眼睛将会准确的将各个元素组织好。

Feed enhanced by Better Feed from Ozh

97个漂亮的网站导航设计欣赏

seasun — Sun, 17 Oct 2010 12:52:05 +0000

导航是一个网站设计的关键因素之一。这是非常重要的，一个非常清洁，优美和简单的导航，会让用户耳目一新。现在，我们也已经进入了Web 2.0的新时代，因此需要以某种方式将导航增强，并制作出独特的，新颖的导航菜单。

Alexarts

Candybar

Club Sites

Tutorial9

Attack of the Web

Sushi & Robots

Delibar

Gap Medics

Thibaud

Getraenke-Krukal

Mission Bicycle Company

Oink!

Clearleft

GETINVISION

Southern Media

Curious Generation Group

Utahtravel

f claire baxter

Gpacheco

Narwhal. Co

Jason Dorn

Delete

Jeffrey Sarmiento

Small Stone Recordings

Cassys design

HANDCRAFTED css

Christmas Tweets

Ballpark

Custom Tshirts UK

XIXI NO BANHO

Microsoft

Carsonified

AdaptD

Sky Larkin

Ctrln

Lucia Soto

Dreamling

Neotelos

Gisele Jaquenod

Artcore-Illustrations

Mystery Tin

Netwise

Loodo

Tapbots

Checkout

Somos la pera limonera

marcusK

Joe Nyaggah

DFW Usability Professionals’ Association

Mailchimp

Web design NJ

JP3 DESIGN

LemonStand

MetaLab

MacRabbit

Yorkdale

Jiri Tvrdek

Flicka

Graphik

Dreamer Lines

PixelResort

N.Design Studio

Media Temple

Kulturbanause

Diego Latorre

Fluxiom

Apple

Culinaryculture

Yodaa

Mimeo

Dpivision

Adidas

tap tap tap

Serigraphics

Mint

Inspire Image Design Labs

Lomotek Polymers

Jarnheimer Productions

Bert Timmermans

Kevadamson

Redvelvetart

Pampaneo

Taufiq Ridha

The Invoice Machine

The Great Bearded Reef

Ashes & Milk

Boloco

Freckle

Gugafit

BambooBali Arquitetura em Bambu

Indofolio

Elitewebmaster

ARIN s. r. o.

Stone Skipper

Global Creative Designs

David Hellmann

Dragon Interactive

Feed enhanced by Better Feed from Ozh

12 个便于web设计及开发的在线工具

seasun — Tue, 12 Oct 2010 18:33:57 +0000

请不要低估这些小工具，他们极其的方便并且能节省很多的时间和工作，下面就是这些在线工具的列表，挑几款来试试吧。

我还是比较喜欢Ajax Load和Web 20 Badges Generator的，你们呢？

Favico

一个图标制作工具，很是方便。

SpiffyBox

一个纯css圆角解决方案，不需要任何js和图片。这个在线工具可以选择前景色背景色，宽和高等。css3正在被越来越多的浏览器所支持，所以你可以坚持使用这种解决方法。

Ajax Load

该网站提供近50种 loading、进度条可选样式，可自定义背景色、前景色和透明背景，操作简单，在页面下方就可预览效果，最终可生成.gif格式的图标。本博客在加载过程中的loading图标就是在该网站上直接生成的。做网站前端设计和朋友可以大胆地尝试一下这项服务。

Web 20 Badges Generator

看到一些博客上敲着一个web2.0的徽章是不是很羡慕？Web 2.0 Badges 可惜很方便的为你实现这个梦想。虽然Web 2.0 Badges提供的款式不一定是最多的，但我觉得他出生正统，要挂就挂个正宗的徽章！

Buttonator

如果你正在寻找一个按钮（不是浏览器默认那种），并且如果你不是非常挑剔的话，这里有很多的按钮共您选择，你可以使用这个工具在线制作一个按钮，当然，其中还是有很多漂亮的样式。

Load Info

又是一个Ajax loading 图标在线生成工具，这里有各种各样的样式供您选择。

Stripe Generator

一个 web2.0条纹制作工具，只需简单的个性化设置，就能作出花样百出的背景条纹。

Bg Patterns

一个背景图案在线制作工具，用法很简单，效果也很不错。

Adobe Kuler

一个在线创建配色方案的东西，是Adobe推出的一个设计师的配色参考站点，如今推出了Air桌面版。每天会更新最新的配色方案，可以搜索最受好评的~最新的~最流行的等等配色。右键点击颜色可以选择复制主题颜色值和单个的颜色值，左键可以把颜色框拖出界面。很漂亮又实用的东东。

CSS Typeset

CSSTypeSet是一款非常适合对css不熟悉的朋友的在线工具，使用这个工具可以轻松地写出具备字体、文本颜色大小位置、字符间距、单词间距等属性的css样式。

Blind Text Generator

多功能的在线文本编辑工具，帮助设计者进行排版和打印。

Reflection Maker

这里不需要你有任何的图片处理知识，就可以轻松的制作出倒影效果，支持上传上限为200KB的图片和直接加载网络图片，可以对倒影背景和倒影大小进行配置。对于要求不太高的图片制作来说，这个在线工具足以应付大部分情况。

Feed enhanced by Better Feed from Ozh

50 个Web设计师超便利的工具

seasun — Tue, 12 Oct 2010 18:22:56 +0000

作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。我想网在这里给您介绍了50个非常强大的工具，包括正则表达式、在线图片处理、截图工具…… 你会发现，其中的一些工具会让你感到很是惊奇。