首頁

根據(jù)json文件生成動態(tài)菜單

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

[plain] view plain copy
  1. <span style="font-family:SimSun;font-size:16px;">admin.json</span>  
[plain] view plain copy
  1. <span style="font-family:SimSun;font-size:16px;">[  
  2.     {  
  3.         "image": "glyphicon glyphicon-home",//菜單前的圖標(biāo)  
  4.         "name": "設(shè)備管理",  
  5.         "submenu": [  
  6.             {  
  7.                 "image": "glyphicon glyphicon-cloud",  
  8.                 "name": "設(shè)備分類",  
  9.                 "submenu": [  
  10.                     {  
  11.                         "image": "glyphicon glyphicon-off",  
  12.                         "name": "電源管理",  
  13.                         "url": "html/Node/creditCardPower.html"  
  14.                     },  
  15.                     {  
  16.                             "image": "glyphicon glyphicon-lock",  
  17.                         "name": "門禁管理",  
  18.                         "url": "html/Guard/guardList.html"  
  19.                     },  
  20.                     {  
  21.                         "image": "glyphicon glyphicon-folder-open",  
  22.                         "name": "物品管理",  
  23.                         "url": "html/goods/goodsList.html"  
  24.                     },  
  25.                     {  
  26.                         "image": "glyphicon glyphicon-facetime-video",  
  27.                         "name": "視頻管理",  
  28.                         "url": "html/monitor/monitorList.html"  
  29.                     }  
  30.                 ]  
  31.             }  
  32.         ]  
  33.     },  
  34.     {  
  35.         "image": "glyphicon glyphicon-cog",  
  36.         "name": "系統(tǒng)設(shè)置",  
  37.         "submenu": [  
  38.             {  
  39.                 "image": "glyphicon glyphicon-heart",  
  40.                 "name": "用戶管理",  
  41.                 "submenu": [  
  42.                     {  
  43.                         "image": "glyphicon glyphicon-align-justify",  
  44.                         "name": "用戶列表",  
  45.                         "url": "html/User/userList.html"  
  46.                     },  
  47.                     {  
  48.                         "image": "glyphicon glyphicon-random",  
  49.                         "name": "組織機構(gòu)",  
  50.                         "url": "html/dept/framework.html"  
  51.                     }  
  52.                 ]  
  53.             },  
  54.             {  
  55.                 "image": "glyphicon glyphicon-wrench",  
  56.                 "name": "設(shè)備管理",  
  57.                 "submenu": [  
  58.                     {  
  59.                         "image": "glyphicon glyphicon-edit",  
  60.                         "name": "設(shè)備參數(shù)",  
  61.                         "url": "html/Device/DeviceList.html"  
  62.                     },  
  63.                     {  
  64.                         "image": "glyphicon glyphicon-edit",  
  65.                         "name": "物品庫",  
  66.                         "url": "html/equgoods/equGoodsList.html"  
  67.                     }  
  68.                 ]  
  69.             }  
  70.         ]  
  71.     },  
  72.     {  
  73.         "image": "glyphicon glyphicon-list",  
  74.         "name": "日志管理",  
  75.         "submenu": [  
  76.             {  
  77.                 "image": "glyphicon glyphicon-list-alt",  
  78.                 "name": "登入日志",  
  79.                 "url": "html/Log/loginlog.html"  
  80.             },  
  81.             {  
  82.                 "image": "glyphicon glyphicon-tag",  
  83.                 "name": "設(shè)備日志",  
  84.                 "url": "html/Log/hardwarelog.html"  
  85.             }  
  86.         ]  
  87.     },  
  88.     {  
  89.         "image":"glyphicon glyphicon-list",  
  90.         "name":"設(shè)備管理",  
  91.         "submenu":[  
  92.             {  
  93.             "image":"glyphicon glyphicon-list-alt",  
  94.             "name":"設(shè)備管理",  
  95.             "url":"html/mechanism/mechanism.html"  
  96.             }  
  97.         ]  
  98.     }  
  99. ]</span>  

2、讀取json文件的service層實現(xiàn)

