Eyetracking points the way to effective news article design

Eyetracking points the way to effective news article design

When one of world’s best-known usability experts, Jakob Nielsen, conducts eyetracking research to test what his usability work has shown, the results generate some beneficial tips for online editors. This is what happened in late 2005, when Nielsen and Kara Pernice Coyne, the Nielsen/Norman Group’s director of research, conducted an eyetracking test with 255 people in New York City.

With a little more than half of the participants (63 percent) ages 30 to 49, the test generated results applicable to the target audience for most news sites. Additionally, 20 percent were 18-29 and 16 percent were 50-64. Fifty-eight percent were female, 42 percent were male. Every test subject was given 50 tasks to complete. Sessions with each test subject lasted about one to two hours.

Coyne (who we interviewed for this column) stresses that crucial to understanding the testing results is an awareness of the user’s motivation or goal behind each task. Some of the testing scenarios included asking the user to “read the news” or “read/learn”, making a number these results particularly helpful to journalists. She said eyetracking is valuable in these cases because it indicates not only where our users look, but where key usability problems exist.

“[With eyetracking] we can see that a user may navigate the page of an interface that houses the info she wants,” she said, “but if the text is poorly presented, or the navigation is cluttered, or there are too many superfluous images so she cannot easily find what she needs. This is a lost opportunity.”

We’ve featured three of the more interesting journalistic study results below.
Featured finding #1:
Rewrite + reformat = remember

What if you could engage users in a story for about half the time, yet have them remember about 34 percent more of the content? That’s exactly what one test showed. Spending less than two hours rewriting and reformatting a story about New York City restaurants really paid off according to this study.

The image below shows the two stories tested:

The original version (left) was revised to increase white space, make the main idea concise, remove unnecessary images, shorten lines of text and add a graphic for each restaurant ranking. (Nielsen/Norman Group images, used with permission)

The eyetracking data is featured in the image below. Red areas indicate the areas where the fixation length (or the length of time the users spent look at that area of the screen) was longest. Dark areas indicate low or no fixation length on that part of the presentation.

Users spent a longer amount of time (about one minute) viewing the original version of the content (left) but remembered 34 percent less than those who received the reformatted story (right). In both cases a greater amount of time was spent on the left-hand side of the page. (Nielsen/Norman Group images, used with permission)

Nielsen and Coyne also ran a similar test with more complicated content – a story from the New York Times about Australians receiving the Nobel Prize for Bacterium work. The results were similar. Changing the story presentation to text with:

bulleted items

subheadlines

tighter writing
increased comprehension by 12 percent, with readers of the reformatted text indicating that they were more satisfied with the experience.Coyne calls these results “cool,” but adds that they were not unexpected.

“We have seen many striking results like this over the years,” she said, “so were not tremendously surprised by it. It makes sense too. If a user is comfortable, not hindered by clutter and superfluous words, and can scan the main points, he will get the summary of the article quickly and easily. Formatting for the Web goes a long, long way.”

So what?
What do these results mean for online journalists? Take the time to rewrite and reformat print stories for online if you want users to:

get through a story more quickly

remember more of the content

be more satisfied with the story experience.Coyne’s direct advice for online journalists includes making sure that no matter what, all pages and articles have clear well-written headlines at the top that users can scan to:

see what the article is about

confirm they are on the page they want to be on.
“Without [good headlines and subheadlines] people … need to read the text to figure out what the article is about,” she said. “But some people, many people, simply won’t do this. They will just move on.”She adds that overall, online stories can benefit from more concise writing, front-loaded with the main point first.

“Assume people will only read the first few words of a line,” she said, “so bulleted lists are always good, as is bolding or creating links from important, information-bearing words.”
Featured finding #2:
Precise and relevant editing = successful design

On home pages and story level pages, eye patterns indicated that text that isn’t precise and images that aren’t information-bearing don’t get looks, amounting to wasted space. For example, here is a test Web page where users were directed to “read news.”

This BNSF Railway page was tested by Nielsen and Coyne. Users were sent to this page and directed to “read news.” (Nielsen/Norman Group image, used with permission)

The hotspot below shows that the image of the train did not get eye fixations and that users eyes traveled around the page – not directly to the “top stories,” which is where the site’s news is located.

Users did find the “top stories” and spent the most time there, but only after traveling the page and making fixations in other areas. (Nielsen/Norman Group image, used with permission)

A different version of the BNSF page also was tested. The page and its corresponding hotspot are featured below. Notice that the longest eye fixations are on the area labeled “News Releases,” where the main stories are and where the site designers intended to direct them. Users seemed to find exactly what they needed and stay there when information was more clearly labeled. Again, the more “decorative” image gets no fixations.

Another page of the BNSF Railway site and its corresponding hotspot. (Nielsen/Norman Group images, used with permission)

So what?
These results indicate that every item on a news Web page needs precise and thoughtful editing. As indicated above in Featured Finding #1, users will read only the two-to-three words of a headline (a result that also was found in Poynter’s Eyetrack III study, http://poynter.org/eyetrack and seen in the hotspots from the first Digital Storytelling Effects Lab’s initial study, http://disel-project.org.)

Moreover images with little information are ignored. (More on this in next section.)

Coyne’s top three suggestions for online news designers are:

present text in a way that is easy to scan on the Web

create a simple navigational structure

replace useless graphics with useful ones or with white space.She adds news organizations need to stop taking their design cues from their print ancestors, even though a motivated user may put up with a poor Web design.

“[News Web sites] need to reformat for the Web medium,” she said. “But, users who are very interested in an article will read through it, even if it is presented as a wall of text. So the print format is not the worst for these very motivated users.”
Featured finding #3:
Photos edited for relevance = photos viewed

In the case of Web design a picture isn’t always worth those thousand words. According to Coyne users treat pages with superfluous images like obstacle courses: The images create barriers to content. Moreover, Nielsen and Coyne concluded that images appearing unneeded, at least peripherally, will be erroneously tuned out.

The types of images that get attention share these attributes:

Related to the content

Clear

Feature approachable people (clearly can see faces; people shown are smiling/looking at the camera)

Feature areas of private anatomy.In addition, the team says that individuals look at “real people” more than they do at images of models. Most assume that content that features models are advertisements, so they avoid it.

Take a look at this page from dancworks.com. Users were given the task to find out more about Mickhail Baryshnikov. Their eye traveled around almost all parts of the page, but the photo, which was more decorative than informational.

The danceworks.com site features an image of a dancer’s feet, which gets no fixations. (Nielsen/Norman Group images, used with permission)

Conyne recommends designers avoid the generic pictures that are often used just for the sake of having a picture.

“For example,” she said, “if an article is about a signature meal at a restaurant, say a tuna dish, display a scrumptious-looking picture of the plate of food. Don’t show a generic picture of a spoon and fork, as many sites do.”

When photos do contain people related to the task at hand, or the content users are exploring, they do get fixations. However, gender makes a distinct difference on what parts of the photo are stared at the longest. Take a look at the hotspot below.

Although both men and women look at the image of George Brett when directed to find out information about his sport and position, men tend to focus on private anatomy as well as the face. For the women, the face is the only place they viewed.

This image of George Brett was part of a larger page with his biographical information. All users tested looked the image, but there was a distinct difference in focus between men and women.

Coyne adds that this difference doesn’t just occur with images of people. Men tend to fixate more on areas of private anatomy on animals as well, as evidenced when users were directed to browse the American Kennel Club site.

So what?
These results provide tips for selecting photos.

Know your audience

Know the accompanying content and how photos relate to it. Is it decorative or informational?

When choosing between equally informative photos of people, be sure to use ones of “real” people, smiling, looking at the camera — not models which tend to been seen as photos accompanying ads.According to Coyne, sites that do design well include NYTimes.com and TheOnion.com.

“I am used to The New York Times,” she said. “But even more than being used to it, I like the content and the way they present it. The titles are succinct and look clearly like links- blue, bold. The images are crisp. The text is legible. All the most important information is there on the homepage, as opposed to the BBC.com where you need to click around to get any real information. The Onion also packs a lot of headlines on the page, so you can scan a lot before you choose to read further. That’s nice.”
Coming in April:
An interview with Poynter Eyetrack ‘07 researchers.

Coming in May:
DiSEL research results about:

the design and placement of “Breaking News” and supplemental links

how people move through different slide show designs

测试与优化您的目标网页(Landing page),提升转换率!

在网站分析工作中，我们往往需要得到各种决策数据来优化转换率（Conversion rate）,例如通过网 站分析数据优化媒介投放,关键词广告及内容网络网站等等。有许多广告主可能会忽视了优化目标页面，往往大多数的转换流失，可能来自于目标网页 (Landing page)！您可能使用过谷歌网站优化工具(Google WebsiteOptimizer)中的A/B测试，通过几周的测试，得出转换率较高的Landing page；或者使用谷歌网站优化工具的，多变量测试工具测 试改变网页细节元素来对比所有网页元素改进对转换率（Conversion rate）的影响！例如第一个测试您只更改了Landing page的标题,另一个测试中添加了含有号召性语句的较大按钮,所有这些改进都可以在同一时间来运行,并得出改进前与改进后的对比数据！

下面我们在SEM项目实践中整理与分析得出的影响Landing page重要测试元素:

1、联系/呼叫行动(按钮或元素)

