排版

　　一个网站由很多元素组成，其中页面排版布局则显得格外重要。这就好比是在盖房子，地基打得是否牢固直接影响整栋房子的美观。好的布局网页布局给人一种安定、平稳的感觉，以此更好的留住访问，所以在网站定制开发前期，需要对网页有一定的规划，在构思和设计的过程中，你还必须要掌握以下几项原则：

　　1.平衡性

　　所谓平衡性就是指文字、图像等要素的空间占用上分布均匀，而且色彩要协调，要给人一种平稳的，看着舒服，满足客户的感官感受很重要。

　　2.对称性

　　打破传统过度的对称，那种呆板、死气沉沉的感觉;适当制造一点变化，会有不一样的效果，对称也是一种美。

　　3.对比性

　　所谓对比，是让不同的色彩、色调、形态等技巧来作表现，来形成鲜明的视觉效果，它们往往能够创造出富有变化的效果。

　　4.疏密度

　　疏密度指不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。要做到疏密有度，即平常所说的"密不透风，疏可跑马"。

　　5.比例

　　比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。

　　以上是网站定制开发常会遵循的网页排版布局原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。不管是你的网站定制开发，还是专人制作，相信经过不断的尝试和推敲，你的网页一定会亮丽起来的。

 

 

　　为了从众多竞争对手中脱颖而出，不少站长又在探究别具一格的网站排版设计。这不，空间共享式网页排版开始火了，它是指让网站上的元素横跨不同的区块、实现空间共享的一种排版设计。这个概念听上去可能很复杂，但却很容易辨识，比如文字区域的文本横跨延伸到图片或色块区域中，共享其他组件的空间。这种共享式网页排版简单高效，能让整个网站充满层次，它还可以用来承载很多创意十足的设计，用来创造令人眼前一亮的网站作品。那么在网站中究竟应该怎样使用这种网页排版呢?下面小飞就带大家一起看看什么是空间共享式网页排版，以及空间共享式网页设计的几种使用方法。

　　什么是空间共享式网页排版?

　　不少人将空间共享式网页排版看做是分屏设计的一种延伸。不过相比界线分明的分屏式设计，空间共享式网页排版的核心在于某个元素同其他元素共享空间，元素可以横跨多个图层或区块，有时甚至会出现元素相互叠加的情况。这种排版布局方式有两个好处，一方面，网页元素是相互区分(带有分屏式设计的特点)，重点信息层次分明，有助于用户更好的理解网站重要内容。另一方面，网页的元素又是互相融合的，两个矩形的卡片式是相互连接的，这使得元素可以更好的被承载，尤其是文本元素(突破了分屏式设计的限制)。空间共享式网页排版除了可以应用在网页设计中，它还能在海报或明信片设计发挥自己的光和热。

　　在空间共享式网页排版中，横跨多个区块的元素可以显而易见，也可以很微妙。下图是HometownTrolley网站的首页，它就使用了空间共享式网页排版。右侧的文本处的线条延长至左侧的图片中，将用户视觉引导到图片上，而左侧汽车的后视镜又嵌入到了右侧的文本区块中，两侧元素实现了空间的共享，这种共享又是微妙、细致的，让页面显得尤其协调。

　　

 

　　下面是空间共享式排版的一些应用方式：

　　混搭图片和文字

　　在空间共享式排版中，图片和文字混搭算得上是最经典的设计方式了。很多设计师喜欢在共享式排版中使用垂直定向的图片(这种图片一般在网站中不常用，因为大多数设备屏幕以横向为主)。在这种排版样式中，文字的应用也相当自由，它既可以横跨横跨图片或留白存在，也可以在各个区域中单独使用。图片和文字的混搭往往可以给用户留下印象深刻的视觉效果。

　　TheSquareApartments网站就是一个栗子。它在首页使用了空间共享式排版方式，上方的标题横跨了图片和文本区块，而下方的细节文字说明又是单独存在的，文字和图片的属性都被淋漓尽致的展现出来。图片和文字混搭的方式还有一个好处，由于文本需要跨越不同的区域，配色不用保持完全的统一，根据文字周围的背景色进行调整，这样的设计简单而容易上手。这也是空间共享式排版设计中最简单易学的一种样式。

　　

 

　　选用大胆的字体

　　在空间共享式布局下使用有趣而独树一帜的文字也是比较不错的选择。跨越不同区块大胆独特的字体不仅可以带来独特的视觉体验，还能够创造页面重心，同时也不会降低自己的焦点位置。

　　如果你在空间共享式排版中使用大胆、独特的字体，记得选择有趣显眼的字体，应用文本也不能太短。另外，图片和背景色也要协调一致，字体与这两者要在色彩上形成对比，这样字体在整个页面上可读性才会比较高。可读性是这种设计手法中最重要的点，通常情况下，文本部分建议选择黑色或者白色的字体，虽然许多用户觉得看起来很简单，但是要平衡图片、背景和文本三个部分的配色体系，实际上还是挺麻烦的。

　　

 

