[转]50 个美丽且对用户友好的导航菜单设计

Matt Cronin版权所有
作者：Smashing magazine, Matt Cronin
译者：UCD翻译小组 , JJYY
原文：http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

对 任何网站来说，可用性都是一个重要的设计目标，而友好的导航是其中的要素之一，它决定着用户在网站中如何被引导，如何与网站进行互动。如果没有友好的导 航，网页的内容就很难发光和被用户发掘。菜单必须要足够简单到用户容易理解，还要包含必要的元素来引导用户浏览整个网站——同时要有很棒和有创意的设计在 上面。

下面我们将展示50多个出色的导航菜单—— 我们挑选了一些用CSS实现的菜单，一些CSS+Javascript的菜单，还有flash的菜单设计。不管他们具体是用什么实现的，共同点是：对用户友好、富有创意，并且完美符合所属网站的风格。
感兴趣的话，您还可以阅读我们之前的几篇文章：

• 基于CSS的导航菜单：时髦的解决方案 - 列举了一些很时髦的CSS菜单
• 导航菜单：趋势和例子 - 收集了一些很能激发灵感的导航菜单。

1. 基于CSS的导航菜单

Loodo
一个色彩斑斓、给网站增加了触摸感的菜单。

Acko.net
设计者Steven Wittens采用了一种独特的透视角度来呈现导航菜单。

Web Design Ledger
该网站有一个很棒的菜单，大尺寸的按钮非常舒适且没有和网站内容搅在一块。

UX Booth
在导航栏下面使用了一个漂亮的辅助文本区域来说明当前的菜单项。

Nopokographics
垂直文字的导航菜单非常罕见，因为他们用起来不是那么舒服。但一些设计师总会迎着风头去做些突破。Nopoko Grphics就使用了箭头指示和鼠标悬浮(Hover)效果在他们的垂直导航菜单上。

Icon Designer
这个网站在首页上使用了超大的图片菜单，用户的注意力马上就被这个贼大的菜单拽了过去，看起来对用户非常方便。

Cosmicsoda
这个大大的菜单十分醒目，并且使用了轻微的Hover效果来为菜单增色。

Designsensory
十分符合用户认知的二级菜单导航，使用2种颜色区分，有效的告诉用户当前激活的菜单项目和未激活的项目。

Smallstone
Smallstone, 美国的唱片公司，采用了一种独特的导航菜单，厄。。。这东东叫做“空间回音Rloand SE-201型号”.

TNVacation
这年头很难找到一个看起来很棒的下拉菜单，不过这里就有一个例外。

Clearleft
Clearleft网站使用了几张纸片来作为它们的导航。

45royale
一个简单、干净、美丽的菜单，还有着不错的Hover效果。

Design Intellection
一个非常棒的分块式导航菜单，它告诉了我们在一个简洁的导航菜单中如何精彩高效的使用Hover效果.

Ronnypries.de
导航菜单并不是一定要设计得像一个传统的导航菜单。Ronny Pries使用了一个类似房屋户型图的设计来引导访客在网站中穿梭。

Jiri Tvrdek
Jiri Tvrdek让导航选项看起来像树上挂着的叶子，十分有创意，让人印象深刻。

Water’s Edge Media
导航选项被用夹子晾在晾衣绳上，来自Patricia Abbott.

Matt Dempsey
用笔刷涂抹来高亮导航选项。

Cognigen
当前所在的导航选项在视觉上被按进去了，十分明显且符合认知。

District Solutions
又是一个少见的垂直文字导航，而且看起来很不错！

Jayme Blackmon
这个网站看起来是让你来勾选“已经完成”的标记。

Jeff Sarmiento
为什么不尝试一下溢出的效果呢？

Studioracket
一个很不寻常的导航菜单，它采用了一种思维导图的形式来描绘导航。除此之外，这个导航菜单还真的很难画！

Cultured Code
精巧独特的效果让菜单非常夺目，还有贼棒的配色和Hover效果。