[java] view plain copy
  1. <span style="font-size:16px;">package com.dskj.service.impl;  
  2.   
  3. import java.io.File;  
  4. import java.util.Scanner;  
  5. import org.springframework.beans.factory.annotation.Value;  
  6. import org.springframework.core.io.Resource;  
  7. import org.springframework.stereotype.Service;  
  8.   
  9. import com.dskj.common.util.StringUtil;  
  10. import com.dskj.service.ReadJsonService;  
  11.   
  12. @Service  
  13. public class ReadJsonServiceImpl implements ReadJsonService{  
  14.     <span style="color:#ff0000;">@Value(value="classpath:json/admin.json")</span>  
  15.     private Resource dataAdmin;      
  16.     <span style="color:#ff0000;">@Value(value="classpath:json/user.json")</span>  
  17.     private Resource dataUser;    
  18.       
  19.     public String getData(String fileName){       
  20.         if(StringUtil.isEmpty(fileName)){  
  21.             throw new NullPointerException();  
  22.         }  
  23.           
  24.         String jsonData = null;  
  25.           
  26.         try {  
  27.             File file = null;     if(fileName.equals("admin.json")){  
  28.                 file = dataAdmin.getFile();  
  29.             }else{  
  30.                 file = dataUser.getFile();  
  31.             }  
  32.               
  33.             jsonData = this.jsonRead(file);  
  34.               
  35.         } catch (Exception e) {  
  36.            e.printStackTrace();  
  37.         }    
  38.         return jsonData;         
  39.     }  
  40.     /** 
  41.      * 讀取文件類容為字符串 
  42.      * @param file 
  43.      * @return 
  44.      */  
  45.       private String jsonRead(File file){  
  46.             Scanner scanner = null;  
  47.             StringBuilder buffer = new StringBuilder();  
  48.             try {  
  49.                 scanner = new Scanner(file, "utf-8");  
  50.                 while (scanner.hasNextLine()) {  
  51.                     buffer.append(scanner.nextLine());  
  52.                 }  
  53.             } catch (Exception e) {  
  54.                   
  55.             } finally {  
  56.                 if (scanner != null) {  
  57.                     scanner.close();  
  58.                 }  
  59.             }  
  60.             return buffer.toString();  
  61.         }  
  62. }</span>  

3、controller對應(yīng)的代碼片段

[java] view plain copy
  1. <span style="font-size:16px;">@RequestMapping("")  
  2.     public ModelAndView main() {  
  3.         ModelAndView model = null;  
  4.         String jsonFileName = null;  
  5.           
  6.         SysUser currentUser = (SysUser) ContextUtil.getSession().getAttribute("currentUser");  
  7.         if ("admin".equals(currentUser.getUsername())) {  
  8.             model = new ModelAndView("header1");  
  9.             jsonFileName = "<span style="color:#ff0000;">admin.json</span>";//根據(jù)文件名判斷讀取具體json文件  
  10.         } else {  
  11.             model = new ModelAndView("headerUser");  
  12.             jsonFileName = "<span style="color:#ff0000;">user.json</span>";</span>/<span style="font-size:16px;">/根據(jù)文件名判斷讀取具體json文件  
  13.   
  14.         }  
  15.           
  16.         String menue = <span style="color:#3333ff;">readJsonServiceImpl.getData</span>(jsonFileName);  
  17.           
  18.         model.addObject("menue", menue);  
  19.         return model;  
  20.   
  21.     }</span>  

4、html頁面 將jsonarray轉(zhuǎn)換成js對象