　　色块和文本组合

　　前面我们说过图片和文字混搭是空间共享式排版中最经典的方式之一。不过如果你的网站主页中没有图片，你同样也可以使用空间共享式设计，这时我们就要请色块和几何图形出山了，色块或几何图形与文字搭配也能呈现非同凡响的视觉效果。

　　StartupLab的网站就将色块和文本以极其时尚的方式搭配起来，创造了好几个分层，让页面变得饱满而充实。清晰的阴影字体不仅可以突出自身作为主体的地位，还可以与二级字体形成很好的对比，合理的色彩搭配也让整个网站在视觉上很舒服，能够给用户提供不一样的浏览体验。

　　

 

　　结合动画效果

　　使用空间共享式的排版，并不意味着你不能使用其他设计手法，比如动效就可以与之很好的结合起来。在用户界面或导航条目中使用动画效果能够便于用户理解你的设计，也能鼓励用户与页面进行交互。而在页面元素较多的时候，微妙的动效还可以更好的创建视觉焦点。

　　在MessageinaBottle这个网站上，首页中间的圆形Logo会缓慢地转动，在这个不对称的页面当中，它是当之无愧的视觉焦点。它很好地填补了图片和文本之间的空白，让整体设计更加完整和平衡。动画效果让你对这个品牌的印象会更加深刻。

　　

 

　　简约设计

　　在大多数的情况下，简约的设计都是非常有效的。虽然你可能觉得这是老生常谈，但简约设计常确实完美规避了复杂设计所面临的各种问题，高效直接的排版设计更易发挥作用。如果你觉得前面几种空间共享式设计方式都太复杂了，不妨选择一个简洁的排版方式，这种方式很是直观，可以很好地吸引用户的注意力。

　　Melviie这个网站采取的就是最简单的极简布局框架，使用黑色的文本和白色的背景，让中间的图片成为视觉焦点。如果你不知道从何入手，不妨就学习这种方式设计空间共享式排版布局吧!

　　

 

　　在空间共享式网页中，排版设计、图片、文字等元素的处理看上去可能更加现代化，但相比传统设计手法，它也没有复杂多少。空间共享式的设计手法让页面中常被用户忽略的元素和其他元素有了更多的交集，让页面内的元素"互动"了起来。

　　快来起飞页自助建站平台（）做一个响应式网站吧!

　　【作者】宋宋宋

　　【来源】创客贴

　　【编辑】善小倩

　　排版不仅仅是在背景上放上具有设计感的字体，更是大多数设计的重要组成部分。

　　1.间距适当

　　这是一个常见的解决方法：空间不足，但你需要大量的文本;你会怎么做?你把文字段落间距整体调小，你以为这个方法不错。问题是，当你的文字太接近时，会明显降低可读性(特别是在使用较小的字体时)，使得设计看起来很拥挤。

　　

 

　　2.不按比例缩放

　　另一个常见的错误(类似于前一个)是拉伸文字或者段落来适应一定的空间。

　　但是有办法可以避免这个问题：

　　一是确保当你扩大或缩小文本框时，按比例进行。不同的设计程序有各种捷径。例如，在创客贴中，当您拖动文本框或任何其他对象的角落时，它会自动等比放大缩小。在Photoshop和Illustrator等Adobe程序中，按住Shift键的同时拖动文本框的一角。

　　二是调整字体大小更有效地填充空间。

　　

 

　　3.文本的可读性

　　如果你想让你的设计吸引注意力，就必须能够清楚地阅读它。但是有时候，在设计过程中很容易陷入困境，以至于你做出的选择能够达到一定的设计感，但不是很实用。

　　例如，黑色背景上的细小白色文字可能看起来光滑，但可能难以阅读。

　　

 

　　可读性问题可以有多种形式：

　　字体可能太小

　　字体和背景颜色可能会冲突

　　透明效果可能会使文本难以看到

　　。。。

　　4.使用太多字体

　　一些设计需要装饰字体，但大多数不会。大多数的设计都是数量有限的字体-最好不要超过三种。字体太多会导致你的设计感觉很业余，而不是专业和深思熟虑之后设计出来的。标整体、统一的字体让您的设计看起来干净整洁，而不是杂乱混乱。

　　

 

　　5.过分强调

　　跟上一个注意点差不多，有些时候，你想强调文本的某一部分-使其突出显示的重要性。还有很多方法可以做到这一点：斜体，粗体，下划线，删除线，字体大小等。

　　只是不要在一段文字中使用它们

　　使用太多让读者太难以明白传达你的信息，给读者的感觉是混乱的，无意义的设计。

　　6.最后，不要忘记检查检查检查

　　这是一个比设计还要重要的步骤。对文本进行最后全文通读一遍，检查错别字及多余符号文字。所以，即使是无意的错误也会使你的设计排版看起来不专业，并会导致您的客户对公司和设计师造成不好的影响。