Nando Designer
这位葡萄牙设计师采用了一张纸和手写字体作为网站的主要导航。

Bonfiremedia
有的时候印刷排版已经足够说明一切...

Artgeex
生动鲜艳的印刷排版应用。

Gloobs
一些设计师在“联系我们”的导航选项中加入了邮票印章的设计。

South Creative
这个网站使用了很大的导航按钮，并有着不错的Hover效果。

Mac Rabbit
另一个又大又干净的菜单，它采用了图标来辅助用户识别每一个选项的功能。

RapidWeaver
这个菜单有着干净光滑的布局，同时它的二级菜单采用了很赞的半透明来和主菜单进行区分。

DFW UPA
图标很好的辅助和强调了每一个导航选项。

Revolution Driving Tuition
一个很棒的褴褛式风格网站，它的菜单很好的融合在网站布局中。

Duarte Pires
这个菜单摆放的位置和网页正文很接近，十分容易使用。设计采用了大图标来给导航增加视觉元素。此外在其他页面上这些图标也以一致的竖直布局出现，虽然图标本身不是很完美，但整体来说是个不错的点子.

Valetin Agachi
这个导航有着十分独特的方式来强调被选中的项目，同时这个菜单布局在整个网站都是一致的。

Tutorial9
最近Tutorial9进行了非常正点的重新设计，菜单组织很棒，可用性很高。

2. 基于CSS和JavaScript的菜单

Agami Creative
设计师常常在导航上使用提示信息，但提示信息和侵蚀效果的结合还是挺少见的。

Whitehouse.gov
这个例子完美的告诉我们怎样把大量的内容组织在简洁、容易辨认的区域内，此外再夸一句：非常棒的下拉菜单设计。

AppStorm
又是一个出色的高可用性下拉菜单设计。

Eric Johansson
Eric Johansson, 来自瑞典的设计师, 使用了竖直的长条图片作为导航。

Coda
这个有着美丽Hover效果的菜单非常便捷。二级菜单设计一致且包含了所有的内容在里面。

Dragon Interactive
Dragon Interactive的菜单有着华丽的特效和配色，这个菜单是基于jQuery的。

Bern
我十分钟意这个布局，特别是这个菜单融合入整体褴褛式风格中的方式。这个菜单也采用了jQuery的下拉特效。

Abduzeedo
在最近的重新设计中，Abduzeedo介绍了一种jQuery的幻灯片式导航。
(我忍不住插一句，好像jQuery很火嘛...)

3. 基于Flash的菜单

Iipvapi
多彩的倾斜式导航，来自一位印度的网页设计机构。

Not Forgotten: The Movie
大部分娱乐网站都使用Flash和不同寻常的导航菜单来吸引用户的注意。比如这个，导航项目被放在卡片上排列着。

Nick Tones
Nick Tones, 一个动态、多彩的，而且仍然保持了可用性的导航菜单。

woonky.ideas
这个阿根廷的设计机构把CD和书本放在桌子上，每一个代表着一个导航项目。当然只要我们把鼠标放上去，就会有信息告诉你里面是啥东西。

Gotmilk
这 个Flash网站的设计师呈现了非常具有原创性的东西。导航菜单被放置在一个缎带上，每一个导航选项有着简单精致的Hover效果。当鼠标移到图标上 后，被替换为图标所代表的栏目标题。对这个细节一般常见的设计会使用提示信息，这个网站的设计师没有随大流，而是使用了另一种方式来让它夺人眼球。

Spectra Visual Newsreader
一个色彩斑斓的美丽Flash菜单，加上出色的可用性。

NickAD
这个网站的亮点在于它十分独特和容易使用的导航。

Sensi Soft
令人称奇的作品集设计，出色的导航明显经过了深思熟虑，并且非常便捷。

4.高可用性的导航

tap tap tap
美丽的布局和菜单，还有出色的效果。

Apple
苹果的网站十分特别，尤其是因为它的导航布局。Mac菜单的设计十分令人惊叹，同时配有图片，很难想到有比这个更方便的在菜单中查找商品的方式了。