[javascript] view plain copy
  1. <span style="font-size:16px;">$(function() {  
  2.     var menue = JSON.parse('<span style="color:#ff0000;"><%=request.getAttribute("menue")%></span>');  
  3.     console.info(menue);  
  4.     createMenu(menue);//調(diào)用下邊的方法生成動態(tài)菜單</span>  

5、對js對象遍歷 $.append動態(tài)添加到對應(yīng)頁面

[javascript] view plain copy
  1. <span style="font-size:16px;">function createMenu(menue){  
  2.             /* 一級菜單 */  
  3.             $.each(menue,function(i,v){  
  4.                 var menu1 = '<li class="active"><a href="javaScript:;">';  
  5.                 /* menu1 += '<span class="glyphicon glyphicon-home"></span>'; */  
  6.                 menu1 += '<span class=' + '\'' + v.image + '\'' + '>' + '</span>';  
  7.                 menu1 += '<span style="margin-left: 10px;">' + v.name + '</span><span class="fa arrow"></span>';  
  8.                 menu1 += '</a>';  
  9.                 menu1 += '<ul class="nav nav-second-level nps collapse in">';  
  10.                   
  11.                  /* 二級菜單  */  
  12.                     $.each(v.submenu,function(j,vJ){                      
  13.                         var menu2 = '<li class="active">';  
  14.                         menu2 +=        '<a href="javaScript:;" class="">';  
  15.                         /* menu2 +=         '<span class="glyphicon glyphicon-cloud" style="margin-right: 10px;"></span>'; */  
  16.                         menu2 +=            '<span class=' + '\'' + vJ.image + '\'' + 'style=' + '\'' + 'margin-right: 10px;' + '\'' + '>' + '</span>';  
  17.                         menu2 +=             vJ.name + '<span class="fa arrow "></span>';  
  18.                         menu2 +=        '</a>';  
  19.                         menu2 +=                '<ul class="nav nav-third-level nps collapse in">';                             
  20.                               
  21.                         /* 三級菜單 */  
  22.                         if(vJ.submenu){  
  23.                             $.each(vJ.submenu,function(k,vk){  
  24.                                 var menu3 = '<li>';  
  25.                                 menu3 +=        '<a href="javascript:openUrl(\'' + vk.url + '\')">';  
  26.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
  27.                                 menu3 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vk.image + '\'' + '';  
  28.                                 menu3 +=            '</span>'+vk.name;  
  29.                                 menu3 +=        '</a>';  
  30.                                 menu3 +=    '</li>';  
  31.                                   
  32.                                 menu2 += menu3;  
  33.                                       
  34.                             });  
  35.                         }else{  
  36.                             $.each(v.submenu,function(j,vJ){  
  37.                                 var menu4 = '<li>';  
  38.                                 menu4 +=        '<a href="javascript:openUrl(\'' + vJ.url + '\')">';  
  39.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
  40.                                 menu4 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vJ.image + '\'' + '';  
  41.                                 menu4 +=            '</span>'+vJ.name;  
  42.                                 menu4 +=        '</a>';  
  43.                                 menu4 +=    '</li>';  
  44.                                       
  45.                                  menu2 = menu4;   
  46.                             });  
  47.                         }  
  48.                             menu1 += menu2;  
  49.                     });  
  50.                       
  51.                     $("#side-menu").append(menu1);  
  52.                 });  
  53.                   
  54.             }</span>  

6、效果如下圖

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(4222)

看看老外的社交APP UI界面設(shè)計，不知道你能有啟發(fā)不？

藍(lán)藍(lán)設(shè)計的小編

社交軟件已然成為現(xiàn)今人們溝通交流的主要媒介，那什么樣的對話頁面更大家受歡迎呢？對話頁面的ui要怎么設(shè)計呢？下面列舉12個國外社交app ui設(shè)計案例供設(shè)計師盆友們參考。

評論(0) 瀏覽(4279)

jquery原理的簡單分析

周周

       jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。

      /以下截取自jquery源碼片段
      (function( window, undefined ) {
      /*    源碼內(nèi)容    */
       })( window );

      上面這一小段代碼來自于1.9.0當(dāng)中jquery的源碼，它是一個無污染的JS插件的標(biāo)準(zhǔn)寫法，專業(yè)名詞叫閉包?？梢园阉唵蔚目醋鍪且粋€函數(shù)，與普通函數(shù)不同的是，這個函數(shù)沒有名字，而且會立即執(zhí)行，就像下面這樣，會直接彈出字符串。

      (function( window, undefined ) {
         alert("Hello World!");
       })( window );

       可以看出來這樣寫的直接效果，就相當(dāng)于我們直接彈出一個字符串。但是不同的是，我們將里面的變量變成了局域變量，這不僅可以提高運行速度，更重要的是我們在引用jquery的JS文件時，不會因為jquery當(dāng)中的變量太多，而與其它的JS框架的變量命名產(chǎn)生沖突。對于這一點，我們拿以下這一小段代碼來說明。

     var temp = "Hello World!";
        (function( window, undefined ) {
         var temp = "ByeBye World!";
        })( window );
        alert(temp);

       這段代碼的運行結(jié)果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘若我們?nèi)サ糸]包，則最終的結(jié)果會是ByeBye，就像下面這樣。

      var temp = "Hello World!";
        //    (function( window, undefined ) {
         var temp = "ByeBye World!";
      //    })( window );
       alert(temp);

       由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個內(nèi)容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的臨時變量，降低污染。

       剛才我們說了，jquery將自己聲明的變量全部都用外衣遮蓋起來了，而我們平時使用的Jquery和$，卻是真真實實的全局變量，這個是從何而來，謎底就在jquery的某一行代碼，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;
       這一句話將我們在閉包當(dāng)中定義的jQuery對象導(dǎo)出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認(rèn)的JS上下文環(huán)境，因此將對象綁定到window上面，就相當(dāng)于變成了傳統(tǒng)意義上的全局變量，就像下面這一小段代碼的效果一樣。

      var temp = "Hello World!";
      (function( window, undefined ) {
         var temp = "ByeBye World!";
         window.temp = temp;
       })( window );
       alert(temp);

       很明顯，它的結(jié)果應(yīng)該是ByeBye，而不是Hello。因為我們在閉包中導(dǎo)出了temp局部變量為全局變量，從而覆蓋了第一行聲明的全局變量temp。

        jquery最核心的功能，就是選擇器。而選擇器簡單理解的話，其實就是在DOM文檔中，尋找一個DOM對象的工具。

        首先我們進(jìn)入jquery源碼中，可以很容易的找到j(luò)query對象的聲明，看過以后會發(fā)現(xiàn)，原來我們的jquery對象就是init對象。

         jQuery = function( selector, context ) {
          return new jQuery.fn.init( selector, context, rootjQuery );
         }

         jQuery.fn = jQuery.prototype;

         jQuery.fn.init.prototype = jQuery.fn;
        這兩句話，第一句把jQuery對象的原型賦給了fn屬性，第二句把jQuery對象的原型又賦給了init對象的原型。也就是說，init對象和jQuery具有相同的原型，因此我們在上面返回的init對象，就與jQuery對象有一樣的屬性和方法。
