Tag Archives: 设计

Balsamiq Mockups – 简洁高效可爱的产品原型设计工具

做项目,充分理解用户需求非常重要。文档需求必须的,但是却达不到最好的效果。

在做需求分析以及和用户交流时,快速原型的好处体现出来了。图形化的方式能够解决大量交流上的障碍,让项目能够顺利完成。

于是,在这里推荐这一款优秀的产品原型设计工具 Balsamiq Mockups。先上一张图。

read more »

网站做了一款新模板

又到放假了,总得找点事情做,前一段时间偷懒一直用的别人做的模板。

这不,这两天在电脑里面找了几张图片,就做了一个新的模板,不知道大家觉得做得怎么样??

如果有人喜欢的话,我就打包了给大家下载。

呵呵~~~发现自己暑假好多计划啊,全部都是电脑上面的计划。

如果这么模板在哪里显示有问题,大家记得留言给我吧……IE6用户请自觉飘过!嘻嘻

网页设计大赛总算完成稿子了

web.png

昨天辛苦了一夜,总算完成了最终稿。网页设计大赛的任务总算解决了。

用我前几天的状态来说,就是:罗马不是一天建成的,创意不是一天想出来的,但是只要有了创意,我在一天内可以把模板做出来。

果然如此,不到24个小时的时间内,做完了。

希望大家多多支持我,我的作品是【武大人·武大景】,到http://r.im/1b7z 给我投一票吧~~顺带你可以看看其他作品,你就会觉得给我投票值得的!

PS.说实话,开始打算叫“武大郎·武大景”……

最近在筹备一个网页设计大赛

该更新点东西了~

近期有个网页设计大赛,虽然是大赛,但是感觉一般。

但是想想自己学了这些技术,总得有露脸的地方吧,决定赌一把,参赛玩!!!

不知道到时候能不能够得奖,目前的作品还停留在创意期,19号截止,看这几天能不能够整出来!

加油!

简单方法为博客加上了一个正在载入……

看了别人的介绍,自己也在博客上面弄了一个正在载入的表示,虽然没有jQuery的好看的特殊效果,能用就行了。

或许这个就叫做用户体验设计吧,这样对用户来说,使用的感觉更好一些。

至于实现Loading…的方法很多,网上自己谷歌吧,我这里就不说了。

再秀秀桌面

秀一秀本人的桌面。顺便参与一下网生代的一个桌面展示的活动

这样的桌面布局有以下几大优点

  1. 笔记本乃宽屏,宽屏的最大问题是纵向可视面积太小,把任务栏移动到侧边能够增大可视高度,并且宽屏的横向长度长,任务栏可以拉宽,也不影响整体效果。
  2. 横向的任务栏能够显示最小化的窗口标签数量太少,经常出现挤在一起的情况,纵向的任务栏能够有效解决这个问题,即使任务栏内容太多,最小化的窗口标签能够分两列显示。显示的数量远远多于横向的任务栏。
  3. 充分利用快速启动栏,将众多的常用软件放在快速启动,我采用的是5×4的布局,你们都可以自己设定。
  4. 桌面设置为不显示图标,因为当打开较多窗口之后,还得把窗口最小化之后,才能点到桌面图标,与其这样,不如把桌面放在任务栏上面,随时随地都能够点到。

不知道大家觉得怎么样?

桌面图片下载:

CSS图片替换文字小总结

说实话,互联网上面的类似文章很多了。写这篇文章纯属是把自己的经验记录下来,以后方便自己查找啦。

CSS图片替换文字有两种方法

  1. display:none;  
  2. text-indent:-9999em;  

先说第一种方法,这个是用的比较早的一种方式,使用方法如下,例如我要替换一个超链接。

  1. <a href="#"><span>待替换的链接</span></a> 

对应的CSS就是

  1. a {background:url(....); display:blockwidth:100pxheight:100px; }/*关于a标签的伪类就自己添加*/ 
  2. span {display:none; } 

这样的方式就是需要多用一个标签。给a设置好背景图片,并且设置显示为块状对象,并且指定高宽,然后span指定文字不显示。

第二种方式相对来说简单一些,只需要一个标签

  1. <a href="#">待替换的链接</a> 