• 页面上的位置
• 按钮颜色
• 按钮副本(同一按钮应用在网页多个位置）

2、表单/购物车

• 长度及形式
• 重要链接的位置(例如用户
• 形式及内容(过于复杂的表单及苛刻的必填字段等等)

3、标题

• 标题颜色、大小、字体等
• 标题在页面上的位置
• 标题与关键词的相关性(搜索广告)
• 副标题(是否含有副标题)

4、内容及诱导

• 产品/服务文字说明是否具有一定吸引力
• 图片（优秀的产品图片往往能增加客户购买的冲动与欲望)
• 号召(例如具有吸引力的折扣及活动吸引用户购买)
• 行动诱导(吸引用户立即采取行动，例如即刻购买获得100元代金券)

5、可信度

• 见证
• 案例研究
• 成功客户标志
• 可信度标志(例如告诉用户所有的产品都是原装正品,能得到什么样的质量保证等等)

附加测试内容

• 联系表单
• 目标网页颜色
• 目标网页重要图片
• 目标网页视频内容
• 目标网页动画
• 产品报价/优势
• 目标页面导航（主导航及下拉辅助导航)
• 特色产品
• KPI转换步骤
• 购物车漏斗(用户在购物中哪些关键环节流失)
• 放入购物车按钮

现在您可以开始测试目标网页(Landing page）的这些元素,通过以下步骤：

Step1:您需要达到什么样的目标

• 转换行动
• 受众(了解哪些用户群体是您的目标群体)

Step2:价值主张

• 产品的优势及能为用户带来什么价值
• 现在购买能获得什么好处(例如获得更多优惠及附赠一些礼品等)

Step3:应该如何规划您的测试？

• 您会在每一个阶段测试?
• 每个阶段的测试目标是什么？

Step4:Landing page页测试,应该从哪里开始呢？

• 请参考以上的列表

关于Landing page测试与优化实施，谷歌官方有很详细的说明，点击这里访问谷歌网站优化工具官方帮助。
我们已通过谷歌网站优化工具，测试与优化许多客户的目标页面(Landing page),通过测试与优化以上的元素，我们在很短的时间内，使KPI转换获得非常大的提升！

Button Balance: Using design to differentiate and prioritize buttons

It matters where you put things. I learned this basic design principle in 4th grade band class, where I noticed that each type of instrument had a specific place to sit within the larger group. The soft-sounding flutes were up front, closest to the audience, while the loud tubas and drums were in the very back. To reverse this arrangement would’ve unbalanced the sound of the band, making tubas too loud and flutes pretty much nonexistent.

Thus, one of my first design lessons: Look at the context, and arrange things so they balance the way you intend. Tubas in back, flutes in front.

What is button balance?

What I call button balance is simply a broader view of button design, one that considers the impact of where the button will be placed and what’s around it. It takes into account the button’s context, to help ensure the button is as effective as it should be. In other words, it means looking at the whole band, not just the trumpet section (wonderful though trumpets may be).

Why does button balance matter?

Button balance matters because if you don’t consider context when designing buttons, they may not produce the results you expect. Is your Signup button not being clicked? It may be because it looks exactly like three other buttons on the page. Or it’s being drowned out by noisy ads, splashes, or promotions.

Context matters. A button may look beautiful on a page by itself. It may be large, colorful, and professionally designed. But it can still fail if its surroundings are distracting or confusing.

And yet, many buttons are designed with little thought to their eventual context.

Here’s how it usually happens: a button is created as a blue-rounded-rectangle-with-white-text. Voila! Says the designer, I’ve created the perfect button for this site! And every button on every page becomes a blue-rounded-rectangle-with-white text. That’s fine if your pages are fairly simple, like so:

But what happens when a page is more complex? What if you have more than one call to action? Or you need to indicate several different functionalities? Should you still use the same blue button for everything? Hopefully, by now you’re thinking, “Of course not, silly!”

Designing for button balance

But enough talking! Since this is a visual topic, I thought walking through some examples would be fun and helpful. So, let’s look at a few ways to use design and placement to achieve the right button balance on a web page.

1. Varying color

One easy way to affect button balance is with color. Generally speaking, use stronger colors on more important buttons and more neutral colors for those less important.

In the example below, notice the two largish buttons: the gray “Continue Shopping” button and the blue “Checkout” button. Here’s a full-size closeup of them:

Other than their colors, these two buttons are very similar. Their height is the same, they both have corners of the same roundness, and they both have a flat, simple appearance. Despite these similarities, and despite all the other distracting images on the page, notice how the blue color helps the Checkout button stand out:

If both buttons were blue, however, notice how the button balance changes. The Checkout button, no longer unique in its blue color, becomes less prominent:

Varying the color of your buttons is a useful technique, but it can go only so far. A site with buttons of many different colors will soon fall prey to what I call the “Circus Effect” — the site loses its visual professionalism and credibility as colors are introduced that bend or break the branding guidelines. You can almost see the clowns, waiting in the wings.

2. Varying Size

Another simple way to affect button balance is to vary the size of the buttons according to importance — larger sizes for more important buttons. For example, take a look at this Bank of America promotion page:

There are five buttons, all using the same red color and same general design treatment. Two of the buttons are quite large, which helps them stand out on the page and appear more important. Notice that they are not only long — because of their long labels — but also taller than the other buttons. Their size helps shift the button balance in their favor. And yes, their placement is also a factor here — but we’ll come to that topic later.

3. Varying Shape

Shape is another way to change button balance. Shapes can be used to change emphasis and also to hint at the button’s function.

For instance, in the next example there are four button shapes:

• a blue rectangular Go button
• a round “toggle display” button next to the word Locate
• several triangle “toggle” icons next to text links
• a round “close” button over on the yellow information layer

Notice how the shape variation helps differentiate the buttons from each other:

If all of these buttons were rounded rectangles, their functions would be a little less clear and it would take a little longer to understand and use this map tool. Certainly it would look clunky and less professional:

4. Varying Style or Treatment

Most sites wisely have branding guidelines in place to restrict the variation of design elements. But there is usually enough wiggle room to create a range of treatments that still support the brand.

In this example, the large red button is rendered in the standard button style for this particular mini-site. To the right of it, another button appears. This one, reading “No Thanks”, has a very different design treatment, and barely looks like a button at all:

To my taste, the No Thanks button is TOO de-emphasized, which means plenty of people are likely to miss it. But we’ll leave that discussion for another time.

Here’s how the buttons look in context:

Now notice how much the button balance on this page changes if we give both buttons the same style — the de-emphasized style, this time:

5. Varying Placement

The placement of buttons can indicate both their association and their purpose. For example, in this next Kodak example we see two red buttons:

They are very similar to each other, but we can easily tell at a glance, even without reading them, that they do slightly different things; the one on the left has something to do with the $99 printer, while the one on the right has something to do with the $149 printer. How do we know this? Because of their placement. Each one is placed very close to its associated product and price.

What if we moved these buttons somewhat lower on the page, further away from the product images? It’s not a complete disaster, but it becomes somewhat less clear what each button does:

A common challenge on web pages is the presence of ads, promotions, and other strong visual elements. Like unruly trumpet players, loud, busy images can often shift the button balance in ways that are unexpected or even undesirable.

In this next example, a Disney ad dominates the product detail page. Although the “Add to Cart” button is still visible, it is less dominant on the page than it would be without the ad, and the small buttons at the bottom of the page nearly disappear entirely:

See how much stronger the green button is without that ad:

But let’s suppose we don’t want to lose our ad revenue, so we can’t get rid of the ad. Instead, we could achieve better button balance simply by changing the button’s placement, moving it away from the ad and closer to its associated product:

In this next example, the position of the “Free 60-Day Trial” promotional splash element crowds and distracts from the “Try Now” button. Not only is the splash element larger than the button, it also uses stronger colors, larger text, and a more dramatic shape:

Here’s the same page with the promotional splash moved to a different location, further from the call to action button. Personally I don’t think this is an overall improvement to the visual page flow, but it does give the Try Now button more room to breathe:

Achieving Button Balance

As you become more aware of button balance, you’ll start to see many examples across the web. The best tend to use not just one but a combination of the techniques we’ve discussed to distinguish and prioritize their buttons. For example, take a look at this page from the Apple site:

To begin with, the two buttons — Free Download Now and Upgrade Now — are different colors. They are also placed in separate areas that each have different background colors, which helps group and associate the buttons with the content inside those areas. Both buttons have plenty of space around them, with no other nearby images crowding or distracting from them. Lastly, the Upgrade Now button has a slightly different treatment — it has an arrow icon where the Free Download Now button has only text.

A Final Note

The takeaway I’d like to leave you with is this: if a page on your site seems to be underperforming, be sure to take a look at its button balance. Is there enough variety — but not too much? Are buttons placed near their associated product or information? Are the more important buttons emphasized with color or size? Some simple changes to your button designs can translate into better clarity and improved results.

Tubas in back, flutes in front. Take a bow.

As VP User Experience and Creative Director of Closed Loop Marketing, Sandra heads up the company’s usability and conversion optimization projects. She is co-author of the book Web Design for ROI (New Riders Press), and regularly speaks on the topics of usability, design, and conversion at industry and business conferences. Sandra has contributed her expertise to projects for a wide range of companies, including Hewlett-Packard, Brocade, ReelzChannel, and Allstate.

【UCD年会之助手篇】项目管理的艺术

传说中，这是一场“巨头汇聚齐PK”的会议，那仅有的18张入场券让众人趋之若鹜。非常感谢我们的彭毅大哥赐予我“助手”身份，得以荣幸参与此次巨头会议。虽然当天忙到连午饭也没怎么吃，但是能与那么多优秀的产品界前辈交流学习，不亦乐乎。

以下是我整理出来的当天会议纪要，和大家共同分享学习之。由于会议内容涉及到部分不方便公开内容，故以下的会议纪要为所删减版本。(此篇为客观阐述篇，感想篇请见“UCD年会之感想篇”)

【主持人】：与今天早上白鸦所说的比较理想化项目开发流程相比，在实际项目开发过程中，每个公司都有不同的实际情况，导致项目最后无法按照既定的开发流程执行，必定会产生项目的失败。首先请大家说下对项目失败的定义.

莫子：达不到目标就是失败，所以关键是看你的目的是什么。如果说项目失败了，那是因为没有达到我们预定的目的，这个我就称之为失败。

童跃美：不同规模团队的失败定义是不一样的，一个2-3个月的项目失败了，对于大公司来说也许不算什么，但是对于创业团队来说则有可能导致他们倒闭，所以我觉得要根据团队规模和承受能力大小来定义。

盛一飞：项目的失败是在项目运营一段时间后，导致公司的成本极速上升，包括人力、资源等，而最后没有产生结果或是所产生的结果很小，且偏离了我们的方向，则我觉得是失败的。互联网产品很难再一段内判断其是成功或是失败的，但是整个项目开发过程中我们不断矫正，项目所设计的产品结果也许不是最好的，但是在该项目的设计过程中不断进行了调整和矫正。

王旭升：互联网产品迭代的速度是非常地快的，假设我们要开发A产品，目标非常的明确，但是影响它的外界因素也是很多的，这时我们最原始的需求要进行统筹。刚开始的时候，目标不是很明确，但是由于外界的因素，例如竞争对手的成长速度非常地快、后来又有新的东西进来，又或是产生很多的新功能受很多用户的好评，这时需要我们对原始需求进行再定位。对于小项目来说，并不是没有把目标定明确，而是大家都熟悉的一个道理，那就是“已知是这样的前提之下，还是会产生很多的需求变更”。这是很多团队都会遇到的问题。

莫子:我认为这是大目标和小目标的问题，你刚刚所提到的SNS，在我看来，做SNS是个目标，但是我们并没有深一步去想，我们为什么要做SNS，其实我们再想深层一点，我们就是想让用户在一个地方形成一个互动平台。我觉得只是要我们这个大目的是正确的，那个小目标是可调整的。

童跃美：彭毅，我想了解下你们亚运是如何定义失败的？如何判断这个项目是该迭代还是该放弃呢？能和大家分享一下吗？

彭毅：因为之前是做奥运项目，现在是做亚运项目，应该说最高目标是没有变化的，所以没有迭代之说。由于项目的性质，这些项目必须是要在规定时间内上线的。至于如何衡量一个项目是该迭代还是放弃，我觉得主要是看这个项目的投入和产出比，用一个概念化来说，那就是是否符合用户的需求。

刚刚所说的都很有道理，但是有点分散，我这里就总结一下，我觉得失败可分为以下三种：
（1）完败—就是说这个项目做到一半中途就被取消了，而没有产生任何价值沉淀。
（2）推迟—就是运营时间一而再地推迟。作为一个产品经理，我觉得项目的推迟，在一定程度上就是被认为是失败的。
（3）鸡肋—赶在有效时间内完成，但是所发布的产品漏洞百出，功能很垃圾。还有一种，就是刚刚盛一飞所提到的—人力成本的增加，人力成本的增加而导致公司成本的极速上升。其实可不可以这样想，成本的增加实际就是这个产品本身就没有达到我们的目标。

莫子:这个观点我有点不是很认同，我觉得适当的成本增加只要达到了预期的目的或是超出了我们的预期，我觉得还是可以的。并不是说因为人力等资源的成本的增加就说一定不行的。我最后觉得还是投入和产出的问题。

盛一飞：刚刚我所说的中途取消，涉及到一个决策问题。其实就是我刚开始所说的投入达到了一个他所不能承受的地步。取消，其实就是内部决策把它给挤压了。而产品后来所产生的价值，未必是你之前所说的目标，但是可能有价值，且是可延伸的。有时候有些产品就是因为这样而活了下来的。。。。

莫子:在我看来，中途取消的项目通常都会有价值沉淀的，起码你吸取了经验教训，下次可做得更好。。。。

千鸟：同样一个目地，在不同项目里，它都有不同的优先级。

干文山：我觉得一个是站在公司战略层面，如按照老板需求完成，但是由于市场原因无法上线，站在公司战略层面上是失败的，但是从这个项目来说，是成功的。

黄夷：我觉得彭毅说的鸡肋，是指如果这个产品我自己研发后我自己使用都觉得不行，我觉得这个产品就真的是鸡肋了。就是说你自己作为用户角色去用你自己产品的时候，这个产品是否失败，你自己心里都已心中有数的了

千鸟：我的理解，推迟和鸡肋是有关系的，有些团队他不想产生鸡肋，所以把项目推迟了。只不过每个团队都有自己的余地，有些团队可接受，那他就按时推出；如果有些团队精益求精，不可接受，他们宁愿推迟也不出鸡肋。

盛一飞：所以我还想说刚刚涉及到的决策，其实产品是否失败，我觉得最最终还是要看团队怎么对它它产生出来的东西。如果他们坚持就是完美，如果它放弃就是完败，如果把它丢在一边就是鸡肋。

莫子：我觉得这个还是目标问题，你的目标是按时完成的，和你的目标是追求最好的产品，是完全不同的。因为是两个不同的目的，所以达到两个不同的结果

刘云天：我们有的是站在产品设计角度、有的是站在产品运营角度，又或是项目经理又或是老板角度来看这个问题的。可能老板认为他要的那个项目按时上线就是达到目的了，而对于你自己来说，想做得更好。所以失败的定义，我们和老板的定义不一样。

【主持人】：国外有家著名数据统计公司专门对IT领域的项目管理进行调查，1994年的时候，有31%的项目是完败的，达到预期目标成功的是16%；而2006年，是完败的项目则下降到19%，达到预期目标成功的项目则提升到35%。也就是说在这12年间，经过项目管理体制的改善和提升、以及管理工具的进步，使得我们项目成功率大大提升。刚才项目失败的定义只是抛砖引玉，接下来想大家分析下导致项目失败的原因，请问在座哪位愿意分享下自己项目失败的例子？以及你们的绩效考核是如何进行的？

千鸟：我分享下我之前接触过奥美的一些情况，他们比较具有代表性。产品经理是一个level很高的职位，而往下，一个产品经理下面有N个项目，就是一个产品经理会拆分成N个项目同时进行，也就是说产品经理和项目经理是完全不一样的。

刘云天：我来举个例子吧，我就不说是什么项目了。想说明“越是没有问题的项目，却是越有问题的”，案例是这样的，刚开始的时候，该项目很好，且知道该项目的人会越来越多，项目也会越来越大，服务器也会越来越多。但是后来有一天，服务器挂掉了，造成很大影响。后来我问主管服务器的人为什么不去找相关人，他说不知道该找谁来负责此事故。就是这样，当所有人都觉得没有问题的时候u，却在上线的时候挂掉了。

盛一飞：在我们支付宝里，最好的产品经理当然是懂得技术的。产品、设计、技术都懂得的话那就最好。项目经理是个很好合作的，项目经理不是一个传声筒，有些事情你可自己做主，而不是都得等着他们来讨论。

千鸟： 在我工作经历里，好的项目经理需要一定的复合背景。他是可找很多人来帮他，但是这个过程中要消耗成本。项目里每增添一个人，沟通成本都会翻倍。项目经理应该有一定的方法形成自己独特的知识体系。

彭毅：我之前碰到这么个小项目，老板直接找产品经理进行修改，可是一段时间后，产品经理还没修改，老板就直接找另一个技术进行修改，最后导致出错。这个可能和甘冈刘晓天说的案例有点类似，沟通问题。

曾鸣：今天彭毅请我们来，主要是想我们分享一下经验和经历，那我就说些QQ邮箱的东西吧。QQ邮箱团队里有两个明确的职位，一个是产品经理，一个是项目经理。产品经理主要是和用户沟通交流、项目需求的制定，而项目经理则是负责研发的进度，和保证产品的上线执行。只要在称得上是项目的东西，都有这两个职位。项目经理也许不是一个所谓公司正式任命的“经理”，他只是一个很普通但有一定资历的开发人员。

例如邮件的会话功能，该虚拟项目组总共是4个人，所以我对今天早上白鸦所说的那个“小”字特别有感触，我觉得他的那个“小”的定义和我们的想法是一致的。我们的虚拟团队一般都比较小，小到什么程度呢？我们大部分的虚拟项目组一般是3、4个人，其中包含了一个产品经理，一个项目经理，一个UI，那么这3个人就负责把这个项目全部完成。项目需求的提出和引导，由产品经理来做，但是真正的方案确定必须是整个团队的人来共同决定。

我们强调团队合作，而不是个人英雄主义。即使你的产品经理很牛，但是UI有他专业领域的知识，UI的大部分决策是由UI来定，当然产品经理也可给建议，但是最后出来的决策必须虚拟团队共同商量沟通好后的结果。

沟通很简单，我们采取的都是面对面沟通。我们觉得这是小团队最高效率的沟通方式。

项目一般会采用“滚动”方式推进，“滚动”可以保证项目尽可能朝着正确的方向前进。我们在实现了最基础的产品功能后，先让一部分人（我们觉得可能需要此功能的那部分人）先用。产品上线后，产品经理会收集用户意见、提出项目下一步的用户需求，然后反馈给项目团队。大家通过沟通觉得用户需求合理，那么我们就去做，做了之后就接着放出去，继续收集用户新的意见，继续根据用户的建议进行产品优化。这个过程就是迭代。总之这个虚拟团队不断地围绕邮件会话这个功能不断地迭代下去，直到这个邮件功能得到大部分用户认可为止。那么这产品经理可以跳到另一个项目区了，但是产品经理还是要一直跟进这个产品，实行“产品终身制”。

产品经理主要是跟进用户反馈、数据分析、数据平台的搭建、数据模型等，且产品运营对整个项目的运作是非常重要的，产品经理必须用心跟进。项目经理更多的是控制技术的开发进度。但是一个项目的成功，必须是团队共同合作的，在我们团队里，UI人员说话的权利是比较大的，我们非常尊重UI人员的意见。

我们欢迎不同的意见，但是项目组内要沟通好。我们虽然没有晨会、没有日报，但只要有需要，随时都可以在一起面对面交流，然后通过邮件将沟通结果周知项目组内。

在此，做个广告，QQ邮箱目前在产品、运营、UI方向急需人手，如果在这些方向有兴趣的同事，欢迎与我联系加盟。

莫子:我想提个问题，你们一个UI人员就把交互、视觉、页面架构做完呢还是下面还有一个UI组？

曾鸣：我们的UI人员一般都是有交互、视觉、页面的实现能力的，当然，这个UI人员后面还有一个UI组，UI组内部也会有设计和实现方案的讨论。但是我们没有将UI的职责和岗位分得那么细。

莫子:你们是专人专项呢？还是多个人同时负责多个项目？

曾鸣：我们的项目经理和产品经理可能同时肩负多个项目在身的。

莫子:接下来我补充一下网易邮箱的经验吧，我们的项目是分年度、季度、月度计划的，但是和曾鸣刚刚所说的一样，都是有个项目的优先级的。但是很多时候会有忽然的项目插进来，例如丁磊忽然打个电话给我说要做某个项目，当这个忽然项目和我们整个计划大方向是一致的话，该忽然项目的优先级是比较高的，而合计划大方向不是很一致的话，我们就会把它推迟或是延后。

另外一个，说到业绩考核的问题，我们之前采用的是“50%-50%”的做法，就是我下面的产品人员，我会对他进行50%的绩效考核，而另外50%则是由他的项目组长来定的。后来我们变成了100%都是由行政主管来评定，但是这之前我会和他项目组的组员进行沟通，看他们的表现如何。不过话说回来，哪种绩效考核的方法更好，我们这边也正在进行探讨。

干文山：刚刚听曾鸣说，一般是3-4个人一个小项目，如果小版本出不来，那大版本是否也出来了呢？也就是说单个项目之间存在 –> –> 耦合关系？

曾鸣：我说的不出来，是指出的这个版本不好意思推出去，每个版本的出来，必须对用户一个交代，每个版本的东西都是用户提了很久的东西。

刘云天：我来说下刚说的第2个问题，绩效考核，我们由开始的全是专业考核，到专业和项目结合考核，再到专业、项目、客户三方结合考核，再到现在的630度考核，这些人力等考核都有一套后台数据考核的，包括数据汇总。那项目经理是做什么呢？

（1） 监控风险，例如完败这种情况就要监控到，然后就行纠正。
（2） 建立流程，QQ邮箱是有一套流程的，建立流程的目的就是达到“可替代性”，缺了任何一个人都是可以的。例如你的经理很牛，那么只有2个结果，要么他会累死，要么他会被人挖走。盛一飞：我还想补充一个问题，今天到场的还有很多公司优秀的朋友，据我所知，UCWEB也有很多产品线，我们不如让黄夷为大家说说UCWEB的情况。

黄夷:UCWEB的产品线处理方式，主要是以技术为导向的。产品的介入是在前期，或是在版本出来后看市场反响，然后再往里面加东西或再做修改。技术先行，有些用户的需求，无论是产品经理、交互设计师也好，有些很强的标准时必须要的。最终的东西要有共同的目的。正如今天早上的专家论坛所说的，不是一个单一的UED部门来做用户体验的，而是所有的人脑子都要形成一些必须的共同思想的，大家的思想必须是统一的。

盛一飞：我理解技术先行这东西，很多UI都希望UED体验这东西能在产品中成为一个很重要的东西，但是这东西放置东西似乎否真的很有用呢？要打个问号的。UED标榜站在用户的角度考虑问题，但是你问很多部门，他们会说他们比你更了解用户。我觉得产品出来的第一版本一定要“快、轻”，但是你会遇到的问题是，需求部门提出了很多要求，项目越做越大，这时候UED那边很难插进来的。很多部门都站在自己的角度去想问题，例如涉及到部门的KPI等，这样项目就变得不可控制了。UCWEB的开发模式是很值得借鉴的，产品第一个版本一定要“轻和快”，先把核心技术开发出来，然后进行迭代，迭代的时候用户的很多需求就会出来的了。

黄夷:我们这些做产品的或是提供服务的，项目的数目看似是很好，不断地增长，但是你永远不知道哪些功能是取悦用户、哪些功能是烦恼用户的。我想UED部门，包括产品部门，更应该要从看似平凡的数目挖掘更多的东西。现有东西，然后把它做大、或是缩小、或是砍掉，这个要我们根据实际情况来操作的。

千鸟：之前在雅虎中国做过一个项目，实行的就是“迭代式流程”。一位产品经理、一位项目经理、另外还有位工程师。上面的是老板，他想要什么，直接当面给我们说或是画出来，我们了解后然后立即投入到开发中。大家开会的时候，可能都会遇到这样的情况：

当你拿出一个方案的时候，大家可能提不出任何意见；
当你拿出一个演示东西的时候，大家的意见噼里啪啦的出来了。
我们应该先把核心功能先开发出来，然后进行迭代开发。当时我们3个月出了第一个版本，然后第6个月出了第2个版本，第9个月的时候，项目就被砍掉了，哈哈。。。。。。因为项目被砍，团队被马云拉到杭州去了。

彭毅：如何是美术、技术等资源得到很好的调配呢？像很多公司是采取工作形式的，但是这种形式所产生的后果就是他们的参与度很低。

干文山：这个和部门、公司文化有很大的关系，部门管理者如何去引导下面的人是很关键的。对于设计师，我们不能灌输下单的思想，而是引导设计师在设计之前很好地了解产品。我觉得不管你经验如何，了解产品是十分必须的。我的设计师，我都要求他起码一天的时间去了解产品。

男会员：你说的是种很理想的状态。像白鸦，是因为到支付宝做培训，然后被推荐进了支付宝。可是他到了支付宝后，他下面的人说，他进来后所做的东西和他培训时说的观点不一样啊。他当时培训所的观点是比较理想化的。

莫子：我觉得考自觉是没有用的，彭毅刚刚所说的那种情况必须是要一定的流程、制度上的约束，所以我觉得项目组真的是一个很好的做法。你这个UI人员只有放进了项目组，才会用心去做。如果是我在UI部门里面，你有一个单过来我就做，流水线那样做，在我看来人性是非常赖惰的，出来的效果不是很好。

彭毅：那我来总结项目失败的原因，大致可分为以下几种：
（1）定位、目标及需求不够清晰
（2）项目成员不负责
（3）沟通及配合问题
（4）团队专业水准有待提升
……

但是当时我们为什么没有预见这些问题呢？
（1）长官意志？
（2）缺乏权威人士？
（3）核查机制不完善？
（4）无动力？
（5）理想与现实？
（6）责权混淆不清？
……

【主持人】：接下来我们讨论下团队跨部门沟通的问题，项目难很大程度上就是沟通的难，沟通有3个难点，一是没有强制性、二是当面不说背后说、三是谁也不主动说。有请在做各位资深的产品经理说一下！

莫子：上面所说的3种情况，主要是没有制度的问题。我们现在的架构也是产品-设计-技术，每个项目组抽一个人来形成一个项目，那一段时间内这群人就会呆在一起了，他们所做出来的东西就是这几个人的荣誉了，我觉得这样他们才会用心地去做。否则流水线的工作，大家都不会用心，也不会觉得有归属感。我们要有流程、制度来规范，尤其是考核层面的约束是很重要的。

彭毅：总的可归结为利益问题，跨部门的合作急需解决的问题就是利益共同点，所有项目组的成员共同利益要保持一致。

干文山：关于考核问题，想和大家分享2个：一个是360度的考核，老板考核部长，部长考核科长，科长考核职员，当考核科长时，老板会问他的同级和他的下属，当大部分人觉得他有问题的时候，他的领导能力肯定有问题。一个是学习 –> –> IPD时学习到的，也是华为现在采用的一个方法和现在腾讯的考核组织架构有点类似的—资源池。UI一个、软件一个、电子一个，项目要做什么，就从这几个组里抽人出来。项目经理分配任务给组员，组员很听话，但是项目经理没有财务权、他不考核，考核还是只能部门进行考核，但是项目经理有反制的作用。职能主管进行考核的时候，要先咨询项目经理的意见。

莫子：你所说的第2种情况，我尝试过但是很花时间。我现在使用的考核方法包含第一种，我们产品部内的其他人都可对这个人进行打分，但那是我们不会把这个分值占得很高，因为有些情况是这个热的人际关系很好，但是并不代表这个人的功能很强。反而结果还会占比较大的一部分。

盛一飞：考核有2种，一种是审查，一种是绩效。我有个想法，那就是绩效采用“共荣共损”的方式。。。。。。

彭毅：我之前和人力资源部的同事商量过，他们说360度其实是个美丽的陷阱，因为中国人有种关系的存在，我不会给你打高也不会给你打低，通常会导致打分中庸化。还有就是该成员对该项目成员工作的不了解。

干文山：可采用排名次的方法，给所有和你发生关系的组员打分或是被打分。

彭毅：项目组成员在这个项目的激情问题，如何保持成员在该项目的激情问题？

千鸟：精神鼓励、物质奖励。

彭毅：千鸟一语道破千机！

【主持人】：在座的各位，有不少是有管理经验的，大家平时是使用什么工具进行项目的呢？

千鸟：我之前是使用 JIRA进行所有项目的管理，效果还不错。我们使用这些工具的主要目的是节约时间等成本，而用JIRA把邮箱等工具捆绑起来用。当然还要进行面对面的沟通，会议之后要有会议纪要等，所有产出都要放到上面，主要起备案作用，这是之前美国雅虎技术总监让我们学习的。

（备注：JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问题(or Bugs、Task、Improvement、New Feature )跟踪及管理软件工具，可以对各种类型的问题进行跟踪管理，包括缺陷、任务、需求、改进等。JIRA 采用J2EE 技术，能够跨平台部署。它正被广泛的开源软件组织，以及全球著名的公司使用。）

曾鸣：我们没有用到十分先进的项目管理工具，最早用的是一块白板，后来用的是excel，再后来是腾讯内部的一个“TAPD”的工具。在管理方法上，我们讲究的是“人治”而不是“法治”，讲究的是一种团队文化，我们从来不会有非常强硬的流程和规范，我们讲究团队内的“理解、信任、支持”，说起来有点悬，但是我们追求这种氛围。UI、技术人员一般来说可能比较被动，但是划分小项目之后，他们也可以玩得很HIGH。对着老板或是上司，我可能不敢发言，但是对着同级，我可平等交流、敢于把自己想法大胆说出来。我们鼓励“从上而下”的对于这种氛围的普及，所有人员都必须参与到该项目的开发中。当然这个是不可复制的，因为我们这个团队一起走过了N年。之前我们团队20多人，现在我们团队发展到100多人了，一直能维持这种团队氛围，。

彭毅：腾讯每个部门都是采用这种项目管理方式吗？

杜健：不是的，我来说一下我们腾讯设计中的管理方式吧。我们腾讯设计中心总体经过了3个阶段，我觉得作为产品经理来说，方法、手段等都是一种项目管理的工具。

第一层，作为项目经理，有自己的一套考核标准；

第二层，轮到UI人员，都一套标准的规范

最下面一层，就是工具了，从最开始的EXCEL表格，到量化管理，再到平行项目管理和纵向项目管理的两套工具整合成一套统一的管理工具。设计师、项目考核等都要用这套管理工具。大家都知道，设计师是不愿意受管的，且设计出来的东西不是文字都可描述的，大多数是图形。如何把图形工作量切换到工具里？是需要解决的一个难题。

我们设计中心现在100多人，所有项目目前的进展情况如何表现出来呢？这需要我们进行项目统筹管理。很多人应该用过UIDesigner 这个工具，无论是交互还是设计，都要围绕这套标准进行的。

（备注：腾讯UIDesigner 官方吧地址为http://qbar.qq.com/uidesigner/）

黄夷：我们用的是比较原始的EXCEL，但是很多时候是表无定表的。对于目前还不是很成熟的UE部门，要灵活的用管理方式。

彭毅：时间刚好到5点，今天的圆桌会议动此结束，非常感谢各位的参与！

（结束）

为销售服务的网页设计思路(Sales-oriented Web Design)

之前做过一阵子平台型产品项目，而现在的工作中对于”销售(Sales)” 这个词的体会更深刻了。 因此将之前写过的一篇总结的标题改为这个“为销售服务的网页设计思路 — Sales-oriented Web Design”，再重新修正一下。

首先解释一下下面提到的AIDA和着陆页这两个关键词：

AIDA模式 — 在1925年由Professor Strong提出，具体是指一个成功的推销员必须把顾客的注意力吸引或转变到产品上，使顾客先对该产品产生兴趣，随之产生拥有的欲望，尔后再形成实际购买行为。

• A – Attention: attract the attention of the customer. （引起注意）
• I – Interest: raise customer interest by demonstrating features, advantages, and benefits. （诱发兴趣）
• D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs. （刺激欲望）
• A – Action: lead customers towards taking action and/or purchasing. （促成购买）
• Nowadays some have added another letter to form AIDA(S): S – Satisfaction – satisfy the customer so they become a repeat customer and give referrals to a product. (现在有些网站还会加一个专门针对老用户重复购买和口碑营销的区域)

Landing Page 着陆页 — 访客进入目标网站进行浏览时经过的第一个页面。尤其是销售主导型（无论是实际产品、服务还是一个促销活动）着陆页，如何进行最大限度优化是最终销售（Action）转化率能提升的关键。

将AIDA模型套用在着陆页上的主要思想是从页面设计上就要包含AIDA这4个步骤：

• （Attention）– 着陆页要尽快告诉新来的用户我们是干啥的，留住那些可能会成为真正用户的潜在用户。常见办法：
  • 有视觉吸引力的图片；
  • 一句话说明产品是什么；
• （Interest）– 用户没有立即关闭这个着陆页还只是第一步，对于这些潜在用户来说，还需要进一步使他们对我们买的产品感兴趣，例如我们产品为什么比竞争者的要好？常见办法：
  • 重点产品功能介绍；
  • 有什么独家卖点；
• （Desire）– 有了兴趣并不代表潜在用户会购买，从理性角度上考虑，决定想要一个东西，必然是因为这个东西带来的收益（应该说是可感知收益更准确）要大于为此支付的成本。要记住用户要的不是我们的产品功能，而是这个功能给他带来什么好处！如何诱发这个临门一脚的常见办法：
  • 介绍产品对于用户本身有什么实际利益；
  • 展示其他现有用户的满意反馈；
  • 有权威性的review；
  • 视频富媒体介绍；
• （Action）– 当激发了用户的购买欲望后千万不要停顿，让他立刻就明白下一步的购买行为该如何进行。
  • 例如购物的话就是购买的图标，注册的话是注册的窗口等；
  • 或者在购物的场景还还能再推他一把，放上优惠券什么的（”立即注册还送100积分“）

当然这个设计原则不是适合于所有的着陆页，主要适合有明确销售指标或者新推出产品页面，这些可以完整地实现AIDA。对于已经开了一段时间，有了一定用户基础或者无直接销售指标的产品类型（比如门户网站、搜索引擎），就不用硬套AIDA了。

直接举例子，拿最近大热的Twitter着陆页来看：

首先在上方有大图来吸引注意（Attention），然后用一段简单介绍来说明Twitter的功能（Interest），还不放心的用户可以在最下方看到来自知名刊物对Twitter的推荐，或者跟随右上角的What-Why-How三步介绍，还有个视频（Desire），满意了？ — 显眼的地方有个加入Twitter的按钮（Action）

下面这个例子是一个叫MailChimp的邮件营销公司，页面比较明确地分成了AID三块。首先（A）有能吸引眼球的猴子:) 和一句醒目的核心描述（We make email marketing easy & fun for 60,000 users); 然后（I）介绍了产品对用户的利益点；还有（D）来自权威媒体的背书；相对来说最后的（A） ，也就是signup稍微弱了一点。