很多時候，我們在jQuery和DOM對象之間切換時需要用到[0]這個屬性。從截圖也可以看出，jQuery對象其實主要就是把原生的DOM對象存在了[0]的位置，并給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段代碼簡單的看一下它的由來，下面是init方法中的一小段對DOMElement對象作為選擇器的源碼。

      // Handle $(DOMElement)
       if ( selector.nodeType ) {
            /*     可以看到，這里將DOM對象賦給了jQuery對象的[0]這個位置  */
            this.context = this[0] = selector;
            this.length = 1;
           return this;
        }

       這一小段代碼可以在jquery源碼中找到，它是處理傳入的選擇參數(shù)是一個DOM對象的情況?？梢钥吹?，里面很明顯的將jQuery對象索引0的位置以及context屬性，都賦予了DOM對象。代碼不僅說明了這一點，也同時說明了，我們使用$(DOMElement)可以將一個DOM對象轉(zhuǎn)換為jQuery對象，從而通過轉(zhuǎn)換獲得jQuery對象的簡便方法。

評論(0) 瀏覽(3103)

項目總結(jié)關(guān)于ionic3中的ion-segment的總結(jié)

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里


目前做的項目是ionic3和angular4.0的結(jié)合，所以用到了很多關(guān)于ionic3中封裝好的標(biāo)簽，例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結(jié)一下另外一個標(biāo)簽ion-segment的用法了。 
ion-segment這個標(biāo)簽以前用的很少，幾乎沒有用過。它主要是一組按鈕，有時稱為分段控件，之前都是用button按鈕，現(xiàn)在知道了，開始用ion-segment，因為它有自帶的樣式，這樣就可節(jié)省很多時間，同時呢允許用戶與許多控件的緊湊組進(jìn)行交互。 分段提供與標(biāo)簽相似的功能，選擇一個將取消選擇所有其他選項。 當(dāng)您希望讓用戶在應(yīng)用程序的不同頁面之間來回移動時，應(yīng)使用選項卡欄而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。 
下面來看一段代碼：

Segment 在頭部使用 

<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">帶iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 頭部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    •

Segment 在內(nèi)容里面使用 

<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內(nèi)容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以綁定一個事件(ionChange) </ion-segment-button> </ion-segment>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

