四眼天兔工作室

博客搬家啦！

2009-03-01T15:41:00.003+08:00

经过一段时间的努力，新网站终于建成了，同时还为工作室的博客建立了新家，欢迎大家以后常到新家坐坐，那里的文章会更精彩。

新的博客地址为：http://www.4ebstudio.com/tips

RSS地址：http://www.4ebstudio.com/feed

Wordpress模版设计学习系列(一)：在本地安装Wordpress

2008-11-14T16:30:00.001+08:00

这篇文章是《学习用mac机设计wordpress模版》系列的第一部分。在本部分中，Nika将教大家如何在本地安装Wordpress，天兔也要开始跟着一起学习了。

首先需要说明的是，使用本地服务器安装Wordpress可以节省更新和预览文件的时间，同时可以通过本地服务器测试新的插件，主题以及更新。当然，如果你愿意使用支持PHP和MySQL的网络服务器学习Wordpress模版设计，也可以了，那你就可以省掉这部分的内容，直接进入第二部分吧（目前还要等等了）。

概要：

如果你有一些技术背景的话，你可以略过这些步骤。下面将要展示的是在本地安装WordPress的几个简单的步骤。

1.安装本地服务器（MAC用户请使用MAMP，PC用户请使用XAMPP）

2.创建一个新的数据库

3.从Wordpress.org下载WordPress包，并且解压到htdocs路径下

4.重命名wp-config-sample.php文件为wp-config.php，并更新本地数据库

5.运行wp-admin/install.php，根据提示进行Wordpress的安装

6.安装完毕

现在开始！

在开始之前，让我们看看运行WordPress的系统需求：

PHP 4.3+
MySQL 4+ 数据库服务器

1.安装本地服务器

为了在本地运行任何的PHP／数据库应用程序，你需要一个本地服务器（如Apache+MySQL）。对MAC用户来说可使用MAMP，对PC用户来说可使用XAMPP。

因为我用的是Mac(呵呵，和天兔一样了)，所以我将安装MAMP。

2.创建一个新的数据库

安装完MAMP以后运行，它将带你进入起始页面。点击顶部菜单中的phpMyadmin。在phpMyadmin页面中，建立一个新的数据库（例如wordpress）.

3.下载WordPress

前往Wordpress.org下载最新版本的WordPress。前往htdocs文件夹（你安装MAMP的地方，一般默认为/Applications/MAMP），解压Wordpress.zip到一个新的文件夹(比如mysite)

4.更新wp-config.php文件

进入mysite文件夹，重命名wp-config－sample.php文件为wp-config.php。打开wp-config.php文件并且根据你的服务器更新数据资料(db_name,user,password,host)。

5.运行install.php

在你的浏览器中输入http://localhost:8888/mysite/wp-admin/install.php，根据提示安装WordPress。

后续：

在下一篇中，我将像你们讲述如何以纯设计师(无需懂得PHP语言)的角度来制作个性化的WordPress主题模版。

天兔提示：

1.如果你是个彻底的新手，那么建议你完全按照图例中的字样(名字)设置，以免中途出现错误。

2.MAMP提供标准版和专业版两种，建议初级用户使用标准版即可。需要汉化版的MAMP，请前往http://mac.deray.org/MAMP.html下载。

学习用mac机设计wordpress主题模版

2008-11-14T16:25:00.004+08:00

前一阵遇到一位达人，从他那里又进一步认识了现在网页设计的趋势和需求所在。而这位达人对我的鼓励让我更加坚定了自己所选则的道路。在这里，真心的谢谢他。

这两天除了学习jQuery以外，还开始学习几个主流CMS系统的使用，当然最终的目的是学习其模版的设计。

之前曾经介绍过国外10款最常用的博客管理系统，而我现在整要学习其中的两个:wordpress以及joomla，再外加一个电子商务的管理系统zen-cart。

一直在网页上寻找好的wordpress模版制作教程，都没有什么太合适的，倒是见过两篇国内设计师写的，不过都是基于win平台的，而且没有从本质上讲解，不太适合新手。

今天有幸在Web Designer Wall上看到站长Nika La准备撰写的名为《wordpress模版设计完整教程》的系列文章，真的是兴奋不已。喜欢这位设计师的文章，除了他的设计思维和理念以外，他的教程也简单易懂，当然还有就是他也是使用mac机进行网页设计和开发的（这一点也是为什么我喜欢看欧美网页设计文章的原因），让我学起来更顺手。

该篇文章共分为三部分：

第一部分：在本地安装Wordpress

第二部分：建立自定义Wordpress模版

第三部分：移动和导出Wordpress

因此我也会跟随Nick的进程一起来学习Wordpress模版设计。如果你是一个wordpress的新手或者正在学习wordpress模版，更或者你也是使用mac机的网页设计师，欢迎你和我一起来学习，探讨。

我的联系方式：

QQ:920492714

MSN:4ebstudio@live.cn

iChat:iris0327@mac.com

加入时请您务必注明“网页设计探讨”字样，谢谢！

学习10款常用的jQuery特效

2008-11-12T22:52:00.001+08:00

最近开始学习jQuery，这款大受好评的轻量级javascript库。买了本《jQuery基础教程》(Learning jQuery)，刚开始看。很喜欢看国外的这些书籍，译本也好，原文也好，感觉讲的很透彻，基本都是以最先进的互联网标准作为依托讲解的，帮助读者建立全新的web design观念。这些也是国内类似的书籍出版商和作者应该学习的。多看看这些文章，绝对会使你的设计水平和国际接轨。

今天在Web Designer Wall上看到了这样一篇关于jQuery的文章，感觉非常实用，拿来编译一下和大家分享。当然你也可以直接查看原文。

该篇文章通过10个最常用的jQuery效果向设计师和初学者讲述了如何使用jQuery创建Javascript特效。

jQuery如何运行?

首先你需要下载jQuery库并将其插入到你的html页面中(最好是放在<head>标签内)。然后你需要调用脚本运行函数。下面的图例像你详细解释了jQuery是如何运行的。

如何获取元素?

编写jQuery函数相对来说比较简单。你需要掌握的关键点就是如何准确的使用你所需效果的元素。

$("#header") = 获取id为"header"的元素
$("h3") = 获取所有标签为<h3>的元素
$("div#content .photo") = 获取所有<div id="content">内类为"photo"的元素
$("ul li") = 获取所有<ul>内的<li>元素
$("ul li:first") = 获取<ul>内的第一个<li>元素

1.简单的滑动版

让我们从最简单的滑动版开始。你可能已经见过很多类似的效果了，当你点击一个链接的时候，一个滑动版便向上(下)展开 (view demo)

当类名为"btn-slide"的元素被点击的时候，它将向上(或下)切换(slideToggle) <div id="panel">元素，然后切换一个CSS类"active"到<a class="btn-slide">元素。通过使用css样式，类名为.active的元素将会切换箭头图片的背景位置。


$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});


});

2.简单的消失效果

该示例向你讲述如何设计点击图片按钮后该区域内容消失的效果 (view demo)

当图片元素<img class="delete"> 被点击的时候，它会查找其父元素 <div class="pane">，并且缓慢的隐藏其透明度。

$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});


});

3Chain-able过渡效果

现在让我们来看看jQuery强大的Chain-able效果。仅需几行代码就可以设计出一个按比例变化大小并且渐变消失的飞行的盒子。(view demo)

第1行和第2行: 创建<a class="run">元素被点击时的函数

第3行: 赋予<div id="box">元素的.animate函数不透明度值为0.1, 左边可到达的距离为400px, 速度为1200毫秒
第4行: 赋予.animate函数不透明度值为0.4，顶部距离160px, 高20, 宽20, 速度为"slow"
第5行: 接下来赋予.animate函数不透明度值为1, 左边距离为0, 高100, 宽100, 速度为"slow"
第6行: 设置.animate函数的top值为0,速度为"fast"
第7行: 调用slideUp函数 (默认速度值为"normal")
第8行: 调用slideDown, 速度值为"slow"

$(document).ready(function(){
$(".run").click(function(){


$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;


});


});

4a.折叠效果1

下面是一个折叠效果 (view demo)

第1行：为<div class="accordion">内的第一个<H3>元素添加名为"active"的类，并应用css样式("active"类将转换箭头图标的背景位置)。
第2行：隐藏<div class="accordion">内的非第一行的所有<p>元素。

当<h3>元素被点击的时候，它将滑动并切换(slideToggle)下一个<p>元素并且向上滑动(slideUp)它的子元素,然后切换类名为"active"的元素。

$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();


$(".accordion h3").click(function(){


$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");


});


});

4b.折叠效果2

该示例和上面的很类似，不过可以让你自定义默认展开的面板。 (view demo)

In the CSS stylesheet,将.accordion p设置为display:none. 现在，假设你要将第三个面板设置为默认打开的面板。你可以这样写$(".accordion2 p").eq(2).show(); (eq = equal)。注意起始值为0。

$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).show();


$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});


});

5a.动态悬停效果1

该示例将会创建一个非常漂亮的渐入渐出的动画悬停效果 (view demo)

当鼠标悬停在菜单上的时候，将会查找下一个<em>元素，并创建animate函数，设置其不透明度和顶部位置。

$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});


});

5b.动态悬停效果2

该示例为菜单链接添加title属性，并将它放在一个变量里面，然后附加到<em>标签上。 (view demo)

第一行附加了一个空的<em> 标签到菜单的 <a> 元素上。

当鼠标悬停在链接上时，获取title 属性，将其存放在"hoverText"变量中，然后将带有<em>标记的文本内容赋予变量hoverText的值。

$(document).ready(function(){
$(".menu2 a").append("<em></em>");


$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});


});

6.整个块元素点击效果

该示例展示了如何创建整个块元素点击效果变换的方式。(view demo)

假设你有一个类名为"pane-list"的<ul>a，并让其子元素<li> 的整个模块可以点击。你可以为".pane-list li"创建一个点击函数，当其被点击的时候，函数会查找<a>元素，并重新定向到href属性值的地址。

$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});


});

7.折叠面板

让我们结合前面的一些技术来创建一个可折叠的面板。(view demo)

第1段: 隐藏第一个面板后的所有类名为"message_body"的块

第2段: 隐藏第5个以后的所有<li>元素
第3段：当<p class="message_head">被点击的时候，滑动并且换(slideToggle)到下一个<div class="message_body">块。
第4段: 当<a class="collpase_all_message">按钮被点击的时候，向上滑动所有的<div class="message_body">块。
第5段: 当<a class="show_all_message">被点击的时候，隐藏该元素，显示<a class="show_recent_only">元素,并且向下移动(slideDown)所有第5个以后的<li>元素
第6段: 当<a class="show_recent_only">被点击的时候, 隐藏该元素，显示<a class="show_all_message">元素,并且向上移动(slideUp)所有第5个以后的<li>元素

$(document).ready(function(){
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();


//hide message li after the 5th
$(".message_list li:gt(4)").hide();


//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});


//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});


//show all messages
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});


//show recent messages only
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});


});

8.模仿WordPress的评论后台

我相信大多数人都见过WordPress的Ajax评论管理后台。现在让我们用jQuery来模仿一个。为了制造背景颜色动态效果，你需要使用Color Animations 插件。(view demo)

第1段: 添加"alt"类到所有偶数行<div class="pane">块，(隔行添加灰色背景)

第2段: 当<a class="btn-delete">被点击的时候, 出现提示信息，并变换<div class="pane">的背景颜色和不透明度
第3段: 当<a class="btn-unapprove"> 被点击的时候, 先将<div class="pane">的背景颜色变为黄色，然后变为白色，并添加"spam"类
第4段: 当<a class="btn-approve">被点击的时候，先将<div class="pane">背景颜色变为绿色，然后变为白色，并移走"spam"类
第5段: 当<a class="btn-spam"> is clicked, animate the backgroundColor to red and opacity ="hide"

//don't forget to include the Color Animations plugin
//<script type="text/javascript" src="jquery.color.js"></script>
$(document).ready(function(){


$(".pane:even").addClass("alt");


$(".pane .btn-delete").click(function(){
alert("This comment will be deleted!");


$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});


$(".pane .btn-unapprove").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.addClass("spam")
return false;
});


$(".pane .btn-approve").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.removeClass("spam")
return false;
});


$(".pane .btn-spam").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});


});

9.图像替换

假设你有一套个人图片集，需要在一个页面上显示多幅图像而无须切换页面，你可以加载JPG图像到目标元素上。 (viewdemo)

首先在H2元素上添加一个空的<em>。

当<p class=thumbs>内的链接被点击的时候：

- 将href 属性存放在变量 "largePath"中
- 将title 属性存放在变量 "largeAlt"中
- 替换<img id="largeImg">的scr属性为变量"largePath"，并替换alt属性为变量 "largeAlt"
- 将em内容 (在h2标签内的)赋予变量largeAlt

$(document).ready(function(){
$("h2").append('<em></em>')


$(".thumbs a").click(function(){


var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");


$("#largeImg").attr({ src: largePath, alt: largeAlt });


$("h2 em").html(" (" + largeAlt + ")"); return false;
});


});

10.定义不同的链接样式

在大多数现代浏览器中，定义link选择器是非常容易的。例如，定义一个链接到.pdf文件，你可以简单的使用以下css规则：a[href $='.pdf'] { ... }。不幸的是，IE6并不支持这个语法（这是为什么我们恨IE!的另一个原因）。为了实现这样的效果，你可以使用jQuery(view demo)

前三行应该很容易理解，就是根据href属性为<a>元素添加CSS类样式。

第二段是来获取href属性中不含有"http://www.webdesignerwall.com"字样或者不是以 "#"开头的<a> 元素，然后为其添加"external"属性，并将目标浏览器开启方式设置为"_blank"。


$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");


$("a[@href$=zip]").addClass("zip");


$("a[@href$=psd]").addClass("psd");


$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });


});

25款极具创新意义的CSS特效

2008-11-12T12:02:00.002+08:00

CSS不仅仅只能处理一些中规中距的日常设计工作。本文将像你介绍25个非常有意思的，极具创新的，试验性的CSS技术。

需要说明的是，这些技术和实例不一定适合所有的浏览器，而且不一定符合设计和开发标准。其中一些技术还尚处探讨阶段。

透明CSS下拉菜单

该示例演示了如何设计一款先进的CSS透明下来菜单。该技术需要使用JavaScript技术实现IE6下PNG图片的透明效果。

返回图片地图

你将在该示例中看到一款用非常流行的方式设计的基于CSS的带有信息弹出框的图像地图。

CSS 3D迷宫

这是一款纯CSS设计的3D迷宫。如果你也想设计出这样的效果，那么你要做好充分的心里准备，因为你会为此付出很长的时间和耐心。

CSS滚动图像地图

该示例是用CSS设计一幅使用了热点技术的全景图片。点击图片的上的热点会在旁边的区域显示它的描述信息以及一幅可缩放的图片。

CSS装饰图库

Demo: CSS Decorative Gallery

Web Designer Wall 向我们展示了一款使用背景图像技术设计的图库效果。

CSS纸牌

Demo: Playing Cards

该示例使用特殊的HTML属性显示纸牌效果，并使用CSS对其进行样式和定位设置。

CSS版辛普森一家

