彬Go » 我的作品

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

彬Go — Sun, 11 Dec 2011 15:30:11 +0000

　　早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog！

您还可以参考以下HTML5相关文章:
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《HTML5 WebSockets 基础使用教程》
《关于HTML 5 canvas 的基础教程》
《让所有IE支持HTML5的解决方案》
《一起感受HTML5和CSS3的能量》

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…

　　言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传功能，下面是演示视频：

拖拽上传应用主要使用了以下HTML5技术：

Drag&Drop : HTML5基于拖拽的事件机制.
File API : 可以很方便的让Web应用访问文件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的FileList和FileReader接口。
FormData : FormData是基于XMLHttpRequest Level 2的新接口，可以方便web应用模拟Form表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现AJAX向后端发送文件数据了。

HTML5 Drag&Drop 拖拽事件

　　关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，那篇文章详细讲解了Drag & Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了~下面直接出拖拽上传简要代码实例：

获取文件数据 HTML5 File API

　　在之前那篇文章中我也有介绍过关于File API中的FileReader接口，作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。关于FileReader的详细介绍和代码实例大家可以先去看看那篇文章。

　　今天我着重介绍一下File API中的FileList接口,它主要通过两个途径获取本地文件列表，一是的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。很显然，我们这里会用到后者。

var fileList = e.dataTransfer.files;

　　使用files方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值。可以通过length属性获取文件数量.

var fileNum = fileList.length;

　　拖拽上传需要注意的是需要判断两个条件，1:拖拽的是文件不是页面中的元素; 2:拖拽的是图片而不是其它文件,可以通过file.type属性获取文件的类型

//检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {return;};
//检测文件是不是图片
if (fileList[0].type.indexOf('image') === -1) {return;}

　　下面让我们来看看如何结合之前的拖拽事件来实现拖拽图片并在页面中进行预览：

　　这里有一个简单的拖拽图片预览的Demo

　　这时你如果用FireBug等类似调试工具查看DOM的话，会看到标签的src属性是一个超长的文件二进制数据，所以如果DOM有很多这类图片，那就要当心浏览器性能了，因为这些数据极大地扩充的页面的代码量，而每次页面的reflow都会对浏览器形成很大的负担，So,如果这些图片还在DOM中，那就尽量不要做动画或任何重绘操作，如果真的要做就尽量让图片脱离文档流，让其绝对定位比较靠谱。

补充：可以使用window.URL.createObjectURL(file)来获取文件的URL(Chrome下用window.webkitURL.createObjectURL(file))，这种方式获取的URL要比上面说的readAsDataURL简短很多。而且可以省去使用FileReader。下面是使用readAsDataURL与createObjectURL生成的代码对比：

优化后的代码：

　　需要注意的是，window.URL.createObjectURL是有生命周期的，也就意味着你每用此方法获取URL，其生命周期都会和DOM一样，它会单独占用内存，所以当删除图片或不再需要它是，记得用window.URL.revokeObjectURL(file)来释放其内存。当然，如果你没有释放，刷新页面也是可以释放的。

AJAX上传图片(file.getAsBinary & FormData)

　　既然已经获取到了拖拽到web页面中图片的数据，下一步就是将其发送到服务器端了。

　　话说HTML5时代之前，AJAX传输文件二进制流数据是不可能完成的事情，而现在我们完全可以通过file.getAsBinary获取文件的二进制数据流，进而将其当做XHR的data数据传送到后端，8过由于Chrome不支持file的getAsBinary方法，FF3.6+支持此方法。所以Chrome就要另寻它法了，这时我们发现XMLHttpRequest Level 2中的FormData接口完美解决了这个问题，它可以很快捷的模拟Form表单数据并通过AJAX发送至后端，FormData的支持情况是FF5及以上支持，Chrome12及以上支持。

　　 file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata对象中即可：

var xhr = new XMLHttpRequest();
var url = 'http://upload.renren.com/......';
var boundary = '-----------------------' + new Date().getTime();
var fileName = file.name;