Segment 在表單里面使用 

<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表單內(nèi)使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    •
Segment 配合ngSwitch使用 
<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 蘋果 </ion-segment-button> <ion-segment-button value="pie"> 梨 </ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    •
蘋果顯示，如果要默認(rèn)顯示一個就把默認(rèn)的那個設(shè)置一個初始值比如要默認(rèn)顯示蘋果就把蘋果的value值設(shè)置成change也就是說，在定義change變量的時候，需要把哪個設(shè)置為默認(rèn)顯示就把哪個的value值賦值給change作為初始值 public change=”pie”;


藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

評論(0) 瀏覽(6294)

css的多行省略號處理

周周

      在我們的頁面布局的時候，經(jīng)常會有這樣的需求，超過指定行文本的時候會進(jìn)行（省略號...）的處理，那么我們改怎么設(shè)置css呢？如下：

 設(shè)置盒子的css為：

  • overflow:hidden;;
  • text-overflow:ellipsis;
  • white-space:nowrap;

       但是這樣只能顯示一行而不能實現(xiàn)指定行，所以還要其他的方法來實現(xiàn)指定行處理的。



     WebKit瀏覽器或移動端的頁面（大部分移動端都是webkit）

        可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個不規(guī)范的屬性，它沒有出現(xiàn)在 CSS 規(guī)范草案中。



        -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)。 為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。
       常見結(jié)合屬性：
  • display: -webkit-box; 必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
  • -webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
  • text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。

     css 代碼:

  • overflow：hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp:2;/*這里控制著顯示多少行*/
  • -webkit-box-orient:vertical;


評論(0) 瀏覽(3209)

如何看懂UI效果圖

藍(lán)藍(lán)設(shè)計的小編

UI即User Interface（用戶界面）的簡稱。UI設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

評論(0) 瀏覽(4491)

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

博博


番茄匠APP 2018-05-18 15:07:48

美麗的獲獎網(wǎng)站

1. Feed

獎勵：Awwwards當(dāng)日的場地（6/6/2015）

Feed不僅是一個有趣的概念，它還有一個令人驚嘆的執(zhí)行過程，它挑戰(zhàn)了我們對網(wǎng)絡(luò)上的可能性的理解。通過動畫和視頻的創(chuàng)意融合，該網(wǎng)站讓用戶沉浸在非常吸引人的體驗中。作為一個非典型的網(wǎng)站，它還包含幾個獨特的可用性元素，其中包括一個導(dǎo)航，可以作為滾動進(jìn)度條加倍。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

2. crypton.trading

獎項：Awwwards當(dāng)日的場地（4/3/2018）

認(rèn)識你的機器人會計師crypton.trading。

Crypton.trading是比特幣等加密貨幣的交易中心，它使用人工智能來預(yù)測貨幣價值的變化并確定關(guān)鍵的購買和銷售機會。該網(wǎng)站因其開發(fā)和設(shè)計而被評為高，因為它逐漸向更多的下游游客滾動，更多地解釋了開發(fā)者的方法。

這個屢獲殊榮的網(wǎng)站讓熟悉技術(shù)的訪問者在主頁上出現(xiàn)Crypt的問候時感到賓至如歸，每次只有一封信。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

3. ETQ

獎勵：Awwwards當(dāng)日的場地（5/19/2015）

ETQ采用非常簡約的電子商務(wù)方式，在精簡的網(wǎng)站上放置大量引人注目的產(chǎn)品視頻。簡單，平坦，基于顏色的背景伴隨著強大的印刷術(shù)，有助于將注意力集中在用戶到達(dá)的地方：鞋子。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

4. Mikiya Kobayashi

獎勵：Awwwards當(dāng)日的場地（7/4/2015）

Mikiya是一位產(chǎn)品設(shè)計師，擁有簡約的作品集，通過強大的攝影和微妙的動畫展示了他的作品。他的全部網(wǎng)站最初是用日文創(chuàng)作的，然后翻譯成英文，這有助于展示他設(shè)計的國際可擴展性。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

5. Inside Abbey Road

獎項：最佳音樂網(wǎng)站，2016年威比獎