Alex Buga
访问者在这里可以使用摆放整齐的大幻灯片来查看新闻和项目。

CREASENSO
这个作品集首页上的内容非常简单，组织得十分易用。

polargold
有着令人眩晕的视觉效果的Flash作品集。由于采用了手风琴式的布局来展现内容，所以这个网站没有专门的栏目页面。粗大的字体强调了菜单项的重要性。

Colourpixel
Colourpixel的作品集有一个十分有趣的布局，它把所有的栏目全部组合到了一个页面上，你可以展开或隐藏任意的栏目，全看用户的喜好。

DVEIN
非常出色的Flash作品集设计。这个网站把所有作品全部组织到了一个有趣的环状滚动列表中。

Alexandru Cohaniuc
这个作品集因为它漂亮的布局而出色。手风琴式的效果允许用户在项目和作品中自由导航。

Porsche Canada
加拿大保时捷的网站有着非常体贴用户的导航，对于每一个菜单项都列出了很多子栏目。这个菜单的可用性和便捷性是十分高的。

Jeremy Levine Design
这个建筑设计作品集通过独特的布局让用户可以很容易的在网站中浏览。每一个菜单项有着很多效果和过渡转换，十分便捷。

firstborn
知名设计工作室Firstborn在他们的作品集中使用了横向可拖动的导航。这个导航方式同时也可以在浏览其他内容（例如缩略图）时呈现。

Benjamin David
这个作品集采用了垂直的幻灯片滑动和菜单切换进行组合。许多内容被组合放在了一个鲜明的菜单之中。

Thibaud’s Portfolio
另一个令人眩晕的作品集，十分有创意的导航。同时它还采用了色彩区分，相似的作品被组合在了一起。

Jason Reed Web Design
对于把许多信息塞在一个小空间来说，手风琴式设计十分有用。Jason Reed在他的作品集中使用了一个漂亮的手风琴设计来允许用户进行翻页操作。

Marius Roosendaal
另一个很友好的手风琴式菜单把作品项目分类聚在一起。

5. 垂直导航布局

Danny Blackman
Danny Blackman的网站常被认为是极其出色的作品集设计之一， 一部分原因就是其令人惊叹的垂直布局结构。

Tomas Pojeta
这个网站是另一个使用垂直布局的作品集，把多个页面合并成一个页面，允许用户垂直的从一个栏目移动到另一个栏目。

volll
Voll使用了有着美丽插画作为背景的垂直布局结构。

Mediocore
Mediocore是一个很赞的作品集，虽然比一般的垂直设计呈现了更多的内容元素，但仍然看起来很不错。

6. 对用户友好的侧边栏菜单

FreelanceSwitch
FreelanceSwitch采用了非常棒的菜单来组织他们的文章。

Fubiz
重新设计后的Fubiz有一个出色的侧边栏，使用了幻灯片式切换来在一个小侧边栏中呈现非常多的内容。

Checkout
checkout拥有一个贼棒的网站。在特色栏目中有着一个极其简洁的列表风格菜单，上面还有很Nice的图标。

Ruby Tuesday
不错的网站——Ruby Tuesday。侧边栏菜单上有着特别的图标和光滑的Hover效果。

Concentric Studio
一个短小精悍的菜单还包含着滚动切换的效果。

Barack Obama
奥巴马总统的网站有一个列表式的侧边栏菜单，拥有合理的文字间隔和不错的对比度。

GABBO DESIGN
另一个简洁、间隔合理的列表菜单。

[转]高效时间管理－介绍GTD

[ 2009.02.09 | by 运田 | 分享无限 ]

　　人说在IT公司没有不忙的。你会发现每天RTX要闪烁几十个对话框是再正常不过的事情。可能你正好在写一个ppt，同时领导安排今天必须出一 封邮件，刚在酝酿的时候突然还会有人电话催你开会，离开时刚好还有个朋友在QQ上请求帮忙找回密码，每天周而复始，逢人遍说忙似乎成了流行的口头禅。你会 发现，时间永远也不够用，每天永远都有着“做不完”的事情。带着和所有人共同的问题，我了解了时间管理的方法论：GTD。下面我会带着一些自己的理解、更 加直白的介绍一下GTD。