在该示例中，Román Cortés使用HTML和CSS重新设计了辛普森一家。你可以点此查看动画效果。

CSS房屋造型

Demo: CSS House

Design Detector通过使用DIV和CSS设计了一款房屋造型。

使用CSS定位和透明效果设计“Secret Message”

Demo: Secret Message

该示例是由CSS-tricks 的Chris Coyier设计的使用滚动效果显示"Secret Message" 。

如何设计细边阴影效果

Demo: light-weight drop shadows

该示例使用PNG图片透明效果来制作DIV边框的阴影效果。在IE6浏览器下需要使用JavaScript技术支持。

多种位置的阴影造型

这是使用另一方式设计的页面元素阴影效果。

多种透明效果

在该示例中，CSS大师Eric Meyer展示了一些使用CSS设计的透明效果

DVD遥控器

Design Detector 使用HTML和CSS技术设计了一款遥控器效果。

划线效果

CSSplay 的Stu Nicholls使用CSS设计了一款铅笔画线的效果。将鼠标放在图片上面，铅笔将画出一条水平线。

CSS文字阴影

使用纯CSS技术设计文字阴影效果。该技术涉及了文字层叠技术。不过目前css3已经提供了文字阴影的属性。

基于CSS的flash链接效果

在该示例中，将鼠标停放在导航栏的一个标题上，箭头将从做至右滑动。

地图信息提示

该示例演示了CSS在一幅地图上的图像地图效果。

纯CSS信息提示效果

该技术实现了鼠标悬停时显示隐藏DIV块的效果。

CSS页脚固定效果

这是一个固定在页面底部的页脚效果，他可以忽略页面的高度。

等比变化的五星

使用CSS画出一个简单的五星形状。当用户调整浏览器字体大小的时候，五星图形将随之进行等比例变化。I

菜单描述

在这个使用css设计的菜单中，鼠标悬停时可以显示更多的菜单信息。

CSS渐变效果

Demo: CSS Gradients Demo

该示例演示了使用CSS样式和空DIV元素以及背景颜色模仿渐变效果。

等比例变化背景图片

Demo: Scaled Background Image

该示例演示了如何设计一个可按比例变化的背景图片。(改变你的浏览器大小试试看)。

CSS垂直柱壮图

该示例演示了使用CSS生成一个垂直的柱壮图。

CSS渐变文字效果

Demo: CSS Gradient Text Effect

该技术通过使用PNG图片为文字添加渐变效果。在IE6浏览器下需要使用JavaScript来支持透明效果。

介绍14款免费的基于网页的协作工具

2008-11-01T12:41:00.000+08:00

现在都在讲协同合作，对于一名设计师或开发人员来说这样的工作模式非常重要。尽管一些像Basecamp和Zimbra的付费或注册服务已经成为主流，但是对于囊中羞涩的个人来说，还是可以找到有很多相似的免费服务，并且这些服务仍旧提供了很多类似的功能。

本文将介绍14款免费的远程、基于网络的在线协作工具。无论你是需要一款最基本的白板工具，或是进行头脑风暴的工具，还是一个全方位的项目管理工具，你都会从中找到一两款适合你的。

Google Docs

Google Docs 是一款非常出色的在线办公工具。你可以共享文件和表单，并且和你的团队或客户进行实时交流。作为一款基于浏览器的软件，软件运行所占用的资源非常小。在线办公意味你在任何有互联网接入的地方均可以使用。可以前往Google Docs的帮助页获取相关使用说明。

Stixy

Stixy是一款非常灵活的在线电子公告牌。它没有固定的结构，完全基于用户的需要而创建个性化的界面，是一款非常棒的白版工具。stixy比较直观的将便签、文件、照片、日历发布在一个类似公告板一样的页面上，你可以自由编排这些文件的布局然后通过邮件发送链接的方式与别人共享。整个界面实用又美观，每个用户可以创建多个这样的公告板方便与不同的人分享不同的文件。

Project2Manage

Project2Manage 是一款功能齐全，免费的项目管理和协作托管工具（和Basecamp类似）。你可以建立不同的角色和权限给每个团队成员。该款工具可以管理无限量的项目。

bubbl.us

bubbl.us 是一款免费的，基于网页的头脑风暴协作工具。你可以创建漂亮的思维地图，并且和你的团队成员分享。你可以保存、发邮件并且打印你的思维地图，甚至可以直接将它们嵌入你的网页中。

Dabbleboard

Dabbleboard 是一款功能强大、易于使用的线白板工具。使用Dabbleboard可以创建个人用户界面的线框图，图表以及网络图等。你可以创建许多工具包（一套可重复使用的绘图对象）或者使用预置的工具包。

Protonotes

Protonotes 是一款网页注释服务，可以让你在浏览网页的同时高亮显示团队用户对网页中出现的关键词的评价以及意见；你可以订阅团队的注释RSS。你可以将你的数据导出成CSV文件，并用像Google Spreadsheets、Excel这样的电子表格工具打开，你还可以用MySQL数据库储存你的数据。

ProjectPier

ProjectPier 是一个自托管、开源、基于PHP的项目管理工具。可以在一个界面下同时管理你的任务、团队成员和项目。使用界面非常简单，虽然没有一些独特的功能，但是对于进行项目管理和协作已经足够了。

Twiddla

Twiddla 是一款功能强大、内容丰富的在线协助工具，用户只需要分享出某一项目的URL地址，即可邀请团队其他成员进来进行实时的共创作交流，简单到一切只需要通过Web浏览器，甚至无需下载安装任何插件和软件！Twiddla 的用户体验也是十分的良好，它可全面支持文字形式以及语音功能的即时通讯和多种方式的绘制工具等。

Wetpaint

Wetpaint 具有wiki、博客、论坛和社区的功能，是一款自由的协作工具。因为它使用简单，不需要任何专业技术，成为了一款非常出色的可以随意编排自己内容的平台。

Thinkature

Thinkature 是一款出色的协作工具。你可以通过聊天、画图或直接抓取网页来创建一个工具区进行视频交流。使用起来非常灵活。

Spicebird

如果你想使用桌面工具来空远程或基于网页的协作工具，可以使用Spicebird，一款自建服务器的、开源的满足所有协作需要的平台。它有一个内建的即时通信系统，一个群组日历，一个地址簿以及更多。

Mindquarry DO

Mindquarry DO 是一款用Java(J2EE)编写的开源协作工具。它是Mindquarry的在线版本，同时也提供下载。

Vyew

Vyew 是一款网络会议工具，可以免费提供20个参与者进来。你可以共享你的桌面，使用内建的抓屏工具保存会议内容，添加公司logo个性化你的Vyew，使用一些插件如DiagramVyew来创建图形与参会人员共享等等。

Writeboard

Writeboard 是由37Signals开发的一款简单的，基于网页的免费文本协作工具。你可以从创建你自己的写字板开始，邀请团队成员，然后开始书写文本。团队中的人可以实时看到你的更新，编辑以及任何变化。你可以保存，修改，创建版本，以及返回先前的任何版本。

iPhone/iPod touch也能Google earth了

2008-10-28T22:39:00.000+08:00

今天在iTunes Store上看到了Google专门为iPhone和iPod touch定制的Google Earth，赶紧下载试用。

该软件完全免费，具有电脑端软件的所有基本功能，而且还针对iPhone/touch的特殊技术进行了功能再开发。用户可以通过iphone/ipod touch的touch技术进行放大缩小，通过屏幕感应功能获取三维地形图等。同时，该软件还提供了My Location（我的位置），Wiki（维基百科）以及Panoramio（全球定位地图相册服务商）功能。

touch上的Google Earth图标

进入Google Earth界面。

通过左上角的定位搜索功能查找目的地。我在这里输入了“Beijing”

很快进入了北京的地图界面。上面标有"W"字样的点进去以后就是维基百科书对该位置的介绍，蓝色的小方框就是Panoramio照片。

接下来我开始寻找“鸟巢”。通过手指移动屏幕，一直向上（北）。屏幕右上角的图标就是地理方位指向标，红色代表“北”，可以通过双击这个图标进行复位。

将Touch逐渐竖起的过程中，视图也随之发生了变化。

这是将touch直立以后的效果。

可以通过对google earth的设置获取不同的功能。

设置界面。

版本号。括号里面是对应的目前电脑客户端的版本号。

详细的帮助文档。

据google官方博客称，目前谷歌免费在22个国家向iPhone和iPod Touch用户提供18种语言的“谷歌地球”服务，中国有幸成为其中的一员，感兴趣的朋友赶快去试试看吧。

ipod nano 4 巨幅广告惊现雅虎中国

2008-10-21T19:28:00.001+08:00

刚打开雅虎的首页，看到了一幅巨大的苹果ipod nano 4的广告，感觉真棒！录屏和大家分享一下！

走出千篇一律的网店装修(二)：使用属于你的色彩

2008-10-15T22:22:00.003+08:00

纵观目前的网店装修，无论易趣也好，淘宝也好，拍拍也罢，似乎都在走清一色的日韩风潮，可爱的卡通人物，闪闪发光的背景图案，花花世界，乍一看活泼可爱，靓丽多姿，可是时间长了不免感到视觉疲劳。更何况，这种可爱的日韩风格并非适合所有的店铺。很多店主因为单纯的看到店装模版的好看，而忽视了店铺的经营内容，就直接将模版套在了自己店铺的身上，好比看到了一件非常可爱的公主裙，买回家穿在了年迈的长者身上。因此，店主在设计时要将店铺的经营宗旨、商品种类和目标客户群结合起来，创造最适合自己的店铺风格。店铺装修永远没有最好的，有的只是最适合的。而只有适合了，看上去才会感觉更近乎完美。

今天我先来谈谈店铺的色彩。

（以下部分内容参考《网页色彩密码》这本书）

首先，需要针对不同的店铺来进行不同的情感创意，是抓住顾客最有效的方式之一。

色彩与人的心理感觉和情绪有一定的联系。色彩的直接心理效应，来自于色彩的物理光学刺激，对人的大脑与生理发生的直接影响和变化。心理学家发现，在红色环境中，人的脉搏会加快，血压有所升高，情绪兴奋冲动。在蓝色环境中，脉搏会减缓，情绪较沉静。其实心理学已从哲学转入科学的范畴，我们必须要注重色彩心理的效果和联想的表现。总的来说，人们在日常生活中既需要暖色，又需要冷色，只有这样，我们的生活才能达到心理和情感上的平衡。

在网店的色彩表现上也是如此，冷色与暖色会带来其它的一些感受与心理的变化，例如：地域感、季节感、性别感、重量感、湿度感等。黄色表示收获的季节，蓝色表示冰冷的冬天；暖色偏重，冷色偏轻；暖色有密度强的感觉，冷色有稀薄的感觉，色彩除了冷暖的变化外我们在这里更关注的是色彩的心理联想与其它变化，如暖色联想到阳光、火焰、亲人等。冷色联想到冷静、文雅、保守等，因为不同的色彩会表达不同的含义，参看下表：

 
1. 冷暖色彩对人的情感表达  冷暖色彩给人的心理情感上带来的变化是很丰富的。客观地讲，色彩本身并无冷暖的温度变化，引起冷暖变化的原因，是人的视觉对色彩冷暖感觉引起的心理联想。 

（1）暖色：用户见到红色、橙色、黄色、红紫色、橘红色等颜色后，马上联想到火焰、太阳、炉子、热血等物像，感觉到温暖、热烈等信息。

销售儿童用品的店铺可采用暖色调来设计，可以给人以一种可爱温馨的感觉。

暖色具有向外辐射和扩张的视觉效果，以暖色调建立起来的网店也很鲜艳夺目，散发出一种照耀四方的活力与生机。例如销售女性商品的网站，采用红色做主调，加之诱人的肤色，给人一种心动的感觉。

销售和休闲、娱乐、运动、节庆用品相关的网店设计也可以暖色调为主，给人心理以“温暖感”和“热烈感”，总之要以与人的心理需求相吻合，引起点击者的情感融入和思想共鸣。

（2）冷色：用户见到草绿、蓝绿、天蓝、深蓝等色后，很容易联想到草地、太空、冰雪、海洋等物像，产生广阔、寒冷、理智、平静等感觉。蓝色或绿色是大自然赋予人类的最佳心理镇静剂。

销售医疗用品、保健品等的网店就可以使用蓝色作为主色调。

夏天的浅冷色系明朗而富有青春朝气，为年轻人所钟爱；深蓝色系沉着、稳定，为中年人普遍喜爱的色彩。其中略带暖味的群青色，充满着动人的深邃魅力，藏青则给人以大度、庄重印象。当然，淡蓝、淡绿、蓝白色也是女士的钟爱色彩。

像销售夏季用品、职业女装、淑女服饰用品、中老年用品等的网店均可以使用这些浅色系。

2.色彩对人的情感倾向性表达  网店所使用的色彩，会使用户产生联想，诱发各种情感，使心理发生变化。但使用色彩来激发人的情感时，应遵循一定的规律。色彩的冷暖感觉，不仅表现在固定的色相上，而且在比较中还会显示其相对的倾向性。
心理学上的研究认为，在设计食品网站时，不要或少用蓝、紫色彩。宜用橙色、桔红色，可以使人联想到丰收、成熟，从而引起用户的食欲并促成购买的行动。

化妆品网店一般倾向淡雅、浅色调或者带有色彩倾向的灰色，给人一种柔和陶醉的感觉。

   3.性别的色彩表现
   你的商品销售对象是男同胞还是女同胞？特定的颜色会让你的网店一目了然。

   （1）男性色彩的表现  一般来说，形容男性应该是刚强、果断、勇猛、坚韧帅气、英俊潇洒、坚毅、义气、正直、正义感强、强壮、豪放等词语来修饰，符合男性身份的色彩也要体现这些特征信息。男性用品类网店应充分体现男性的丰富内涵，为男土独特而深沉的内心世界做出最好的形象注解。一般而言，在视觉上采用灰色系列、深色系列、对比强烈的色彩等是可行的，很少采用清淡的色彩和对比不明显的色彩。

   （2）女性色彩的表现
   亭亭玉立、美丽、温柔、秀外慧中、高雅大方、英姿飒爽等，这些都是来形容女性的。女性色彩一般比较柔和亲切、温顺、雅致、明亮。  紫色无论深浅，都是具有女性魅力的色相。紫色的华丽、高贵和神秘无人能及，众多设计师对紫色似乎总有着格外的偏好，纷纷选择以代表着强烈欲望的紫色来装点女性网店。
   浅蓝色、浅红色，也是设计师们经常采用的女性流行色。给人一种心胸开阔，祥和博爱的感觉，让你情不自禁地想去触摸、感知和幻想。淡蓝或者淡绿、高雅的淡灰系列、淡黄色、淡红色都可以用来表现女性的美丽。

   4.年龄的色彩表现
   网店除了根据自身的产品、目标群体的性别来进行颜色选择外，还需要考虑目标群体的年龄。

   （1）婴儿、儿童色彩的表现  出生不到一岁的婴儿，由于视网膜没有发育成熟，要避免强烈的色调刺激，基本采用柔和的色调来呵护。婴儿家长往往也有这种心理，所以婴儿用品网店多采用明亮柔和的色调。活泼的性格、充满好奇心的特征，使儿童对纯色的刺激更感兴趣。孩子们喜爱单纯的颜色，红、橙、黄、绿都是孩子们的偏爱，所以儿童用品类网站大多采用这类纯色调。

