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

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

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

        当前位置: 首页 > 设计教程 > 平面设计理论 > 网页设计中多元素是如何做到统一一致

        网页设计中多元素是如何做到统一一致

        形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括世间万物的美都可以用形式美法则来概括在平面构成中也有形式美法则统一和变化对称和平衡节奏和韵律对比和调和前面跟大家有分享了对比留白在网页当中的运用今天我们继续来分享网页当中那么多元素是如何做到统一一致的

        在视觉上的统一可以体现在?#21644;计?#33394;彩;区块;布局;字体视觉元素此外还有一个交互上的统一

        1?#35745;?#32479;一

        ?#35745;?#32479;一体现在?#35745;?#22823;小尺寸上的统一颜色色系上的统一和?#35745;?#39118;格的统一

        不管是京东还是天猫淘宝这些商城在网站上的?#35745;?#22788;理就用了这样的统一原则不一样的场景下对?#35745;?#30340;要求也都不一样比如京东商城的首页每一个区块起到一定的导航性作用在这样的场景下需要的?#35745;?#37117;是比较简洁而不是背景复杂的下面我做了一个错误的示例给大家演示

        网页设计中多元素是如何做到统一一致

        左图是官网的?#35745;?#21491;图是一个错误示范显而易见左图的展示性和可读性都比较强视觉效果也比较好右图之所以觉得不?#27599;?#26159;因为?#35745;?#22823;小不一致?#35745;?#30340;背景颜色也不一致所以看起来特别不协调

        好了现在应该有人会想问那京东或是天猫淘宝通过搜索后进去的页面里面的产品配图不是五颜六色的吗那怎么看起来也没有觉得不协调

        7d5658d21768a801219c77449eda.jpg

        这些界面的统一一致性体现在产品区块的大小尺寸上和整体的样式上除了产品图不一样其他的布局样式区块大小都是一样的这恰恰跟首页相反首页各个区块大小不一致所以采用?#35745;?#19968;致来协同内页则是区块样式一致?#35745;?#19981;一致但不管哪一?#20013;?#35843;方法界面?#35745;?#21040;了很好的协调性

        ?#35745;?#39118;格上的统一主要体现在网页当中的?#35745;?#36873;择上在写实风格的网页中就不适合卡通的?#35745;?#22312;清爽的界面当中就不适合劲酷的?#35745;?/p>

        2色彩统一

        色彩统一指的是网页当中色彩色系运用的统一性这样的统一性可以体现在网页中的整体色系也可以体现在网页当中所有区块标题的颜色甚至统一到整个网页界面当中按钮的颜色搭配一般情况下如果不知道网页定什么色系好小?#21908;?#30340;意见和建议就是跟着你们的logo颜色走

        560d58d2177aa801219c77b3da73.jpg

        Obrigado椰子水饮料网站的主色调就是用了绿色与白色相结合穿插了一些橘黄色起到活跃画面的作用绿色是标志的主色橘黄色也是标志的一个辅助色可以看到整个网站简洁清爽黄色和绿色并不是等比重出现在网页当中就跟标志一样黄色的占比少可以访问看看里面一些交互运用也做得比较好

        分享到: 
        平面设计中必须遵循的20个设计原则
        2017超流行的LOGO六大设计趋?#21697;?#27861;

        热门推荐

        ڿ¡

        <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>