　　GTD就是Get Thing Done的缩写，翻译过来就是“把事情做完”，David Allen这本书的中文名叫：《尽管去做》。GTD的核心理念概括一句话，就是：你必须记录下来你要做的事，然后整理安排自己一一去执行了。说起来简单， 做起来不容易，我们看一下GTD的五个核心原则是：收集、整理、组织、回顾、执行。

　　先记住这五个原则的先后顺序。

　　一、人类的大脑很强大，能存储很多东西，但让一个成年人回忆起所有童年的事情，很难。与其让大脑存放了这么多信息，不如把信息从脑海里拿出来记在纸上, 让大脑释放出来去思考如何做一件成功的事。所以，GTD的第一步是“收集”，把所有在脑海里浮现的信息（任务, 想法, 项目等等）记录到随身携带的小本子上（或者任何适合你的工具），把你的工作从大脑里面清出来，记录在可以看到的地方。GTD把这个叫做“收集箱”。

　　记录小提示：在纸上或其它设备里记录下工作时，应注意安排优先级，思考你的工作哪一项优先级最高，需要动脑筋。

　　记录的技巧：涉及到记录的工具和线上和线下两种情况。线上能提醒的可以使用Outlook的任务和日历。比如：几点要找张三打个打电话，几点要 发给李四一封邮件，几点去开会。另外还可以使用Google Calendar Sync把Ｇoogle日历和Outlook日历同步，随时在多个办公地点查看。

　　线下的工具是纸笔和手机，这里首先推荐的是纸和笔。当你“收集”完所有的信息后，就是“处理”了。

　二、 “处理（整理）”英文原意是Process，我提取了三点重要的内容：

　　1) 不把任何信息放回收集箱，处理完一件任务就打一个对勾。
　　2) 如果任何一项工作需要做，就马上执行去做（如果花的时间少于两分钟）；或者委托别人完成，或者将其延期。
　　3) 否则就把它存档或删除、或是为它定义合适的目标与情境，以便下一步执行。

　　两分钟原则：不能不提一下处理的两分钟原则，我想更细的是：1秒+2分钟原则，对突然打断的事情，一秒钟评 估，两分钟内能解决的，无论是任何事情，马上着手解决掉。如果不能在两分钟内解决，就进行下一步处理。这里不能拖，一件事一件事的来，一心不二用，两分钟 处理完一件事，马上回到主要任务上来。

三、“组织”。“组织”应该是GTD中最关键的一点。“组织”主要分为对下一步行动的组织与对备份资料的组织。
下一步行动的组织一般可分为：等待处理清单、将来处理清单、下一步行动清单。　　

　　1) 等待处理清单主要是记录那些委派他人去做的工作，比如有封邮件问这件事有谁负责，可转交处理，如果你是主管，可安排下属去做。　　
　　2) 将来处理清单则是记录延迟处理且没有具体的完成日期的未来计划等等。　　
　　3) 下一步处理清单则是具体的下一步工作。而且如果一个任务涉及到多步骤的工作，那么需要将其细化成具体的项目。老外认为不能在两分钟钟内完成的、需要一系列动作来进行的任务叫作“项目”。

　　常使用Outlook做时间管理的，还可以把Outlook建@todo，@waiting，@next三个文件夹进行“组织”任务。记得在工作中看到托哥使用的是“每日待办”文件夹。

　　备份资料来自于对任务可行动的处理结果。对备份信息的组织主要就是一个文档管理系统，可用很多工具去存档这些资料，以前我使用的是网文快捕，现在发现Onenote也不错，推荐Onenote2007。　

　　四、“回顾”。