谷歌通過這個高度互動的網(wǎng)站將它從公園打出來，讓用戶可以進(jìn)入Abbey Road Studios。輝煌的聲音設(shè)計，導(dǎo)航機制以及混合了通常的“Google風(fēng)格”的視覺效果都有助于吸引訪問者訪問這個制作精良的網(wǎng)絡(luò)媒體資源。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

6. Citrix: The New Mobile Workforce

獎：每日網(wǎng)站（11/23/2017），最佳網(wǎng)站圖庫

這個網(wǎng)站致力于紅牛與基于云計算軟件公司思杰的合作，這是非常了不起的。

新移動員工隊是思杰旗下的一個網(wǎng)站，它使用全景攝影技術(shù)向觀眾展示思杰如何支持紅牛車隊的新賽車。即使你不是賽車愛好者，該網(wǎng)站的巧妙動畫也可以解釋復(fù)雜的汽車技術(shù)，這一點很難忽略。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

7. The History of Climate Change

獎勵：Awwwards當(dāng)日網(wǎng)站（6/23/2015）

按照Luc Jacquet的腳步，Wild-Touch將帶您參觀關(guān)于全球氣候變化歷史的視覺和教育之旅。歷史媒體和獨特動畫的混合有助于講述故事。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

8. Beagle

獎：每日網(wǎng)站（4/19/2015），最佳網(wǎng)站圖庫

比格爾以一種簡單易懂的方式在視覺上和逐步地講述他們產(chǎn)品的故事方面做得非常出色。這對許多創(chuàng)業(yè)公司來說是一個重大挑戰(zhàn)，特別是當(dāng)他們將新概念引入現(xiàn)有市場時。人們想知道，“你的產(chǎn)品是什么？它是如何工作的？為什么我在乎？” 比格爾回答所有這些問題，同時展示他們的產(chǎn)品并強制用戶購買。另外，他們是實際上正確實施“滾動劫持”的幾個網(wǎng)站之一。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

9. Southwest: Heart of Travel

獎：最佳視覺設(shè)計 - 審美，2018年威比獎

當(dāng)西南航空想要證明其客戶不僅僅是一個美元符號時，該公司創(chuàng)建了一個網(wǎng)站，其設(shè)計使用客戶航線的形狀進(jìn)行組裝。

這個名為“旅行之心 ”的網(wǎng)站甚至允許游客在他們計劃參加的旅行中創(chuàng)建自己的作品。這樣，西南航空的網(wǎng)站就是他們最忠誠的乘客的產(chǎn)品。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

10. Woven Magazine

獎：每日網(wǎng)站（4/4/2015），最佳網(wǎng)站圖庫

Woven是一個在線刊物，為藝術(shù)家，工匠和制作人員提供贊美。對我而言，他們代表了一種確認(rèn)，即出版物可以（也應(yīng)該）擁有美觀且引人入勝的網(wǎng)站，內(nèi)容易于閱讀。這個網(wǎng)站沒有像彈出窗口和突兀的廣告這樣的分心，而是關(guān)于內(nèi)容本身的體驗。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

11. JOHO's Bean

獎勵：當(dāng)日FWA（2015年8月8日），網(wǎng)站獎

JOHO's Bean的網(wǎng)站有令人難以置信的圖像，交互性，講故事，視覺設(shè)計，最重要的是音響工程。這些都聚集在一起，創(chuàng)造出一個引人入勝，情緒化和引人入勝的網(wǎng)站，講述咖啡豆之旅的故事。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

12. NOWNESS

獎項：最佳文化博客/網(wǎng)站，2017年威比獎

Nowness可能是當(dāng)今互聯(lián)網(wǎng)上最酷的眾包視頻博客。那真是一口......所有這些意味著什么？

NOWNESS的“眾包”性質(zhì)是其獲獎?wù)叩囊徊糠帧＿@意味著其大部分內(nèi)容來自獨立廣告素材 - 這是企業(yè)發(fā)布內(nèi)容的一種日益流行的方式。NOWNESS也是一個視頻博客，這意味著它的所有博客內(nèi)容都是視頻格式。總之，這些品質(zhì)有助于使Nowness成為各個品牌努力講述的故事的迷人中心。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

13. Virgin America

獎項：最重要的行業(yè)演變，2014 UX獎