（Note：现在MailChimp的首页已经出了新版了，在最后的Action这里明显加强了）

再举个比较古老的黄钻页面的例子看看（QQ会员首页目前为老用户服务的因素太多，反而不如这个页面“卖东西”的气味更明显）。此页面已下线，只是作为纯研究在这里使用。

首先有大图来视觉吸引，同时有对什么是黄钻的简单介绍（Attention），然后下面有对于黄钻具体功能的图文混排介绍（I）。但假设这是一个将新用户转化率作为第一目标的着陆页的话，按照上面的模型思考还是有后两步的缺失：

• 在尝试引起用户的兴趣后，对于进一步推动用户的购买欲望导向不够（D），是否能用些类似”我们能给你提供……”/”为什么选择我们“/”还有谁使用了我们“这些来更明确地给用户开通的理由？
• 现在这个页面上对于最重要的“立即开通黄钻贵族”也严重导向不足，只有一个小的文字链；

Reference：

• Wikipedia: AIDA (marketing)
• AIDA模型 – 互联网新产品的首页设计原则
• Five More Principles Of Effective Web Design

8个技巧让设计转换为成功的销售

我们知道越来越多的公司把他们的业务放到互联网上,而且还有更多的公司正在开始他们的电子商务之旅.所以对能帮助销售的网站设计需求越来越多,一个漂亮的网站也许可以达到塑造与传递品牌形象的目标,但是单独只是漂亮是无法帮助产品或服务的销售的.所以你需要懂得更多营销的知识.