（2）青年色彩的表现  青年是社会未来的接班人，青年色彩多为表现阳光、活力和青春的感觉，从充满活力的纯色到强壮有力的暗色，都是年轻人的色彩。城市里的年青人也偏爱冷色，社会规范的约束和信息资源的丰富促使年轻人快速成长起来，也慢慢开始倾向于理性成熟的色彩，当然年轻人的色彩还是要艳丽一些，这样富有朝气。

（3）中年色彩的表现  中年人是社会的主要建设者，以中年人为表现内容的网站，色彩更倾向于营造宁静恬淡的生活氛围。中性色彩的各种系列适合成熟的中年人。色调大方、稳重、恬淡、温和，是成熟中年人魅力的色彩表现。

（4）老年色彩的表现  暖灰色调是老年人心理上的一种钟爱色彩，也许是因为老年人晚年喜欢平静、健康、素雅的原因。健康、喜庆、热闹，在平静素雅的色彩中加入少许暗红色、中黄、墨绿色更能博得老年人的喜爱。

走出千篇一律的网店装修(一)：使用div＋css

2008-10-15T22:19:00.002+08:00

看到很多介绍店铺装修的文章，的确很有启发。不过就我个人人为，这些设计走的都是千篇一律的套路，而且更多的是模仿淘宝的店铺而来。

其实，像易趣、拍拍这样的店铺本身具有很多自身的优势是淘宝所没有的，其中最吸引我的一点就是他们对div＋css的友好支持以及更开放的自定义页面平台。易趣、拍拍的卖家应该更好的利用这个平台创造出更具个性、更为专业的店铺。

今天我先讲一下div＋css的设计模式比table的设计模式更为先进和独具优势的地方。

对于目前多数自己进行网店装修的买家来说，大多数人的做法基本都是先在ps里面做好网页样式，然后进行图片切割，然后直接另存为html格式或者将切割好的图片放到自定义的table里面。这种方法没有错，但是，table是很多年前的网页设计主流应用模式，它是基于当时的互联网技术和标准的。但是随着网络的迅速发展和互联网标准的不断更新，table已经成为了一种过时的应用技术，它的优势远远落后于div+css技术。

1.div+css大大缩减页面代码，提高页面浏览速度,缩减带宽成本。就易趣卖家而言，快速的加载速度是对客户的一种更为人性化的体验。

2.结构清晰，容易被搜索引擎搜索到，天生优化了seo。虽然现在针对网店有很多的搜索引擎优化的方法，但是基于网页本身的这种最基础而且直接有效的优化方式是易趣卖家绝对不应该忽视的。

3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。虽然易趣的店铺涉及不到城百上千的店铺，但是即使只有4、5个页面能够迅速的修改完成也是一种效率的提高。

4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

6.提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

8.更好的控制页面布局。

9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)，这对易趣卖家来说绝对是个利好。

11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

12.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

13.在几乎所有的浏览器上都可以使用。要知道，不是所有的人都在使用垃圾IE，现在更多的人都在使用更加高端，更符合互联网标注的浏览器，如firefox、opera和safari等，易趣的卖家千万不要因为页面浏览出现问题而丢失这些重要的客户。

14.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面，这也是为什么我会强烈推荐使用div+css，要知道单靠图片拼接出来的页面加载速度过慢，会使客户失去等待的耐心，从而转到其它卖家那里。

15.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

16.你可以轻松地控制页面的布局。

17.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。  

好了，看到div＋css有如此多的优势，你是否决定试一试了呢？  

最后，我还是想提醒一下易趣、拍拍的卖家，不要受淘宝网店的影响，应充分利用平台的自身优势，充分发挥你的想像力，让你的店铺更具个性和特性。

15款检测网站流行度的工具

2008-10-14T12:57:00.000+08:00

作为一个网页设计师或开发人员，当你正在建设网站的时候，首先应该对类似的网站加以分析来帮助你对设计和开发策略做决定。清楚的了解类似网站的运作情况将会对你的设计元素，网站特性以及网站内容提供参考和灵感。

本文将向你介绍15款高质量的、免费的、简单的网页工具来帮助你详尽的了解一个网站。

1. Yahoo! Site Explorer

Site explorer 是一款基于search API的反向链接查询工具，人们可以通过它查看哪些URL已被Yahoo!搜索收录或是提交还没被收录的URL。该工具可以通过统计一个网站被链接的数量来显示该网站的流行程度。

2. Compete

Compete 是一款基于网页的分析工具，可以帮助你同时比较3个网站的通信量统计以及趋势。它可以评估一个网站的唯一访问者数量和页面浏览次数以及网站的流行度增长率。

3. Quantcast

Quantcast 不仅可以统计网站流量，pv值等，它能够提供一份更加完整的访问者报告，甚至可以统计访问者的性别，年龄和受教育程度。

4. Alexa

成立于1996年的Alexa是目前最流行的网站流量排名统计服务商。它能提供网站的流量统计，并通过这些数据进行一系列的排名。

5. Feed Compare

测试一个网站流行度的有效途径就是查看该网站的RSS的订阅量。如果一个网站使用FeedBurner（一款主流的RSS订阅服务商），你可以使用Feed Compare查看网含的订阅趋势并且同时对4个网站的订阅量增长率进行比较。

6. popuri.us

popuri.us 是一个提供网站流行度、网站综合信息在线检测查询服务的网站。使用非常简单，无需注册，只要输入你想检测的网址即可。帮助你查询出网站的RANK值(比如Google PR、Alexa Rank等)、在网络书签网站中的被收藏连接数(比如del.icio.us等)及RSS阅读器中的订阅数(比如Bloglines等)。另外，它还提供了一个Widget应用，可在你的网站上直接显示Google PR、Alexa Rank等值。

7. socialmeter

socialmeter是一个网页链接分析工具，通过输入一个网页地址就可以得知此网页在一些主要的社会性网站中的链接情况，如Digg、del.icio.us、Google、Technorati和Yahoo My Web等等共11个网站。可以用来查看自已在这些大型网站中的链接情况。

8. TweetVolume

另一种检测网站流行度的方式就是查看Twitter的人们是否在谈论该网站。TweetVolume 可以通过输入关键字和词来查看这些内容被多少Twitter使用者提及。

9. Quarkbase

Quarkbase 是一款综合的网络工具，可以显示一个网站的许多信息。它有一款“Social Popularity”标签可以显示一个网站在一些社会媒体网络如Digg, Stumbleupon以及Delicious上的流行度相关信息。

10. BlogPulse Profiles

如果你对一个博客网站的相关信息感兴趣，logPulse Profiles 这款工具可以帮助你。它是一个简单的网络应用，提供博客的排名，被其它博客提及的频率以及其它相关信息如该博客的文章发布频率，与其类似的博客等。

11. Technorati Blogging Central

Technorati是一款占有主要地位的博客搜索引擎。它的Blogger Central allows允许你查看一个流行博客在世界范围内的排名。Technorati是通过一个博客的反向链接来统计博客流行度的。

12. Statbrain.com

Statbrain.com 是一款十分简单的工具，用来统计每天的页面访问量。

13. Cubestat

Cubestat 也是一款简单的网络工具，提供一个网站的日访问量。不过它的一个独特的地方就是它有一个网站价值评估（美元），价值越高，说明网站越流行。

14. dnScoop

dnScoop 是一个网站相关信息，网站价值查询工具，能够查询的内容包括：域名年限，Google Pagerank，所有指向此域名的网页数，Alex信息，主机IP信息，还可以查看此IP上面其他停放的网站等。

15. WebsiteOutlook

WebsiteOutlook 通过对一个网站的估值、日浏览量以及网站收益等来判定网站的流行度。

介绍6款基于网页的图像编辑工具

2008-10-13T20:30:00.000+08:00

基于网页的图像编辑器相对于其桌面产品具有许多优势，最明显的一点就是允许你在任何一台装有浏览器的电脑上使用该图像工具。在多数情况下，你可以在线保存，而无须安装桌面程序，并且和其它一些网络服务具有接口，如Flickr,Picasa等。本文将向你介绍6款好用的、免费的图像编辑工具，它们可以替代诸如Adobe Photoshop或GIMP这样的桌面产品。

1. Pixlr

Pixlr是一款功能强大，基于flash，和Photoshop具有类似用户界面的图像编辑工具。Pixlr 提供了API接口让你可以将Pixlr和你的博客、网页应用或者网站直通，不过该API接口还是很早以前的。Pixal具有一款智能魔棒工具，可以自动选择相同或相邻的像素（和Photoshop的魔棒工具类似）。

2. Splashup

Splashup是一款多功能的图像编辑软件，它整合了一些流行的网络相册共享服务商，如Flickr, Picasa,以及Facebook，允许你远程访问你的照片。Splashup包括一些超酷的功能，如图层混合模式，从网络摄像头抓取照片，以及多种图层效果和滤镜。

3. Phoenix

Phoenix是Aviary下的一款功能强大、基于网页的图像编辑工具，也是桌面图像编辑软件的最大竞争对手。你可以通过官网上的教程列表来领略这款工具的魅力。你需要进行注册来访问Phoenix，不过这并需要多少时间，而且还可以访问其它的Aviary工具和服务，如Peacock 和 Toucan。

4. pixer.us

如果你正在寻找一款能够满足你进行简单照片处理的工具，你可以查看pixer.us，一款免费的，基于网页的照片编辑工具。它有一个相当直观的简易界面和一些使用的照片编辑功能，如剪裁、大小调整以及旋转等。它还具有一些颜色调整的选项，如饱和度、亮度、对比度等。你可以将你的照片存储成4种常用的数码照片格式，PNG,JPG, GIF以及BMP。

5. FotoFlexer

FotoFlexer是一款免费的，基于网页的照片编辑工具，具有相当丰富的功能，不过使用起来非常简单。你可以上FotoFlexer的演示页面查看它的一些实用功能。当然，FotoFlexer也具有一些非常出色的照片处理功能满足使用者的基本需求，如剪裁、大小调整以及旋转。它还整合了一些流行的网络服务商，如Flickr,Picasa, Photobucket, Facebook以及MySpace等。

6. SUMO Paint

SUMO Paint是一款免费的在线图像处理工具，你可以进行编辑，也可以进行全新的创作。它有一款图形工具可以让你绘制出许多独特的形状，笔刷工具可以绘制出难以想像的高质量图像，变形工具可以让你按比例缩放、移动以及旋转图像。当然，它还有许多其他的功能

QQ for iphone发布

2008-10-09T18:32:00.002+08:00

今天上iTunes store无意中发现了一个极为熟悉的面孔：QQ

节前麦饭们都在期待着QQ for mac的重大更新，可是一直都没有消息。没想到节后腾讯竟然出乎预料的发布了QQ for iphone。要知道，最近苹果公司在严打不合格的app开发者，很多不是无法上架就是被勒令下架，可见腾讯公司这次的确下了不少功夫。而这也是继6间房、淘宝等在业界具有足够影响力的网站专门为iphone开发产品后的又一重要里程碑。

下面来看看iphone版的QQ。该版本的QQ和mac版的基本一样，包括了PC版QQ的主要功能，群聊、默认表情、查询好友、添加好友等等功能，并且支持多标签聊天，界面风格和iphone统一。

点击QQ的图标，填写好QQ账号和密码登陆。

进入主界面，菜单栏包括“好友”“群”“个人设置”和“会话”。

点击“好友”就可以开始聊天了。

进入聊天界面，支持表情符号。

看，发出了一条消息

回复了。

因为我的是touch不是iphone，所以是通过wifi进行网络链接的，不过据了解iphone既可以通过手机网络也可以通过wifi连接。看来，只要有wifi的地方就可以随时登陆QQ了。

skype早前就已经实现了通过iphone进行通话，如今QQ也加入了这个行列，不知在国内另一大主流通讯工具MSN什么时候能够支持iphone啊。不过毕竟微软和苹果是竞争对手，看微软要下多大的决心来支持iphone了，不过既然微软早已迈出了office for mac,msn for mac及诸多其它跨平台产品，希望MSN for iphone也能离我们不远了。

iPod 历年广告歌曲大汇合

2008-09-15T12:06:00.006+08:00

每当有新的ipod广告出现的时候都会去收集和查找广告歌曲，真的是首首经典。下面列出ipod7年来的所有广告歌曲名称和演唱者，不过处于版权的问题，不提供歌曲下载，如果感兴趣的话请从正规途径获取这些曲目。

发布日期	表演者	歌曲名称	iPod
2001年10月	The Propellerheads	Take California	一代
2003 年04月	Black Eyed Peas	Hey Mama	三代
2003年04月	N.E.R.D.	Rock Star (Jason Nevins Remix)	三代
2003 年04月	Jet	Are You Gonna Be My Girl?	三代
2004年06月	Feature Cast	Channel Surfing	四代
2004 年06月	Steriogram	Walkie Talkie Man	四代
2004年06月	Ozomatli	Saturday Night	四代
2004 年10月	U2	Vertigo	四代，U2版
2005年01月	The Vines	Ride	四代
2005 年01月	Caesars	Jerk it out	Shuffle 一代
2005年06月	Daft Punk	Technologic	四代
2005 年06月	Gorillaz	Feel Good Inc.	四代
2005年09月	The Resource	Gimme That	Nano 一代
2005 年10月	U2	Original of the Species	五代
2005年10月	Eminem	Lose Yourself	五代
2005 年10月	Wynton Marsalis	Sparks	五代
2006年04月	Rinocerose	Cubicle	Nano 一代
2006 年04月	Wolfmother	Love Train	五代
2006年08月	Bob Dylan	Someday Baby	五代
2006 年09月	Cut Chemist	The Audience Is Listening Theme Song	Nano 二代
2006年09月	Prototypes	Who's Gonna Sing?	Shuffle 二代
2007 年01月	The Fratellis	Flathead	五代
2007年02月	Eberg	Inside Your Head	iPhone
2007 年06月	Paul McCartney	Dance Tonight	Beatles on iPod
2007年06月	Quantic & Nickodemus	Mi Swing es Tropical	iPod Latino
2007 年07月	Orba Squara	Perfect Timing	iPhone
2007年07月	CSS	Music Is My Hot, Hot Sex	iPod Touch
2007 年09月	Feist	1234	Nano 三代
2007年11月	Mary J Blige	Work That	iPod+iTunes
2008 年01月	Yael Naïm	New Soul	MacBook Air
2008年02月	Brendan Benson	What I'm Looking For	America Idol on iTunes
2008 年04月	The Ting Tings	Shut Up And Let Me Go	iPod+iTunes
2008年05月	Coldplay	Viva la Vida	Exlusive Album on iTunes
2008 年07月	The Submarines	You, Me and the Bourgeoisie	iPhone 3G
2008年09月	Chairlift	Bruises	iPod Nano 4G
2008 年09月	The Asteroids Galaxy Tour	Around the Bend	Touch 2G

28款出色的网页设计参考表单

2008-09-11T21:00:00.000+08:00

参考表单不仅可以帮助你快速记忆某些事情，而且还可以作为你的工作空间添加有趣的墙面装饰。