在一個已知航空網(wǎng)站充斥著主要可用性問題的世界中，維珍美國公司擁有推動可用性，可訪問性和快速響應(yīng)設(shè)計的最佳網(wǎng)站之一。事實上，它被命名為第一個真正快速響應(yīng)的航空公司網(wǎng)站，這是該行業(yè)的一個新的先例。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

14. World of SWISS

獎項：最佳用戶界面，2015年威比獎

另一家航空公司？發(fā)生什么事？！是的，瑞航的航空公司建立了一個令人難以置信的身臨其境的網(wǎng)站，講述他們的故事，并描述與他們一起飛行的感覺 - 而且他們的工作太過繁重，無人理睬。強大的視覺效果和動畫將用戶介紹到網(wǎng)站的不同部分，這些部分除了通常的銷售和市場營銷信息外，還包含了今天如此常見的信息。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

15. Reductress

獎項：最佳幽默網(wǎng)站，2018年威比獎

在互聯(lián)網(wǎng)上嘲笑別人并不難，我們在網(wǎng)上閱讀和消費的東西很多都是為了娛樂。但是對于大量觀眾來說，很難一致地做到這一點。Reductress是一本諷刺雜志，其頭條和一般閱讀體驗是幽默部門的 - 使網(wǎng)站本身成為一個高質(zhì)量的財產(chǎn)。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

其他酷網(wǎng)站設(shè)計

16. Minimums

Minimums采用非常大膽的方式展示他們的內(nèi)容，利用基于網(wǎng)格的網(wǎng)站設(shè)計，大字體和全幅高質(zhì)量圖像。他們的網(wǎng)站是如何正確執(zhí)行網(wǎng)格結(jié)構(gòu)，同時在設(shè)計中保持良好的視覺層次結(jié)構(gòu)的一個非常好的例子。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

17. Guillaume Tomasi

作為蒙特利爾的攝影師，Guillaume Tomasi建立了一個真正適合他的獨特而令人敬畏的攝影作品。他超現(xiàn)實的照片風(fēng)格與簡單，平坦，空洞，簡約的組合設(shè)計并列，將所有的焦點放在作品本身上。

他獨特的系列導(dǎo)航加上藝術(shù)畫廊風(fēng)格的作品介紹和完美的滾動互動讓人聯(lián)想到真實畫廊的體驗。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

18. The District

這家品牌代理機構(gòu)認(rèn)真對待它的形象，它應(yīng)該 - 為客戶處理所有媒體渠道。該地區(qū)的網(wǎng)站，是通過一些你見過的最美麗的藝術(shù)品和攝影的旅程。

當(dāng)你探索網(wǎng)站時，這些挑釁性的瓷磚變化很快，而且他們看起來更加奇特，對你學(xué)習(xí)過去的工作越感興趣。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

19. Tej Chauhan

Tej Chauhan通過這個有趣的網(wǎng)站將印象派藝術(shù)品變成了商業(yè)模式。該產(chǎn)品開發(fā)人員主頁上的每張圖片都會滑出以覆蓋上一張圖片，從而為您現(xiàn)在在您面前看到的物體提供很少的背景信息。

但是，是不是缺乏正確的背景知識，讓你想了解更多？標(biāo)語“近期未來的紀(jì)念品”表明這些物品是他們產(chǎn)品線的一部分 - 這是您將這些創(chuàng)新物品帶入您的生活的機會。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

20. Amanda Martocchio Architecture

一家建筑公司可能并不專注于網(wǎng)站開發(fā)，但其網(wǎng)站仍應(yīng)展示其對視覺上令人愉悅的設(shè)計的承諾。這個華麗的網(wǎng)站讓阿曼達(dá)·馬托基奧把它放在心上。

Amanda Martocchio Architecture喜歡它的作品并不是什么秘密- 它網(wǎng)站主頁上的每張圖片都是公司設(shè)計的房屋的迷人鏡頭。該網(wǎng)站標(biāo)出了每個房屋的滾動條件，以及各種建筑物的各種角度。

2018年的20個最佳網(wǎng)站設(shè)計啟發(fā)你！

評論(0) 瀏覽(3720)

Dribbble 界面設(shè)計靈感 33

博博


UI設(shè)計愛好者 2018-05-03 16:58:07

作者：設(shè)計達(dá)人（ID：shejidaren888）

