<tfoot id='zg4om7ka'></tfoot>

    <small id='l1pivl1x'></small><noframes id='3busux5f'>

    <legend id='koubjs98'><style id='j1v9maze'><dir id='wm6b9buv'><q id='8wzde6xz'></q></dir></style></legend>
    <i id='sccwq6zq'><tr id='18ydgu4o'><dt id='igo014o9'><q id='55vobmp4'><span id='i0ons23a'><b id='pk7kuxtw'><form id='cglumqi7'><ins id='26zl71qk'></ins><ul id='3zcb6gec'></ul><sub id='zf7n15lq'></sub></form><legend id='f62m7za6'></legend><bdo id='yy6vcjcj'><pre id='tvmpk1zc'><center id='lpisunay'></center></pre></bdo></b><th id='ac16b8vy'></th></span></q></dt></tr></i><div id='r99wk0m0'><tfoot id='80yfxbbd'></tfoot><dl id='lmtszfoc'><fieldset id='c4tq81x8'></fieldset></dl></div>
      <bdo id='x1ry990x'></bdo><ul id='qgq42v49'></ul>
    1. 精准传达 • 价值共享

      洞悉互联网前沿资讯,探寻网站营销规律

      网页前端 实现新拟态(Neumorphism) UI 风格

      作者: 庚午网络 | 2020-11-26 02:51 |点击:

        1. <legend id='vpz4uhra'><style id='ugpasros'><dir id='m4xe3fkp'><q id='re6rqdy2'></q></dir></style></legend>

              <tbody id='8xpgutn1'></tbody>

            <small id='7nvltbgg'></small><noframes id='4fra35k3'>

          • <tfoot id='zth5gcv6'></tfoot>

              <bdo id='dbve8xbr'></bdo><ul id='q8jlg54o'></ul>
              1. <i id='ke68kdcm'><tr id='jyf85oya'><dt id='qgp52kwl'><q id='6yltlcia'><span id='gzmz70tp'><b id='s9iaqaab'><form id='noam87l1'><ins id='o7zuhh1g'></ins><ul id='0f27tkn2'></ul><sub id='rhlhjenz'></sub></form><legend id='rwg8pz5j'></legend><bdo id='dy28meu5'><pre id='0ukqypa3'><center id='vm5mhhoq'></center></pre></bdo></b><th id='vu17622p'></th></span></q></dt></tr></i><div id='t6ouese1'><tfoot id='s8npu35l'></tfoot><dl id='6nw82poh'><fieldset id='bvuzefy1'></fieldset></dl></div>
                什么是新拟态?
                什么是新拟态(Neumorphism) UI 风格?就是给予界面中的组件事物以真实的感觉,其实它也是拟物风格中的一种,只不过运用了不同的表现形式,新拟物设计风格最早出现在追波上,后面陆续被收录在2020设计趋势预测里面,在2019年的年末慢慢被大家熟知,讨论,重视起来。
                 
                它是一种ui的新设计风格,兼顾创意和用户体验,有在前端(特别是移动端界面设计)运用的可能和前景。
                 
                下图就是新拟态代表作
                 
                网页前端 实现新拟态(Neumorphism) UI 风格

                从上面这张对比图可以看出,扁平风格就像是一张纸贴在墙面上,投影风格像是浮在半空中,而新拟态风格则像是墙面上直接凸起了一块。
                 
                传统扁平化设计和新拟态设计的比较
                传统的扁平化设计:
                扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。
                 
                扁平化的优点:
                 
                降低移动设备的硬件需求,延长待机时间
                可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生
                扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性
                扁平化的缺点:
                 
                降低用户体验,在非移动设备上令人反感
                传达的感情不丰富,甚至过于冰冷
                新拟态的特点:
                 
                有且只有一个光源照射
                组件与背景对比度比较弱
                常常用于卡片和按钮
                凹凸的真实质感
                因为对比度的原因,它不如扁平的简洁直观

                新拟态 UI 风格的前端实现

                Neumorphism CSS 在线生成器地址:https://neumorphism.io

                完整的Neumorphism  HTML代码演示
                 

                1. <style>
                  body {
                      background: #ecf0f3;
                  }
                  div {
                      position: relative;
                      float: left;
                      width: 200px;
                      height: 200px;
                      margin-left: 80px;
                      margin-top: 80px;
                      background: #ecf0f3;
                  }
                  .drop-shadow {
                      border-radius: 20px;
                      box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
                  }
                  .inner-shadow {
                      border-radius: 20px;
                      box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
                  }
                  .inner-shadow-ring {
                      border-radius: 100%;
                      box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
                  }
                  .inner-shadow-ring:before {
                      content: "";
                      position: absolute;
                      left: 20%;
                      top: 20%;
                      width: 60%;
                      height: 60%;
                      border-radius: 100%;
                      background: #ecf0f3;
                      box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
                  }
                  </style>
                   
                  <div class="drop-shadow"></div>
                  <div class="inner-shadow"></div>
                  <div class="inner-shadow-ring"></div>

                 

                二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/gengwuwenku/494.html

                  <legend id='yfgh8033'><style id='lzrsvasr'><dir id='u4zscrni'><q id='vygpeqzx'></q></dir></style></legend>
                  <i id='tib17f7g'><tr id='t6tqjgbu'><dt id='wctsub9a'><q id='h52rxcwt'><span id='v85xjv75'><b id='3ye9jkuf'><form id='2lxe48cp'><ins id='1pc40trb'></ins><ul id='07eqxa40'></ul><sub id='1wuhl5l0'></sub></form><legend id='hqfil8vy'></legend><bdo id='bpjx10vi'><pre id='xdcjbbcy'><center id='begqdhoj'></center></pre></bdo></b><th id='wyfx28p4'></th></span></q></dt></tr></i><div id='ez09ooz2'><tfoot id='s3d8onns'></tfoot><dl id='2wi1ywph'><fieldset id='kqba9yb3'></fieldset></dl></div>
                1. <tfoot id='a0uj8vto'></tfoot>
                2. <small id='37lc06y6'></small><noframes id='eagphbhd'>

                    • <bdo id='s0ul8pz5'></bdo><ul id='bdx15fhm'></ul>
                    多一份策划方案,总有益处。

                    请直接添加技术总监微信联系咨询

                    网站设计 品牌营销

                    多一份参考,总有益处

                    联系庚午网络,获得专属《策划方案》及报价

                    咨询相关问题或预约面谈,可以通过以下方式与我们联系

                    业务热线:18574395938 / 大客户专线:18574395938