PPC Landing Page技巧

Landing Page就是你的点击PPC广告到达的页面，不一定非要到网站首页。

现在，我将重复一个重要的理念：

Landing Page第一个也是最重要的目标，就是让网站访问者确信到达他想去的地方。

如果网站访问者认为这个页面不是他需要的，他就会立刻点击后退按钮，然后点击你竞争对手的广告。

用户在Google进行搜索，他们点击你的广告。他们仅仅通过你网站的左上角的内容，就决定你的网站是否符合他的意图。如果是，他们将会继续浏览你的网页，有可能购买你的产品或服务。如果不是，他们会离开，再也不会再来。

搜素用户决定上面这个过程需要多长时间呢？也许你读过很多相关的报告。但是我推测这个时间小于1秒钟。你可以通过网站统计系统Google Analytics查看你Landing Page的退出率Bounce Rate。

我估计你的退出率Bounce Rate一定很高，甚至大于50%.这说明在网站停留时间仅仅是1-2秒钟之间。这是一个坏消息。但是从另外一个角度来看，说明你网站存在优化改进的空间。

那么如何告诉搜索用户到达了正确的页面呢？通过文字着重强调。

你优化转换率最重要的是做一件事情：在你的Landing Page登陆页Logo下面重复你的PPC广告内容。

