<dd id="rcs5i"><tr id="rcs5i"></tr></dd>
    <div id="rcs5i"></div>

    <div id="rcs5i"></div>

      1. <div id="rcs5i"></div>

        当前位置: 首页 > 设?#24179;?#31243; > 网页设?#24179;?#31243; > 从平面栅格设计看网页中的布局设计

        从平面栅格设计看网页中的布局设计

        网页设计中的脏乱差是我们在设计过程中常会遇到的问题通常"脏"是由对色彩使用不当所产生的而色彩使用不当产生的不好效果也分为"花灰"花哨灰头土脸也就是这里所说的"脏"而"差" 基本上是由于我们的技法上不够娴熟所产生的比如细节上的处理不到位某个局部的效果制作得粗糙这可以称之为"差"特别是在处理带有2D效果的设计作品时这种情况常会出?#24103;?#20294;是我今天在本文中所要谈的是"乱"

        什么是乱?这里的乱不是指用色乱也不是指内容乱而主要是指网页布局乱以前我?#34892;?#25509;触了平面设计并且从中学到了很多平面设计上的一些知识与技法其中“栅格设计”就是平面设计中用于处理布局的一种理论到目前为止我还在研究"栅格设计"因为着?#24471;?#26377;什么比较好的语言可以非常简洁明了的概括这个词这更像是需要不断用实践去理解的所以很多时候我们们都无法去?#24425;?#20294;是在设计中这个栅格却是能帮助我们完成更好作品的一个非常好用的利器对于栅格设计我也不能说是认识深刻我这里只是依据我对于栅格设计的理解将之用于网页设计中希望能给更多的朋友们一点启示或许能打开一些朋友的思路

        单纯的文字是没办法让设计师们?#25176;?#30340;看下去的所以还是老办法用?#23601;?#26469;作为讲解模型这次我们使用的网页是微软IBMASTRO三个公司网站来讲解希望通过分解这三个公司的网站设计能把我所理解的栅格设计传达出来看?#23601;E?/p>

        从平面栅格设计看网页中的布局设计

        我们看到微软公司的网站设计中并没有什么明显的线去区隔不同的区块但是当我们把当蒙上一层纱然后用实线把每个部分都画出来这时我们发现这个网站其实是处在一个栅格阵列中那么这个阵列中的内容已经很明显了并且我们从中发现了很多区块在页面中的位置居然是那么的有条理并且有一些并不在一起的区块居然也有一定的规律当然有人可能会说都用线画出来了当然显得条理整齐了问题就在于这里我们的网站都可以用纵横线区分开但是一些设计得不好的网站的纵横线可能数量非常的多纵横线的数量过多并且?#25216;?#22312;一直这就说明网站的布局显得太乱或者是过于条理而变得布局平均没有对比缺乏美?#23567;?#20854;实?#28784;?#29992;这样的方法去分析一下自己设计的作品也许就能从中看到问题所在

        下面我们再来看一下IBM的网站的分解图

        我们看到IBM的栅格与MS的有很大的不同IBM中还出现了一些差不多大的栅格但是这里要注意其实这些栅格是由于底部很小的几个区块所产生的并且这凡个区块还可以看作是一个横向的区块我们从这里可以看到IBM的布局设计是对称的但是这种对称却是在离在纵横线上却不容易注意到的这是很高明的手法

        我们再来看看ASTRO公司的网站这个网站比起上面两个公司的网站就更娱?#21482;?#26356;有趣了

        从这三个网站中我们可以看到三种不同风格的栅格设计虽然有所不同但我们依然可以发现三者都会尽可能的把最重要的信息放在视觉中心点上不论是放在左边的还是右边的或是中间的他们都得到了最大的栅格区得到了足够的重视!我们的视觉中心也自然盯在了上面!

        分享到: 
        浅析平面设计与网页设计的差异性
        网页设计师和平面设计师的思维差别
        ڿ¡

        <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
          <div id="rcs5i"></div>

          <div id="rcs5i"></div>

            1. <div id="rcs5i"></div>

              <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
                <div id="rcs5i"></div>

                <div id="rcs5i"></div>

                  1. <div id="rcs5i"></div>