Lazee

Navigation is the most significant element in web design.  Since web-layouts don't have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn't mess around with it.
导航菜单是页面设计中最重要的元素。 当页面布局不具有任何让用户适应的一个自然的表现形式时，一致的导航菜单就是仅有的几种为用户提供定位和浏览站点的设计元素之一。 设计师不能在这方面胡整，因为用户需要依靠它。

a1.Significant - [sigˈnifikənt] - 重要的，意义重大的
   Their change of plan is strange but i don't think it's significant.
a2.physical representation - [ˈfizikəl] [ˌreprizen'teiʃən] - 自然的表现方式
a3.stick to - 坚持，i can stick to my guns 我能够坚持自己的主张。
a4.consistent - [kənˈsistənt] - 一致的，始终如一的
   What you're saying now is not consistent with what you said last week
a5.sense of orientation - [sens] [ˌɔ:riənˈteiʃən] - 方向感，定位能力
a6.rely on - [riˈlai] - 信赖 依靠，指望
   We are relying on your decision
a7.Mess around with - 对...胡凑合，瞎搞
-------------------
a.in web design
b.provide sb with sth.
c.guide them though the site

That's why in most cases it's where simple, intuitive and conventional solutions are usually the best option. However, it doesn't mean that they need to be boring. One year ago we've presented modern approaches of navigation design. Let's take a look at what's different now, which trends one can observe and what ideas you can develop further in your projects.
这就是为何在大多数的案例中简单，直接，传统的解决方法通常是最好的。尽管如此，这也不意味着就一定会变的无趣。一年前我们介绍了新式导航菜单方案，让我们看看现在都有些什么不同，有什么趋势可以追随，有什么好点子你可以在自己的作品里继续开发。

b1.intuitive - [inˈtju:itiv] - 直觉的
b2.conventional - [kənˈvenʃənəl] - 普通的，常规的，传统的
b3.present - [priˈzent] - 介绍，引荐
b4.approach - [ə'prəutʃ] - 方法，方案 - approaches
b5.observe - [əbˈzə:v] - 注意到
-----------------
a.in most cases
b.the best option

This aricle persents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they've been teken. We've missed somthing? Definitely! Let us know in the comments!
这篇文章介绍了最近的趋势，案例以及新式导航菜单的新颖的解决方式，所有的图片可点击进入他们的出处。我们遗漏了什么吗？那是肯定的，让我们在留言中得知。

c1.innovative - [ˈinəuveitiv] - 新颖的
c2.definitely - [ˈdefinitli] - 肯定的
-------------------
a.lead to the site

1. Trend toward “speaking” block navigation - 趋向于“会说话的”块状导航

The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. However, often it’s quite hard to communicate the content of a site section within one or two single keywords, particularly if horizontal navigation is in use. That’s why often navigation options aren’t simply listed one after each other using some appropriate keyword (”silent” navigation); instead, designers attempt to concretely explain which options are available and what the visitor should expect from site sections once clicking on corresponding links.
导航菜单需要完成的最重要的任务是明确的指导访问者在网站不同区块间浏览。然而，要通过一两个关键词来让导航菜单与网站不同区块的内容进行沟通时常是很困难的，尤其是使用横向导航的时候。这就是为什么导航项并非经常用些个合适的关键词简单一个一个列出来（“静默的”导航，也就是传达的含义太少）；相反的，设计者尝试具体的去说明些个项目是可使用的，以及对访问着的预判可以让他们在网站的区块中一次性点击到正确的链接上。

d1.fulfill - [fulˈfil] - 完成，履行
d2.unambiguously - [ˌʌnæm'bigjuəsli] - 明白的，明确的
d3.particularly - [pəˈtikjuləli] - 特别的
d4.appropriate - [ə'prəuprit] - 适当的
d5.attempt to concretely - ['kɔnkri:tli] - 尝试具体的去...（经过努力的）
d6.corresponding - [ˌkɔriˈspɔndiŋ] - 相符的，相应的

In fact, over the last months we’ve observed a strong trend toward exactly this navigation scheme; and since designers try to initiate a more effective dialogue with visitors we prefer to call it “speaking” navigation — contrary to “silent” navigation based upon the listing of keywords.
事实上，一个多月以来我们注意到一个强烈的趋向正是这篇导航企划所讲；并且当设计师尝试开始一种新的与访问者更加有效的对话方式时，我们将称这为“会说话”的导航-相对于以罗列关键字为基本的“静默”导航 。

e1.exactly - [igˈzæktli] - 正是，正好是
e2.scheme - [ski:m] - 方案，企划
e3.initiate - [iˈniʃieit] - 发起，开始，创始（某事物）
e4.contrary - [ˈkɔntrəri] - 相对于

To make the perception of information easier, the navigation is often structured by using blocks of the same height and width; large icons are used quite often, but in most cases the decision whether they are appropriate or not depends on the content of the site and the overall layout. “Soft” hover-effects often support the navigation design by making the browsing more pleasant.
为使信息理解起来更加容易，导航通常用相同宽高的方块组成，也经常使用大图标，但在大多数情况下决定它们是否恰当取决于站点内容和总体布局，导航设计采用柔和的悬停效果可使浏览更加舒适。

f1.perception - [pəˈsepʃən] - 理解
f2.appropriate - d4
f3.overall - 总体的
f4.pleasant - [ˈplezənt] - 舒适的

This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well.
这种导航方案不仅仅可以用在水平导航菜单上，也可是用在垂直导航菜单中。

2. Mac-style still popular? -苹果式还流行吗？

One can discuss if the Mac-style is the survivor of the Web 2.0 design attack or it becomes a standalone design element used independently from glossy colorful buttons with 3D-effects. Or maybe it’s just a temporary trends toward grunge style — nobody knows, really.
一点可以讨论的是苹果式是web2.0设计的救星，或是这种带3D效果的平滑彩色按钮变成了一种可独自使用的独立元素，抑或着它就只是一种相对于"恶心式"的暂时的流行趋势---这就么人能知道，真滴...

g1.standalone - 独立的
g2.independently - 独自地
g3.glossy - 光滑的
g4.grunge - [grʌndʒ] - 难看的，乏味的 - grunge rock

In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. What’s interesting is that the style is used not only on Apple-related sites, but also on web-sites which aren’t directly related to Mac. Particularly when it comes to design of software products traditional Mac-style is often imitated. Reason: it is visually appealing and looks cool.
不管怎样，在过去的几个月里一堆网站将融合了苹果式导航。有趣的是这些样式并不是只用在与苹果相关的网站上，也用在与苹果无直接关联的网站。尤其是当涉及到软件产品时，传统的苹果样式常常被模仿。原因是：它看起来在视觉上的确吸引人并且看起来很酷。

h1.integrated - [ˈintigreit] -(into, with) 成为一体
h2.particularly - 尤其
h3.traditional - 传统的
h4.imitated - [ˈimiteit] - 模仿
h5.visually appealing - [əˈpi:liŋ] - 视觉上吸引人的
a.in any case - 无论如何，不管怎样
b.comes to - 涉及到

A navigation bar doesn’t need to look exactly like a typical Mac-style-navigation. Variations - [ˌveəriˈeiʃən] - 变化 are also possible. 一个导航条不一定非要与典型的苹果样式完全一致，变化也是可能的

“Green” version of the traditional Mac-style menu

Since navigation bars can’t exist alone and need to be supported by the overall design, colorful one-page-sites with happy talk and overused stock photos designers are being replaced with more decent, serious and calm layouts. And that’s a good thing. However, when using the Mac-style please keep in mind that it shouldn’t be used for the sake of it but has to fit to the overall design.
因为导航条无法独自存在，需要由整体设计作为支撑，包含欢乐的谈话和设计师的照片过度的存档的多彩的一页式网站正在被更大方的，认真的，平静的布局所替代（什么破句子），这是个好事情，然而，当使用苹果样式时请牢记：不要为了用它而用它，要看整体设计。

i1.decent - [ˈdi:sənt] -大方的，得体的
i2.serious - [ˈsiəriəs] - 认真的，严肃的
i3.calm - [kɑ:m] - 平静的
i4.sake - [seik] - 缘故，理由
a.it should't be used for the sake of it. 不要为了用它而用它

3. Visually appealing icons are used more often - 更经常的使用吸引人的图标

To communicate navigation options in a more effective way, designers often make use of appealing icons. In such cases it’s important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and isn’t too small. Attractive icons are, of course, always preferred to the boring ones.
为了以更有效的方式表达导航项，设计师经常使用吸引人的图标。这种情况下确保图标容易理解；能清楚表达信息；与他代表的链接相符合；不要太小是很重要的。有吸引力的图标当然会比无趣的那种要好很多。

j1.convey - [kənˈvei] - 表达，传达
j2.correspond to - 与...相符合 d6
j3.communicate - vt. 传达
j4.appealing - h5 - 吸引人的

Icons can also be hidden into the links; this effect should be used sparingly - ['spɛəriŋli] - 图标被隐藏在链接中，这种效果应当用的保守一点.

Icons can be placed on the left-hand side…

…and on the right-hand side in the sidebar.

4. Vertical tabs - 垂直标签

Although traditional desktop-applications almost never make use of vertical tabs, in the office vertical tabs are used at least as often as horizontal ones. In fact, designers often try it out; and the results can be quite interesting.
虽然传统的桌面应用程序几乎不用垂直标签，在Office中垂直标签的应用至少与水平标签一样多，事实上，设计师经常试验，结果会非常有趣。

Before using vertical tabs you should make sure that it is possible within your layout and you actually have enough area to cover all navigation options on every single page. And, of course, the text is harder to read.
在使用垂直标签之前你需要确定他可以适应你的布局，并且你在实际中能够在每一个单页照顾到所有的导航项，并且文字更难读。

Tabs on the right-hand side.

5. Handwriting in use.手绘的应用

Recently we already discussed the hand-drawing style in modern web-design. And what for design layouts also holds olds for its specific elements — for instance - [ˈinstəns] - 例子, for navigation.
最近我们已经讨论过新式页面设计中的手绘样式，以及布局设计，以及别的独立元素-列举和导航（没完全看懂....）

6. Experimental solutions - 实验性的方案

Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.
虽然想出一些奇怪的或极不寻常的站点导航通常不是最好的主意，设计师倾向于在一些疯狂和罕见的试验中冒险。当想要弄点什么新东西出来的时候，确保别给你的访问者制造一些不必要的障碍把你的站点的可用性丢尽危险之中，任何用户不能搞明白的导航都是失败的。

k1.tend to - 倾向于
k2.unique - [ju:ˈni:k] - 第一无二的，极不寻常的
k3.risk - n.风险 vt.冒险
k4.barrier - [ˈbæriə] - 障碍
a. come up with - 想出，提出
b. make sense out of - 在...中有意义

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

生词表：

a1.Significant - [sigˈnifikənt] - 重要的，意义重大的
   Their change of plan is strange but i don't think it's significant.
a2.physical representation - [ˈfizikəl] [ˌreprizen'teiʃən] - 自然的表现方式
a3.stick to - 坚持，i can stick to my guns 我能够坚持自己的主张。
a4.consistent - [kənˈsistənt] - 一致的，始终如一的
   What you're saying now is not consistent with what you said last week
a5.sense of orientation - [sens] [ˌɔ:riənˈteiʃən] - 方向感，定位能力
a6.rely on - [riˈlai] - 信赖 依靠，指望
   We are relying on your decision
a7.Mess around with - 对...胡凑合，瞎搞
b1.intuitive - [inˈtju:itiv] - 直觉的
b2.conventional - [kənˈvenʃənəl] - 普通的，常规的，传统的
b3.present - [priˈzent] - 介绍，引荐
b4.approach - [ə'prəutʃ] - 方法，方案 - approaches
b5.observe - [əbˈzə:v] - 注意到
c1.innovative - [ˈinəuveitiv] - 新颖的
c2.definitely - [ˈdefinitli] - 肯定的
d1.fulfill - [fulˈfil] - 完成，履行
d2.unambiguously - [ˌʌnæm'bigjuəsli] - 明白的，明确的
d3.particularly - [pəˈtikjuləli] - 特别的
d4.appropriate - [ə'prəuprit] - 适当的
d5.attempt to concretely - ['kɔnkri:tli] - 尝试具体的去...（经过努力的）
d6.corresponding - [ˌkɔriˈspɔndiŋ] - 相符的，相应的
e1.exactly - [igˈzæktli] - 正是，正好是
e2.scheme - [ski:m] - 方案，企划
e3.initiate - [iˈniʃieit] - 发起，开始，创始（某事物）
e4.contrary - [ˈkɔntrəri] - 相对于
f1.perception - [pəˈsepʃən] - 理解
f2.appropriate - d4
f3.overall - 总体的
f4.pleasant - [ˈplezənt] - 舒适的
g1.standalone - 独立的
g2.independently - 独自地
g3.glossy - 光滑的
g4.grunge - [grʌndʒ] - 难看的，乏味的 - grunge rock
i1.decent - [ˈdi:sənt] -大方的，得体的
i2.serious - [ˈsiəriəs] - 认真的，严肃的
i3.calm - [kɑ:m] - 平静的
i4.sake - [seik] - 缘故，理由
j1.convey - [kənˈvei] - 表达，传达
j2.correspond to - 与...相符合 d6
j3.communicate - vt. 传达
j4.appealing - h5 - 吸引人的
k1.tend to - 倾向于
k2.unique - [ju:ˈni:k] - 第一无二的，极不寻常的
k3.risk - n.风险 vt.冒险
k4.barrier - [ˈbæriə] - 障碍

短语:

a. come up with - 想出，提出
b. make sense out of - 在...中有意义
a. it should't be used for the sake of it. 不要为了用它而用它
a. in any case - 无论如何，不管怎样
b. comes to - 涉及到
a. in web design
b. provide sb with sth.
c. guide them though the site
a. in most cases
b. the best option
a. lead to the site

DesignForFun uses icons to help visitors to filter the content they’re looking for. Depending on the clicked icon the background of corresponding links changes. However, the selection of icons may be not the best one as it’s unclear hat icons stand for. Fortunately, title attribute is in use.

Interesting concept: the hover-effect on jBunti depends on the selected month of the year. Warm months are associated with reddish colors, cold months with blueish colors. 12 hover-colors in use.

Playground Blues tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.

Steven Holl is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.

Polkdesign uses a calender as the central navigation element. Flash.

Hopkingdesign offers not a tabbed-navigation; it’s a vertical navigation placed at the top of the page. Looks at least unusual.

No, Adipintilie.eu has navigation options also placed at the top; however, these are only external links.

Flash-based 3D-effect used on Gol.com.pl. The menu can also be expanded.

The navigation on Wards-Exchange.co.uk fits to the brochure design. Or the other way around.

On Kriesi.at the hovered navigation option is dynamically expanded and shows the icons which illustrate what to expect in the section of the site. The effect is in this case not necessary.

Not really new, but still beautiful. Folietto.at uses the free area effectively and sparingly. You may notice an interesting visual effect when hovering the links.

inBloom has a menu with animation. The beetle doesn’t care what option you choose, it crawls its long path through the navigation tree anyway. This is an example of how animation can be unobtrusive.

Cobahair.co.uk uses only BIG typography…

…and HelloColor.com uses small typography with rainbow colors.

Carbonstudio.co.uk delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.

Maxandlous.com provides hover-effects with visual hints. It looks nice and unusual.

Scrollomania in all possible directions on Letters-Numbers.com.

OK, how can you come up with this one? Nickad’s Flash-based construct becomes visible only if the mouse is clicked and remains being clicked.

Nike offers a kind of remote control. To navigate you need to click and drag. While dragging, move the mouse up to move forward, down to move backward, and left/right to turn.

嘿...算了，突然随便点了某人的博客，见到了一篇描写4年一遇的日子里面一只经常装企鹅的小熊（天知道那是什么...）,这文章里还说：我以为你聪明，你以为我清醒．其实，我们都错了．（也不知道这是在说啥），只是，很奇怪，博博呀，我突然觉得有些事情我们都错了。

今天这位结了婚兄弟说了一句让我吃惊的话：“咱们认识都10年啦~”，他想说的这个“咱们”实际上是说我跟他俩，他俩就是上篇文章中的那对绝配，他俩是从小的朋友。

我说我跟她是认识了10年，跟你只有8年，丫还感觉挺受伤，我就不着他。

10年了，依旧没有结果，我真不知道自己这10年都搞了些什么飞机，如今搞的一团糟，这女人就算立刻要跟我结婚我都不敢答应，我付出的感情太多以至于我害怕得到她， 如果她先跟人结婚我就可以全身而退，可丫的随随便便就结束了自己2年多的一段感情，跑来跟我说要是你有房有车的话我就跟你结婚。

拜托，到底想做什么，啊？

如果能让我选择我就回到那一年开学分座位时煽丫班主任一大耳刮子，我该跟一群二杆子做到教室最后。 

因为今天与一个跟我关系复杂的女人和一个头脑单纯的男人在一起，这对绝配整的我想揍人，需要澄清的是他们并不是物理上的一对，而仅仅是一个巧妙的组合，只对我一个人具有精神上的蹂躏作用，这女人不停的在说赐我一个男人来结婚吧，而这男人又不识时务的在一边瞎搅和，我真想掐死他俩。拜托，二位神智清醒一点好不好，我虽说铁石心肠，但也经不起这么折腾。

今天有人搅局，我精心策划了一个偷吻的场景，却被一个不甘寂寞的男人给搅了，我又不能怨他，因为丫的确太郁闷太需要与人交流，经他一阵苦水乱流，整的我就没了心情，晚些时候虽说该场景按计划实施了起来，但由于对环境分析不够，导致失败，人没亲到，无奈之下只好对她口述了整个计划，她说还不错，呵呵，下回换个人试试。