如果你的竞价关键词是”联想笔记本”，你的广告词是”立即购买,绝对正品,货到付款,正规发票”，那么在你的Logo标志下面的醒目标题应该类似：”购买联想笔记本，小心水货，小心骗子！现在购买联想笔记本行货，同时有正规发票。”

因此，最好的办法是给你每一个单独的广告组，制定一个相关的Landing Page.有些人可以做到，但是有些人没有办法做到。我会在接下来的文章继续讲解，请继续锁定PPC110.com.

现在，我把有关Landing Page技巧总结一下：

1. 你的Logo标志尺寸不要太大。我建议Logo的尺寸不要大于 宽200*高50.
2. 很多人不喜欢长篇大论，密密麻麻的文字介绍。把你的产品介绍，产品优势，用简洁精炼的语言表达出来。
3. 图片是非常有用的。产品的图片，购买你产品或服务的用户大吃一惊的图片，
4. Call to Action按钮或链接尺寸要大，在Landing Page突出这个Call to Action,无论网站者怎样滚动浏览器侧边栏，都会看到Call to Action.
5. 缩小或去掉网站导航栏。因为你已经知道用户搜素的关键词，知道用户的搜素目的，你的Landing Page就是针对用户目的设计的。通常，我的Landing Page上只有3个链接，一个是用户购买产品或服务的链接，另外两个是版权隐私和关于我们的链接。同时，在Landing Page上面放置一些让用户信任的标志。例如：另外，超链接我都用新窗口打开，这样可以让网站访问者方便回头再次浏览你的Landing Page.
6. 从不同角度描述你的产品或服务。通过购买产品或服务用户的评价，以及一些专业机构的评价来吸引用户的购买欲望，同时利用文字，图片以及视频等不同媒体表现你产品各个方面。最终让用户感觉购买这个产品或服务绝对物超所值。

