小繁的Blog http://www.aiyooo.net/blog 看淡了,心清了,人也就静了. Thu, 04 Mar 2010 15:19:57 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 腾讯Q组内部考核题 http://www.aiyooo.net/blog/archives/432/%e8%85%be%e8%ae%afq%e7%bb%84%e5%86%85%e9%83%a8%e8%80%83%e6%a0%b8%e9%a2%98.html http://www.aiyooo.net/blog/archives/432/%e8%85%be%e8%ae%afq%e7%bb%84%e5%86%85%e9%83%a8%e8%80%83%e6%a0%b8%e9%a2%98.html#comments Sat, 27 Feb 2010 15:47:18 +0000 小繁 http://www.aiyooo.net/blog/?p=432 这个是从Hemin那里看到的,我没找鬼哥要,刚好没见过,就拿来练手了.题目的综合性还是比较大.

详细的题目要求还是从这里看吧:
http://www.hemin.cn/demo/tengxunMS10-01-17/考核题关注.doc
http://www.hemin.cn/demo/tengxunMS10-01-17/q_group.psd

Tips:You can change the code before run.

测试：IE6,7,8,FF3.5+,chrome,safari,Opera.

]]> http://www.aiyooo.net/blog/archives/432/%e8%85%be%e8%ae%afq%e7%bb%84%e5%86%85%e9%83%a8%e8%80%83%e6%a0%b8%e9%a2%98.html/feed 0 无耻的服务商！ http://www.aiyooo.net/blog/archives/381/%e8%81%94%e9%80%9a-adsl-%e6%b5%81%e6%b0%93%e5%b9%bf%e5%91%8a.html http://www.aiyooo.net/blog/archives/381/%e8%81%94%e9%80%9a-adsl-%e6%b5%81%e6%b0%93%e5%b9%bf%e5%91%8a.html#comments Thu, 21 Jan 2010 15:05:19 +0000 小繁 http://www.aiyooo.net/blog/?p=381 被广告了，杯具了n个月!
似乎是网通被联通合并不久后。每天都会在浏览器里出现广告，从转向劫持到广告页面再到现在更隐蔽的站内弹出浮动广告,让用户以为是网站的弹出广告.联通的流氓行为越来越让人无法接受！问题似乎并只出现在石家庄的用户，保定廊坊均如此！

开始还以为是浏览器杯具了，检查了系统Ie，Firefox还是被广告困扰。搜索之后发现原来不只是我这样，都以为是DNS劫持，换成Google的DNS后还是被流氓了。搞半天是路由劫持！clicklifter.com 现在的浮动窗广告服务器。受够了！它的信誉在此终止。

刚刚向工信部写了投诉信，等待答复吧。

]]> http://www.aiyooo.net/blog/archives/381/%e8%81%94%e9%80%9a-adsl-%e6%b5%81%e6%b0%93%e5%b9%bf%e5%91%8a.html/feed 0 转:如何精简用户界面 http://www.aiyooo.net/blog/archives/367/%e5%a6%82%e4%bd%95%e7%b2%be%e7%ae%80%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2.html http://www.aiyooo.net/blog/archives/367/%e5%a6%82%e4%bd%95%e7%b2%be%e7%ae%80%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2.html#comments Sun, 03 Jan 2010 08:39:33 +0000 小繁 http://www.aiyooo.net/blog/?p=367 简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决 定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。

去除无用的功能

研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。

精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完 成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

隐藏复杂部分

如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕空间。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。

当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30% 的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。 通过这种方式节省了大量的空间，也不会干扰用户使用那些最基本的功能。

最小化视觉干扰

我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。

空白，是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了。

虽然使用空白多多益善，但也要尽可能的保证有对比感。设计理论家“ddd”说：设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

你可以看到修改过的版本有很重的黑线，与之前的边框不同。那个版本视觉干扰更小呢？（当然是原来的更好）大量的空白区域减少视觉干扰并让人觉得更舒适。

做减法、重复使用，循环利用