本篇文章将会向你介绍28款非常出色的、实用的参考表单，内容包揽pshotoshop、dreamweaver、色彩、排版、以及其他相关的网页设计工作，他们具有不同的格式，而且所有参考内容都呈现在了一个页面上，易于查看。

Photoshop
Photoshop CS3 快捷键表单

下载: PDF (Windows), PDF (Mac)

图层面板调用键 (HTML)

Photoshop 工具栏参考表 (HTML)

Photoshop 套索工具参考表

下载: PDF

Photoshop 笔刷工具参考表

下载: PDF

颜色
RGB Hex色普

下载: PDF, PNG

色谱 (PDF)

Web 网页设计颜色参考六角鼠标垫

下载: GIF

网页安全色表单 (HTML)

16色色谱表 (HTML)

浏览器安全色 (HTML)

字体
VisiBone字体卡片

下载: GIF

Windows 和Mac下常用字体比对表 (HTML)

混合字体 (PDF)

单位
混合字体像素/点单位比对 (HTML)

百万像素图

下载: GIF

CSS/CSS 框架
CSS蓝皮书

下载: PDF

YUI数据库: CSS Reset, Base, Fonts, 以及Grids (PDF)

CSS 速记表 (PDF)

AppleCSS Widget (Mac Dashboard Widget)

HTML/XHTML
HTML & XHTML快速查找表 (PDF)

HTML/XHTML 字符对照表

XHTML 字符对照表 (HTML)

Dreamweaver
Dreamweaver 快速参考指南 (PDF)

Dreamweaver CS3苹果版快速参考指南 (PDF)

Illustrator
Adobe Illustrator CS2 苹果版快捷键

下载: PDF

浏览器
浏览器兼容性比对表 (HTML)

W3C DOM兼容性表单 (HTML)

首张真实版iPod nano 4G 设计图片网上泄露（更新）

2008-09-06T11:20:00.002+08:00

今天，以报导第一手苹果资料而闻名的MacNN网站在苹果9月大会前夜透露了最为真实的第4代ipod nano设计细节。

MacNN称他们可以确定这就是绝对真实的第4代ipod nano。它和Digg的创始人Kevin Rose在个人博客中所描述的样式很吻合，细长的锥形设计，全铝外壳，和第2代的nano非常相似。同时，它还具有和2006版本相同的基座插口并且多了一个至少有一个颜色的回放钮，这是在之前几代ipod身上已经消失了的设计细节：MacNN此次透露的设计样板和2007年初ipod shuffle更新版一样都是使用的带有金属质感的橙色。其他的颜色也要比第三代nano更加鲜艳，更具光泽。

MacNN还提供了其它一些细节，不过他们确信这款新一代的ipod一定会出现在周二的苹果大会上，并且随后马上会上市，并将带动新一轮苹果产品的全线更新。同时，他还提醒参与苹果暑期优惠的学生，虽然该活动截至到9月15日，但是4代nano不会参与该促销活动的。

Mac 便携电脑 20 年演变：1989～2009

2008-09-01T10:35:00.001+08:00

原译文出处：apple4us

今年秋季苹果就会推出新一代 MacBook 和 MacBook Pro ，新一代 Mac 笔记本的诞生也意味著着苹果的便携式电脑将走过20 年的风雨。让我一起来回顾这20 年苹果推出过那些便携式电脑。

Macintosh Portable 和 Outbound

早在 1982 年第一台便携式个人电脑 GRiD 就已经诞生。但苹果公司直到 1989年才推出第一台便携式个人电脑 MacintoshPortable 。这款便携式 Mac 巨大而且笨重（7公斤多），采用了铅酸蓄电池，当时售价为 7300
美元，市场反应也不好。当时的人们如果需要一台 Mac 便携式电脑，他们可以有另一种选择 —— Outbound 。

Outbound 也于 1989 年诞生，但它并非苹果公司的产品，而是第三方组装的机器。最初 Outbound
只有台式机，后来又推出了便携式的 Outbound 。第三方从旧的 Mac 电脑里回收 ROM 芯片，又从便携式 DOS PC那里学习外形设计。最终结合而成了这种 Outbound 。便携式 Outbound 折叠起来是就像一个完整的公文包。

PowerBook 和 Newton

1991 年苹果联合索尼共同设计了全新 PowerBook ，第一代 PowerBook 不仅彻底消灭了克隆商，也为 90
年代的笔记本电脑外型树立了标准。PowerBook解决了之前便携式电脑的键盘往前突出占用很大空间的问题，还在键盘的下方安装了滚动球，完全符合操作习惯。并且对电脑做了一个彻底的瘦身，便携式电脑开始向笔记本电脑过渡。由于苹果没有为PowerBook 的外形申请专利，其他制造商开始纷纷仿造其外形设计便携式 PC 。

苹果从1994 年开始推出 Newton系列个人数字助理（PDA），这一次苹果走在了“便携式”的前面，但却超越了当时的市场需求。此时的苹果在 PC行业的挤压下已经岌岌可危。

PowerBook G3

在苹果公司挣扎着生存的 90 年代中期，PowerBooks 系列产品成为公司最受欢迎产品。

1997 年乔布斯回到苹果之后，推出的第一件重要产品就是 PowerBook G3 ，这台笔记本采用了当时新技术和新颖的曲线设计。PowerBook G3 取代了苹果之前的三款电脑，只剩下一款 PDA 仍在销售。第二年年初 PDA 产品线被砍掉。在PowerBook G3 推出之后的三年里，一直是苹果公司的标准主打产品。两年之后，苹果以 iBook
品牌推出了另一个系列的消费笔记本电脑。

PowerBook G4 ，iBook 和 MacBook Pro , MacBook

乔布斯在 2001 年又推出了新一代超薄钛合金 PowerBook G4，正式这款产品让苹果在互联网泡沫破灭时幸存下来。这款产品也一直被拿来当作苹果的产品代言，以展示苹果的技术和设计能力。

2003 年苹果推出了 PowerBook G4 产品线，有12、15 和17 英寸三个版本，新的 PowerBook G4
采用铝合金外壳替代了钛合金外壳，外形变化不大。这一系列的 PowerBook G4 又维持了三年的时间， 06
年时被采用英特尔处理器平台的 MacBook Pro 取代。同时 iBook 系列产品也逐步被 MacBook 取代。

iPhone 和 MacBook Air

2007 年苹果推出的 iPhone实际上也是一部便携电脑，但它采用了全新的迷你触控界面，无需指针和窗口控制就能够进行全电脑环境操作。08 年 1月苹果的笔记本产品线又新增了一款转为便携设计的 MacBook Air ，身材轻薄但却功能强劲。同时它还采用与 iPhone的触控技术完全相同的触控面板。

不久之后我们将能看到，苹果的便携电脑在 20 个年头的时候能为我们带来什么惊喜。我们相信下一代 Mac
笔记本电脑最重要的一个趋势是：把 iPhone 放进MacBook 当中，或者可以说是多点触控技术与笔记本电脑的融合。

国外常用的10款博客系统概揽

2008-08-30T16:13:00.000+08:00

编译：4EB Studio 原文出处：SMASHING MAGAZINE

选择一款博客系统软件是一件非常艰难的事情，特别是对一个新手来说。在当今的网络世界中，有太多的博客系统软件和CMS(内容管理系统)可供选择，因此如何从中挑选一款适合你自己类型的博客系统不是一件容易的事情。

在选择博客管理系统软件的时候有很多方面需要考虑，比如：

▪ 程序语言

虽然许多博客平台使用PHP或Rails语言，但是你还是可以找到你想要的程序语言。

▪ 你需要哪些功能

你所选择的博客系统软件完全取决于你需要使用的博客类型。一些博客系统专门针对新手，而一些是专门针对开发和设计人员的。因此你需要选择适合你自己的。

▪ 博客系统软件的社区大小

如果一个博客系统软件对于单独的一个博客体系来看足够大，但是相对于另外的博客系统社区相对小很多，而且活跃度相对较低的话，那么就应该选择更具社区活跃度的软件。开发社区中更多的活跃度和使用者意味着该软件代码的改善度也更快。

▪ 博客系统软件的新旧程度

博客系统软件的新旧程度意味着该博客平台的成熟度。全新开发的博客系统稳定性会较差，而且存在更多的bug。

▪ 你是否计划未来拓展你的博客

如果你考虑未来在你的博客上增加像论坛、网店或其它功能的模块，那么你就应该在最开始就选择具备这些功能的博客系统软件。

你所选择的博客系统软件对你的博客具有相当大的影响。你必须在最开始就选对才能够避免日后更换系统时带来的不必要的麻烦。下面介绍10款非常流行的博客系统软件，并列举各自的优势和劣势。

1. Wordpress

Wordpress是目前最为流行的博客平台。它具有非常直观的网页结构的安装模式，适合各个阶段的使用人群。

Wordpress社区可以说是博客系统软件最主要的财富来源。它有一个非常庞大的、极具影响力的、针对开发者和使用者的社区，用户可以在这里找到任何主题和插件。而且，你可以任意扩展软件，许多网站和服务商都使用基于Wordpres的代码进行软件开发。Wordpress还集成了Akismet，一个最有效的博客软件防垃圾系统。

Wordpress对于一个新手来说，无论是安装还是下载更新都是十分容易，只需一键即可自动完成。学习使用Wordpress只需要很少的时间，如果新手遇到问题的话可以通过拓展文件进行查找解决。对于一个第一次涉足博客网站的新手来说，Wordpress已经相当完美了，而对于一个高级开发者来说，Wordpress可以提供具有延伸性的稳定的代码，让你的博客更加与众不同。

如果你想创建一个多博客系统，你可以查看Wordpress MU。Wordpress MU和独立博客系统Wordpress的代码标准是一样的，而且增加了一些其他的功能。

基于Wordpress的网站欣赏

2. Movable Type

和Wordpress作为最被广泛采用的博客平台不同，Movable Type更多的为高流量的博客网站提供更丰富的安装程序。这些高端安装程序包括（当然不仅限于）Huffington Post（网络上最流行的博客系统），Gawker blogs (如Lifehacker, Gizmodo等), BoingBoing以及dooce。

这些高流量的网站之所以使用Movable Type最主要的原因是它内建了多博客平台，而且只需一步安装即可实现。你可以快速创建你希望数量的博客，以及创建一个博客网络，例如Huffington Post和Gawker。

虽然Moveable Type就用户友好度来说落后于Wordpress，但是Moveable Type在交互界面和安装上做了很大的改善，而且近期迈出了最具成就的一步就是转变了一个开源的平台，这对于社区来说意义非凡。

Movable Type对于创建多博客系统或网络来说是个最佳选择，而且它可以帮助创造巨大的网络流量。

基于Movable Type的网站欣赏

3. ExpressionEngine

ExpressionEngine 是一款非常具有活力的博客平台，不过它不是免费的。ExpressionEngine最有特色的地方是它可以同时发布多个网站，无论是使用同一域名下的不同次级域名，还是直接使用多个域名。

你可以使用相同的代码基准进行不同域名的多网站开发。该款软件具有一个十分简洁的后台，让博客们可以轻易上手。开发者和设计人员喜欢ExpressionEngine是因为它的操作十分简单。

ExpressionEngine是一款面向创建多博客网站使用者的工具，但是任何人都可以轻松的上手使用该软件，这都要归功于它深思熟虑而且近乎完美的设计。受价$99.95，如果你只想创建一个个人博客网站的话可以下载它的核心版本EE。

基于Expression Engine的博客欣赏

Jesse Bennett-Chamberlain

Veerle Pieters

4. Drupal

Drupal并不是一个典型的博客系统软件。虽然它拥有一个庞大的社区而且很多博客都使用它作为博客系统软件，但是不仅仅是个博客软件。Drupal实际上是一个社区平台系统软件。

作为一个博客社区的系统软件，Drupal确实光芒四射。Performancing就是一个例子。无论你想创建一个独立博客网站还是多博客网站，Drupal都是一个不错的选择。

Drupal的另外一个亮点就是它的多功能模块性。它不仅具有充满活力的用户系统，而且还拥有很多社区友好功能，比如论坛、书籍（在"book"结构下中创建文件）以及可以随时追踪其它使用者的内容更新的tracker。

Drupal还拥有一个庞大的开发者和模块社区。利用这些模块可以创建任何形式的网站或者添加几乎任何功能。许多主流的大型网站都使用Drupal来发布他们的多博客以及用户社区。例如Performancing, Spread Firefox, The Onion, 以及Ubuntu等。

Drupal对于想要添加论坛或者其它扩展功能的博客创建者来说是一个非常棒的选择。

基于Drupal的博客欣赏

43 Folders

Abduzeedo

5. Textpattern

Textpattern 是一款十分简单的博客平台。它甚至没有集成WYSIWYG编辑器，取而代之的是Textile，一个简单的标记语言工具来格式化文本。

Textpattern相对于ExpressionEngine来说是一款非常简单的软件，不像ExpressionEngine那样提供很多的扩展特性。但是Textpattern是一款非常稳定和成熟的软件，它不是初级使用者的最好选择，毕竟它需要使用者懂得Textile语言，或者可以使用 html编写文章。如果你需要一个WYSIWYG编辑器，就必须安装额外的插件。

Textpatter有很多的主题模版和扩展工具，虽然开发者社区不像Wordpress那样庞大，但是社区忠诚度非常高。

Textpattern对于喜欢简单而且并不介意使用Textile的高级开发博客创建者来说是一个不错的选择。

基于Textpattern的博客欣赏

6. Joomla

Joomla是一个CMS，和Drupal有些类似。相对Drupal面向于社区平台和博客来说，Joomla更倾向于电子商务平台。

不管它们有多大区别，Joomla在易用性上和Drupal非常相像。而且Joomla拥有一个非常有名开发社区，提供许多扩展功能。

Joomla对于想要创建一个博客社区网站，并且加入电子商务功能的人来说是个不错的选择。

7. b2evolution

b2evolution是又一款既可以创建独立博客网站，也可以创建大型博客网络的系统软件。不过，b2evolution的开发社区比较薄弱，仅提供200来个插件（Joomla社区大概能有3400多个插件）。

虽然b2developer的开发社区并不庞大，但是它具有一个大有可为的代码基准以及很多人仍然在使用b2developer来壮大他们的博客和博客社区。

该博客软件的后台对于初级使用者来说极易上手。而且内建统计功能，这是大多数博客系统软件所不具备的。而且该软件还具有一个小型WYSIWYG编辑器，对于初级博客使用者来说非常不错。

8. Nucleus CMS

Nucleus 也是一款可以创建独立博客和多博客的软件。就功能和开发社区来说，它和b2evolution有些相像，具有一系列非常棒的扩展和有用的插件及主题，使用者可以根据需要个性化安装。

Nucleus比b2evolution的界面更为优雅和舒服，并且后台也简单易用。而且，Nucleus更新非常快。你可以在下载安装该软件之前在其测试网站上试用该软件。

Nucleus对于需要一款简单易用的博客系统来创建独立或多个博客的使用者来说是个非常好的选择。

9. Serendipity

Serendipity 是一款对于初级使用者来说非常友好的博客平台。它可以自动更新插件。而且其内建的评论模块是其它许多博客系统在没有安装插件的情况下所不具备的。