Landing Page登陆页标题技巧

您已经重新定义了关键字、优化了出价、撰写了 AdWords 文字广告并由此而带来了大量有针对性的点击，但是查看 Google Analytics（分析）报告之后，您却发现目标网页的跳出率居然达到 91%。

这表明访问您网站的用户中有 91% 的人匆匆浏览之后即刻离开，立即断定此网站不适合他们。其中最简单的、技术含量较低的方式之一就是使用抢眼的标题吸引用户注意力，让用户在您的网站上逗留更长时间来查看您的产品和服务。近期研究表明，用户在 8 秒钟内即可决定在您网站的去留，在如此短暂的时间内，标题是用户在实际阅读过程中会注意到的唯一内容。

以下五项建议可帮您写出能够吸引用户注意力的标题。

在标题中包含付费关键字。

将关键字尽可能放在标题的开头部分。用户通过点击文字广告或随机搜索排名到达您的网站后，他们会有一点紧张。

人们都很清楚自己在寻找什么，并希望能在您的网站有所收获，但他们对此有些怀疑。他们完全有理由怀疑，因为有太多垃圾网站都是光说不练。

将关键字放置在标题中可让访问者瞬间确定，他们来的地方没错。这会让他们感觉轻松一点，因而也更能够接受您的信息。

言辞听起来不要像是广告。

我们每天都要接触数千条广告信息。我们的大脑也因此开发出非常精妙的过滤机制，可以将大多数这类信息排除在外。

有时，躲过这种过滤机制的最好方法是让言辞听起来不要那么像广告。千万不要像一个喋喋不休的推销员，尽量听起来像一个提供有价值信息的朋友。

例如，请勿使用：

能让您旧貌换新颜的神奇面霜！

尝试

30 天内减少皱纹的 5 种方法。

突出好处而不是功能。

不要急忙推出一大堆有关您的产品和服务的冰冷事实，而要多想想您的产品和服务可为用户解决哪些问题。

请勿使用

存储空间高达 2GB 的电子邮件

尝试

再也不用丢弃任何一封电子邮件

使标题看起来易读。

当我们的眼睛快速移动寻找某些特别的东西时，总是会忽略那些看似要耗费太多精力去弄明白的东西。

因此，请让标题尽可能简单、直接。尝试使用简短一些的词。

例如，请勿使用

部署强健的数据恢复解决方案并增强网络可用性

尝试

保护数据所需的 5 大措施

不要忘记副标题。

副标题是另一种可快速提供产品信息的简单方式。与标题类似，副标题通常也是用户会快速看一眼的一小段文字。

我们假设您是一个网络零售商，并且您的目标网页为特定的产品页，使用产品名称作为该页的标题。副标题可让用户快速预览产品优点，避免用户从参考材料和产品说明中自己挖掘产品优点的麻烦，而这些参考材料和产品说明通常埋藏在网页的深处。

请勿使用

电脑包

尝试

电脑包专利产品，防震充气袋可以有效保护您的笔记本电脑。

最后一项。

尝试使用 Google 网站优化工具测试不同版本的标题。网站优化工具自动执行测试过程，并显示带来最多转换次数的目标网页、标题和布局组合。

固定 : 流动 : 弹性 – 三种网页布局探讨

英文原文：Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

译文原文：固定 vs. 流动 vs. 弹性：哪种布局更适合你？

译后感：老外废话真多啊。严重怀疑他在凑字数赚稿费！唉呀妈呀，怎么没人按字数给我稿费！

©请尊重作者和译者   若需转载   请依原样保留本声明

有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。

本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。

您也可以参考一下我们以前的文章：

• Flexible Layouts: Challenge For The Future
  讨论弹性布局对未来的挑战
• Applying Divine Proportion To Your Web Designs
  阐述如何将神圣比例（divine proportion）运用到固定布局中

为什么要争论这些？网页设计受可用性的大棒指引，而由于网站用户的多样性，已经很难做出对不同用户都有足够可用性的网站。

当设计的网站会面向众多用户时，设计师必须考虑访客之间的下列潜在差异：

• 屏幕分辨率
• 用的哪款浏览器
• 浏览窗口是否最大化
• 是否启用占位置的浏览器的额外组件（如历史、书签、Google工具栏等等）
• 乃至操作系统和硬件情况

由于并无标准规定网页大小，网页设计师工作时就需要解决不计其数的问题。

1. 固定布局和流动布局的差异

尽管大部分设计师和开发者都对固定和流动网页布局有基本的了解，我们还是简单明确一下概念。

固定网页布局

固定网页布局指网站内容被一个固定宽度的容器包裹，容器内的区块都有固定的百分比或者像素宽度值。最重要的一点——容器是不能移动的。不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容。

上图显示了固定宽度网页布局大体上的实现方式。内部组件被分别设定为固定的520、200、200像素宽。960像素宽度已经成了现代网页设计的一项标准，因为大多数用户的屏幕分辨率都在1024×768及以上。

流动网页布局

流动网页布局，也称为流体网页布局，其实现方法则是大多数组件（包括主容器）都设成百分比宽度，并且根据用户的屏幕分辨率自适应。

上图展示了一个流动网页布局。尽管大多数设计师会给流动布局内某些特定元素（如外边距和内留白）以固定宽度，整个布局大体上还是使用百分比宽度，并根据用户不同而自动调整实际宽度。

2. 固定布局的网页设计

很多设计师都更喜欢固定布局，因为他们觉得固定的比较保险：设计师看到什么，用户看到的就是什么。不过，说到其利与弊，则同流动布局一样让人揪心。

利

