收 藏 投 稿 繁 体 RSS 
站长吧-中国站长学习与交流的网站
首 页 运 营 学 院 建 站 论 坛
Web master8.net  
 网站运营  
  欢迎在本站发布信息,在线投递稿件请点这里。编辑QQ:4908220,欢迎联系交流。
业界动态 创业故事 推广研究 策划盈利 电子商务 企业平台
  站长工具
SEO查询 Whois查询 Pr查询 域名查询 IP查询 网页编辑器
 建站服务  
  如有建站意向,请尽快联系我们,以便安排时间... 建站服务 QQ4908220 QQ:4908220
作品展示 服务范围 服务流程 服务报价 联系方式 付款方式
文章正文  » 您的当前位置: 首页 >> 学院 >> 网页设计 >> 设计相关
有效设计网页的方法
  来源:互联网 | 时间:2007-11-27 | 浏览:   相关评论 | 报告错误 | 发布文章
【字号: | | 】 【背景色 杏仁黄 秋叶褐 胭脂红 芥末绿 天蓝 雪青 灰 银河白(默认色)
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!

现在,利用这个原则,设计网站。
master8
  • 上一篇:拒绝使用的七种logo样式
  • 下一篇:设计站点定义

  • 我要投稿  打印本文  推荐本文  加入收藏  返回顶部  关闭窗口
    搜模板(www.somoban.com) 原创网站模板交易平台
    阿里妈妈再掀疯狂采购风,网站广告位严重告急,急召天下站长
    基于PHP+MySQL的整站、模块、插件开发等或者按需求实现相应功能;
基于各PHP主流建站系统CMS,BBS,BLOG等的模板定制,完全手写代码;
整站数据迁移或备份恢复;网页代码优化、重构;整站常规SEO优化;网站技术支持;
点击了解详情...
    站长论坛
    • 验证码: