<![CDATA[{ShowBin's Blog}]]> http://www.songze.name/blog/ zh-cn PBlog2 v2.4 {ShowBin's Blog} http://www.songze.name/blog/images/logos.gif http://www.songze.name/blog/ {ShowBin's Blog} http://www.songze.name/blog/article.asp?id=13 <![CDATA[某管理系统界面设计]]> iam@songze.name(ShowBin) Sun,27 Jun 2010 22:40:01 +0800 http://www.songze.name/blog/default.asp?id=13 为某管理系统更换界面设计的三套方案，都是以蓝色为主色调进行设计

 

]]> http://www.songze.name/blog/article.asp?id=12 <![CDATA[第五届机械创新设计大赛]]> iam@songze.name(ShowBin) Fri,18 Jun 2010 09:07:32 +0800 http://www.songze.name/blog/default.asp?id=12 获奖情况：
第五届机械创新设计大赛北京市一等奖

设计草图：

结构说明：

<1>外部结构

<2>内部结构

<3>阀芯结构

比赛演示PPT:

]]> http://www.songze.name/blog/article.asp?id=11 <![CDATA[iBeiKe首页改版]]> iam@songze.name(ShowBin) Tue,25 May 2010 13:14:41 +0800 http://www.songze.name/blog/default.asp?id=11 iBeiKe的首页虽然只是一页静态页，但是是我做的所有页面中思考最多的！

iBeiKe是服务于北科学生的网站群，由以下几个站点组成

北京科技大学学生会官方网站（http://home.ibeike.com）

