被“流水账”

记得大四开学不久，我就开始关注淘宝，腾讯等等公司的校园招聘活动，关注职位是前端开发以及页面重构。

最开始我面试了cvt这家我不太熟悉的公司，职位是ui设计师。当时只是想去试试胆，而感受是整个招聘现场只有我没有穿正装。不出意外的，我一面都没有通过。

第二次面试比较意外，是在我在理发店刚要开始剪发的时候，一个杭州的电话打了过来，心里既紧张又兴奋。同样的，这种毫无心里准备的面试让我有点措手不及。而整个面试过程虽然时间不短，但是我却表现得十分糟糕，很多技术上的题目我都答不出来或是答得很别扭。印象深刻的是面试官问我“相对定位与绝对定位的区别”的时候我脑子里一片空白，乱说了几句就结束了。虽然这次面试很失败，但是我很深刻的认识到自己的不足，就是“很多问题总结后没回顾，忘记了”，“有些技术问题我懂，但是当面试官用语言问我时，我却不知道其具体是什么”，同时我发现margin跟padding不知道该用什么中文替代，还是用英文。这次面试后我也基本放弃了淘宝实习职位的希望。

10月17日，我跟我的好朋友麦嘉两人去了在网易大厦举行的网易邮箱现场招聘会，网易大厦环境给人感觉很轻松很愉快。但是我们没想到招聘会人很少，以至于我们一进去就马上开始面试。当时面的是“页面架构工程师“这个职位，面试官问的都是比较基础的问题，我感觉我答的还可以，只有一题“你有没有做过换肤”，我说了“没有”。我被面试官告知“等待通知”后等了我朋友接近一个小时，看了他进了一个小黑屋，之后又进了一个玻璃屋。而后来他出来之后我才知道，被“等待通知”都是没戏的。而后我们俩在公车上一直唠叨说“真的太可惜了，那么少人去应聘居然都没进”。

而后我跟麦嘉都急切的等待腾讯以及淘宝、阿里巴巴在广州的校园招聘。记得那天早上我们在大学城华工参加了腾讯的笔试，而同时举行的网易笔试我连机会都没。腾讯的“页面重构”题目难度一般，只是加分题比较烧脑袋。因为我几乎没在纸上写过布局的代码。而我也发现在教室监考的老师就是彪叔（因为大三他在广州招聘时我去偷瞄过），交卷时彪叔还面带微笑问“很容易吧”。中午与麦嘉及珍一起吃过午饭后，我们又参加了淘宝的笔试，淘宝在笔试环节准备得不周全（第一次在广州招聘），教室里挤满了人，试卷也是临时加印。而淘宝的笔试题目我答得没早上那么好，这是因为平时javascript实践太少所致。

正是由于淘宝的题目答得不好，我并没有抱什么希望，而是把更多的期待放在了腾讯的面试。正因为此，我一心在研究腾讯笔试的加分题，没有太在意淘宝的错题及不懂的题目，这也成为了后来淘宝面试失败的重大原因。不出意外的我在笔试当晚4点收到了腾讯的一面通知，同时庆幸面试是在笔试后2天，这样至少可以睡个饱觉。

2天后的早上我坐了1个小时车到了大学城中大进行腾讯的一面，面试安排在面试官的酒店客房里。房门打开，面试官还是彪叔，彪叔亲和力十足，面带微笑并且摆了几瓶可乐在桌子上招待应聘者。由于我有事先准备，所以彪叔问的问题我基本都答得出来，唯独其中一题我答得不好。整个面试过程很愉快也比较轻松，而从面试官的表情我内心也自我暗示进下一轮应该没有问题。

早上面试完回到学校宿舍想好好睡一觉的时候，我又意外的接到了杭州的电话，而且是很多个8结尾的电话。原来是因为我没法参加上海举行的支付宝的校园招聘，他们帮我安排了电话面试。支付宝的面试官给人比较轻松的感觉，特别当我答不出的时候还主动安慰我说“没关系”，这也让我慢慢进入状态。而电话面试一共进行了3轮，当天晚上我在上选修课的时候，接到了支付宝hr的电话，才知道offer已经离我不远了。