這次 Dribbble UI 靈感主要精選網(wǎng)頁、APP 以及一些后臺管理界面，每個精選出來的界面設(shè)計的贊數(shù)都是幾百+或者幾 K ~

PS：當(dāng)你看中某作品時，你可以點擊作者名稱來查看該設(shè)計師更多作品。（微信公眾號不支持外鏈，只能點「閱讀原文」來查看所有鏈接）

Dribbble 界面設(shè)計靈感 #33

Dribbble 界面設(shè)計靈感 33

個人主頁設(shè)計 by Mike

Dribbble 界面設(shè)計靈感 33

CRM 管理系統(tǒng)界面設(shè)計 by Divan Raj

Dribbble 界面設(shè)計靈感 33

EverDo 應(yīng)用界面 by Jakub Reis

Dribbble 界面設(shè)計靈感 33

接上，EverDo 界面的一些表單元素 by Balkan Brothers

Dribbble 界面設(shè)計靈感 33

隨機實驗 by Nick Franchi

Dribbble 界面設(shè)計靈感 33

Coindesk by uixNinja

Dribbble 界面設(shè)計靈感 33

一套 UI 素材：Planguru by Patryk Pustol

Dribbble 界面設(shè)計靈感 33

酒店 APP 后臺（iPhoneX） by Divan Raj

Dribbble 界面設(shè)計靈感 33

B3Sound 網(wǎng)站著陸頁設(shè)計 by Outcrowd

Dribbble 界面設(shè)計靈感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面設(shè)計靈感 33

Iterable 插畫草圖 by Ramotion

Dribbble 界面設(shè)計靈感 33

后臺界面 by uixNinja

Dribbble 界面設(shè)計靈感 33

Dating 應(yīng)用項目 by Divan Raj

Dribbble 界面設(shè)計靈感 33

Benti by Jakub Dziedzic ??

Dribbble 界面設(shè)計靈感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面設(shè)計靈感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面設(shè)計靈感 33

Chripcase 后臺界面 by Goutham

Dribbble 界面設(shè)計靈感 33

Raika Plant by Nicola Baldo

Dribbble 界面設(shè)計靈感 33

網(wǎng)頁聊天應(yīng)用界面 by Michal Parulski

Dribbble 界面設(shè)計靈感 33

網(wǎng)頁版的音樂 UI by Giga Tamarashvili

Dribbble 界面設(shè)計靈感 33

Music UI by Giga Tamarashvili

Dribbble 界面設(shè)計靈感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面設(shè)計靈感 33

USB Types by Gal Shir

Dribbble 界面設(shè)計靈感 33


評論(0) 瀏覽(2997)

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

博博


UI設(shè)計愛好者 2018-05-07 11:31:09

在2013年的時候使用全屏背景或者大圖片的網(wǎng)頁開始流行起來，到了今年，還是經(jīng)?？吹竭@類風(fēng)格的頁面出現(xiàn)，可見這個趨勢還是很流行的，值得運用。

一張大圖再配合一個優(yōu)秀的排版布局，這樣一個美麗的頁面就形成了，比起視差網(wǎng)頁、動效網(wǎng)頁成本低了很多，但視覺效果還是能令人滿意的，下面精選一些優(yōu)秀的大背景網(wǎng)頁設(shè)計作品給你欣賞，也行會給你帶來更多靈感哦！

這于高清圖片素材建議大家去設(shè)計導(dǎo)航里面的免費圖片素材上查找。

Nike – Ge? Kendini

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Edwin Europe

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Esprit Cox

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Feed

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Truth Labs Portfolio

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Natural Food & Beverages

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

La Plus GRANDE Cave à Bière Du Monde

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Ice And Sky : The History Of Climate Change

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Fivefootsix

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

For Better Coffee

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Brdr. Krüger

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

The Boat

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Beagle – Better Proposals

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Webdesign Agency Weblounge

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Words Can Save

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Well Storied

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Fabrica

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Alexander Engzell Portfolio

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Cartelle Amsterdam

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Printemps Du Polar

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

Ashworth GOLF/MAN

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

HBM FiberSensing

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

查看網(wǎng)頁

The | Marmalade

23個使用大背景的全屏網(wǎng)頁設(shè)計作品

評論(0) 瀏覽(3095)

日歷

鏈接

個人資料

存檔