四眼天兔工作室 » 设计教程

开源社交网络程序BuddyPress安装指南

4EB Studio — Tue, 31 Mar 2009 06:34:14 +0000

Automattic，WordPress的子公司，近期近期正在研发一款名为BuddyPress的社交网络软件，并将于近期推出。该软件建立在WordPress的基础上，由Andy Peatling开发，让你让你搭建类似Facebook的社交网络平台。下面，让我们来看看如何安装BuddyPress。

Step 1 – 什么是BuddyPress?

BuddyPress是一款基于WordPress Multi-User (MU)的社交网络应用插件。WordPress MU是WordPress.com的开发的另一款软件，允许搭建多用户博客。BuddyPress为WordPress增加了许多新的社交互动特性。这些特性可以一次添加也可以根据需要独立安装。以下就是这些特性：

WordPress博客
会员个人档案
私人信息
朋友网络
包括博客，照片以及其他用户自定内容的群组
“The Wire” (类似Facebook的涂鸦墙wall)
Activity/Action Stream
bbPress论坛

查看BuddyPres网站上的所有特性演示

今天，我们将安装一套完整的BuddyPress，从零开始建设一个社交网络。

软件为RC版本，但是已经非常接近最终版。目前的版本通过提供一个管理员控制面板以及所有的上述的基本功能来帮助你开始建设社交网络。

Step 2 – 安装需求

在你安装BuddyPress系统之前，请确保你的服务器提供了以下两块内容：

一个MySQL数据库来储存BuddyPress信息。如果你还没有建立数据库，那么为用户新建一个，并包含所有用户特权（如更新，插入，删除，选择等）。请务必记住用户名及密码以备后用。
一个mod rewrite模块，这样你可以拥有简洁链接。如果你已经使用WordPress或者其他软件来生成简洁链接，那么你可以不需要添加任何内容，直接进入下一步。

Step 3 – 下载WordPress MU

在安装BuddyPress之前，你需要安装WordPress MU副本。下载最新版本的压缩文件 (ZIP) (TAR.GZ)并解压缩。解压后，你应该可以看到一个类似”wordpress-mu”名字的文件夹。

将文件上传到你将要搭建网站的目录，可以是主域名下，也可以是二级域名下。

Step 4 – 安装WordPress MU

一旦上传完成以后你可以直接安装WordPress MU。

在浏览器的地址栏输入你的上传文件路径，index.php将自动执行。你将会看到一个需要输入一些细节的屏幕。具体输入方法如下：

Blog Addresses – 本文将选择”sub-directories”。如果你启用了Wildcard DNS记录，你可以选择另外一个选项，不过文本将不会涉及到该选项的使用方法了。
Database Name – 在第2步中你建立的数据库名称。
User Name – 第2步创建的用户名。
Password - 第2步创建的密码。
Database Host – 如果MySQL服务器和网站服务器相同的话，那么这里通常就是192.168.0.169 。只有在安装显示服务器设置错误的时候才可以更改此项。
Server Address – 确认你的安装路径所对应的服务器/域名。
Site Title – 社交网网站的名称，根据你的需要自定。
Email – 输入有效的email地址以便使用管理员帐户。

一但你核查上述信息无误后，点击提交。如果所有填写的信息均正确，那么将会显示”Installation Finished!”屏幕，上面会显示你的用户名和密码，同时你还会收到一封包括所有设置信息的邮件。

在继续之前，请详细阅读Installation Finished页面上的设置许可指南。

Step 5 – 下载BuddyPress

这一步，你可以安装BuddyPress系统了。因为我们已经安装了完整的系统，因此你可以从这里下载”combo”文件。

解压combo文件，并将所有解压内容上床到wp-content文件夹下的mu-plugins文件夹内。上zip文件包内的所有文件夹和文件，并确保读取权限为755。

将刚上传到的wp-content下的mu-plugins/bp-themes移走。确保所有的文件夹都被授予755权限。

Step 6 – 安装BuddyPress

一旦文件都上传完毕，使用刚才创建的用户名和密码登录到WordPress MU的管理员控制面板。登录地址（刚才安装WordPress MU的时候发送到了你的email邮箱）格式如http://yourdomain.tld/folder/wp-login.php。

在”Site Admin”菜单下你可以看到”Themes” 链接并点击它。你将会看到一系列已经安装好的WordPress MU主题，其中一个是BuddyPress主题。在”BuddyPress Home Theme”前选择”Yes”，并且点击”Update Themes”。

最后，如果你需要用户可以登录到你的网站你需要启用注册功能。在”Site Admin”菜单下点选”Options”并确认”Allow new registrations”选择了Enabled选项。

好了，现在你已经可以使用你的社交网络了。当你登录到管理控制板的时候，你可以在”Site Admin”下的 ”BuddyPress”链接内进行一些格式化设定。如果想预览你的社交网络以及档案，从屏幕顶部的管理条上点击”My Account” 并且选择”Activity” 或”Profile”。

Step 7 – 额外的插件和主题