面支付宝后当晚我又意外的收到了淘宝发来的在体育西面试的通知短信。由于腾讯的表现良好以及支付宝的电面，我心里大意了，以至于我到了面试现场，我才发现淘宝笔试的题目我还没去纠正答案。当我懊悔不已的时候一个头很光亮的同学叫了我进去，后来才知道他就是秦歌同学，口碑ued的大佬。如前面所说，由于我的大意，我犯下了一个我自己都无法原谅的错误，那就是错的题目没有去改正。虽然秦歌没有让我通过面试，但是他正如他所说，他希望我明白自己未来的路是怎么样的。秦歌对待毕业生这种态度让我佩服，我也毫无掩饰的承认自己的不足以及对前端的爱好。

而当天晚上，我的心跳又快了起来，因为今晚是公布腾讯2面的时间了。腾讯2面的面试官是一位“很像海归很有修养”的大年龄的同学，后来听说应该是QQ空间的部门经理了。这次面试简直打破了我面试的最短时间记录，因为只持续了7分钟。-_-#然后又不出意外的我败在了这一面了。

到这里，我的找工作经历也基本结束了，虽然我不像一些同学一样同时拿到几大公司的offer，但是对于支付宝的offer我一方面心存感激，一方面感到十分幸运。而我在这也要好好地谢谢那些我认识的或是不认识的帮助过我的朋友。谢谢 @dleo,adrian cheng,秦歌,彪叔,丁忠辉,麦嘉，还有我亲爱的爸妈，姐姐，还有一直陪我到处奔波的珍珍。

可以只看这几句

希望这几句话能对以后的应届生有所帮助：

• 不要大意
• 提前准备
• 诚实最重要
• 保持乐观，不要放弃

1.真的很酷？

首先我建议大家看看官网这个惊艳的DEMO:

http://www.progressivered.com/cu3er/

可以看到一个图片幻灯片该有的功能它CU3ER它都有了，而且更漂亮更酷。

2.我也要试试

CU3ER的使用十分简单，保证3分钟内你就可以学会了。

下载

到http://www.progressivered.com/cu3er/download/猛击那个红色的大按钮，下载源文件。

配置

配置上最核心的就是config.xml这个文件了，接下来介绍一下大致标签的含义：

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>

        <slide>
            <url>images/slide_2.jpg</url>
        </slide>

        <slide>
            <url>images/slide_3.jpg</url>
        </slide>
    </slides>

</cu3er>

很简明的，每一张图片都是包含在<slide>标签之中的，你可以把图片地址修改为你要的图片。

修改好图片之后，就是“前进，后退“按钮以及自动播放的问题了，这些配置全部包含在<settings>标签以内的，我们简单的看看先：

<settings>

    	<prev_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</prev_button>

    	<prev_symbol>
			<tweenOver tint="0x000000" />
		</prev_symbol>

    	<next_button>
			<defaults round_corners="5,5,5,5"/>
			<tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/>
			<tweenOut tint="0x000000" />
		</next_button>

    	<next_symbol>
			<tweenOver tint="0x000000" />
		</next_symbol>	

	</settings>

<prev_button>代表后退按钮， <prev_symbol>代表后退按钮的“箭头”。前进按钮与箭头同上。 <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>是指当鼠标移上（mouseover）前进后退按钮时，按钮样式变大1.1倍，并变为ffffff这个颜色。 假如你想要幻灯片自动播放，需要在里加入以下代码：

<auto_play>
	<defaults symbol="circular" time="3" />
	<tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" />
</auto_play>

即可。

详细的说明文档请参见官网document

那么到底在GIF,PNG,JPG这些格式我们要选择哪一种作为候选格式,而哪种图片格式可以让图片更小,却拥有更好的图片质量呢?

1.图片格式

GIF