xhr.open("post", url, true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

if (window.FormData) {
　//Chrome12+
　var formData = new FormData();
　formData.append('file', file);
　formData.append('hostid', userId);
　formData.append('requestToken', t);

　data = formData;
} else if (file.getAsBinary) {
　//FireFox 3.6+
　data = "--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"" +
　'file' +
　"\"; " +
　"filename=\"" +
　unescape(encodeURIComponent(file.name)) +
　"\"" +
　crlf +
　"Content-Type: image/jpeg" +
　crlf +
　crlf +
　file.getAsBinary() +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"hostid\"" +
　crlf +
　crlf +
　userId +
　crlf +
　"--" +
　boundary +
　crlf +
　"Content-Disposition: form-data; " +
　"name=\"requestToken\"" +
　crlf +
　crlf +
　t +
　crlf +
　"--" +
　boundary +
　'--';
}

xhr.send(data);

首先表单数据headers头信息需要以下两项：

Content-Type ：设置其为multipart/form-data来模拟表单数据
boundary ：表单数据中的分隔符，用于分隔不同的文件或表单项，这是服务器端设置的格式。

发送时的post数据类似这样：

-------------------------1323611763556
Content-Disposition: form-data; name="file"; filename="4.jpg"
Content-Type: image/jpeg

ÿØÿà�JFIF�...这里是文件二进制流...~iúoî5P%-vãîHü 4QHgÿÙ
-------------------------1323611763556
Content-Disposition: form-data; name="hostid"

229421603
-----------------------------1323612996486

Content-Disposition: form-data; name="requestToken"

369009193
-------------------------1323611763556--

好了，现在文件上传成功后你就可以按照平常AJAX的操作来进行后续处理了。

最后，再来总结一下拖拽上传的技术要点：

监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；
获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。
读取图片数据并添加预览图：实例化FileReader对象，通过其readAsDataURL(file)方法获取文件二进制流，并监听其onload事件，将e.result赋值给img的src属性，最后将图片append到DOM中。
发送图片数据：使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。

　　OK,拖拽上传就讲到这里，欢迎大家一起探讨。也在这里推荐一下人人网FED的Blog，大家多多捧场，哈~

留意更新

订阅彬Go以查看HTML5最新资源、教程。

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

晒晒我两年前的大学毕业设计-滨购网

彬Go — Fri, 04 Sep 2009 09:09:39 +0000

　　前些日子博客大搬家，就把原来空间中的很多陈旧的资料都整理了一遍，无意中发现了曾经的毕业设计作品，是07年末完成的，呵呵，所以拿上来晒晒，不然真的都要”一层灰”了，吼吼吼~~

　　这个毕业设计的题目好像叫做《大学城的电子上商务网站建设》什么的，所以我就琢磨了这么一个网站，它主要是面向我们大学城小范围的几个高校的学生，提供一个网上二手闲置物品买卖交换以及交友等功能的平台。我和另一位同学一起完成这个毕设，我负责网站的整体功能规划、功能需求、UI界面设计和前端开发，我的搭档负责整站的.net后台开发和前后台整合工作。记得整个项目花了将近半年时间磨磨蹭蹭的做，最后也只完成了一半去完成的答辩，不过还是得了高分被推荐到了校级答辩，嘎嘎嘎~~后来因为去了天津Google工作，就再也没继续这个项目了，说来有些可惜。

　　先来个网站的logo，嘿，滨购网~顾名思义，就是滨海大学城购物网站，所以域名注册了bingo929.com，也就是现在这个博客”彬Go”的前身，哈~~滨购和彬Go读起来还是一样的~~蛮巧~~

下面是网站的部分界面效果图，设计借鉴了淘宝网，但没有抄袭，呵呵~~

滨购网首页效果图…点击上图查看清晰大图

滨购网产品列表页面效果图…点击上图查看清晰大图

滨购网产品页面效果图…点击上图查看清晰大图

滨购网添加商品页面效果图…点击上图查看清晰大图

　　当初把这些效果图整成页面可是下了一番功夫，但现在看来实在烂得不行，虽然解决了浏览器兼容性问题，但里面没有任何语义化可言，所以还是不拿出来寒颤了，吼吼~~

　　OK~~就总结到这，把它作为美好的回忆永久封藏在彬Go博客中~~嘎嘎嘎~~

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/my-profiles-bingo-web-design-div-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

近期作品:麻将电视赛官网UI设计+前端开发

彬Go — Sat, 13 Jun 2009 08:47:14 +0000

今天展示一下五月底用4天时间完成的一个小项目，天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急，呵呵，所以非常非常赶…界面方面可能还有很多不如意的地方，但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的，所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。

先来两张首页效果图:

两个版本之间的区别只在于赛事进程版块内，由于需求的内容量过大，所以导致页面很单调，版本一是我优化的，版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈，这么庞大的信息量，有必要吗？！用户100%不会耐着性子把内容看完的，反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容，比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛，那就一定要通过设计元素突出主题，能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么，提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。

关于页面的风格，我借鉴了很多腾讯的设计风格，走清新路线，希望能在炎炎夏日给人以清爽的感受….导航是Copy的，哇咔咔….时间紧迫啊….尽管拍我吧，哈

顺便说个题外话，哈，那个”易游开心”很山寨… 囧rz

天津麻将电视大赛首页效果图-版本1

点击小图查看清晰大图

天津麻将电视大赛首页效果图-版本2

点击小图查看清晰大图

天津麻将电视大赛专题网站Demo(点击查看)

下面来总结一下我使用的一些前端技术和经验，希望能对大家有所帮助，大家如果有更好的意见欢迎留言，互相学习。

1.CSS书写顺序

注重CSS书写顺序使很多前端开发新人所忽视的，其实这种习惯的好处不用说大家也能猜出一二，最最主要的还是方便日后的查询和维护。

2.结构化CSS代码

将CSS代码结构化之后，让它符合树形结构，便于查找各级元素的CSS样式属性。

3.杜绝使用CSS Hack

很多前端新人都把学习重点放在CSS Hack上，为了让大部分主流浏览器兼容自己的网页，想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要，通常情况下的网页，基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果，当然，这需要扎实的CSS基础和丰富的经验。

4.针对IE6兼容问题采用”单挑”原则

如果是IE6单独存在的问题，那我会单独命名一个CSS文件，把适合IE6的标准CSS样式写在这个文件中，并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵，出于我对IE6的愤慨之情，所以把文件名命名为这个比较不”和谐”的名字。

注释如下:

5.为CSS写目录索引

这个没什么好说的，作用类似图书的目录，大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》，这里面详细讲解了关于如何写CSS索引注释和它的好处。

6.遵循命名规范

命名规范对于一个团队来说是相当重要的，对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》，是我个人总结的一些相关命名规范内容，感兴趣的话可以看看。

7.纯CSS实现导航标签”面包屑”效果

我个人认为这个没什么可说的，但是考虑到很多前端新人可能不太了解如何实现，所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话，导航标签的”首页”高亮；在”奖品详情”页面，相应的”奖品详情”标签高亮。

基本实现原理就是在不同的页面为标签添加一个id。比如首页是,赛事报道页面则是,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):

#home .nav_home a:link,#report .nav_report a:link {background-position:0 -78px;color:#005ea5;}

8.CSS Sprites(CSS图像拼合) 技术

CSS Sprites近期收到了国内前端们的热烈追捧，但我只在网站中的导航上使用了这个技术。为什么呢？原因有以下两点:

1.CSS Sprites增加了切图时间，但这个项目时间很紧。
2.这个网站的流量不大，使用CSS Sprites技术没什么意义，不会有什么明显的减小流量和请求的效果。

也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术，从而换来了开发(切图)效率上的提高。

如果大家想了解更多关于CSS Sprites的知识，可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。

9.通过W3C xHTML 和 CSS 官方验证

这个是必须的，这玩意儿地球人都知道，我就不多说了。但遗憾的是，这个认证只停留在我的Demo中，运营中的实际网站已经有很多错误了，是为网站填充内容的运营客服人员搞乱的，无奈一下….我也懒得改了，有Demo就行了。

天津麻将电视大赛专题网站Demo(点击查看)

好了，关于使用到的技术我目前只想到这些，以后可能还会补充新的。最后想说一下，前端开发并不是非要追求所有高级技术，并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目，用最适合的前端技术实现当前项目的人，这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites，它明显不适用于这个项目。再比如滑动门，我也没有使用在导航上，因为这个专题网站是有有效期的，基本上不会涉及到导航文字的改变，所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目，所以在下才把这篇文章发上来，希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

展示:大学时期做的第一个xHTML+CSS项目

彬Go — Sun, 31 May 2009 09:32:53 +0000

今天我要向大家展示一下我早在大学三年级时为学校的心理咨询健康中心做的一个网站，呵呵，也许大家会纳闷为什么现在拿出来展示？因为我从毕业工作到现在已经一年了，想把当初自己为之骄傲的作品拿出来让大家拍拍砖，也是给自己一年的努力做一个对比，过两天我会再发一个近期的UI设计+前端项目作品，就是想总结一下从我开始学UI设计和CSS到现在到底都有哪些进步，也希望大家多多拍砖，但恳求手下留情，嘎嘎嘎~~

先简单介绍一下当初做的这个网站吧:这个网站是为我大学心理咨询健康中心做的，全站从页面UI、前端页面到后台程序和数据库都是我自己独立完成的，当初觉得可有成就感了，现在回头看看觉得还是蛮稚嫩的，哈哈。后台的asp程序和SQL数据库我就不提了，简单说一下UI设计和前端页面的制作吧，当初凭着自己的一点点Photoshop功底，设计了这个网站，记得上面的大图花了整整一个晚上，哈，本觉得心理咨询这种机构有种潜意识、梦幻的东西在里面，所以合成了这种场景，结果被人说是学校被水淹了，哈哈~~至于CSS，当初也不懂什么结构啊、语义化啊等等专业术语和书写习惯，只知道尽量让网页符合大多浏览器，所以代码很乱的。

这个网站的开发周期大致是:
UI设计:2周
前端开发:2周
后台程序:1个月
整合:1周

由于网站是给学校用的，所以放在校园内网了，外网浏览不了。所以在这提供个网站效果图及网站最早的Demo。

点击上图查看清晰大图

查看网站Demo

大家不要笑话我哦，再次声明，这是我大三时做的，不是现在做的。欢迎大家拍砖批评，但不要以09年的技术和审美眼光来衡量这个作品，在下先谢了。过几天我会发个近期的UI+前端作品的。敬请期待:)

LOGO作品:曾经给公司做的LOGO设计方案

暴风彬彬 — Thu, 06 Nov 2008 15:00:23 +0000

　　今天把曾经给公司设计的几套LOGO方案拙作摆上来，一共设计了大概8套方案，不过有几套个人不是很满意，所以就不放上来”找骂”了。8套方案中几乎每套的风格都不一样，因为老板比较挑剔，所以当初就多准备了几套。最终定下来的LOGO方案并不是大家看到的左边的方案，我放在第一个主要是因为我个人比较喜欢，当然公司大部分人也都很喜欢。最终定稿的LOGO方案会在下面介绍。

　　老板要求LOGO设计的风格大气，而且要能看出是从事互联网行业的公司。最重要的要求是以公司的网址为主，公司名称为辅。（这个要求时候来才提出来的）

先来看看我个人最喜欢的一套LOGO方案:

　　具体的那些logo寓意什么的我就不写了，大家自己想象吧，吼吼…

　　这个是我又做的一个logo的立体空间感的效果。这个的人气比较高…

另一个没被采纳的LOGO方案:

这个logo方案是在”公司的网址为主，公司名称为辅”的要求提出之前设计的，可能有点俗？

被采纳的LOGO方案:

　　老板在看到这套LOGO方案的时候，就马上被它的”土气”所深深地吸引。这是我设计的最后一套方案，几乎是为老板的个人喜好”量身定做”的，所以给他看完的结果也不出所料，老板对这个方案赞不绝口，然后又提出了他个人的几个小小的修改建议。

　　这个就是最后定稿的LOGO方案了，尽力按照老板的建议去思考，如何修改才能达成他的要求，最终成品….

　　通过这个例子，我想说，做设计真的是很痛苦，尤其是为客户做设计，往往你无法淋漓尽致的发挥自己的创意。即使你设计的再有创意，再漂亮，客户只要不喜欢，那就是白费。所以了解客户的想法才是王道，在按照客户的要求设计的同时植入自己的思想和创意，将它们完美结合，这是最理想的结果。但往往并非是想象的这么简单。这就是我慢慢从设计转向前端开发的原因之一，相比之下，前端开发会更能激发我自己的潜能和创意。