目前BuddyPress的插件还比较少，不过一旦正式发布以后将会像WordPress一样有大量的插件涌入。不过，现在有几款非常酷的插件可供BuddyPress使用：

bpGroups 改善群组系统。
Invite Friends 允许你添加其他社交网络（如Twitter, Facebook 以及 GMail）上的朋友。
Twitter To Wire 自动添加你的tweet到wire上 (BuddyPress版本的Facebook“涂鸦墙wall”) 。

BuddyPress也为主题提供了一个页面，但是目前还没有现成的主题可供下载。如果你非常渴望看到主题系统的强大力量，那么你可以参考以下的一些例子：WannaNetwork, GrungePress, 和Flokka。

[原文链接]

10个极具创意的用户交互界面及其制作方法

4EB Studio — Mon, 30 Mar 2009 05:53:40 +0000

用户体验在近几年得到了迅速的改善，主要体现在丰富的的用户交互界面上。AJAX, javascript以及CSS的广泛应用为用户提供了先进的，尖端的以及专业的动态交互界面解决方案。

之前已经有了很多文章来介绍一些令人惊叹的 javascript, Ajax和CSS技术以及哪里可以找到这些技术的使用方法。今天，我们将来看看10个极具创意且UI界面功能丰富的网站，以及如何使用文中提到的技术来制作类似的交互效果。

1. Alex Buga (滑移 ，可拖动的页脚 以及动态按钮)

在这个绝对难以置信的设计中你会看到:

1.1 一个具有美观的动态悬浮效果的菜单

制作方法 » 使用超级弹性特效制作极具视觉冲击的网页菜单

该教程讲解了如何使用几行Javascript代码以及MooTools库来设计一个令人振奋的弹性菜单。

查看演示

1.2 滑动的文章显示面板

制作方法 » 漂亮的动态周线表

该教程向你讲述了如何设计一款带美观的，带有每日注释的动态周记，你可以在你的网站中使用该方法进行自定义设置。

查看演示

1.3 可以拖动的页脚

制作方法 » 事件委派表中的拖拽以及调整大小

只有父元素在控制事件。在本例中将由编辑容器内的元素来控制事件。如果你向你的容其中添加动态的元素，你无需再附上任何事件。

查看演示

2. Ricoverdeo (幻灯效果)

一个非常简洁的滑动效果，并且使用了大量的插图作为辅助。

2.1 在悬浮元素上添加简单的滑动效果

制作方法 » Easy Slider 1.5 – 简单的制作图片与内容滑动的jQuery插件

Easy Slider (我对这款插件的叫法)可以使图片或者任何内容通过点击或自动在水平或垂直方向上滑动。主要特性包括：连续滑动，“go to first”和”go to last”按钮，隐藏控制工具，可选的控制按钮的代码标记，在同一页面上垂直滑动或出现多多种滑动。

查看演示

3. jasonreedwebdesign (滑动标签，折叠面板)

Jason Reed在他的个人作品集上使用了一款流行的折叠面板效果允许用户进行页面导航。他还在折叠面板内使用了一款非常漂亮的滑动标签来增强界面结构。

3.1 互动标签

制作方法 » 自动滑动标签

滑动标签是一个mootools插件，可以添加一些漂亮简洁的效果。它和Panic Software’s Coda网站上的滑动效果相似。另外，它还可以在固定的时间间隔内自动滑移。

查看演示

3.2 折叠面板

制作方法 » 垂直折叠面板

该款插件提供了一些简单的选项来改变折叠面板的外观和动作。

制作方法 » 使用 Mootools 制作折叠面板

4. Dragon Interactive (动态菜单)

我非常喜欢他那叹为观止的菜单，乍一看以为是一个flash，后来通过查看代码发现就是使用了简单的XHTML，CSS以及Javascript。

3.1 动态菜单

制作方法» 使用jQuery 制作动态菜单

查看演示

5. DesignShack (切换页面布局)

大多数CSS图库网站都会提供给用户改变页面布局的功能，从而使用户可以更加轻松，迅速的获取信息。 ƒ

5.1 转换页面外观

制作方法 » 使用CSS和jQuery显示转换钮

通过使用CSS和jQuery让用户切换页面布局。

查看演示

6. Profoto (面包屑Breadcrumbs)

Profoto有一个独特的面包屑(breadcrumb)菜单。点击面包屑链接的时候会在它的下方打开一个区域，给用户一些附加属性进行选择。

6.1 面包屑Breadcrumb

制作方法 » jBreadCrumb

jBreadCrumb是一款jQuery插件，可以通过更为灵活和聪明的方式来显示面包屑。

查看演示

7. Shelfari (混合按钮)

Shelfari具有一个非常有趣的混合按钮/向下滑移的菜单来显示对书籍的执行动作。如果你查看代码你会发现选择框那里并没有使用一个输入框，而仅仅使用了背景图片。

7.1 自定义表单元素

制作方法» Custom Form Elements

曾经总是在好奇如何可以按照自己的方式定义表单元素，如选择框，多选框以及选择区域。Custom Form Elements通过使用Javascript和CSS来提升基于网页的XHMTL表单的样式及可用性。