当软件成形后，问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处：减少开发所需时间；给人一致的使用体验，如果用户学会使用一个操作，他们就可以把相同的操作行为运用到进行其他操作中去。

在设计CMS过程中，我们在表单验证上花费了大量的时间。我们用红色框出无效的区域，甚至增加红色的提示框来说明每个填写表单的环节有多少错误。

在之后的开发过程中，我们在需求列表中增加了版本比较的功能。与其创建全新的框架，不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单，并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。

重复使用元素是另一种可以减少界面复杂的方法，因为用户可以迅速的熟悉软件。

空白状态不应空白

空白状态是指界面无数据时的样子，如用户初次使用软件。作为设计师，我们花费大部分精力用来设计如何最好的展示内容，但时常忘记如何展示无数据的样子。

如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象，用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径，帮助用户学会初次使用软件的基础操作。

Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候，程序突出了两大人们可能会用得到的功能。

再次重复：不要忘记空白状态！

相关展示

我们已经见过大量界面混乱，复杂的软件。然而，有效的减少程序的复杂性有点难度。

Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。
Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力，将例行任务变得有趣。
Image Spark黑白色的渐变。界面几乎没视觉干扰，易于使用。
Ballpark有简洁的界面，用色不跳。
Krop，其核心就两个表单：地址与关键词。
Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。
Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有，但其他类似软件有的功能它都没有。
Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台，它把功能隐藏在一个简洁的界面中。

总结

  • 减掉不必要的功能；
  • 然后隐藏那些不能减掉的功能；
  • 减少视觉噪音并重复利用元素；
  • 使用空白帮助用户；
]]> http://www.aiyooo.net/blog/archives/367/%e5%a6%82%e4%bd%95%e7%b2%be%e7%ae%80%e7%94%a8%e6%88%b7%e7%95%8c%e9%9d%a2.html/feed 0 小黑特惠 http://www.aiyooo.net/blog/archives/361/%e5%b0%8f%e9%bb%91%e7%89%b9%e6%83%a0.html http://www.aiyooo.net/blog/archives/361/%e5%b0%8f%e9%bb%91%e7%89%b9%e6%83%a0.html#comments Sun, 27 Dec 2009 08:02:45 +0000 小繁 http://www.aiyooo.net/blog/?p=361 收到联想小黑的圣诞贺卡,提示10年3月仍有小黑学生机特惠活动.还有机会参加~~~~thinkpad

]]> http://www.aiyooo.net/blog/archives/361/%e5%b0%8f%e9%bb%91%e7%89%b9%e6%83%a0.html/feed 4 噢~Google Wave 邀请 http://www.aiyooo.net/blog/archives/349/google-wave-%e9%82%80%e8%af%b7.html http://www.aiyooo.net/blog/archives/349/google-wave-%e9%82%80%e8%af%b7.html#comments Wed, 11 Nov 2009 12:33:32 +0000 小繁 http://www.aiyooo.net/blog/?p=349 Google Wave 居然可以邀请人了，到处都在发送邀请，邀请不希奇了。

希奇的是对Wave的未知。

病毒式传播

]]> http://www.aiyooo.net/blog/archives/349/google-wave-%e9%82%80%e8%af%b7.html/feed 1 感冒~ http://www.aiyooo.net/blog/archives/346/%e6%84%9f%e5%86%92.html http://www.aiyooo.net/blog/archives/346/%e6%84%9f%e5%86%92.html#comments Mon, 14 Sep 2009 15:31:42 +0000 小繁 http://www.aiyooo.net/blog/?p=346 感冒发烧，痛苦中…
没有猪流感的症状。
手机发布。

]]> http://www.aiyooo.net/blog/archives/346/%e6%84%9f%e5%86%92.html/feed 4 主题更新 http://www.aiyooo.net/blog/archives/340/wp-theme.html http://www.aiyooo.net/blog/archives/340/wp-theme.html#comments Fri, 04 Sep 2009 15:06:23 +0000 小繁 http://www.aiyooo.net/blog/?p=340 更换了theme,早打算自己做了,一直跳票到现在.对WP-theme不是太了解,功能上还是有好多问题,样式虽然简单,但没在ie6下测试.