　　设计logo过程中的小插曲:老板在一开始否决我的方案的时候曾这样”教导”我:“我不知道你学没学过设计，我可以给你讲，LOGO设计中的文字和图形间是有固定的尺寸比例的，文字的大小也是有固定的比例的，你设计的作品根本不符合LOGO的所有要求的比例，所以会不好看…”我听完就汗颜了，看来我真的见识浅薄了，原来LOGO设计中的每个元素之间都是有固定尺寸的规定，我咋没听说过？既然都规定好了，那还设计它干嘛？直接按规定把字和图形都摆上去不就得了！

南开大学滨海学院计算机系足球队宣传视频全套（1、2、3合集）

暴风彬彬 — Mon, 22 Sep 2008 16:23:40 +0000

　　时间如水…一眨眼，我已经毕业半年了，大学的生活给我留下了无数美好的回忆，最深刻的莫过于我永远为之自豪的计算机系足球队，自南开大学滨海学院建校以来，我们计算机系足球队一直是公认的“豪门”，虽然一开始经历了很多坎坷，但从06年开始，计算机足球队便开始铸造自己的辉煌历史，我相信这个历史不会是完结，四连冠也并不是终点。计算机系足球队的兄弟们，以后还有更多的辉煌在等着你们，虽然我现在已经无法披上光荣的计算机系足球队战袍，但我会永远关注你们，为你们加油的！我们永远是兄弟！

　　今天把所有计算机系足球队的宣传视频都收集在这里，包括05年初拍摄制作的第一版，07年初的第二版和08年的最新第三版，希望今后能有更多更多第四、第五、第六版…这些视频能永恒的纪录我们的夺冠的辛酸和喜悦，再大家开始工作各奔东西的时候，打开视频还能回想起当初的比赛、当初的进球、当初的夺冠！

点击图片看清晰大图

下面开始放视频：

计算机系足球队宣传视频v1.0（摄像:李康、吴涛、王亚林、李彬; 制作:李彬）

　　这段视频拍摄制作时只有04级这么一届，所以才会看到只有那么几个人，哈哈…不过大家可以看看球场外是什么样子，貌似综合楼刚建好还没装修，后面的学生活动中心（二食堂）那里当时还是平地，方正当时南开大学滨海学院满眼一片狼藉。

计算机系足球队宣传视频v2.0（摄像:包迪、吴臣臣; 制作:李彬）

　　这段视频好像是在计算机系足球队两连冠之后拍摄制作的，当时计算机系足球队阵容真是豪华啊…呵呵

点击这里查看嵌入的视频。

计算机系足球队宣传视频v3.0（摄像:李江、杨洋; 制作:刘彪）

　　这段视频是四连冠后拍摄制作的，球队又有了好多实力超强的新面孔，我们这些老将也就是凑凑热闹而已，唉，跑不动啦….

计算机系足球队宣传视频v4.0 即将登场…

PS:谁那有大合影之类的照片发给我吧，我这不全，我想要最全的，呵呵，我的邮箱:skar9363@gmail.com

LOGO作品：艾锐博数字科技

暴风彬彬 — Mon, 22 Sep 2008 07:39:59 +0000

　　下面要介绍的是暴风彬彬几个月前制作的一套艾锐博数字科技LOGO方案，要求结合蜂巢的形状并体现立体感和科技感。

艾锐博logo第一稿:立体感、空间感都比较强，图形中的英文“IVERBO”形同穿过六边形而体现强烈的空间感和动感。但后来一直没有相处让英文“IVERBO”更醒目的方法，最后无奈去掉了英文。第一稿的艾锐博LOGO比第二稿更显朝气…

艾锐博logo第二稿:纯蜂巢式构图，从深浅度的不同体现出蜂巢的垂直俯视立体感，个人感觉这个比第一个更显稳重…

最终稿:貌似这个并不是艾锐博数字科技标识的最终稿，但是在想不起最终稿放在哪了，这个差不多算是最终的了（唉，我这脑子，没治了，吼吼…）。最终稿去掉了之前的立体英文”IVERBO”，使得整个logo变得简洁大方了许多，艾锐博的四色蜂巢图形也很有益于日后公司编写口号或文化之类的介绍.

艾锐博公司LOGO图形的实际应用:

给一个鲜花网站设计的首页效果图

暴风彬彬 — Tue, 19 Aug 2008 03:05:02 +0000

这是我曾经为一个鲜花网站设计的首页效果图，颜色摒弃普通的绿色,而使用了更能代表植物的绿。

点击可以查看清晰大图

下面是配色表。