查看演示

8. CSS Ninjas (费用预估滑杆)

CSS Ninjas提供了一个非常有趣的费用预估滑杆允许客户估算服务费用。

8.1 滑杆

制作方法 » jQuery UI 1.7 Slider

该款插件的目的就是通过渐进增强来控制jQuery UI Slider插件。

查看演示

9. Facebook (表单自动完成)

Facebook的地址自动完成表单是表单自动完成的最好案例。

9.1 表单自动完成

制作方法 » FCBKcomplete v 1.09

一款有趣的facebook样式的动态输入框，可以自动完成或预载值。

查看演示

10. Design Flavr (Smooth Slideshow)

DesignFlavr, 一个非常有名的设计灵感资源网站，使用了一个淡入淡出的幻灯效果来展示他们的特色作品以及相应的作品描述。

10.1 Smooth Slide

制作方法 » s3Slider

s3Slider是一款免费的jQuery插件，可以实现交互渐变的幻灯效果。

查看演示

[原文链接]

45款苹果设计风格的photoshop教程

4EB Studio — Thu, 26 Mar 2009 02:11:32 +0000

多年来，苹果产品对全球的设计师和图像艺术家们来说都有深远的影响。简洁而锐利的Aqua界面强烈影响着新产品的展现形式和设计风格。除了产品设计外，苹果公司的网站和出版物的外观与版面也使其变得与众不同。

没有其他任何一家公司可以呈现出如此艳丽和绚烂夺目的风格作为每一次突破性的革新来长时间的改变着我们的生活。苹果公司已经建立了一种十分有效的方式来传递它的信息给广大的观众，并且苹果外观与感知在其中起着主导作用。

本文我们展示一系列漂亮的苹果风格的Photoshop教程。我们收集这些作品不仅因为我们对苹果的忠诚热爱，还因为我们觉得你们会从中受益。

Mac Photoshop教程

MacBook Air
在这个具有20个步骤的教程中，你将学会如何创作一台MacBook Air.

创作一款矢量风格的MacBook草图
一篇很长的用photoshop制作MacBook Pro的教程，使用了图形和多种技巧。

创作一款光滑的黑色iMac
一款黑色的iMac会是什么样子的呢？作为一个photoshop设计师，你可以设计一下你心目中的样子。

创作苹果鼠标
用photoshop传作一款简洁而优雅的苹果鼠标。

iPhone

Apple iPhone设计
使用简单的几个步骤设计这款时髦的手机。

创作一款 Apple iPhone草图
拥有一部iPhone是非常时髦的。快用Photoshop装作一款属于你自己的iPhone吧。

iPhone风格Icon
Apple发布了一些建议来创作网络应用，现在就先来学学如何制作iPhone风格的icon吧。

如何创作iPod Touch
最简单的创作iPod Touch的方法。

创作iPod Touch
纯手工绘制而无需使用任何图片创作出来的iPod Touch。

iPhone教程
该教程详细讲述了如何创建图形，应用效果并且创作你自己风格的iPhone。

iPhone GUI PSD
一个非常全面的元素库文件，所有元素均可编辑。

iPhone设计资源
这里有一些资源可以帮助你进行iPhone设计项目。

60款非常漂亮的Apple Wallpapers
Showcase of 60 most beautiful Apple-related wallpapers, including the Apple logo, the Mac OS X, time machine, iPods and more.

视频教程

Mac广告

创作iPhone 广告

iPod风格笔刷

Grunge风格的iPod设计

I See iPod People 平面广告

设计一款Coldplay版的苹果素描

制作Apple风格的广告

制作你自己的iPod风格照片

Attack of the iPod People 广告风格设计

[原文链接]

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

4EB Studio — Wed, 09 Jul 2008 09:10:28 +0000

编译：四眼天兔工作室资料来源：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%)。

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

4EB Studio — Sat, 05 Jul 2008 09:11:21 +0000

编译：四眼天兔工作室资料来源：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％的网站使用垂直表单布局来代替水平表单布局。

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

40款精彩绝伦的文字海报设计及PS效果制作教程

4EB Studio — Mon, 30 Jun 2008 08:59:24 +0000

还是在noupe上看到一篇介绍字符构成的海报设计欣赏和用PS制作出来的各种效果的字符海报教程的文章，这些作品真的精彩到让人瞠目结舌，更令人兴奋的是，还提供了制作这些效果的教程，如果你有点英语基础，或是没有英语基础但是懂得PS技术，或是干脆两者都不具备，那也绝对推荐你看看这些教程，肯定会给你很大的启发。

字符海报欣赏

1-The Gift v2 by MrBadger

2-Typography by fabianohikaru

3-TechnicalLove by Mrgraphicsguy

4-Beauty by Mrgraphicsguy

5-Stel Christian Cambas Poster by SeBDeSiGN

6-Oriental Pages_Page32 by Malikanas

7-XTRABOLD

8-Tony Rohr’s Ring

9-State To State

10-Good Morning Stranger by Nicolas Alexander

11-Smoke + Type by Daniel Gordon