Home思洋影视事业部网站建设知识库
0 Comments

分级（Hierarchy）和分度（scale）

发布于：2013-03-20  |   作者：广州网站建设  |   已聚集：人围观

分级（Hierarchy）和分度（scale）

每一个版式都需要分级。它的核心是，分级支持通过提供关于文本结构和组织的视觉线索而获得清晰度。分级定义了内容如何被阅读。它为用户展示了到哪里开始阅读和到哪里停止阅读。它把页眉和正文区分开。虽然通过文本块的颜色可以在页眉和正文间产生对比，分级则通过元素的大小显示出它们的不同。分级在使布局易于扫视方面起到了重要作用，它也是使网站排版变得可读的一项重要技术。正如Jeff Croft 在他的“优雅的网页排版”中陈述的那样，传统意义的上的排版由分度组成。一个版式中字体大小的不同是很有意义的，理解这一点很有帮助。为了在排版中获得良好的分级，需要使用分度，下面是传统的分度。

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

你也可以小心翼翼地创建自己的分度。分度使文字和谐与连贯。另一种选择是，一些设计者倾向于在定义文本和标题的字体大小时使用Fibonacci 数列（比如：16 – 24 – 40 – 64 –104）。

下面是一个简单的关于排版尺度的例子，在CSS 中定义如下所示。



    
	
  1. 
		body {  
    2. 
	
  2. 
		font-size: 0.625em;  
    3. 
	
  3. 
		/* 因为浏览器的默认字体大小是16 像素，我们现在要把页面文字大  
    4. 
	
  4. 
		小降到10 像素，这样更容易计算 */  
    5. 
	
  5. 
		} 
    6. 




	
		

			
				
		

		

			
				AIGA 通过对颜色、字体大小和行高的巧妙使用，达到了美丽、清洁和自然的分级效果。
		

	




	 




    
	
  1. 
		p { font-size: 1.4em; /* 14px */ }  
    2. 
	
  2. 
		h1 { font-size: 4.8em; /* 48px */ }  
    3. 
	
  3. 
		h2 { font-size: 3.6em; /* 36px */ }  
    4. 
	
  4. 
		h3 { font-size: 2.4em; /* 24px */ }  
    5. 
	
  5. 
		h4 { font-size: 2.1em; /* 21px */ }  
    6. 
	
  6. 
		h5 { font-size: 1.8em; /* 18px */ }  
    7. 
	
  7. 
		h6 { font-size: 1.6em; /* 16px */ } 
    8. 




	当然，要在设计中创建一个合适的版式分级，你不必把自己仅仅限制在字体大小上。你还可以使用颜色、字体效果（比如段首字母下沉、大写字母、小型大写字母）、斜体和其他的选择，来为用户提供关于页面内容结构和文本块相对重量的线索。





广州网站建设,网站建设,广州网页设计,广州网站设计
			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机