GIF最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失.再者GIF支持半透明(全透明或是全不透明).
根据Google的说法,GIF适用于很小或是较简单的图片(10×10以下或是3种颜色以下的图片).

PNG

首先,PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相对于GIF最大的优势是:

• 通常体积会更小
• 支持alpha(全透明)

但是我们知道PNG是不支持动画的.

同时需要留意IE6是可以支持PNG-8的,但是在处理PNG-24的透明时会显示会灰色.相关例子可以参考sitepoint.

通常图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而全透明的图片我们现在只能使用PNG-24.但是请留意在保存图片在PNG-8与GIF中进行比较.因为定律并不一直正确.

JPG

JPG所能显示的颜色比GIF,PNG要多的多,同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真.

看了上面的介绍你应该对使用哪种格式保存哪种图片有了大概的了解.简单的说就是:

一句话:小图片或网页基本元素(如按钮),考虑PNG-8或GIF.照片则考虑JPG.

2.图片的压缩

首先,我们如果是在Photoshop中制作的图片或是网站素材,在保存图片时,切记选择”文件-存储为Web和设备所用格式”.因为这样往往在同等质量下能获得更小的图片体积(相比直接”存储为”).请看下图:

Smush it!
在按照上面方法存储图片之后,其实还是可以继续压缩图片大小的,而且我谈论的是不对图片质量造成损失的方法.

Smush it!包含在著名的著名插件YSlow之中,并确保已经安装了Firebug.使用方法很简单,只需要在YSlow中打开”tool”下的All Smush it! 将会跳转到一个新页面,对当前网页的图片进行压缩.而这些压缩都是在不损失图片质量下进行的.所以你大可放心.

6-15更新:由于”实践是检验真理的惟一方式“,那么我现在用Smush it!对本网站及vikiworks.com分别进行测试,结果显示ediyang.com首页的图片压缩了6.52K,而vikiworks.com的首页压缩结果十分惊人,竟是46K,截图如下:

由此可见Smuch it!真的是图片压缩的一大利器.
如果你想要单独压缩某一张图片,你可以到
http://developer.yahoo.com/yslow/smushit/index.html
只要填写图片的网址就可以进行压缩了.

Tips:先在PS中保存为web格式图片,然后再使用Smush it!压缩图片.

3.其他资料

当然,如果你想要更深刻地了解这些知识,你可以选择下面的文章进行阅读:

http://code.google.com/speed/page-speed/docs/payload.html#CompressImages

http://yuiblog.com/blog/2008/10/29/imageopt-1/

是什么啊?

你可以先看看我的图片博客.Asaph根据官方介绍:它是一个用来搜集外部链接及图片的微型博客系统.允许你在任何其他网站来发布你要的图片或是链接.

我个人认为最特别的地方,就是Asaph有发布文章的Bookmarklet,无论我在任何页面,只要点一下Bookmarklet,再选择要发布的图片,再点确定,就完成了整个发布文章的过程.看下图

怎么安装呢?

5-1号更新:安装之前请确保满足以下条件:

• 服务器是PHP5以上并装有GD-lib或者开启了allow_url_fopen
• 使用现代浏览器(非IE)
• 在上传完全部文件后,确保data/ 文件夹是”可写”的

如果不知道怎么看服务器的php版本,请下载php探针,上传到服务器后运行探针查看即可.

下载压缩包,解压放上服务器(需要php支持).接着需要修改lib/asaph_config.class.php 这个文件中的$domain, $absolutePath 与 $db这三个项目.接着在浏览器打开目录下的admin/install.php进行安装.装过Wordpress想必没有问题了.

怎么使用?

如图所示,在后台管理左侧,用鼠标将bookmarklet下的ASAPH拉到你的书签栏,或是加入书签.接着你可以去flickr等图片网站,
看到喜欢的眼睛发亮的图片,就点一下那个书签.OK,懂了吧?(最好使用现代浏览器,不要使用IE)

总结