• 固定宽度布局的设计更简便，更容易自定义。
• 任意浏览器下的显示宽度都一样，对于图像、表单、视频等宽度固定的内容，潜在的冲突更少。
• 不用设定min-width（最小宽度）和max-width（最大宽度），这两个属性并不被所有浏览器支持。
• 即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。

弊

• 固定宽度的布局可能会给高分辨率屏幕用户带来巨大的页面空白，从而破坏“神圣比例”、“三分割法则”、整体平衡，乃至其他设计原则。
• 小屏幕上可能会出现水平滚动条，影响用户体验。
• 无缝材质拼图，纹样和其他连续图像需要针对大分辨率做出优化。
• 总体来说，固定宽度的可用性更低。

固定布局的设计实例

下列五个网页的设计师都充分利用了固定布局网页的特征。这些网站无不融合了大量设计元素，利用固定布局创建出完美的场景。在固定宽度的助益下，设计师方能更好地控制站点内容周边额外的设计元素，从而更为精准地调节内容和导航的宽度。

请特别注意设计师们是如何针对宽屏幕设计连续图像的（不妨把你的屏幕分辨率调高一点试试）。

3. 规避固定布局的坏处

如果你已经决定要用固定布局，下面这些小技巧你可就不得不知。它们帮你弱化固定布局的坏影响，助你做出成功的设计。

译注：下面这段有凑字数赚稿费之嫌，点此跳过这段。

先看下统计数据

现在大部分设计师都是假定大部分互联网用户都使用的1024×768或更高的分辨率。 W3Schools公布的一份投票结果显示，事实并非如此（请注意W3Schools的数据并不能完全相信，后面会有详细解释）：

如您所见， 640×480 甚至不够格在这张表上出现。W3Schools的数据表明这个分辨率似乎已经完全被用户抛弃了。而事实上，确实还有用户在使用这个分辨率，只不过用户数量太少，设计师完全把他们忽略掉，去做一些更合适、对较高分辨率有更佳可用性的设计。

即使对于使用这种分辨率的用户来说，他们也可能只是在一些方便携带的小型电脑商使用，并不是他们平常使用的主要屏幕分辨率。

不过，这里的统计数据可能也没有大家期待的那么准确。因为W3Schools的访客基本上都是一个特定群体（设计师和网页开发者），结果会和普通公众有点偏差。不过，其他调查也都大同小异。根据一些独立公司在2009年的调查显示，800×600的分辨率使用者比例在10%以下。（译注：根据笨活儿的网站统计数据，这个数值在2%以下）

下面这张有趣的表格来自SohTanaka.com，他们研究了一些大型网站对屏幕分辨率的兼容情况：

调查中涉及到的所有网站，最终都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。

关于屏幕分辨率的其他研究，您还可以参考下面的资源：

• W3Counter
• TheCounter.com Global Stats
• OneStat.com

960px 还是 760px?

综上所述，大多数设计师都是要么选择960，要么选择760作为总的像素宽度。前者更适合1024×768以及更高分辨率的屏幕，还能有一点留白。后者则是800×600分辨率下的最佳显示宽度，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。

总是将布局整体居中对齐

如果要使用固定宽度设计，务必保证主容器居中对齐，以保持平衡（一般利用margin: 0 auto;就可以了）。不然，遇上宽屏用户，你的内容就会被挤到某个角落，很不好看。

4. 流动页面布局

设计师有很多理由不使用流动布局，不过大家很多时候也看不到流动布局的好。下面列出有运用流动布局时的打算时需要考虑的利与弊：

利

• 流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。
• 在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。
• 如果设计得当，流动布局能避免在小屏幕上的水平滚动条。

弊

• 设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕，也更不容易发现潜在问题。
• 图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。
• 对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。

流动布局的实例

下面两例都使用了百分比宽度来适应不同屏幕分辨率。第一个例子通过调整内容区块的宽度来适应，第二个例子则调整空白区域大小。

5. 设计适用的流动网页布局

尽管流动布局会带来某些问题，但这些问题其实能通过一点小把戏解决。

采用简单设计

应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。有了更加精炼的代码和设计，就能更好得避免、发现和解决兼容问题。

以Smashing Magazine为例，他们就采用了流动布局。设计非常简单，只有顶部的黑色+橘色导航条是延伸开的，各内容区域的宽度会根据情况有一定的改变。利用CSS兼容了所有可能的情形，杜绝了侧边栏和内部内容发生错位。

最小宽度(min-width)和最大宽度(max-width)

这两个CSS属性，min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。更多细节请参考：

• W3School上关于CSS最大宽度属性的页面，
• W3School 上关于CSS最小宽度属性的页面。

不幸的是，大多数版本的IE浏览器都不支持这两个属性值。这一问题可以通过IE特有的expression来解决：Maximum and Minimum Height and Width in Internet Explorer（另：中文参考）。

6. 弹性设计

其实设计网页布局时还有第三种选择。部分设计师更喜欢采用糅合了两种主要布局类型特点的所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。下面的引言介绍了何谓em，而它又是如何发挥作用的：

“电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。”
- Patrick Griffiths, A List Apart

尽管弹性设计貌似会带来很多好处，它仍然像前两种布局一样有利有弊。

利

• 如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。
• 弹性布局更适合面对流动和固定布局难以抉择的设计师，因为二者的优点弹性布局都有。

弊

• 尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。
• 这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。
• 由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整

弹性布局的实例

弹性布局的流动布局表面上看起来十分相似，因为大部分时候大家都把它们混淆了。其根本区别在于，弹性布局的长宽单位是em，而流动布局使用百分比，并且弹性布局的尺寸主要根据字体大小而变化。这类设计根据用户浏览器中的字体大小来做出自适应。

7. 哪一种布局更适合你？

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案

以作品集网站为例，这种网站可能固定宽度布局最为适用。这样你就能做出更有设计感的东西。你不仅能更好地控制设计中的单个元素，作品的图像展示也变得更易处理。对很多设计师来说（包括那些非作品集站点的设计师），固定布局就是一个既容易相处，又能给人安全感的好朋友。

而那些要追求100%的兼容性的设计师最好就考虑一下花点时间在流动布局上。最大的挑战不在于宽屏上的可能出现的过多留白，而是那一小撮小屏幕上的显示效果。对于有大量用户的网站来说，百分比很小的用户群，绝对数目也相当可观。就算不考虑这点，大网站也应该有简洁干练的设计感，而这可以利用流动布局高效率地实现。

还是做不了决定？别担心，还有弹性或部分弹性的布局设计可供选择。如果运用得当，弹性布局能完全整合两大主要布局的优点。聪明的设计师懂得如何利用弹性设计的原则，在字体和容器大小上使用em单位，然后混合运用百分比和像素宽度来设定其他布局元素。

其他设计师怎么说

Heidi Cool 在帖子 Fixed vs. Liquid vs. Elastic Layout 上的回复

这位设计师的发言针对与他人合作运用布局的情况，而这些人可能对网页设计了解得并不多：

“我反复思考过这一问题。在case.edu上我们最终采用了固定布局，因为：

1. 流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。
2. 我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。
3. 我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。

大家都看得出来，最主要的问题还是集中在我们的网站是由拥有不同技能水平的人所维护、构建、增删内容这一事实上。如果是我一个人做网站，写代码的时候我可能就会更多地根据目标、内容等等来做决定。”

madr 在 Where Have All the Flexible Designs Gone? 上的回复

他提出了固定宽度布局的另外两个优点：

“barner和广告通常都是用图像和Flash来实现的，这些内容让弹性或灵活的布局更难制作。我曾在newspaper world工作过一年半，广告给区块真的特别难伺候。文章配图也是，如果用上弹性布局，阅读区就可能变得过大，相对顶部图片而言。

除了Safari 3及以下（Safari 4马上就要来了[笨活儿:已经来了…]）、Firefox 2及以下、IE6及以下（马上就要被淘汰了…）的所有浏览器都支持了按照页面整张缩放，而不是只缩放字体。这种情况让设计灵活的弹性布局显得更无实用性，大部分用户甚至都注意不到你的一片好心。”

jphilapy 在 Where Have All the Flexible Designs Gone? 上的回复

流动布局的两个值得支持的地方：

“流动布局的网站可以适应很多分辨率。这样你就不用去调查讨论用户的屏幕大小。况且，屏幕分辨率的统计数据始终是个谜；几乎没人在全屏模式运行浏览器，然后还有很多工具栏、边栏、小工具之类的东西，造成了不计取数的屏幕状况。

移动电话（就说iPhone吧），游戏机等也渐渐成为网页浏览器家族的一大成员。总之，这类设备的屏幕分辨率都很小，能够从灵活的网页布局设计中获益。

Calrion 在 About Fluid- and Fixed-Width Layouts 上的回复

明确说明了运用弹性布局的情况：

“我觉得‘弹性’布局是最佳选择。某种程度上是流动的，但又有固定宽度来保证文本行不会变的过长。

我是Windows用户，一般情况下都最大化窗口。

之所以要最大化，是因为这样我能更好的关注我正在使用的应用程序。要知道我桌面上总是有很多东西。另外，最大化我的浏览器（Firefox）能给界面元素提供最多空间，尤其是书签工具栏和标签卡区域。

说到可用性，流动布局对有经验的用户可能最好用了。因为他们会主动控制浏览窗口尺寸。对于经验较少的用户，弹性布局可能最好用，因为它能自发的阻止自己变得过分宽大。

