Posted: 十二月 21st, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
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.
Posted: 十二月 13th, 2009 | Author: admin | Filed under: Web Design | 评论关闭
From http://www.instantshift.com/2009/12/05/60-simply-professional-looking-website-designs/
Modern age designers love to experiment with things and observe how people interact with their work. You might need to possess a wide range of skills and abilities to achieve whatever goal you may have set for yourself. However, When it comes to professional website design you need to take care about many things which includes simplicity, readability, presentation and accessibility. So how can you make sure your design is better than the designs of your competitors? How can you point employer’s attention to your product?
In this showcase, you’ll find variety of highly-inspirational, beautiful and most importantly professional looking designs which is easy to accessible and convenient to approachable. The main purpose here is to stimulate your creativity and to inspire your imagination to design or redesign your work site to show your skills to potential clients.
The more time and effort you dedicate for a usable, eye-catching design and hitting your objectives, the higher are your chances for getting better account balance in the end of the month.
You may be interested in the following design inspiration related articles as well.
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to design inspiration that our readers may like.
Showcase Of Professional Looking Website Designs
Throughout history, great designers always found new ways to show their creativity to express themselves and create new trends and techniques to remark their work apart from the rest of the crowd. The Definition of design is more critical in modern terms as now design is a way of communication; and, more specifically, Web design is a well define platform for transforming an ideal into something real using your skills.
Posted: 十一月 18th, 2009 | Author: admin | Filed under: SEM, UCD, 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：
Posted: 九月 16th, 2009 | Author: admin | Filed under: Web Design | 评论关闭
人們用自己的眼睛和頭腦來感受色彩。這不僅僅是物理層面上的，而且包含著精神和情感層面。當我們看色彩時常常想起以前與該色相聯繫的感受或事物，這種因某種色彩而出現的感受，我們就稱之為色彩的聯想。色彩的聯想是通過過去的經驗，記憶或知識而取得的。
這種感受的結果，就是讓不同的色彩具有了其特定的意義。色彩的象徵意義多數情況下也是一種文化認同。不同文化中色彩所代表的意義和給人產生的聯想是 大不相 同的，有時可能甚至相反。設計師在應用某種色彩之前，要好好調查一下這種色彩的意義以及它在特定環境下將帶給人們的聯想。
1. 紅色
是最具有視覺衝擊力的色彩；暗示速度和動態；可以刺激心跳速度、加快呼吸、刺激食慾；紅色的衣服使人身形顯大；紅色的車最容易被偷。
1.1 紅色的具象聯想
火焰、鮮血、性、西紅柿、西瓜瓤、太陽、紅旗、口紅、中國國旗。
1.2 紅色的正面聯想
激情、愛情、鮮血、能量、熱心、激動、熱量、力量、熱情、活力。
1.3 紅色的負面聯想
侵略性、憤怒、戰爭、革命、殘忍、不道德、危險、幼稚、卑俗。
1.4 紅色的文化域
在非洲，紅色代表死亡。
在法國，紅色代表雄性。
在亞洲，紅色代表婚姻、繁榮、快樂。
在印度，紅色是士兵的顏色。
在南非，紅色是喪服的色彩。
1.5 實例說明
中企動力8週年主題網站網頁截圖，整個頁面使用紅色作為主色調，給人以喜慶、熱鬧的感受。
中企動力8週年主題網站網頁截圖
1.6 紅色系配色方案
紅色系的配色方案如下：
在紅色中加入少量的黃，會使其熱力強盛，趨於躁動、不安。
在紅色中加入少量的藍，會使其熱性減弱，趨於文雅、柔和。
在紅色中加入少量的黑，會使其性格變的沉穩，趨於厚重、樸實。
在紅中加入少量的白，會使其性格變的溫柔，趨於含蓄、羞澀、嬌嫩。
，點這裏看大圖！
紅色系配色方案
2 橙色
橙色能促進食慾；橙色的房間代表了友善，帶給人愉快，能促使人談話和思考；橙色能夠用來強化視覺，這就是為什麼海灘救生員的救生服採用橙色的原因。
2.1 橙色的具象聯想
秋天、桔子、胡蘿蔔、肉汁、磚頭、燈光。
2.2 橙色的正面聯想
溫暖、歡喜、創造力、鼓舞、獨特性、能量、活躍、模擬、社交、健康、奇想、活力、華美、明朗、甘美。
2.3 橙色的負面聯想
粗魯、時髦、喧囂、嫉妒、焦躁、可憐、卑俗。
2.4 橙色的文化域
在愛爾蘭，橙色代表新教運動。
在美洲土著文化裡，橙色代表學習和血緣關係。
在荷蘭，橙色是國家的顏色，因為荷蘭的君主來自於Orange-Nassau家族。
在印度，橙色代表印度教。
2.5 實例說明
韓國芬達網站網頁截圖，整個頁面使用橙色作為主色調，和其主打產品－橙味汽水緊密結合。
韓國芬達網站網頁截圖
2.6 橙色系配色方案
橙色系的配色方案如下：
在橙色中混入大量的白，有一種乾燥的氣氛。
在橙色中混入少量的藍，能夠形成強烈的對比，有一種緊張的氣氛。
在橙色中混入少量的紅，給人以明亮、溫暖的感受。
，點這裏看大圖！
橙色系配色方案
3 黃色
是人眼睛最容易注意到的色彩；比純白色的亮度還要高；可以促進新陳代謝；明亮的黃色是所有色彩中最容易讓人產生疲勞感的顏色，它很刺激人的眼睛；暗淡的黃色可以加強人們的注意力，所以多應用於提示牌。
3.1 黃色的具象聯想
陽光、沙灘、蛋黃、香蕉、向日葵、小雞、麵包、菜花。
3.2 黃色的正面聯想
聰明、才智、樂觀、光輝、喜悅、平凡、潑辣、明快、希望、光明、明媚、理想主義。
3.3 黃色的負面聯想
嫉妒、怯懦、欺騙、警告。
3.4 黃色的文化域
在佛教裡，法師穿著金黃色的袈裟。
在埃及和緬甸，黃色意味著喪服。
在日本，黃色聯繫到人的勇氣。
在印度，黃色是商人和農民的標誌。
在印度教文化中，穿著黃色用來慶祝春節。
在古代中國，黃色是帝王專屬的顏色。
3.5 實例說明
韓國立頓紅茶網站頁截圖，整個頁面使用黃色作為主色調，給人以明快、溫暖的感受。
韓國立頓紅茶網站網頁截圖
3.6 黃色系配色方案
黃色系的配色方案如下：
在黃色中加入少量的藍，會使其轉化為一種鮮嫩的綠色。其高傲的性格也隨之消失，趨於一種平和、潮潤的感覺。
在黃色中加入少量的紅，則具有明顯的橙色感覺，其性格也會從冷漠、高傲轉化為一種有分寸感的熱情、溫暖。
在黃色中加入少量的黑，其色感和色性變化最大，成為一種具有明顯橄欖綠的復色印象。其色性也變的成熟、隨和。
在黃色中加入少量的白，其色感變的柔和，其性格中的冷漠、高傲被淡化，趨於含蓄，易於接近。
，點這裏看大圖！
黃色系配色方案
4 綠色
是所有色彩中最能讓人的眼睛放鬆的色彩；綠色對人的精神有鎮靜和恢復的功效，通常在醫院中讓病人放鬆；通常綠色的意義是「通行」，還有秩序的意義；綠色可以促進消化，還可以減輕胃痛。
4.1 綠色的具象聯想
植物、大自然、環境、西瓜、樹葉、山、草。
4.2 綠色的正面聯想
和平、安全、生長、新鮮、豐產、金錢、種植、康復、成功、自然、和諧、誠實、青春。
4.3 綠色的負面聯想
貪婪、嫉妒、噁心、毒藥、侵蝕、缺乏經驗的。
4.4 綠色的文化域
在伊斯蘭國家，綠色是天堂的顏色，同是也是伊斯蘭教的代表色。
在愛爾蘭，綠色就是其國家的象徵。
在凱爾特文化中，綠色的巨人是豐收之神。
在美洲土著文化中，綠色聯繫到人們的願望和意志。
4.5 實例說明
韓國真露燒酒網站網頁截圖，整個頁面使用綠色作為主色調，符合真露燒酒以植物為原材料提取的產品理念。
韓國真露燒酒網站網頁截圖
4.6 綠色系配色方案
綠色系的配色方案如下：
在綠色中黃的成份較多時，其性格就趨於活潑、友善，具有幼稚性。
在綠色中加入少量的黑，其性格就趨於莊重、老練、成熟。
在綠色中加入少量的白，其性格就趨於潔淨、清爽、鮮嫩。
，點這裏看大圖！
綠色系配色方案
5 藍色
在自然界中很難找到藍色的事物，抑制食慾，讓人沒有胃口；能讓人的身體分泌安定素，放鬆身體；在藍色的環境中工作效率比較高；藍色的服裝通常會體現出一種忠誠和信賴的意味，如圖3-39所示。
5.1 藍色的具象聯想
海洋、天空、湖水。
5.2 藍色的正面聯想
學識、涼爽、和平、雄性、沉思、忠誠、正義、智慧、平靜、悠久、理智、深遠、無限、理想、永恆。
5.3 藍色的負面聯想
消沉、寒冷、分裂、冷漠、薄情。
5.4 藍色的文化域
在世界大多數地區，藍色代表男性。
在中國，藍色代表小女孩。
在西方的婚俗中，藍色代表愛情。
在伊朗，藍色是喪服的色彩。
在世界範圍內，藍色是最容易被大眾接受的色彩。
5.5 實例說明
康師傅勁涼風暴FIR歌友會網站網頁截圖，整個頁面使用藍色作為主色調，給人以清爽、時尚的感受。
康師傅勁涼風暴FIR歌友會網站網頁截圖
5.6 藍色系配色方案
藍色系的配色方案如下：
如果在藍色中分別加入少量的紅、黃、黑、橙、白等色，均不會對藍色的性格構成較明顯的影響力。
如果在藍色中黃的成份較多，其性格趨於甜美、亮麗、芳香。
在藍色中混入小量的白，可使橙色的知覺趨於焦躁、無力。
，點這裏看大圖！
藍色系配色方案
6 紫色
是一種嬌柔的、浪漫的品性；通常與中性化產生聯繫；自然界中很難找到紫色，所以紫色有一種「人造」的意義；古代紫色染料洗染的衣物只有貴族和富有的人才能夠穿上；紫色能夠激發人們的想像力，因此通常用來裝飾兒童的房間。
紫色
6.1 紫色的具象聯想
皇家、精神、茄子、熏衣草、紫水晶、葡萄、紫菜、禮服。
6.2 紫色的正面聯想
優雅、高貴、重、神秘、女性化、奢侈、智慧、想像、詭辯、等級、靈感、財富、高尚、古樸。
6.3 紫色的負面聯想
誇大的、過多的、瘋狂、殘忍、消極。
6.4 紫色的文化域
在泰國，在窗戶上懸掛紫色，是為了悼念自家的丈夫過世。
在日本，紫色代表了各種儀式，啟發性的事物，或是自大的人。
在在拉丁美洲，紫色意味著死亡。
6.5 實例說明
超級名模姜培琳官方網站網頁截圖，整個頁面使用紫色作為主色調，給人以神秘、時尚和女性化的感受。
超級名模姜培琳官方網站網頁截圖
6.6 紫色系配色方案
紫色系的配色方案如下：
在紫色中紅的成份較多時，其知覺具有壓抑感、威脅感。
在紫色中加入少量的黑，其感覺就趨於沉悶、傷感、恐怖。
在紫色中加入白，可使紫色沉悶的性格消失，變得優雅、嬌氣，並充滿女性的魅力。
，點這裏看大圖！
紫色系配色方案
7 黑色
黑色服裝能使人看上去瘦一些；黑色幽默是病態的；黑色能讓和它相配的顏色看上去更明亮；在色彩治療學中，認為黑色可以激發自信和力量；黑色通常會與黑手黨產生聯繫。
黑色
7.1 黑色的具象聯想
夜晚、死亡、墨汁、煤炭、毛髮、禮服、洋傘。
7.2 黑色的正面聯想
權力、威信、重量、詭異、高雅、儀式、嚴肅、高貴、孤獨、神秘、時髦、嚴肅、剛健、堅實、生命。
7.3 黑色的負面聯想
恐懼、消極、邪惡、秘密、屈服、服喪、重量、懊悔、無知、悲哀、陰沉、冷淡。
7.4 黑色的文化域
在美國、歐洲和日本，黑色是叛逆的顏色。
在中國，黑色代表小男孩。
在亞洲，黑色代表事業、紫色、服喪和懺悔。
在世界範圍，黑色代表深膚色血統人種。
7.5 實例說明
為韓國genesis汽車網站網頁截圖，整個頁面使用黑色作為主色調，給人以大氣、貴雅的感受。
韓國genesis汽車網站網頁截圖
8 白色
一些文化認為如果身著白色服裝舉行結婚儀式，將會帶來好運；白色是表達到最完美平衡的顏色；由於白色太明亮，會引起某些人群的頭疼感；白光會引起暫時的失明；白色經常會同上帝、天使聯繫起來。
白色
8.1 白色的具象聯想
雪、白紙、白兔、白雲、砂糖、光芒、純淨、麵粉。
8.2 白色的正面聯想
清潔、神聖、潔白、純潔、純真、神秘、完美、美德、柔軟、莊嚴、簡潔、真實、婚禮。
8.3 白色的負面聯想
虛弱、孤立。
8.4 白色的文化域
在日本和中國，白色是葬禮的色彩。
在世界範圍內，白色的旗幟代表休戰。
在歐洲和北美，白色代表了淺膚色的高加索人種。
在印度，如果已婚婦女穿著白色，會引起人的不愉快。
8.5 實例說明
為韓國影星daniel-henney的官方網站網頁截圖，整個頁面使用白色作為主色調，給人以乾淨、清爽的感受，和daniel-henney的氣質非常的貼切。
韓國影星daniel-henney的官方網站網頁截圖
9 灰色
灰色通常不能引起觀眾比較強烈的情感變化；灰色是白色和黑色平衡的結果；灰色的補色也是其本身。
灰色
9.1 灰色的具象聯想
烏雲、草木灰、樹皮、中性。
9.2 灰色的正面聯想
平衡、安全、可信、謙虛、成熟、智能、才智、平凡、古典主義。
9.3 灰色的負面聯想
陰天、老齡、厭倦、悲傷、失意、缺少承諾、不確定、喜怒無常、優柔寡斷、糟糕的天氣。
9.4 灰色的文化域
在美國，灰色代表榮譽和友誼。
在亞洲，灰色代表在路途中有幫助的人。
在世界範圍內，灰色讓人聯想到白銀和金錢。
9.5 實例說明
韓國影星安在旭官方網站網頁截圖，整個頁面使用灰色作為主色調，給人以沉穩、大氣的感受。
韓國影星安在旭官方網站網頁截圖
Posted: 九月 2nd, 2009 | Author: admin | Filed under: Web Design | 评论关闭
距新浪科技报道，美国《时代》周刊评出了2009年“50个最佳网站”，图片分享网站Flickr、社会化书签网站Delicious、微博客网站Twitter、谷歌和视频网站YouTube等上榜。
以下为《时代》周刊评出的2009年50个最佳网站列表：
1. Flickr，图片分享网站
提供数字照片在线储存服务，分为免费和付费两种。除了在Flickr上分享照片，用户还可以将其作为博客图片的存放空间。Flickr受到欢迎的原因是其创新的在线社交工具，能够将照片标上标签并以此方式浏览。2005年，Flickr被雅虎收购。
2. California Coastline，收集美国加州海岸线航拍图片的个人网站
提供加州海岸线的航拍照片，一个人、一架直升飞机和一部数码相机就是他们的全部装备。
3. Delicious，社会化书签分享网站
免费的社交网络服务，不同于其他书签网站，Delicious主要用于和别人分享和交流书签。Delicious于2003年底上线，2005年被雅虎收购。
4. Metafilter，社会化媒体推荐网站
当前有不少投票和评论网站，如Digg、Reddit和StumbleUpon等，但Metafilter是其中惟一一个值得参与的，尽管需要支付5美元的费用。
5. popurls，社会化新闻分享网站
从互联网上挖掘新闻是件困难的事情，先是诞生了书签，然后是RSS阅读器，而Popurls的出现在很大程度上解决了这一难题。popurls致力于流行网站集合，将互联网上一些流行的著名网站信息收藏，实时更新，让用户在最短的时间内了解最新动态。
6. Twitter，微博客网站
微型博客服务，允许用户将自己的最新动态和想法以短信息的形式发送给手机和个性化网站群。尽管仅支持140个字符，但Twitter在重大突发新闻事件中的作用日益突出。
7. Skype，网络电话工具网站
Skype是目前全球最流行的免费网络电话，2005年被eBay以42亿美元收购。
8. Boing Boing，注重于网络和极客文化的博客网站
最初是一份杂志，创刊于1988年，1995年转变为一家网站，2000年又变成博客网站，所报道内容包括科技、未来主义和科幻小说等。
9. Academic Earth，大学课程视频共享网站
提供各知名大学的教材，让全世界的人都有机会接触到最高学府的教育。目前，支持Academic Earth的大学包括麻省理工学院、哈佛大学和普林斯顿大学等。
10. OpenTable，订餐网站
创建于1998年，总部位于美国旧金山，是一家提供饭店预订服务的网站，目前与其签约的美国饭店数量达到1万家。今年5月首次公开招股(IPO)，发行价20美元。
11. Google，搜索引擎
全球最大的搜索引擎，除了搜索，其服务范围还包括电子邮件、即时通信(IM)、和在线办公等。旗下子品牌还包括Blogger、Picasa和SketchUp等。
12. YouTube，视频共享网站
谷歌旗下视频网站，7月份美国独立用户访问量达到8510万，成为美国第四大网站。
13. Wolfram|Alpha，被称为“谷歌杀手”的搜索引擎
今年新推出的一款搜索引擎，被誉为“谷歌杀手”。本月刚刚与微软达成协议，允许必应直接显示Wolfram Alpha的搜索结果。
14. Hulu，高清电视节目网站
由NBC环球、新闻集团和私募股权基金Providence Equity Partners联合创建的视频网站，为用户提供免费的电视节目和电影。今年4月底，Hulu获得了迪斯尼的内容授权，而迪斯尼同时获得Hulu近30%的股份。
15. Vimeo，高清视频网站
提供高清视频存放服务，支持电子邮件上传，让用户随时随地从移动设备中把视频传输到Vimeo与他人分享。
16. Fora TV，专注于知识分子与行业精英的视频网站
提供互动和检索服务的视频网站，用户可以在Fora TV上搜索到知名作家、领袖、活动家和思想家的讲话视频。
17. Craiglook，基于分类目录网站Craigslist的工具网站
Craigslist是最实用的分类广告网站之一，而Craiglook是Craigslist的混合产品，添加了众多Web 2.0元素。
18. Shop Goodwill，价格优惠的C2C交易网站
与eBay相比，Shop Goodwill是一家不知名的拍卖网站，但却不乏“宝物”。
19. Amazon，大而全的网络购物网站
虚拟大商场，拥有无限的货架空间。凭借如此巨大的规模，亚马逊已经成为所有商品的首选在线销售市场。
20. Kayak，方便快捷的旅游搜索网站、
旅游搜索引擎，无论是Travelocity，Expedia还是Orbitz，使用的都是Kayak的数据。通过抓取航空公司、酒店和在线旅游网站的数据，Kayak可为用户提供上百家航空公司的机票。
21. Netflix，电影租赁和观看网站
美国最大的DVD在线租赁服务公司，用户月租费在9美元至17美元之间，同一时间内可租一至三部DVD。同时，用户还可免费享受无限的电影和电视节目。
22. Etsy，手工艺制品交易网站
Etsy是一家手工艺品在线交易网站，用户可以在上面开店，销售自己的手工艺品。
23. PropertyShark.com，房地产信息网站
网络地产服务公司，提供丰富的房地产信息，用户可通过多种方式查询。
24. Redfin，房地产交易网站
网络房地产服务公司，最大特色是免中介，提供与房产地代理公司一样的数据。
25. Wikipedia，社会化百科全书网站
创建于2001年，是一个自由、免费、内容开放的百科全书，任何人都可以编辑维基百科中的任何文章及条目。
26. Internet Archive，可查看著名网站以前的页面，被称为“互联网档案室”
Internet Archive网站的使命就是备份国际互联网，用户可查看著名网站以前的页面，被称为“互联网档案室”，目前已存储850亿个网页。
27. Kiva，基于P2P概念的小额信贷网站
基于P2P概念的小额信贷网站，通过Kiva，用户以把钱借给那些急需资金的穷人，哪怕只有25美元。
28. ConsumerSearch，收集产品评论的导购网站
收集产品评论的导购网站。互联网上并不缺乏产品评论信息，甚至是有些过多，而ConsumerSearch的任务就是把这些产品评论收集起来，供消费者参考。
29. Metacritic，影评与乐评网站
影评与乐评网站。听过一盘好专辑，看过一部好电影，如果忍不住想发表些看法，Metacritic就最佳场所。在那里还可以看到其他人的评论信息。
30. Pollster，调查结果分析网站
调查结果分析网站。2009年美国总统大选期间，政治性网站FiveThirtyEight.com通过棒球比赛数据成功预测出巴拉克·奥巴马(Barak Obama)赢得美国总统大选。而Pollster同样收集这样的数据，并为用户提供一个Web界面，对结果进行深加工。
31. Facebook，社交网站
全球最火爆的社交网站。调研公司Compete数据显示，今年7月Facebook美国独立用户访问量高达1.227亿。相比之下，Myspace美国独立用户访问量仅为5960万。
32. Pandora与Last.fm，流行的社会化网络电台网站
两个流行的社交网络电台网站，能够帮助用户快速找到符合心情的音乐曲目。如果遇到不喜欢的音乐曲目，用户可以点击“快进”，跳到下一首曲目。
33. Musicovery，可以学习用户音乐品位的网络电台网站
根据心情来发现新的歌曲，通过免费的网络收音机来浏览不同风格和时代的音乐。
34. Spotify，网络音乐电台网站
瑞典流媒体音乐网站，本月刚刚获得李嘉诚基金会的投资。
35. Supercook，家庭菜谱分享网站
家庭菜谱分享网站。与传统做菜方式不同，Supercook的方法是：打开冰箱，看看现有的原料，然后将这些原料输入到搜索对话框中，Supercook就会给出相应菜谱。
36. Yelp，收集餐馆、酒吧、商店等评论的网站
收集关于用户对餐馆、酒吧、商店等场所的评论信息。Yelp的数据表明，一个人不可能取悦所有人，一个最好的事物也会受到批评，但用户还是会有所得。
37. Visuwords，容易上瘾的英语单词学习网站
英语单词学习网站，以图形形式查询单词关联的服务。输入单词后便可以返回相关的单词和词组等。用来学习同义词和反义词十分方便。
38. CouchSurfing，专注于冲浪运动的社交网站
社交网站只是CouchSurfing的副业，CouchSurfing主要是为了帮助人们在世界各地寻找免费住宿，让所有人都可以周游世界，并参加文化交流。
39. BabyNameWizard.com’s NameVoyager，给宝宝起名的参考网站
给宝宝起名的参考网站，它可以帮助你查到有多少人名叫“ Erin”，避免重复。
40. Mint，理财、记帐网站
免费的理财、记帐网站，可帮助用户分析消费习惯、计划预算、提出节约建议等。
41. TripIt，差旅计划网站
差旅计划网站。用户只需要通过邮件投递自己旅行的航班，旅馆和租车等预定信息，TripIt便会自动添加地图，当地的天气和方向等信息。
42. Aardvark，向朋友或朋友的朋友问问题的网站
Aardvark是一个新型的搜索工具，允许用户向好友或其他人咨询问题。用户可以通过该平台提交想知道的任何问题，并得到其他知道该答案用户的解答。同时，Aardvark也会向用户发送其他人提出的问题。
43. drop.io，基于云计算技术的文件共享网站
免费的网络硬盘，功能全面。允许用户上传、删除文件，设置网络硬盘关闭时间，自定义网盘风格，隐藏网盘真实地址，设置网盘密码等。
44. Issuu，网络杂志网站
Issuu是一个支持本地上传和在线阅读PDF电子书籍的共享站点，Issuu上面的资源相当丰富，可以查到很多知名的PDF电子杂志。
45. Photosynth，基于图片的虚拟现实网站
Photosynth是微软推出的一款照片处理系统，通过核心的图像要素提取分析算法，将大量相关的不同来源不同视角的二维照片处理成为拥有三维属性的立体景像。
46. OMGPOP，网页小游戏网站
最令人痴迷的免费小游戏网站，用于可以与好友或新结识的朋友一起游戏。
47. WorldWideTelescope，聚集了世界著名望远镜数据的天文爱好者网站
与谷歌地球一样，WorldWideTelescope收集了全球各大望远镜的海量天文数据，创建一个浩瀚的虚拟空间，供用户查询。
48. Fonolo，帮助用户拨打客服热线的网站
帮助用户拨打客服热线的网站。在给大公司打电话时，经常会听到与“英语请按1，中文请按2”相似的冗长提示，通过Fonolo则完全可以解决这一烦恼。而且，如果与客服发生争吵时，Fonolo还可以录音。
49. Get High Now，专注于研究大脑的科学网站
专注于研究大脑的科学网站，提供了40个音频和视频错觉，帮助人们理解。
50. Know Your Meme，讲解网络流行文化的视频周刊网站
讲解网络流行文化的视频网站，每2周一次，对网络上有趣事件进行讲解和剖析。
英文原文：50 Best Websites 2009
Posted: 八月 20th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
我们知道越来越多的公司把他们的业务放到互联网上,而且还有更多的公司正在开始他们的电子商务之旅.所以对能帮助销售的网站设计需求越来越多,一个漂亮的网站也许可以达到塑造与传递品牌形象的目标,但是单独只是漂亮是无法帮助产品或服务的销售的.所以你需要懂得更多营销的知识.
1.暗示
研究表明你看到的物体与图片会导致一些必然的行为.举个例子,一项对儿童的研究表明:在向儿童展示了一顶圣诞帽之后,他们会更愿意与别人分享糖果.圣诞帽体现了分享的概念并把这种概念灌输给儿童,使得他们更积极地与他人分享.而同样的研究表明向儿童展示一个Toys ‘R’ Us
(玩具反斗城)的LOGO跟圣诞帽的效果恰恰相反–让儿童更不愿意分享他们的糖果.
LegacyLocker在页面上放上一张很温馨的家庭照,想必是为了让人对他的产品感到亲切,并且唤起想要保护亲人的感觉
当给你的网站挑选图片时,仔细思考你要传达给浏览者什么信息.挑选图片是一件十分重要的事,因为图片体现了你要表达的信息与感觉.不要因为图片本身很好看而把它们放在网站上,如果它们没有完成既定的目标,那么它们就不应该出现在网站上.过度使用图片也是很危险的,因为它们可能并不能正确地传递内容的含义,所以根据你要表达的效果去挑选图片.
2.防止选择麻痹
在营销里有一种很著名的现象叫做choice paralysis(选择麻痹).当向客户提供太多的选项时,选择麻痹就会出现.给人以选择是很好的,但是当你的客户面前有很多个选择时,他们就会对该怎么继续下去产生疑惑.没有人希望看到客户后悔(自己的选择),所以当客户浪费很多时间在选择上面时,他们就会变得麻痹.
事实上,根据Barry Schwatz的说法,当客户面临太多的选项时,他们通常会放弃做出选择–这就是我们设计网页需要仔细考虑的地方了.
Highrise的价格清单对最受欢迎的那一项使用了突出的设计,帮助你选择它.
为了避免”选择麻痹”的产生,应该让人们找到最适合他们的产品或服务.告诉他们每个选项最突出的地方是什么,接着建议他们应该选择的那一个.你甚至可以在一些最受欢迎的产品上使用视觉高亮(突出)效果,来引导潜在客户去关注它.如果这个产品不适合他们,他们会选择其他的.而如果他们一开始就感到疑惑,一个”默认”的选项将有助于避免”选择麻痹”.
3.把产品展示出来
当你逛一间实体店,例如一间杂货店时,你可以瞧一瞧,再仔细检查,或者有时候还可以尝尝口味(促销食品).你会根据你获得的产品信息来决定你是否购买.番茄熟不熟?草莓红不红?新鲜出炉的面包看起来闻起来怎么样?
当你在互联网上销售服务或Web apps(网络应用),你也应该做同样的事–把产品展示出来.令人惊讶的是很多销售软件的网站并没有把软件截图展示出来.是的没错,这些无形商品与电子商品你摸不到也闻不到,但是你要知道它们是可以看得到的.
Dashboard在首页上放上他们的软件截图
人们会根据产品的外观来判断他们(的好坏).Why?因为外表是一个指标,无论对错,表示一个产品的可用性(usability).这就是著名的”美学-可用性效应”(aesthetic-usability effect).
Xtorrent是一个Mac OS的BT软件,他们也在首页上放上软件截图
如果人们看到一个复杂,混乱的界面,又或者只是一个不吸引人的界面.他们就会假设这些产品是不好用的或者很难学会用.相对的,如果人们看到一个很吸引人, 很简洁的界面,他们可能会想开始了解这个产品是怎么运作的,并且想要试用一下.让顾客想象一下正在使用你的软件的情形,这会让你离交易成功更近一步.
4.让顾客试一下
当你开始使用一个产品时,你会跟它变得关系密切.当你开始在里面输入数据时,你开始觉得是你自己的东西.每一秒钟用户花心思去发现你产品的特点,都是在投入时间去学习与使用你的产品.
当问这个用户是否购买或是定期付费给这个产品或服务时,他们更愿意说”我要”,因为他们已经对它感到亲切并且投入了很多时间.当然,如果产品本身很烂,这也会让客户放弃使用.但是这也会让你更优先去提高产品的水平,来使得客户喜欢.
MailChimp是一个Email营销服务,你可以免费使用,除非你的订阅者超过100人
在过去几年,我们看到一种商业模式的出现,那就是“freemium”(免费试用),一个“freemium”服务允许用户免费使用产品的一部分功能,但是没有时间限制.这使得用户不用花钱就可以使用这个产品,并且当他们喜欢的时候再付费进行升级(到完全功能版).
这种商业模式对于Software-as-a-Service(软件即服务)的商务十分适合,因为一旦有人开始使用你的产品,他们就会沉浸其中,开始依赖它,当他们依靠它去完成生意或是管理他们的生活时,他们就会更加需要专业版的功能,而且会更喜欢去升级为专业版,因为他们已经知道你提供的服务很好用.
产品描述对于销售是十分重要的,因为这让潜在顾客想象他们使用你的产品时的情形.但是让用户免费试用一下效果会更好.他们不用想象了,因为他们现在可以不花一分钱使用它.无论是通过演示版,有限期的试用或是freemium模式,只要是让用户试一下你的产品,那都是赢得客户的绝佳方式.虽然这不是一个真正的”设计”要素,但是在这里真的很有必要提出来,因为这的确销售很有帮助.
5.AIDA
AIDA是一种很有名的销售策略,代表“Attention, Interest, Desire and Action”(注意,兴趣,欲望,行动).它描述了你想要成功完成销售的顺序.所以,首先你必须引起潜在客户的”注意(Attention)”,接着解释你的产品或服务对他们有什么帮助,从而引起他们的”兴趣(Interest)”.
一旦他们产生了兴趣,你要让他们对你的产品产生一种”欲望(Desire)”.举个例子,一个产品使用描述,可以帮助他们了解这个产品对自己有何帮助, 能带来什么好处?确实,”带来好处”这一部分内容才是整个过程的关键,因为只有顾客了解到他们将获得“好处”,而不是产品有什么特性,他们才会购买产品.
最后,你需要让顾客”行动(Action)”起来,也就是让他们购买产品或是注册.如果他们想这么做,他们只需要一个按钮来进行付款.如果他们有一点兴趣但还不太确定(是否购买),你可以利用其他方法来刺激他们.举个例子,制造一种”限时,限量供应”的情形.(物以稀为贵).
Yokaboo用了一些很大很吸引眼球的图片,你首先会注意到左边的描述,然后会把眼睛移到那件T恤上,最后在右边已经提供给你”下一步行动”的链接
现在,AIDA说明宣传口号比设计更需要被关注,所以在设计这方面需要做的就是让宣传口号更显眼,以确保浏览者可以看得到.这意味着让一个新访问者第一眼看到的就可以真正引起他们的注意.接着页面的布局应该引导他们去关注那些能引起”兴趣”与”欲望”的地方.最后在页面的末尾,我们需要完成销售,所以你要提供”马上订购(Order now)”,”点此注册(Sign up here)”这样的”行动”链接.
我们需要明白,单靠设计是无法形成销售的. 好的宣传口号能对整个销售起到巨大作用,而设计只是为了加强并支持宣传口号.
Reinvigorate用了 “measure. analyze. evolve.” 三个大大的字首先引起你的注意,大字下面就是描述文字,加一个”下一步行动”链接
这就意味着你不应该先去设计一个漂亮的网站,然后把文字填上去.相反地,先想想你要传达什么信息,把宣传口号写下来,然后再去构思怎样的设计才能更好地传递这些信息.这就好比一辆货车故障了,那就无法把货物送达目的地.但是如果刚开始车里没有货物,送不送达也就无所谓了.(译注:指没有好的宣传口号,再好的设计也是无谓的).
6.注意力引导
要从AIDA这种策略中获益,你需要让你的浏览者的视线经过那些内容.你可以通过对齐来使得视线向某方向移动,再用一些图片来引导视线.举个例子,如果你要让某个地方引起注意,可以用一个大大的箭头图片.我们的眼睛会注意到箭头,并自然地把视线转移到箭头所指的位置.
Business Catalyst用了一个箭头图片来引导人的视线移到”观看视频”的按钮那
Silverback的布局指向下载按钮,同时下载按钮上的箭头还指向了购买按钮
组织好你的内容让他们会自动让视线向某个方向移动.杂乱无序的产品描述也许会让你的浏览者感到困惑,并且选择离开.如果你想确保你的浏览者不遗漏任何内容,你可以把所有东西都沿着一根线进行对齐布局,这样浏览者就会沿着这根线对内容进行扫描.最后你要确保所有的内容结尾都要指向”行动”,即”注册”或是”下载”按钮.
7.永远都要有”下一步行动”的链接
ABC: Always Be Closing.如果你正在设计一个销售商品的网站,无论是软件或是在线服务,你应该经常考虑一下,每个页面要怎么让交易完成.这不代表说你需要在每个页面都放置”马上购买”的按钮,意思是当顾客已经准备好要购买的时候,他们不需要到处找,就可以发现”马上购买”按钮.
请留意Skype上3个地方的文字下面都有”行动”链接,就是”了解更多”或是购买链接
随时提供”下一步行动”的连接可以让浏览一直继续,并确保不让潜在客户丢掉注意力.”下一步行动”的连接可以链接到产品详细信息的页面,或是一个可以购买,注册的页面.这些链接通常都像”喜欢?点这里”,”查看更多”,”体验一下”,”现在购买”这样.
不要让浏览者在看完网页后没地方可去,要随时引导他们进入需要浏览的页面.
8.古登堡规律(The Gutenberg rule)
古登堡图(或是古登堡规律)描绘出了”阅读引力”,”阅读引力”描述了西方人的阅读习惯:从左到右,从上到下.古登堡图把一页分为4个象限,左上象限是”Primary Optical Area(主视区)”,右上是”Strong Fallow Area(强沉寂区?)”,左下是”Weak Fallow Area(弱沉寂区?)”,右下角是”终点区”.
这就是当我们的眼睛从左上向右下方向扫描,左下区域是最不能引起关注的,并且我们的扫描会在右下区域停止.
那我们应如何利用这些概念呢?按钮与”下一步行动”链接就要放在右下区域(不要放在左下区),因为右下才是浏览者眼睛扫描的最后地方.
请留意GoodBarry的”注册”按钮就放在右下区域
需要注意的是,”古登堡图”更适用于那些内容平衡分布的页面.如果你页面中有某个地方有强烈的对比,或是用了很大的文字,那么这些区域照样会吸引更多的注意力,并引导浏览者按其他方向扫描页面.
Posted: 七月 15th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
英文原文：Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
译文原文：固定 vs. 流动 vs. 弹性：哪种布局更适合你？
译后感：老外废话真多啊。严重怀疑他在凑字数赚稿费！唉呀妈呀，怎么没人按字数给我稿费！
©请尊重作者和译者 若需转载 请依原样保留本声明
有一个问题已经困扰网页设计师们很久了：该使用固定、流动、弹性，还是混合布局呢？它们各有优缺点。最终的决定取决于网站的可用性，单用某一种布局就想达到目的，可能没那么容易。那么，既然如此令人困惑，是否有做出正确决定的诀窍呢？考虑好几个问题，恰当地设定目标结果，你也能做出融合各方优点的成功布局设计。
本文将讨论每种布局方案的利与弊。其实，只要你时刻注意可用性，每种方案都能实现成功的网站布局。
您也可以参考一下我们以前的文章：
为什么要争论这些？网页设计受可用性的大棒指引，而由于网站用户的多样性，已经很难做出对不同用户都有足够可用性的网站。
当设计的网站会面向众多用户时，设计师必须考虑访客之间的下列潜在差异：
- 屏幕分辨率
- 用的哪款浏览器
- 浏览窗口是否最大化
- 是否启用占位置的浏览器的额外组件（如历史、书签、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，他们研究了一些大型网站对屏幕分辨率的兼容情况：
调查中涉及到的所有网站，最终都完成了华丽大变身。即使是最大的互联网公司，也都确定他们的主要受众是拥有较大屏幕分辨率的用户。
关于屏幕分辨率的其他研究，您还可以参考下面的资源：
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，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。更多细节请参考：
不幸的是，大多数版本的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上我们最终采用了固定布局，因为：
- 流动布局更复杂，我们为那些有不同技能的用户提供了模板化的设计，而他们的工作非常容易破坏流动布局（模板只是一些普通的HTML文件，并不是Dreamweaver模板）。
- 我们不想看到网站维护者们做出太宽的页面——那种文本行很长，非常难以阅读的页面。
- 我们想限制那些总是想填满所有空白的人所面对的空白量。如果他们用的是大屏幕显示器，就很容易把页面填满，而忽略了在小屏幕上其显示效果是多么糟糕。
大家都看得出来，最主要的问题还是集中在我们的网站是由拥有不同技能水平的人所维护、构建、增删内容这一事实上。如果是我一个人做网站，写代码的时候我可能就会更多地根据目标、内容等等来做决定。”
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%。始终不会有问题。”
更多资源
您可能会愿意参考下列文章：
关于作者
Kayla Knight 正在读大学，兼职网页开发者，自由职业者，blogger。他利用业余时间维护Webitect.net，一个面向网站管理员的博客，提供教程、文章、技巧和资源等。
Posted: 七月 15th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
在网络设计领域关于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.放置于网页顶部，导航工具的作用将更好的发挥
理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。
Posted: 六月 26th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
简介
东西方文化的差异在很多方面都很明显，在网站设计方面也同样如此。但并没有很多这方面的研究给出具体的原因。通过此文，你可以获得些这方面的信息，为你更深层次的理解这个问题打下些基础。
大多数关于网站可用性的指南都是来自于欧洲和北美。这不禁给我们提了一个问题：是否这些原则在亚洲（如中国、日本和韩国）的那些非英语国家仍然有效？
很多公司在不同的国家使用全球标准的设计模板来架构网站，然后以当地的语言来进行本地化开发。然而，这种方式并不一定在所有的情况下都工作的很好，因为不同国家的用户对于网站布局、色彩、图片样式和内容架构都有着不同的理解。
这是一个非常重要但也很复杂的领域，因为它包含了诸多方面的因素，有文化的、社会的、人口统计学的和心理学的等等。所以，针对这个话题有很多讨论，但并没有很多深入的研究。
在这篇文章中，我将几个显著的差别列出，通过研究这些差别，我们可以看到东西方网站在外观和功能上的差异。对我而言，这也是一个重要且基本的议题。在此议题之后，我们才能研究更多细节，为什么一个设计在不同的国家效果有差异？什么样的设计在西方国家很流行但亚洲的用户并不理解？以及这些差异背后所蕴藏的原因。
“我们有些相似，但也有不同”
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（在东南亚具有最大影响力的中文在线新闻网站）的广告几乎出现在网站页面的所有地方，甚至在内容的内部也有。
这些差异告诉我们什么
这里有品位不同的因素。虽然我们看到了亚洲网站很多显而易见的特点，但我们并没有证据说明这些特点是否是亚洲用户所喜欢的。因此我们需要更多的研究来发现到底什么造成了这些不同，这样才能设计出符合本地用户需求的网站。
Posted: 六月 1st, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
在做视觉设计时，如何高效地使用图标是一门学问：该使用什么样的图标？图标该放在哪里？大小如何？图标的使用是否帮助用户更好更快的理解内容，亦或是增加了他们的理解负担甚至产生误导？今天恰好看到了一篇很好的文章，可以帮助我们了解该如何使用图标来支持内容，故翻译如下：
为什么使用图标？设计就是传达信息：如果你的网站不能吸引用户，这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初，大多数用户首先扫描页面来寻找视觉上看着有趣的内容，只有某些事物引起了他们的注意力，他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。
图标起着与分段一样的心理效果：在视觉上，图标打破了内容，使之不那么让人生却。通过图标将内容划分成几个容易理解的段落和重点，这样的页面很容易阅读，在视觉上也足够有趣以维持用户的注意。因此，不要再浪费时间写那么多无人阅读的内容了，开始使用图标吧！
在本文中，我们将展示很好的例子和网页设计中使用图标来支持内容的最佳做法。
1.如何使用图标
使用图标的首要目标应该是帮助用户更有效地吸收和处理信息。一般的做法是使用大量的空白和那些能增强内容的图标。图标通过给予内容更多的实质和有效的传达，能很好地丰富内容。图标应该用来吸引用户注意信息内容，而不是削弱或取代它。
*让功能清单更有趣
列出服务清单是有效的市场推中实用、必要的一部分，但本质上来说，清单是乏味和无聊的。在您的功能清单中使用图标将使其更具有吸引力。
280 Slides
* 吸引用户关注Web应用程序的新功能 Read the rest of this entry »
Posted: 五月 21st, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
提升网页和博客设计品质的一些实例和技巧
“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。
接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。
Read the rest of this entry »
Posted: 五月 9th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
简介
现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。
所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。
光照与阴影的原理快速剖析
原文： 5 Simple Tricks To Bring Light and Shadow Into Your Designs
现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上，光影帮助我们辨别事物，认知他们的材质、尺度和透视。
所以如果要让我们的网页设计更加自然、有动感且真实直观，正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧，好好运用它们，能让你的设计更加精致，从众多的页面中脱颖而出。
Read the rest of this entry »
Posted: 五月 5th, 2009 | Author: admin | Filed under: UCD, Web Design | 评论关闭
网站设计无非就是将你的信息以最直接，干净，简单的方式传递给访问者。而公司网站的设计还需要抓住一个公司的感觉，同时，要给人以专业，稳健，持久的印象。在访问一个公司的网站时，网站的图形，布局，配色都会将这种感觉与印象传递给客人。本文精选了50个设计出众的公司网站或许能给你带来一些启迪
Read the rest of this entry »