Asaph的作者也说明了,这个博客系统就是这么简单,简单到后台只有几个按钮.而这就是他做这个系统的目标.Asaph也很好的完成了他的工作.在我看来,用来制作这种图片搜集博客,Asaph真的是很好用,很容易用.所以喜欢的朋友赶紧试试吧.
最后大家可以看看我自己建的Asaph博客 www.ediyang.com/fave

我也要试试

发布页面
下载地址(v1.0)

1.暗示

研究表明你看到的物体与图片会导致一些必然的行为.举个例子,一项对儿童的研究表明:在向儿童展示了一顶圣诞帽之后,他们会更愿意与别人分享糖果.圣诞帽体现了分享的概念并把这种概念灌输给儿童,使得他们更积极地与他人分享.而同样的研究表明向儿童展示一个Toys ‘R’ Us(玩具反斗城)的LOGO跟圣诞帽的效果恰恰相反–让儿童更不愿意分享他们的糖果.

LegacyLocker在页面上放上一张很温馨的家庭照,想必是为了让人对他的产品感到亲切,并且唤起想要保护亲人的感觉

当给你的网站挑选图片时,仔细思考你要传达给浏览者什么信息.挑选图片是一件十分重要的事,因为图片体现了你要表达的信息与感觉.不要因为图片本身很好看而把它们放在网站上,如果它们没有完成既定的目标,那么它们就不应该出现在网站上.过度使用图片也是很危险的,因为它们可能并不能正确地传递内容的含义,所以根据你要表达的效果去挑选图片.

2.防止选择麻痹

在营销里有一种很著名的现象叫做choice paralysis(选择麻痹).当向客户提供太多的选项时,选择麻痹就会出现.给人以选择是很好的,但是当你的客户面前有很多个选择时,他们就会对该怎么继续下去产生疑惑.没有人希望看到客户后悔(自己的选择),所以当客户浪费很多时间在选择上面时,他们就会变得麻痹.
事实上,根据Barry Schwatz的说法,当客户面临太多的选项时,他们通常会放弃做出选择–这就是我们设计网页需要仔细考虑的地方了.

Highrise的价格清单对最受欢迎的那一项使用了突出的设计,帮助你选择它.

为了避免”选择麻痹”的产生,应该让人们找到最适合他们的产品或服务.告诉他们每个选项最突出的地方是什么,接着建议他们应该选择的那一个.你甚至可以在一些最受欢迎的产品上使用视觉高亮(突出)效果,来引导潜在客户去关注它.如果这个产品不适合他们,他们会选择其他的.而如果他们一开始就感到疑惑,一个”默认”的选项将有助于避免”选择麻痹”.

3.把产品展示出来

当你逛一间实体店,例如一间杂货店时,你可以瞧一瞧,再仔细检查,或者有时候还可以尝尝口味(促销食品).你会根据你获得的产品信息来决定你是否购买.番茄熟不熟?草莓红不红?新鲜出炉的面包看起来闻起来怎么样?

当你在互联网上销售服务或Web apps(网络应用),你也应该做同样的事–把产品展示出来.令人惊讶的是很多销售软件的网站并没有把软件截图展示出来.是的没错,这些无形商品与电子商品你摸不到也闻不到,但是你要知道它们是可以看得到的.

Dashboard在首页上放上他们的软件截图

人们会根据产品的外观来判断他们(的好坏).Why?因为外表是一个指标,无论对错,表示一个产品的可用性(usability).这就是著名的”美学-可用性效应”(aesthetic-usability effect).

Xtorrent是一个Mac OS的BT软件,他们也在首页上放上软件截图

如果人们看到一个复杂,混乱的界面,又或者只是一个不吸引人的界面.他们就会假设这些产品是不好用的或者很难学会用.相对的,如果人们看到一个很吸引人, 很简洁的界面,他们可能会想开始了解这个产品是怎么运作的,并且想要试用一下.让顾客想象一下正在使用你的软件的情形,这会让你离交易成功更近一步.

4.让顾客试一下

