w3pop.com :: 网络学院 :: 设计理念 :: 有效设计网页的方法
有效设计网页的方法 
Designing a website without intentional and effective white (or blank) space is like throwing your dinner into the blender and then drinking it through a straw. Pretty unappetizing.
网站设计中要出现令人印象深刻的空白区域，否则，就像把晚餐放入搅拌器中，然后用吸管喝掉，让你没有食欲。
Otherwise-good food is ruined because you're not able to appreciate each taste and texture. In the same way, it's impossible to enjoy a website where all the content is mixed up and you can't digest individual elements.
如果这样，再好的食物也会浪费掉，因为你品尝不出它们的滋味以及材料。同样，如果网站内容混乱，你不可能舒服地浏览网站，也不能领会各部分内容的意义。
That's where the principle of proximity comes in. It states:
这里就涉及到接近原则，它要求：
Elements that are related should be visually connected. Likewise, elements that are not related should be visually separated.
相关联的内容组织在一起，不相关的内容要分开。。
It's basically the same concept as the use of paragraphs in an article. When I begin a new paragraph, you can tell by the physical separation that I am starting a new thought. By the same token, the closeness in proximity means each sentence in the paragraph should relate to the others in that same paragraph.
文章中段落的运用，也应该考虑这个原则。一个段落完成后，新段落应该表达一种新思想。同样，同一段落中的语句要相互衔接，这是接近原则的要求。
So how do you make effective use of proximity? Here are the dos and don'ts:
如何有效利用接近原则呢？下面介绍几点建议：
1. DO use white space to separate things that aren't related. When you're laying out a web page, put everything into groups (for example, navigation, copy, contact/copyright info, news items, ads, special focus sections, etc.). After you've grouped everything, make sure the groups are adequately separated from each other.
1. 利用白色区域把不相关的内容分开。设计网页时，把内容分组，比如：导航、文字说明，联系信息以及版权信息、新闻、广告、特别关注内容等，各成一组。分组完成后，确保各组内容相互区分。
2. DON'T use white space to break up items that belong together. For example, don't put space between your heading and the first line of your copy. Don't put space between a picture and its caption, or between a product description and the order button. Closeness in proximity should be used to help the eye recognize when certain things should be understood together.
2. 不要利用空白区域把同组的内容分开。比如说，在文字说明的标题与首行之间不能出现空白，在图片与其文字说明之间不能出现空白，产品说明与定购键之间不能出现空白。接近原则中的关联性应该帮助浏览者把所有需要了解的内容区别出来。
Instead of separating related items, put white space AROUND these groupings. This will emphasize the fact that the information contained in the framed area goes together.
空白区域应该用来区别各组内容，这样确保用户清晰地浏览同一组信息。
3. DON'T feel obligated to fill every nook and cranny of your site. Having some empty space is a good thing, because it gives your site breathing room. Focus on an open, airy layout. Again, empty space between elements helps your eye focus more easily on the groups.
3. 不要把网站的每一个隐蔽处及边缘区域填充上内容，留下必要的空白区域，因为这样用户可以得到休息的空间，所以，网站布局要开放、自由。同时，各部分之间的空白区域可以帮助用户更方便地关注相关内容。
4. DON'T confuse white space with dead space. White space is intentional; dead space is not. Dead space is merely empty pockets of space without a purpose. If your site is filled with dead space, no relationships will be emphasized, and it won't be visually obvious what items should be understood together. This makes your page look cluttered.
4. 空白区域不能出现阴影。出现空白区域是有意识的，但阴影区域是没有任何意义的。如果网站出现这种区域，不但不能突出内容之间的联系，还会使需要理解的内容变得不明显。
Work hard to make sure you're actually using space (or lack of it) to emphasize which elements go together and which do not.
仔细考虑空白区域的使用方法，确保利用空白区域突出各部分内容；或避免利用空白区域，加强内容间的联系。
5. DO use white space to create a dramatic effect. The eye is drawn to isolated objects. The more isolated an object is, the more pull power it has on your eyes. So if you want a big effect, use a lot of space. Take this for an example:
5.利用空白区域创造突出效果。这样用户注意力容易被吸引到独立的内容中，内容越独立，吸引力越强，所以如果希望创造这种效果，你可以大量使用空白区域。例如：
Isolated
独立内容
If your eye jumped to the word in the sea of white space, you just proved my point. That's the power of space to visually emphasize an object.
如果注意力转移到空白区域的词语中，就证明了我的观点。空白区域能够突出内容。
6. Step back, take a look at your site, and make sure you've used space to effectively organize your site. Check specifically to ensure there's breathing room. Remember the principle of proximity:
6. 检查自己的网站，确保空白区域能够有效地组织网站内容，尤其要保证空白区域可以让访问者得到片刻休息。请一定记住接近原则：
Elements that are related should be visually connected. Elements that are not related should be visually separated.
相关联的内容组织在一起，不相关的内容要分开。
Now, put the principle to use!
现在，利用这个原则，设计网站。
评论 (0)
All