虽然空间好久没有更新,但是先说这么多噻~~

]]> http://www.aiyooo.net/blog/archives/340/wp-theme.html/feed 2 Event对象跨浏览器的兼容性 http://www.aiyooo.net/blog/archives/304/event%e5%af%b9%e8%b1%a1%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e5%85%bc%e5%ae%b9.html http://www.aiyooo.net/blog/archives/304/event%e5%af%b9%e8%b1%a1%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e5%85%bc%e5%ae%b9.html#comments Tue, 16 Jun 2009 03:22:41 +0000 小繁 http://www.aiyooo.net/blog/?p=304 Event对象关联了所有事件,以提供有关事件的信息,但是对Eevent对象的访问各浏览器却存在着差异.
先来看一个Demo:

Tips:You can change the code before run.

在IE中可以正常的运行,如果您是在FF中运行其代码会出现event is not defined的错误提示.在IE中会把event附加成window对象的一个属性,在作为事件处理的一部分访问时会相应填写Event对象所含的数据.

对于基于Netscape的浏览器,是需要作为函数的一个参数传入.

function getPos(evnt){
var posx=evnt.clientX;
var posy=evnt.clientY;
var str=”

(“+posx+”,”+posy+”)

“;
document.getElementById(‘info’).innerHTML=str;
document.getElementById(‘face’).style.left=posx+’px’;
document.getElementById(‘face’).style.top=posy+’px’;
}

不过这种方法无法在IE中被实例化,所以只需在函数中进行相应判断
evnt=evnt||window.event;这样可以对浏览器的兼容.

Tips:You can change the code before run.

需要注意的是在body中使用内联方法需要显式onmousemove=”getPos(event)”,传入event对象以便对ff的兼容.

]]> http://www.aiyooo.net/blog/archives/304/event%e5%af%b9%e8%b1%a1%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e5%85%bc%e5%ae%b9.html/feed 1 网页设计趋势发展历程之2009 http://www.aiyooo.net/blog/archives/301/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%8f%91%e5%b1%95%e5%8e%86%e7%a8%8b%e4%b9%8b2009.html http://www.aiyooo.net/blog/archives/301/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%8f%91%e5%b1%95%e5%8e%86%e7%a8%8b%e4%b9%8b2009.html#comments Tue, 09 Jun 2009 13:33:49 +0000 小繁 http://www.aiyooo.net/blog/?p=301 原文:http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009

1. 凸版印刷

在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷 术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。

letterpress6

letterpress3

letterpress7

letterpress8

letterp

letterpress1

letterpress2

letterpress4

letterpress5

2. 富UI

我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而 使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决 方案。

特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像Newspond.com和Quicksnapper.com上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，更适用的用户界面将在2009年到来。

quick

sli

上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。

action

spond

howcast

moodstream

personalize

radioh

kontain

3. 透明的PNG

透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种 风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。 有时透明PNG也作为模式化对话盒(会话窗)的背景。

去年，我们描述了许多可以利用透明度发挥网页设计创意的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也有些设计 超越了这种定式。

cover-headline1

png

oob2

png2

transp

wisih

carrot

4. 大字号(版面)

在之前的文章（1，2 ）中，我们列举过一些大字号(版面)的杰出案例。2009年，大字号(版面)将成为主流。特别是设计机构，开发大型项目，做产品网站和在线服务的，他们会使用大字号(版面)来传达自己网站最重要的信息。

这些设计元素的字体大小通常都要超过36px，在很多情况下，为迎合观众都会使用非常漂亮的字体。总的来说，设计师投入更多精力在排版的细节方面，如主次关系，行高和字体的选择。其结果是：网站更漂亮，风格更一致，看起来可靠且值得信赖。

zo

type1

red

logbook

vine

type3

type7