当你开始使用一个产品时,你会跟它变得关系密切.当你开始在里面输入数据时,你开始觉得是你自己的东西.每一秒钟用户花心思去发现你产品的特点,都是在投入时间去学习与使用你的产品.

当问这个用户是否购买或是定期付费给这个产品或服务时,他们更愿意说”我要”,因为他们已经对它感到亲切并且投入了很多时间.当然,如果产品本身很烂,这也会让客户放弃使用.但是这也会让你更优先去提高产品的水平,来使得客户喜欢.

MailChimp是一个Email营销服务,你可以免费使用,除非你的订阅者超过100人

在过去几年,我们看到一种商业模式的出现,那就是“freemium”(免费试用),一个“freemium”服务允许用户免费使用产品的一部分功能,但是没有时间限制.这使得用户不用花钱就可以使用这个产品,并且当他们喜欢的时候再付费进行升级(到完全功能版).

这种商业模式对于Software-as-a-Service(软件即服务)的商务十分适合,因为一旦有人开始使用你的产品,他们就会沉浸其中,开始依赖它,当他们依靠它去完成生意或是管理他们的生活时,他们就会更加需要专业版的功能,而且会更喜欢去升级为专业版,因为他们已经知道你提供的服务很好用.

产品描述对于销售是十分重要的,因为这让潜在顾客想象他们使用你的产品时的情形.但是让用户免费试用一下效果会更好.他们不用想象了,因为他们现在可以不花一分钱使用它.无论是通过演示版,有限期的试用或是freemium模式,只要是让用户试一下你的产品,那都是赢得客户的绝佳方式.虽然这不是一个真正的”设计”要素,但是在这里真的很有必要提出来,因为这的确销售很有帮助.

5.AIDA

AIDA是一种很有名的销售策略,代表“Attention, Interest, Desire and Action”(注意,兴趣,欲望,行动).它描述了你想要成功完成销售的顺序.所以,首先你必须引起潜在客户的”注意(Attention)”,接着解释你的产品或服务对他们有什么帮助,从而引起他们的”兴趣(Interest)”.

一旦他们产生了兴趣,你要让他们对你的产品产生一种”欲望(Desire)”.举个例子,一个产品使用描述,可以帮助他们了解这个产品对自己有何帮助, 能带来什么好处?确实,”带来好处”这一部分内容才是整个过程的关键,因为只有顾客了解到他们将获得“好处”,而不是产品有什么特性,他们才会购买产品.

最后,你需要让顾客”行动(Action)”起来,也就是让他们购买产品或是注册.如果他们想这么做,他们只需要一个按钮来进行付款.如果他们有一点兴趣但还不太确定(是否购买),你可以利用其他方法来刺激他们.举个例子,制造一种”限时,限量供应”的情形.(物以稀为贵).

Yokaboo用了一些很大很吸引眼球的图片,你首先会注意到左边的描述,然后会把眼睛移到那件T恤上,最后在右边已经提供给你”下一步行动”的链接

现在,AIDA说明宣传口号比设计更需要被关注,所以在设计这方面需要做的就是让宣传口号更显眼,以确保浏览者可以看得到.这意味着让一个新访问者第一眼看到的就可以真正引起他们的注意.接着页面的布局应该引导他们去关注那些能引起”兴趣”与”欲望”的地方.最后在页面的末尾,我们需要完成销售,所以你要提供”马上订购(Order now)”,”点此注册(Sign up here)”这样的”行动”链接.

我们需要明白,单靠设计是无法形成销售的. 好的宣传口号能对整个销售起到巨大作用,而设计只是为了加强并支持宣传口号.

Reinvigorate用了 “measure. analyze. evolve.” 三个大大的字首先引起你的注意,大字下面就是描述文字,加一个”下一步行动”链接