CSS代码

  1. a { display:blockwidth:100pxheight:100pxoverflow:hiddentext-indent:-9999embackground:url(...);}  

其效果就是把a变成指定高宽的块状对象,然后设置溢出的内容不显示,然后设置文字缩进-9999em,这样文字就到显示的范围外了,最后指定背景。

当初自己用第二种方法的时候,经常会出现在FF下面点击链接,结果会产生一个向左延长虚线框,这个是因为没有设置overflow:hidden;的缘故。

NetPuter 说…
建议使用text-indent:-9999em;而不是display:none;
因为后者对搜索引擎不太友好~

CSS hack区分IE6,7和FF

自己总结了一下自己在设计 CSS 过程中学会的和用过的 CSS hack 技术。相信看这篇文章的都不会是 CSS 白痴,所以 CSS 是层叠样式表我就不说了。

至于文中的 CSS hack 技术,要么是我从书上看到的,要么就是在学习别人的网站的 CSS 的时候发现的。

方法一:*和!important

IE都支持*,IE6 不支持 !important,FireFox不支持 *

举例说明:

  1. color:#FFFFFF;/*FF显示的效果  */ 
  2. *color:#EE7EE7!important;/*IE7显示的效果  */ 
  3. *color:#EE6EE6;/*IE6显示的效果  */ 

叠放顺序必须如此,可以从中去掉某个。

方法二:+和-

IE7可以认+,IE6可以认-

举例说明:

  1. color:#FFFFFF;/*FF显示的效果  */   
  2. +color:#EE7EE7;/*IE7显示的效果  */   
  3. -color:#EE6EE6;/*IE6显示的效果  */   

方法三:居然是针对Firefox的 hack

Firefox对于 i 会转换成为 i ,所以对于width, heigh, margin 等包含字母 i 的参数都可以用这套方法。

举例说明:

  1. width:30px;/*非FF的显示效果*/ 
  2. width:25px;/*FF的显示效果*/ 

有了这三种方法,一般的 hack 问题都能够解决。学习和制作 CSS 中继续总结心得。

庆祝换LAMP主机,制作新模板一块,发布旧模板也一块

换上了LAMP主机啊!这次庆祝一下,就重做了一个新模板,这次的很简洁了。是仿照blogspot上面的一张皮制作的。

这次的模板动态适应浏览器大小,由于结构比上次的简单一些,制作还算完美,现在好像没有地方排版不正常。如果你发现了不正常的现实页面,请速速留言告诉我!

自己还是觉得很满意啦。

按照以前的习惯,做一块新模板了,就把原来自己设计和制作的模板共享给大家。大家可以随意修改和发布,最好使用的时候在footer给个链接吧。

因为本人技术有限,刚刚学习CSS,顶部在IE6,7下出现白边我是在不知道怎么解决了。希望高手能够也给我指点指点。

很高兴,自己的新模板制作完毕

心情不错,昨天熬夜,今天又是一天,总算把这个皮肤制作好了!

或许相比以前的或者其他人的,这个并不好看,但是至少一点,至少在奥运五环变成奥运五框之前,这个不存在版权问题啦,图片都是我自己画的。

整体设计感觉很自豪,终于,第一次自己制作了一款属于自己的皮肤了。以前的皮肤就共享出去给别人下载啦。

检查了好多遍,好像还没有看到哪个页面有问题,在IE8,IE7,FF3下面测试过,均没有问题(有问题都被我修复了)。如果大家发现了什么皮肤的问题,就给我说一下啊!

弄这一款皮肤的时候,最开始做好的是红色,蓝色,黄色和底部的框框,这个浮动div的相互遮盖弄的我头疼死了,毕竟没有正式学过CSS,特别是做顶部那几个框框的时候,老是出现图片对不齐,框框缺边的现象,那个时候就只好一边又一遍的对照着做好的部分检查代码有什么不同。那个最顶上的棕色框框就是通过对比代码才解决的,最后总结的叠放顺序是 竖边在底层,然后上下两边至于同一层或者上一层,最顶层是浮动框。

再次高兴一把,自己做出自己设计的模板皮肤了。