Georg 在 About Fluid- and Fixed-Width Layouts 的回复

为什么混合运用三种布局能获得最佳结果：

“我更喜欢主区域流动，侧边栏固定，（也可以）再加一点弹性部分。我也总是为文本区设定600像素的最大宽度。

使用min/max来设定整个页面，宽度保持在600至1200像素之间，并且居中对齐。

在600到2400宽度的屏幕上全面测试，其他宽度就等用户自己解决吧。文本行从不会太宽（600就是最大宽度了），页面也不会在挤压下过早错位。

我收获的大部分反馈是，用户几乎没注意到有什么东西让他们困惑。网页很易读。说明我的做法是一项有用的妥协。

你的站在我这儿看起来不错，所以我觉得它是有用的妥协。我年迈的双眼觉得文字实在太小了，那我就在1280宽屏上的Opera里把页面放大至120%。始终不会有问题。”

更多资源

您可能会愿意参考下列文章：

• CSS Layouts: The Fixed. The Fluid. The Elastic.
  讨论了三种布局的优缺点：固定、流动和弹性布局。
• Fluid vs. Fixed Websites: Which is right for you?
  解释了选择正确布局类型的问题所在，告诉你如何正确选用。
• Fixed or Fluid, you decide
  聚焦于某位设计师的选择过程。
• 960 Grid System
  固定宽度布局的流行解决方案。
• Fluid Grid System
  和960网格系统类似，不过适用于流动布局。
• How Much Longer Will We Design for 1024?
  讨论近期的屏幕分辨率统计数据。

关于作者

Kayla Knight 正在读大学，兼职网页开发者，自由职业者，blogger。他利用业余时间维护Webitect.net，一个面向网站管理员的博客，提供教程、文章、技巧和资源等。

23条科学的网页设计经验-依据于眼球运动轨迹研究总结

在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：

1.对比图像，文字更具吸引力

与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。

3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状 。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明，读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。

8.遇到感兴趣的内容，用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成 .

11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。

14.在各种测试中，人们阅读文字广告最为专心。

正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部，导航工具的作用将更好的发挥

理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。

国际性差异：东西方文化对网站设计的影响

大多数关于网站可用性的指南都是来自于欧洲和北美。这不禁给我们提了一个问题：是否这些原则在亚洲（如中国、日本和韩国）的那些非英语国家仍然有效？

很多公司在不同的国家使用全球标准的设计模板来架构网站，然后以当地的语言来进行本地化开发。然而，这种方式并不一定在所有的情况下都工作的很好，因为不同国家的用户对于网站布局、色彩、图片样式和内容架构都有着不同的理解。

这是一个非常重要但也很复杂的领域，因为它包含了诸多方面的因素，有文化的、社会的、人口统计学的和心理学的等等。所以，针对这个话题有很多讨论，但并没有很多深入的研究。

在这篇文章中，我将几个显著的差别列出，通过研究这些差别，我们可以看到东西方网站在外观和功能上的差异。对我而言，这也是一个重要且基本的议题。在此议题之后，我们才能研究更多细节，为什么一个设计在不同的国家效果有差异？什么样的设计在西方国家很流行但亚洲的用户并不理解？以及这些差异背后所蕴藏的原因。

“我们有些相似，但也有不同”

 

1.传达信息的量

一个西方和东方网站的最显著差别就是后者总是试图将页面用巨量的内容（图片、动态广告、视频和文字）来填满。

这个显著差异可以从东西方两个流行的视频分享网站youtube.com 和 youku.com看到。虽然两者的页面都使用两栏布局，但Youku的主页似乎比YouTube包含了更多的内容，这些内容包括：广告、电影、视频、用户推荐、用户资料、排行榜和推荐网站等等。

 

2.页面长度

亚洲网站的首页经常通过传递大量信息的方式来给用户其内容丰富的印象。它们的网页相比英国和美国通常更长。不像英国和美国用户通常以Google作为其默认搜索引擎，日本用户通常更多的用Yahoo!。如果对比一下Yahoo!英国爱尔兰和Yahoo!中国、Yahoo!日本、Yahoo!韩国（如下图所示），我们发现亚洲版本的Yahoo! 提供更多内容，并包含更长的页面，尤其是Yahoo!中国。

 

3.内容分类

内容分类似乎是亚洲网站的核心部分。请见如下的例子：

（1）大量的导航选项。例如：Youku.com罗列了19个全局导航项和6个隐藏项（点击导航条最后的箭头）。再者，水平的导航条相比垂直导航在亚洲网站更常见。

（2）内容被很多目录细分。我们再次快速比较YouTube 和 Youku：前者在首页将它的所有视频分成3个主要部分，而后者要分成10个目录。

YouTube的内容目录：

• Videos being watched now
• Feature videos
• Most popular

Youku的内容目录：

• 今日热门
• 最佳原创
• 电影和电视剧
• 汽车
• 时尚
• 旅游和母婴（*请不要问我为什么它们在一个目录里）
• 游戏和科技
• 运动和音乐（*再次，不清楚为什么它们在一个目录里
• 会员推荐
• 时事主题

4.Flash和动态内容

Flash和动态内容在亚洲网站中都被重度使用。如果我们打开ccots.com.cn，一个中国流行的旅游网站，网页充斥着各种色彩的图片。首页大约三分之一都被flash和动态移动内容所覆盖（在下图被高亮标识），包括logo、banners、文字内容、广告和图片！

5.链接和页面在新窗口打开

亚洲网站的每个页面由巨量的链接所组成，点击某个链接，通常都在新窗口打开该页面。新浪（中国最大的门户网站之一）和猫扑（在线聊天、新闻、游戏、娱乐和在线电台）是中国大陆及港澳最受欢迎的两个网站之一。它们分别大约有313个和517个链接在首页上。

6.色彩、图片（连接上下文）和网站图标（icons）

亚洲网站通常色彩丰富。可爱的网站图标和承接上下文的图片也很常见。

例如，BBC新闻中文版相比它的英文版使用更多或明或暗的色彩在文章标题、字体和链接上，每个部分的标题都有属于它们自己的上下文关系图片（即使有些照片你可能看不到整图）。

7.广告

亚洲网站经常使用不同形式的广告，诸如垂直巨幅广告（skyscraper ads）和按效果付费的点击广告（AdSense），这些广告常在网站的各个角落。

例如，英国泰晤士在线将广告放在页面的右栏或底部（通过Google AdSense）。而sinchew-i.com（在东南亚具有最大影响力的中文在线新闻网站）的广告几乎出现在网站页面的所有地方，甚至在内容的内部也有。

这些差异告诉我们什么

这里有品位不同的因素。虽然我们看到了亚洲网站很多显而易见的特点，但我们并没有证据说明这些特点是否是亚洲用户所喜欢的。因此我们需要更多的研究来发现到底什么造成了这些不同，这样才能设计出符合本地用户需求的网站。

【译】在网页设计中，如何使用图标来支持内容？

在做视觉设计时，如何高效地使用图标是一门学问：该使用什么样的图标？图标该放在哪里？大小如何？图标的使用是否帮助用户更好更快的理解内容，亦或是增加了他们的理解负担甚至产生误导？今天恰好看到了一篇很好的文章，可以帮助我们了解该如何使用图标来支持内容，故翻译如下：

为什么使用图标？设计就是传达信息：如果你的网站不能吸引用户，这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初，大多数用户首先扫描页面来寻找视觉上看着有趣的内容，只有某些事物引起了他们的注意力，他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。

图标起着与分段一样的心理效果：在视觉上，图标打破了内容，使之不那么让人生却。通过图标将内容划分成几个容易理解的段落和重点，这样的页面很容易阅读，在视觉上也足够有趣以维持用户的注意。因此，不要再浪费时间写那么多无人阅读的内容了，开始使用图标吧！

在本文中，我们将展示很好的例子和网页设计中使用图标来支持内容的最佳做法。

1.如何使用图标

使用图标的首要目标应该是帮助用户更有效地吸收和处理信息。一般的做法是使用大量的空白和那些能增强内容的图标。图标通过给予内容更多的实质和有效的传达，能很好地丰富内容。图标应该用来吸引用户注意信息内容，而不是削弱或取代它。

*让功能清单更有趣

列出服务清单是有效的市场推中实用、必要的一部分，但本质上来说，清单是乏味和无聊的。在您的功能清单中使用图标将使其更具有吸引力。

280 Slides

* 吸引用户关注Web应用程序的新功能 Read the rest of this entry »

高品质的网页设计: 实例与技巧

提升网页和博客设计品质的一些实例和技巧

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

Read the rest of this entry »

五个为你的设计添加光影效果的简单技巧

原文： 5 Simple Tricks To Bring Light and Shadow Into Your Designs

现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。

所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。

Read the rest of this entry »

50个卓越的公司网站设计

网站设计无非就是将你的信息以最直接，干净，简单的方式传递给访问者。而公司网站的设计还需要抓住一个公司的感觉，同时，要给人以专业，稳健，持久的印象。在访问一个公司的网站时，网站的图形，布局，配色都会将这种感觉与印象传递给客人。本文精选了50个设计出众的公司网站或许能给你带来一些启迪  

Read the rest of this entry »