<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

102021-6

css簡單樣式（旋轉正方形、紙片旋轉、輪播圖3D、簡單輪播圖）

 


    

        

            
                旋轉正方形
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE html> 
            

        

    

    

        

            

            

        

        

            
                <html> 
            

        

    

    

        

            

            

        

        

            
                <head> 
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
            

        

    

    

        

            

            

        

        

            
                <meta charset="utf-8"> 
            

        

    

    

        

            

            

        

        

            
                <title>旋轉立方體</title> 
            

        

    

    

        

            

            

        

        

            
                <style type="text/css"> 
            

        

    

    

        

            

            

        

        

            
                .stage{
            

        

    

    

        

            

            

        

        

            
                position: relative;
            

        

    

    

        

            

            

        

        

            
                perspective: 800px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                @keyframes rotate-frame{ /* 設置動畫效果 */ 
            

        

    

    

        

            

            

        

        

            
                0% {
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(0deg) rotateY(0deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                50% {
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(360deg) rotateY(0deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                100% {
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(360deg) rotateY(360deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .container{
            

        

    

    

        

            

            

        

        

            
                width: 450px;
            

        

    

    

        

            

            

        

        

            
                height: 450px;
            

        

    

    

        

            

            

        

        

            
                margin: 0 auto;
            

        

    

    

        

            

            

        

        

            
                transform-style:preserve-3d;
            

        

    

    

        

            

            

        

        

            
                animation: rotate-frame 8s infinite linear;
            

        

    

    

        

            

            

        

        

            
                animation-timing-function: all;
            

        

    

    

        

            

            

        

        

            
                animation-direction: normal;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                animation-fill-mode: backwards;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                transform-origin: 50% 50% 75px;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*background: yellow;   容器屏幕背景色*/ 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .container:hover{
            

        

    

    

        

            

            

        

        

            
                /*覆蓋時暫停動畫*/ 
            

        

    

    

        

            

            

        

        

            
                animation-play-state: paused;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .side{
            

        

    

    

        

            

            

        

        

            
                width: 150px;
            

        

    

    

        

            

            

        

        

            
                height: 150px;
            

        

    

    

        

            

            

        

        

            
                position: absolute;
            

        

    

    

        

            

            

        

        

            
                text-align: center;
            

        

    

    

        

            

            

        

        

            
                line-height: 150px;
            

        

    

    

        

            

            

        

        

            
                font-size: 50px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .top{
            

        

    

    

        

            

            

        

        

            
                left: 150px;
            

        

    

    

        

            

            

        

        

            
                top: 0;
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(-90deg); /* 設置角度 */ 
            

        

    

    

        

            

            

        

        

            
                transform-origin: bottom;
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(0,0,255,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .bottom{
            

        

    

    

        

            

            

        

        

            
                left: 150px;
            

        

    

    

        

            

            

        

        

            
                top: 300px;
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(90deg);
            

        

    

    

        

            

            

        

        

            
                transform-origin: top;
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(0,255,0,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .left{
            

        

    

    

        

            

            

        

        

            
                left: 0;
            

        

    

    

        

            

            

        

        

            
                top: 150px;
            

        

    

    

        

            

            

        

        

            
                transform: rotateY(90deg);
            

        

    

    

        

            

            

        

        

            
                transform-origin: right;
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(255,0,0,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .right{
            

        

    

    

        

            

            

        

        

            
                left: 300px;
            

        

    

    

        

            

            

        

        

            
                top: 150px;
            

        

    

    

        

            

            

        

        

            
                transform: rotateY(-90deg);
            

        

    

    

        

            

            

        

        

            
                transform-origin: left;
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(0,0,100,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .front{
            

        

    

    

        

            

            

        

        

            
                left: 150px;
            

        

    

    

        

            

            

        

        

            
                top: 150px;
            

        

    

    

        

            

            

        

        

            
                transform: translateZ(150px);
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(0,100,0,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .back{
            

        

    

    

        

            

            

        

        

            
                left: 150px;
            

        

    

    

        

            

            

        

        

            
                top: 150px;
            

        

    

    

        

            

            

        

        

            
                background-color: rgba(100,0,0,0.5);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .rotateX180{
            

        

    

    

        

            

            

        

        

            
                /*讓倒置的數字倒置回正常狀態*/ 
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(180deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </head> 
            

        

    

    

        

            

            

        

        

            
                <body> 
            

        

    

    

        

            

            

        

        

            
                <div class="stage"> 
            

        

    

    

        

            

            

        

        

            
                <div class="container"> 
            

        

    

    

        

            

            

        

        

            
                <div class="side top" >1</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="side bottom">2</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="side left">3</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="side right">4</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="side front">5</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="side back">6</div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </body> 
            

        

    

    

        

            

            

        

        

            
                </html>

 


    

        

            

            

        

        

            
                紙片旋轉
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE html> 
            

        

    

    

        

            

            

        

        

            
                <html lang="en"> 
            

        

    

    

        

            

            

        

        

            
                <head> 
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8"> 
            

        

    

    

        

            

            

        

        

            
                <title>Document</title> 
            

        

    

    

        

            

            

        

        

            
                <style type="text/css"> 
            

        

    

    

        

            

            

        

        

            
                .zpbox{
            

        

    

    

        

            

            

        

        

            
                /*設置3D視角*/
            

        

    

    

        

            

            

        

        

            
                perspective: 800px;
            

        

    

    

        

            

            

        

        

            
                perspective-origin: bottom right;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box{
            

        

    

    

        

            

            

        

        

            
                height: 200px;
            

        

    

    

        

            

            

        

        

            
                width: 100px;
            

        

    

    

        

            

            

        

        

            
                margin: 50px auto;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*preserve-3d 指定子元素定位在三維空間內 */
            

        

    

    

        

            

            

        

        

            
                transform-style: preserve-3d;
            

        

    

    

        

            

            

        

        

            
                /*指定變換為：linear-線性過渡*/
            

        

    

    

        

            

            

        

        

            
                transition-timing-function：linear;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*指定旋轉動畫*/
            

        

    

    

        

            

            

        

        

            
                animation-name: action_b1;
            

        

    

    

        

            

            

        

        

            
                animation-duration: 4s;
            

        

    

    

        

            

            

        

        

            
                animation-timing-function: all;
            

        

    

    

        

            

            

        

        

            
                animation-direction: normal;
            

        

    

    

        

            

            

        

        

            
                animation-iteration-count: infinite;
            

        

    

    

        

            

            

        

        

            
                animation-fill-mode: backwards;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                position: relative;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box:hover{
            

        

    

    

        

            

            

        

        

            
                /*覆蓋時暫停動畫*/
            

        

    

    

        

            

            

        

        

            
                animation-play-state: paused;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .b1{
            

        

    

    

        

            

            

        

        

            
                /*聲明第一個卡片為浮動，使得兩個卡片能重疊*/
            

        

    

    

        

            

            

        

        

            
                float: left;
            

        

    

    

        

            

            

        

        

            
                height: 200px;
            

        

    

    

        

            

            

        

        

            
                width: 100px;
            

        

    

    

        

            

            

        

        

            
                background-color: #000;
            

        

    

    

        

            

            

        

        

            
                text-align:center;
            

        

    

    

        

            

            

        

        

            
                line-height: 100px;
            

        

    

    

        

            

            

        

        

            
                color: #fff;
            

        

    

    

        

            

            

        

        

            
                font-size:50px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .b2{
            

        

    

    

        

            

            

        

        

            
                height: 200px;
            

        

    

    

        

            

            

        

        

            
                width: 100px;
            

        

    

    

        

            

            

        

        

            
                background-color: #000;
            

        

    

    

        

            

            

        

        

            
                text-align:center;
            

        

    

    

        

            

            

        

        

            
                line-height: 100px;
            

        

    

    

        

            

            

        

        

            
                color: #fff;
            

        

    

    

        

            

            

        

        

            
                font-size:50px;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*第二個卡片旋轉90度*/
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(90deg);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /*第二個卡片位于中間位置*/
            

        

    

    

        

            

            

        

        

            
                position: absolute;
            

        

    

    

        

            

            

        

        

            
                margin-left: 0;
            

        

    

    

        

            

            

        

        

            
                margin-top: 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .rotateX180{
            

        

    

    

        

            

            

        

        

            
                /*讓倒置的2、4數字倒置回正常狀態*/
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(180deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                @keyframes action_b1{
            

        

    

    

        

            

            

        

        

            
                100%{
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(-360deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style> 
            

        

    

    

        

            

            

        

        

            
                </head> 
            

        

    

    

        

            

            

        

        

            
                <body> 
            

        

    

    

        

            

            

        

        

            
                <div class="zpbox"> 
            

        

    

    

        

            

            

        

        

            
                <div class="box"> 
            

        

    

    

        

            

            

        

        

            
                <div class="b1"> 
            

        

    

    

        

            

            

        

        

            
                <div>1</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="rotateX180">3</div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                <div class="b2"> 
            

        

    

    

        

            

            

        

        

            
                <div>2</div> 
            

        

    

    

        

            

            

        

        

            
                <div class="rotateX180">4</div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </body> 
            

        

    

    

        

            

            

        

        

            
                </html>

 


    

        

            

            

        

        

            
                輪播圖3D
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE html> 
            

        

    

    

        

            

            

        

        

            
                <html lang="en"> 
            

        

    

    

        

            

            

        

        

            
                <head> 
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8"> 
            

        

    

    

        

            

            

        

        

            
                <title>Document</title> 
            

        

    

    

        

            

            

        

        

            
                <style type="text/css"> 
            

        

    

    

        

            

            

        

        

            
                html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/ 
            

        

    

    

        

            

            

        

        

            
                body{
            

        

    

    

        

            

            

        

        

            
                perspective: 800px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box{
            

        

    

    

        

            

            

        

        

            
                width: 800px;
            

        

    

    

        

            

            

        

        

            
                height: 360px;
            

        

    

    

        

            

            

        

        

            
                margin: 100px auto;
            

        

    

    

        

            

            

        

        

            
                text-align:center;
            

        

    

    

        

            

            

        

        

            
                position: relative;
            

        

    

    

        

            

            

        

        

            
                left: 50%;
            

        

    

    

        

            

            

        

        

            
                margin-left: -400px;
            

        

    

    

        

            

            

        

        

            
                /*background-color: #eee;*/ 
            

        

    

    

        

            

            

        

        

            
                transform-style: preserve-3d; /*設置為3D模式*/ 
            

        

    

    

        

            

            

        

        

            
                /*transform: rotateY(-30deg) rotateX(57deg);*/ 
            

        

    

    

        

            

            

        

        

            
                /*transition:5s ease;*/ 
            

        

    

    

        

            

            

        

        

            
                animation-name: animate;
            

        

    

    

        

            

            

        

        

            
                animation-duration: 10s;
            

        

    

    

        

            

            

        

        

            
                animation-iteration-count: infinite;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .box>div{
            

        

    

    

        

            

            

        

        

            
                width: 800px;
            

        

    

    

        

            

            

        

        

            
                height: 360px;
            

        

    

    

        

            

            

        

        

            
                position: absolute;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box>.up{
            

        

    

    

        

            

            

        

        

            
                background: url(flower.jpg); /*引入照片*/ 
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(90deg) translateZ(180px); /*  設置角度 */ 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box>.down{
            

        

    

    

        

            

            

        

        

            
                background: url(flower.jpg);
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box>.before{
            

        

    

    

        

            

            

        

        

            
                background: url(flower.jpg);
            

        

    

    

        

            

            

        

        

            
                transform: translateZ(180px);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box>.after{
            

        

    

    

        

            

            

        

        

            
                background: url(flower.jpg);
            

        

    

    

        

            

            

        

        

            
                transform: translateZ(-180px) rotateX(180deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .box:hover{
            

        

    

    

        

            

            

        

        

            
                animation-play-state: paused; /* 當鼠標懸停的時候停止 */ 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                @keyframes animate{
            

        

    

    

        

            

            

        

        

            
                0%{
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                25%{
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(90deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                50%{
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(180deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                75%{
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(270deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                100%{
            

        

    

    

        

            

            

        

        

            
                transform: rotateX(360deg);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style> 
            

        

    

    

        

            

            

        

        

            
                </head> 
            

        

    

    

        

            

            

        

        

            
                <body> 
            

        

    

    

        

            

            

        

        

            
                <div class="box"> 
            

        

    

    

        

            

            

        

        

            
                <div class="up"></div> 
            

        

    

    

        

            

            

        

        

            
                <div class="down"></div> 
            

        

    

    

        

            

            

        

        

            
                <div class="before"></div> 
            

        

    

    

        

            

            

        

        

            
                <div class="after"></div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </body> 
            

        

    

    

        

            

            

        

        

            
                </html>

  


    

        

            

            

        

        

            
                輪播
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE html> 
            

        

    

    

        

            

            

        

        

            
                <html lang="en"> 
            

        

    

    

        

            

            

        

        

            
                <head> 
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8"> 
            

        

    

    

        

            

            

        

        

            
                <title>輪播</title> 
            

        

    

    

        

            

            

        

        

            
                <style> 
            

        

    

    

        

            

            

        

        

            
                .frame{
            

        

    

    

        

            

            

        

        

            
                position:absolute;
            

        

    

    

        

            

            

        

        

            
                margin: 50px 200px;
            

        

    

    

        

            

            

        

        

            
                width:280px;
            

        

    

    

        

            

            

        

        

            
                height:200px;
            

        

    

    

        

            

            

        

        

            
                overflow:hidden;
            

        

    

    

        

            

            

        

        

            
                border-radius:6px;
            

        

    

    

        

            

            

        

        

            
                background-color: #000;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .imgdiv img{
            

        

    

    

        

            

            

        

        

            
                float:left;
            

        

    

    

        

            

            

        

        

            
                width:280px;
            

        

    

    

        

            

            

        

        

            
                height:200px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .imgdiv {
            

        

    

    

        

            

            

        

        

            
                position: absolute;
            

        

    

    

        

            

            

        

        

            
                width: 1500px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .play{
            

        

    

    

        

            

            

        

        

            
                animation: lbt 10s ;
            

        

    

    

        

            

            

        

        

            
                animation-direction: normal;
            

        

    

    

        

            

            

        

        

            
                animation-iteration-count: infinite;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .play:hover{
            

        

    

    

        

            

            

        

        

            
                animation-play-state: paused;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                @keyframes lbt {
            

        

    

    

        

            

            

        

        

            
                0%,20% {
            

        

    

    

        

            

            

        

        

            
                margin-left: 0px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                20%,40% {
            

        

    

    

        

            

            

        

        

            
                margin-left: -300px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                40%,60% {
            

        

    

    

        

            

            

        

        

            
                margin-left: -600px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                60%,80% {
            

        

    

    

        

            

            

        

        

            
                margin-left: -900px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                80%,100% {
            

        

    

    

        

            

            

        

        

            
                margin-left: -1200px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style> 
            

        

    

    

        

            

            

        

        

            
                </head> 
            

        

    

    

        

            

            

        

        

            
                <body> 
            

        

    

    

        

            

            

        

        

            
                <div class="frame" > 
            

        

    

    

        

            

            

        

        

            
                <div class="imgdiv play"> 
            

        

    

    

        

            

            

        

        

            
                <img src="lunbo.jpg" > <!-- 引入照片 --> 
            

        

    

    

        

            

            

        

        

            
                <img src="lunbo.jpg" > 
            

        

    

    

        

            

            

        

        

            
                <img src="lunbo.jpg" > 
            

        

    

    

        

            

            

        

        

            
                <img src="lunbo.jpg" > 
            

        

    

    

        

            

            

        

        

            
                <img src="lunbo.jpg" > 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </body> 
            

        

    

    

        

            

            

        

        

            
                </html>

1

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn

原文鏈接：

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1917)

102021-6

這樣做設計，可太香了~

今天我將告訴大家一個更加簡單高效的技巧去定義一個色板。在星球里還有很多這樣的文章，無論是現有的500+精華文章，還是每天100+設計干貨，我們堅信相信水滴石穿的力量。請看今天的分享，Enjoy it。

a

一套界面需要哪些顏色？

說到色板，我們得首先弄清楚一套APP需要哪幾種色彩，我們從airbnb的色板中，以及很多很多產品中大概可以得出一個公式：品牌色 + 提醒類型顏色（成功，錯誤，警告）+ 中性黑白灰顏色（各種字體，背景，分割線顏色等）

▲在定義了上述大的色彩原理下，我們需要對界面中使用場景進行梳理得出下列大概色彩類型。

a

如何去做呢？

重點來了，那我們如何去做呢？首先，我們先創建3個方塊，這些方塊后面會成為基礎顏色！這里我設置的是被3整除的高度和寬度，我創建了一個300X300的正方形:

接著我們填充3個顏色，紅，綠，藍，為什么是紅，藍綠，因為在色彩體系里面，這三種顏色屬于色光三原色（色光三原色為：紅、綠、藍。光線會越加越亮）

紅，綠，藍怎么定義，大家可以從自己品牌色里面去定一個，然后可以根據HSB的方法去得出同色溫下面的綠和藍！

h值(色相)以15，S和B不變，遞增得到基于品牌色的24個色帶，有人可能會問為什么是24個？因為24X15=360剛好圍繞色環盤一圈。

▲所以我們得到一圈基于品牌色，明度和飽和度一致性的顏色！

▲你也可以依據https://coolors.co/去生成一套藍色或者綠色

第二步

第二步，將這三個方塊橫向等分，因為每個方塊300X300，所以除以3就是100PX

▲將一個矩形與畫板頂部對齊，然后填充微白色，將第二個矩形與畫板底部對齊，填充微黑色，然后將頂部的白色，和黑色透明度調整微20，這樣我們就過得到，三種不同的紅色，綠色，和藍色。

第三步

第三步，我們需要定義垂直等分的區間，我們需要畫2個矩形，這2個矩形的寬度剛好是300X300的三分之一也就是100X100，將他們和正方形的右側對齊。

現在到了這篇文章的核心，就是我們需要將這個顏色改為黃色，很多人可能會好奇，為什么是黃色，因為黃色是色彩的三原色之一（可以參考上面我們通過HSB得出黃色）

調整黃色的模式改為疊加，將其中一個透明度降低為40%，另外一個降低為80%，然后將他們復制到綠色和藍色的畫布上，借助疊加模式，我們得到了明亮和鮮艷的顏色。

第四步

這樣我們就快速的得出了一套色彩體系，然后根據我們的需求選取一部分顏色成為這個色盤體系：

然后添加到我們的整個色盤里面去，同理我們可以得出黑白灰色顏色，比如我們的顏色最黑是#333333

▲頂部20%白色，底部80%黑色得出

▲縱向疊加40%白色，80%白色得出

▲得出文字3個梯度顏色

生成最終色板

▲通過上面的步驟就可以得出整個色板

注意

色彩感覺不好的同學，如果沒有品牌色，或者品牌色搭配出來不太和諧，強烈推薦大家使用這個網站進行配色。

▲他是基于設計師人工智能匹配出來的顏色，都比較和諧，使用起來的，我們隨便試試。

▲在這個網站上輸入一個紅色，鎖定，然后按空格隨機生成顏色，最終確定，藍色，綠色黃色，制作出色盤。

▲得出色盤

關于色彩系統構建的方法就是這樣，不知道大家掌握沒有，希望大家在做設計時候，色彩運用更加科學，一定要自己動手試試！

原文地址：我們的設計日記（公眾號）

作者：sky

轉載請注明：學UI網》這樣做設計，可太香了~

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(1805)

102021-6

設計心理學系列（03）——雅各布定律與心智模型

在體驗設計層面，設計師需要匹配用戶心智和引導用戶心智。而產品設計更需要建立品牌心智，提升用戶對品牌的忠誠度。因此在產品和運營活動設計時需要充分考慮對品牌心智的影響，避免帶來負面效果。今天我們繼續設計心理學第3篇——雅各布定律。

本文主要內容包括：

雅克布定律與心智模型
心智模型對設計的影響

01雅各布定律與心智模型

雅各布定律指的是如果用戶已將大部分時間花費在某個網站上，那么他們會希望你的網站可以與那些他們已熟悉的網站一樣擁有相似的使用模式。

這個定律揭示了用戶認知事物的過程和特點——用戶是“懶”的，會通過已有的經驗去認知新的事物。當經驗無法匹配時，用戶會產生各種不適應，極端情況下用戶會放棄使用產品。

比較典型的就是長期使用Windows的用戶，最開始使用Mac時會表現出各種不習慣。最根本的原因就是用戶在Windows系統中建立的使用心智，無法適用于Mac系統，為此有人在MacBook 中安裝了Windows 系統。

Don Norman 將心智模型定義為：“存在于用戶頭腦中的關于一個產品應該具有的概念和行為的知識，這種知識可能來源于用戶以前使用類似產品的經驗，或者是用戶根據使用該產品要達到的目標而對產品的概念和行為的一種期望。”

因此我認為雅各布定律其實是用戶心智模型的外在表現。

02心智模型對設計的影響

設計師如何去應用心智模型呢？主要有以下3個方面。

1、匹配用戶心智

匹配用戶心智模型來改善體驗是設計師的首要任務。當設計方案與用戶心智模型一致，用戶可以輕松地將已有經驗從一個產品轉移到另一個產品上，無需額外的理解和學習成本。

最常見的就是與真實環境相匹配。例如手機系統中開關樣式、日歷風格，都是與現實生活中相匹配的，用戶的認知成本很低。同樣在電商平臺中，很多彈窗套用類似于微信紅包樣式，希望可以提高活動對用戶吸引力帶來更多點擊和轉化。

之前曾經碰到一個案例。在某一數據監控系統中，數據正增長時采用紅色表示，負增長采用綠色表示，理由是與股市的漲跌配色保持一致，但是系統跟股市并沒有任何關系。該系統中紅色又代表了告警色，綠色代表了健康色，同一系統中采用了兩套設計形式，結果造成了用戶困擾。

因此匹配用戶心智需要綜合考慮用戶場景、應用目的等多種因素。

例如常見的地圖，在不同的場景中表現方式也是有所差異的。在高德地圖中，用戶需要查詢地點、導航出行等等，所以地圖與我們常見的實物地圖更加匹配。而在滴滴打車中，地圖更多是為了確定用戶地理位置、上車地點、周邊車輛數量等等，所以地圖更多的是作為背景進行了簡單化的處理。

2、建立新的心智

我們在設計工作中會遇到各種新的場景、新的功能，無法完全匹配用戶已有的認知，因此需要借助一定的設計手段建立用戶新的心智，主要包括以下3種設計形式。

1）產品心智植入

最開始我對slogan之類的品牌心智是無感的，感覺這種口號太虛了，用戶不會care，或者很難引起用戶共鳴。但是今日頭條改變了我的認知，短視頻逐漸占領了我的碎片時間，通過短視頻讓我看到了別人不一樣的生活，跟著別人的鏡頭也讓我“看見了更大的世界”。

拼多多月卡為了建立用戶的省錢心智，在頁面中突出了產品slogan，并且將“4張5元無門檻券”打造成標志性權益，降低用戶的決策成本，并且形成權益記憶點，方便營銷傳播。

2）心智引導

當產品設計無法與用戶心智相匹配，或者改變了用戶已有心智時，需要通過引導方式讓用戶快速建立新的心智。例如常見新手引導、功能入口提示、功能調整說明等。

3）行為培養心智

為了培養用戶習慣，簽到類產品都會采用“定時玩法”打造用戶心智。例如淘系的各種游戲化產品，都采用了每天早上7點定時收獲游戲獎勵的玩法，通過日復一日的行為刺激固化用戶心智模型。

對于會期比較長的年卡付費會員，用戶對權益感知比較散碎，同樣需要周期性權益激發用戶與產品之間的互動，不斷的增強用戶的省錢感知。因此不少付費產品增加了月度權益。例如京東每月100元優惠券，淘寶88VIP每月兌換優惠券，1號會員店每月領雞蛋，考拉海購黑卡月度專享購物券權益等。

這些月度權益在用戶生命周期中形成了一個個記憶點，逐漸增強用戶對產品的“省錢”心智，并且可以持續的激活用戶，為續費活動做好銜接。

3）利用心智

設計師既要為用戶服務，又要考慮商業價值實現。所以某些場景下，設計師需要利用已有的心智為產品服務。

例如彈窗可以更好地吸引用戶注意力，并且用戶對于彈窗主要有兩種操作，要么關閉要么點擊。基于這樣的心智，某些App開機廣告就采用彈窗樣式吸引用戶點擊。

另外廣告作為互聯網平臺重要的收入來源，需要考慮投放效果，因此廣告大都采用軟植入的方式，在形式上盡可能的與實際內容保持一致，從而借助已有的心智引導用戶瀏覽和點擊。

寫在最后

我個人認為心智模型其實包括交互和品牌兩個層面。

在體驗設計層面，設計師需要匹配用戶心智和引導用戶心智。而產品設計更需要建立品牌心智，提升用戶對品牌的忠誠度。因此在產品和運營活動設計時需要充分考慮對品牌心智的影響，避免帶來負面效果。

原文地址：子牧UXD（公眾號）

作者：子牧先生

轉載請注明：學UI網》設計心理學系列（03）——雅各布定律與心智模型

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(2063)

092021-6

設計實驗室：車載交互(HMI)的一些設計探索

ui設計分享達人

關于車載交互(HMI)的一些探索，用一些試驗和案例來進行探索與驗證。

這次我們不聊視覺，也不暢想未來，只說說當下HMI產品設計與交互體驗。

本文內容會涉及一些專業的汽車知識名詞，因為篇幅有限，如有些知識名詞不太明白可以百度一下。

別看錯了，不是HDMI！

說到HMI大多數設計師應該是既熟悉又陌生，HMI是Human Machine Interface 的縮寫，“人機接口”，也叫人機界面，人機界面（又稱用戶界面或使用者界面）是系統和用戶之間進行交互和信息交換的媒介，它實現信息的內部形式與人類可以接受形式之間的轉換，凡參與人機信息交流的領域都存在著人機界面。

聽起來是不是覺得這不就是UI嗎？有什么區別嗎？emm......的確...似乎...差不多...幾乎是沒有區別的，只不過是在某些場合和設備上管他叫UI，比如移動端設備，而在另外某些場所和設備上管他就叫HMI，比如汽車車機和數控機床。所以這個概念也不用去特別較真，HMI就權當做是汽車上的UI界面吧。畢竟汽車是高科技與工業結合的完美產物，“HMI”念出這個詞時候就感覺是蠻專業的！很般配！

HMI前世與今生？

剛才說HMI最早更應用于工業上，比如常見的各種機床、制造裝備。

或者說讓時間在向前推進一點！

而這里通常意義的HMI則更加聚焦點，基本特指汽車車機或者車載多媒體設備。

說到這里還是要從車載儀表盤說起，從德國人卡爾·本茨發明世界第一輛汽車，距今已經100多年的時間了，在那些還沒有HMI這個名詞的年代，那么他是以什么形態出現的？那就不得不提“儀表盤”了。

當然寫這篇文章并不是去評測誰家HMI更優秀，而是希望通過一些假設、實驗和推斷，和大家一起來探討一下如何更有效的設計HMI。

屏幕越大越好？車內到底需要幾塊屏幕？

我們先從屏幕開始。

說到屏幕，設計師都是比較敏感的，因為我們最終的設計交互創意都是需要都是在屏幕上顯示展示出來的，HMI當然也不例外?，F在在車載屏幕上你能看到最大尺寸多大？

拿特斯拉為例，Model S和Model X車型都是17英寸，Model 3為15英尺。

當然他肯定不是最大的，熟悉汽車朋友你應該知道我想說誰了，沒錯就是他！擁有48寸可多段升降屏幕的BYTON新能源概念車M-Byte！48寸的確很夸張，難道屏幕越來越大就是未來HMI的方向嗎？

當然這個問題肯定是否定的，為什么？那就要從車載屏幕的作用來說起。

首先我是作為一個曾經就職于汽車公司的設計師，并且是一名地道的汽車發燒友，憑借對汽車還算熟悉和熱愛做出一些產品交互分析，以下如有不妥之處還望海涵。

汽車內屏幕的作用

按照功能場景總體可為三類：主行駛狀態信息、附設備狀態信息、多媒體&外設

不可缺少還需要與使用者與場景結合，我們先來做一個大概的用戶畫像

對應這些需求，汽車需要有儀表臺（屏）控制和顯示的區域有五個。

五個區域分別是：

1、主駕駛儀表屏

2、中控臺控制（屏）

3、后排娛樂屏

4、副駕駛信息屏

5、扶手控制臺（屏）

其中前三個是主流配置，后兩個比較少見。

關于汽車設備這塊我們不做深入展開了，畢竟這篇文章主要討論的還是設計，直接看結果！

題外音：屏幕安全性的考量

汽車是比較特殊的設備，基于安全性考慮，汽車內屏幕尺寸不易太大與太多。

屏幕總體為玻璃材質，但與車窗風擋玻璃的材質不同，當汽車遭遇碰撞的時候，車內屏幕極易破損并形成尖銳物，極大可能會乘坐人員造成二次傷害，所以車內屏幕不易太多，更不易太大。雖然車載屏幕變大變多已不可逆轉，而且隨著屏幕技術的提升，柔性OLED的應用也將會在一定范圍解決安全問題。但也需要汽車相關設計者多在安全方面進行考慮，任何產品體驗應該建立在安全基礎之上的，特別是交通工具。

物理實體按鈕過時了？

為什么大屏幕操控成為了當前的HMI主流了呢？那不不得不去提一下另外一個我們熟悉的設備--手機！

同樣一個有限的區域，如果用物理按鍵那么這么區域只能是固定的功能，而屏幕就可以無限擴展。特別是在汽車中控屏上集成內容會很多，體現就更加突出。

但是在汽車上的全部使用屏幕真的是最佳選擇嗎？顯然這是有待商榷的。

不可否認屏幕的確有很強的擴展性，但是缺點也是明顯的：1.觸控反饋缺乏 2.交互效率不高

對于這樣的判斷，我們可以通過兩個實驗來進行驗證。

將類似于Surface Dial這種智能按鈕交互裝置引入汽車的屏幕控制中，每個按鈕可以根據情景進行自定義，并且吸附到汽車屏幕的任何位置進行交互操作，相信這一定是一種全新的使用體驗。當然這一定是需要解決比如吸附力、安全性等一系列問題。

屏幕觸控反饋

雖然目前的屏幕還有無法做到完美觸控反饋，但已經出現了一些新的硬件技術來試圖解決這些問題，比如Tanvas Touch，其定義為 “手指與觸摸界面之間的電子壓力控制”。簡單來說他們的產品就 “皮膚的磁鐵” 一樣，能夠更加精準的感應手指的動作，最后結果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現。

原理是利用手指尖觸摸顯示屏時產生的靜電引力來模擬觸感，通過電磁脈沖把更精確的反饋發送到用戶的指尖。

Tanvas 也正在與汽車制造商們合作把這項技術嵌入到汽車或屏幕上，讓人們更容易感觸受到不同物體的表面。

也許在未來我們真的會遇到他。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：殘酷de樂章

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1723)

092021-6

3D與UI結合的設計探索

ui設計分享達人

在2020 年的蘋果全球開發者大會（WWDC），蘋果發布了新的 macOS 11（又名 Big Sur）。其中在UI視覺方面macOS Big Sur 系統最大的變化就是圖標上， Big Sur更新了很多新設計風格的應用圖標。

關于 Big Sur 的新圖標的討論很多，很多都在激烈爭論。人們對蘋果公司沒有將完全扁平設計引入 Mac 感到松了一口氣，但分歧并未停止。有些人認為這引領一種新的圖標表現方式，而有些人則認為這是丑到了天際。

但蘋果的設計就是這樣，不管你你喜不喜歡，過一段時間他總會流行起來。就像iPhone11剛面世時，背面的攝像頭組被無數人吐槽一樣，而現在這個設計已經成了高端機的標板。

大家還能想起來UI扁平化設計已經流行了多少年了嗎？

從2013年6月11日蘋果發布iOS7算起，現在已經將近8年了，這8年時間扁平化像颶風一般席卷了整個UI設計圈，一夜間幾乎所有的APP UI都被拍扁了。

其中以Instagram的換標作為扁平盛行時代的里程碑

但扁平化設計的確已經一統江湖太久了，人們似乎已經有點厭倦了。其實設計風格就是這樣，并沒有絕對的好與不好，只要審美不疲勞，就可以繼續流行下去，至于流行多久我們經常會用一個詞去形容---耐看度。

扁平化帶給我們的是畫面的輕盈和設計的高效率，但是缺點也是明顯的，場景表現過于單一的問題，設計感體現較為有限，于是很多設計師都在嘗試用新的設計風格替代或者進化現在的扁平化設計風格，今天我們就來探討一下新擬物背景下3D與平面的結合設計，能在UI中擦出什么樣的火花。

2014年我的作品-Cache

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html

現在這樣的風格會被我們稱之為重度擬物風格，他不好看了？技術落后了嗎？當然不是！只是目前不流行了！

他的特點是強調光影對比與物理質感，色彩都會比較偏“暗”，而且伴隨設計的往往是難和慢！刻畫一個細節需要很久，在強調設計效率組件化的今天，這種費時又難學的設計方法必然不會成為主流。

當前的UI流行趨勢是強調高飽和的色彩搭配（在沒有光影細節之下也只有色彩可以玩了），這種風格明顯也不符合趨勢，被“淘汰”也就難免了。

從設計角度上解析，圖標主要是由四方面構成：構圖+光影+色彩+紋理

而擬物風格圖標在這四方面更加強調構圖、光影和紋理，而色彩則是更多去搭配紋理質感，所以你看到多數擬物風格圖標在質感上很棒，但是色彩卻沒有那么豐富。

說到新的擬物風格，這只是一個概念，也有稱之為輕擬物，輕偏平，這里并沒有通用的稱呼和預設的設計方法，一切的UI設計風格都是為產品本身服務，如果新的設計風格能讓產品整體體驗得到“提升”，哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的。

所以當下如果你的產品中想要吸引目光就要有點與眾不同的東西，要么是獨門的功能，要么就是吸晴的設計。
顯然扁平的彩色圖標現在已經達不到這個效果了，而以前的擬物又顯得有點過時，在這種時代背景下，新的風格必然就會被碰撞出來。

于是乎我們就會看到以下的一些大廠“創新”，你不止能看到輕擬物設計，還能看到“實物”設計......

不得不說，各位設計師們還真是拼了...

“哪怕這種提升只是成功獲取到了用戶的注意力，那這個設計就是有價值的。”沒毛?。「魑患佑?！

當然蘋果BigSur帶給我們的圖標設計創新更加有趨勢意義，這種3D+平面的設計組合方法更加能給我們一些設計啟迪和思考，并且這種3D圖標與之前的擬物風格有著明顯的視覺區別

我用3D重構了一個計算器icon，以此為例來進行分解，如下：

與2D設計方法設計圖標一致，都是先勾畫圖形（建模），然后填色、加材質和燈光，但不同的是在3D環境下，這一切都比2D環境下簡單了，而且視覺效果更佳，整體畫面感更佳立體，質感更加飽滿，并且根據渲染器的參數調節和材質質感的不同，即使是在同一模型下，也能制造出很多種不同的視覺體驗。

圖標背板的選擇上，由于選擇了3D作為主體表現，3D背板過于搶視線，圖標為了突出主體而非背景，建議使用2D平面背板與3D前景圖標進行結合。

3D設計圖標的確有一些天然的優勢，特別是在質感和光感的表達準確度上，是絕對超過2D的。
但是2D圖標在一些風格的設計也是很難替代的，比如線性圖標和漸變風格圖標。

3D設計的確可以提升UI整體的視覺氛圍，并且現在在一些APP中已經可以看到小范圍3D案例了（比如支付寶），但是多是以插畫的形式出現，其實與產品UI還是有一定距離的。

未來3D設計一定會是UI中大展身手，但是目前的常見的3D設計軟件實在是太龐大了，我與許多3D行業的同行聊天的時候，大家普遍的認知是現在的3D軟件（包括C4D）的實際最佳場景依然是動畫設計，UI的中的3D屬于非常輕量級的，用現在主流的3D設計軟件做UI應用案例，有點用巡航導彈打蚊子的感覺，而且這個蚊子還是距離一米以內。這有點像當年的PS來做UI，雖然可以完成但是效率不高，學習曲線也高，于是Sketch和Figma這樣的產品順理成章的取代了PS在UI界的地位。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：殘酷de樂章

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1618)

092021-6

D3.js中Force-Directed Graph詳解

Force-Directed Graph

聊一聊力導向圖。力導向圖在echarts等快捷的可視化工具中都有非常方便的實現方式。來看看d3.js是如何實現的。
先來一張d3.js官網實現的力導向圖的照片：

接下來解釋一下d3.js中實現此力導向圖的過程。

index.html——源碼

<!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 定義一個svg畫布 var svg = d3.select("svg"), // 獲取svg畫布的寬度 width = +svg.attr("width"), // 獲取svg畫布的高度 height = +svg.attr("height"); // 定義一個顏色函數 // d3.scaleOrdinal()函數用來定義一個序列，其中的參數d3.schemeCategory20代表序 // 列函數的值域，這里d3.schemeCategory20指的是由RGB十六進制字符串表示的二十種分類 // 顏色的數組。因此，color()函數的值域就是離散的20中顏色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 創建一個力學模擬器 // d3.forceSimulation()函數用來創建一個空的模擬器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函數的作用是：如果指定了力force，則為指 // 定的名稱name分配力并返回該模擬。 如果未指定力，則返回具有指定名稱的力，如果 // 沒這樣的力，則返回undefined。 （默認情況下，新的模擬沒有力量。） // d3.forceLink()函數用來創建一個空的link力數組 // d3.forceLink().id()用來指定link力數組中每個節點的id的獲取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 創建一個charge數組，forceManyBody()返回一個新的多體力數組 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐標和y坐標創建一個新的居中力。 // 如果未指定x和y，則默認為?0,0?。 .force("center", d3.forceCenter(width / 2, height / 2)); // 讀取數據，該例子中的數據是雨果的《悲慘世界》中的人物關系信息。 // 通過力學模擬，人物關系相近的節點會比較接近；反之，節點會比較疏遠 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定義人物節點之間連線的信息 var link = svg.append("g")
      .attr("class", "links") // 用line元素來繪制  .selectAll("line") // 綁定json文件中的links數據 .data(graph.links)
    .enter().append("line") // 人物節點之間連接線的粗細通過連接線的value字段來計算，value越大，連接線  // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定義人物節點信息 var node = svg.append("g")
      .attr("class", "nodes") // 人物節點通過圓來繪制  .selectAll("circle") // 為人物節點綁定nodes數據 .data(graph.nodes)
    .enter().append("circle") // 設置節點半徑 .attr("r", 5) // 設置節點的填充色，通過節點的group屬性來計算節點的填充顏色 .attr("fill", function(d) { return color(d.group); }) // 以定義的這些人物節點為參數，調用drag()函數 // 綁定拖拽函數的三個鉤子，即拖拽開始、拖拽中、拖拽結束 .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)); //為人物節點綁定文字 node.append("title")
      .text(function(d) { return d.id; }); // 為力模擬器綁定節點數據 // 會為每個節點自動添加可視化時所需的index,vx,xy,x,y五個字段信息 // 并且為simulation內部計時器tick監聽綁定動作，來繪制圖形 simulation
      .nodes(graph.nodes)
      .on("tick", ticked);// 此處在每次tick時繪制力導向圖 // 為力模擬器綁定連接線數據 // 調用結束后，會為每個連接線添加可視化時所需要的index,vx,vy,x,y五個字段信息 simulation.force("link")
      .links(graph.links); // 定義simulation內部計時器tick每次結束時的動作 function ticked() { // 每次tick計時到時，連接線的響應動作 // 設置連接線兩端的節點的位置 link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; }); // 每次tick計時到時，節點的響應動作 // 設置節點的圓心坐標 node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
}); // 定義開始拖拽節點時的動作 function dragstarted(d) { // restart()方法重新啟動模擬器的內部計時器并返回模擬器。  // 與simulation.alphaTarget或simulation.alpha一起使用時，此方法可用于在交互 // 過程中進行“重新加熱”模擬，例如在拖動節點時，在simulation.stop暫停之后恢復模 // 擬。 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
} // 定義拖拽中的動作 function dragged(d) { d.fx = d3.event.x;
  d.fy = d3.event.y;
} // 定義拖拽結束的動作 function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
} </script>


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58
    

    
        59
    

    
        60
    

    
        61
    

    
        62
    

    
        63
    

    
        64
    

    
        65
    

    
        66
    

    
        67
    

    
        68
    

    
        69
    

    
        70
    

    
        71
    

    
        72
    

    
        73
    

    
        74
    

    
        75
    

    
        76
    

    
        77
    

    
        78
    

    
        79
    

    
        80
    

    
        81
    

    
        82
    

    
        83
    

    
        84
    

    
        85
    

    
        86
    

    
        87
    

    
        88
    

    
        89
    

    
        90
    

    
        91
    

    
        92
    

    
        93
    

    
        94
    

    
        95
    

    
        96
    

    
        97
    

    
        98
    

    
        99
    

    
        100
    

    
        101
    

    
        102
    

    
        103
    

    
        104
    

    
        105
    

    
        106
    

    
        107
    

    
        108
    

    
        109
    

    
        110
    

    
        111
    

    
        112
    

    
        113
    

    
        114
    

    
        115
    

    
        116
    

    
        117
    

    
        118
    

    
        119
    

    
        120
    

    
        121
    

    
        122
    

    
        123
    

    
        124
    

    
        125
    

    
        126
    

    
        127
    

    
        128
    

    
        129
    

    
        130
    

    
        131
    

    
        132
    

    
        133
    

    
        134
    

    
        135
    

    
        136
    

    
        137
    

    
        138
    

    
        139
    

    
        140
    

    
        141
    

    
        142
    

    
        143
    

    
        144
    

    
        145

至此，力導向圖解析完畢，這篇中有很多關于力學的專業的功能函數，理解起來有點難度。今天周日，起床后第一件事就是把這篇完結了，歐耶~

這篇文

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn

原文鏈接：

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2387)

092021-6

jquery獲取焦點和失去焦點事件代碼

鼠標在搜索框中點擊的時候里面的文字就消失了，經常會用到搜索框的獲得焦點和失去焦點的事件，接下來介紹一下具體代碼，感興趣的朋友額可以參考下

input失去焦點和獲得焦點
鼠標在搜索框中點擊的時候里面的文字就消失了。
我們在做網站的時候經常會用到搜索框的獲得焦點和失去焦點的事件，因為懶，每次都去寫非常的煩，于是就一勞永逸，遇到類似情況就來調用一下就OK 了
相關js代碼:

復制代碼代碼如下:

        
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>input失去焦點和獲得焦點jquery焦點事件插件 - 懶人建站</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

//focusblur

jQuery.focusblur = function(focusid) {

var focusblurid = $(focusid);

var defval = focusblurid.val();

focusblurid.focus(function(){

var thisval = $(this).val();

if(thisval==defval){

$(this).val("");

}

});

focusblurid.blur(function(){

var thisval = $(this).val();

if(thisval==""){

$(this).val(defval);

}

});

};

/*下面是調用方法*/

$.focusblur("#searchkey");

});

</script>

</head>

<body>

<form action="" method="post">

<input name="" type="text" value="輸入搜索關鍵詞" id="searchkey"/>

<input name="" type="submit" id="searchbtn" value="搜索"/>

</form>

<p>input失去焦點和獲得焦點jquery焦點事件插件，<br/><strong style="color:#F00">鼠標在搜索框中點擊的時候里面的文字就消失了</strong>。</p>

</body>

</html>

jquery獲取和失去焦點事件

復制代碼代碼如下:

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#username').focus(function ()//得到教室時觸發的時間
{
$('#username').val('');
})
$('#username').blur(function () 失去焦點時觸發的時間
{
if ($('#username').val() == 'marry') {
$('#q').text('用戶名已存在！')
}
else { $('#q').text('ok!') }

})

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：腳本之家

原文鏈接：

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1569)

092021-6

今天咱就講一個實用小案例，看看能不能講的透徹一點！

今天我們就講一個星友的案例，好好講講這里面的原理，讓大家吸收一波！本文案例強調重點畫面主體突出，包括大小和顏色、考慮畫面的深度、元素和背景顏色前后關系；仔細把元素的精致度做好。這樣就能大大提升畫面質感。

下面這個是星友參考的原作：

然后下面這個是他練習的一個作品：

我們來分析下二者差在那里。

我認為有以下4點：

1. 主體物與背景的色系反差

2. 主體物與輔助元素的大小對比

3. 輔助顏色的前后關系

4. 元素的精致度

1. 主體物與背景的色系反差

從色系來看，我們看原作：

背景是冷色，周圍元素也是冷色，只有最突出的主體物是暖色，這樣的好處就是讓主體十分突出。

我們做設計都知道，畫面里盡量保證只有一個主要物體突出，如果所有元素都很搶，那整體看起來就會有點亂，就像下面這個練習：

背景是暖色，元素的顏色有藍色、綠色，都屬于冷色，而且元素的色相都是和背景差異比較大的色相，這樣就會導致整體有點凌亂。

2. 主體元素與輔助元素的大小對比

這點很容易理解，我們看原作的主體物是不是要比輔助元素大很多：

而練習的這個主體就不夠大，沒有拉開對比：

主次不分明，也是畫面不精致的原因之一。

3.輔助顏色的前后關系

我們在觀察畫面的時候一定要注意，不要只關注二維平面的關系，還要看三維的前后關系，什么意思呢？

我們看原作的顏色：

他是有很明顯的前后關系的，輔助元素有藍色：

藍色和背景的藍比較相近，顏色就會比較靠后。

除此之外，還有灰白色，和卡片的顏色相近：

顏色也會比較靠后，這樣就形成了顏色的前后關系。

在使用多色時，一定要想辦法融入一些無彩色，黑白灰，這樣會讓湖面沒那么膩。

我們再來看下練習的作品，四個元素的顏色和背景都是剝離開的，沒有一個是靠向背景的：

這就會讓畫面的深度不夠，沒有前后關系。

4. 元素精致度

這個點以前經常說，元素盡量飽滿一些會比較精致，我們看原作的元素，我們還是老辦法，加個矩形框：

每一個元素都是滿的，可以撐的起來，但是練習的元素有一個就稍顯單薄：

如果單體不夠飽滿，當夜也會影響整體的精致度，所以大家一定要多注意。

總結

以上就是這個小案例的分析，總結一下就是：

畫面主體要突出，不輪是大小還是顏色；

要考慮好畫面的深度、也就是元素、顏色的前后關系；

再有就是元素的精致度要做好。

希望今天的小分析可以給大家一點啟發，么么扔！

原文地址：菜心設計鋪（公眾號）

作者：菜心設計鋪

轉載請注明：學UI網》今天咱就講一個實用小案例，看看能不能講的透徹一點！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(1687)

092021-6

后臺界面設計的7條原則(附常用圖表組件庫下載)

B端界面設計越來越受到重視，但設計師單從界面設計總感覺沒有太多值得發揮的地方，其實對于B端界面設計來說，視覺在其中的作用真的很有限，需要設計師有更多的深度思考。今天這篇文章就從更加深入的角度去反思B端界面的底層邏輯，一起來學習吧！

文末會分享給大家一組非常實用的常用后臺圖表組件庫，歡迎大家下載!

一個看起來很酷的儀表盤可能有很多功能、小工具和好的視覺效果。但實際上，它往往被設計成只是一個好看的玩具，而不是一個有用的工具。類似于一個多臂機器人，它能把數據整理成整齊的一堆，然后用明亮的數據讓人眼花繚亂。

擺弄這個機器人可能很有趣，但最終會讓用它的人感到失望。

為什么會發生這種情況？創造一種工具而不是一種可以很快被丟棄的玩具的訣竅是什么？

Illustration: Outcrowd

1、構思儀表盤界面的大腦

讓我們深入研究設計解剖學。儀表盤的“父母”是客戶端、設計人員和開發人員，每個組件設計都需要他們的合作產出，所有關鍵點在一開始要做出說明。

智人是由胚胎發展而來的。首先形成的是腦細胞和神經細胞，然后是身體的其他細胞。這正是任何可行的項目應該遵循的方式。第一個階段是最重要的。如果你忽視這個階段，再花哨的設計也不能挽救局面。這正是為儀表盤的長期發展奠定基礎。

儀表盤如果會說話的話，它會問“我為什么出生？誰需要我?“。

試問你能回答嗎？因此你需要明確:

儀表盤將如何助力公司目標?
什么結構，功能和視覺效果將幫助儀表盤服務好用戶?
哪種設計最適合目標受眾?

這些問題的答案將構成你的設計理念基礎。

Perls

儀表盤中沒有瑣碎的細節。

儀表盤顯示的信息應該使用戶能夠做出決策。設計師的工作是幫助用戶解決問題，而不是讓他們使用一堆很酷的小工具。任何對目標不起作用的事情都會與目標背道而馳。

從項目的最初階段到最后階段，設計師必須關注公司的目標、儀表盤的目標和用戶的目標。

否則，儀表盤將永遠不會做的更好。

Clover

2. 數據及關鍵指標選擇:循環系統

儀表盤數據就像循環的血液。我們必須理解它們來自哪里，當用戶需要它們時如何處理，以及應該如何可視化。

設計師需要理解數據的目的。顯然，這將幫助他們選擇合適的組件，但還有更多的工作要做。例如，用戶希望在屏幕上看到大量不同的讀數。你不需要移除任何東西來清除一些空間，但你可以做的是突出最重要的元素，并在視覺上“弱化”次要的東西。然而，要做到這一點，你必須知道數據的優先級。

Bidding Car

最重要的指標是哪些數據能幫助達成目標。例如:

顯示實際成功率;
影響產品的感知方式;
激勵創造產品的團隊。

參數的選擇也需要了解用戶。用戶應該看到哪個關鍵指標，他們認為什么樣的可視化表現最容易理解？

人們喜歡看到與他們的目標相符的數字。

Panch

3. 儀表盤結構:骨架

想象進入一個酒店房間，看到一張床，一張桌子和椅子，一面鏡子和一個壁櫥。甚至不用打開壁櫥，你就能猜到里面有什么。吹風機、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個好的儀表盤就像那個房間。它是干凈的，整潔的，可預測的。你馬上就能看到所有的要點，憑直覺知道在哪里可以找到其余的內容。

設計師有自己的工具來確保整潔。

1) 層次結構

首先，你得整理思緒。在開始設計之前，一定要對所有數據進行排序，將其分類，了解什么是最先發生的，什么是最后發生的，接下來是什么等等。確定用戶必須馬上看到的關鍵內容。

視覺層次結構必須反映信息層次結構。

數據層次結構通過小組件的大小和位置表示。如果你的讀者從左到右閱讀，關鍵信息必須放在左上角，最不相關的信息將在右下角。

對數據排序的方法將取決于儀表盤的用途。重要的是根據信息的優先級組織信息，并創建邏輯場景。

把信息面板看作是一個故事，而不是一系列數據點。

2) 網格

網格對于創建頁面的總體布局、排序、平衡和對齊元素非常有用。

3) 信息模塊

模塊系統類似于公寓的分區。臥室是用來睡覺的，餐廳是用來吃飯的——每個區域都有自己的功能。你的舒適度取決于他們所處位置的便利程度。糟糕的布局不能通過裝修或家具來修復。相應地，必須提前考慮模塊劃分。

模塊幫助顯示內容層次結構，根據數據的重要性、相關性和邏輯連接對數據進行分組。每個模塊都應該在給定的流程中服務于特定的目的。

4) 連續性和接近性

如果你去廚房需要經過有兩扇門的走廊，這是一個糟糕的布局?；ミB的流程假定邏輯接近。如果一個模塊中的流程需要來自另一個模塊的信息，那么布局上應該保證數據的連續性。這一點必須提前考慮，這樣用戶就不必在晦澀的存儲空間中尋找他們需要的信息。

Illustration: Outcrowd

所有相關信息都應按重要到不重要的順序進行分組，并就近放置。

5) 分離模塊

沒有人需要一個延伸到臥室的廚房。為了將一個模塊與另一個模塊分開，你需要負空間。確保從一開始就考慮到這一點:將負空間視為需要視覺平衡的設計元素的組合。

Wingle

4. 功能:肌肉

功能和工具的數量由儀表盤的用途及其用戶的關鍵目標決定。

要想自由活動，人類只需要兩條腿，狗需要四條腿，蜘蛛需要八條腿。一個功能太多的儀表盤就像一條六條腿的狗一樣，這有點令人毛骨悚然。

不要在控制面板上放置過多的工具。用戶只需要手邊有必要的東西。過多的可用工具會讓人們感到困惑，并嚇走他們，因為它看起來太復雜了。個性化總是比標準化好。

Band

5.小組件:重要的器官

如果屏幕上有超過5到7個小組件，人們就很難理解內容。因此，我們的工作是讓相關數據易讀，但不過量。用戶應該在幾秒鐘內理解他們所看到的內容。

數據可視化工具包括:

表格
圖表
示意圖
卡片
指標
地圖
圖片
分組
篩選器
列表
選擇樹

Activity

小組件的選擇取決于儀表盤的用途和用戶。想想以下幾點:

哪個組件能最好地顯示一個特定的KPI?
用戶可以立即看到什么?
哪個組件是用戶最容易理解的?
什么可以幫助用戶更快地找到他們需要的東西?

選擇易于理解和閱讀的小組件。

這里是一個令人困惑的小組件的例子:

想想主要的“目標”來吸引用戶的注意力。例如，如果你的優先級是績效目標，你應該使用數字;如果你需要比較值，用直線或柱狀圖會很好;為了激勵團隊，可以使用帶有相關亮點的排行榜。

不正確選擇的小組件或默認小組件模板可能會使用戶混淆或導致他們誤解數據。

最好的解決方案是分析和測試的結果。

最好的小組件設計是極簡和易于閱讀的。例如，一個3D圖表可能看起來令人印象深刻，但它占用了用戶太多的注意力，最終證明會分散用戶的注意力。這也適用于漸變、過度使用顏色和過多的細節。

6. 視覺設計:一般技巧

我們已經創建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據優秀設計的基本原則來實現，但仍有一些新的需要注意的細節。

1) 簡單

儀表盤應該像你喜歡工作的桌子一樣干凈:它必須只有必要的文件和工具，沒有干擾。

MEMO

2) 顏色

儀表盤顏色的選擇必須有一個目的:盡可能清晰地顯示信息。顏色跨度越大，就越難把數據展示清晰。所以不要讓儀表盤的顏色過多。使用同一顏色的深淺是一個好的辦法。

首先要選擇底色，然后是補色。每種顏色都必須有特定的用途。一種顏色可以用來組合元素，另一種顏色可以用來高亮。顏色還能體現一個元素是積極的還是消極的。

避免使用可能有負面含義的顏色。例如，在這個例子中，紅色看起來像是代表壞的和不受歡迎的東西:

如果儀表盤提供了可定制的顏色，確保所有可用的選擇看起來都比較舒服。

選擇顏色組合的一個好工具是Adobe color CC。

3) 突出

語義高亮應該與視覺高亮相對應。為了突出一個元素，你可以使用顏色(對比度，亮度)，形狀，大小，負空間等。

4) 可讀性和數字格式化

這是確保視覺清晰度的重要因素:干凈的布局，視覺層次，重點突出，對比元素，適當的字體，這些字體也必須具有對比性和易讀性。

高精度的數字格式很難理解。最好把所有的數字都四舍五入，然后把較長的數字尾巴去掉。

7. 適應性

在實踐中，當用戶優先考慮桌面版本時，在移動版本之前創建網頁版本是合理的。如果你的目標用戶主要使用的是手機版本，那么你可以先從移動設備著手構建儀表盤，然后再開發桌面版本。

Snap

總結

設計一個好的儀表盤不是一件容易的事情。我們把它比作人類的發展，因為它是一個很好的方式來呈現重要的東西。當你在設計儀表盤時，請不斷地問自己:是否一切都已就緒？有多余的肢體嗎?身體的各個部位協同工作嗎?用戶會喜歡這個結果嗎？它有用嗎？

正如你所看到的，視覺設計實際上是設計師最不應該擔心的事情。

最后，彩云再分享一組常用的后臺圖表界面組件庫，相信會對大家的日常設計工作有幫助，

獲取方式：關注公眾號，后臺回復關鍵詞 后臺組件 ，即可獲得!

本文翻譯已獲得作者的正式授權。

原文地址：medium

作者：Erik Messaki

譯文地址：彩云譯設計（公眾號）

譯者：彩云Sky

轉載請注明：學UI網》后臺界面設計的7條原則(附常用圖表組件庫下載

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(1640)

082021-6

當等待無可避免時，如何優化等待體驗？

ui設計分享達人

一、盡量減少用戶等待的情況，盡可能縮短等待的時間

如當用戶瀏覽網頁的時候，若在用戶瀏覽到已加載內容的倒數第5條再預加載10條內容，可縮短用戶瀏覽接下來內容時的加載等待時間。再如生活中醫院的預約掛號系統，用戶可以提前一兩天掛號，當預約時間到了直接到指定科室看病，避免了長時間的排隊掛號。

二、如果是不可避免的等待，該用什么辦法去優化等待體驗呢？

總的原則是：在用戶等待時給予用戶反饋，告知狀態，且盡量讓用戶在感知上縮短等待的時間。反饋可根據等待的預估時間不同、場景不同，選取不同形式。

一般情況下理想的響應時間應該控制在 100 毫秒內，一些響應的時長可允許達到1秒，絕不可超過2秒無反饋。
若是等待響應時長為2-9秒時，可設計循環的加載動效（loading），告知用戶正在加載中。
若是等待響應時長超過10秒時，可設計帶有進度指示的加載動效。此時除了告知用戶正在加載中（即告知等待原因和當前狀態），還要告知用戶預期響應的時間。

可采取分步響應用戶的方式，多次反饋，可讓用戶在感知上縮短等待的時間。

如一些頁面內容較多，加載時能分步顯示，可按照框架、文本、占位圖、圖片的順序加載顯示，會在感知上縮短加載時間。又如加載一個新視頻，視頻前幾幀優先顯示最小體積的視頻資源，等較高清視頻內容加載出來時再切換為高清視頻資源，可縮短用戶等待視頻開始播放的時間。

唐納德諾曼提出過排隊等待的6個設計原則，可以很好地幫助我們設計等待體驗，6個原則分別是：

（1）提供一個概念模型。

（2）使等待看起來合理。

（3）滿足或超越期待。

（4）使人們保持忙碌。

（5）公平。

（6）積極的開始，積極的結尾。

下面我們就說說這6個原則在優化等待體驗上的運用：

1. 提供一個概念模型

概念模型是幫助人們把復雜自然現象轉變成可用的，可理解的心理模型。概念模型可以幫助用戶理解事物，了解事物如何運作以及當前處在哪個階段、理解當前為什么處在等待狀態，以及產生對未來即將發生事情的預估和期待。

如用戶通過餓了么下單后，app上會用插畫顯示商家備貨、騎士送貨的過程。讓用戶了解外賣送到手中的整個流程，以及當前處在流程的哪一階段，距下一階段預估還有多久。如果是雷雨天，訂單頁面的插畫還會模擬實時天氣情況，用戶看到插畫想到騎士正在雷雨環境下送貨取貨，也會理解騎士配送辛苦、理解當前配送緩慢，緩解等待時的負面情緒。

2. 使等待看起來合理

使等待看起來合理，即通過概念模型使用戶理解為什么要等待，明白等待是有緣由的。

如用滴滴打車時，當我們按下呼叫快車按鈕，頁面會顯示動效光波信號向外擴散，同時會顯示當前排隊人數。設計師通過設計建立一個簡易的概念模型，讓用戶理解當前的等待的原因，并認為等待是合理的。實際上滴滴派單的算法流程可能與頁面顯示的流程不同。但用戶等待時會理解此時手機正在發出信號請求駕車信息、或此時正有多人在排隊、或此時正在等待司機接單。

3. 滿足或超越期待

滿足或超越期待指用戶給等待時間估算時長時，如果用戶實際的等待時間比心理預期的等待時間要短，用戶會有相對比較好的心理體驗。

心理學專家曾做過一個實驗，同等時間下，同樣長度的進度加載條有三種進度顯示方式：進度條速度勻速、速度先快后慢、速度先慢后快。三種相比較發現，當進度條增加速度先慢后快，用戶的體驗最好。而用戶體驗最差的是加載速度先快后慢，因為如果開始的時候加載速度比較快，用戶一開始就有了較高的心理預期，當速度變慢時便低于用戶的心理預期，感知體驗就會變差。

4. 使人們保持忙碌

使人們保持忙碌即讓用戶在等待的時候有事可做。因為當人們非空閑時，對時間的心理感知會比空閑時對時間的心理感知要短。

利用這個原則的設計如：CorelDRAW軟件下載安裝時，軟件安裝等待頁面除了顯示進度條還放映國際優秀設計圖片，CorelDRAW用戶一般都是設計愛好者或設計從業者，通過讓他們瀏覽優秀設計圖片來度過軟件安裝時間，避免用戶純空閑等待。

5. 公平

當用戶正在等待時，如果等待看起來是合理且公平時，不易引起用戶的負面情緒。如果等待看起來是不公平的時候，更容易引起用戶的負面情緒。如：當你正在排隊買票時，同等條件下，你看到后來半小時的人比自己先買到了票。你可能會抱怨，“為什么比我晚來半小時的人都排到了我卻還在等”。

針對公平方面的設計如銀行的叫號辦理業務系統。用戶統一到取號機前取號，每當一個窗口的空出來，叫號系統便叫一個最早的號去該窗口辦理業務。這比人們直接分散在多個窗口排隊會更公平，不會出現早來卻因為這個窗口排隊慢而導致等待時長比晚來的用戶更長的情況。同時把多個小隊伍變成一個大隊伍，用戶感知上也會覺得隊伍移動的更快，也有助于降低等待的負面情緒。

6. 積極的開始，積極的結尾

德國心理學家艾賓浩斯曾提出系列位置效應，指記憶材料在系列位置中所處的位置對記憶效果發生的影響，包括首因效應和近因效應。（來源：百度百科）即人們回憶體驗時，在最開始和最后的體驗比中間的體驗更能讓人印象深刻。所以當我們在設計等待流程時，要保證等待開始和等待結束時有較好的體驗。

如當我們在餐館排隊結賬時，一些餐館結賬臺旁邊會放著一盤薄荷糖，收銀員幫用戶辦理結賬時會對用戶說可以拿幾顆薄荷糖。這個小獎勵會讓用戶走出餐館后對剛剛結賬時排隊等待的不好體驗的記憶變弱，而對最后的薄荷糖有更深的印象，從而對餐館也留一個相對好的印象。

關于等待體驗的優化設計案例還有好多，但基本的設計原則是相通的。

我們在實際設計時可先整理用戶整個體驗流程中可能等待的點，看看哪些是可以通過設計或技術縮短實際等待時間的。針對不能縮短實際等待時間的點，我們先預估每個等待的時長，并設計概念模型讓用戶理解等待的緣由且能預估等待的時間，且采取合適的方式讓用戶在感知上盡量縮短等待時間。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：醬紫Y

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1856)

« 1 ... 402 403 404 405 406 407 408 ... 934 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合