网页设计经典方案.docxVIP

第 第 PAGE 1 页 共 NUMPAGES 1 页 网页设计经典方案 　　一种全新的设计手法，融合了最新的设计技巧，呈现和前人不同的气场，用更现代的气质来承载内容，这样的网站无疑会更加吸引用户，让访客难以忘却。今日要聊的三种设计趋势其实已经涌现一阵子了，但是作为一种相对综合的设计手法，他们并没有引起广泛的关注。只需要运用现有的元素、色调和排版手法，就可以实现这三种设计效果，但是它们不论是从美学特征上，还是从功能性上，都不输于其他的趋势。有爱好么?不妨来看看吧。　　1、双色调配色方案　　双色调配色已经存在很长的一段时间了，单我们几天所说的双色调方案是在全屏设计背景下，加入渐变效果和高冲击力视觉设计下的双色调配色方案。在扁平化的大势之下，Spotify 大范围运用双色调配色，将这一设计手法推到了潮头。　　那么双色调配色详细是怎么一回事呢?　　简约说来，是两种色调来构成一套配色。最常见的双色调配色会选择互补色来进行组合。在更繁复的场合中，会运用其他的组合来营造特定的感觉，打破商定俗成的配色风格，可能会有惊喜。　　大多数双色调效果是运用一个色调艳丽的色调叠加在照片上实现的，强化深浅色调对比，从而营造超卓彩冲击力。Shopify 对于这种手法的运用特别的纯熟，在恰当的排版设计搭配下，将数十位设计师照片以这种独特的方式呈现出来。　　从技术的角度上来看，双色调配色可以同很多其他的`设计手法、技术一同搭配运用，比如全屏设计，比如响应式设计，比如插画，正犹如上面的那些案例中的诸多技术一样。除了独特的视觉效果，它可以用来强调，对比。这是一种特别强的表现手法，用的时候记得适量运用。　　2、分屏式设计　　分屏式的网页设计案例正在成倍增长。从技术上来讲，这类网页的设计师喜爱将屏幕均分为并排的两个区块，两者尺寸大小都一样，有的时候还会加上轮廓来强调区域的概念。　　这样设计的效果是很酷炫的，在代码编写到位的状况下，网页在桌面端打开的时候，两个区块并排显示，而在移动端上，并排的区块智能地以上下堆叠的形式呈现出来。　　分屏是设计的运用其实是可以嵌套细分的，它可以是简约的对半分，也可以套个栅格，无限分割下去，这样的案例特别的多。被划分的区块可以承载相像的、对比的内容，也可以承载迥乎不同的媒体类型，而栅格式细分的区块还能援助网站的设计者探究用户真正感爱好的内容。　　分屏式设计对用户是友好的，和响应式设计可以很好地结合起来，同时还可以加入更多的新技术和设计手法。　　下面是一些高效分屏的技巧：　　当你没有太强的视觉设计之时，留意字体和色调的搭配　　吸引用户的留意力让他们从左向右看，从而引导用户的视觉运动。　　运用色块来分割屏幕，为主要信息留下足够的空间，确保整体的可读性。　　将分屏视作为超大的卡片。将不同的内容制作成更小的区块，在大的卡片中组成马赛克。　　尽量确保每个区块中内容的简约易读。　　3、空间共享式排版　　你可能在其他地方看到过这个趋势：文字排版被延伸到了共享的设计空间。在绝大多数的网站中，图像、背景和文字是最主要的元素，它们要么相互嵌套有机组合，要么相互分别。　　但是越来越多的设计师开始试图打破元素之间的界限，不同类型的视觉元素打破固有的位置，进入其他元素的空间，堆叠，交叉，错落。看起来还是特别有趣的。　　但是考虑到整体的可读性，这种设计还是相当具有挑战性的。　　要运用这种设计技巧，最好搭配以简约的排版。文字应当同其他的元素有足够的对比性，从而确保它在横跨多个不同元素的时候，保持基本的可读性和辨识度。这也使得绝大多数这类网站都倾向于运用黑色和白色的文字。　　字体尺寸也是一个值得留意的属性，它和色调掌握同样重要。你还需要留意文本部分在不同尺寸的屏幕上的显示和运动，也就是响应式改变中的断点。　　在诸多设计案例中，最值得留意的是Deu* Huit Huit 。横跨首页主图的文字的运动方式，当它穿越图片、背景的时候，是如何确保它的可读性的。