贝城社区,北科大学生论坛(http://city.ibeike.com)

贝壳百科（http://wiki.ibeike.com）

北科课件共享系统OCW(http://kejian.ibeike.com)

北科BT资源下载站(http://pt.ibeike.com)

iBeiKe团队官方博客(http://team.ibeike.com)

以及作为以上几个站点入口的导航页，也就是iBeiKe首页（http://www.ibeike.com）

 

网站的服务器在教育网下，而北科学生寝室的网通宽带使用率逐渐的增加，教育网用户已经越来越少了，宽带用户访问教育网下的速度实在不敢恭维，这也就大大影响了iBeiKe网站的发展，由于校方原因以及其他等一系列问题，服务器转到宽带下或是通过外网做反向代理又或者是做镜像都是不现实的

因此，提高宽带用户访问教育网下的iBeiKe的速度，成了一个很严峻的问题！

以前的iBeiKe首页一直使用的是Flash页面，基本上，用宽带访问的话，没有半小时页面是开不了的

09年7月我修改了iBeiKe首页

如图：

首页的设计比较简单，更多是突出iBeiKe的LOGO，以及几个子站点的LOGO

以此提升iBeiKe的整体的团队形象，树立网站形象，统一网站在用户眼中的品牌形象

网站的中部，是iBeiKe各子网站的导航，以及相关的网站介绍，鼠标指向子网站图标，就可以显示该页面的相关介绍，让新用户能快捷的了解链接后网站的内容，让他们更快的了解自己的需求所应对应的网站链接，更快的进入网站中找寻他们的需求

页面左上角添加了“注册”以及“登录”的快速链接（如上图），方便用户快速进入iBeiKe的网络世界中畅游

由于iBeiKe大部分网站使用的是同一用户数据库（除了学生会官方网站及iBeiKe官方博客，因为这两个站点不需要用户登录后访问）因此，首页设置快捷登陆框对于用户对网站的访问是十分必要的

而在页面正下方，设置了“（登录、注销）校园网账号”的链接，方便校园网用户登录、注销自己的账号，访问外网

该页面上线后，使用宽带访问打开时间平均为2~4秒，该页面使用期8个月

虽然外网访问iBeiKe首页速度有所提升，但说实话，这个页面的结构还是很差的，比如这个页面基本没有所谓的可维护性

上图是该页images文件夹下的内容截图，该页在当时制作的时候，每个子站的LOGO以及网站的文字介绍都是一张张独立的图片，全部图片大小在28K左右

对于页面日后的维护，假如没有图片的源文件，基本上图片就等于要重新做了，而且虽然图片的总大小只有28K，但对于外网访问内网内容已经算很大了

因此我对网站的结构进行了重写，在保留网站原样式不动的情况下，重写了网站代码

采用CSS来实现站点的文字介绍

并且将网页上的所有图片合并在一张图片上，通过css sprites对图片进行部分选取

实现图片的一次下载，减少了数据的传输量，提高外网对网站的访问速度，如下图：

 

站点内容的文字介绍部分取消原有的用图片显示，而用文字实现，通过CSS控制样式，提高网站访问速度，同时增强搜索引擎对网站关键字的搜索，并且提高日后网页的可维护性

以下是部分HTML代码：

XML/HTML代码
  1. <div id="content">  
  2.     <ul id="childlogo">  
  3.             <li id="nav_home" class="normal" onMouseOver="nav_change(0)" ><a onfocus="this.blur()" href="http://home.ibeike.com" target="_blank"></a></li>  
  4.             <li id="nav_city" class="click" onMouseOver="nav_change(1)" ><a onfocus="this.blur()" href="http://city.ibeike.com" target="_blank"></a></li>  
  5.             <li id="nav_wiki" class="normal" onMouseOver="nav_change(2)" ><a onfocus="this.blur()" href="http://wiki.ibeike.com" target="_blank"></a></li>  
  6.             <li id="nav_ocw" class="normal" onMouseOver="nav_change(3)" ><a onfocus="this.blur()" href="http://kejian.ibeike.com" target="_blank"></a></li>  
  7.             <li id="nav_bt" class="normal" onMouseOver="nav_change(4)" ><a onfocus="this.blur()" href="http://bt.ibeike.com" target="_blank"></a></li>  
  8.             <li id="nav_team" class="normal" onMouseOver="nav_change(5)" ><a onfocus="this.blur()" href="http://team.ibeike.com" target="_blank"></a></li>  
  9.         </ul>  
  10.        <div style="clear:both;display:none;"><h1 class="sitename">iBeiKe Home站:</h1><h1 class="siteinfo">北京科技大学学生会官方网站</h1><h2>在这里，您能了解到北京科技大学学生会最新的活动咨询，下载活动相关报名表，参与校会组织的活动。</h2></div>  
  11.        <div style="clear:both;"><h1 class="sitename">iBeiKe City站:</h1><h1 class="siteinfo">贝城社区，属于北科学子自己的网络交友社区</h1><h2>在这里，您可以聊天、灌水、交友、咨询，北科美好的生活从这里开始！记住我们的口号：爱生活，爱北科！</h2></div>  
  12.        <div style="clear:both;display:none"><h1 class="sitename">iBeiKe Wiki站:</h1><h1 class="siteinfo">贝壳百科，一步属于北科大自己的网络百科全书</h1><h2>在这里，您可以查找、创建、编辑词条，丰富词条，了解北科的历史，一起谱写北科的历史。</h2></div>  
  13.        <div style="clear:both;display:none"><h1 class="sitename">iBeiKe Ocw站:</h1><h1 class="siteinfo">北科大课件共享系统（OpenCourseWare）</h1><h2>在这里，您可以共享您拥有的课件，下载您需要的课件，获取更多的知识，结交到与自己在相关领域有共同兴趣的挚友。</h2></div>  
  14.        <div style="clear:both;display:none"><h1 class="sitename">iBeiKe Bt站:</h1><h1 class="siteinfo">北科BT资源下载站</h1><h2>在这里，您只需拥有一个账号，海量的视频、游戏、音乐、软件随您下载，从此摆脱龟速下载。<br />当然，您也可以在这里分享您的资源，分享光荣，让我们成为北科BT站资源达人吧！</h2></div>  
  15.        <div style="clear:both;display:none"><h1 class="sitename">iBeiKe Team站:</h1><h1 class="siteinfo">iBeiKe站务组官方博客</h1><h2>在这里，您可以了解iBeiKe的最新动向。如果您有什么意见或建议的话，也希望您能及时告诉我们。</h2></div>  

以下是CSS：

CSS代码
  1. /* 
  2. 主题名称: iBeiKe首页风格 
  3. URI: iBeiKe homepage 
  4. 描述: iBeiKe.com 
  5. 作者: ShowBing 
  6. 模板: none 
  7. 版本: 2.0 
  8.  
  9. Showbing's Blog 
  10. 网址:http://www.songze.name 
  11.  
  12. 1- Global 
  13. 2- Links 
  14. 3- Header 
  15. 4- Logo 
  16. 5- Content 
  17. 6- Navbar_show 
  18. 7- Footer 
  19. */  
  20.   
  21. /* =1 Global 
  22. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  23. *{  
  24. margin:0px;  
  25. padding:0px;  
  26. }  
  27. body {  
  28. line-height: 1;  
  29. font: normal 12px Arial, Helvetica, sans-serif;  
  30. vertical-align: under;  
  31. background: #fff;  
  32. color: #000;  
  33. text-align:center;  
  34. }  
  35. ul{  
  36. list-style:none;  
  37. }  
  38. li{  
  39.     float:left;  
  40. }  
  41. h1{  
  42. float:left;  
  43. font:14px 微软雅黑,Arial,sans-serif;  
  44. font-weight:bold;  
  45. display:inline;  
  46. text-align:left;  
  47. }  
  48. h1.sitename{  
  49. margin:10px auto auto 30px;  
  50. color:#31343b;  
  51. }  
  52. h1.siteinfo{  
  53. margin:10px auto auto 5px;  
  54. color:#0ab44a;  
  55. }  
  56. h2{  
  57. clear:both;  
  58. font:12px 微软雅黑,Arial,sans-serif;  
  59. color: #3269f7 ;  
  60. text-align:left;  
  61. margin:0px 30px;  
  62. padding-top:10px;  
  63.   
  64. }  
  65.   
  66. /* =2 Links 
  67. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  68. a{  
  69. padding:5px;  
  70. }  
  71. a:link, a:visited {  
  72. }  
  73. a:hover {  
  74. }  
  75. a:active {  
  76. }  
  77. .normal{  
  78.     border-bottom-width: 8px;  
  79.     border-bottom-style: solid;  
  80.     border-bottom-color: #80e4a6;     
  81. }  
  82. .click{  
  83.     border-bottom-width: 8px;  
  84.     border-bottom-style: solid;  
  85.     border-bottom-color: #00a841;     
  86.     background-color:#0CC;  
  87. }  
  88. /* =3 Header 
  89. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  90. #header{  
  91.     float:rightright;  
  92.     margin-top:5px;  
  93.     margin-bottom:50px;  
  94. }  
  95. /* =4 Logo 
  96. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  97. #logo{  
  98.     clear:both;  
  99.     margin:30px auto;  
  100.     background-image:url(images/allpic.gif);  
  101.     background-position:0px 0px;  
  102.     width:392px;  
  103.     height:173px;  
  104. }  
  105. /* =5 Content 
  106. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  107. #content{  
  108.     marign:0px auto;  
  109.     overflow: hidden;  
  110.     width: 660px;  
  111.     margin-right: auto;  
  112.     margin-left: auto;  
  113. }  
  114. #nav_home{  
  115.     background-image:url(images/allpic.gif);  
  116.     background-position:0px -173px;  
  117.     width:110px;  
  118.     height:72px;  
  119. }  
  120. #nav_city{  
  121.    background-image:url(images/allpic.gif);  
  122.    background-position:-110px -173px;  
  123.    width:110px;  
  124.    height:72px;  
  125. }  
  126. #nav_wiki{  
  127.    background-image:url(images/allpic.gif);  
  128.    background-position:-220px -173px;  
  129.    width:110px;  
  130.    height:72px;  
  131. }  
  132. #nav_ocw{  
  133.    background-image:url(images/allpic.gif);  
  134.    background-position:-330px -173px;  
  135.    width:110px;  
  136.    height:72px;  
  137. }  
  138. #nav_bt{  
  139.    background-image:url(images/allpic.gif);  
  140.    background-position:-440px -173px;  
  141.    width:110px;  
  142.    height:72px;  
  143. }  
  144. #nav_team{  
  145.    background-image:url(images/allpic.gif);  
  146.    background-position:-550px -173px;  
  147.    width:110px;  
  148.    height:72px;  
  149. }  
  150. #content div{  
  151.     background-color:#d4f4df;  
  152.     width:660px;  
  153.     height:80px;  
  154.     clear: both;  
  155. }  
  156. #childlogo a{  
  157.     display:block;  
  158.         width:80%;  
  159.         height:80%;  
  160.     }  
  161. #contentbg{  
  162.    background-image:url(images/allpic.gif);  
  163.    background-position:0px -249px;  
  164.    width:660px;  
  165.    height:11px;  
  166. }  
  167.   
  168. /* =6 Navbar_show 
  169. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  170. #navbar_show{  
  171. clear:both;  
  172. overflow: hidden;  
  173. }  
  174. /* =7 Footer 
  175. –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/  
  176. #footer{  
  177.    text-align:center;  
  178.    margin-top:20px;  
  179. }  
  180. #about{  
  181.     margin:20px auto;}  

第二次改版后的首页于2010年5月初上线

改版后外网访问的时间平均1~2秒

虽然iBeiKe的首页只是一个静态页，但在制作的过程让我想了很多

才发现单一个静态页的制作也要考虑很多事情。。。

]]> http://www.songze.name/blog/article.asp?id=16 <![CDATA[W950主题设计]]> iam@songze.name(ShowBin) Mon,01 Mar 2010 20:24:09 +0800 http://www.songze.name/blog/default.asp?id=16 SonyEricsson W950 Theme Design

]]> http://www.songze.name/blog/article.asp?id=15 <![CDATA[PSP主题设计[线条风格]]]> iam@songze.name(ShowBin) Fri,26 Feb 2010 21:47:24 +0800 http://www.songze.name/blog/default.asp?id=15 以线条为设计风格的PSP主题

]]> http://www.songze.name/blog/article.asp?id=17 <![CDATA[艺术类icon设计[窗外景]]]> iam@songze.name(ShowBin) Thu,25 Feb 2010 22:04:26 +0800 http://www.songze.name/blog/default.asp?id=17 艺术类图标设计

]]> http://www.songze.name/blog/article.asp?id=1 <![CDATA[商业策划书配图icon]]> iam@songze.name(ShowBin) Thu,25 Feb 2010 15:09:14 +0800 http://www.songze.name/blog/default.asp?id=1
]]> http://www.songze.name/blog/article.asp?id=4 <![CDATA[主流浏览器icon练习]]> iam@songze.name(ShowBin) Wed,24 Feb 2010 22:35:13 +0800 http://www.songze.name/blog/default.asp?id=4

]]> http://www.songze.name/blog/article.asp?id=10 <![CDATA[PPT设计【60年变迁】]]> iam@songze.name(ShowBin) Mon,23 Nov 2009 21:28:58 +0800 http://www.songze.name/blog/default.asp?id=10 获奖情况：

第二届锐普PPT设计大赛三等奖

这是第一次做从头到尾自动播放的PPT，这类的PPT对动画以及时间的控制的要求确实比较高

感觉掌握的不是很好

由于带有音频，iSpring转成swf的时候一直提示错误

最后没办法，只好把音频删除了

转后的swf就不带声音了

不知道什么时候iSpring才能解决这个问题

]]> http://www.songze.name/blog/article.asp?id=14 <![CDATA[人民网吉祥物设计]]> iam@songze.name(ShowBin) Thu,05 Nov 2009 21:38:55 +0800 http://www.songze.name/blog/default.asp?id=14 人民网征集吉祥物，我设计的方案，可惜没有中标

设计手稿：

效果图：

]]>