赏片会——不止意会，还可言传
电影网页设计代码
为了避免大家说我标题党，在此先声明，本文赏的不是电影大片，而是网页设计。
虽然说能否做好设计在很多时候和个人的天赋有关，譬如对彩、线条和形状的感觉，有很多时候就像人们常说的这个只能意会，不可言传，但是一个好的设计依然有很多地方是可以言传的，也就是说可以用一些明白易懂的理论来分析。虽说设计上的很多方面是和个人天赋有关，但是若能在设计中秉持一些最基本的理论，虽然不一定能够做出非常杰出的作品，但至少可以帮我们避免一些常识性的错误，或者使我们的设计有条理性。（本文中对于设计的理解依然带有很大的主观性）
既然是赏片会，那么还是先上图吧。本文选取的是一个国外设计师的个人主页，很可惜的是这是一个单页面网站，没有导航，所以不够典型。（若是把自己的作品拿来分析总会有点自卖自夸的嫌疑，况且也没那么好）请点击查看大图或访问原站theorydesign.ca/#5，若大家一定要看到和截图完全一样的显示效果那就使用chrome浏览器然后选择第五张幻灯片。但不管你用什么浏览器，就是不要用IE6。
一、有条理的布局
我们还是先从大处着眼，对网页布局做一个分析。试想，把这张网页截图做个高斯模糊，我们再来猜想一下它的功能布局。
之所以在模糊之后依然可以看出大体的功能分区，那是因为大块的运用暗示出了功能上的分布，此处我把图片切换区域也看作为一个块。那么布局如下
在用户仔细阅读网站内容之前就给予用户充分的暗示，就能帮助用户更快地到所需的内容，也使网页本身更有条理。除了颜上的划分之外，还有严谨的网格划分，当然在这里我是逆向分析。实际中我设计网页都是先有网格，再进一步设计的。（貌似网格不是我这么个画法，希望高手指点）
二、丰富的调与纹理的使用，使得网页整体更有层次感。
在这里运用颜和网格已经使得网页富有条理性，我们可以不用那么费劲去寻自己想要的内容了。单纯用块和网格来给信息内容布局，够用了，但是不耐看，会有一点单调。在这里，设计师使用了带有纹理的图片作为大背景，使得网页在基本的颜之外有了更多的调，
丰富了作品的层次，也会更耐看。但是背景纹理的调范围不能打破网站现有的调布局，否则就会喧宾夺主。可以看出背景纹理是经过精心修改过的低对比度图片，以高对比度图片作为背景，上面的文字会不易阅读。
除掉背景纹理之外，网页中运用到的线条，字体的尺寸大小、笔画粗细、颜，按钮颜的使用都在无形中增加了网页的整体调。
三、字体的选用与编排
在网页的设计过程中，文字的编排占据了很大的份额。首先，设计师选用了几款非常具有现代感的字体。
logo选用的字体是笔画很粗的非常适合做标题的字体，同样，该款字体也用于按钮上。段落标题用的是serifa字体。正文则是最常用的arial字体。一般情况下，设计师的字体库中总是储
备了大量的字体，虽然我们所看到的网页中只使用到了三种字体，但这三种字体无疑也是设计师经过无数次筛选最终使用的。不适用太多的字体也是保证网页简洁的因素之一，这和设计其他平面作品是一样的。该元素选用什么样的字体好什么样的尺寸也就代表着该元素在文档中的层级和地位。
四、大量的富有立体感的样式的使用
网页中有很多地方使用了刻痕一般的立体效果。从文字到按钮，以及线条。
而图片还使用了阴影以使图片像纸片一样跳出平板的画面。
虽说许多图层样式只使用到了一像素大小的阴影和高光，但正是这不简单的一像素营造出了整个网页中丰富的光和影，使得网页在细节处依然耐看。
五、对比
文字之间的尺寸或者颜上的对比不仅能暗示出元素的层级，同时文字的不同的尺寸、颜、笔画粗细也会形成不同的调，从另一种途径上丰富了网页的层次。
六、高质量的图像
相信很多人在看到这个网页的第一时间就被里面的图像吸引了，网页中的图片泽饱满而又绚丽，景深的运用又使得图像富有纵深感，配上图像左边漂亮的字体，就算单单把这一块拿出来，也算是一件非常出的作品了，所以，有时候图像就是一个网站的焦点，图像的选用与处理关系到一个作品的档次。
 七、意义明确的、凝练的图标
有时候图标就好比标志一样，而在有限的空间里使用有限的像素或者形状来代表一个明确的含义，这本身就是一种很高的能力。况且图标很多时候起的不只是点缀作用。
综上所述，设计并不是一件简单的事情，但是若能抽丝剥茧地一层一层地来分析、构思，设计也可以说是一件简单的事情，但是任何脱离了实践的理论都是狗屁，跟大学课堂的照本宣
科没什么两样。只有去做了才知道，去做了也才能有自己的感悟，才会发现我讲的是对是错。当我们看到一件杰出的作品时最好除了感叹之外，能够花点时间来分析一下好在何处。站酷上好作品很多，不要走马观花地看哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。