这就意味着你不应该先去设计一个漂亮的网站,然后把文字填上去.相反地,先想想你要传达什么信息,把宣传口号写下来,然后再去构思怎样的设计才能更好地传递这些信息.这就好比一辆货车故障了,那就无法把货物送达目的地.但是如果刚开始车里没有货物,送不送达也就无所谓了.(译注:指没有好的宣传口号,再好的设计也是无谓的).

6.注意力引导

要从AIDA这种策略中获益,你需要让你的浏览者的视线经过那些内容.你可以通过对齐来使得视线向某方向移动,再用一些图片来引导视线.举个例子,如果你要让某个地方引起注意,可以用一个大大的箭头图片.我们的眼睛会注意到箭头,并自然地把视线转移到箭头所指的位置.

Business Catalyst用了一个箭头图片来引导人的视线移到”观看视频”的按钮那

Silverback的布局指向下载按钮,同时下载按钮上的箭头还指向了购买按钮

组织好你的内容让他们会自动让视线向某个方向移动.杂乱无序的产品描述也许会让你的浏览者感到困惑,并且选择离开.如果你想确保你的浏览者不遗漏任何内容,你可以把所有东西都沿着一根线进行对齐布局,这样浏览者就会沿着这根线对内容进行扫描.最后你要确保所有的内容结尾都要指向”行动”,即”注册”或是”下载”按钮.

7.永远都要有”下一步行动”的链接

ABC: Always Be Closing.如果你正在设计一个销售商品的网站,无论是软件或是在线服务,你应该经常考虑一下,每个页面要怎么让交易完成.这不代表说你需要在每个页面都放置”马上购买”的按钮,意思是当顾客已经准备好要购买的时候,他们不需要到处找,就可以发现”马上购买”按钮.

请留意Skype上3个地方的文字下面都有”行动”链接,就是”了解更多”或是购买链接

随时提供”下一步行动”的连接可以让浏览一直继续,并确保不让潜在客户丢掉注意力.”下一步行动”的连接可以链接到产品详细信息的页面,或是一个可以购买,注册的页面.这些链接通常都像”喜欢?点这里”,”查看更多”,”体验一下”,”现在购买”这样.
不要让浏览者在看完网页后没地方可去,要随时引导他们进入需要浏览的页面.

8.古登堡规律(The Gutenberg rule)

古登堡图(或是古登堡规律)描绘出了”阅读引力”,”阅读引力”描述了西方人的阅读习惯:从左到右,从上到下.古登堡图把一页分为4个象限,左上象限是”Primary Optical Area(主视区)”,右上是”Strong Fallow Area(强沉寂区?)”,左下是”Weak Fallow Area(弱沉寂区?)”,右下角是”终点区”.

这就是当我们的眼睛从左上向右下方向扫描,左下区域是最不能引起关注的,并且我们的扫描会在右下区域停止.
那我们应如何利用这些概念呢?按钮与”下一步行动”链接就要放在右下区域(不要放在左下区),因为右下才是浏览者眼睛扫描的最后地方.

请留意GoodBarry的”注册”按钮就放在右下区域

需要注意的是,”古登堡图”更适用于那些内容平衡分布的页面.如果你页面中有某个地方有强烈的对比,或是用了很大的文字,那么这些区域照样会吸引更多的注意力,并引导浏览者按其他方向扫描页面.

英文原文:Design To Sell: 8 Useful Tips To Help Your Website Convert
觉得这篇文章很好,毕竟光有好的设计缺做不成生意,是没有意义的.在这里翻译也分享给需要的人看.文中有些许错误的,请大家纠错与谅解.英语阅读能力好的请直接点击上方原文阅读,原文更易看懂.

虽然说效果还是没有当初设想的那么完美，细节也不够丰富。但是“好的东西是不断修改而来”的。

是的，我想没有什么作品是设计者刚制作出来就会特别喜欢，也没有一件作品是会让作者马上就满意的。

所以接下来的时间，我也会不断把我设计，制作wordpress主题过程中的经验与大家分享。

同时也会把自己觉得很好的外国一些教程与大家分享。

希望你们也能从中获得你们需要的知识。谢谢。