Serendipity使用了高性能的智能模版系统，并且使用了快速而简洁的PHP代码。如果你是一个博客新手，Serendipity提供了一个安装向导帮助完成软件安装。和b2evolution及Nucleus不同，Serendipity不提供多博客安装，不过你可以进行独立博客的多用户安装。

10. Mephisto

到目前为止，我们所提到的博客系统软件都是基于PHP语言的。而Mephisto博客系统是基于Rails语言的。Mephisto提供一个非常简单界面的后台，并且极具直观性。你可以通过内建的模版编辑器控制它的每一部分的外观。

Mephisto还没有提供更过的模版和插件来个性化博客外观。Mephisto更多的是一款博客框架软件。

对于有能力创建自己的主题和插件的网页设计人员和开发人员来说，Mephisto更多的是一个博客平台。而对于初级使用者来说，还是推荐使用Wordpress或者 Movable Type。这两款流行的博客平台可以通过插件和不同的主题更轻松的个性化博客。

BBEdit 9.0发布

2008-08-29T15:18:00.000+08:00

Bare Bones Software于本周四发布了其源码编辑器旗舰产品BBEdit 9.0。

使用mac系统的编程人员应该对该款软件并不陌生，甚至有些人会因为这款软件而专门购买了苹果机，足见其在源码编辑器领域的地位是不可动摇的。和其竞争对手Textmate相比较，因为BBEdit能够更好的支持中文，因此收到了中文麦饭们的追捧，今天又释放出了全新版本，看来远远超越Textmate的趋势不可阻挡。

BBEdit9对于前一版本8来说改进和增加了很多更强大的功能，包括rewritten项目管理，查找和文件比较功能的改进，还有全新的文本自动填充界面的完善。

全新的文本自动填充界面提升了用户友好性，和dreamweaver的文本填充一样，用户在写入代码的时候，文本填充会提供一个代码列表供用户选择。

在默认情况下，文本填充框会在用户键入后稍等片刻即出现。如果用户不想使用该功能的话可以在偏好设置里面关掉此功能，当使用的时候可通过菜单或者快捷键调用。

BBEdit的查找功能也有所变化和改善。9版本将查找（Find）和多文件查找（Multi-File Search）命令分成了两个，它们都可以在查找菜单中找到。和旧版查找对话框作为固定模块不同，新版的查找替换功能是非模块的，你可以在不同的窗口之间进行挪动和切换。

BBEdit在文件比较功能上的改进主要体现在提供了更多的比较结果。你可以看到两个文件非常细微的差别，也可以查看指定行或段落的差别。

BBEdit提供了一个全新的工具就是便签工具，使用者可以在上面写草稿以及任何需要的文字。它不需要保存，所有内容均会自动保留，甚至在你退出软件从新开启以后依然会看到之前的内容。

旧版本中的File Groups被Projects替代。新的项目窗口允许用户直接在文件中编辑文本，而且可以重命名，新建以及删除文件和文件夹。

新版本的BBEdit可以读取bz2格式的压缩文件。如果在你的任务窗口有一个压缩文件，你只要双击它，BBEdit将会自动显示其中的文件内容。而且，专为为开发人员设计的新特性允许用户在Xcode任务中进行查找。

BBEdit 9.0提供了对MobileMe的支持。如果你有一个MobileMe账号的话，你可以同步BBEdit的偏好设置以及Application Support文件夹，从而备份你的文件，Clipping以及所有通过BBEdit生成的数据信息。

新版本的BBEdit还提供了对VMWare Fusion 2.0的支持。如果你的mac机上安装了VMWare Fusion 2.0，那么你可以通过该虚拟机直接在windows上的Firefox, Opera, Safari, 以及Internet Explorer预览你的HTML文件。

BBEdit 9.0的其它变化包括修改了Ruby语言的支持，加强了对JavaScript的支持，更新了ObjC,Obj-C++和YAML语言模块，以及对Clipping的改进。

学习如何进行iPhone的网页开发

2008-08-19T16:06:00.002+08:00

原文作者：James Black 原文出处：NETTUTS

该文章主要讲述了如何通过使用javascript和一些Safari移动版的特殊CSS代码来设计专供iPhone和iTouch使用的页面和样式表。而且这些网页可以根据iPhone的手持状态显示不同的方向，垂直或者水平。

准备工作

在正式开始之前，我先准备了两个psd文件作为iPhone的页面样式。我使用图形作为页面背景和页眉，当然你也可以直接使用背景颜色设计这两个部分。其余的不使用图像的部分在水平和垂直切换的时候将会得到快速的加载。你可以查看我设计好的资源，或者你可以使用你自己的。不过请切记，这些网页都是专门针对iPhone或iTouch设计的，不一定会适用于日常使用的浏览器。如果你手头没有iPhone或iTouch这两个设备，你可以从苹果的官方网站下载iPhone SDK，它包含了一个iPhone模拟器。如果你希望通过标准的浏览器预览iPhone页面或者通过有条件的注释加载iPhone CSS和HTML，请使用以下代码：

<script type="text/javascript">

var browser=navigator.userAgent.toLowerCase();