5. 自定义字体

就像设计师花费了更多精力在排版上一样，他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在，我们仍观察到有一股向自定义字体发展的微弱趋势（例如使用sIFR）。

有趣的是，这些字体往往无缝结合于网站设计中；它们几乎从不需要网站因它而“更新”排版。设计师们试图融合漂亮的版式和炫目的视觉设计，以此来改善网站的外观和用户体验。

sh

sifr1

sifr2

sifr3

daily

6. 模式化对话盒/会话窗

模式化对话盒（会话窗）其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口，并且使用户的注意力始终集中在 网站最重要的区域内。状态窗通常是被用户的动作所触发（如注册或登录），并且出现于主内容之上，就像桌面应用中的一个窗口。会话窗往往以一个非常微妙的方 式出现：它们通常采用半透明，并且有一个“关闭”按钮。

modalbox2

modalbox1

groove

7. 多媒体区

随着更多宽带网络的接入，相比两三年前，用户已经可以浏览更丰富的内容，设计师可以借此机会，用更具吸引力和值得回忆的方式来呈现内容。怪不得一些 产品网站用多媒体区（录像和视频）来展示他们的内容。这类元素的主要优势还在于，它们可以快捷有效地表达内容，并使用户更易于消化这些信息。

用户要做的只是靠在椅背上欣赏；它们会把每件事按部就班地展示出来，不需要用户点击，搜索说明，或是学习导航如何使用。影片通常都简明扼要；它们大多正式，但也不乏娱乐。

但请明白，视频只是网站内容的一种替代形式（而不是主体和唯一！）。不是所有人都通过宽带上网，也不是所有人都愿意看视频（因为他/她可能正在听广播或音乐），更不是所有人的机器上都安装了Flash和JavaScript.

gf

gb

8. 杂志外观

在Blog的设计中有一个非常有趣的现象，许多手法通常来自于传统（印刷）媒体。从页面文章的排列、排版的运用、插图，甚至到文字对齐方式都与传统 印刷技术的手法相似。栅格化设计变得日益普及，但多用于大型项目，产品页面和大型的Blog；它们几乎不在公司网站或网上商城中出现。

magazine2

magazine3

magazine4

maga

magaz

9. 旋转木马（幻灯片）

旋转木马其实就是幻灯导航，它的内容垂直或水平轮转（因此得名“旋转木马”）。要达到轮转导航的目的，用户需要点击其中某一个切换元素（通常是左/右或者上/下箭头）。当进行切换时，内容就向所选的方向轮换了。

过去用户为寻找他们所喜爱的内容需要点击网站中的很多章节，取而代之，现在可以快速浏览可见的内容，省去了滚屏和不必要的鼠标移动。这样做的好处 是：用户不但节省了时间，而且使他们的注意力更加集中到内容中，而不是被分散到浏览器窗口上。这类幻灯导航经常被使用在娱乐网站和大型Blog上，但设计 师也可以把它用在大型项目中，以更互动的方式来展示自己的工作。

amy

cnnmoney

musicyahoo

wein

10. 导言模块

网站的左上部是页面中最重要的区域，因为它最能吸引访问者的注意力。因此，把网站最重要的信息放在那里是再明智不过的了，这样就能确保访问者尽可能快的看到信息。

事实上，这也是许多设计师正在做的事情。不管是为网站应用、公司设计、在线服务还是大型项目，设计师们都会把他们的标语和简要导言放在页面顶部，通 过使用粗体和生动的排版，给用户留下一个好的第一印象。一些导言是简短的，也有一些够啰嗦的；无论哪种，它们都会占一大块区域；与布局等宽，高度在 250-400px之间，已成为这些导言模块的通用尺寸。值得注意的是，这些模块几乎从不出现在Blog中，网上商城中也很少出现。

feature2

introd

45r

feature3

introd2

出格布局

正如在几个月前所做的40个创新设计布局：出格布局的展示那样，我们正在观察一种向更具个性和创新性布局发展的强大趋势。与使用传统四四方方的盒状布局不同，设计师们正在尝试新的信息结构、呈现和表达方式。