　　我对回顾的理解是PDCA循环的一种方式，在每周回顾中，应该对比自己的年度目标，回顾自己在过去一周取得的进步，制定下一周的计划。如：回顾 你的长期目标、中期目标和短期目标、回顾你在Onenote里的笔记、回顾你在Outook里的日程表、回顾你写在纸上的清单、回顾你的项目进展情况等 等。

　　目前我采用的是每日回顾、每周回顾一次，对自己的工作和其它事情进行回顾，看看哪里做的不好，需要改进，重新做出调整计划。

　　五、“执行”就不用多讲，另外借用托哥的一个词“集中精神”，结合在一起就是：集中精神执行。

　　最后看一下GTD的工作流，作为对GTD几个核心原则的回顾。记住工作流，然后严格按这个工作流来处理你手头上的任务。

　　接近文章结尾，如果说时间GTD时间管理可以帮助我们做什么的化，我想无非是：更合理的安排时间、更宏观的看待工作、更方便归纳总结，更快速的提升工 作效率，让你成为时间的主人。有人说采用GTD时间管理可以有更为明确的人生目标，我想，严格按着他来执行你的工作，不断的去完善，一定会有一个清晰的未 来。下面是一些我经常浏览的GTD中文网站或论坛：
http://www.gtdlife.cn
http://groups.google.com/group/gtdlife?hl=zh-CN
http://www.mifengtd.cn/articles/category/gtd

地区性B2C我的理解

　　曾经在一地区性B2C网站就职，半年的时候感触良多，在这里谢谢自己的感受。
　　刚刚入职的时候感觉地区性B2C网站也一般的B2C网站一样，都是利用互联网这个大平台来进行商品的销售。前期也了解了很多国内比叫著名的B2C网站。感觉前景一片明朗。但是做了一段时间后，当初的想法已经发生的转变。
　　第一、地区性B2C到底是什么？互联网的最初提出了一个地球村的概念，也就是无论你在什么地方都可以通过互联网来联系，或者说是购物，比如淘宝商城，你可以在北京购买广东的商品。但是地区性B2C呢？很明显，互联网的特性降低了，基本上就是一个网络订购，送货上门。面向的用户也只是所在地区的小众人群，所以这样的销售方式和一般的目录销售并没有多大的区别。
　　第二‘地区性B2C到底需要怎么发展？我以为如果地区性B2C网站把自己当作互联网企业来做，那么就失败了一半，为什么，因为你只是面对那些即使不用互联网也可以找到你的人群。所以地区性B2C首先应该把自己当作普通的零售商来做。
　　感触不是很多，就几点，很多东西想的出来说不出来，最有一点想法，地区性B2C网站不要依赖互联网平台，需要的两条腿走路，互联网只是其中的一条腿。

　　过几天还要有石家庄网络新锐聚会活动，人员还是那些，希望有所增加，争取这次大家都能带着自己的东西去，好好的交流，第一次显然很匆忙。时间定在3月初吧

又是微型BLOG！！！

　　嘀咕——中国又一个微型博客。从此这滩浑水又浑了点。C2C（copy to china）可以。但也要有点尺度。成功的模式你可以复制，但也有有点创意。国内做微博做的好的我感觉就是饭否和叽歪。其他的都是不死即伤。
　　嘀咕算是明知山有虎偏向虎山行。上来就狂打明星牌，弄点明星上来拉拢粉丝。有用吗？明星有空还谢谢blog呢。谁没事来你这里忽悠。粉丝每天爬在这里等明星的消息？这个牌没有什么心意，还没有叽歪的确立一个主题让大家喷口水有意思。
　　中国的互联网的太厉害，都渴望成功，但都不愿意用脑子，看到好的一窝蜂的就扎进来。行吗？骗VC？忽悠大众。
　　Twitter成功了，原因之一可能是周边的应用服务很多。你可以到网上找到很多和Twitter相关的服务类网站。在中国你能找到服务于微博的应用吗？有也是微博们自己开发来增加服务的。
　　该停了，做点该做的事情。别老是渴望躺在被窝里就能成功了。