var users_browser = ((browser.indexOf('iPhone')!=-1);

if (users_browser)

{

document.location.href='www.yourdomain.com/iphone_index.html';

}

</script>

上述代码解释如下：

第2行: 设置一个变量来检测使用者浏览器
第3行：如果当前使用是iPhone浏览器则分类给浏览器类型一个值
第4－8行：这是一个条件语句来重定向正在使用“iPhone格式页面”的用户，如果"users_browser"返回一个值的话（也就是说当前的用户正在使用iPhone或iTouch浏览页面）

下面的代码将使用html有条件注释来隐藏标准浏览器的代码。

 
<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->

<!--

place iPhone code in here

-->

<!--#else -->

<!--

place standard code to be used by non iphone browser.

-->

<!--#endif -->

第1步：建立HTML文件

我们现在已经知道了如何让用户指向你的iPhone页面，如果他们现在正在使用iPhone或iTouch。现在，我们将开始编写iPhone的HTML页面。下面的代码是区别于常规XHTML transitional文件的最主要的地方。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<title>My iPhone Page</title>

<link rel="apple-touch-icon" href="images/myiphone_ico.png"/>

<link rel="StyleSheet" href="css/iphone_portrait.css" type="text/css" media="screen" id="orient_css">

上面这段代码的意思是：

第1－5行: 这是标准的1.0 XHTML Transitional Doctype，没有什么特别的地方。
第6行：这行是针对iPhone和iTouch的特殊代码。它为设备的浏览器窗口设定了一个初始值。width=device-width设定了页面宽度和设备宽度相同。initial-scale设定了页面可放大倍数的初始值，maximum-scale设定了页面可以被放大的最大倍数。
第9行：这行的链接目标是页面的icon图标。该图标当用户将本页作为主页的时候将会显示出来。
第10行：iPhone样式表的外部链接。该样式表被定义了一个名为“orient_css”的id，可以通过javascript指向其，并且当设备的方向发生改变的时候通过改变css文件来适应布局。

第2步：创建页面布局

在加入执行方向感应的javascript功能之前，我们先继续完成剩余的HTML部分。先完成页眉的部分，然后开始进行body部分。在body元素里面，我们将添加onorientationchange=orient()代码。该代码用来实现"orient"方向感应的功能。

</head>
<body onorientationchange="orient();">
<div id="wrap">
<div id="header">
</div>
<div id="content">
<p>This is the main content area of the page. </p>
<p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>
<p>Some more filler text here to demonstrate the page.</p>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>

第3步：方向感应Javascript

在页面的head部分，你需要加入以下代码：

 
<script type="text/javascript">

function orient()

{

switch(window.orientation){

case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";

break;

case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";

break;

case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";

break;

}

window.onload = orient();

</script>

switch(window.orientation)用来完成body中的norientationchange()行为。这将查看当前的旋转方向是否和"case value"相同。如果返回的值是true，那么将继续执行冒号后面的事情。window.onload()将执行当页面第一次完成加载时的方向功能。

在每一个事件值之后，我们将使用javascript指向CSS文件的链接id。根据事件值的不同，0，90，或者-90（当然还有180，但是iPhone此时不支持），代表"垂直"或者"水平"的CSS文件将会被应用于link元素中的href。0代表垂直方向，90代表按顺时针旋转的水平方向，-90代表逆时针旋转的水平方向，180即使不被支持，不过要说的是它代表翻转过来的方向。

第4步：完成CSS

我们将创建两个CSS文件，一个命名为iphone_portrait.css，另一个命名为iphone_landscape.css，前者将作为默认的链接样式表。

 
body

{

background-color:#333;

margin-top:-0px;

margin-left:-0px;

}

#wrap

{

overflow:auto;

width:320px;

height:480px;

}

#header

{

background:url(../images/header.jpg);

background-repeat:no-repeat;

height:149px;

}

#content

{

background:url(../images/middle.jpg);

background-repeat:repeat-y;

margin-top:-5px;

}

p

{

margin:5px;

padding-left:25px;

width:270px;

font-size:10px;

font-family:arial,"san serif";

}

#bottom

{

background:url(../images/bottom_corners.jpg);

background-repeat:no-repeat;

height:31px;

margin-top:-5px;

}

上面是iphone_portrait.css文件的代码，非常简单，不过还是有几点要说明一下：

在"wrap"样式中使用"overflow:auto"以确保浮动元素均在wrap div内，从而保证页面的干净整齐。
页面的尺寸设置为宽320，长480，以确保页面元素均在wrap div内。

下面的代码是iphone_landscape.css文件的代码。和iphone_portrait.css唯一不同的是背景图片、wrap尺寸的长宽调换以及相应的空白边改变。

 
body

{

background-color:#333;

margin-top:-0px;

margin-left:-0px;

}

#wrap

{

overflow:auto;

width:480px;

height:320px;

}

#header

{

background:url(../images/l_header.jpg);

background-repeat:no-repeat;

height:120px;

}

#content

{

background:url(../images/l_middle.jpg);

background-repeat:repeat-y;

margin-top:-5px;

}

p

{

margin:5px;

padding-left:25px;

width:370px;

font-size:10px;

font-family:arial,"san serif";

}

#bottom

{

background:url(../images/l_bottom_corners.jpg);

background-repeat:no-repeat;

height:37px;

margin-top:-5px;

}

如果你是用的是我设计的背景图像，那么你垂直方向的网页现在应该和下面这张图一样。

这是水平方向的样子，看看是否一样呢？

接下来要做什么？

现在你已经完成了一张具有iPhone和iTouch格式和样式的页面，那么接下来还可以作些什么呢？好的，如果你的页面不仅仅是一个网页，你可以尝试用Joe Hewitt来验证你的IUI。Joe Hewitt是一个框架模型，可以确保你的页面看起来更像iPhone或iTouch的原生应用程序。而且，必须切记，你需要制作3个不同的CSS文件，一个垂直的，另外两个都是水平的，一个是顺时针旋转的页面，一个是逆时针旋转的页面。好了，快点动手试试看吧。祝你好运！

35款超炫商业名片设计欣赏

2008-08-14T22:55:00.002+08:00

当我第一眼看到这些商业名片的设计的时候，真的令我很诧异且打开眼界，不知作为设计师的你是否会从中得到一些灵感和启发呢？

Eric Kass | design by funnel.tv

Heads Inc | design by headsinc.com

Melvin | design by www.jenimattson.com

Thielen Designs | design by thielendesigns.com

Diesel Design | design by dieseldesign.com

Promptt | design by promptt.com

National Greyhound Adoption Program | design by lauriedemartinodesign.com

Steven Belkowitz | design by lauriedemartinodesign.com

Kinos Aarau | design by heinz wild

Digitopolis

Actual Size | design by actualsizecreative.com

How’s my designing ?

Joe Duffy | design by duffy.com

Richard E. Smith

Vorderman Photography | design by oneluckyguitar.com

Manicurist Card

Sensus Design Factory

Front :

Back :

The Church

Ben Grosz | design by Ben Grosz

Cehovin Eduard

Mass Envelope Plus

Marian Bantjes | design by bantjes.com

Coffee Industry

Design Your Life | design by design-your-life.org

Ed Fella

Space 150 | design by space150.com

Thomas Wood Products | design by johnstonduffy.com

Tania Hannaford

Kaypee Soh

Sack Wear | design by whois3.com

Austin Walsh | design by konnectdesign.com

B. Uhrig & Son

John Bragg | design by funnel.tv

浅谈博客网页设计

2008-07-25T18:01:00.000+08:00

SMASHING MAGAZINE自前几周发布了《网页表单设计调查报告》之后，今天又为我们带来了《博客网页设计调查研究》。该份调查研究报告秉承了上次的风格，通过详尽的数据和客观的分析为网页设计和开发人员分析了当前流行的和已经过时的博客网页设计解决方案。下面天兔就为大家呈上这篇精彩的文章。

既然我们想要撰写一份尽可能客观的调查报告，我们使用了Technorati Top Blogs上提供的博客资源，并对其中的50个最流行的博客进行分析。

博客设计调研报告

我们设计了30个关于博客设计的问题，并对每个问题分别进行回答。

我们从Technorati前50排名中排除了那些社交网络和人为造势的博客网站——例如通过Wordpress主题进行回链的那些博客。而在SMASHING MAGAZINE所提到的那些备受赞誉，通过各种CSS花样设计的博客网站我们将在下周进行讨论。

请注意：不要将以下的调查结果作为你的博客设计方针。它们仅能提供给你一些建议，哪些解决方案相对于另一种解决方案好些而已。你需要根据你的博客具体内容进行权衡。

1. 布局

让我们从这些最流行的博客网站的布局设计开始。是两栏布局好还是3栏布局好？布局是否居中？布局是固定的，流动的还是弹性的？是否还在使用表格？在这个部分，我们将回答所有这些问题。

1.1. 需要几栏？

应该使用两栏布局还是三栏布局这个问题应该是个原则性的问题。不过，在我们的调查报告中似乎找不到任何结果，究竟该使用两栏还是三栏呢？通常，这个设计问题基于你的博客内容来定。在某些情况下，很难在使用两栏布局设计主要内容和次要内容这个问题上找到均衡点。有时，你需要将次要内容或者说是第二栏再进行切割，变成两个部分，而且这种情况是非常普遍的。

以上两种布局的设计准则就是让内容看上去清晰、易懂。使用4栏或者4栏以上的布局通常不是个好主意。

根据我们的调查报告显示：

▪ 58%使用了三栏以上的布局。(如：TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),

▪ 42%使用了2栏布局。(如：Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

TPM 使用了多栏布局。排名靠前的博客网站中58%都使用了同样的布局设计。

似乎前50名的博客网站已经足够让我们发现独特的布局解决方案。Drudgereport 使用了我们称之为“anti-layout”（没有经过任何修饰、白底、默认的字体和链接颜色）的布局设计。TPM则有时侯使用2栏，有时侯使用3栏，甚至有时侯使用4栏的布局设计方式。而且我们对于TPM的文章标题为什么不能点击的这种设计方式的原因还不得而知。

1.2. 居中还是左对齐？

事实上，几年前居中的设计方式就已经变得很普遍了，通常此种设计是解决网站浏览者所使用电脑屏幕解析度大小不同的最佳解决方案。

ReadWriteWeb 使用了居中布局。根据我们的调查显示，94%的博客网站使用了居中布局设计。

1.3. 固定的？弹性的？还是流动的？

说实话，我们真没有想到固定布局会有如此强的趋势。而且值得注意的是，这50个顶尖博客网站没有一个使用弹性布局的（页面的宽度随字体的大小而改变，即相对于字号而设计元素的宽度），并且只有一小部分网站使用了流体元素（根据浏览器窗口的大小变化而变化）。

▪ 92%的博客网站使用了固定布局。

▪ 8%使用了流动布局或部分使用了流动布局元素。(例如Engadget, Smashing Magazine, Gigazine, Liars).

流体布局可以更好的适应用户界面，而固定布局可以让设计人员不用依赖字号和浏览器窗口大小而进行页面设计。

流体布局的主要缺陷是当使用宽屏的时候页面的宽度会产生问题：行宽变得过长。

1.4. 固定布局的宽度？

既然我们发现了固定布局这个趋势，那么我们就来进一步观察这些布局，并且归纳出他们的一些通性。我们来看看对应设计中通常使用的#container或#wrapper这两个容器的布局宽度。

▪ 9%使用了小于800px的宽度(PostSecret, Seth Godin, Google Blog, BeppeGrillo.it),

▪ 15%使用了801到900px的宽度(Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),

▪ 20%使用了901到950px的宽度(Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),

▪ 56%使用了951到1000px的宽度(ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

结论：951到1000px将成为固定布局的设计趋势。

1.5. 内容和侧栏的比例？（使用固定布局的情况下）

如前所述，每个页面布局都需要至少一个侧栏，这个栏目将包括一些次要内容和网站的导航。但是，主栏和侧栏的比例应该是多少才能保证读者的阅读舒适度呢？

BoingBoing的页面宽度是870像素，主要内容是550px，占整个页面宽度的63％。

根据我们的调查报告

▪ 96%的网站使用了至少一半的宽度显示主要内容。(例外: CopyBlogger (48％), SlashFilm (48％))

▪ 54%使用了50％–60%的页面宽度显示主要内容。(Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)

▪ 46%使用了60–70%显示主要内容(ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)

▪ 平均来看，58％的页面宽度用来显示主要内容

1.6. 使用CSS布局还是表格布局？

很明显，几乎所有流行的，每天都需要随时更新的博客网站都在使用CSS布局，这样可以更容易的更新内容，并且减少页面的加载时间。

▪ 90%的网站使用了CSS页面布局

▪ 10%使用了表格进行布局或者在CSS中加入表格布局(PerezHilton, Neatorama, CNN Political Ticker, Beppe Grillo, TreeHugger).

2. 排版设计

内容至上。这一准则不管是对普通的网站还是博客网站都是适用的。如何让读者能够舒服的阅读网站内容或者至少能够浏览一下文章标题，这是设计师的一个重要工作。如何获得最好的内容阅读舒适性？该使用什么字体？适用多大的字号？我们的调查报告将为你的设计决策起到抛砖引玉的作用。

2.1. 浅底深字还是深底浅字？

正如所期望的，98％的被调查的博客网站都使用了白底深色调字。只有PostSecret 使用了黑底和浅色调的字。当然，到底该使用哪种设计方式还要取决于你的网站主题。

在排名前50名的博客网站中，只有PostSecre使用了底和浅色调的字

2.2. 每行需要多少个字？

确保最好的可读性的前提是确保阅读的舒适度。有的调查研究报告指出最合适的行宽是52－68个字符（包括标点符号和空格）。也有的研究表明行宽不管是多少都不会影响阅读的有效性。既然没有确切的标准提供，那么设计师们所使用的行宽也不尽相同。

为了测量每行最大的字符数量，我们使用了浏览器的默认设置和默认样式表。

▪ 10%的网站每行65-74个字符(PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped),

▪ 18%的网站每行75-84个字符(Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm),

▪ 34%的网站每行85-94个字符(Lifehacker, Huffington Post, Kottke, ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger),

▪ 18%的网站95-104个字符(Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land),

▪ 16%每行超过105个字符(Engadget, TechCrunch, GigaOM, Wired, TMZ).

基于以上调研，我们建议最常用的（不见得是最用户友好的）行宽是80－100个字符。

非常有意思的是我们发现没有一个博客使用两端对齐的文本排列方式——100％的博客网站都使用了左对齐的文本排列方式。

2.3. 正文文本使用的主要字体？

Sans-serif₁字体成为了非官方标准的正文字体，特别是用于在线设计上。曾经提出该建议是因为过小的字体出现在屏幕上会显的过于凌乱。下面我们看看在这些流行的博客网站上是如何体现这项建议的。

▪ 34%的博客网站使用了Verdana (sans-serif)作为正文字体。(A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),

▪ 24%使用了Lucida Grande (sans-serif, 包括基于Mac OS X的该款字体)(Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),

▪ 18%使用了Arial (sans-serif)(ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),

▪ 14%使用了Georgia (serif)(Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),

▪ 6%使用了Trebuchet MS (sans-serif)(Andrew Sullivan, Seth Godin, Postsecret),

▪ Helvetica Neue (ProBlogger)和Times New Roman (TPM)只被使用了一次

ars technica 使用了每行85-94个字符，12号Verdana字体作为正文字体。

2.4. 正文字体的大小？(假设以em作为衡量单位)

字号越大，读者越容易阅读。但是，如果如果字号过大，读者就必须不断的滚动屏幕，而且眼睛要不停地从一个地方跳到另一个地方。那么最合理的字号应该是多大呢？

下面是基于调研得出得结论：

▪ 34%的网站使用了12号字(SearchEngineLand, TUAW, Mashable, ars technica, Engadget, Smashing, DoshDosh, TreeHugger),

▪ 30%的网站使用了13号字(Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, Seth Godin, Google Blog),

▪ 14%的网站使用了14号字(TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, ProBlogger),

▪ 12%的网站使用了11号字(A List Apart, Kottke, Neatorama, Dooce, TechCrunch, Dailykos),

▪ 4%的网站使用了15号字(Scobleizer),

▪ 剩下的三个网站各使用了10号字, 16号字和17号字。

Zen Habits 使用了13号，Lucida Grande字体作为正文字体。大多数博客网站使用12号Verdana字体作为正文字体。

2.5. 标题使用的主要字体？

既然sans-serif通常作为正文字体使用，那么设计师应该会考虑使用serif作为标题字体来强调文章标题。是否真的如此呢？

▪ 30%的博客网站使用了Arial (sans-serif)(CNN Political Ticker, Scobleizer, TPM, Crooksandlliars, Joystiq, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger),

▪ 22%使用了Georgia (serif)(A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing),

▪ 8%使用了Lucida Grande (sans-serif)(Tuaw, ThinkProgress, Lifehacker, Crunchgear),

▪ 8%使用了Helvetica (sans-serif)(Zenhabits, Mashable, ars technica, Smashing Magazine),

▪ 6%使用了Verdana (sans-serif)(Blogoscoped, Neatorama, DailyKos),

▪ 6%使用了Trebuchet MS (sans-serif)(Slashfilm, Postsecret, Seth Godin),

▪ 4%使用了Helvetica Neue (sans-serif)(CopyBlogger, ProBlogger),

除此之外, Calibri (SearchEngineLand), American Typewriter (Valleywag), Lucida Sans Unicode, Franklin Gothic Medium, Tahoma (TechCrunch) 以及根本没有标题(Kottke)均被使用了一次。

Darren Rowse使用Helvetica Neue作为Problogger的标题字体。大多数设计师倾向于使用Arial和Georgia字体 (52%)。

2.6. 标题字体要多大？

最后，让我们看看标题字体的大小。标题字体越大，越容易引起读者的注意。但是，如果标题过多的话，会使读者很难进行选择该阅读哪条。因此，使用标题字号的准则就是：如果首页上的文章很多的话，要减小标题的字号，而通过其它的视觉特效来突出标题，比如使用极易抓眼球的颜色。

▪ 24%使用20-22号字(BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb),

▪ 22%使用23-25号字(CopyBlogger, ProBlogger, Lifehacker, Mashable),

▪ 22%使用17-19号字(Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo),

▪ 16%使用14-16号字(YankoDesign, Dailykos, ars technica, Seth Godin),

▪ 6%使用26-29号字(Engadget, GigaOM, Wired, Dooce),

▪ 没有网站使用10-13号字来突出标题。

而且没有网站使用30-31字号; Huffington Post 使用32号字，Zenhabits 使用34号字，Kottke 根本没有标题。Smashing Magazine使用了这些被调查网站中的最大字号：44号字。

我们总结出来似乎最有效的标题字号介于17到25号字之间。

总结

让我们简短的总结一下这次调查结果的第一部份。

▪ 大的博客网站需要多栏布局(通常是3栏) (58%);

▪ 页面布局通常是居中的(94%),

▪ 布局通常是固定宽度的(基于px单位) (92%),

▪ 固定布局的宽度通常在951至1000px之间 (56%),

▪ 58%的页面宽度用来显示主要内容，

▪ 通常使用基于CSS的页面布局(90%),

▪ 页面北京是浅色调的，正文文本是深色调的(98%),

▪ 最常用的（并非最友好的）行宽是80到100个字符,

▪ Verdana, Lucida Grande, Arial以及Georgia是最常用的正文文本字体(90%),

▪ 正文字体通常是12到14号字 (78%),

▪ Arial和Georgia通常用来作为标题字体(52%),

▪ 标题字号通常是17到25px。

注释1：在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和 Serif，打字机体虽然也属于 Sans Serif，但由于是等宽字体，所以另外独立出 Monospace 这一种类，例如在Web中，表示代码时常常要使用等宽字体。Serif的意思是，在字的笔画开始及結束的地方有额外的装饰，而且笔画的粗细会因直橫的不同而有不同。相反的，Sans Serif则沒有这些额外的装饰，笔画粗细大致差不多。

ipod touch 2.0 使用初体验

2008-07-12T02:10:00.002+08:00

刚刚实在等不及iTunes网店更新，在坛子里看到放出的iPod1,1_2.0_5A347_Restore.ipsw链接，赶紧下载试试看。

下载完后进行安装，时间稍微长了点，冲个澡回来很合适。

哇，安装成功了，版本号已经变成了2.0

下面要好好体验一下传说中的2.0软件。

先看看在iTunes上的界面。菜单栏多了一个“应用程序”。通过同步你就可以将app store上获得的软件导入touch里面。

信息栏也有里的内容也有了变化。首先出现了MobileMe的选项。

点击“现在设置”按钮以后会直接进入MobileMe数据同步帮助页面

在信息栏里面还多了一个“mail账户”同步选项，它会自动提取你电脑里面的apple mail账户，你可以选择其中的几个或全部。

iTunes的界面我们先看到这里。下面就是重头戏，看看touch上的新功能。首先不得不提的一个重要新功能就是touch内置的截屏功能，以下图片都是通过此功能实现的。

按住睡眠键＋home键即刻完成截屏动作。将图片导入电脑的方法有两种：1）电子邮件发送。不过此种方法貌似只能一张一张的发，我没有具体试。感觉麻烦。2）使用 iphoto。不过需要说明的是，我的mac默认的照片编辑器是Aperture，所以当我链接上ipod的时候，Aperture就自动打开了。

从上图可以看到，aperture识别出了我的ipod，不过不知为什么，aperture右侧的浏览区域不能现实出样图。（和touch截屏格式为PNG有关？？？）而且也无法导入到资源库。于是改用iphoto试试看。

iphoto也认出了touch，不过右侧还是没有预览图。不过庆幸的是它可以点选，也可以导入。

好了，截屏功能看完了，下面具体来看看touch 2.0固件的其它新增功能。

首先看看更新到2.0以后touch界面的样子。

多了一些app，特别是出现了App Store，这样你就可以直接在touch上获得各种app了。我试着点击了一下，出现了下面的画面：

然后选择AIM点进去：

再点击右上角的FREE，出现了install的按钮。

点击install，出现了账号登陆提示：

输入好以后就可以下载了。

看介绍说计算器的界面也变了，于是点击进去看看

果然是有了一些变化，不过要是功能能再多一些就好了。

下面看看设置选项有了哪些更新。

多了一个获取新数据的选项，打开看看。

这应该是一个定时从服务器更新的设置。看来老乔是要狠推MobileMe服务了，.MAC可还真没这么好命啊。

接下来打开通用选项看看里面有什么变化。

看，多了一个定位服务。

下面又看到一个“限制”选项，打开看看。

看来2.0固件在数据保护功能上有了提高。

接下来就说众望所归的语言界面了。

看，第一个就是简体中文，往下滑动，最后一个是繁体中文。或许，2.0对华人群体来说是一个伟大的升级。

点击中文简体右侧的按钮出现了上面这个界面，原以为只有iphone才会支持手写，看来touch除了不能打电话，真的不弱于iphone啊。

下面赶紧来体验一下吧。我选择了发送邮件来测试中文拼音输入、中文手写，邮件查看中文的性能。

打开新建邮件页面，输入收件人地址，我选择了自己给自己发一封邮件。

下面要输入主题了，我用中文的主题。点击左下角的地球，出现了手写输入的界面

试着用食指写了个“测”字。

哇，识别能力还真不错。换拼音输入个“试”字。

首栏没有我要的字，点击右侧的箭头，出现了下面的画面。

看，2.0的中文输入法也不赖啊。下面在邮件正文中用联想拼音输入“测试”两个字。

看，着就是内置的联想拼音输入法，也挺方便的。

邮件写好了，发送。下面就要看看2.0版是不是能正确显示中文了。

看，收到了。这是邮件的标题，已经能正式显示中文了。再看看正文。

恩，还是可以正确显示中文。看来2.0真的是华人的福音啊！

最后，让我们一起看看从app store下载的软件同步到touch后的效果。为什么最后才上这个，因为这既是重头戏，而且，从mac同步到touch上着实费了我不少时间啊。

先看看界面，我把touch的免费app全都下载了，所以同步慢也是可以理解的。

试用了一些，还都可以用，不知道那9.95刀是用来干吗的？

这是facebook，界面很简单，只提供个人最简单的信息，其它没什么了。

汇率表，这个还挺实用的，而且是实时更新的。

其它的就没一个一个试了，很多其实我也没整明白是干吗的呢，等有空细细研究一下。

最后用remote这个2.0的招牌功能（之一）来压轴吧。

先看看touch上的remote界面

点击添加资料库，出来一个配对密码，下面还有具体的使用。注意：使用这个遥控器的前提是touch和iTunes必须在同一个无线网络里面。

这时iTunes那边也会蹦出一个要你输入密码的界面

点击确认即完成配对。

将touch上的密码对应输入后，touch就会认出mac上的itunes库

我选了一张Natasha Bedingfield的专辑试了一下。

在touch上找到这张专辑，然后点击其中的一首播放。这时iTunes就出现了这张专辑的播放列表，并且同步播放刚才选择的歌曲。

、

同时在iTunes的播放列表上会出现remote的图标

再看touch这边，也出现了播放界面

以上就是今天对2.0固件的初体验，整体感觉不错。唯一一点的疑问就是那个9.95刀是用来干吗的？刚刚我断掉touch然后再接上，开始的时候一直处于寻找 iTunes Store的界面，我还担心说是不是要我付费。后来还是进入了我的touch同步界面，并没有提示付款。看来这个谜团要明后天解开了。

日后我有更多的发现还会继续跟进。不知水果迷们使用2.0后的感受又是什么呢？

ipod touch 2.0已经放出，等待store在线更新。。。

2008-07-11T20:45:00.003+08:00

刚刚发现apple美国官方网站的ipod touch页面已经更新了，而且还正式发布了ipod touch 2.0（iphone 2.0 for ipod touch）。

天兔把手中的touch进行了恢复（以前破解过），然后iTunes上出现了2.0更新提示

不过目前网上商店的链接还没有做好，所以还无法升级。

需要说明的是，touch升级到2.0需要支付9.95美元的费用，而iphone用户是免费的。

第一时间体验mobileme

2008-07-11T11:41:00.001+08:00

按照苹果官方的时间，按理说现在应该已经可以使用mobileme了，不过还是很不稳定，偶尔能进去。刚才一不小心，天兔就进去了。

这是登陆界面，看上去很舒服。

输入www.me.com，直接进入的是idisk界面

在账户设置里面多了一个增加个人域名的选项

其它倒是没有什么太大变化，因为还没有正式上线，所以有些不稳定。目前天兔在本地还是连接不上，只能使用网页浏览。

iTunes Store增加了中国区了！

2008-07-10T21:06:00.001+08:00

的好消息真的是接连不断啊。刚刚发现iTunes Store增加了中国区了。天兔将所有资料都改成中国的，成功。不过重新进入store以后，发现中国区只有App Store，其它还都没有。看来如果想购买音乐的话还是要用美国或者其它可用国家的信息了。

今天在My Store上出现了"China"，不过语言界面还是英文的。估计以后会变成中文的吧。

进入账号以后只有App Store一个栏目，其它都没有，估计日后会跟进的，只能翘首企盼了。

第一时间体验iphone App Store

2008-07-10T21:03:00.001+08:00

刚刚系统提示我更新iTunes,更新完以后发现多了个“应用程序”的图标（可能以前就有了吧，一直没注意都），原来iphone App Store开啦！

看了看，上面有很多的app，而且很多都是免费的，看来这回不用再使破解版的touch了。

这是专供touch的软件页面

试着下载了一个

这是接受条款

提示下载成功

出现在了应用程序里面不过touch的更新程序还没有放出，现在貌似还不能导入，等明天了就。

明天3G iphone就要全球发布了。水果店就是会弄些挑高潮的噱头活动，果然不一样。可惜身在国内的我无法感受到那样的场面啊。只期待下周三里屯店开幕水果店为我们水果粉丝献上的精彩节目了。

使用纹理和图案作为背景的网站赏析

2008-07-10T17:02:00.004+08:00

编译：四眼天兔工作室资料来源：SMASHING MAGAZINE

纹理和图案远比我们想像中用的更多。这是为什么呢？因为它们在设计中通常都是用来做背景，配合全局设计，替代标准的背景颜色以及创造更吸引人的氛围。但是，它们从未成为过真正的主角。事实上，木质纹理似乎成为目前的一种流行的设计素材。但是我们并不认为木质纹理是一个新趋势，毕竟它已经使用了很多年了。不管怎样，不可能什么设计都采用木质纹理。不过还是有很多其他的选择，如：织物图案、拼贴、地质、岩石、墙壁、砖块、编织、纸板、陶瓷、衰减、金属铁锈、老照片、塑料以及玻璃等。

在本文中，我们将向读者展示一些有用的纹理和图案网站。我们旨在告诉设计者们，除了木质纹理，还有很多更好的纹理可供设计之选。这些背景图片有些是照片，有些是用PS或者illustraror设计的插图。

拼贴,图案

如何创作一款拼贴图案？

事实上，这是一件比想像中容易的多的事情。例如，你可以登陆BgPatterns，一个免费的“拼贴背景设计”网站，它拥有很多的基本样式库，你可以在这里搜索、创建、评价以及分享各种图案。你可以从68款图像（卷曲、星星、花朵、心、符号、树木等）中挑选一款，然后为你的拼贴图案选择一个颜色，网站将自动为你生成你想要的样式。

你也可以应用一些效果（杂色、粗糙等），并且可以随心所欲的进行旋转。你可以轻松自由的创造你的拼贴图案，下载并且储存。

下面是一些已经用于一些网站的缩略图:

现代网站设计中的拼贴图案展示

The Paisley Farmhouse 使用了非常好看的复古包装纸样式作为背景图案

Renegade Latino 使用了黑色的拼贴图案作为背景。

t!agOliveira 使用了一个几乎看不出来的黑色图案作为背景。

Uniquexports 使用了拼贴背景的在线商店网站。

Noblanco 该网页将背景图案放在了左侧。

General Robots 使用了星星的拼贴背景。这还是一个在线商店。

Booreiland: 使用了经典的蓝色、粉色和黄色设计的网站。

Warfield.net 使用了经典的壁纸图案

Designbyfront: 使用了同样的壁纸图案，但是颜色不一样。

Falko Seidel 一款你可以在老式针织衫或者室内壁纸上看到的图案。

Latviešu Dziesmu svētki 传统的壁纸拼贴图案。

Evernote 在商业网站上使用了一个奇特的背景图案。

Anthony Clark 在页眉使用了一款退色样式背景图案。

René Drieënhuize 使用了经典的背景图案样式。

Eden Organix 使用了经典壁纸样式的网络商店。

MiniIcon 很小的内容区被一幅背景拼贴图案包围着。

Paul Burd 使用了相同的概念。

图像和纹理

地表

Outdoor Italia 使用碎土壤作为背景图案。其他的插图很好的结合背景进行设计，特别是右侧走动的蚂蚁，真的是设计的太棒了。

岩石和墙壁

Soyrosa 使用活泼的条纹石作为背景图案

Pikaboo.be 使用坚硬、暗调的岩石纹理和独特的垂直排列作为背景图案。

Elliot Jay Stocks 使用了岩石纹理作为背景，而且该网站还提供一些如何制作纹理背景图案的教程。

Nolgraphic 使用了一幅墙壁的照片作为背景，看上去非常与众不同。

Corner Stone Americus 是一个教堂的网站，使用了车库摇滚风格。

砖瓦

uturn 使用了砖块作为背景图像。这个背景图案与“和街头颓废派一起工作”的网站主题非常贴切。

Hubltd.com 使用了干净的白色砖块作为背景。

插画

Tennessee Education 使用了小学练习本的样式作为背景图片，看上去非常活泼。

Springtime in Tennessee 和上面属于一个网站

Dara’s Garden 使用漂亮的花朵作为背景图案，生动活泼。

Dean Oakley的设计不长，但是非常宽，你需要使用滚动条才能看全。不过它的背景图案使用的都是重复的插图。

DivVoted 整个页面都使用了一个活泼的背景图案。

织物

the brainwashfactory 这是一个用织物纹理做背景的网站。注意页眉处有缝纫线。

Design Sponge 致力于家装设计，所以它的背景也使用了织物纹理。

Scouting for Girls 不仅背景使用了缝纫效果的图案，就连按钮和链接也使用了织物纹理。

纸张和纸板

Raufaser 使用了旧文件纸图案作为背景。

A-Falange.net 使用了旧纸张作为背景。

RedBull 使用了破旧的纸板作为背景。

The Brown Corporation 使用了相同的概念。

陶瓷

The Letter 使用了陶瓷纹理作为背景主题。

褪色、杂尘和车库摇滚

BrightCreative: 使用了古老的退色宫廷花纹图案作为背景。

Decay of Intent: 网站的名称体现了Alessandro Cammarota个人档案的布局设计风格。很明显，背景用的是退色的图案。

老电影

0hara 使用了老电影风格背景。

铁锈

Riders network: “在公路上疾驰的摩托车”，这是一个摩托车爱好者俱乐部，怪不得背景使用的是金属铁锈风格。

Life Style Sports 使用不对称的金属铁锈图案作为背景。

木纹

ChamaDigital 使用木纹主题，干净而且漂亮。

Kyle Haskins 精致的木纹背景突出了整个网站的内容，干净，而且极具吸引力。

Robert Strickland 使用木纹作为背景，整个网站的颜色也和背景相协调。

Slabovia.tv 融合格纹仿古设计和木纹图案。非常吸引人。

Highresolutiontextures 使用了高清晰度的纹理和木纹作为背景图案。

Built by Buffalo 高清晰度的木纹背景。

Oahu Hawaii 一个地产网站，融合了车库摇滚、仿古和木纹风格。

Rafael van der Vaart: 使用了木纹背景。

Does.ch 融合了木纹、织物、旧报纸以及车库摇滚风格。

WebRevolutionary 使用了黑白木纹。

soulBlog 使用了木纹背景，链接和导航的颜色和主题很协调。

Skitnice 使用了木纹图案，但是没有作为整个网页的背景，而是作为正文内容的背景。

Paul Wallas 在木纹图案上使用了光照效果。

Perfect Order 一个日本的在线商店，使用了木质纹理背景。

Bfrancesi.com 使用了暗调的木纹背景。

Anthonyfairweather 一个设计师的网站，看上去她很喜欢黑色的木纹。

Brianwebb.org:这是一个融合了两种流行背景主题的网站。头部使用了木纹，尾部使用了拼合图案。

浅谈网页注册表单设计模式（二）

2008-07-09T17:45:00.002+08:00

编译：四眼天兔工作室资料来源：SMASHING MAGAZINE

上周我们发表了网页表单设计调查报告的第一手资料的一部分。今天我们来一起看看第二部分的内容。

3. 表单的功能

在第一部份，我们探讨了注册链接和注册表单的位置以及视觉表现。但是，无论你的表单设计的多么漂亮，如果它缺乏功能性，无法正常运作的话，表单填写完整率还是会很低的。下面就让我们一起来探讨一下注册表单的功能性以及典型的问题及其解决方案。

3.1. Hover, active, focus —— 这些是否有效的使用了？

为了改善表单的完整填写率，设计师似乎都在尽量避免使用各种容易分散用户注意力的设计，而且更多的引入了简洁、不容易产生歧义的网页表单。这就是为什么网页表单的视觉效果都使用设计的非常合适的原因。

▪ 84%的网页表单没有使用任何hover, active或者focus效果。

▪ 16%使用了非常细致的hover效果。

3.2. 帮助，支持，工具提示：静态的还是动态的？

有时，输入区域的标签描述的并不具体，使得用户无法充分理解他们需要提供的充足信息。用户名允许使用哪些字符？密码可以设置多少位？所提供的E-mail地址是否自动成为登陆账号？

可以考虑使用工具提示功能帮助用户缩短填写时间。设计师们通常会使用一些不是很明显的但是描述很清晰的提示标记。

57%的网页提供静态帮助支持：这些提示标签出现在输入区的后面，在设计的时候已经针对输入内容事先设定好了。10%的网页工具提示是动态的，只有当用户需要的时候才会出现：通常用户需要点击帮助按钮或者在用户输入的时候才会出现。

3.3. 帮助、支持、工具提示：出现在什么位置？

当提供给用户支持的时候，有必要确认这些帮助是否可以被用户轻松的看到并且明白其含义。确认用户对于帮助信息不会产生任何误解是非常重要的。因此，到底什么地方应该放置这些提示信息呢？

如果网页表单提供帮助提示的话，它们会出现在：

▪ 在输入区域的下方 (57%)

▪ 输入区域的右侧 (26%)

▪ 输入区域上方 (13%)

▪ 输入区域左侧 (4%)

我们还对这些提示工具存在的位置趋势研究了一下，放在输入区域下面是一个大趋势，而且这些提示文字通常会使用比主要内容轻一些的颜色。

3.4. 输入验证:静态的还是Ajax?

尽管Ajax在过去几年成为了网络的新宠，提供了更为丰富的用户体验界面，但是，它并没有能够完全席卷很多流行网站。令人惊讶的是，我们在这份调查中并没有看到Ajax的存在趋势。用户填写完表单以后点击提交按钮后进行信息验证的这种传统验证技术要比使用JavaScript设计的实时验证技术更为流行。

▪ 30%的表单会在用户填写表单上方显示错误信息，并对未输入区域进行突出显示。

▪ 29%的表单会突出显示输入错误的区域，而不会在表单头部显示错误信息。

▪ 25%既使用了错误信息提示，也突出显示了错误信息的输入区域。

▪ 22%使用Ajax技术的实时验证技术。

▪ 14%使用JavaScript技术的错误警告。

▪ 1%使用带有“返回”链接的系统信息。

3.5. 错误信息设计

正如你所看到的，我们总结出了4种不同形式的错误验证。值得注意的是，14％的表单仍然使用了Javascript错误提示窗口（例如：YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex,看下方的屏幕节图），而只有22％部分使用了Ajax验证技术（通常只验证用户名是否可用）。还有一点令人惊讶的是，所有的注册表单都使用了验证。

Newsvine使用的JavaScript错误提示窗口

通常，设计师会通过以下两种方式设计错误报告：a)在点击提交按钮以后显示错误信息 b)在输入区域实时高亮“错误”字样。第一种方式通常通过列表方式在表单前显示。第二种方式通常使用将错误输入区域加一个颜色边框，并将改输入区域的标签高亮（通常使用红色字体和红色背景）。

有时侯，设计师会同时使用以上两种方式，并且高亮错误信息和输入区域。例如，Ning的注册表单（详见下图）就同时使用了两种方式。

通常，红色用来标记错误。但是也不完全都是这样。Tickspot,Mixx.com 和 Furl使用黄色进行错误标记。

如果成功注册的话，会使用绿色进行信息修饰，这样使用的网站达到了97％。

3.6. 是否需要进行电子邮件验证？

仅有18％的网站使用了电子邮件验证（比如Odeo, Ning)。

3.7. 是否需要确认密码？

让注册用户确认没有显示出来的输入信息听起来是合情合理的（通常使用星号代替这些输入内容）。不过，很多网站还是减掉了重复输入区域以减少用户填写表格的时间。

72％的网站都需要密码确认。但是也有很多大网站不需要进行确认，比如：Facebook, Friendster, LinkedIn, Stumbleupon, Pownce 和 Twitter。

3.8. 是否需要验证字？

虽然用户不希望看到验证字，但是这个选项确实是很有必要的。因为网站需要通过验证字来过滤掉那些批量注册的账号。

调查显示：

▪ 52%的网站不使用验证字。

▪ 39％的网站必须重新加载全部表单才能够刷新验证字。

当时，我们无法预测注册表单是否需要验证字选项的趋势。不管怎样，如果你需要设计一个验证字选项，那么请确认这些验证字符容易被识别，以及如果用户无法识别的话可以从新加载另外一个验证字段。一些网站没有提供重新加载验证字段的功能，但是也有一些网站提供收听验证字段的功能以便解决验证字段无法识别的问题，比如Digg, AOL, Slashdot, Google以及Last.fm。

3.9. 是否使用“取消”按钮？

当我们在设计这些问题的时候曾认为，在设计表单的时候不应该加入取消按钮，毕竟用户已经填写完了，为什么要让他们取消呢？但是我们错了。

仅有8%的网站使用了取消按钮。其中有一部分将取消按钮放在了“使用条款”的右侧，例如（例如：Zoho Writer）。这样以来，如果用户不同意网站的使用条款，可以通过点击取消按钮放弃整个注册。还有一些网站在注册前提供了支付计划（例如Crazyegg）。如果用户选择了错误的支付计划可以通过取消按钮返回重新选择另外的支付计划。

另外，我们不明白为什么Dzone将取消按钮放在了注册表单的左侧。

在使用取消按钮的网站中，4％将取消按钮放在了提交按钮的右侧。在这些网站上，提交按钮和取消按钮设计的并没有什么不同，它们并排放在一起。

3.10. “提交”按钮的布局位置

根据表格布局的不同，提交按钮可能在左边，在中间，或者在右边。设计师更倾向于放在左侧(56%), 然后是放在中间(26%)。

右侧设计的提交按钮也很流行(17%), 不过通常使用在需要进行下一步注册的情况下。在这种情况，提交按钮通常被命名为“继续”或者“下一步”。

3.11. 感谢信息

几年前，设计师们通会在成功注册后提供一个简单的感谢信息（通常是提供一个登陆页面的链接）。现在，大多数网站都希望使用者在注册成功以后马上使用网站的服务。

▪ 45% 的网站会引导刚刚注册成功的用户继续完善注册信息，寻找网络上的朋友，向朋友推荐该网站，或者填写个人资料。

▪ 33% 的网站会使用非常友好的语气提示“现在就去”的字样以及列出各项服务功能。

▪ 4% 提供了基本的“谢谢”信息。

▪ 2% 返回主页。

总结

让我们简短的总结一下上面的研究报告：

▪ 注册表单没有使用任何hover, active 或 focus效果 (84%),

▪ 帮助提示信息或者是静态的(57%)，或者是动态的(33%)；有的出现在输入区域下方(57%)，有的出现在输入区域右侧(26%),

▪ 静态验证和动态验证一样流行，没有使用Ajax的趋势;

▪ 不使用电子邮件确认(82%),

▪ 使用密码确认(72%),

▪ 使用验证字段（48%），不使用验证字段（52%）,

▪ 不使用取消按钮 (92%),

▪ 提交按钮在左侧 (56%)，或者中间 (26%),

▪ 感谢信息采用引导用户继续使用网站的服务的方式(45%)。

浅谈网页注册表单设计模式（一）

2008-07-05T15:17:00.002+08:00

编译：四眼天兔工作室资料来源：SMASHING MAGAZINE

如果你想最大化你的服务收入，你需要加强你的网站表单的完整填写率。除非你有一些创新的理念吸引你的访问者，否则，要想让用户注册你的网站并不是一件容易的事情。为了实现最大化，作为网站的设计人员，需要提供良好的用户体验。我们要想办法邀请用户，向他们描述我们提供的服务流程，解释为什么需要填写这些表单以及他们将为此获得的回报是什么。当然，我们必须让所有这些都变得简单，易于上手。

然而，设计一个有效的网页表单并不容易。理由很简单：没人愿意去填写一个表单，无论是线上还是线下。因此，作为一个设计人员，我们需要策划一个好的设计样式让表单填写变得简单、具有直观性及趣味性。

但是，我们应该如何策划呢。什么地方放链接？如何设计？如何突出标签以及对齐他们？如何让表单看着更现代化？这些也都是我们在问自己的。而答案就在下面的这个调查研究里面。

下面就是我们对全球100个流行网站分析的结果。我们先从登陆表单开始。第二部分会在下次的文章中发表。感谢Wufoo为我们提供了调查表单。

注册表单样式调查报告

该份调查报告的目的是提供给网页开发人员和设计人员一些如何有效设计网页表单的直观建议。我们也会提供一些对于设计用户友好界面的网页表单的思路。

我们选择了带有表单设计的全球范围的100个大型网站。这些网站在Alexa以及搜索排名上都很靠前，代表了不同类型的网站。我们通过这些调查告诉读者为什么网页表单对企业发展目标具有重要性以及为什么它们在网页设计过程中具有高优先级。特别需要指出的是，为什么登陆表单对于很多社交型网站如此重要。

我们通过使用专门的e-mail账号和用户名对这些网站进行了注册。为了使调查研究更为全面，我们设计了29个不同的问题和答案，希望这些对你的网页表单设计有所帮助。

请注意，该份报告不包含审核表单——这将是另一个话题，我们将在下次的文章中重点讨论。

1. 表单位置

1.1. 如何设计注册标题？

用户知道，网站提供登陆、注册、加入等标签按钮使它们成为网站的会员，并拥有只属于自己的账户。很明显，用户希望能够直接在网页上看到这样的链接字样引导他们进入登陆链接。不过很不幸的是，事实并非如此。

最常使用的名称是“Sign up 注册”（40％），然后是“Join 加入”（18％），“Register 注册”（18％），“Create account 创建账户”（17％）。我们发现现在已经很少有网站在使用过去非常流行的“从这里开始 start here”的按钮。很明显，设计师们都在试图传递信息，而不是设计或者强调服务的功能性。

1.2. 登陆表单应该放在什么位置？

当用户第一次访问一个站点的时候，他们首先会对整个网页的布局进行初步认识。他们的眼睛会快速的从一个板块跳转到另外一个板块，从而确认哪个板块是最重要的以及哪些内容是他们正在寻找的。为了满足用户的需要，设计师应该设计更直观的界面帮助用户开始使用网站服务。

如果用户找不到登陆窗口，那么他们就会放弃注册你的网站服务。因此，登陆窗口链接的位置非常重要。设计师应该将登陆窗口链接放在最明显的位置。

根据调查研究显示，登陆窗口链接

▪ 59％置于网站开头位置（其中76％放在了右上角）

▪ 21％置于首页最显著的位置（首页直接显示登陆表单）

▪ 9％隐藏在了页面开头“注册”链接后(例如:Craigslist)

将登陆表单放在侧栏也并不希奇（7％，例如Propeller, Xing）。但是，也有4％的网站无须注册即可使用网站服务，只有当用户需要储存一些设定的时候才需要进行登陆注册。

2. 表单设计

2.1. 登陆表单布局是否简化？

既然用户点击了登陆链接，那么标明他决定注册你的网站服务。重要的是，用户并不会点击更多的链接或者极具吸引力的广告。

因此，设计师应该移除不必要的细节和分散注意力的内容，这些将影响用户填写表单。通常，只需要一个LOGO和表单就可以了，不需要任何的导航选项和多余的信息。

由于用户想要的是登陆以后的服务，因此填写表单的过程应该尽可能的简单。设计师通常使用最小化的布局设计登陆表单样式。基于我们的调查显示，61％的网页表单相对于整个网页布局来说都是相当简单的（例如MovableType, Livejournal, Amazon, Yandex.ru）。

下面我们来看看Yahoo的登陆表单。提供给用户的只有创建账户用的表单，其它什么都没有。注意，页面的语调和语言都十分口语化，且极具吸引力。这是一个简单的，易于上手以及用户友好的表单。

Flixster 可能是最好的一个负面例子。注册页面上汇集了所有可能的导航选项，而且还在注册表单右侧堆满了广告。这就不是一个用户友好界面。第二个我们看到的最忙碌的页面应该是Photobucket了。

2.2. 是否需要提供额外的信息？

▪ 41%的表单提供注册权益(MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)

▪ 28%不提供多余的信息，只提供一个单纯的注册表单(Pownce, DeviantArt, Dailymotion)

▪ 11%会告知访问者他们将得到多少倍的收益(Threadless, Newsvine, Wordpress)

只有6％的网站在开头提到哪些注册信息是必须填写的，如果必填项你没有填完的话，其中8％无法进行下一步，6％会提示警告(例如37signals, Bloglines).

2.3. 单页面表单和多页面表单

93%的调查网站使用了单页面注册表单。很明显，设计师都试图让注册过程变得尽可能迅速而不枯燥。只有一小部分使用了多页面表单，这些注册页面通常需要用户填写更多的用户信息。

例如，Meebo将登陆表单和注册过程混合在一起，并在跳出的窗口中提供了登陆向导。表单由6个页面组成，从创建账户到提供个人详细信息。

2.4. 如何突出输入区的标题？

62%的登陆表单使用粗体字来突出输入区的标题。值得注意的是，没有一个网站使用斜体字。为了使标题标签更为突出，20％的网站使用了颜色字体，18％使用了纯文本。

2.5. 标签对齐方式

说实话，我们希望看到一种标签排列的趋势。可是很遗憾，我们并没有从调查中找到结果。

▪ 41％使用了右对齐排列(YouTube, Facebook, Metacafe)

▪ 30%使用了顶部对齐，即在输入区上方插入标题(Behance.net, Wufoo, Tickspot, DZone)

▪ 29%使用了左对齐方式(Digg, Ning, Wykop.pl, 43things, StudiVZ).

根据Matteo Penzo’s label placement research (1996) 和 Luke Wroblewski’s findings(pdf)两份报告显示,顶部对齐方式可以大大降低填写时间。如果你受垂直输入区设计的限制，那么建议你使用右对齐方式。如果你的表单需要用户快速浏览他们都需要填写哪些内容的话，左对齐是最佳选择。

2.6. 需要多少强制性的内容？

我们在进行调查的时候发现，现在表单设计的一大趋势就是只有很少的强制性内容。几年前，设计师通常会让用户输入一些个人信息，如姓名、国家、地址、个人爱好等。现在通过登记、密码和密码验证来满足这一切。

调查显示，54％的表单需要用户填写最多5项内容（其中6％不需要注册就可以使用服务）。34％的表单需要填写6－8项内容，还有12％的表单要填写超过9项强制性内容，这真的是在考验用户的耐心了。

2.7. 需要多少可选填项？

和上面的调查发现相似，大多数网站都避免提供可选项或者在注册完成以后才出现这些选填项。62%的表单没有选填项，38％的表单有少于5个选填项。

2.8. 垂直还是水平放置表单选项？

调查标明现在表单的布局趋势是使用垂直方向安排表单选项。86％的网站采用垂直表单。其中15％强调了漂亮，吸引人的视觉设计来吸引用户并让用户能够舒适的填写表单。

Box.net 提供了一个简单的垂直输入表单。当用户填写资料的时候眼睛会处在垂直方向，而不用左右移动。

Mint 提供了一个水平方向的注册表单。当用户输入信息的时候眼睛需要从一个区域跳转到另外一个区域。

其它发现：

▪ 18%的网站会在注册窗口或链接后再放一个登陆窗口。(例如YouTube, Reddit, Digg, Lulu, Metacafe)。

▪ 78%没有使用星号来突出显示需要填写的项目；大多数网站既没有使用星号也没有使用其它形式来修饰突出项。

▪ 9%的网站使用了步骤提示向用户标明当前位置，需要填写的步骤等。

▪ 85%的网站都倾向于使用简单的网页表单设计以及尽可能少的填写项。

▪ 填写区域通常使用不同的形式按组隔开，69％使用空白边，22％使用线条，9％使用不同的颜色背景。

总结

让我们总结一下第一部份的调查研究结果。请切记，这些都是针对登陆／注册表单的。

▪ 40％的注册链接使用的名称是“注册 sign up”，并且都放置在网页的右上角；

▪ 61％的注册表单布局都十分简单，避免分散用户的注意力；

▪ 93％的网站都使用单页注册表单；

▪ 41％的网站通过解释注册权益来吸引用户注册；

▪ 62％的网站使用黑体字来突出显示输入区的标题；

▪ 标签对齐方式没有明显的设计趋势；

▪ 设计师都试图使用较少的必填选项；

▪ 设计师都试图减少可选项；

▪ 86％的网站使用垂直表单布局来代替水平表单布局。

下周，我们将发布本次调查研究的第二部分。

52套高质量的ICON图标

2008-07-03T14:59:00.003+08:00

今天，SMASHING MAGAZINE又发布了一系列出色的，免费的而且专业的桌面和网页ICON图标。这些图标目前都是可以免费使用的。天兔将在第一时间为您奉上。

提示：因为图片版权随时都会出现更改，所以当您在使用这些资源的时候最好还是先查看一下它的最新版权协议。

供网页设计和桌面使用的免费ICON图标

Concept Icons .08

12款256×256像素，PNG格式的图标。由Roberto Abril Hidalgo设计。

Affel

Affel使用紫色和黑色，并利用一些亮光和阴影设计出来的非常经典的ICON款式。内含72款256×256像素，PNG格式的图标。这些图标不可以用于商业用途。

Smultron Icon Pack

Smultron better是Smultron系列的更新。需要Mac OS X 10.4及更高版本。

Eico Studio Anniversary Icon Pack

为周年庆推出的16款锐利和漂亮的图标。支持ico和png格式，128×128像素。

Kidaubis 3D Icon - 蓝色系列

提供Email、音乐和工具箱三种图标样式。

Jonas Rask Icons

Jonas Rask设计的一些图标的更新。图标大小：从16×16像素到512×512像素。

The Shield Icon Set

包括4个文件，大小分别为256×256px, 128×128px, 64×64px以及32×32px。提供ico和png格式。由Marvin Ristau设计。

Mac Icons

包括5个高解析度的PNG文件。使用Illustrator CS设计而成。

Pure Icon Pack

Pure Icon Pack包括14个高质量(256×256像素)的图标，支持PNG和ICO格式。该图标包包括CD图标、计算机图标、文件夹图标、DVD图标、网络图标、搜索图标、ＵSB图标、压缩包图标以及其它。

Mythique Design

16个给messanger用户界面的图标。支持PNG格式，图标大小16×16像素到256×256像素不等。

Oxygen Icons Set

超过1000个专业桌面图标，都放在了一个文件包内，基于GPL标准发布。

Boxes Vista-like Icons

Windows Vista的图标。共26个图标，13个带光盘的图标和13个不带光盘的图标。提供PNG和ICO两种格式。只能用于非商业用途。

Google and Facebook icons

大多数图标是为OS X Leopard系统设计的。每款图标都包含一个appl.icns文件。由Chris Ivarson设计。

Fruity Apples

9个png和icn格式的图标(适合Leopard系统: 512×512像素), 包括2个额外的图标和一个壁纸(2560×1600像素)。

I Love “Blondes” Beer Icon

512×512像素，ICO和PNG格式

Document Icons

512×512像素，png和icn格式。

Niepces Camera Obscura Icons

这些桌面图标是Nicephore Niepce于1826年使用的暗箱，设计成Aperture和iPhoto的样式，支持Mac + Win + Linux + iContainer。支持Leopard系统的512×512像素。包括7个可以替代Aperture或iPhoto, Aperture Library, iPhoto Library, Aperture Vault, Aperture Project以及你的图像文件夹的图标样式。

Facebook User Interface Icons

25款Facebook ui图标。提供高解析度及矢量图格式。

Cyberduck

Icon替换系列，大小为512×512像素。可以作为应用程序的图标、文件夹图标以及标签图标等。格式.dmg。

Autumn Breeze Icons

6款Windows用的图标，提供8种尺寸 in 8 Sizes。我的电脑、我的图片、回收站已满、回收站清空、CD和收藏夹等。

Web Icons Pack

7款Windows和OS X的桌面图标。

Whistle Icons

专为搜索条制作的哨状图标。由DesignFreak设计。

Chemical Icon Pack

Chemical Icon Set提供了4款漂亮的化学元素图标。需要Mac OS X 10.1及更高版本使用。