在这些出格布局设计中，整体创意往往比具体内容更重要，也更令人难忘。尽管如此，可用性、版式和视觉设计也很少被忽视，并被谨慎地执行。创新布局在大项目、网站设计机构和宣传网站（如大公司的商业活动）中尤为流行，但它也同样流行于blog中。

hipsterist

提到创意，可用和不可用设计之间的界限就非常模糊了；因此，可用性测试就显得尤为重要，因为一项新的创意能打破网站故有的东西。通常，折中考虑创 意、经典和传统设计是一个不错的主意，也就是说要设法去取得一个“坚不可摧”（甚至最终很单调）的可用设计与一个有创意但不可用设计之间的平衡。记住，创意需要时间来成长：重新思考、修改、调整、优化，最终整合到你的设计当中。

我们强烈鼓励设计师打破传统盒状布局的惯例，去尝试新方式和你大胆疯狂的想法。施展你的才华吧！

layouts-45

oob1

oob3

oob4

sms

aut

oobd

ool2

good

单页布局

另一种设计师经常使用的、给访问者留下深刻印象的方式，就是所谓的单页布局：这种布局使用一个单独的页面来呈现网站的内容。它并不一定意味着这些设计就是极简的（遵循“少即是多”原则）。而刚好相反，这种设计往往十分复杂，它包含了丰富的图像和生动的动画效果，因此需要加载一段时间。

kobe

当用户点击了一个导航选项，页面随之改变（部分变化），新的内容就出现在了显示先前内容的区域里。这种布局中导航滑动和滚动的效果，由公共JavaScript库来支持。

对用户来说最主要的优势来自于一个简单的事实，即通过更少的鼠标移动和点击，来获得用户想要的信息。由于这个方法非常新，对那些使用非传统导航就会 感到困惑的用户来说是个好机会。有些种情况下，一个“静态”版本可能会派上用场，甚至是有必要的；比如你将不得不为搜索引擎，和禁用了 JavaScript的用户提供另一版本。

layouts-42

fish

viget

多栏布局

多栏（3栏以上）不一定就是复杂的设计。从反面看，如果设计得当，多栏对访问者会十分有帮助，因为它们为可见的导航选项提供了更好的综览，从而使得用户可以快速地找到他们想要的信息。

过去几年里，我们见证了网站内容的爆炸，这降低了用户在网站上所投入的注意力和时间（详情查看ReadWriteWeb）。所以，难怪设计师们都开始尝试寻找更简洁的信息呈现方式，既能让访问者在网站上停留的时间尽可能的长，又能更简单的找到内容。

47

实现这一目的的方法之一，就是使用多栏相邻的布局。这个想法十分合理。屏幕分辨率在最近几年里不断增加（然而，像华硕Eee PC这样的上网本得以广泛使用的话，情况可能会有所改变），从而可以为用户提供更多横向空间，也能给设计师提供额外空间去填充内容。

结果表明：现在越来越多的设计师，采用越来越多的栏在设计中。我们研究发现有向这些所谓多栏布局发展的强大趋势，通常在1000像素的屏幕中，宽度固定为850像素。多栏常被用在杂志布局和大项目中。在这些布局里，栅格常被用来保证结构平衡、层级和次序。

使用多栏布局，主动留白以及各自内部栏之间的重要性不能被夸大。（主动留白是故意留出空白，以更好地表现页面结构，强调内容的不同区域。）

为此，设计师常利用“Shneiderman的真言”（“首先表达大局，随后显示细节”），先为用户提供一个功能概况，然后按需提供细节——稍后，当某个链接被点击时（Mozilla Labs就是个最好的例子）。

labsmozilla

31three

mc

巨型插图和充满活力的图形

如同巨型版式主宰当今网页设计一样，无论是专业还是个人网站项目中，巨型插图似乎都越来越受欢迎。设计师正试图用互动元素（植入式视频区）和视觉元 素（导言区和插图）来传达网站的信息。在近来的设计中，插图比原来占据更大的空间，通常作为巨型版式的补充。它们更具吸引力，并且更加生动，因此更容易被 访问者记住。

另外，设计师也运用一些充满活力的图形，尤其是为背景，也为其他设计元素。不同的风格和图形均被使用：如陈旧物、拼贴画、剪贴册、饰品、复古样式、水彩、有机材质和摄影背景等。

illus5

versions

depot

wpc

ilc

aqua2

aqua3

比以往更多的留白

或许最可预知、也最为有益的事情之一，就是在过去几年的网页设计中，留白日益突出。它在许多设计中处于首要位置，并被广泛用于改善网站的文章流和结构。

事实上，我从未见过内容区和导航菜单上有这么多内边距。外框和内容区的内边距在20至25像素正逐渐成为一种约定俗成的法则，甚至更大的内边距也被普遍接受。希望，这一趋势继续发展下去。

illus4

noob

whitespace1

wm

ws

社会设计元素

纵观blog圈，你几乎找不到一个不使用社会性图标或区块，让读者通过知名社会性媒体网站去推广它们内容的blog。每个作者都希望得到可观的流量和认可，这也是为什么在当今设计中，社会性元素变得更大、更具吸引力。

社会性图标到处可见，但多出现于文章的右上角或底部。社会性区块经常被放在文章下面，有时也出现在相关文章列表旁边。Twitter，Flickr和Last.FM的混合仍然是blog和项目中常见的组合。

komodo

veerle

cra

twi

heart

peak

对话式导航

去年我们曾写过一篇名叫“对话式导航”的文章，在现在的很多网站中，貌似这个元素依然流行。导航所要完成的最大任务，是清晰地引导用户到达网站的不同地方。然而，要通过一两个关键字来表达内容是极其困难的，特别是使用横向导航。

这就是为什么通常导航没法用适当的关键字一个接一个简单列出的原因（即使用“无对话的”导航）。取而代之，设计师正在试图具体解释什么选项可用，什么是访问者点击网站链接后所期望的。

因为设计师正尝试开展与访问者之间的更多对话，所以我们愿意称这种方案为“对话式”导航，相对于那种建立在关键字列表基础上的“无对话的”导航。

speaking1

speaking2

30

evan

free

导航区通常都是具有相同高度和宽度的区块，因此访问者感觉内容能被轻松引导。大图标也使用的很频繁，但在大多数情况下，它们是否适用取决于网站的内容和总体布局。导航设计中的鼠标悬停效果会让浏览变得更愉快。

speaking3

动态的tab

作为交互设计中最流行的趋势之一，tab可以动态地改变内容区域。活动tab背后的想法是，当页面被加载时，所有tab的内容也被加载，但一次只显示一个tab部分的内容（属性展示被用来实现这种效果）。你可以参照教程动态的tab 和tab在jQuery中的视觉控制 来创建动态的tab。

ee2

coll

apple

busy

ffoo

05u_tabs

]]> http://www.aiyooo.net/blog/archives/301/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%8f%91%e5%b1%95%e5%8e%86%e7%a8%8b%e4%b9%8b2009.html/feed 0 Twitter, Flickr ,Bing,Live,Hotmail http://www.aiyooo.net/blog/archives/298/twitter-flickr-binglivehotmail.html http://www.aiyooo.net/blog/archives/298/twitter-flickr-binglivehotmail.html#comments Tue, 02 Jun 2009 13:39:10 +0000 小繁 http://www.aiyooo.net/blog/?p=298 twitter, flickr ,skydrive,bing,live,hotmail今天均不能访问了,而MS停用live.com域名颇及到刚刚上线的BING了实在让人匪夷所思,twitter, flickr也被河蟹.OMG,大中华局域网终于建设完成.

]]> http://www.aiyooo.net/blog/archives/298/twitter-flickr-binglivehotmail.html/feed 0